Responsive Webdesign & Media Queries

Browserweiche Smartphone, Tablet und PC

Mehr denn je wird im Internet Wert auf die Geräte abgestimmte Darstellung des Seiteninhalts Wert gelegt, für die Realisierung gibt es bislang kein Universalrezept, jedoch steht eines fest, bereits beim Entwerfen des eigentlichen Webauftritts sollte darauf geachtet werden, dass gewisse Regeln beim Anlegen des Seitenaufbaus beachtet werden müssen.

Existiert erst einmal ein Webauftritt und soll im Nachhinein ein mobiler Webauftritt realisiert werden ist im Regelfall ein größere Entwicklungsaufwand erforderlich als zum Entwickeln eines Responsive Webdesigns.

Es gibt unterschiedliche Herangehensweisen die schon alleine daraus resultieren ob der Weg von einen "großen Layout" zu einem "kleinen Layout" gewählt wird oder umgekehrt "Mobile First", also eine Reduktion des Inhaltes erforderlich ist oder eine Expansion möglich ist!

Bei Responsive Design Webauftritten sollte bereits bei den Entwürfen darauf geachtet werden, das sie ins kleinste für sie angedachte Format passen, sicherlich sieht ein Entwurf  in großzügigen Abmessungen meist besser aus, allerdings scheitert es dann bei der Realisierung! Sehr hilfreich sind in dieser Phase Wireframes, falls ein Detail getreuer Entwurf existiert sollte dieser in Form eines Content-Reference-Wireframe zerlegt werden und dann sollten für alle weiteren kleineren Stufen ebenso Content-Reference-Wireframe angelegt werden, die sich jeweils an den kleinsten gültigen Abmessungen halten.

Sind die Abhängigkeiten der einzelnen Blöcke in der Struktur geklärt und deren Verhalten bei einer Größenänderung bzw. Änderung der Geräteausrichtung, können für die Abmessungen/Stufen mit Hilfe von Media Queries sowohl Positionierung und als auch Abmessungen, also Merkmale der Blöcke definiert werden. Erst im Anschluss sollten die Details im Stylesheet ausgearbeitet werden, wobei globale als auch nur in einer Stufe gültige Eigenschaften den richtigen Media Queries zugeordnet werden sollten, gelten Regeln über mehrere Stufen ist auch darüber nachzudenken ob nicht ein neuer kombinierter Media Query Sinn macht!

Wird zuerst ein Layout umgesetzt existieren unter Umständen Regeln oder sogar Anordnungen von Elementen die die Realisierung der weiteren Layouts erschweren, oder sogar nur über Tricks ermöglichen, die dann wiederum zu weiteren Problemen führen. Spätestens wenn Probleme auftreten sollte man sein vorgehen überdenken, die Struktur überprüfen und dann zumindest bei komplexen Seiten auf die bereits zuvor erwähnte Methode (Wireframes) zurückgreifen.

media-queries.css StyleSheet (866 Bytes) 23.02.2014 23:41
@media only screen and (min-width: 320px) and (max-width: 479px) {
  /* Smartphones im Portait Modus */
}
 
@media only screen and (min-width: 480px) and (max-width: 767px) {
  /* Smartphones im Landscape Modus */
}
 
@media only screen and (min-width: 768px) and (max-width: 999px) {
  /* Tablets im Portrait Modus */
}

@media only screen and (min-width: 1000px) and (max-width:1024px) {
  /* Tablets Landscape Modus & (PC) */
}

@media only screen and (min-width: 1025px) {
  /* PC */
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
  /* Retina Display */
}

In dem Beispiel habe ich einige Möglichkeiten aufgeführt man sollte sich aber nie an eine feste Struktur klammern sondern eher darauf achten, ab welcher Auflösung ein Aufbau nicht mehr sinnvoll ist, also z.B. auf einer Seite im Browser auf einem PC 16:9 kann ein Dreispalten-Layout super gut aussehen auf einem Tablet im Portrait Mode wären eher zwei Spalten angebracht und auf einem Smartphone eher eine Spalte, aber dazwischen existieren Grauzonen, denn schon im Bereich Smartphone/Tablet gibt es fast fließende Übergänge.

Ab welchem Grenzwert man nun genau Umschalten sollte ist vom Layout abhängig!

Kontakt

Udo Schmal
Udo Schmal

Udo Schmal
Softwareentwickler
Ellerndiek 26
24837 Schleswig
Schleswig-Holstein
Germany




+49 4621 9785538
+49 1575 0663676
+49 4621 9785539
SMS
WhatsApp

Google Maps Profile
Instagram Profile
vCard 2.1, vCard 3.0, vCard 4.0

Service Infos

CMS Info

Product Name:
UDOs Webserver
Version:
0.5.1.200
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Wed, 25. Sep 2024 20:55:53

Development Info

Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64

System Info

OS:
Ubuntu 22.04.5 LTS (Jammy Jellyfish)

Hardware Info

Model:
Hewlett-Packard HP Pavilion dm4 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2430M CPU @ 2.40GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s),  MHz