Technik: Responsive Webdesign

01.10.2014 – 1

Im ersten Beitrag zu diesem Thema sind wir auf die Grundsätze von Responsive Webdesign eingegangen und haben Hilfestellung zu der Frage gegeben, ob und wann ein Responsive Webdesign sinnvoll ist und wann nicht. In diesem zweiten Teil thematisieren wir die technisch wichtigen Aspekte wie Skalierung, Bildanpassung und Breakpoints und zeigen Ihnen, worauf man bei einem Design achten muss, das in allen Formaten überzeugen soll.

Technisch Aspekte des Responsive Webdesign

Media Que… was?

Die Bedeutung sogenannter “Media Queries” ist auf Anhieb oftmals schwer zu verstehen. Dabei ist es eigentlich sehr logisch. Hier ist alles, was Sie über Media Queries, die ein Teil von CSS sind, wissen sollten:

CSS-Stylesheets sind Dateien, in denen das Aussehen einer Website bestimmt wird. Man bestimmt Farben, Größen und Positionen über einzelne CSS-Regeln. Responsive Webdesign funktioniert dadurch, dass für unterschiedliche Anzeigegrößen unterschiedliche CSS-Regeln angewandt werden. Um zu definieren, welche CSS-Regel für welche Anzeigegröße verwendet werden soll, benötigt man Media Queries.

Media Queries sind also nichts anderes, als eine Beschränkung von Styling-Vorgaben in Form von CSS-Regeln auf bestimmte Größen des Bildschirms oder Browser-Fensters. Es lassen sich dabei beliebig viele Media Queries definieren und auch die Größendefinitionen sind völlig flexibel. Eine Media Query ist dabei immer eine “Klammer” um eine beliebige Anzahl von CSS-Definitionen.

So könnten man also zum Beispiel zwei Media Queries definieren, mit welchen der Text bei Smartphone-Größen in Schriftgröße 12 dargestellt wird und bei hohen Auflösungen von Desktop-Computern in Schriftgröße 14. Die Übergänge zwischen zwei Media Queries nennt man Breakpoints. Zieht man sein Browserfenster auf einer Seite mit Responsive Webdesign kleiner, sind Breakpoints also die Stellen, an denen sich das Layout ändert, weil eine andere Media Query greift und dadurch beispielsweise die Seitenspalte umbricht.

Nach diesem Schema lassen sich sämtliche Styling-Vorgaben für eine bestimmte Bildschirmgröße anpassen. Darüber hinaus kann eine Media Query auch identifizieren, ob ein Browserfenster im Hoch- oder Querformat geöffnet ist, was wichtig bei der Ausrichtung von Mobiltelefonen ist. Durch Media Queries wird Responsive Webdesign ohne den exzessiven Einsatz von JavaScript erst richtig ermöglicht, was sich in erster Linie positiv auf die Performance einer Seite auswirkt.

Statisch Responsive und flexibel Responsive

Was passiert mit einer Responsive Website eigentlich zwischen den Breakpoints? Auch das wird gerne mal übersehen, ist aber durchaus ein Qualitätsmerkmal von gutem Responsive Webdesign. Gehen wir zurück zu unserem Beispiel von zuvor. Dort gab es eine Media Query für Desktop-Computer. Bei einem “statischen Responsive Webdesign” sieht der z.B. Inhalt bei 850 Pixeln Breite des Fensters identisch aus, wie bei einer Breite von 950 Pixeln. Das Layout der Seite wechselt also ausschließlich zwischen den drei statischen Varianten hin und her, die als Media Queries definiert wurden; je nach Browsergröße.

Bei einem “flexiblen Responsive Webdesign” hingegen passt sich das Layout immer genau an die verfügbare Größe an. Verkleinern Sie das Fenster dieses Blogs, dann werden Sie feststellen, dass sich die Text- und Bildbreiten nach dem ersten Breakpoint flexibel anpassen.

Der Wunsch nach dieser Funktionsweise sollte direkt zu Beginn des Projektes kommuniziert werden, da er massive Auswirkungen auf die Entwicklung des Responsive Designs hat. Es gibt – wie so oft – eine Daseinsberechtigung für beide Varianten; Sie sollten sich allerdings darüber Gedanken machen und beraten lassen, welche Variante für Ihre Zwecke geeigneter wäre.

Ich lese was, was du nicht siehst: Responsive Text

Oft ist im Zusammenhang mit Responsive Webdesign nur die Rede vom Layout im Allgemeinen und der Frage, wie, wo und wann Seitenspalten umbrechen oder sich eine Navigation ändert. Ein sehr wichtiger Punkt ist aber auch die Typographie. Mit variablem Raum für Texte, muss auch der Text selbst variabel sein. Ziel ist natürlich auch hier, ein harmonisches Bild in allen Mediengrößen zu erzeugen. Das erfordert sowohl die Anpassung der Schriftgrößen, als auch die Änderung der Zeilenabstände und manchmal sogar die Änderung von Schriftstilen.

Das Wichtigste bei der Diskussion um die richtigen Einstellungen ist dabei folgendes: Das Schriftbild muss immer am entsprechenden Zielgerät getestet werden.

Gerade bei Smartphone-Layouts sieht das Schriftbild am eigentlichen Gerät immer deutlich anders aus. Was am Bildschirm im Photoshop-Layout zu groß und klobig wirkt, ist vielleicht gerade ideal bei einem Gerät, das der Nutzer auf einem 4-Zoll Bildschirm seines Telefons in 30 cm Abstand betrachtet.

Über diese Besonderheit muss man sich bei der Betrachtung von Responsive Webdesign für die Smartphone Media Queries immer im Klaren sein. Jedes Layout sollte von der Agentur Ihres Vertrauens immer auch über den Browser abrufbar geliefert werden. Damit lässt sich das Layout im Browser eines Smartphones öffnen und man erhält so bereits ein sehr gutes Bild davon, wie die Proportionen und Schriftgrößen auf dem Zielgerät wirken.

Bilder, Bilder, Bilder

Ein durchaus nicht unumstrittenes Thema ist die Handhabung von Bildern bei der Programmierung von responsive Layouts. Hier gibt es tatsächlich einige grundverschiedene Ansätze, die von simpler Skalierung der Bilder aus der Desktop-Version bis hin zur zielgerätgerechten Einbindung unterschiedlicher Versionen des gleichen Bildes reicht.

Die Problematik ist leicht erklärt:

Entweder haben Sie als mobiler Nutzer auf dem Weg zur Arbeit in der U-Bahn das Problem, dass Sie nun erstmal die großen Bilddateien der Desktop-Version herunterladen müssen, oder es müssen jeweils drei unterschliedliche Größen des gleichen Bildes auf dem Webserver liegen, die dann entsprechend der Bildschirmgröße gewählt werden.

Beides ist nicht optimal und in der Tat gibt es derzeit einfach noch keine optimale Lösung für dieses Problem. Der Trend geht aber klar in Richtung des zweiten Szenarios mit mehreren Bildern. Hier lässt sich die Größenanpassung der Bilder automatisieren, mit dem Ziel, dass sich Redakteure keine Gedanken darüber machen müssen. Damit das möglich wird, muss allerdings an jeder Stelle, an der ein Bild irgendwie eingebunden werden kann, bedacht werden, dass das Quellbild in drei unterschiedlichen Größen serviert werden muss.

Es ist also zwar als optionales Feature zu sehen, dass die Bilder automatisiert auf diese Weise verarbeitet werden, allerdings ist die Wichtigkeit dieses Schrittes nicht zu unterschätzen, denn: Nichts im mobilen Web ist schädlicher, als eine langsam ladende Website!

Die Empfehlung geht also ganz klar in Richtung Mehraufwand in der Entwicklung, welcher sich aber sowohl bei den Besucherzahlen selbst, als auch im Google-Ranking positiv bemerkbar macht.

Retina

Zu den hochauflösenden Displays von Apple sei kurz erwähnt, dass auch hier Optimierungsbedarf besteht. Grob sagt man, dass ein für Retina-Displays optimiertes Bild ungefähr doppelt so groß sein muss, wie für normale Displays. Das heißt, dass zu den drei oben erwähnten Größen im Falle einer Retina-Optimierung noch eine vierte Bildgröße hinzu kommt. Ferner müssen aber auch alle Elemente des Interfaces, also Navigation, Buttons, Icons, etc. für die hohe Auflösung angepasst werden, damit sie nicht unscharf und verschwommen aussehen.

Ob sich der Mehraufwand für ein Onlineprojekt lohnt, ist hauptsächlich davon abhängig, wie viele mobile Nutzer erwartet werden und wie viele zu optimierende Grafiken es auf der Seite geben soll. Teillösungen sind durchaus üblich, bei denen zumindest die wichtigsten Elemente – wie z.B. das Firmenlogo – optimiert werden.

Gutes Responsive Webdesign

Woran erkennt man nun gutes Responsive Webdesign? Da gibt es neben den offensichtlichen Faktoren, wie dem visuellen Eindruck, noch einiges, auf das Sie Acht geben sollten. Es geht dabei vor allem um die Art und Weise, mit der ein Responsive Layout vorgestellt wird. Wir empfehlen, sich Design für mobile Geräte immer auch an mindestens einem Smartphone und einem Tablet präsentieren zu lassen; auch wenn es nur der Screenshot im Browser ist. Später sollte dieser dann mit einem statischen Klickdummy ersetzt werden, bevor es an die finale Umsetzung geht. An diesem sollte bereits die Navigation und das Verhalten des Responsive Designs beim Kippen des Geräts getestet werden können.

Oft werden auch Navigationskonzepte nicht richtig zu Ende gedacht. Was passiert mit der zweiten und dritten Ebene der Navigation? Gibt es einen Breadcrumb oder zumindest einen “zurück”-Button? Lassen Sie sich hier nicht von simplen Layouts täuschen, welche die Funktionalität Ihrer Seite nicht in vollem Umfang abbilden; es sei denn, es gibt einen triftigen Grund dafür.

Zusammengefasst bedeutet das also:

Bei gutem Responsive Design wird auf unterschiedliche Typographie in unterschiedlichen Größen geachtet, es werden möglichst keine Inhalte versteckt, es wird an unterschiedlichen Geräten präsentiert, hat ein Navigationskonzept, das sich gut mit den Fingern bedienen lässt, ohne dabei auf zweite und dritte Navigationsebenen verzichten zu müssen. Technisch wird bei einem guten Responsive Design auf Bildgrößen geachtet, ohne dass sich die Redakteure manuell darum kümmern müssen, die Breakpoints werden sinnvoll gewählt, die Ladezeiten sind für mobile Geräte und auch für hochauflösende Displays optimiert.

Wenn Ihnen dann die Gestaltung auch noch gefällt, haben Sie Ihr perfektes Responsive Webdesign.