Was ist eigentlich Responsive Webdesign

| | Browser, Programmierung, Web

Unter „Responsive Webdesign“ versteht man ein Design, welches sich für alle Endgeräte optimal anpasst, dass heißt die Darstellung des Designs passt sich der jeweiligen Größe an.

Screenshot_2013-04-27-12-38-13[1]

Dem responsive Webdesign verdanken wir viele praktische Webseiten, welche wir nun auch mit dem Handy sehr einfach aufrufen und anzeigen lassen können.
Da die Tablet und Handy Nutzer in den letzten Jahren immer mehr werden, ist die Wichtigkeit von responsive Webdesign immer mehr angestiegen.

Doch wie genau funktioniert das nun?

Responsive Webdesign ist eine Technik welche mittel HTML5 und CSS3 funktioniert, weshalb es bei älteren Browsern hier auch zu Problemen kommen kann.

Durch CSS3 wird die Möglichkeit der „Media Queries“ geschaffen, da das ganze doch sehr selbsterklärend ist, hier ein Beispiel:

  1. #inhalt {
  2.   width: 800px;
  3. }
  4. @media screen and (max-width: 1024px) {
  5.   #inhalt {
  6.     width: 600px;
  7.   }
  8. }

In Zeile 1 sehen wir das ein Element mit der ID „Inhalt“ die Breite von 800px bekommt, ist der Betrachter der Seite nun aber ein Bildschirm (siehe Z. 4) und hat eine Maximale Breite von1024px so wäre der Inhalt nur 600px breit (siehe Z. 6).

Von diesen Bedingungen (siehe Z. 4) gibt es nun sehr viele verschiedene wie „handheld“, „tv“ oder „print“, zusätzlich durch die Bedingungen der Breite lassen sich schöne responsive Designs umsetzten.

Da nun bestimmt werden kann wie groß das Endgerät ist, lässt sich das Design optimal für das Gerät mittels CSS optimieren.

Und auch bei diesem Thema stellen wir wieder fest, wie wichtig es ist einen ordentlichen und aktuellen Browser zu benutzten, sei es nun auf dem Tablet, Handy oder PC.

P.S. Diese Seite hat auch ein responsive Design

Neueste Beiträge

Introducing a simple Docker Compose setup for HMS MQTT Publisher

I’ve been tinkering with my home automation setup recently, specifically integrating HMS-XXXXW-2T series micro-inverters with my system. The hms-mqtt-publisher[GitHub, External] is a neat tool that does just that by fetching telemetry info from these inverters and publishing it to an MQTT broker. The catch? It typically requires compiling from source with Cargo, Rust’s package manager.


Weiter >>

Effortlessly Backing Up Paperless-ngx with Cloudflare, rclone, and Docker

In the digital age, data backup is a non-negotiable part of managing any document management system. For those of us relying on the efficiency and organizational prowess of Paperless-ngx, ensuring our data is safe and recoverable is paramount. I’ve devised a seamless backup solution that utilizes the power of Cloudflare’s rclone and Docker, guaranteeing peace of mind and data security. Here’s a detailed look into my approach, which is applicable not just for Paperless-ngx but for any data stored on R2 storage. (https://www.cloudflare.com/developer-platform/r2/, Pricing: https://www.cloudflare.com/plans/developer-platform/ (10GB/Month for free))


Weiter >>

Ein Leitfaden für Senioren: Günstige Smartphones und Handys für Senioren bis 170 Euro

Mit über 80 Jahren beschlossen mein Opa, sich der digitalen Welt anzuschließen. Meine Oma nutzt bereits ein Xiaomi-Handy und schätzt dessen Einfachheit. Nun möchte mein Opa auch ein Mobiltelefon, das eine gute Kamera hat und einfach zu bedienen ist, aber dennoch WhatsApp und andere Funktionen unterstützt – und besonders wichtig: Kein Senioren Handy

Kurzversion: Am Ende ist es das Xiaomi Redmi 12 geworden, was zu dem Zeitpunkt bei Amazon für 149,90 Euro verfügbar war*


Weiter >>