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 22: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!

Autor: , veröffentlicht: , letzte Änderung:

Kontakt

Copyright / License of sources

Copyright (c) 2007-2017, Udo Schmal <udo.schmal@t-online.de>

Permission to use, copy, modify, and/or distribute the software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

Service Infos

CMS Info Product Name:
UDOs Webserver
Version:
0.3.2.152
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Sa, 23 Jun 2018 00:21:47
Development Info IDE:
Lazarus LCL 1.9.0.0
Compiler:
Free Pascal FPC 3.1.1
compiled for:
OS:Win64, CPU:x86_64
Hardware Info Model:
Precision WorkStation T3500
CPU Name:
Intel(R) Xeon(R) CPU W3530 @ 2.80GHz
CPU Type:
x86_64, 1 physical CPU(s), 4 Core(s), 8 logical CPU(s), 2800 MHz