Optimal 01/2012: Mobiles Web

Ausgabe

# 1 | 2012

Kundenmagazin der kernpunkt GmbH

MOBILES WEB

Neue Chancen im Marketing ›› 10 Fakten über das mobile Web ›› Interview zum Thema Responsive Webdesign ›› Sencha Touch im Überblick ›› Microsite für die Wirtgen Group

Schon gehört?

Kurz notiert

Chronik ersetzt Unternehmensseiten auf Facebook Angelehnt an die kürzlich eingeführte Chronik für Profile ändert Facebook im März das Layout für Seiten.

Der Seitenaufbau ist nun zweispaltig und bietet mehr Platz für Bilder und Texte. Die Unternehmensgeschichte kann mit Jahreszahlen chronologisch abgebildet werden. Im Kopf der Seiten kann ein größeres Bild im Format 851 x 315 Pixeln verwendet werden.

Am 30. März 2012 werden alle Seiten weltweit auf das neue Format umgestellt. Die alten Seiten werden nicht mehr verfügbar sein.

APPS, APPS UND NOCH MEHR APPS Der mobile Markt erlebt zurzeit eine regelrechte App-Flut. Allen bekannten App Stores voran ist der Apple App Store mit mehr als 550.000 Apps der zurzeit umfangreichste Anbieter. Rund 25 Milliarden Downloads kann der Gigant aus Kalifornien verzeichnen. Direkte Konkurrenz erhält er von dem Suchmaschinenriesen Google. Der Google Play Store, früher als Android Market bekannt, hat ungefähr 580.000 hochgeladene Apps, wovon etwa 390.000 Apps online sind. Google behält sich vor, minderwertige Apps auszusortieren. Mehr als 10 Milliarden Downloads weist

Online-Handel boomt

der Google Play Store vor. Weit ab liegen der Nokia Store mit

Im Jahr 2011 wurden im deutschen Online-Handel 21,7 Milliarden Euro ausgegeben. So viel Geld wurde

100.000 Apps, der Windows Phone Marketplace mit 65.000 Apps und die Blackberry App World mit 60.000 Apps.

noch nie zuvor im Internet investiert. Laut dem Bundesverband des Deutschen Versandhandels knackte der Umsatz des Online-Handels erstmals die 20-Milliarden-Euro-Marke. Für das laufende Jahr prognostiziert der Verband eine Steigerung auf 25,3 Milliarden Euro. Zu den größten Marktteilnehmern zählen Amazon und die Hamburger Otto-Gruppe.

Neue Werbemöglichkeit bei Google Google bietet seit Ende 2011 Produktlistenanzeigen, auch Product Listing Ads genannt. Produkte eines

› Laufende Informationen unter www.gplus.to/kernpunkt

Werbetreibenden werden direkt in der Google-Suche angezeigt. Sie sind meistens im oberen rechten Rand platziert, teilweise aber auch im Kopfbereich der Google-Suche. Die Inhalte der Anzeigen bezieht Google aus dem Feed, der Daten für die Produkt-

Inhalt

suche bereitstellt. Keywords können nicht festgelegt werden, da Google die Aussteuerung der Anzeigen selbst übernimmt.

›› 10 Fakten über das mobile Web

4

›› Web-Apps basteln mit Sencha Touch

6

›› Christoph Zillgens über Responsive Webdesign 10 ›› Intelligente Microsite für die Wirtgen Group

12

Impressum: kernpunkt GmbH, Oskar-Jäger-Str. 170, 50825 Köln | Verantwortlich für den Inhalt: Matthias Steinforth | Auflage: 1.400 Stück | Erscheinung: vierteljährlich Bildmaterial: istockphoto, Sencha Inc., kernpunkt GmbH Mehr Trends? gplus.to/kernpunkt

2

Optimal | Kundenmagazin der kernpunkt GmbH

www.kernpunkt.de

Vorwort

ICH LIEBE MEIN IPHONE Mein iPhone ist mit Sicherheit nicht das Wichtigste in mei-

In dieser Ausgabe von Optimal geben wir Ihnen einen Über-

nem Leben. Da wäre auch noch das iPad zu erwähnen. Nein,

blick über die Möglichkeiten, die Sie mit einem Auftritt im

Scherz beiseite. Die Wahrheit ist, dass die neuen mobilen

mobilen Web haben. In unserem Experten-Interview erzählt

Endgeräte mir mein Alltagsleben erleichtern ungemein. Mit

dieses Mal der freie Webdesigner und Autor Christoph Zill-

einer einzigen Berührung des Touchscreens bin ich schon im

gens, was unter Responsive Webdesign zu verstehen ist und

Web, ohne dass mein Rechner erst noch hochfahren muss.

wie es für den mobilen Webauftritt angewendet werden kann.

Es fällt wirklich schwer mir vorzustellen, ohne iPhone durch

Natürlich stellen wir Ihnen wieder einige unsere neuen Pro-

die Welt zu gehen.

jekte und Themen vor.

So wie mir geht es den meisten Menschen, die schon einmal

Wir wünschen Ihnen eine spannende Lektüre und freuen uns

ein mobiles Endgerät in den Händen gehalten haben. Plötz-

wie immer über Ihr Feedback!

lich eröffnen sich neue und spontane Möglichkeiten, das Leben zu organisieren. Von der einfachen Informationsrecherche über die Pflege von Kontakten bis hin zur Archivierung von Schnappschüssen sind dem digitalen Leben keine Grenzen gesetzt. Freunde, Nachrichten und Trends sind immer und überall verfügbar.

Natürlich sollten Unternehmen und Marken mit diesen neuen Nutzeranforderungen Schritt halten. Wie ärgerlich ist es für mich als Online-Besucher, wenn ich eine Website mobil besuche, und sie nicht richtig funktioniert? Dabei reichen oft schon wenige Handgriffe und Einstellungen, um einen Webauftritt zumindest mobil zu optimieren. Noch besser, aber auch etwas aufwändiger, ist die Erstellung einer separaten mobilen Website. Zwar sind hier ein ausführlicher Konzeptionsprozess und eine kreative Ausgestaltung der zur Verfügung stehenden Funktionen notwendig, die Nutzer erhalten jedoch eine perfekt auf ihre Ansprüche abgestimmte mobile Website.

› Matthias Steinforth, Geschäftsführung Marketing und Vertrieb

#3 | 2011

3

Schwerpunkt

Wer noch nicht im mobilen Internet ist, der will es sein. Denn es ist praktisch, flexibel und immer verfügbar. Wer bereits mobil online ist und wie Unternehmen leicht auf die Bedürfnisse der Surfer eingehen können, lesen Sie in unseren

10 FAKTEN ÜBER DAS MOBILE WEB iOS ist das beliebteste Betriebssystem

Soziale Netzwerke sind ein beliebter mobiler Zeit-

Apple ist mit seinem Betriebssystem iOS der belieb-

vertreib

teste Anbieter, obwohl es nur auf einem einzigen End-

Eine Lieblingsbeschäftigung der Nutzer ist das mobile

gerät zum Einsatz kommen kann: dem iPhone. Dieses

Surfen in sozialen Netzwerken. Facebook ist längst in

setzt seinen Siegeszug unbeirrt fort. Fast 50 Prozent

den Alltag der meisten Menschen integriert. Daher wird

der deutschen mobilen Surfer besitzen und nutzen das

es als praktisch empfunden, zwischendurch und über-

iPhone. Allerdings holt Android in den letzten Monaten

all mit Freunden Nachrichten zu tauschen oder den

rasant auf. Immerhin rund 40 Prozent der Nutzer set-

aktuellen Aufenthaltsort kundzutun. Auch LinkedIn und

zen auf das Betriebssystem von Google, das sich auf

Twitter sowie XING gehören zu den regelmäßig mobil

unterschiedlichen Endgeräten einsetzen lässt.

besuchten Online-Netzwerken.

1

2

3

4

Mobile Websites sorgen für Stammkunden

4

20 Millionen Bundesbürger surfen mobil

Die meisten Nutzer erwarten von einer stationären Sei-

Vor allem jüngere Nutzer lieben das mobile Internet. 65

te, dass sie auch mobil lesbar ist. Es wird als selbst-

Prozent der 16 bis 24-jährigen möchten mobil surfen.

verständlicher Service empfunden, wenn Produktin-

Bei den 25- bis 34-jährigen sind es 47 Prozent, die Inte-

formationen, Nachrichten oder Ansprechpartner mobil

resse zeigen. Je höher das Haushaltsnettoeinkommen,

auffindbar sind. Können sich die Nutzer auf die perma-

desto höher ist das Interesse am mobilen Surfen. Män-

nente und flexible Verfügbarkeit einer Website verlas-

ner nutzen das mobile Internet häufiger als Frauen, wo-

sen, werden sie schnell zu regelmäßigen Besuchern

bei letztere in der Nutzung stetig aufholen.

und Stammkunden.

Optimal | Kundenmagazin der kernpunkt GmbH

M-Commerce ist ausbaufähig

Touch Screens sind die Zukunft

Mobiles Shopping ist praktisch und schnell, dennoch

Alle wollen Touch Screens. Technologie-Evangelisten

hat es sich noch nicht bei den Konsumenten durch-

beschwören bereits die Einführung von Touch Screens

gesetzt. Zwar sorgen Großanbieter wie Amazon oder

in allen Lebensbereichen, von der medialen Nutzung

Ebay bereits für Einkaufskomfort mit separaten mobi-

über den Küchenbereich bis hin zur Aufzugnutzung. Im

len Websites oder Apps, dennoch muss das Vertrauen

mobilen Bereich ist der Touch Screen bereits stark eta-

bei den Nutzern erst noch wachsen. Jetzt schon be-

bliert. Deshalb sollten Websites heute schon Inhalte auf

liebt ist der mobile Online-Preisvergleich. Im stationä-

die Fingernutzung hin optimieren. Mobile Nutzer freuen

ren Handel wird vor dem Kauf mobil nach eventuellen

sich über den Einsatz großflächiger Elemente, wie But-

Sonderangeboten im Web gesucht.

tons oder Teaser. Kleingeschriebene versteckte Links sorgen für Unmut.

Design für mobile Websites ist pragmatisch Das Design einer mobilen Website muss auf die Anforderungen der Endgeräte abgestimmt sein. Idealerwei-

Funktionen werden stärker integriert

se wird der Nutzer nicht zu unnötigem Scrollen oder

Mobile Endgeräte zeigen beim Surfen im Internet den

Hin- und Herschieben der Website gezwungen. Bilder

Vorteil, bestimmte Aktionen unmittelbar auszuführen.

dürfen nicht zu groß sein und Links sollten einfach zu

Wer nach einem Ansprechpartner sucht freut sich,

erkennen sein. Dafür muss unter Umständen gar kein

wenn er mit einem Klick auf die angegebene Telefon-

neues Design entworfen werden. Mit Responsive Web-

nummer direkt anrufen kann. Auch die Standortbestim-

design, einem sich automatisch an die Nutzungssitua-

mung oder die Verwendung von QR-Codes werden

tion anpassenden Layout, werden Webseiten für den

immer beliebter.

mobilen Auftritt schnell passend gemacht (siehe auch Interview auf Seite 10).

5

6

7

8

10

9

Mobile Nutzer surfen anders Der mobile Nutzer hat ein anderes Informations- und damit Surfverhalten als der stationäre Nutzer. Somit ist

Mobile Websites sind über das CMS zu pflegen

in vielen Fällen das Angebot einer separaten mobilen

Die meisten modernen Content-Management-Systeme

Website sinnvoll, damit die individuelle Nutzungssitu-

haben Templates für mobile Seiten. Bestehende Inhal-

ation abgedeckt werden kann. Es können Anpassun-

te werden automatisch in eine mobile Variante umge-

gen der Navigation, Reduktion von Bildern und Inhalten

wandelt. Wird eine separate mobile Website angelegt,

oder die Bereitstellung von speziellen neuen Inhalten

kann auch diese problemlos über das Bestands-CMS

notwendig werden.

eingerichtet und gepflegt werden.

#1 | 2012

5

Produktvorstellung

SENCHA TOUCH Mobile Website und App vereinen Die steigende Bedeutung des mobilen Internets führt dazu, dass Unternehmen verstärkt Wert auf einen professionellen mobilen Online-Auftritt legen. Dabei stehen sie meist vor der Frage, ob sie eine mobile Website oder eine App einsetzen sollen. Doch es gibt auch Lösungen, die dazwischen liegen. Mit dem App Framework Sencha Touch können Web Apps und hybride Apps erstellt werden, welche die Vorteile mobiler Websites und Apps vereinen.

Zukunftssicher dank HTML5 Sencha Touch ist ein Produkt der Sencha Inc. aus dem kali-

Patrick Gollmer

fornischen IT-Standort Silicon Valley. Nach eigener Aussage

über Sencha Touch

wicklern weltweit verwendet. Sencha Touch ermöglicht die

Worin liegen die Stärken von Sencha Touch?

Mit Sencha Touch lassen sich mit geringem Aufwand plattformübergreifende Apps entwickeln. Dabei wird auf moderne Webstandards wie HTML5, CSS3 und JavaScript zurückgegriffen.

wird das App Framework von mehr als zwei Millionen EntEntwicklung von Apps mit JavaScript, CSS3 und dem neuen HTML5. Sencha Touch setzt auf den offiziell erst 2014 erscheinenden Webstandard und ist somit optimal für die Zukunft gerüstet. HTML5 revolutioniert das Web mit zahlreichen Neuerungen, zum Beispiel mit der simplen Einbindung von Audio- und Videoelementen, ohne Flash verwenden zu müssen.

Welche Vorteile haben mit Sencha Touch entwickelte Web Apps im Vergleich zu nativen Apps?

Hohe Reichweite im mobilen Internet

Eine Sencha Touch App lässt sich direkt im Browser

Mit Sencha Touch erstellte Apps sind mit Apples iOS, Goog-

ausführen. Es ist kein zeitaufwändiger Review-Prozess

les Android und RIMs Blackberry kompatibel und decken so-

wie beispielsweise in Apples AppStore notwendig. Da-

mit fast 90 Prozent der mobilen Endgeräte ab, die im Jahr

mit ist die Applikation einfacher und schneller zu aktu-

2011 in Deutschland zum Surfen im mobilen Web verwendet

alisieren.

wurden. Sencha Touch ist für mobile Endgeräte optimiert, die

Wie hoch ist der Entwicklungsaufwand von Apps mit Sencha Touch?

Durch den Einsatz von Sencha Touch lässt sich der Entwicklungsaufwand minimieren, da nicht für jede Plattform eine Neuentwicklung notwendig ist. Eine einmal entwickelte Web App lässt sich auf allen gängigen mobilen Betriebssystemen ausführen.

mit Touchscreens gesteuert werden. Es bietet verschiedene spezifische Steuerungsmöglichkeiten wie Doppelklicks, Wischbewegungen oder Multi-Touch-Funktionen, die eine intuitive Bedienung ermöglichen. Dank des leistungsstarken Datenpakets können Daten per AJAX, JSONP oder YQL nachgeladen und anschließend auf dem Endgerät abgespeichert werden. Somit ist auch ein Offline-Betrieb der Applikationen kein Problem.

Über Patrick Gollmer Patrick Gollmer arbeitet als Entwickler bei kernpunkt. Er

Web Apps: Mobile Websites im App-Gewand

ist unter anderem Experte für die Realisierung mobiler

Durch die Unterstützung verschiedener Webstandards kön-

Webseiten.

nen mit Sencha Touch leistungsstarke Web Apps entwickelt werden. Web Apps sind mobile Websites, die nativen Apps in

6

Optimal | Kundenmagazin der kernpunkt GmbH

Mobile Apps erstellen mit Sencha Touch: High Performance HTML5 für ein starkes Nutzererlebnis

ihrem Erscheinungsbild sehr nahe kommen und wie native

Web App. So ist zum Beispiel eine Verwendung der Kamera,

Apps auf verschiedene Funktionen des mobilen Endgeräts

der Kontaktliste oder der Vibrationsfunktion möglich. Hybri-

zugreifen können. Der Entwicklungsaufwand ist im Vergleich

de Apps sind nativen Apps prinzipiell sehr ähnlich. Ein ent-

zu einer nativen App gering. Die Web Apps laufen auf Web-

scheidender Unterschied liegt in der Entwicklung mit Hilfe

servern und werden von den Nutzern über den Web-Browser

von Web-Technologien, während native Apps für gewöhnlich

des Endgeräts angesteuert. Das bedeutet, dass Web Apps

mit klassischen Programmiersprachen wie Objective C oder

unabhängig vom Betriebssystem mit verschiedensten End-

Java realisiert werden.

geräten aufgerufen werden können.

Hybride Apps: Web Apps im nativen Rahmen Mit Hilfe des Frameworks PhoneGap können mit Sencha Touch entwickelte Web Apps in einen nativen Rahmen gebracht werden. Solche Anwendungen werden hybride Apps genannt. Sie werden von den Nutzern heruntergeladen und auf den Endgeräten installiert. Somit können die hybriden Apps über die bekannten App Stores vertrieben werden.

Die native Umgebung der hybriden App erlaubt den Zugriff auf wesentlich mehr Gerätefunktionen als die gewöhnliche

› Infos unter kernpunkt.de/kompetenzen/sencha-touch

#1 | 2012

7

Neue Projekte

BERATUNG UND CMSAUSWAHL FÜR DIE PAYBACK GMBH

INTRANETKONZEPTION FÜR DIE TÜV RHEINLAND AG

PAYBACK ist das führende Bonusprogramm in Europa und

TÜV Rheinland ist ein international führender Dienstleis-

gleichzeitig die größte deutsche Couponingplattform. Kunden

tungskonzern mit 500 Standorten in 61 Ländern auf allen

können bei über 500 renommierten Unternehmen im Handel,

Kontinenten.

online und mobil Punkte sammeln und diese je nach Wunsch gegen Gutscheine, Prämien oder Lufthansa-Meilen einlösen

Für TÜV Rheinland kümmerte sich kernpunkt um die nutz-

bzw. für Hilfsprojekte spenden. Für den geplanten Relaunch

erzentrierte Konzeption und Umsetzung des Intranets. Um

der Online-Angebote der PAYBACK GmbH übernahm kern-

ein bestmögliches Ergebnis unter Usability-Aspekten zu er-

punkt eine beratende Rolle bei der CMS-Auswahl. Dabei

reichen, wurden Remote-Usability-Tests und weltweite Um-

wurde im Rahmen der Internationalisierung der Angebote

fragen unter Mitarbeitern des Konzerns durchgeführt.

Wert auf Mehrsprachigkeit gelegt. Weiterhin kümmerte sich kernpunkt um die konzeptionelle Ausarbeitung der neuen Architektur des Internetauftritts.

MOBILE WEBSITE FÜR DIE BASLER AG

WIE NUTZERFREUNDLICH IST IHRE WEBSITE?

Basler ist Entwickler und Hersteller von hochwertigen Ka-

Für Unternehmen, die ihren Internetauftritt im Hinblick

meras für industrielle und medizinische Anwendungen, Ver-

auf Nutzerführung und Usability überprüfen möchten, hält

kehrskontrollsysteme sowie Videoüberwachung. Im Zuge

kernpunkt ein praktisches Hilfsmittel bereit. Ein nach dem

seines Relaunchs hat das Ahrensburger Unternehmen eine

„Design with Intent“-Prinzip von Dan Lockton entwickeltes

mobile Version seines Online-Auftritts ins Leben gerufen. Sie

Frage-Kartenspiel unterstützt bei der Frühjahrsinspektion der

wird über ein zusätzliches CSS-Stylesheet ermöglicht und ist

Unternehmens-Website. Wir verlosen 10 Kartenspiele. Ein-

für die Touchscreen-Bedienung optimiert. Somit können die

fach eine E-Mail mit der Betreffzeile „Design-Tarot“ und der

Inhalte wie Bilder, Texte und Produktbeschreibungen zentral

E-Mail-Signatur an optimal@kernpunkt.de schicken.

im Content-Management-System InterRed gepflegt werden.

8

Optimal | Kundenmagazin der kernpunkt GmbH

Beratung

MOBILE WEBSITE ODER APP? Die Entscheidung, welche Art von mobilem Angebot zum Einsatz kommen soll, stellt viele Website-Betreiber vor eine große Herausforderung. Mobile Website per CSS, separate mobile Website oder eine eigene App? Welches Medienangebot letztlich das richtige ist, lässt sich mit einer Erstkonzeption leicht herausfinden.

Angepasst: Die mobile Website per CSS Eine Realisation mit dem geringsten konzeptionellen Aufwand beschränkt sich auf Anpassungen des bestehenden Webauftritts per CSS. Dafür ist es erforderlich, unterschiedliche Stylesheets zu entwickeln, um diese später browser- und endgerätespezifisch ausliefern zu können. Durch die CSSAnpassung auf mobilen Websites findet keine Reduktion der

Individuell: Die separate mobile Website Einen nutzerorientierteren Ansatz stellt die inhaltlich optimierte mobile Website dar. Die Seitenkomplexität wird verringert, indem die Navigationsstruktur überarbeitet wird und Inhalte hinterfragt und gegebenenfalls neu organisiert werden.

Fokussiert: Die App Die App charakterisiert sich dadurch, dass sie einem konkreten Zweck dient. Sie ist inhaltlich auf das Wesentlichste reduziert, schnell verfügbar und in ihrer Bedienbarkeit sehr einfach gestaltet. Bei der Konzeption einer App sollte eine Orientierung an den notwendigen Schritten für die Erstellung einer separaten mobilen Website erfolgen.

Fazit: Welche Wahl ist die richtige?

Bei der Konzeption eines mobilen Online-Auftritts ist eine genaue Betrachtung der Bedürfnisse und Nutzungsgewohnheiten der User im Kontext der mobilen Nutzung der Schlüssel zum Erfolg.

Inhalte und Navigationsstruktur zugunsten der Nutzerinteressen und Bedienbarkeit der Website statt.

› Der gesamte Fachrtikel auf www.kernpunkt.de/presse/fachartikel

Portrait Darum arbeite ich bei kernpunkt: Familiäre Atmosphäre, ständig neue Herausforderungen und flexible Arbeitszeiten, was will man mehr?

Mein Tag bei kernpunkt beginnt: zwischen 9 und 10 Uhr. Meine persönliche Herausforderung: Die Parkplatzsuche in Köln.

Oliver Blum Telefon: +49 221 - 569 576 - 320 E-Mail: o.blum@kernpunkt.de Alter: 37

Ich kann gar nicht: Früh aufstehen.

Ich in einem Satz: Jemand, der keine Ein-Satz-Aussagen treffen kann Mein letzter Urlaub: Ein Segeltörn entlang der holländischen und deutschen Küste.

Apple oder Android? De facto Apple, im Geiste Android.

Ausbildung: Bankkaufmann, Dipl. Inf

Wenn ich keinen Kaffee bekomme, dann: Keine Ahnung,

Job bei kernpunkt: Leiter Entwicklung, Berater

undenkbar!

Mein Team: Ist große Klasse!

Mein Internet-Geheimtipp: http://hackaday.com/

#1 | 2012

9

Interview

Interview mit Christoph Zillgens

„ ES GIBT NUR EIN WEB.“ Optimal: Herr Zillgens, ca. Mitte des Jahres erscheint Ihr

O: Eignet sich Responsive Webdesign für jede Art Website

Buch „Responsive Webdesign: Hochwertige Websites mit

oder gibt es Einschränkungen?

HTML5, CSS3 und Webfonts erstellen“. Was hat Sie dazu

CZ: Grundsätzlich eignet es sich. Dennoch kann es je nach

veranlasst, direkt ein 350 Seiten starkes Fachbuch zum The-

Website und Anwendungsfall Gründe geben, sich gegen die-

ma zu verfassen?

sen Ansatz zu entscheiden. Es gibt auch Leute, die der Mei-

Christoph Zillgens: Das Thema hat sich im Laufe der Zeit

nung sind, dass der Unterschied zwischen einem 3“-Smart-

entwickelt. Als der Hanser-Verlag vergangenes Jahr auf

phone und einem 30“-Desktop-Monitor einfach zu groß ist,

mich zukam, stand zunächst noch grob ein Buch zum The-

um mit der gleichen Ausgangsbasis beide vernünftig zu be-

ma HTML5/CSS3 im Raum, mit der Zeit hat sich aber immer

dienen. Ich sehe es aber eher von dem Standpunkt her, dass

mehr herauskristallisiert, dass es zum Thema Responsive

Inhalte, die über eine bestimmte URL im Web verbreitet wer-

Design sehr viel zu sagen gibt, weshalb es auch den Großteil

den, mit jedem Gerät vernünftig zugänglich sein sollten. Das

des Buches ausmacht. Wobei HTML5 und CSS3 in dem Zu-

sollte unser Ziel sein und das ist in den meisten Fällen auch

sammenhang natürlich auch eine Rolle spielen.

umsetzbar, wenn auch mit mehr Aufwand verbunden.

O: Was genau ist Responsive Webdesign?

O: Wie schnell oder wie aufwändig lässt sich Responsive

CZ: Responsive heißt übersetzt »reaktionsfähig« und meint,

Webdesign auf einer bestehenden Website anwenden?

dass Websites so gestaltet und umgesetzt werden, dass sie

CZ: Das kommt natürlich stark auf den Umfang und auf die

auf äußere Einflüsse wie Displaygröße und weitere Geräte-

Komplexität einer Website an. Je komplexer eine Website

eigenschaften wie Touchdisplays reagieren können. Das we-

aufgebaut ist, desto aufwendiger ist auch ein reaktionsfähi-

sentliche Element dabei sind nicht die Media Queries, son-

ges Design. Bei großen Portalen ist es nicht mit Flexibilität

dern das flexible Grid. Denn wichtig ist, dass eine Website

und ein paar Media Queries getan, auch Performance und

flexibel genug ist, um auch auf neue Geräte und Situationen

Inhalte müssen auf den Prüfstand. Ist eine Website hingegen

reagieren zu können

eher textlastig, aufgeräumt und gut konzipiert, kann sie recht

O: Wie schätzen Sie die Bedeutung dieser neuen Designform

schnell in ein reaktionsfähiges Layout umgewandelt werden.

ein? Überleben Websites in der Zukunft überhaupt, wenn Sie

Ebenso ist wichtig, ob eine Website von der HTML-Struktur

nicht automatisch und voll flexibel auf die Anforderungen der

gut konzipiert ist.

neuen Endgeräte reagieren?

O: Lohnt es sich nicht eher, eine separate mobile Website

CZ: Langfristig gehe ich davon aus, dass Responsive Web-

oder App anzubieten, anstatt eine auf Kosten der Flexibilität

design der Standard-Workflow eines jeden Webdesigners

reduzierte zentrale Website aufzubauen? Immerhin sind die

wird, wobei herkömmlich gestaltete Seiten damit nicht gleich

Nutzeranforderungen je nach Endgerät teilweise sehr unter-

zum Tode verurteilt sind. Die Vielfalt der internetfähigen Ge-

schiedlich.

räte steigt allerdings weiter an und ebenso die Möglichkeiten,

CZ: Das ist genau die Frage, ob die Nutzeranforderungen

das Internet mobil zu nutzen. Insofern schätze ich die Bedeu-

wirklich unterschiedlich sind. Es gibt sicherlich Websites, bei

tung sehr hoch ein.

denen durchaus eine separate App oder mobile Website Sinn

10

Optimal | Kundenmagazin der kernpunkt GmbH

macht, weil sie eine andere Zielgruppe bedienen oder einen

anhört. Dabei gibt es nur ein Web, das lediglich über eine

bewusst anderen Fokus haben. Bei den meisten Websites

Vielzahl an (mobilen) Geräten erreichbar ist, und das in im-

sehe ich das allerdings nicht. Eine zentrale Website ist auch

mer größerem Maße. 2011 wurden erstmals mehr mobile

nicht unbedingt weniger flexibel als eine separate App bzw.

Endgeräte, als klassische Desktop-Rechner verkauft. Aktuell

mobile Variante.

wurde berichtet, dass in den USA erstmals mehr Menschen

O: Gibt es Qualitätsmerkmale und Kriterien, an denen ich

(46 Prozent) ein Smartphone besitzen, statt einem klassi-

eine gute Umsetzung von Responsive Webdesign festma-

schen Handy (4 Prozent). Und das bei einer Geräte-Kate-

chen kann?

gorie, die es vor 5 Jahren noch gar nicht gab. Bald kommen

CZ: Die Qualität von Responsive Webdesign spielt sich auf

auch die ersten Handys mit dem UMTS-Nachfolger LTE auf

mehreren Ebenen ab. Man kann die Inhaltsstrategie bewer-

den Markt, mit dem Downloadgeschwindigkeiten im Breit-

ten, die Gestaltung, die technische Umsetzung. Wichtig bei

bandbereich möglich werden. Hinzu kommt der Bereich der

der Bewertung ist, die Website mit verschiedenen Endgerä-

Tablets, der ebenfalls stark wächst.

ten zu testen. Die Fingersteuerung ist nun mal anders als das

O: Ihre Lieblings-Website, die mit Responsive Webdesign

Navigieren mit Maus oder Tastatur.

umgesetzt wurde?

„Responsive Webdesign wird der Standard-Workflow eines jeden Webdesigners.“

CZ: Zurzeit gefällt mir die Website von crushlovely.com sehr gut: aufgeräumt, übersichtlich und trotzdem nicht langweilig. Der „erweiterbare“ Spruch im Kopfbereich ist eine pfiffige Sache. Vom Design gefällt mir auch unitedpixelworkers. com sehr gut, leider lädt die Website recht langsam. Eine Übersicht über aktuelle Responsive Designs gibt es bei

O: Ist der technologische Aufwand zur Umsetzung hoch?

mediaqueri.es.

Immerhin muss die Website in der Lage sein, sich an jedes

O: Vielen Dank für das Gespräch, Herr Zillgens.

denkbare Endgerät anzupassen.

CZ: Genau deshalb ist es wichtig, die Flexibilität als wichtigstes Feature vorne anzustellen. Vor allen Dingen müssen Designer lernen, ich schließe mich da ein, ihren Wunsch nach Kontrolle nicht mehr auf die Pixelperfektion, sondern auf An-

Über Christoph Zillgens

passungsfähigkeit zu lenken. Pixeldimensionen sind unwich-

Christoph Zillgens ist selbständiger Webdesigner

tig, Verhältnisse sind wichtig. Insofern stehen auch Media

(www.zillgensdesign.de) aus dem äußersten Westen

Queries nicht im Vordergrund, weil sie dazu verleiten, wieder

Deutschlands und arbeitet vor allem mit kleinen und

mehr Kontrolle hinzuzufügen. Das kann bei übertriebenem

mittelständischen Unternehmen an deren Websites.

Einsatz sehr aufwändig werden, auch bei der späteren Pfle-

Dabei setzt er auf moderne Technologien wie HTML5,

ge der Website. Dennoch muss man sich im Klaren darüber

CSS3 und Webfonts sowie natürlich Responsive

sein, dass Responsive Webdesign nicht ohne zusätzlichen

Webdesign. Zurzeit schreibt er über dieses Thema ein

Aufwand zu haben ist.

Buch, das etwa Mitte des Jahres erscheint.

O: Wieso ist CSS3 für Webdesigner ein so großes Thema?

CZ: CSS3 – oder besser gesagt, die einzelnen Module von

Über das Buch

CSS3 – sind deshalb so ein Thema, weil sie viele erwünsch-

In seinem Buch „Responsive Webdesign: Hochwer-

te Funktionen bereit stellen, auf die wir so lange gewartet

tige Websites mit HTML 5, CSS3 und Webfonts er-

haben. Gerade im Responsive-Webdesign-Kontext sind

stellen“ können fortgeschrittene Webdesigner sich

Features wie Verläufe, Schlagschatten, abgerundete Ecken

mit den spannenden Möglichkeiten des Responsive

wichtig, weil wir damit Elemente wie Buttons erstellen kön-

Webdesigns vertraut machen. Am Beispiel einer kom-

nen, für die wir früher Grafiken verwenden mussten, die un-

pletten Website erfahren sie, wie moderne Designs

flexibel sind und die Ladezeit erhöhen.

Schritt für Schritt aufgebaut werden.

O: Was glauben Sie persönlich: Wie stark wird die Bedeutung von mobilen Webangeboten steigen?

CZ: Sehr stark, auch wenn der Begriff „mobile Webangebote“ unpassend ist, weil es sich nach separaten Angeboten

› Ungekürztes Interview unter www. kernpunkt.de/magazin/nachgefragt

#1 | 2012

11

Case Study

MICROSITE MIT RESPONSIVE WEBDESIGN FÜR DIE WIRTGEN GROUP Für ihren diesjährigen Auftritt auf der Messe Intermat in Villepinte bei Paris hat die Wirtgen Group eine Microsite eingerichtet. Das Besondere: Sie setzt Responsive Webdesign ein, um sowohl stationäre als auch mobile Nutzer professionell zu informieren.

Wirtgen jetzt erleben

Die Microsite bringt alle benötigten Informationen zum Messeauftritt der Wirtgen Group übersichtlich zusammen. Sie ist schlicht gestaltet und setzt auf großflächige Grafik- und Bedienelemente. Ein Intro-Video deckt den oberen Bereich der Seite ab und sticht sofort ins Auge: Hier präsentiert die Wirtgen Group den Messeauftritt in multimedialer Form.

Alle Informationen gebündelt abrufbar Unter dem Video befindet sich die Navigation, die den Großteil des verbliebenen Platzes einnimmt. Sie wurde in Form von aufklappbaren Menüelementen umgesetzt, so dass die gewünschten Informationen jederzeit per Mausklick aufgerufen werden können. Sämtliche Unterseiten verbleiben auf diese Weise im Layout der Startseite. Die daraus resultierende geringe Navigationstiefe sorgt dafür, dass sich die Nutzer nicht in Unterseiten verlieren und zu jeder Zeit den Überblick behalten.

Schlicht und übersichtlich gestaltet mit Responsive Webdesign

Die Besucher der Microsite können sich im Detail über den

Display an. Folglich sind alle Inhalte der Microsite auch auf

Baumaschinenhersteller informieren und dessen Innova-

mobilen Endgeräten nutzerfreundlich aufrufbar.

tionen näher kennenlernen. Die neue Generation des Kälterecyclers und Bodenstabilisierers Wirtgen WR 240i wird

Baukasten für beliebige weitere Microsites

beispielsweise mit übersichtlichen Bullet Points, Informa-

Die Microsite ist neben Deutsch auch auf Englisch und

tionsmaterial zum Download und einem Video vorgestellt.

Französisch verfügbar und als Baukasten angelegt, sodass

Weiterhin sehen Besucher vorab schon Abbildungen der Ex-

weitere Webspecials für diverse Anlässe im selben Layout

ponate sowie des 2.000 Quadratmeter großen Messestands.

angelegt werden können. Bei der Erstellung kann die Seite anhand von Inhaltsmodulen nach Belieben angepasst wer-

Umsetzung mit Responsive Webdesign

den. Die gesamte Microsite sowie der Baukasten basieren

Das Webspecial ist für die Darstellung auf mobilen Endgerä-

auf dem CMS FirstSpirit.

ten optimiert. Zu diesem Zweck wurde die Microsite auf Basis des Responsive Webdesigns entwickelt. Somit passt sich die Seite je nach Endgerät automatisch an das darstellende › Mehr Projekte lesen Sie unter kernpunkt.de/referenzen

12

Optimal | Kundenmagazin der kernpunkt GmbH