Die richtige Optimierung einer Website für Mobilgeräte wird im Zeitalter der Smartphones immer wichtiger. Inzwischen kommen über 50 % aller Aufrufe der meisten Internetseiten von mobilen Geräten, hauptsächlich von Smartphones und Tablets. Wer selbst eine Website besitzt, sollte daher unbedingt darauf achten, dass diese gut für mobile Geräte optimiert ist. Im folgenden Artikel stellen wir dir drei Punkte vor, die du beachten solltest.
Ladezeiten
Oft werden Websites von Smartphones aufgerufen, die gerade mit keinem WLAN-Netz verbunden sind. Meist braucht es jedoch ein wenig Zeit, bis die Seiten schließlich geladen sind. Diese sollte man so gut wie möglich verkürzen. Durch moderne Bildformate wie WebP werden Bilder deutlich komprimiert, ohne dabei Qualität zu verlieren. Wer schnelle Ladezeiten möchte, sollte unbedingt ein modernes Bildformat wählen. Eine Studie fand heraus, dass über 50 % aller Nutzer eine Website wieder verlassen, wenn diese länger als drei Sekunden lädt. Gerade bei mobilen Nutzern mit schlechtem Netz sind diese 3 Sekunden schnell erreicht. Wer große Bildformate wie PNG benutzt, riskiert also dadurch, dass Nutzer abspringen. Durch die modernen Formate können selbst grafikintensive Webseiten in wenigen Sekunden geladen werden.
Besonders beim Online Entertainment ist das wichtig. Aus diesem Grund sind Plattformen wie Netflix heute auch für mobile Geräte optimiert. So können die Filme und Serien ganz einfach von unterwegs aus gestreamt werden. Um zu lange Wartezeiten und den Verbrauch von mobilen Daten zu vermeiden, gibt es sogar die Möglichkeit, die Filme zu Hause herunterzuladen, um sie dann ganz einfach offline anzuschauen. Und auch Websites wie VegasSlotsOnline tun viel dafür, dass ihre Webseiten und Spiele in nur wenigen Sekunden vollkommen geladen sind. Dadurch erreichen mehr Nutzer die Website, was mehr potenzielle Kunden bedeutet. Auf VegasSlotsOnline werden zahlreiche Slots vorgestellt, es befinden sich also viele Bilder, Zwischenüberschriften und Kategorien auf der Plattform. Ebenso ist es bei den Spielen wichtig, dass es zu keinen Verzögerungen kommt, da stets eine positive Casinoerfahrung geboten werden soll.
Eine Möglichkeit zum Verkürzen der Ladezeit bietet das Tool Google PageSpeed Insights. Da die meisten Entwickler ihre Website auch im Google Index weit oben ranken möchten, ist es sinnvoll, sich genau an die Anweisungen von Google zu halten. Durch gezielte Optimierung kann also nicht nur die Ladezeit verbessert werden, sondern auch das Google Ranking.
Darstellungsbereich beachten
Die meisten Websites werden am Computer horizontal betrachtet, früher war das gängige Format 4:3 (Breite:Höhe), heute ist es meistens 16:9 und bei ganz neuen Monitoren sogar 21:9. Bei Smartphones wird die Website allerdings in einem vertikalen Format betrachtet, meistens im Format 9:16, bei neueren Smartphones im Format 9:19 oder 9:21. Wer z. B. links und rechts Werbebanner auf der Website hat und die richtigen CSS Befehle nicht kennt, riskiert damit, dass diese Werbebanner den eigentlichen Inhalt für mobile Nutzer überdecken. Große Werbebanner müssen mit CSS Befehlen entweder auf Mobilgeräten ausgeblendet oder stark verkleinert werden. Falls auf Mobilgeräten Probleme bestehen, wenn z. B. Text von Bildern überdeckt wird, dann zeigt Google dir eine Warnung in der Search Console an oder schickt dir sogar eine E-Mail.
Eine gute Website ist in verschiedene DIV Container unterteilt, die durch CSS so optimiert sind, dass sie sich automatisch an jede beliebige Bildschirmbreite anpassen können. Es gibt natürlich unzählige Möglichkeiten in CSS, um eine Website mobile-responsive zu programmieren, daher zählen wir hier nicht alle auf. Wer seine Website optimieren möchte, sollte sich CSS Befehle wie device-width, min-width und max-width anschauen, aber auch orientation:landscape und orientation:portrait könnten interessant sein.
Ausklappbare Navigation einbauen
Bei den meisten Websites ist das Menü bzw. die Navigation am oberen Anfang der Seite horizontal aufgereiht. Da steht dann zum Beispiel: Home – Kontakt – Impressum. In den meisten Fällen sind Navigationen aber sehr groß und bestehen aus mehreren Seiten. Nehmen wir als Beispiel mal die Internetseite von Apple. Hier besteht die Navigation aus den folgenden Seiten: Home (Apple Logo) – Mac – iPad – iPhone – Watch – TV – Music – Support – Suche (Lupe) – Warenkorb.
Horizontal kann man diese Wörter einfach schön nebeneinander in eine Navigation einbauen. Vertikal wird das allerdings schwierig. Daher sollte man für die mobile Navigationen in CSS eine ausklappbare Navigation machen, meistens macht man einen sogenannten Burger. Jeder kennt die drei übereinander liegenden Striche bei mobilen Websites, die wegen ihrem Aussehen den passenden Namen Burger bekommen haben. Im Falle der Apple Website sind es zwar nur zwei Striche, aber das Prinzip ist das gleiche. Wenn man auf die Striche tippt, klappt eine Navigation aus und die Striche überkreuzen sich zu einem X. Tippt man nun auf das X wird die Navigation wieder eingeklappt und die Striche werden wieder zu dem Burger.
Eine solche Navigation kann ganz einfach in CSS programmiert werden. Unter dem Suchbegriff „Hamburger Navigation“ oder „Burger Navigation Menu“ findet man dazu auf YouTube zahlreiche einfache Tutorials. Es gibt natürlich auch vorgeschriebene CSS Dateien für eine solche mobile Navigationen auf vielen verschiedenen Seiten kostenlos zum Download bzw. zum Kopieren. Falls du nach Alternativen zur Hamburger Navigation suchst, hat Pixeltuner einen Artikel diesbezüglich geschrieben.
Interessant ist, dass diese schlichte Art einer mobilen Navigation im Prinzip für jeden CSS Anfänger machbar ist und dennoch von riesigen Unternehmen genutzt wird: Apple, Microsoft, Samsung, sie alle entscheiden sich für die Burger Navigation. Amazon hat sogar so viele Kategorien, dass sie auch auf der normalen Website bereits eine Burger Navigation zusätzlich zur normalen Navigation haben.
Bildquelle Titelbild:
- PhuShutter/shutterstock.com
Schreibe einen Kommentar