Immer noch gibt es eine ganze Reihe von Internetseiten, die nicht für Smartphones oder Tablets optimiert sind.
Für den Webmaster bedeutet das unter Umständen einen Verlust an Umsatz, da viele Besucher über mobile Geräte auf die Seite zugreifen. Da sich die Webpräsenz nicht auf einer Seite darstellen lässt, muss der Besucher nicht nur nach unten scrollen, sondern auch zur Seite. Das ist sehr lästig und der Besucher verlässt in vielen Fällen vorzeitig die Seite und wendet sich einem anderen Anbieter zu. Die Optimierung einer Seite für Handy und Tablets ist nicht schwer. Wer es sich nicht zutraut, der sollte zu einem Content Management System greifen, das für mobile Internetseite optimiert ist, wie zum Beispiel WordPress.
In wenigen Schritten zum Responsive Design
Wer mit einer Internetseite arbeitet, die mit HTML und CSS programmiert ist und über grundlegende Kenntnisse verfügt, der kann die Seite in wenigen Schritten bearbeiten, so dass sie sich automatisch an das jeweilige Endgerät anpasst. Zunächst muss im Head-Bereich der HTML-Seite der sogenannte Meta Viewport eingefügt werden. Dieser sorgt dafür, dass die Webseite beim jeweiligen Endgerät richtig dargestellt wird. Dieser lautet:
(eckige Klamme) meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"(eckige Klammer)
Im nächsten Schritt muss die CSS-Datei angepasst werden. Diese Datei ist für hauptsächlich für das Design der Seite zuständig. Dazu muss das bestehende Stylesheet um Anweisungen für mobile Endgeräte erweitert werden. Wer das alte Stylesheet nicht ergänzen will, der kann auch Stylesheets speziell für bestimmte Bildschirmgrößen definieren. Wichtig ist, dass die Navigation angepasst wird. Vor allem bei großen Webseiten ist das wichtig, da hier dieser Bereich oft sehr umfangreich ist. Dem User stehen verschiedene Möglichkeiten zur Auswahl. Im Netz gibt es eine Reihe von Plugins, mit denen sich verschiedene Navigationsmodelle schnell und einfach realisieren lassen.
Mit einem einfachen Code in der CSS-Seite passen sich die Bilder der jeweiligen Seite an und sind so groß wie das Display. Der Code lautet: img {max-width: 100%; height: auto;}. Nicht zuletzt sollte der Webdesigner überlegen, welchen Inhalt besonders wichtig ist. Auf dem großen Bildschirm kann sehr viel Text dargestellt werden, auf dem kleinen Bildschirm ist es sinnvoll, wichtigen Content so zu platzieren, dass er sofort ins Auge sticht.
Die Seite auf verschiedenen Endgeräten überprüfen
Wer eine Internetseite für mobile Endgeräte erstellt, möchte diese natürlich auch überprüfen. Es genügt dabei nicht, nur ein Gerät zu benutzen, da unterschiedliche Betriebssysteme und Displaygrößen die Seite anders darstellen. Sie Seite muss nach jedem Arbeitsschritt überprüft werden, nicht erst am Schluss, denn nur so lässt sich ein Fehler schnell entdecken. Sinnvoll ist es, mindestens ein Smartphone und ein Tablet mit dem Betriebssystem Android und Apple iOs auszuprobieren. Wer auf Nummer sicher gehen will, der experimentiert mit unterschiedlichen Browsern, denn auch hier ist die Darstellung oft unterschiedlich.
