Wir programmieren auch responsiv mit HTML5 und CSS3
Mit responsivem Webdesign stehen uns neue Wege zur Verfügung, Homepages für
mehrere Endgeräte optimiert zu programmieren. Hier erläutern wir Ihnen kurz,
was genau responsives Webdesign bedeutet.
Was bedeutet überhaupt "responsiv"?
Responsiv bedeutet sich anpassend, beweglich, dynamisch oder auch aktiv. Und genau das ist es,
was das neue Design ausmacht: Es passt sich den Größen unterschiedlichster Geräte an. Z. B. Dem
Bildschirm bei Desktop-Computern, Laptops, Netbooks, Tablets, Smartphones uvm.
Wieso responsives Webdesign verwenden?
Noch vor ein paar Jahren wurden Layouts mit Tabellen oder festen Rastern, auch "Fixed Grids" ge-
nannt, umgesetzt. Damals musste man das Design noch an verschiedene Bildschirmgrößen, wie zum
Beispiel 800 x 600 oder 1.024 x 768 Pixel anpassen, um ein perfektes Ergebnis zu erreichen. Das De-
sign war nur an eine Auflösung angepasst und konnte sich nicht frei bewegen (fixed).
Internetflats waren noch nicht gängig, somit wurden Daten pro übertragenes Kilobyte abgerechnet.
Da das Mobilfunknetz mit Internetübertragung nicht sonderlich gut ausgebaut war, versuchte man die
Seite aus Kosten- und Zeitgründen so klein wie möglich zu halten. Für einheitliche mobile Geräte er-
stellte man deswegen mit Hilfe einer zweiten Domain, meistens mit dem Buchstaben "m" markiert,
eine abgespeckte Version der normalen Homepage, damit die wichtigsten Informationen auch mobil
abgerufen werden konnten.
Durch das Erscheinen von iPhone, Android-Systemen und auch Tablets sowie die Verbesserung der
flächendeckenderen Mobilfunkinfrastruktur kann das alt bewährte Prinzip jedoch nicht so weiterge-
führt werden. Allein durch die Vielzahl der zu bedienender Bildschirmauflösungen ist eine optimale
Anpassung mit der ehemaligen Lösung nicht möglich. Desweiteren steigen die Ansprüche an die
Funktionalität der Websites auf mobilen Geräten stetig.
Klar, es wäre (noch weitgehend) möglich für jedes Endgerät eine eigene Seite zu basteln, aber wer
soll hierzu die Zeit haben und wer soll die Zeit bezahlen? Außerdem, was, wenn sich weitere Geräte
mit ganz anderen Bildschirmauflösungen am Weltmarkt durchsetzen? Pflegen wir dann irgendwann
20 verschiedene Websiteversionen ein und derselben Website?
Und die Antwort lautet: "Nein, natürlich nicht!"
HTML5 und CSS3, verbunden mit jQuery und Javascript ermöglichen uns einen pflegeleichten
und unkomplizierteren Lösungsweg. Die Zauberformel lautet: "responsives Webdesign".
Responsives Webdesign bezeichnet ein Design, dass mit einem flexiblen Layout oder
Raster und flexiblen Inhalten auf jeglichen beliebigen Endgeräten allzeit das beste
Userfeeling bietet. Das Design reagiert auf den Nutzer und dessen Geräteanforderungen.
Wie machen wir das?
Anstatt bisher normaler Schriftgrößenangaben via Pixel arbeiten
wir in der responsiven Programmiermethode mit relativen Werten.
Wichtig ist es, z. B. bei Schriftgrößen, Zeilenhöhen, Abstandsan-
gaben usw. mit "%" und "em" zu arbeiten.
Desweiteren verabschieden wir uns von festen Layout-Größen
und geben auch hier Längen- und Breitenangaben in Prozent an.
So kann jedes Endgerät im Prozentualen Verhältnis die ent-
sprechenden Daten lesen, anpassen und anzeigen.
Hier ein Beispiel:
Anstatt eine Überschrift mit "16 Pixel" zu definieren, geben wir
der Überschrift einfach den Wert "100%" oder "1em".
Media Queries
CSS Media Queries sind schlussendlich der Kern eines erfolgreichen responsiven Webdesigns.
Kurz erklärt: Mit dem "media" -Tag, lässt sich die Zuweisung bestimmter Stylesheets für bestimmte
Endgeräte steuern. Mit media="screen and (max-device-width: 320px)" wird das Stylesheet geladen,
das ideal für Endgeräte angepasst ist, die eine maximale Breite von 320 Pixel anzeigen können. Es
können auch Angaben mit minimaler Breite (min-width) gemacht werden.
Ein Beispiel hierzu:
Media Queries werden von allen modernen Browsern ohne besondere Erweiterungen unterstützt.
Mit responsivem Webdesign kann man eine Homepage nicht auf jedem Endgerät identisch aussehen
lassen, da jedes Endgerät verschiedene Ausgangswerte hat. Um jegliche Problemstellen auszu-
merzen, sollte man von aufwendigsten, pixelgenauen Verzierungen absehen, da ständig neue
internetfähige Geräte mit verschiedenen Darstellungsgrößen auf den Markt kommen. Jeder neue
LED-Fernseher hat einen Netzwerkzugang und einen Internetbrowser installiert - egal ob 26 Zoll,
37 Zoll oder größer als 55 Zoll. Aber wir erreichen zu fast 100% unsere Wunschdarstellung
Umfangreiche und Komplexe Designs
Natürlich gibt es auch bei responsivem Webdesign Nachteile. Gerade bei komplexen und grafisch
sehr aufwändigen Seiten ist nicht möglich, responsiv zu programmieren, da es hier recht große
Einschnitte für das Design bedeuten würde und eventuell die eigentliche Funktion der Website
verloren geht. Verschiedene Designs mit ausgeklügelt positionierten Div-Boxen sollte man des-
halb nur für die ganz normale Version - so wie sie jeder kennt - nämlich am PC, verwenden.
Aber um nicht auf eine mobile Version verzichten zu müssen, empfiehlt sich hier eine Weiche
einzubinden, die auf eine separate, abgespeckte Version der Seite verweist. Diese mobile Version
kann dann wiederum responsiv programmiert werden, damit diese auf allen mobilen Geräten angepasst angezeigt werden kann.
Hier ein responsives Beispiel bei verschiedenen Bildschirmgrößen:
Es ist zu sehen, dass die sich die Darstellung in den verschiedenen Versionen ändert. Bei Betrach-
tung im Standardbildschirm wird alles in der normalen Größe dargestellt. Bei Geräten mit klei-
nerem Bildschirm verändert sich das Aussehen prozentual zur Bildschirmgröße.
Bei kleinen Geräten, wie z. B. dem iPhone wird ein anderes Layout gewählt (siehe MediaQueries ).
Auftreten der verschiedenen Bildschirmgrößen in der mobilen Welt:
Natürlich könnten wir noch tiefer in das Thema responsives Webdesign einsteigen, jedoch wollen
wir nur eine kurze Erklärung abgeben, was das neue Design mit sich bringt.
mehrere Endgeräte optimiert zu programmieren. Hier erläutern wir Ihnen kurz,
was genau responsives Webdesign bedeutet.
Was bedeutet überhaupt "responsiv"?
Responsiv bedeutet sich anpassend, beweglich, dynamisch oder auch aktiv. Und genau das ist es,
was das neue Design ausmacht: Es passt sich den Größen unterschiedlichster Geräte an. Z. B. Dem
Bildschirm bei Desktop-Computern, Laptops, Netbooks, Tablets, Smartphones uvm.
Wieso responsives Webdesign verwenden?
Noch vor ein paar Jahren wurden Layouts mit Tabellen oder festen Rastern, auch "Fixed Grids" ge-
nannt, umgesetzt. Damals musste man das Design noch an verschiedene Bildschirmgrößen, wie zum
Beispiel 800 x 600 oder 1.024 x 768 Pixel anpassen, um ein perfektes Ergebnis zu erreichen. Das De-
sign war nur an eine Auflösung angepasst und konnte sich nicht frei bewegen (fixed).
Internetflats waren noch nicht gängig, somit wurden Daten pro übertragenes Kilobyte abgerechnet.
Da das Mobilfunknetz mit Internetübertragung nicht sonderlich gut ausgebaut war, versuchte man die
Seite aus Kosten- und Zeitgründen so klein wie möglich zu halten. Für einheitliche mobile Geräte er-
stellte man deswegen mit Hilfe einer zweiten Domain, meistens mit dem Buchstaben "m" markiert,
eine abgespeckte Version der normalen Homepage, damit die wichtigsten Informationen auch mobil
abgerufen werden konnten.
Durch das Erscheinen von iPhone, Android-Systemen und auch Tablets sowie die Verbesserung der
flächendeckenderen Mobilfunkinfrastruktur kann das alt bewährte Prinzip jedoch nicht so weiterge-
führt werden. Allein durch die Vielzahl der zu bedienender Bildschirmauflösungen ist eine optimale
Anpassung mit der ehemaligen Lösung nicht möglich. Desweiteren steigen die Ansprüche an die
Funktionalität der Websites auf mobilen Geräten stetig.
Klar, es wäre (noch weitgehend) möglich für jedes Endgerät eine eigene Seite zu basteln, aber wer
soll hierzu die Zeit haben und wer soll die Zeit bezahlen? Außerdem, was, wenn sich weitere Geräte
mit ganz anderen Bildschirmauflösungen am Weltmarkt durchsetzen? Pflegen wir dann irgendwann
20 verschiedene Websiteversionen ein und derselben Website?
Und die Antwort lautet: "Nein, natürlich nicht!"
HTML5 und CSS3, verbunden mit jQuery und Javascript ermöglichen uns einen pflegeleichten
und unkomplizierteren Lösungsweg. Die Zauberformel lautet: "responsives Webdesign".
Responsives Webdesign bezeichnet ein Design, dass mit einem flexiblen Layout oder
Raster und flexiblen Inhalten auf jeglichen beliebigen Endgeräten allzeit das beste
Userfeeling bietet. Das Design reagiert auf den Nutzer und dessen Geräteanforderungen.
Wie machen wir das?Anstatt bisher normaler Schriftgrößenangaben via Pixel arbeiten
wir in der responsiven Programmiermethode mit relativen Werten.
Wichtig ist es, z. B. bei Schriftgrößen, Zeilenhöhen, Abstandsan-
gaben usw. mit "%" und "em" zu arbeiten.
Desweiteren verabschieden wir uns von festen Layout-Größen
und geben auch hier Längen- und Breitenangaben in Prozent an.
So kann jedes Endgerät im Prozentualen Verhältnis die ent-
sprechenden Daten lesen, anpassen und anzeigen.
Hier ein Beispiel:
Anstatt eine Überschrift mit "16 Pixel" zu definieren, geben wir
der Überschrift einfach den Wert "100%" oder "1em".
Media Queries
CSS Media Queries sind schlussendlich der Kern eines erfolgreichen responsiven Webdesigns.
Kurz erklärt: Mit dem "media" -Tag, lässt sich die Zuweisung bestimmter Stylesheets für bestimmte
Endgeräte steuern. Mit media="screen and (max-device-width: 320px)" wird das Stylesheet geladen,
das ideal für Endgeräte angepasst ist, die eine maximale Breite von 320 Pixel anzeigen können. Es
können auch Angaben mit minimaler Breite (min-width) gemacht werden.
Ein Beispiel hierzu:
Media Queries werden von allen modernen Browsern ohne besondere Erweiterungen unterstützt.
Mit responsivem Webdesign kann man eine Homepage nicht auf jedem Endgerät identisch aussehen
lassen, da jedes Endgerät verschiedene Ausgangswerte hat. Um jegliche Problemstellen auszu-
merzen, sollte man von aufwendigsten, pixelgenauen Verzierungen absehen, da ständig neue
internetfähige Geräte mit verschiedenen Darstellungsgrößen auf den Markt kommen. Jeder neue
LED-Fernseher hat einen Netzwerkzugang und einen Internetbrowser installiert - egal ob 26 Zoll,
37 Zoll oder größer als 55 Zoll. Aber wir erreichen zu fast 100% unsere Wunschdarstellung
Umfangreiche und Komplexe Designs
Natürlich gibt es auch bei responsivem Webdesign Nachteile. Gerade bei komplexen und grafisch
sehr aufwändigen Seiten ist nicht möglich, responsiv zu programmieren, da es hier recht große
Einschnitte für das Design bedeuten würde und eventuell die eigentliche Funktion der Website
verloren geht. Verschiedene Designs mit ausgeklügelt positionierten Div-Boxen sollte man des-
halb nur für die ganz normale Version - so wie sie jeder kennt - nämlich am PC, verwenden.
Aber um nicht auf eine mobile Version verzichten zu müssen, empfiehlt sich hier eine Weiche
einzubinden, die auf eine separate, abgespeckte Version der Seite verweist. Diese mobile Version
kann dann wiederum responsiv programmiert werden, damit diese auf allen mobilen Geräten angepasst angezeigt werden kann.
Hier ein responsives Beispiel bei verschiedenen Bildschirmgrößen:
Es ist zu sehen, dass die sich die Darstellung in den verschiedenen Versionen ändert. Bei Betrach-
tung im Standardbildschirm wird alles in der normalen Größe dargestellt. Bei Geräten mit klei-
nerem Bildschirm verändert sich das Aussehen prozentual zur Bildschirmgröße.
Bei kleinen Geräten, wie z. B. dem iPhone wird ein anderes Layout gewählt (siehe MediaQueries ).
Auftreten der verschiedenen Bildschirmgrößen in der mobilen Welt:
| 320 Pixelbreite bis 720 Pixelbreite: | 720 Pixelbreite bis 1024 Pixelbreite: |
|
|
Natürlich könnten wir noch tiefer in das Thema responsives Webdesign einsteigen, jedoch wollen
wir nur eine kurze Erklärung abgeben, was das neue Design mit sich bringt.
