…die unterschiedlichen Größen von Devices. Websites sollen gleichermaßen gut auf widescreen-Monitoren bis hin zu Mobiltelefonen dargestellt werden. Responsive Design wird durch CSS „media queries“ (Medienabfragen) ermöglicht. Medienabfragen sind eine Möglichkeit, um CSS-Regeln bedingt anzuwenden. Dem Browser wird dabei mitgeteilt, dass er je nach Gerät des Benutzers bestimmte Regeln anwenden oder ignorieren soll.
Media Queries zeigen den gleichen HTML-Inhalt als unterschiedliche CSS-Layouts an. Anstatt eine Website für Smartphones (mobile) und eine völlig unabhängige Website für Laptops/Desktops (desktop) zu entwickeln, kann das gleiche HTML-Markup für beide Ansichten verwendet werden.
Media Queries beginnen immer mit @media (at-rule), gefolgt von Bedingungen und geschwungenen Klammern. Innerhalb der Klammern sind die CSS-Anweisungen notiert. Der Browser führt nur dann Regeln aus, wenn die Bedingung erfüllt ist.
Note: Der Medientyp only screen bedeutet,
dass die enthaltenen Styles nur auf Geräte mit Bildschirmen angewendet werden sollen –
im Gegensatz zu print für gedruckte Documente (Cmd P).
min-width und max-width werden „Medienmerkmale“ genannt und
geben die gezielten Geräteabmessungen an.
Mehr dazu auf
developer.mozilla.org
1. „fluid“ Layout: Dehnt sich aus und schrumpft zusammen,
um die Breite des Bildschirmes zu füllen. Dazu gehört Flexbox.
2. „fixed-width“ Layout ist das Gegenteil: Es hat immer die gleiche Breite, unabhängig der Bildschirmgröße.
Mit Fluid-Layouts können eine Reihe von Bildschirmbreiten angesprochen werden, anstelle von nur einer bestimmten Bildschirmbreite.
Die exakten Pixelwerte für die min-width- und max-width-Parameter in einer Medienabfrage (gemeinsam „breakpoints“) sind also weniger wichtig als vielmehr der definierte Bereich. Alles, was dazwischen liegt, passt sich an das Gerät an.
Mögliche Anweisung in CSS:
/* mobile */
@media only screen and (max-width: 400px) {
…
}
/* tablet */
@media only screen and (min-width: 401px) and (max-width: 960px) {
…
}
/* desktop */
@media only screen and (min-width: 961px) {
…
}
Mobile-first Development: Hierbei startet man mit der Entwicklung des mobilen Layouts und arbeitet sich zum Desktop-Layout hoch
(bottom up). Desktop-Layouts sind in der Regel komplexer und der Einstieg mitunter schwieriger.
Desktop-first Development: Ist genau der umgekehrte Weg – man startet mit der Entwicklung des Desktop-Layouts und bricht das Layout herunter (top down).
Vor Einzug des Responsive Designs, hatten mobile Geräte nur ein Desktop-Layout zum darstellen. Um damit umzugehen, wurde die Seite gezoomt. Dieses Standardverhalten verhindert allerdings, dass mobile Geräte das mobile Layout nutzen – was seltsam ist.
Um das Viewport Zooming auszuschalten, wird folgendes Markup im <head> benötigt:
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
Responsive und Adaptive Design sind ähnlich, aber eben doch nicht gleich. Die beiden Ansätze ergänzen sich, daher gibt es hier kein „richtig oder falsch“.
Note: Responsive Design antwortet auf die Viewportgröße des Browsers und passt sich flüssig verschiedenen Browsergrößen an – unabhängig vom Device, von dem aus eine Website besucht wird. Umgesetzt wird ein solches Design mithilfe von Media Queries, mit denen definiert wird, an welchen Stellen Content umbricht. Adaptive Design dagegen passt sich der Breite des Browsers an bestimmten Stellen an. Im Gegensatz zum Responsive Design ist das Umspringen von einer Darstellung zur anderen weniger flüssiger; zudem ist ein Adaptive Design deutlich Device-orientierter, denn je nachdem auf welchem Device oder mit welchem Browser eine Seite aufgerufen wird, variiert deren Darstellung.
Note: The viewport is the user's visible area of a web page.
Je schmaler der Bildschirm des Endgerätes ist, auf dem der Content ausgespielt wird, desto mehr Elemente werden untereinander statt nebeneinander angeordnet. Alle späteren Inhalte rutschen entsprechend noch weiter nach unten. Das nennt man den Flow.
Wenn die Größe des Bildschirms, auf der Inhalte angezeigt werden können, variiert, ist auch die Pixeldichte der angezeigten Fläche nicht mehr in Stein gemeißelt. Für Webdesigner macht es also Sinn, von festen Pixelvorgaben abzurücken und stattdessen relative Größeneinheiten zu definieren – wie etwa „50 Prozent des Screens“ oder „100 Prozent des Screens“. Diese passen sich dann an das jeweils genutzte Ausgabeformat an.
Breakpoints definieren, an welchen Stellen das Layout einer Seite umbrechen darf. Auf diese Weise können Webdesigner sicherstellen, dass ein Umbruch im Design, etwa wenn sich die Seite verschmälert, nicht zu einem inhaltlichen Bruch führt. Breakpoints sollen mit Umsicht genutzt werden, denn wenn es schwierig ist zu verstehen, welche Inhaltselemente voneinander abhängen, können Breakpoints schnell für Chaos sorgen.
Dieses Prinzip verhindert, dass Inhalte auf dem Smartphone oder dem Tablet zu klein dargestellt werden – oder auf größeren Bildschirmen zu sehr in die Breite gehen. Einfach einen Pixelwert für die maximale Breite definieren und der Verzerrungs-Effekt bleibt aus.
Hier werden mehrere inhaltliche Elemente innerhalb eines Containers gruppiert und können somit gemeinsam bewegt werden. Dies macht die Arbeit für Webdesigner oftmals einfacher, da sie nicht so viele Elemente einzeln bearbeiten müssen.
Diese beiden Leitprinzipien des Responsive Webdesign geben an, welcher Startpunkt für das Design einer Webseite gesetzt wird: Beginne ich auf dem kleinen Screen und passe das Design für größere Auflösungen an – oder starte ich mit der Desktop-Version und arbeite mich zu den kleineren Smartphone-Größen vor? Technisch gesehen gibt es keine großen Unterschiede. Einfach mal loslegen und schauen, welcher Ansatz besser funktioniert.
Webfonts gibt es in unzählichen Varianten und lassen Websites sehr schön individualisieren. Die Wahl der eingebetteten Schriften kann aber auch einen Einfluss auf die Ladezeiten der Webseite haben. Die im Betriebssystem der Nutzer vorinstallierten „System Fonts“ werden hingegen schnell wie der Blitz angezeigt – sofern die gewählte Systemschrift auch im Geräte-Setup des Nutzers angelegt ist.
Wenn Logos und Grafiken eine kleine Dateigröße haben und dennoch gut skalieren sollen, ist es ratsam, auf Vektoren, zum Beispiel SVG-Dateien oder Icon-Fonts, zurückzugreifen. Bilder im JPG-, PNG- oder GIF-Format müssen in der Regel optimiert werden und sind wesentlich größer, dagegen können sie Details oder Effekte besser abbilden als Vektoren.
Seit den frühen Zeiten hat sich für Webdesigner viel verändert. Doch noch immer ist nicht alles möglich und noch immer hängt viel von der „Übersetzung“ der Ideen in die richtigen Zeilen Code ab. Eine Welt, in der es noch weniger technische „Frickelei“ im Webdesign gibt, wenn es um schöne und inspirierende Designs geht, wäre wünschenswert. Stellen wir uns vor, dass Designer einfach Elemente auf dem Bildschirm neu anordnen und es kommt ein neuer, sauberer Code dabei heraus. Oder dass Entwickler sich nicht um Browser-Kompatibilitäten kümmern müssen, sondern sich auf das Lösen von Problemen konzentrieren können. Einige Ansätze gibt es bereits, um diese Zukunft Wirklichkeit werden zu lassen. Etwa Flexbox, mit dem sich Layouts in CSS deutlich einfacher und flexibler gestalten lassen, oder neue CSS-Elemente wie vh (viewport height) oder vw (viewport width), die es einfacher machen, Elemente auf einer Seite zu positionieren. Ein weiteres viel versprechendes Konzept ist das der Web-Components, bei denen einzelne Website-Elemente wie zum Beispiel Bildergalerien oder bestimmte Formulare als einfach einzubindende (und einfach zu pflegende) Bündel zusammengefasst werden, so dass nicht mit unzähligen verschiedenen Plugins gearbeitet werden muss. Es bleibt also spannend!