Responsive Websites – Tipps, Tricks und Hacks

13.02.2013 10:44

Laut diverser Studien werden schon bald mehr Internetsurfer mobil als auf dem Desktop unterwegs sein. Das bedeutet also, dass Ihre Webseite auch auf einem mobilen Gerät eine Top-Figur machen sollte. Es ist ganz klar, eine mobile Webseite, sprich eine WebApp, liegt voll im Trend und um diese schnell und einfach zu erstellen, sind ganze Frameworks über Nacht entstanden. Aber nicht jeder hat die Zeit, eine kleine Schwester-Version für eine bereits bestehende Webseite zu erstellen, oder den Content von zwei Webseiten zu pflegen.

 

Ein responsives Layout hingegen ist im Prinzip keine getrennte Webseite, sondern eine optische Anpassung auf den verschiedenen Geräten. Je nach Browser, Geräte-Auflösung oder sogar Pixel-Dichte (z.B. Retina-Displays) können bestimmte Bestandteile und Details der Seite anders dargestellt oder ganz ausgeblendet werden. Ein klassisches Szenario dafür sind komplexe Menüs, welche in der responsiven Variante ab einer gewissen Auflösung anders dargestellt werden, zum Beispiel die Variante zum Ausklappen oder die Dropdown-Liste.

 

Natürlich gehört zu einer responsiven Webseite sehr viel mehr als nur hidden und visible, denn seit der Einführung von CSS3 und den damit eingeführten Mediaqueries werden völlig neue Wege ermöglicht, denn CSS-Klassen sollen auf Elemente nur angewendet werden, wenn eine Vorbedingung anhand der folgenden Kritierien zutrifft:

  • Breite und Höhe des Browser-Fensters
  • Breite und Höhe des Gerätes
  • Orientierung (landscape- oder portrait-Modus)

Auch was die Darstellung betrifft, müssen Schriften leserlich und Links groß genug zum „touchen“ dargestellt werden.

 

Responsive Websites

 

Frameworks
Immer mehr Entwickler machen Verwendung vom Open-Source-Toolkit von Twitter namens Bootstrap. Dieses bietet neben den vorgestylten Komponenten wie Menüs, Tabs oder Formulare, auch ein flexibles Grid-System, welches eines der Kernpunkte von responsivem Design sein kann: Dabei wird das Layout in zwölf Spalten unterteilt, welche je nach Browserbreite auf 724px, 940px oder 1170px skaliert werden. Bei Bedarf (und unterhalb von 724px) werden die Spalten einfach vertikal gestapelt – was eine Menge an Aufwand bei der Entwicklung der Mediaqueries erspart.

 

Das Problem mit den Bildern
Es genügt nicht, lediglich das CSS der Webseite zu optimieren, denn auch die Bilder spielen eine große Rolle, vor allem wenn diese eine besonders große Größe haben! FullHD-Bilder auf einem Smartphone anzuzeigen, welches lediglich eine geringe Breite hat, kann sehr oft zum Performance-Killer werden. Um dieses Problem zu lösen gibt es mehrere ausgeklügelte Ansätze bzw. Hacks, welche ein bereits optimiertes Bild für die verwendete Auflösung laden.

 

Nicht alles was glänzt ist aus Gold
Eine neue Technologie erfordert Moderne Browser – aber stimmt das auch für responsive Webseiten? Die in CSS3 eingeführten Mediaqueries beschränken sich zwar auf aktuelle Browser, aber es gibt auch Möglichkeiten mit welchen Sie jeden Browser klein bekommen, selbst einen IE6. Aber einen kleinen Moment bitte: Warum sollte eine mobile Webseite auf einem IE6 angezeigt werden? Auch wenn ich mich sehr gut auf die damaligen Monitore mit 800px Breite erinnern kann, sind die responsiven Layouts dann eher doch für Smartphones und Tablets gedacht, welche zur Freude vieler Entwickler fast alle mit einem Modernen Browser bestückt sind.

Es bleiben aber noch ein paar kleine Details abzuklären: Zum einen, wie soll eine solche Seite denn überhaupt getestet werden? Und vielleicht können Sie mir eine Frage beantworten: Wo liegt der Unterschied zwischen % und pt und vor allem: Wie werden diese Größenangaben berechnet und angewendet? Erfahren Sie in dieser Session viele oft übersehene Details und Tipps, welche das Leben in der mobilen Welt wirklich vereinfachen!


Autor Roberto Bez

Roberto Bez ist als Projektleiter bei der Firma SiMedia GmbH tätig. Er beschäftigt sich seit mehreren Jahren mit Themen rund um das .NET Framework. Für Roberto bedeutet das Entwickeln nicht nur Arbeit, sondern auch Freude, Motivation und täglich neue, aufregende Herausforderungen. Besonders gerne setzt er sich mit neuen Webtechnologien sowie Datenbanken aller Art auseinander und versucht diese in die tägliche Anwendungsentwicklung miteinzubringen. Seinen Blog finden Sie unter devangelist.  

Roberto Bez

Developer Week in Social Media

Folgen Sie uns auf:

Aussteller & Sponsoren

Infos anfordern

Infos anfordern
  • Florian Bender
  • Projektleitung
  • Tel.: +49 (89) 74117-206
  • Fax: +49 (89) 74117-448
  • E-Mail: florian.bender@nmg.de

Medienpartner