Menü

Mobile-Optimierung, worauf es ankommt ...

28. Juli 2015

Seit ungefähr dem Jahr 2013 werden Websites, die auf Handies und Tablets gut zu bedienen sein müssen, immer wichtiger. Zuvor schaute man sich Websites maßgeblich auf Desktop-Computern an. Seit Mai 2015 erscheinen Seiten, die für mobile Geräte optimiert wurden, auch bei google häufiger [1]. 

Eine für mobile Geräte und kleine Bildschirme optimierte Website muss bestimmte Anforderungen erfüllen, welche mit sog. Responsive-Programmierung erreicht werden. Dies bedeutet, dass sich die Ansicht der Website je nach Auflösung des Devices unterschiedlich gestaltet, jedoch keine Inhalte verloren gehen. mwiede Sofware demonstriert diese Anforderungen an dieser Seite.

  • Automatische Anpassung der Bildschirmbreite, keine horiziontalen Scrollbalken mehr. Bitte ziehen Sie das Bildschirmfenster auf Desktop-Computern horizontal zusammen, um zu erkennen, dass sich der Inhaltsbereich bei sehr schmalen Breiten anpasst. Oftmals wird auch der Begriff OnePager verwendet, welcher besagt, dass eine Mobile-Website nur nach unten gescrollt werden kann und "endlos" ist.
  • Optimierung des Menüs, Einbindung eines "Kurzmenüs" (Englisch Sticky Navigation), das sich beim Klick auf einen Button dynamisch öffnet und immer am oberen Bildschirmrand fixiert ist. Da auf sehr kleinen Bildschirmen kein Platz für ein aufgeklapptes Menü existiert, kann das Menü wahlweise eingeblendet werden.
  • Automatisches Umbrechen von Spalten und nebeneinander angeordneten Elementen. Tabellenspalten machen auf Smartphones im Hochkantformat keinen Sinn. Daher müssen die Inhalte untereinander angeordnet werden.
  • Automatische Größenanpassung von Fotos. Fotos passen ihre Breite horizontal an.
  • Fotos "wischbar" machen (Englisch swipen). Damit ist gemeint, dass man Fotogalerien horizontal per Fingerbewegung auf Smartphones navigieren kann. Beispiel Referenzen. Bitte klicken Sie auf eine Referenz und "wischen" Sie die Fotos nach links/rechts.
  • Detailgetreue Logos und Piktogramme, die beim Vergrößern nicht unscharf werden. Dies wird durch den Einsatz von Webfonts und skalierbaren Vektorgrafiken (SVG) erreicht. Bitte vergößern Sie auf Mobiles z.B. den Schriftzug "mwiede Software". Sie erkennen, dass keine Pixelung entsteht.
  • Scharfe Fotos in hoher Auflösung, die bei Vergrößerung nicht unscharf werden. Beispiel-Foto "mwiede CMS - Administrationsbereich" auf Produkte.
  • Navigations-Buttons, z.B. zum Hochscrollen bei langen Seiteninhalten.
  • Große Eingabe-Elemente, wie Textfelder, Dropdown-Listen und Buttons. Beispiel Kontaktformular.
  • Einbindung von Lesezeichen-Icons, z.B. Apple Touch Icon.
     

mwiede Software setzt ab sofort jede neue Website mit Responsive-Programmierung um. 

Beispiele von mwiede Software programmierten Responsive-Seiten:

 

Nachteile der Responsive-Programmierung

Wie bei jeder Technologie gibt es auch hier (oftmals verschwiegene) Nachteile. Zunächst muss beachtet werden, dass bei Responsive-Websites ein höherer Entwicklungsaufwand anfällt. Die Website muss für unterschiedliche Geräte designed und getestet werden. Der Designer muss stark in den Entwicklungsprozess eingebunden werden. Die Layout-Elemente müssen universell anordbar sein (siehe Umbrüche). Weiterhin erhöht sich durch den Einsatz von Webfonts, hochauflösenden Fotos und die Zusatzanweisungen in den Programmdateien die Datenmenge, was insbesondere bei langsamen Internetverbindungen zu verzögertem Aufbau führen kann.   

Mobile optimierte Seiten sind nicht für jedes Projekt sinnvoll. mwiede Software klärt mit dem Kunden individuell, ob und in welchem Umfang Mobile-Optimierung angewendet werden sollte.

Links:

[1] Test der mobilen Nutzerfreundlichkeit von google, https://www.google.com/webmasters/tools/mobile-friendly/

[2] Ein ausführliches Tutorial zur Homepage-Erstellung finden Sie hier: http://www.homepage-erstellen.de

 

« zur Übersicht