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