Mobile First. Smartphone optimierte Contentpflege mit TYPO3

Wenn wir heute die Mediennutzung der Generation Z und Y betrachten, sind die Smartphones die Devices der Zukunft. Die neue Indexierung von Google ist demnach eine logische Konsequenz. Achtung: Wenn Google von „Mobile“ spricht, dann sind Tablets damit nicht gemeint, sondern lediglich Smartphones.

Google indiziert mit seinem Crawler die Internetseiten und unterscheidet dabei zwischen einer Desktop- und mobilen Darstellung. Dabei haben die mobilen Kriterien der Website eine höhere Gewichtung. Sollte keine mobile Variante der Website vorliegen, zeigt Google die Seite bei den Suchergebnissen nur dann relativ weit oben an, wenn es für die Suchanfragen über das mobile Endgeräte wenig bis keine optimierten Websites gibt. Dieses Szenario ist aber höchst unwahrscheinlich. Für Alle die zukünftig Webseiten entwickeln und betreiben muss der Fokus also auf der Gestaltung und Entwicklung der mobilen Variante, sowie deren Optimierung liegen.

Ab Mitte des Jahres bewertet Google bei der mobilen Indexierung auch die Ladezeiten der Seiten. Die durchschnittliche Ladezeit einer mobilen Website liegt aktuell bei 15,3 Sekunden (Das ergab ein Google Research Test der webpage.org im Januar 2018), dabei zählt jede Sekunde. In seinem Beitrag vom Februar 2018, erklärt Matt Bush, Country Director von Google UK, dass die voranschreitende Technologie, die schnellere Interaktionen ermöglicht, dazu führt, dass immer weniger Nutzer bereit sind auf das Laden von Inhalten zu warten. Eine verlängerte Ladezeit von einer Sekunde kann bereits Einbusen von bis zu 20% in der Conversion haben, das fand die Performance-testing-Plattform SOASTA heraus. Als Marketer verbringen wir viel Zeit mit der Optimierung unserer Ads, ohne zu merken, dass wir mobile Konversion verlieren weil die Seite zu langsam lädt, so Matt Bush.

Auch die komplette Abwicklung von Shopping-Erlebnissen auf dem Smartphone ist eine Herausforderung, der wir uns heute stellen müssen. Laut Matt Bush shoppen die Nutzer aktuell nur deshalb noch öfter mit Hilfe des Desktop-PC, weil die Ladezeiten und User Experience des Shopping-Erlebnisses nicht für mobil optimiert und deshalb frustrierend ist.

Wie aber schaffen wir es, dem Nutzer mobil wie auch auf dem Desktop eine einzigartige Experience zu liefern?

Die notwendige Technologie nennt sich Responsive Design. Mittels CSS (Cascading Style Sheets) erkennt der Browser, mit welchem Endgerät der User die Website aufruft und zeigt die, für das Endgerät optimierte Darstellungsform. Die URL der Desktop- und Mobilen-Variante ist identisch, so muss Google nur eine Website indexieren.

Bei der Entwicklung von Responsive Websites definieren wir in der Regel fünf relevante Breakpoints. Ein Breakpoint definiert bei welcher Bildschirmbreite welcher Inhalt wo auf dem Display angezeigt wird. Das Content-Management-System TYPO3 generiert zusätzlich ein Bild in der, für diese Bildschirmbreite, optimalen Auflösung und Qualität. Voraussetzung hierfür ist, dass sämtliche Bilder in einer möglichst hohen Auflösung oder als .svg (Vektor-Format, dass sich vor allem bei Logos und Illustrationen anbietet) vorliegen.

• XS = Smartphone Hochformat (unter 544px)
• SM = Smartphone Querformat (ab 544px)
• MD = Tablet Hochformat (ab 768px)
• LG = Tablet Querformat und Laptop (ab 992px)
• XL = PC-Monitor (ab 1200px)

Ein weiterer Vorteil dieser Möglichkeit ist, dass Inhalte für die Desktop-Darstellung ausführlicher verfasst werden können, als Inhalte für die Smartphone-Darstellung.

Noch extremer wird es bei der Darstellung von Bildern. In der Desktop-Darstellung sind wir es gewohnt, Bilder im Querformat zu sehen. Diese füllen den vorhandenen Platz am Monitor (Desktop als auch das Tablet im Querformat) optimal aus. Sehen wir uns nun die Darstellung auf Smartphones an, stellen wir fest, dass ein Querformates Bild das Display nicht sauber ausfüllt. Informationen sind schnell zu klein und können nicht wirklich gut wahrgenommen werden. Deshalb bietet sich bei Smartphones das, aus den sozialen Netzwerken bekannte und beliebte, quadratische Format an. Für eine optimale Darstellung auf allen Endgeräten werden Bilder oder auch Grafiken deshalb idealerweise, wie in der Filmproduktion, in zwei Seitenverhältnissen gestaltet und abgespeichert. So kann beim Komposing und bei der Befüllung der Website immer das, für das jeweilige Endgerät, optimale Bild ausgewählt werden. Dadurch steigt der Pflegeaufwand natürlich, aber die Darstellung von Bildern und Informationen ist stets optimal aufbereitet. Was wiederum von Google als positive User-Experience bewertet wird.

Am Beispiel der hier aufgeführten Screenshots sehen Sie, wie im Backend von TYPO3 unterschiedliche Content-Elemente für die jeweiligen Breakpoints ausgewählt wurden.

Die Voraussetzung um diese Möglichkeiten in TYPO3 zu nutzen, unterliegt einer sauberen Strukturierung und Planung in der Umsetzung der Website. Von Anfang an muss genau definiert werden, bei welchen Breakpoints die Inhalte wie auf der Website angezeigt werden. Ist diese Grundvoraussetzung nicht geschaffen, werden sie vergebens die Seite für mobile Endgeräte optimieren.

Den kompletten Beitrag von Matt Bush finden Sie hier finden Sie hier.