Mobiles Webdesign. Mobiles Webdesign UNDER CONSTRUCTION. Websites für Tablets und Smartphones

Transkript

1 UNDER CONSTRUCTION Mobiles Webdesign Websites für Tablets und Smartphones In Windeseile lösen Smartphones und Tablet-Computer derzeit den PC als das wichtigste Internet-Zugangsgerät ab. Braucht jetzt jedes Unternehmen eine mobile Website? Plötzlich werden Websites nicht mehr nur per Tastatur und Maus, sondern auch durch die Berührung mit den Fingern gesteuert. Wo gestern noch der große Monitor als Anzeigegerät gesetzt galt, müssen heute auch handtellergroße Displays zur Anzeige ausreichen. Smartphones und Tablets die Apple-Geräte iphone und ipad seien hier nur stellvertretend genannt sind aus dem Alltag nicht mehr wegzudenken. Die Konsequenz daraus: Immer häufiger erwarten Kunden, dass Unternehmenswebsites auch auf ihren Mobilgeräten funktionieren. Unternehmen, die diesen Trend rasch aufgreifen, verschaffen sich einen Wettbewerbsvorteil und Erfahrungsvorsprung. In der Praxis bedeutet 1 1

2 das aber viel mehr als ein paar technische Änderungen. Kleine Displays, instabile Internetverbindungen und tendenziell abgelenkte Nutzer erfordern komprimierte Informationen, minimale Ladezeiten und ein klares Webdesign. Spannenderweise sind das dieselben Kriterien, nach denen Nutzer seit über fünfzehn Jahren die Qualität von Websites beurteilen, nämlich > > Habe ich das Gesuchte gefunden? > > Lädt die Website schnell? > > Ist die Website übersichtlich? Der Rückschluss lautet: Wenn Unternehmen bei der Konzeption ihrer Website für mobile Nutzer planen, dann konzentrieren sie sich automatisch auf die Aspekte, die für alle Nutzer höchste Bedeutung haben. Das zeigen auch die beiden folgenden Beispiele. Abspecken ohne Verzicht In Zeiten allgegenwärtiger DSL-Anschlüsse ist fast in Vergessenheit geraten, dass die Ladezeit einer Website über ihren Erfolg mitentscheidet. So rechnet der Onlinehändler Amazon für jede zusätzliche Zehntelsekunde Ladezeit mit dem Verlust von einem Prozent Umsatz. Bei Smartphones und Tablet-Computern haben nicht nur die Verbindungsgeschwindigkeit und die maximale Zahl gleichzeitiger Verbindungen Einfluss auf die Ladezeit. Success Story Smartphone Das Smartphone hat das Internet mit rasender Geschwindigkeit erobert: Mehr als 30 Millionen deutsche Nutzer surften 2012 mobil über doppelt so viele wie noch Das entspricht etwa der Hälfte der Internetnutzer in Deutschland. Der Studie Mobile Web Watch 2012 von Accenture zufolge planen diejenigen Nutzer, die noch über kein Smartphone oder ein anderes mobiles Endgerät verfügen, sich bald eines anzuschaffen. Tablet-Verkäufe verdoppeln sich 2012 Im April 2012 prognostizierte Gartner, dass Endverbraucher bis Ende des Jahres weltweit 118,9 Millionen Tablets kaufen würden. Das entspricht einem Anstieg von 98% gegenüber den 60 Millionen Verkäufen aus dem Vorjahr. Marktführer ist mit einem Anteil von über 60% bislang das ipad von Apple. Viele Geräte sind hinsichtlich ihrer Rechenkraft so schwachbrüstig aufgestellt, dass sich der Aufbau komplexer Websites merklich verlangsamt. Unternehmen, die hinreichend viel Mühe in einen auch auf Smartphones schnell ladenden Web-Auftritt investieren, freuen sich zwangsläufig über extrem kurze Ladezeiten auf dem PC. Anstrengungen, die man für mobile Nutzer mit langen Ladezeiten unternimmt, kommen also letztlich allen Nutzern und damit auch dem Unternehmen selbst zugute. Nehmen wir als zweites Beispiel die Bildschirmgröße, die Webdesigner über Jahre mit einem Durchschnittswert von 1024 mal 768 Pixeln (Breite mal Höhe) angenommen haben. Auf Smartphones sind es in der Regel 320 mal 480 Pixel gerade einmal 20 Prozent des alten Standards. In der Praxis führt dieser Flächenverlust dazu, dass sich die Webteams auf die Inhalte und Funktionen konzentrieren, die für den Kunden am wichtigsten sind. Ein mustergültiges Beispiel für diese Praxis stellt die Website der Deutsche Lufthansa AG, dar. Ruft man diese Website am PC auf, erschweren unzählige Menüs, Infokästchen und Eigenwerbung die Orientierung. Ganz anders die mobile Version der Website, die sich automatisch öffnet, wenn man die Website mit einem Smartphone besucht. Drei prominent platzierte Links namens Flugstatus, Flugplan und Check-in führen den Nutzer direkt zu den entscheidenden Funktionen des Webangebots. Solche Lösungen mit hohem Nutzwert erwachsen aus dem Druck beengter Platzverhältnisse. Sie erfordern, dass sich das Webteam intensiv mit Nutzerwünschen auseinandersetzt und die Freiheit erhält, entsprechende Erkenntnisse umzusetzen. Oft gelingt das nur durch Hinzunahme externer Berater. 2 3

3 Nicht unerwähnt bleiben dürfen die umfangreichen Zusatzfunktionen, die gerade Smartphones zur Verfügung stellen. So sind die Geräte dank GPS, WLAN und 3G-Empfang präzise über ihren eigenen Aufenthaltsort im Bild. Websites können den Standort des Nutzers abfragen. Stimmt er der Abfrage zu, kann die Website mit maßgeschneiderten Informationen reagieren etwa mit Angeboten, Gutscheinen oder der Route zur nächsten Filiale. Viele andere Funktionen, wie der Zugriff auf die im Gerät integrierte Kamera erfordern hingegen die Entwicklung eigenständiger Softwares, so genannter Apps. Responsive Webdesign Nun ist das Modell Lufthansa der Betrieb sowohl einer klassischen, als auch einer eigenständigen mobilen Website nur für eine Minderheit der Unternehmen leistbar. Glücklicherweise ist das auch gar nicht notwendig. Das Zauberwort heißt Responsive Webdesign und beschreibt eine Technik, dank der sich dieselbe Website in unterschiedlicher Optik präsentieren lässt, je nachdem wie groß das Display bzw. Browserfenster ist, auf dem sie angezeigt wird. Wie stark das Smartphone- vom Desktop-Design abweichen soll, ist projektabhängig. Fast immer empfiehlt es sich, Spalten, die auf einem großen Monitor nebeneinander erscheinen, auf einem Smartphone-Display untereinander zu positionieren. Dadurch lassen sich alle Inhalte schon beim Laden der Seite in lesbarer Schriftgröße darstellen. Dem Nutzer erspart man so das mühsame Vergrößern des gewünschten Bildausschnittes durch doppeltes Antippen. Desweiteren ist es oft sinnvoll, das gesamte Hauptmenü auf Smartphones hinter einem einzigen Knopf zu verstecken. Von der Platzersparnis profitiert der Nutzer insofern, als er nicht erst am Menü vorbeiscrollen muss, um zum eigentlichen Inhalt der Website zu gelangen. Über den Knopf bleibt das Menü dennoch vollständig erreichbar und in Griffweite. Häufig lässt sich im Smartphone-Design auch die Schriftgröße verringern, gehen wir doch davon aus, dass Mobilgeräte sich näher am Auge befinden als ein Monitor. Regionale Suchmaschinenoptimierung Wie nutzen Smartphone-Besitzer das Internet? Über 60% nutzen ihre Mobilgeräte, um nach regionalen Einkaufsmöglichkeiten zu suchen, und über 70% tätigen kurz nach ihrer Suche tatsächlich einen Einkauf im Ladengeschäft. Deshalb gewinnt das Thema regionale Suchmaschinenoptimierung immer größere Bedeutung: Unternehmen mit lokalem Kundenkreis müssen nicht landes- oder gar weltweit gefunden werden. Die Auswahl der richtigen Keywords und die regionale Platzierung der Website auf Google helfen dabei, nur diejenigen Suchenden anzusprechen, die sich gezielt für ein Angebot vor Ort interessieren. und getestet werden müssen. Gerade das Testen auf Mobilgeräten gestaltet sich in einer zunehmend heterogenen Gerätelandschaft vergleichsweise aufwändig. Im Gegenzug muss das Unternehmen aber nur eine einzige Website pflegen und weiterentwickeln, die sich dank Responsive Webdesign auf stationären wie mobilen Endgeräten optimal präsentiert. Fazit Kunden besuchen Websites immer öfter mit Mobilgeräten mit kleinen Displays, unzuverlässigen Internet-Verbindungen und unter verschiedensten Rahmenbedingungen. Unternehmen, die sich mit ihren Websites auf diese neuen Anforderungen einstellen, bieten einen Service, den Kunden heute noch positiv bemerken und morgen stillschweigend voraussetzen. Nebenbei verbessern Unternehmen durch ihre Anstrengungen im Bereich Mobile Website das Online-Erlebnis für alle ihre Besucher. Dank Responsive Webdesign erfordert die optimale Darstellung von Web- Inhalten auf mobilen Endgeräten keinen zweiten Webauftritt. Responsive Webdesign verursacht zwar bei der Erstellung einer Website einen gewissen Mehraufwand, weil mehrere Designvarianten entwickelt Download aller BIEG-Leitfäden unter 4 5

4 Diese Leitfäden des BIEG Hessen könnten Sie ebenfalls interessieren: Die 7 Website-Sünden Ganz gleich ob im Design, in der Menüführung oder Kundenansprache auf Websites werden immer wieder die gleichen Fehler gemacht. Wer diese typischen Fehler vermeidet, ist seiner Konkurrenz häufig bereits voraus. In 5 Schritten zum erfolgreichen Website-Relaunch Soll eine alte Website durch eine modernere Version ersetzt werden, scheitert die neue Seite meistens bereits an Planungsfehlern. Ein Website-Relaunch will gut vorbereitet und organisiert sein. Über den Autor Tim Kaufmann ist Geschäftsführer der Webagentur Taquiri GmbH, Referent und Fachautor. Seit 15 Jahren realisiert er Websites für kleine und mittlere Unternehmen im Rhein-Main-Gebiet und Mittelhessen. Taquiri setzte als eine der ersten deutschen Agenturen bei Kundenprojekten Responsive Webdesign ein. Stand: Juni 2012 Tim Kaufmann Taquiri GmbH & Co. KG Regionales Online-Marketing Die Betreiber von Websites mit lokalem Kundenkreis müssen nicht von jedem Suchenden gefunden werden, sondern nur von denen, die sich in räumlicher Nähe zum Unternehmen befinden. Texten für die Website Google liest die Inhalte, also die Texte von Websites aus. Warum Suchmaschinenoptimierung einem gelungenen und ansprechenden Websitetext nicht im Weg stehen muss, erfahren Sie hier. Besuchen Sie uns auf

5 In Windeseile lösen Smartphones und Tablet-Computer derzeit den PC als das wichtigste Internet-Zugangsgerät ab. Plötzlich werden Websites auch durch die Berührung mit den Fingern gesteuert, und auch handtellergroße Displays müssen ausreichen, um den Auftritt anzuzeigen. Was ist beim Webdesign zu beachten? Impressum Herausgeber BIEG Hessen c/o IHK Frankfurt am Main Börsenplatz Frankfurt am Main Telefon 069 / Telefax 069 / info@bieg-hessen.de Das BIEG Hessen ist eine GbR und wird vertreten durch die Gesellschafter IHK Frankfurt am Main, IHK Hanau-Gelnhausen-Schlüchtern, IHK Fulda und IHK Offenbach am Main. Träger des BIEG Hessen Industrie- und Handelskammern: Frankfurt am Main Fulda Hanau-Gelnhausen-Schlüchtern Offenbach am Main Verantwortlich für den Inhalt Detlev Osterloh, Geschäftsführer, BIEG Hessen, IHK Frankfurt am Main Druck Daab Druck & Werbe GmbH, Reinheim Layout und Titelbild Birgit Dürr HERAUSGEBER BIEG Hessen c/o IHK Frankfurt am Main Börsenplatz Frankfurt am Main Telefon Telefax info@bieg-hessen.de 8 9