Praxiswebseite – Umstellung auf mobile Endgeräte
Was ist anders am Webseitenlayout für mobile Endgeräte? Beispiele, die interessieren sollten!
.
1. Was ist anders am Webseitenlayout für mobile Endgeräte?
Früher war man als Grafikdesigner gewohnt, vom Buchdruck aus zu denken. Die meisten unserer Kunden stellen sich auch heute noch ein Design vor, das auf den Millimeter genau vorab gestaltet werden kann.
Leider war diese Denkweise im Web nie ganz umsetzbar und mit Responsive Design wird diese Vorstellung vollkommen hinfällig. Nicht nur die verschiedensten Browser und Betriebssysteme, sowie Helligkeits- und Kontrasteinstellungen am Monitor machen den Designern zu schaffen. Die unterschiedlichen Bildschirmgrößen- und Auflösungen bringen ein fest-stehendes Design völlig zum Kippen.
Neuerdings wird nur noch in Modulen gedacht, in einzelnen Bausteinen, die unabhängig voneinander gestaltet und platziert werden können und doch ein gemeinsames Ganzes ergeben müssen.
2. Keine festen Größen – alles wandelt sich
Die unterschiedlichen Formatanpassung haben Auswirkungen auf die Webinhalte: Bilder ändern ihre Größe oder werden ganz ausgeblendet, Textblöcke können nicht in einem bestimmten Layout festgezurrt werden, sondern ändern permanent ihre Laufbreite und somit ihre Umbrüche. Gleiches gilt für Formulare, Videos, Grafiken und allen voran für die Menüdarstellung.
3. Kundenbeispiel 1
Links: Die Webseite angezeigt auf dem iPhone 5 vor der Umstellung auf mobiles Design.
Rechts: Die Webseite auf selbigem Gerät nach der Umstellung.
Der Vorteil wird offensichtlich:
Bei der Anpassung der Seitenelemente auf die jeweilige Bildschirmgröße, müssen diese priorisiert werden, so dass die wichtigsten Elemente im sichtbaren Bereich stehen, wie hier auf der Startseite zu sehen ist.
Das Logo ist nach der Umstellung vollständig sichtbar, alle Kontaktdaten sind schnell zu erfassen, die Art der Dienstleistung und ihre lokale Zuordnung nimmt man auf den ersten Blick wahr.
Das Hauptmenü mit einzelnen Inhalten wird hingegen in einem Icon rechts oben zurückgenommen und erst bei Bedarf sichtbar.
4. Kundenbeispiel 2
Die Seite wurde neu erstellt. Das Menü ist vielschichtiger als im Beispiel 1. Neben dem Hauptmenü (Icon rechts oben) gibt es zusätzlich differenzierte Praxis- und Kontaktinfos (braune Kästchen) sowie auffällige Schwerpunktthemen (grüne Kästchen). Die Einheitlichkeit und Übersichtlichkeit der Webseite bleibt bei allen Endgeräten gleichermaßen gewahrt. Das aufgeklappte Hauptmenü sieht man im Bild links oben. Die anderen Inhalte rutschen derweil nach unten, sodass auch hier die Übersichtlichkeit trotz kleinem Bildschirm immer erhalten bleibt.
Unternehmer und Ärzte, die Ihren Kunden und Patienten modern gegenübertreten wollen, sollten umstellen! Schon heute sind im durchschnitt über 30% Ihrer Webseitenbesucher mit Smartphones unterwegs. Tabletuser machen meist 20% der Besucher aus.
Firmenkontakt und Herausgeber der Meldung:
AltaMediNet GmbH
An den Wettenwiesen 3
71282 Hemmingen
Telefon: +49 (7150) 9789000
Telefax: +49 (7150) 9789001
http://www.altamedinet.de
Ansprechpartner:
Dilek Canver-Eibner
Kundenberatung
+49 (7150) 978-9005