Responsive Design – eine Webseite für alle Endgeräte.

Neue Technologien werfen neue Probleme auf. Wie soll man beispielsweise eine umfangreiche Webseite mit Onlineshop, Grafiken und Newslettern auf einem Smartphone darstellen, wenn schon die Nutzer verschieden großer Bildschirme sich mit endlosem Scrollen und Blättern befassen müssen? Diese Frage löst das so genannte “Responsive Design”, das zukünftig eine technologische Herausforderung – nicht nur, aber vor allem – für professionelle Webseitenbetreiber darstellt.

Jenseits aller technologischen Maßnahmen, die eingesetzt werden können, um eine Homepage auf jedem Endgerät gut aussehen zu lassen, ist aber die Optik entscheidend, die der Kunde vor sich hat. Er erwartet zu Recht, dass ein internetfähiges Handy eine beliebige Webseite ebenso klar darstellt wie ein Bildschirm am PC. Oftmals humpelt die Technologie der Webseiten aber der Entwicklung neuer Endgeräte-Technologien hinterher. Genau gesagt zwingt die rasante technologische Entwicklung von Endgeräten die Webseiten- und Onlineshop-Betreiber und Webdesigner dazu, sich schnell etwas einfallen zu lassen. Responsive Webdesign-Projekte drehen sich um Überlegungen, wie man Inhalte und Grafiken auf Webseiten kompatibel mit Minibildschirmen von Mobiltelefonen machen kann. Das Layout einer Homepage muss zukünftig verstärkt darauf Rücksichten nehmen, dass Kunden immer öfter vom Smartphone oder einem E-Book-Reader aus ins Internet gehen. Die Darstellung der Webseite verändert sich je nach Bildschirmgröße, auf der die Homepage angesehen wird. Mit Hilfe von Frameworks kann man ein Responsive-Design-Raster erstellen. Jedes Framework macht dabei aber andere Vorgaben. Individuellere Lösungen erzielt man beispielsweise mit Produkten wie Gridpack von Erskine Design. Der Umbruch der Bildschirmseite bei verschiedenen Endgeräten ist das entscheidende Kriterium. Auf einem E-Book-Lesegerät ist der so genannte “Breaking-Point” dank des größeren Bildschirms ein anderer als auf einem iPhone oder Laptop. Auch die Pixelzahl der integrierten Bilder verändert sich logischerweise. Ein Tool wie “responsivepx” von Remy Sharp berechnet den Break-Point für jedes Endgerät akkurat.

Es lohnt sich, die nach dem Responsive Design überarbeitete Webseite auf den verschiedensten Endgeräten anzusehen, um einen Eindruck von den Problemen zu bekommen. Viele Nutzer besitzen nämlich noch alte Bildschirme, die wieder ganz andere Darstellungensprobleme bewirken. Responsive Design muss Antworten für diese Probleme finden. Standard-Monitore und ältere Smartphone-Modelle haben beispielsweise eine Pixeldichte, die bei etwa 120 dpi liegt. Neue Smartphones können dagegen 200 dpi vertragen. Das macht bei der Schriftgröße eine Menge aus. Problematisch sind auch Videos, Formulare und ähnliches. Wenn die Webtexte mehrere Spalten haben, stellt das Responsive Design diese zu einer Spalte um. Dabei stehen Texte links vor denen, die rechts stehen. Je klarer die Homepage strukturiert wird, desto weniger Probleme bietet das Responsive Design.