Mobile First – Was ist zu beachten?

Responsive Webdesign ist der Standard für Webseiten von heute. Verbesserte mobile Datenverbindungen bis zum heutigen LTE-Standard sowie die damit verbundene Verbreitung mobiler Endgeräte haben Google, die Suchmaschine Nummer 1 in unserer digitalen Welt dazu veranlasst, das Prinzip „Mobile first“ auszurufen. Das bedeutet zweierlei: Einerseits hat Google den Mobile First Index entwickelt, das heißt es gibt ein eigenständiges Ranking für jeden Suchbegriff, wenn dieser auf einem Tablet PC oder einem Smartphone in den Suchschlitz eingetippt wird und danach der „Suchen“-Button geklickt wird. Mobile First heißt aber andererseits auch, dass Webdesigner darauf achten sollten, Webseiten zunächst für die kleinen mobilen Geräte zu erstellen und anschließend, die Desktop-Version auszuarbeiten. Für die meisten Webdesigner war diese Umstellung sehr gewöhnungsbedürftig, da bisher Webdesign genau andersherum funktionierte. Das Layout wurde zunächst für den Desktop erstellt, erst dann folgten per Media Query die Anpassungen für Tablet PC und Smartphone. Responsive Webdesign bedeutet gerade nicht, dass das Layout für alle Bildschirme identisch sein sollte. Im Gegenteil, Bilder und Schriftgrößen sollten sich jeweils flexibel so anpassen, dass die Usability auf allen Geräten optimal ist.

Wichtige Information für Webmaster in der Google Search Console

Das Konzept eines zweiten Google Index erreichte erstmalig im November 2016 die Öffentlichkeit. Die Umsetzung erfolgte dann anderthalb Jahre später im März 2018. Seit September 2018 werden die Webmaster über die Google Search Console über die Indexierung im Mobile First Index informiert. Webmaster erhalten über die Google Search Console Informationen wie die Suchmaschine die mobile Website beurteilt. Die Einführung des Mobile First Index hat auch in der Google Search Console zu Neuerungen geführt. Es gibt jetzt einen Screenshot, der das Layout der Seite zeigt, aber auch zu kleine Schriftarten oder Mängel in der Usability, etwa zu eng aneinander liegende Links, die praktisch nicht richtig anklickbar sind, werden angezeigt. Ladezeiten sind, angesichts immer noch häufig unzureichender mobiler Datenverbindungen ein weiterer Qualitäts- und auch Rankingfaktor. Webmaster sollten darauf achten, Bilder und sonstige Grafikdateien im jeweils passenden Format auszuliefern. Das bedeutet, dass diese keinesfalls über die HTML-Attribute width und height komprimiert werden, sondern in der Originalgröße vom Server abgerufen werden sollten. Sinnvoll ist es hingegen, die Dateigröße vor dem Upload der Bilder verlustfrei zu reduzieren, so dass diese zwar in optisch unveränderter Qualität, aber mit weniger Bytes geladen werden.

Testmöglichkeiten für Mobile Website Design

Bevor eine Website oder auch ein einzelner Artikel online geht, gilt es diese zu testen. Hierzu bieten die verschiedenen Browser Möglichkeiten an, zu simulieren wie das Layout auf den diversen Bildschirmgrößen ausschaut. Die Webdeveloper Tools erlauben es darüber hinaus CSS-Anpassungen für die verschiedenen Media Queries testweise einzugeben, so dass das Design schrittweise angepasst werden kann. Es gibt auch zahlreiche Online Tools, die noch einmal einen differenzierten Blick erlauben. Letztendlich bleibt aber nur der Griff zu realen Geräten, den nur hier zeigen sich die wirklichen Tücken der Usability. Gerade die Apple-Geräte weisen eine Besonderheit auf. Retina Displays auf den neueren iPhones und iPads mit erhöhter Pixeldichte können zusätzliche Anpassungen erfordern.