Praxis: Google fordert Mobil-Webdesign - Responsive benötigt, was tun? | Presse

München (ots) - Ab Ende April 2015 stellt Google seine Suche um. Seiten mit Mobil-Webdesign werden in Zukunft bevorzugt. Seiten-Betreiber müssen ihre Web-Präsenz überprüfen und auf responsive Design bzw. Mobilgeräte anpassen. Der Geschäftsführer der Webagentur MAXXmarketing GmbH, Klaus Huber erklärt, worum es geht und was Sie tun können.

Immer mehr Kunden greifen mit ihren Smartphones auf Internet-Seiten zu. "Auf diesen Geräten sehen herkömmliche Web-Seiten aber meist bescheiden aus", warnt der Inhaber der MAXXmarketing GmbH, www.webdesigner-profi.de. Google hat auf diese Situation nun reagiert. Der Such-Gigant hat angekündigt, Web-Seiten in Zukunft automatisch auf Mobil-Eignung zu überprüfen.

Viele Benutzer der Webmaster-Tools haben die Meldung schon gesehen: "Probleme der mobilen Benutzerfreundlichkeit" werden darin bemängelt. "Viele Seiten haben wir schon an die neuen Anforderungen angepasst", so der Münchner, "aber uns erreichen zunehmend mehr besorgte Anrufe von Kunden, die das Thema bisher ignoriert haben." Durch Google aufgeschreckt, wollen diese Kunden jetzt dringend Handy-taugliches Webdesign haben - zu Recht, denn: Wer sich nicht darauf einstellt, kann sein Google-Ranking verlieren. Seiten, die kein Mobil-Design haben, werden zukünftig in den Suchergebnissen abgewertet - Umsatzeinbußen sind schlimmstenfalls die Folge.

Ist meine Seite betroffen?

Ob Sie davon betroffen sind, können Sie in wenigen Sekunden mit einem ersten grundlegenden Test herausfinden. Rufen Sie Ihre Web-Seite im Browser auf. Greifen Sie eine Ecke des Browser-Fensters und skalieren Sie Ihre Seite so schmal und hoch wie ein Smartphone. Wenn Ihre Seite bereits ein mobil-freundliches Design hat, wird sie sich problemlos dem skalierten Fenster anpassen. Auf die gleiche Weise können Sie das Querformat und Tablet-Formate testen.

Ist Ihre Seite nicht für Mobilgeräte geeignet, also nicht responsive, dann verschwinden bei diesen Tests wichtige Inhalte aus dem Blick, statt dessen erscheint ein großer waagerechter Scroll-Bereich. Jede Seite, die sich in dieser Darstellung unvollständig anfühlt, ist suboptimal. Wenn Sie sicher gehen wollen, testen Sie Ihre Seite auch auf mehreren verschiedenen Smartphones.

Um zu sehen, ob Google Ihre Seite als Mobil-tauglich bewertet, nutzen Sie die Webmaster Tools oder geben Ihre Adresse auf Googles Testseite ein: www.google.com/webmasters/tools/mobile-friendly/

Die Lösung: Responsives Webdesign

Damit Web-Seiten auf jedem Gerät, in jeder Größe und in jeder Auflösung gut aussehen, wurde das Responsive Design entwickelt. Dabei passen sich die Inhalte automatisch an die Ausgabegröße an. Statt einer statischen Seite, die auf eine bestimmte Größe optimiert ist, hat man viele kleine Elemente, die sich je nach Seitengröße automatisch anders anordnen, erscheinen oder verschwinden. Auch die Größe der Schrift und der Bilder kann automatisch angepasst werden. Die responsive Technik arbeitet aus Nutzersicht vollautomatisch. Ihre Kunden werden nicht in lästigen Popup-Fenstern gefragt, ob sie zur Mobilversion wechseln möchten. Für den Betrachter fühlen sich responsive Seiten auf jedem Gerät intuitiv "richtig" an.

Zum Vergleich zeigen wir Ihnen hier ein starres http://webdesigner-profi.de/shop-kein-responsive-beispiel/ und hier ein responsives Webdesign. http://webdesigner-profi.de/shop-responsive-beispiel/

Auf kleinen Bildschirmen konzentriert sich das responsive Design auf das Wesentliche und versteckt alles weitere hinter einem Menü-Button. Eine der ersten Fragen bei der Optimierung auf Mobilgeräte ist daher redaktioneller Natur: Was ist eigentlich "das Wesentliche"? Welches sind die elementar wichtigen Info-Häppchen, die der Kunde auf keinen Fall aus dem Blick verlieren soll?

Responsives Webdesign wirkt sich nicht nur auf Mobilgeräte positiv aus. Auch die großen Bildschirme aktueller Notebooks und Desktop-PCs lassen sich besser nutzen. Statt der breiten leeren Ränder, die man heute noch oft sieht, erscheinen bei einem guten responsiven Design nützliche Zusatzinformationen am Rand.

CMS-Nutzer tauschen das Theme aus

Wer ein aktuelles Content Management System wie WordPress oder Joomla benutzt, kann responsives Webdesign mit etwas Glück schnell abhaken. "Für alle führenden CMS stehen nämlich bereits fertige Themes und Module bereit, in denen das responsive Design schon umgesetzt ist", erklärt Huber. WordPress zum Beispiel ist schon seit geraumer Zeit responsiv voreingestellt. Im besten Fall ist Ihre Seite daher ohne Ihr Zutun schon responsiv. Im zweitbesten Fall lässt sich ein starres Theme mit wenig Aufwand durch ein responsives ersetzen.

Je mehr maßgeschneiderte Anpassungen, interaktive Elemente oder Module eine Web-Präsenz enthält, desto aufwändiger wird die Optimierung auf Mobilgeräte. Am aufwändigsten ist die Anpassung bei Seiten in handkodiertem Quelltext. Aber auch dafür hat Huber eine schnelle und solide Lösung: "Mit der responsiven Technik ersetzen wir die vorhandenen Seiten nicht, sondern fügen ihnen ein neues Design hinzu." Indem er den vorhandenen Code beibehält, geht der Webdesigner zudem einem anderen Google-Problem aus dem Weg: "Wer zu viel auf einmal ändert, riskiert sein Google-Ranking", so Huber.

Textblöcke und Bilder mit festen Größenangaben sind tödlich für das Mobil-Design. Im responsiven Design sollten daher alle Elemente mit prozentualen Größenangaben versehen werden. Zusätzlich werden Elemente umsortiert, so dass sie je nach Bildschirm nebeneinander oder untereinander angeordnet werden. Außerdem können abweichende Layouts für unterschiedliche Zielgrößen erzeugt werden, so dass weniger wichtige Inhalte auf kleinen Bildschirmen gar nicht erst angezeigt werden.

Media Queries sind der Schlüssel

Um das alles umsetzen zu können, muss der Server zunächst die Maße des Browsers kennen. Diese erfragt er mit Hilfe der Media Queries von CSS3. Die CSS-Datei, die das Erscheinungsbild einer Webseite bestimmt, wird dazu durch mehrere Blöcke ergänzt, die jeweils für Displays mit bestimmten Eigenschaften gelten. Diese Blöcke werden mit dem Schlüsselwort @media eingeleitet. Das kann zum Beispiel so aussehen:

@media only screen and (min-width: 1200px) { /*Hier erscheinen die Formatierungen, die unter diesen Bedingungen gelten sollen*/ }

Mehrere Layouts

Statt eines einzelnen Layouts müssen für das responsive Design mehrere entworfen werden: mindestens eins für PCs, eines für Tablets und eins für Smartphones. Wichtig ist, dass die Layouts genug Luft lassen, damit die responsive Automatik die Elemente umsortieren kann. Sind die drei wesentlichen Layouts entworfen, dann können sie mit Hilfe von responsiven Techniken umgesetzt werden, entweder mit Themes und Modulen im CMS oder manuell im CSS-Quellcode.

Aber egal, welche Variante zum Einsatz kommt: Es ist höchste Zeit, sie umzusetzen. MAXXmarketing hilft Ihnen gerne dabei.