Früher war die Webdesignwelt noch einfach. Man erstellte die Homepage und konnte sich sicher sein, dass diese an einem PC oder Notebook mit einem großen Bildschirm angeschaut wurde.
Naja so schön war es dann doch nicht. Jeder Browser stellte die Webseite anders dar, weil jeder Browser die Standards anders interpretierte. Aber das ist ein anderes Thema.
Mittlerweile sind die Browser alle auf einem Stand in der sie die aktuellen Standards unterstützen und die Webseite auch bei allen gleich aussieht. Ich teste meine Webseiten immer noch ab und zu mit verschiedenen Browsern, aber mittlerweile haut das eigentlich immer hin.
Inzwischen zeichnet sich, seit ein paar Jahren, ein anderer Trend ab. Statt am Computer werden Webseiten mehr und mehr an mobilen Endgeräten konsumiert. Kein Wunder, die kleinen Dinger hat man immer dabei und so können Wartezeiten im Alltag durch surfen im Netz überbrückt und genutzt werden.
Google gibt an, dass mittlerweile mehr Leute die Google Suche über Smartphones und Co benutzen als klassisch am Desktop.
Die Sache geht sogar so weit, dass Webseiten ohne mobile Unterstützung in der Google-Suche abgestraft werden. Derzeit nur auf mobilen Geräten, aber in Zukunft eventuell auch auf dem Desktop.
Aus diesem Grund sollte (oder sagen wir muss) die eigene Webseite auch für das mobile Internet ausgerüstet sein. Ansonsten kostet das langfristig Besucher.
Doch wie geht man vor? Ist die Webseite bereits online, kann man zuerst eine Bestandsaufnahme machen. Google stellt hierfür den "Mobile-Friendly Test" zur Verfügung.
Neben der Analyse werden auch gleich Tipps zur Umsetzung angeboten. Doch wie macht man eine Homepage "Mobile-Friendly"?
Während man früher gerne eine extra Webseite mit Browserweiche erstellt hat, designt man das Design heute "Responsive". So spart man sich den Aufwand die Webseite in verschiedenen Versionen erstellen zu müssen.
Was heißt das? Vereinfacht: Das erstellte Design passt sich dem verfügbaren Platz automatisch an und ist so sowohl für den Desktop-User als auch den mobilen Surfer gewappnet.
Auch die Vielzahl an Smartphones, die es am Markt gibt, werden unterstützt und man muss sich keine Gedanken machen, ob Smartphone XY mit Auflösung Z die Webseite vernünftig darstellen kann.
Responsive Frameworks
Da die Erstellung eines responsiven Designs mit dem ganzen HTML- und CSS-Kram recht komplex ist, verwendet man am Besten ein fertiges Framework und passt dieses an seine Bedürfnisse an. Hier gibt es zahlreiche Frameworks. Ich habe mich auf dieser Webseite für Bootstrap entschieden. Wem das Standarddesign nicht gefällt findet hier zahlreiche Designs, welche sich mit etwas Aufwand anpassen lassen.
Auch für WordPress und die ganzen CMS-Systeme gibt es responsive Designs zum Download. Viele kostenlos.
Ist die Webseite auf das entsprechende Framework umgesetzt, ist man meist noch nicht fertig. Gerade alte Webseiten verwenden an vielen Stellen starre Großenangaben mit festen Pixelangaben. Wer eine bestehende Webseite angepasst hat, geht im nächsten Schritt über alle Unterseiten und kontrolliert diese.
Grafiken
Nachdem dies erledigt ist, sollte man sein Hauptaugenmerk auf Grafiken und Co lenken. Obwohl man heute unterwegs teilweise recht flotte Geschwindigkeiten erreicht, ist das leider nicht immer und überall der Fall. Zu oft gibt es nur Edge in ländlichen Gebieten.
Deswegen sollte man die Grafiken nicht nur aus Geschwindigkeitsgründen überprüfen und ggf. verkleinern oder stärker komprimieren. Neben der schnelleren Ladezeit freut sich der Benutzer auch darüber, dass sein Datenvolumen nicht zu stark belastet wird.
Überprüfen der Arbeit
Während der ganzen Zeit empfielt es sich seine Arbeit regelmäßig mit dem Smartphone oder den Google-Tools überprüfen und überwachen. So beugt man Entwicklungen in die falsche Richtung vor.
Hat man alle Schritte befolgt, erhält man am Ende eine Webseite die nicht nur auf dem Desktop eine gute Figur macht, sondern auch auf mobilen Geräten ohne Scrollen und Zoomen eine gute Figur macht. Die Besucher werden es danken! 🙂