»Dies ist ein nützliches und ein wichtiges Buch. Wenn Sie Peter Gasstons Ratschlägen folgen, Ihre Sites in allen Browsern und auf einer Fülle von Anzeigegeräten testen, werden Sie Ihren Chef beeindrucken und die Nutzer begeistern. Sie werden an der Verbesserung des Web mitwirken, sodass es eine offene Umgebung bleibt.«
Bruce Lawson, Autor von »Introducing HTML5«
»Peter Gasston hat nun für die moderne Webplattform dasselbe getan wie bereits für CSS: Er hat ein erstklassiges Kompendium mit Informationen für Webentwickler praktisch jeder Qualifikationsstufe geschrieben.«
Stephen Hay, Autor von »Responsive Design Workflow«
»Peter Gasstons Ausführungen sind ein großartiger Spagat zwischen der Produktion von lupenreinem Code für echte Anwendungen und aktuellen Informationen über die neuesten Entwicklungen der Webtechnologie. Er hat eine außergewöhnliche Begabung, schwierige Fachthemen auf eine einleuchtende und unterhaltsame Weise zu vermitteln.«
Chris Mills, Developer Relations Manager bei Opera Software und Autor von »Practical CSS3«
»Beim Lesen dieses Buchs lernte ich eine Menge Neues. Fantastische, nützliche Dinge, die ich bereits in meinen aktuellen Projekten angewandt habe. Techniken, von denen noch nichts gehört hatte, obwohl ich so viel lese und recherchiere. Wenn Sie moderne Websites entwickeln, dann brauchen Sie dieses Buch meiner Ansicht nach einfach.
Jane Morrison, FLOSS UK Secretariat
»Moderne Webentwicklung gehört in das Bücherregal jedes Webentwicklers!«
Raj Sharma, British Computer Society
»Moderne Webentwicklung ist nicht nur ein hervorragendes Nachschlagewerk; es ist auch sehr gut lesbar. Es besitzt einen guten Index, die Beispiele sind kurz und knackig und der Stil ist unterhaltsam.«
Lynn Greiner, SmartBear
»Moderne Webentwicklung ist eine angenehme Lektüre. Peter schreibt in guter und einfacher Sprache, sodass der Leser die Informationen genießen kann, statt über langweiligem technischem Zeug einzuschlafen. Peters geradlinige Weise, moderne Programmiertechniken zu lehren, ist angenehm und ansprechend.«
Gisele Muller, Abduzeedo
»Wenn Sie bereit, Ihre bisherige Herangehensweise an die Entwicklung von Webseiten aufzugeben und sich modernere Techniken anzueignen, ist dieses Buch eine große Bereicherung für Ihre Bibliothek. Die Zusatzressourcen, die in jedem Kapitel und im letzten Anhang aufgeführt sind, sind von unschätzbarem Wert. «
Jennifer Kyrnin, About.com Web Design/HTML
»Für mich als Front-End-Entwickler ist das Verständnis für den Kontext, in dem wir arbeiten, wichtig, für User-Trends, technische Entwicklungen und die Werkzeuge, die zur Verfügung stehen oder bald nutzbar sein werden ... Wenn Sie dieses Jahr nur ein einziges Buch über die neuesten Entwicklungen in HTML5, CSS3 und JavaScript lesen möchten, dann sollten Sie dieses wählen.«
Chris Webb, Front-End-Entwickler bei Funda
»Dies ist ein gut geschriebenes Buch. Auf klare und verständliche Weise führt Gasston Sie in zahlreichen Kapiteln detailliert durch die neuesten Technologien und Denkräume des modernen Web-Designs.«
Virginia DeBolt, Web-Trainerin
»Der Autor hat einen wirklich guten Schreibstil, der das Buch eine unterhaltsame Lektüre macht. Er deckt eine Menge Techniken ab und geht ausreichend in die Tiefe, um gründlich zu erläutern, wie man sie benutzt. «
Tad Anderson, SYS-CON MEDIA
»Wenn Sie von geschickten CSS-Techniken, semantischem Markup und verschiedenen Möglichkeiten, APIs zu verwenden und mit den Nutzern zu interagieren, fasziniert sind, ist Moderne Webentwicklung das richtige Buch für Sie.«
David Indish, Red Star Web Development
»Pflichtlektüre für jeden Web-Entwickler.«
Craig Buckler, Optimal Works
Peter Gasston entwickelt seit über 12 Jahren Webanwendungen für Agenturen und Unternehmen. Er ist Mitbegründer von CSS3.info, der führenden Online-Ressource für CSS3, und schrieb »The Book of CSS3« (No Starch Press) sowie Beiträge für Smashing Magazine, A List Apart und .net magazine. Er hält Vorträge auf Entwicklerkonferenzen und ist Inhaber des Webentwickler-Blogs Broken Links (broken-links.com). Peter Gasston lebt in London.
Moderne Webentwicklung
Geräteunabhängige Entwicklung – Techniken und Trends in HTML5, CSS3 und JavaScript
Lektorat: René Schönfeldt
Übersetzung: Isolde Kommer, Großerlach, und Christoph Kommer, Dresden
Fachgutachter für die deutsche Ausgabe: Florence Maurice (CSS, HTML),
Marcus Ross (JavaScript, Mobile Entwicklung)
Copy-Editing: Annette Schwarz, Ditzingen
Satz: Isolde Kommer, Großerlach, und Tilly Mersin, Großerlach
Herstellung: Frank Heidt
Umschlaggestaltung: Helmut Kraus, www.exclam.de
Druck und Bindung: M.P. Media-Print Informationstechnologie GmbH, 33100 Paderborn
Bibliografische Information der Deutschen Nationalbibliothek
Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie;
detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.
ISBN:
Buch 978-3-86490-116-4
PDF 978-3-86491-464-5
ePub 978-3-86491-465-2
1. Auflage 2014
Copyright © 2014 dpunkt.verlag GmbH
Wieblinger Weg 17
69123 Heidelberg
Copyright © 2013 by Peter Gasston. Title of English-language original: The Modern Web,
ISBN 978-1-59327-487-0, published by No Starch Press.
German-language edition copyright © 2013/2014 by dpunkt.verlag. All rights reserved.
Die vorliegende Publikation ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne die schriftliche Zustimmung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendung in elektronischen Systemen.
Es wird darauf hingewiesen, dass die im Buch verwendeten Soft- und Hardware-Bezeichnungen sowie Markennamen und Produktbezeichnungen der jeweiligen Firmen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz unterliegen.
Alle Angaben und Programme in diesem Buch wurden mit größter Sorgfalt kontrolliert. Weder Autor noch Verlag können jedoch für Schäden haftbar gemacht werden, die in Zusammenhang mit der Verwendung dieses Buches stehen.
5 4 3 2 1 0
Für Dave, Jim, Morena, Nick, Rupert, Steve und alle anderen
Mitwirkenden der London Web Standards Group, die für eine
aktive Londoner Szene arbeiten und es mir ermöglichten,
meinen ersten öffentlichen Vortrag zu halten.
Einleitung
Die Gerätelandschaft
Desktop/Laptop
Mobilgeräte
Tablet
Fernseher
Die anderen
Die »Zwischendinger«
Die Multiscreen-Welt
Kontext: Was wir nicht wissen
Einige Kontext-Klischees
Nur die Geschwindigkeit zählt
Das werden Sie lernen
Literaturempfehlungen
1 Die Webplattform
1.1 Ein kurzer Hinweis zu den Begriffen
1.2 Wer Sie sind und was Sie wissen müssen
1.3 Begriffsklärung
1.4 Das echte HTML5
1.4.1 Das HTML5-Gerüst
1.4.2 Neue Standardverfahren
1.5 CSS3 und mehr
1.5.1 Herstellerspezifische Präfixe
1.5.2 CSS-Frameworks und Präprozessoren
1.6 Browserunterstützung
1.7 Testen, testen und nochmals testen
1.8 Zusammenfassung
1.9 Literaturempfehlungen
2 Struktur und Semantik
2.1 Grundsätzliche Anmerkungen
2.2 Neue HTML5-Elemente
2.2.1 Was bringen die neuen Elemente überhaupt?
2.2.2 Der Nachteil der Sektionselemente in HTML5
2.3 WAI-ARIA
2.4 Die Bedeutung semantischen Markups
2.5 Mikroformate
2.6 RDFa
2.7 Mikrodaten
2.7.1 Die API für Mikrodaten
2.7.2 Mikrodaten, Mikroformate und RDFa
2.7.3 Schema.org
2.7.4 Rich Snippets
2.8 Datenattribute
2.8.1 Die API für Datenattribute
2.8.2 jQuery und Datenattribute
2.8.3 Datenattribute in natura
2.9 Webkomponenten: Die Zukunft der Auszeichnungssprachen?
2.10 Zusammenfassung
2.11 Literaturempfehlungen
3 Mediengerechtes CSS
3.1 Media Queries
3.1.1 Media-Eigenschaften für die Abmessungen
3.1.2 Media Queries kombinieren und negieren
3.1.3 Ein kleiner Exkurs: Alles über Pixel
3.1.4 Media Queries für die Bildschirmauflösung
3.1.5 Geräteanpassung
3.1.6 Media-Eigenschaften für die Benutzerinteraktion
3.1.7 Weitere Media-Eigenschaften
3.2 Media Queries mit JavaScript
3.3 Adaptives oder responsives Webdesign?
3.3.1 Die Eigenschaft »box-sizing«
3.3.2 Längenmaße dynamisch berechnen
3.4 Längenangaben relativ zum Viewport
3.4.1 Einheiten relativ zum HTML-Wurzelelement (root)
3.4.2 »Mobile First« und Breakpoints für den Inhalt
3.5 Responsives Design und Objektersetzung
3.5.1 Das Bildproblem
3.5.2 Responsive HTML5-Bilder als Lösung
3.6 Zusammenfassung
3.7 Literaturempfehlungen
4 Neue CSS-Konzepte
4.1 Mehrspalten-Layout
4.1.1 Spaltenabstände und -linien
4.1.2 Spaltenspanne und Umbrüche
4.2 Flexbox
4.2.1 Das Flexbox-Modell deklarieren
4.2.2 Die Reihenfolge der Inhalte ändern
4.2.3 Anordnung innerhalb des Containers
4.2.4 Mehr Flexibilität
4.2.5 Wrap und Flow
4.3 Rasterlayouts
4.3.1 Das Raster deklarieren und definieren
4.3.2 Rasterlinien wiederholen
4.3.3 Elemente im Raster erzeugen
4.3.4 Ausrichtung und Stapelfolge
4.3.5 Die Grid-Layout-Syntax
4.3.6 Über die Terminologie des Rasterlayout-Moduls
4.3.7 Rasterbereiche
4.4 Die ferne Zukunft
4.5 Zusammenfassung
4.6 Literaturempfehlungen
5 Modernes JavaScript
5.1 Neu in JavaScript
5.1.1 Die Attribute async und defer
5.1.2 Die addEventListener-Methode
5.1.3 Das DOMContentLoaded-Ereignis
5.1.4 Eingabe-Events
5.1.5 CSS-Selektoren in JavaScript
5.1.6 Die Methode getElementsByClassName
5.1.7 Interaktion mit Klassen
5.2 JavaScript-Bibliotheken
5.2.1 jQuery
5.2.2 YepNope
5.2.3 Modernizr
5.2.4 Mustache
5.3 Polyfills und Shims
5.4 Testen und Debuggen
5.5 Zusammenfassung
5.6 Literaturempfehlungen
6 Geräte-APIs
6.1 Geolokalisierung
6.2 Orientierung und Bewegung im Raum
6.3 Vollbild
6.4 Vibration
6.5 Batteriestand
6.6 Verbindungsinformation
6.7 Kamera und Mikrofon
6.8 Web Storage
6.9 Drag & Drop
6.10 Mit Dateien arbeiten
6.11 Mozillas Firefox OS und WebAPIs
6.12 PhoneGap und native Wrapper
6.13 Zusammenfassung
6.14 Literaturempfehlungen
7 Bilder und Grafiken
7.1 Vektor- und Pixelgrafiken im Vergleich
7.2 Scalable Vector Graphics
7.2.1 Anatomie eines SVG-Bilds
7.2.2 Verknüpfte SVG-Dateien
7.2.3 Eingebettetes SVG
7.2.4 SVG-Filter
7.2.5 SVG und CSS kommen zusammen
7.2.6 Ein Nachteil von SVG
7.3 Das canvas-Element
7.3.1 Bildmanipulation
7.3.2 WebGL
7.4 Wann sollten Sie SVG oder Canvas wählen?
7.5 Zusammenfassung
7.6 Literaturempfehlungen
8 Neue Formulare
8.1 Neue Eingabetypen
8.2 Neue Attribute
8.2.1 autofocus
8.2.2 placeholder
8.2.3 autocomplete
8.2.4 spellcheck
8.2.5 multiple
8.2.6 form
8.3 Vorschlagslisten
8.4 Bedienelemente und Widgets
8.4.1 Zahlen
8.4.2 Datum und Zeit
8.4.3 Farben
8.5 Informationen anzeigen
8.5.1 progress
8.5.2 meter
8.5.3 output
8.6 Formularüberprüfung auf Anwenderseite
8.7 Die Constraint-Validation-API
8.8 Formulare und CSS
8.9 Zusammenfassung
8.10 Literaturempfehlungen
9 Multimedia
9.1 Die Medienelemente
9.1.1 Zusätzliche Attribute für das video-Element
9.1.2 Mehrere Quelldateien
9.1.3 Fallbacks
9.1.4 Untertitel und Beschriftungen
9.1.5 Codierung
9.2 Media Fragments
9.3 Die Media-API
9.3.1 Ladestatus
9.3.2 Zusätzliche Eigenschaften für Audio und Video
9.4 Medienereignisse
9.5 Erweiterte Medieninteraktion
9.5.1 Web-Audio-API
9.5.2 WebRTC
9.6 Zusammenfassung
9.7 Literaturempfehlungen
10 Web-Apps
10.1 Web-Apps
10.1.1 Hosted und Packaged Apps
10.1.2 Manifest-Dateien
10.1.3 W3C-Widgets
10.2 Hybrid-Apps
10.2.1 PhoneGap
10.2.2 Titanium
10.3 TV-Apps
10.4 Webinos
10.5 Application Cache
10.5.1 Inhalte der AppCache-Datei
10.5.2 Die Caching-Abfolge
10.5.3 Die AppCache-API
10.6 Zusammenfassung
10.7 Literaturempfehlungen
11 Die Zukunft
11.1 Webkomponenten
11.1.1 Templates
11.1.2 Decorator
11.1.3 Custom Elements
11.1.4 Das Shadow DOM
11.1.5 Die Puzzleteile zusammenfügen
11.2 Die Zukunft von CSS
11.2.1 Regions
11.2.2 Exclusions
11.2.3 Layouts: Noch weiter in die Zukunft geblickt
11.2.4 Feature Queries
11.2.5 Cascading Variables
11.3 Zusammenfassung
11.4 Literaturempfehlungen
Anhänge
A Browserunterstützung
B Literaturempfehlungen
Index
David Storey, dem Fachlektor dieses Buchs, schulde ich großen Dank. Seine fundierten Fachkenntnisse waren unschätzbar für mich. Obwohl er mich immer wieder korrigierte und beriet, gehen eventuelle Fehler in diesem Buch ganz auf mein Konto.
Keith Fancher, Serena Yang, Bill Pollock und der Rest des Teams von No Starch Press boten mir während der Entstehung dieses Buchs großartige Unterstützung und Beratung. Ihre Leistung kann nicht hoch genug eingeschätzt werden.
Dimitri Glazkov beantwortete mir zuvorkommend einige Fragen zu den Webkomponenten. Bruce Lawson arbeitete speziell meine Ausführungen zu den neuen HTML5-Elementen in Kapitel 2 durch. Während ich dieses Buch schrieb, griff ich ständig auf seine Arbeit und die der übrigen HTML5-Doktoren zurück.
Zwar kenne ich David Walsh nicht persönlich, danke ihm jedoch für seine herausragende Website, die ich oft zu Rate gezogen habe.
Stephen Hay und Chris Mills halfen mir nicht nur bei der Umsetzung meiner Ideen – sie sind auch unglaublich nette Menschen.
Ein großes Dankeschön geht an meine Freunde und Gelegenheitsmitarbeiter Giles McCartney, Richard Locke und Tom Shirley. Außerdem danke ich allen anderen Kollegen bei Preloaded, Poke, Top10, Believe.in und rehabstudio.
Und am allermeisten muss ich meiner Frau Ana danken – für ihre Geduld und Unterstützung während der Zeit, die ich an diesem Buch gearbeitet habe.
Heute erleben wir im Web eine beispiellose Innovation. Noch vor nicht allzu langer Zeit prägte ein einziges Unternehmen die Weblandschaft: Microsoft. Im Jahr 2003 wurde der Internet Explorer auf etwa 95% der Computer weltweit eingesetzt. Für den Entwickler hatte diese Dominanz den Vorteil eines stabilen Marktes. Es gab aber auch einen entscheidenden Nachteil: Microsoft beschränkte die Weiterentwicklung des IE irgendwann auf das Nötigste, und die Innovation im Web stagnierte – die Folge mangelnden Wettbewerbs und einer geschlossenen Umgebung.
Viele Browser
Inzwischen sieht es völlig anders aus. Es gibt am Browser-Markt vier bis fünf Hauptakteure und etwa genauso viele große Betriebssysteme. Ständig treten neue Mitspieler auf. Adobe verlagert seinen Schwerpunkt von Flash und Apps in Richtung Open Web, und neben Branchengrößen wie Google, Apple und Microsoft mischen auch Technologiekonzerne wie Samsung und Nintendo bei der zukünftigen Gestaltung des Web mit. Auch sie beeinflussen natürlich die Webentwicklung.
Viele Geräte
Die Zugangsmöglichkeiten haben sich ebenfalls drastisch verändert – denken Sie nur an die Geräte. Wir brauchen heute nicht mehr unbedingt einen Desktop- oder Laptop-Computer, um im Internet zu surfen. Inzwischen existieren so viele Gerätekategorien – etwa Smartphones, Tablets und Spielekonsolen –, dass mir die Finger zum Zählen ausgehen.
Moderne Webfrontends
In diesem Buch geht es um die Entwicklung von Webfrontends in diesem neuen Zeitalter des universellen Internetzugangs. Es geht um Methoden zur Entwicklung hochklassiger Websites, Apps und allem anderen, was auf offenen Webtechnologien aufbaut. Dabei behalten wir immer die vielfältige Gerätewelt im Blick. Das Buch handelt nicht von der Programmierung mobiler Websites oder Smart-TV-Apps. Sie lernen hier die aktuellsten sowie die für die nahe Zukunft absehbaren Entwicklungen der Webtechnologie kennen. Mit diesem Wissen können Sie bessere Sites entwickeln und die beste User Experience für alle denkbaren Zugangsmöglichkeiten liefern.
Am Ende dieser Einleitung gehe ich noch näher auf die Inhalte des Buchs ein – zunächst möchte ich mich mit der inzwischen so verblüffenden Vielfalt internetfähiger Geräte beschäftigen.
2008 war ein herausragendes Jahr – und zwar nicht nur wegen des Kinostarts von »Indiana Jones und das Königreich des Kristallschädels«. Vielmehr überschritt in diesem Jahr die Anzahl internetfähiger Geräte erstmals die Anzahl ihrer Benutzer. Diese Super-Konnektivität zwischen Geräten ist gemeinhin als Internet der Dinge (IoT = engl.: Internet of Things) bekannt. Das vorliegende Buch zielt auf eine bereits beachtlich große und schnell wachsende Untermenge dieser Dinge ab, namentlich auf all jene Dinge mit integrierten Webbrowsern.
Webfähige Geräte
Es gibt eine enorme Bandbreite webfähiger Geräte, und täglich werden es mehr. Ich selbst besitze derzeit folgende Geräte mit einem Webbrowser: einen Desktop-Computer, einen Laptop, ein Tablet, ein Smartphone, einen E-Book-Reader und eine Spielekonsole. Ich denke, für etwas wohlhabendere Gesellschaftsmitglieder ist das kein ungewöhnliches Szenario; bei vielen kämen zu dieser Liste noch ein Smart-TV und eine tragbare Spielekonsole hinzu.
Das ungeheure Spektrum internetfähiger Geräte birgt natürlich auch unglaubliche Möglichkeiten für Webentwickler. Dieses Buch soll Ihnen helfen, dabei das Maximum herauszuholen. Sehen wir uns aber zunächst die wichtigsten Gerätekategorien an und definieren wir einige Schlüsselbegriffe. So verstehen Sie besser, womit Sie es zu tun haben.
Desktop-Geräte
Das Web, wie wir es bis vor Kurzem kannten, zielte vornehmlich auf die größeren Bildschirme und leistungsfähigeren Prozessoren der Desktop-und Laptop-Computer (kurz: Desktop-PCs) ab. Üblicherweise sitzt der Nutzer vor diesen Geräten und greift dabei auf eine schnelle Netzwerkoder WLAN-Verbindung zu. Dies ist immer noch das bevorzugte Szenario am Büroarbeitsplatz. Daher sind viele Business-to-Business-Sites auf diese Konfiguration ausgelegt.
Der Einsatz von Desktop-Computern nimmt jedoch immer weiter ab; insbesondere Heimanwender tendieren heute verstärkt zu Mobiloder Tablet-Geräten (in Kürze werde ich darauf eingehen). Im letzten Quartal 2012 gingen die PC-Verkäufe gegenüber dem Vorjahreszeitraum um fast 5% zurück. Untersuchungen zeigen jedoch, dass die Anwender für textlastige Aufgaben, für Multitasking mit mehreren Browser-Tabs oder etwa für Bildbearbeitungs- und andere Programme, mit denen Inhalte exakt manipuliert werden müssen, nach wie vor den Desktop-PC bevorzugen. Auch wenn die Sicherheit im Vordergrund steht – etwa beim Internet-Banking –, kommen eher Desktop-PCs zum Einsatz.
Doch selbst innerhalb dieser respektablen und weitgehend stabilen Gruppe gibt es erhebliche Abweichungen. Die Bildschirmauflösung 1024×768 stirbt langsam aus, ist aber momentan noch recht verbreitet; die neuesten Versionen des Apple MacBook Pro bringen es indessen auf 2880×1800 Pixel Bildschirmfläche. Für die zuerst genannte Auflösung optimierte Sites werden auf einer Fläche von 2880×1800 Pixel ziemlich klein und verloren wirken.
Desktop-Browser
Bei den Desktop-Browsern teilen fünf Hauptbewerber den Markt unter sich auf: Chrome, Safari und Opera, die alle auf der WebKit-Engine aufsetzen (Opera hatte mit Presto eine eigene Engine, die aber in den Ruhestand geschickt wurde) sowie Firefox und Internet Explorer (Version 9 bietet die meisten und 10 sämtliche modernen Funktionen). Glücklicherweise werden die Funktionen bei allen Browsern in der Regel in standardkonformer Weise implementiert. Zudem verfügen alle Browser über eine regelmäßige Aktualisierungsroutine, oder die Entwicklung weist zumindest dorthin; die Anwender erhalten also recht schnell Zugriff auf neue Funktionen. Natürlich laufen bei einem nicht unerheblichen Prozentsatz der Anwender immer noch ältere Browser mit geringerem Funktionsumfang. Auch dies sollten Sie bei der Entwicklung stets im Hinterkopf behalten. (Viele Innovationen für Webstandards kommen zuerst auf Desktop-Browsern an, weil diese von den Entwicklern Tag für Tag eingesetzt werden. Viele Informationen in diesem Buch beziehen sich also auf Desktop-Browser. Was Sie dabei lernen, können Sie aber natürlich überall einsetzen.)
Mobile Geräte
Dazu zähle ich sowohl ältere, preiswerte Mobiltelefone mit einfachen Webbrowsern, Geräte mit mittlerem Funktionsumfang und auf Geschwindigkeit statt auf Leistung optimierten Browsern. Dazu gehören aber auch leistungsstarke, teure Smartphones, deren Browser ihrem Desktop-Äquivalent ebenbürtig sind, und schließlich einige Apps, die häufig einen eingebetteten Browser zur Anzeige von Inhalten enthalten.
In vielen Ländern greift die Mehrzahl der Nutzer über Mobilgeräte auf das Internet zu. In Indien erfolgen etwa 55 Prozent der Internetzugriffe auf diese Weise, und in Ägypten nutzen nahezu 70 Prozent der Anwender ihr Handy als einzigen Zugangsweg zum Web. Schätzungen zufolge wird die weltweite Anzahl der mobilen Internetnutzer irgendwann zwischen 2014 und 2015 die Anzahl der Computernutzer überschreiten.
Ein für die Entwicklerszene heute wichtiges Mobilgerät ist das Feature Phone, dessen Funktionen über das einfache Telefonieren und Verfassen von Textnachrichten hinausgehen, das aber häufig keinen vollständigen Webzugang bietet. Das zunehmende Angebot an preiswerten und gebrauchten Smartphones krempelt diesen Markt allerdings bereits drastisch um. Innerhalb der nächsten fünf Jahre werden wohl die Smartphones die mobile Gerätelandschaft dominieren. Schätzungen zufolge erreichten Smartphones 2011 bereits einen weltweiten Marktanteil von 27 Prozent, und Ende 2012 war bereits ungefähr 1 Milliarde Smartphones im Einsatz – und diese Zahl dürfte sich bis 2015 verdoppeln.
Fokus des Buchs
Die schiere Vielfalt an Mobilgeräten und mobilen Browsern auf dem Weltmarkt zwingt mich dazu, den in diesem Buch abgehandelten Bereich einzuschränken. Aus Gründen der Zukunftssicherheit ziele ich daher auf Mobiltelefone mit voll ausgerüsteten Webbrowsern ab, deren Funktionen der entsprechenden Desktop-Version in nichts nachstehen.
Mobile Browser
Die WebKit-Engine dominiert den Markt der Smartphone-Browser – wir finden sie in vielen unterschiedlichen Browsern auf dem iPhone, Android, Blackberry und weiteren Geräten. Jedes Betriebssystem nutzt eine etwas andere Version von WebKit, aber die Interoperabilität ist in der Regel gut.
Der Internet Explorer entspricht im Betriebssystem Windows Phone von Version 7.5 aufwärts weitgehend der Desktop-Version; ältere Modelle verwenden IE9 und aktuellere Modelle IE10. Für Android und Firefox OS steht auch Firefox zur Auswahl. Firefox OS ist erschienen, und es gibt erste Geräte, bei denen es vorinstalliert ist. Auch das wird wahrscheinlich den Markt langfristig nachhaltig beeinflussen.
Opera schneidet sich mit Opera Mini einen großes Stück des Kuchens vom weltweiten Mobilbrowser-Markt ab. Bei diesem Browser komprimiert ein Proxy-Server die angeforderten Seiten und leitet die Daten als eine Art Bild weiter. Interaktive Funktionen werden dabei stark eingeschränkt. Opera Mini ist leicht und schnell, daher ist der Browser in Ländern mit eingeschränkten Internet-Zugangsmöglichkeiten sehr beliebt. Da allerdings interaktive Anwendungen nicht vollständig unterstützt werden, widme ich ihm nicht viel Aufmerksamkeit. Seit Mai 2013 basieren die Opera-Browser auf einer Webkit-Rendering-Engine.
Mobile vs.Desktop
Die heutigen Smartphones werden zwar immer leistungsfähiger, haben aber meist trotzdem weniger freien Arbeits- und Datenspeicher und geringere Verbindungsgeschwindigkeiten als unsere Laptop- oder Desktop-Computer. Oberflächlich betrachtet erscheinen sie dadurch vielleicht als »armer Verwandter« unter den webfähigen Geräten, doch Jonathan Stark drückt es in »The 10 Principles of Mobile Interface Design« gut aus:
Smartphones sind in vielerlei Hinsicht sogar leistungsfähiger als Desktop-Computer. Sie sind stark personalisiert, immer eingeschaltet und meist mit dem Internet verbunden, wir haben sie stets dabei und sie lassen sich direkt ansprechen. Außerdem sind sie vollgepackt mit leistungsstarken Sensoren, die Daten wie Standort, Bewegung, Beschleunigung, Ausrichtung, Nähe, Umweltbedingungen und mehr registrieren können.
Natürlich liegt der Vorteil eines Mobilgeräts gerade darin – in seiner Mobilität und der Möglichkeit, außerhalb der Wohnung oder des Büros rasch Orte oder Dinge um Sie herum zu finden, Wegbeschreibungen oder Informationen abzurufen. Mobilgeräte werden aber auch immer häufiger zu Hause während des Fernsehens, auf dem morgendlichen Arbeitsweg oder aus Langeweile in einer Warteschlange eingesetzt. Bei den Mobilgeräten geht es tatsächlich weniger um Mobilität als solche, sondern eher um die permanente Verfügbarkeit.
Die Mobilsparte verändert sich schneller als jeder andere Marktsektor, denn viele Anwender besorgen sich alle 12 bis 18 Monate ein neues Gerät, und jedes Jahr kommen mehrere hundert (wenn nicht gar tausend) neue Modelle auf den Markt.
Tablet-Computer gibt es schon seit Jahren. Doch erst im Jahr 2010 gelang ihnen mit Apples erstem iPad der Sprung vom Büro- zum Freizeit-Accessoire. Seither sind viele weitere Geräte herausgekommen. In der mittelgroßen 7-Zoll-Klasse sind Android-Tablets besonders erfolgreich. und auch Microsoft richtet sein Betriebssystem Windows 8 stark auf Tablets aus. War der Markt für Tablets 2009 noch bestenfalls vernachlässigbar, werden 2015 schätzungsweise bereits etwa 390 Millionen Tablets in Betrieb sein. Diese Zahl ist schier unglaublich, und die Wachstumsraten steigen exponentiell.
»Tragbare« Geräte
Ihre größeren Abmessungen und die Tatsache, dass sie (häufig) auf WLAN-Verbindungen angewiesen sind, machen Tablets eher zu tragbaren als zu echten Mobilgeräten; sie sind damit näher am Laptop als am Mobiltelefon. Meist werden sie zu Hause eingesetzt. Sie sind zwar tragbar, doch in der Regel werden sie nur hervorgeholt, wenn der Anwender sich an einem festen Ort befindet und gerade nicht auf der Straße herumläuft. Trotzdem sieht man sie gelegentlich auch in der Öffentlichkeit als etwas plumpe und sperrige Kameras im Einsatz!
Genau wie Smartphones werden auch Tablets meist mit den Fingern über einen Touchscreen gesteuert (zu einigen gibt es auch einen Eingabestift). Studien haben ergeben, dass sie meist zur Unterhaltung und zum Surfen eingesetzt werden, wenn die benötigte Zeit dabei keine Rolle spielt. Die wichtigsten Browser der Tablets entsprechen im Wesentlichen denen der Mobilgeräte.
Webfähige Fernsehgeräte
Der Fernseher ist zu Hause immer noch der am häufigsten genutzte Bildschirm (allerdings hauptsächlich zum passiven Zusehen und eher selten interaktiv). Das ändert sich jedoch gerade mit dem steigenden Marktanteil der neuen Generation internetfähiger Smart-TVs und Set-Top-Boxen. Weltweite Zahlen sind schwer zu finden, in Europa und Nordamerika können wir Vorhersagen zufolge bis 2016 jedoch von 100 Millionen webfähiger Fernsehgeräte ausgehen.
Viele Web-TVs verwenden zwar eher Applikationen als Websites, doch deren Programmierung basiert häufig auf Webtechnologien, und teilweise ist ein Browsermodus eingebettet. Wenn Sie eine Twitter-App schreiben, sollen die Anwender ja schließlich auch Links öffnen können.
Die Fernbedienung
Der größte Nachteil internetfähiger Fernseher ist die Fernbedienung, mit der das Surfen zum reinsten Horror wird. Verschlimmert wird das noch durch monströse Konstrukte mit unzähligen Knöpfen, welche die für den Webeinsatz nötige Interaktivität bieten sollen – insbesondere auch eine Tastatur. Manche Hersteller setzen auf gesten- oder sprachgesteuerte Fernseher oder integrieren ein Trackpad in die Fernbedienung. Die beste Lösung scheint jedoch, den Fernseher mit einem Mobiltelefon oder Tablet zu koppeln und darüber interaktiv zu steuern.
Ein Gemeinschaftsgerät
Der Fernseher ist stets ein Gemeinschaftsgerät, das viele Leute gleichzeitig nutzen können – ein weiteres Hindernis beim Internet-Surfen, das sonst eher eine sehr persönliche Erfahrung ist. Möchten Sie Ihre Facebook-Seite für jedermann sichtbar auf einem großen Bildschirm übertragen? Wohl eher nicht.
In Zukunft werden Web-TVs voraussichtlich für interaktive Dienste und Video eingesetzt werden, wobei auf dem Mobiltelefon oder Tablet des Anwenders eine zusätzliche soziale Echtzeitkomponente hinzukommt. Studien zufolge verwenden 77% der Fernsehzuschauer (wenn man sie dann überhaupt noch so nennen kann) währenddessen noch einen zweiten Bildschirm – und von diesen Personen verfolgen nur 5% eine Tätigkeit, die direkt oder indirekt mit dem Bildschirminhalt des Fernsehers in Verbindung steht.
Diese vier großen Kategorien – Desktop/Laptop, Mobiltelefon, Tablet und Fernseher – decken den Markt der internetfähigen Geräte weitgehend ab, jedoch durchaus nicht vollständig. Viele andere Geräte verfügen über Webbrowser, auch wenn diese nicht unbedingt allzu häufig genutzt werden.
Spielekonsolen
Alle aktuellen Spielekonsolen haben einen Webbrowser: Die PlayStation 3 verwendet NetFront (auf WebKit basierend), die Xbox 360 von Microsoft nutzt den Internet Explorer 9, die Nintendo Wii U ein eigenes Build von WebKit. Dasselbe gilt für tragbare Spielekonsolen. In der PlayStation Vita finden wir NetFront, ebenso in neueren Versionen der Nintendo 3DS (ältere Modelle nutzen Opera). Denken Sie daran, dass in jeder Konsole ein etwas unterschiedliches Kontrollsystem verwendet wird. (Mehr hierzu finden Sie in Anna Debenhams beeindruckender Arbeit zu diesem Thema, die in den Literaturempfehlungen auf Seite 12 aufgeführt wird.)
E-Book-Reader
Vergessen wir auch nicht die E-Book-Reader wie den Amazon Kindle, den Kobo, den Nook von Barnes & Noble oder die Gerätereihe von Sony. Mit »E-Book-Reader« meine ich insbesondere »e-ink«-Geräte mit elektronischer Druckfarbe. (Alle Unternehmen bieten zudem auch Versionen mit Farbdisplay an, die eher zur Kategorie der Tablets gehören.) Die Browser der E-Book-Reader basieren meist auf WebKit und sie müssen mit geringer Prozessorleistung, wenig Speicherplatz und sehr langsamen Bildwiederholraten auskommen. Für viele wären diese Browser nicht die erste Wahl, doch E-Books gewinnen zusehends an Interaktivität und so werden möglicherweise auch diese Browser immer beliebter.
Das iPhone 4 hat eine Bildschirmdiagonale von 3,5 Zoll, das iPhone 5 hat 4 Zoll. Das Samsung Galaxy S III misst 4,8 Zoll quer über den Bildschirm; beim LG Optimus Vu sind es 5 Zoll und beim Samsung Galaxy Note II 5,5 Zoll. Googles Nexus 7 hat eine Bildschirmdiagonale von 7 Zoll und der Kindle HD Fire ist bei Amazon in den Größen 7 Zoll und 8,9 Zoll erhältlich. Beim iPad Mini beträgt das Bildschirmformat 7,9 Zoll, beim iPad sind es 9,7 Zoll.
Vielfalt der Bildschirmgrößen
Mit anderen Worten: Die Vielfalt der Bildschirmgrößen erschwert die Unterscheidung zwischen Mobiltelefon und Tablet. Als einzige Unterscheidungskriterien fallen mir ein, ob die Geräte über eine eingebaute Mobilfunkverbindung verfügen oder nicht, ob sie bequem in eine Tasche passen und ob sie sich komfortabel mit einer Hand bedienen lassen oder ob zwei Hände notwendig sind.
Aber allgemein vermischen sich die Grenzen bei der Computernutzung. Das Surface von Microsoft ist ein Tablet mit optionaler Tastatur in der Abdeckung. Wird die Tastatur mit dem Tablet verbunden, verhält sich es sich wie ein Laptop und sieht auch so aus. Auf dem Ubuntu Phone läuft Android. Wenn Sie es an einen Bildschirm anschließen, steht allerdings ein vollwertiger Linux-Desktop zur Verfügung. Das PadPhone von Asus verwandelt sich in Verbindung mit einem größeren Touchscreen vom Smartphone zum Tablet. Ihr Fernseher wird zur Medienzentrale, wenn Sie Apple TV oder Roku daran anschließen.
Diese Veränderungen werden unsere bestehende Terminologie komplett über den Haufen werfen. In absehbarer Zukunft wird dem Wort »Tablet« dieselbe Aussagekraft zukommen wie dem Disketten-symbol, das in vielen Softwareanwendungen mit dem Befehl »Speichern« verknüpft ist. Eines Tages wird es nur noch Bildschirme geben.
Das Konzept des Nutzers als »Mobiltelefonnutzer« oder »Tablet-Nutzer« geht in die falsche Richtung – viel wahrscheinlicher ist es, dass ein Nutzer mehrere Geräte verwendet, und zwar häufig gleichzeitig. Im Jahr 2012 ergaben im Auftrag von Google durchgeführte Studien, dass 81 Prozent der Teilnehmer beim Fernsehen ihr Smartphone verwendeten. 66 Prozent hatten es zur Hand, während sie am Computer saßen. Dieser Einsatz mehrerer Geräte wird als »gleichzeitige Nutzung« bezeichnet.
Sequenzielle Nutzung
Indessen begannen 90 Prozent der Studienteilnehmer eine Aufgabe an einem Gerät und beendeten sie auf einem anderen. Sie surften beispielsweise mit dem Smartphone in Online-Shops und wechselten dann zum Kauf auf einen Laptop. Dieser Wechsel von einem Gerät zum anderen in Abhängigkeit von der Aufgabe wird als »sequenzielle Nutzung« bezeichnet.
Mit anderen Worten werden die Besucher Ihrer Website zwei oder drei verschiedene Geräte verwenden. Und auch wenn sie bei jedem Besuch leicht unterschiedliche Ziele verfolgen, wollen sie doch jeweils auf dieselbe Information zugreifen können.
Zu Hause, bei der Arbeit, im Bus...?
Denken wir vor allem daran, was wir über die Nutzer unserer Sites nicht wissen. Wir wissen nicht, wo sie sich aufhalten – damit meine ich nicht die geografische Position, denn die können wir über GPS ermitteln. Ich meine, ob sie zu Hause, bei der Arbeit oder im Bus sind und so weiter. Wir haben also eigentlich keine Ahnung, in welchem Kontext jemand unsere Site besucht.
Meist wird davon ausgegangen, dass Mobilgerätenutzer unterwegs und in Eile sind und dass ihnen häufig nur 3G-Verbindungen mit geringer Bandbreite zur Verfügung stehen. Das trifft allerdings nicht immer zu: Mobiltelefone kommen häufig zu Hause an einer guten, schnellen WLAN-Verbindung zum Einsatz. Doch auch die Verbindungsart sagt nicht alles aus; vielleicht ist die Signalqualität schlecht oder die Bandbreite wegen überfüllter Kanäle in der Nachbarschaft reduziert. Tatsächlich bieten 3G-Netzwerke (oder in vielen Ländern auch 4G) in der Realität häufig viel bessere Verbindungsgeschwindigkeiten als WLAN.
Wir nehmen außerdem an, dass Mobiltelefone weniger Rechenleistung besitzen als Desktops, doch selbst dies könnte sich bald ändern. Es gibt jetzt schon Smartphones mit Dual- oder Quadcore-CPU, und wer weiß, wie leistungsfähig die Geräte in ein oder zwei Jahren sein werden. Tablet-Laptop-Hybriden, zum Beispiel viele Windows-8-Geräte, sind bereits jetzt leistungsstärker als nur wenige Jahre alte Laptops.
Dann ist da noch das Thema Größe. Wir gehen davon aus, dass die Betrachter eines großen Bildschirms (etwa eines Fernsehgeräts) eine aufwendigere grafische Umgebung wünschen. Ein großer Bildschirm geht aber nicht unbedingt mit einem leistungsfähigen Prozessor oder einer schnellen Internetverbindung einher. Die Prozessoren vieler Web-TVs sind nicht stärker als die eines Smartphones, und für die Verbindungsgeschwindigkeit gelten ebenso viele Unbekannte wie für jedes andere Gerät. Mit der Größe kommt auch die Frage nach der Tragbarkeit auf. Je eher ein Gerät tragbar ist, desto weniger können wir den Nutzungskontext vorhersagen.
Die wichtigste Regel lautet deshalb also: Wir dürfen keinerlei Annahmen treffen. Kaum habe ich es gesagt, breche ich diese Regel schon wieder:
Um Wiederholungen im Buch zu vermeiden, zeige ich hier einige typische Beispielszenarien auf. Es sind nicht unbedingt die gängigsten Szenarien, aber ich denke, sie kommen für unseren Zweck oft genug vor.
Mobiles Szenario
Ein Beispiel: Mobiltelefonnutzer haben keine superschnelle Internetanbindung. Häufig nutzen sie ihre Geräte zwar von zu Hause aus mit megaschneller Glasfaseranbindung über ein ungestörtes WLAN-Netzwerk aus einem Meter Entfernung. Aber ebenso häufig trifft das Gegenteil zu: Sie sind nicht zu Hause und bekommen nur ein sehr schwaches 3G-Signal (auch mir passiert das oft). Viele Smartphones sind auf solche Anwendungsfälle ausgelegt; sie beschränken die Anzahl zulässiger Verbindungen, um kein wertvolles Datenvolumen aus den limitierten Tarifen der Nutzer zu verschwenden.
Desktop-Szenario
Ebenso wird ein Desktopnutzer wahrscheinlich über eine direkte Breitbandverbindung verfügen, die schnelle Datentransferraten erlaubt. Natürlich stimmt das nicht immer – in ländlichen Gegenden sind die maximal möglichen Verbindungsgeschwindigkeiten teils extrem eingeschränkt oder die Nutzer sind sogar noch auf Einwahlverbindungen angewiesen –, das erste Szenario ist jedoch so häufig anzutreffen, dass ich es stellvertretend verwenden kann.
Solche Vereinfachungen nutze ich im gesamten Buch, damit ich mich nicht ständig wiederholen und die jeweiligen Szenarien klarstellen muss. Ich kann aber nicht deutlich genug sagen, dass solche Annahmen für Sie beim Planen und Erstellen von Websites und Applikationen nicht an erster Stelle stehen sollten und dürfen.
Nur die Geschwindigkeit zählt – und dies ist gleichzeitig eine Herausforderung: Sie kennen Ihre Anwender nicht, wissen nicht, wo sie sind, was sie tun oder welches Gerät sie verwenden. Manches davon (aber nicht alles) können Sie herausfinden. Den gesamten Nutzungskontext können Sie aber nie erfassen; außerdem ändert er sich von Anwender zu Anwender. Als einigermaßen sicher können Sie nur voraussetzen, dass die Nutzer auf Ihr Angebot zugreifen oder aber herausfinden möchten, dass es ihnen eben nicht zusagt. Was immer davon zutrifft: Die Anwender wollen eine schnelle Antwort haben.
Performance ist das einzig wichtige Kriterium. Ob die Anwender in der Rushhour auf dem Smartphone nach der nächsten Bahnverbindung suchen oder zu Hause auf dem Sofa eine Shopping-Website durchstöbern – sie möchten diese Aufgabe so schnell wie möglich abschließen. Wenn sie dabei das ihnen am nächsten gelegene Gerät verwenden, haben sie das Gefühl, effizienter zu sein.
Ihre Site muss sich »schnell« anfühlen.
Ihre Site muss auf jedem möglichen Gerät schnell sein – und sich auch schnell anfühlen. Mit »schnell« ist hier nicht nur die technische Leistung gemeint (die äußerst wichtig ist), sondern auch das Ansprechverhalten der Benutzeroberfläche, wie einfach sich die Seitennavigation dem Benutzer darstellt und wie schnell er sein ursprünglich angestrebtes Vorhaben abschließen kann.
Zuerst will ich Ihnen geradeheraus sagen, was ich Ihnen hier nicht beibringen werde: ein Design, das auf die Stärken jeder Plattform abgestimmt ist. Das geht nicht, weil ich Ihnen nichts beibringen kann, wovon ich selbst nichts verstehe. Ich bin aus gutem Grund nicht Designer, sondern Entwickler geworden. Wenn ich Photoshop verwende, sieht es hinterher so aus, als hätte ich die Maus mit Boxhandschuhen bedient.
Programmiermethoden und Techniken
Bei mir lernen Sie moderne Programmiermethoden und Techniken zur Entwicklung von Websites, die entweder auf mehreren Geräten laufen oder auf eine bestimmte von Ihnen angepeilte Geräteklasse zugeschnitten sind. (Die entsprechenden Technologien werden alle in Kapitel 1 erklärt, darum gehe ich hier nicht näher darauf ein.) Behalten Sie bei der Lektüre dieses Buchs die beiden folgenden, sehr wichtigen Punkte im Hinterkopf:
Es gibt so viele unterschiedliche Technologien, dass ich sie nicht alle behandeln kann. Ich vermittle Ihnen die aus meiner Sicht wichtigsten Techniken und Technologien, die Sie zur Entwicklung von Webprojekten für die gesamte Gerätepalette benötigen.
Nicht alles in diesem Buch wird sich großflächig durchsetzen können – zumindest nicht in der hier gezeigten Form. Das Web entwickelt sich ständig weiter, ein gedrucktes Buch kann immer nur eine einzelne Momentaufnahme darstellen. Manche Dinge werden sich verändern, manche werden verkümmern und wegfallen. Ich versuche dies etwas zu entschärfen, indem ich nur auf offenen Standards basierende Technologien behandle, die auch bereits zu einem gewissen Grad in den Browsern implementiert sind.
Bleiben Sie am Ball!
Für Sie als Webentwickler ist Folgendes wichtig: Informieren Sie sich, bleiben Sie immer am Puls der Webstandard-Entwicklung, seien Sie neugierig und verspielt, halten Sie Augen und Ohren offen. Sie haben das Glück, in einer allein auf Wissensaustausch basierenden Branche zu arbeiten. Behalten Sie also einige der Menschen und Websites, die ich in diesem Buch erwähne, im Blick. Suchen und finden Sie auch Ihre eigenen Quellen, nutzen Sie Twitter, gehen Sie zu Treffen Ihrer lokalen Webentwickler-Community. Bleiben Sie am Ball und seien Sie aktiv. Nie war Webentwicklung spannender als jetzt – Sie müssen allerdings eine Sonderschicht einlegen, um wirklich davon zu profitieren. Behalten Sie bei jedem Projekt vor allem auch immer den größeren Gesamtzusammenhang im Blick. Wenn Sie eine Website programmieren, entwickeln Sie nicht »eine Website und eine Mobilsite« – streben Sie stattdessen eine Site an, die überall funktioniert. Überlegen Sie sich, wie die Nutzer die Site verwenden werden, was sie sich davon erhoffen und was Sie als Entwickler tun können, um sie bei dieser Zielsetzung zu unterstützen – nicht nur jetzt, sondern auch in Zukunft. In den letzten fünf Jahren haben wir so umwälzende Entwicklungen im Web erlebt – wer kann schon sagen, was wir dort in weiteren fünf Jahren antreffen werden?
Die in diesem Kapitel genannten Statistiken stammen aus vielen verschiedenen Quellen, vor allem The Mobile Industry in Numbers von VisionMobile auf http://www.visionmobile.com/blog/2012/10/infographic-the-mobile-industry-in-numbers/ sowie »The Internet of Things« von Cisco auf http://blogs.cisco.com/news/the-internet-of-things-infographic/.
Eine gute Einführung in das Internet of Things finden Sie im The Next Web-Artikel Why 2013 will be the year of the Internet of Things: http://thenextweb.com/insider/2012/12/09/the-future-of-the-internet-of-things/.
David Storey schrieb einen hervorragenden Beitrag über das nicht auf Smartphones ausgerichtete mobile Web: See your site like the rest of the world does. On the Nokia X2-01. Sie finden ihn auf http://generatedcontent.org/post/31441135779/mobileweb-row/.
Der beste Artikel, den ich über die Webentwicklung für mobile Geräte gelesen habe und aus dem ich in diesem Kapitel zitiere, ist The 10 Principles of Mobile Interface Design von Jonathan Stark: http://www.netmagazine.com/features/10-principles-mobile-interface-design/. Jason Grigsbys hervorragender Artikel Responsive Design for Apps ist ein guter Einstieg in die Gestaltung für unterschiedliche Bildschirmabmessungen und -darstellungen: http://blog.cloudfour.com/responsive-design-for-apps-part-1/. Der im UX Magazine erschienene Artikel Five Lessons from a Year of Tablet UX Research von Brennan Browne enthält herausragende Erkenntnisse über die Nutzung von Tablets: http://uxmag.com/articles/five-lessons-from-a-year-of-tablet-ux-research/.
Ein guter Einstieg für Anna Debenhams Untersuchungen über Spielekonsolen-Browser ist ihr Artikel Testing Websites in Game Console Browsers auf A List Apart: .