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

(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:
https://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 (at)media eingeleitet. Das kann zum Beispiel so
aussehen:

(at)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.



Pressekontakt:
MAXXmarketing GmbH
Presse Christine Ãœlgey
089/9292860
marketing(at)maxx-marketing.net

Themen in dieser Pressemitteilung:


Unternehmensinformation / Kurzprofil:
Bereitgestellt von Benutzer: ots
Datum: 17.04.2015 - 08:40 Uhr
Sprache: Deutsch
News-ID 1200468
Anzahl Zeichen: 7964

Kontakt-Informationen:
Stadt:

München

Kategorie:

Internet

Diese Pressemitteilung wurde bisher 0 mal aufgerufen.

Alle Meldungen von MAXXmarketing GmbH