Es gibt heute im Wesentlichen drei Kategorien von Geräten zum Betrachten einer Website:

Transkript

1 Mobiles Web Vor der Smartphone-Revolution, die Apple 2007 mit dem iphone auslöste, war die Welt des Webdesigners noch einfach. Eine Website wurde in erster Linie für den Desktoprechner entwickelt und häufig wurde eine Standardbreite von 960 Pixeln verwendet. Heute werden Websites immer mehr mit mobilen Geräten wie Smartphones und Tablets wie dem ipad besucht. Es gibt heute im Wesentlichen drei Kategorien von Geräten zum Betrachten einer Website: Smartphones wie das iphone und Android-Geräten Tablets Desktop-PC bzw. Notebooks Jedes dieser Geräte besitzt unterschiedliche Bildschirmmaße. Außerdem können Websites auf Smartphones und Tablets auch noch sowohl im Hochkant- als auch im Querformat (landscape) betrachtet werden, was die Anforderungen an den Webdesigner noch einmal erhöht. Als Lösung, wie man am besten mobile Websites erstellt bieten sich zwei Varianten an. 1. Responisves Webdesign: diese Lösung erstellt eine universelle Website, die sich automatisch den verschiedenen Gerätegrößen anpasst. Man erkennt diese Technik am besten, wenn sich das Layout anpasst, wenn man das Browserfenster verkleinert. Beispiel: 2. Mobile Web-Apps z.b. mit jquery-mobile: dabei wird eine separate Version der Website für mobile Geräte erstellt. Die Inhalte und das Design werden speziell für Geräte mit Touch-Bildschirmen angepasst. Eberhart mobiles_web.docx 1

2 1)Responsives Webdesign In seinem Artikel für A List Apart im 24. Mai 2010 ( verwendete Ethan Marcotte zum ersten Mal den Begriff Responsive Webdesign und seitdem erlebte er einen wahren Boom. Responsive Webdesign verwendet grundsätzliche CSS, um die Anpassungen an den unterschiedlichen Bildschirmen durchzuführen und zwar über Formatierungen, die nur unter bestimmten Umständen gelten. Mit dem Begriff responisves Webdesign wird das selbstanpassende Verhalten entsprechender Websites benannt, deren Darstellung sich automatisch an Features und Typ des ausgebenden User Agents orientiert. Man versteht darunter, dass ein Web-Layout automatisch auf unterschiedliche Bildschirmgrößen (Viewports) reagiert und sich entsprechend anpasst. Das gilt nicht nur für die Bildschirmgrößen, sondern auch für das Format, d.h. ob sich ein Gerät in Landscape- Modus oder im Portrait-Modus befindet, also quer oder hochkant gehalten wird. Ein responsives Layout funktioniert gleichermaßen auf einem Smartphone, auf einem Tablet oder einem Desktop-Rechner, wobei die Darstellung für die jeweilige Umgebung optimiert wird. Beispiel: Eberhart mobiles_web.docx 2

3 Was ist responsives Webdesign? Design passt sich automatisch an das verwendete Endgerät an (Monitor, Tablet, Smartphone) Design sieht überall gut aus (Schrift ist lesbar, Bilder passen sich im Verhältnis richtig an usw.) Seite ist auf allen Endgeräten gut bedienbar (Hinein- und Herauszoomen ist nicht notwendig) Navigation (Menü) passt sich an das Endgerät an Inhalte (HTML) bleiben unverändert Anpassungen werden per CSS und JavaScript (jquery) vorgenommen Responsive Webdesign die Zutaten HTML 5 CSS 3 (inkl. Media Queries Breakpoints für die Devices) JavaScript (jquery, jquery UI, jquery Mobile) flüssige Bilder flüssige Videos flexibles Grid-System, flüssiger Raster (Spalten für Design) (Bootstrap, Foundation) Responsive Websites Für die Entwicklung responsiver Websites sind zwei Systeme besonders sinnvoll: Mobile First und Breakpoints für den Inhalt (Media Query). Desktop First Die typische Vorgehensweise in den Anfangszeiten war es, ein Desktop-Layout zu nehmen und zusätzliche Angaben für kleinere Viewports zu ergänzen. Das Desktop-Layout ist damit der Normalfall. Darauf basierend werden die abweichenden Layouts erstellt. Im Bedarfsfall werden bestimmte, auf kleinem Bildschirm nicht benötigte Inhalte per display: none versteckt. Eberhart mobiles_web.docx 3

4 Mobile First Im Gegensatz zum Desktop First-Ansatz steht beim Mobile First-Ansatz das Layout für Smartphones und Co. am Anfang der Überlegungen und des Designprozesses. Der Aufbau sieht anders aus. Zuerst einmal würden wir eine etwas andere Quellcode-Anordnung wählen: der Inhaltsbereich steht zuerst, danach kommt die Navigation. Theorie Mobile First Webdesigner Luke Wroblewski prägte schon 2009 den Begriff Mobile Fist und riet dazu, nicht mit der großen Desktopsite zu beginnen, sondern mit der Mobilversion. Er nennt drei Hauptgründe dafür: 1. Die Nutzung mobiler Geräte ist in den letzten Jahren prozentual stark angestiegen. Somit sind Unternehmen mit diesem Konzept für den wachsenden Markt gerüstet. 2. Das Design für mobile Geräte zwingt Entwickler dazu, sich auf das Wesentliche zu beschränken, da der Platz auf mobilen Geräten begrenzt ist. 3. Wenn schon bei der Planung auf die vielen Features der Smartphones eingegangen wird, z.b. GPS. Multi-Touch und Beschleunigungssensor, ergibt sich ein Mehrwert. Reduktion auf das Wesentliche ist die Devise Als Beispiel diente früher die mobile Website der Fluglinie Niki: Check-in, Buchen, Fluginformationen und individuelle Inhalte alles war/ist schnell und eindeutig auffindbar. Die gleichen Inhalte sind auf der Desktopsite zwischen Bergen von Werbung, Angeboten und Partnern verstreut. Mobile First Progressive Enhancement fürs Layout Progressive Enhancement ist ein Ansatz, wie Webdesigner mit der Tatsache umgehen, dass verschiedene Browser und Anzeigegeräte (Devices) allgemein CSS- und andere Eigenschaften in unterschiedlichen Maße unterstützen. Zuerst muss für alle Geräte, auch für ältere, eine Version geschaffen werden, die befriedigt. Dann können für neuere Browser zusätzliche Verbesserungen eingebaut werden. Fallback-Layout: Was ist die Notfallsansicht? Der Internet Explorer bis zur Version 8 beispielsweise versteht keine Media Queries. Daher muss man auch eine ansehnliche Version für diesen Fall bereitstellen, also eine Ansicht, die immer funktioniert. Eberhart mobiles_web.docx 4

5 Vorteile von Mobile First Da mobile Geräte nicht die Ausnahme sind, sondern die Geräte und der Zugriffsmodus mit dem größten Wachstumspotenzial, ist es auch sinnvoll, sich zuerst auf diese zu konzentrieren und sie also nicht als Sonderfall, sondern als Normalfall zu betrachten. Eine Gestaltung für mobile Geräte zuerst zwingt einen dazu, sich auf das Wesentliche zu konzentrieren und das Wesentliche, die zentrale Funktionalität und Aussage der Webseite, im Blick zu behalten. Solche Webseiten sind performanter und vermeiden die klassischen Probleme von Responsiven Webdesign. Sie kommen bei diesem Ansatz prinzipiell mit weniger Zeilen CSS-Code aus: Bei Desktop First muss man für die grundlegende Anordnung zuerst die Elemente floaten, um das Floaten für kleinere Viewports aufzuheben. Bei Mobile First muss man nur in den Media Queries für größere Viewports floaten. Dieser Ansatz wird oft als der optimale fürs Responsive Design angesehen. Nachteile von Mobile First Der größte Nachteil dieses Ansatzes ist, dass man nicht im Nachhinein eine bestehende Webseite mit dem Mobile First-Ansatz responsive gestalten kann. Es funktioniert nur bei Neuerstellungen. Auch bei einer Neuerstellung verlangt es einiges an Neulernen (bzw. Überzeugungsarbeit dem Kunden gegenüber), Umgewöhnen, um die mobile Version als Normalfall zu betrachten, wenn man ein Layout erstellt. Eberhart mobiles_web.docx 5

6 Das Grundprinzip des Responsive Webdesigns = Media Queries Media Queries sind seit Jahren die größte treibende Kraft hinter den Veränderungen im Webdesign. Durch die allgemeine Unterstützung von CSS in den Browsern konnte man die starren Einschränkungen tabellenbasierter Websites überwinden, und mit Media Queries kann man die Seiten so gestalten, dass sie sich an die Merkmale jedes einzelnen Anzeigegeräts anpassen. Die wichtigste Komponente vom Responsive Webdesign sind CSS3-Media Queries. Mithilfe des in CSS3 definierten media-befehls werden dabei die Eigenschaften des Anzeigegerätes abgefragt und die Website automatisch angepasst. So kann beispielsweise eine Webseite bei viel verfügbarem Platz dreispaltigem und bei wenig verfügbarem Platz einspaltig angezeigt werden. Mit Hilfe der Media-Queries ist es möglich, Teile des Stylesheets im CSS abhängig von äußeren Umständen z.b. des Viewports an- oder abzuschalten. Beispiel: Die Verwendung des min-prefix bewirkt, dass die Darstellung bei Überschreitung des Breakpoint-Limits umspringt: (hier bei 320 bzw. 768 Pixel) /*Breakponit screen an (min-width: 320px) { body {hier passiert was}} /*Breakponit screen an (min-width: 768px) { body {hier passiert was anders}} Bereits seit CSS 2.1 gibt es die Möglichkeit, bei Stylesheets anzugeben, für welches Ausgabemedium sie gelten solle. So lassen sich eigene Stylesheets für den Ausdruck und den Bildschirm definieren. Die Zuweisung erfolgt hier mittels Referenz im Header der HTML- Datei, die auf ein externes Stylesheet verlinkt. <link rel="stylesheet" href="bildschirm.css" media="screen" /> <link rel="stylesheet" href="ausdruck.css" media="print" /> Hier wird für die Ausgabe am Bildschirm die CSS-Datei bildschirm.css geladen, für den Drucker eine andere. Media Queries sind in CSS3 definiert. Beispiel: Eine typische Anweisung in der innerhalb eines Stylesheets einsetzet screen and (max-width: 480px) { Hier steht, was passieren soll, wenn die Angabe erfüllt ist, z.b. {body { background-color: red; } } Eberhart mobiles_web.docx 6

7 Wenn die Site auf einem gigantischen Breitbildfernseher betrachtet wird, die dazu genutzte App aber nur ein Viertel der Bildschirmfläche einnimmt, spielt die riesige Größe des Geräts nur eine geringe Rolle. Auf bestimmten Geräten sind die beiden Abmessungen identisch: Auf den meisten Smartphones und Tablets entspricht beispielsweise die Breite des Browserfensters stets der des Displays des Ausgabegeräts. Die wichtigsten Abmessungen sind wahrscheinlich die des Viewports. Die relevanten Media- Eigenschaften sind height und width. Beispiel: britischer Webdesigner Andy Clarke, bietet in seiner Agentur zusätzliche gestalterische Ebenen an, je nach Bildschirmgröße. Die Figuren ändern sich. Eberhart mobiles_web.docx 7

8 Beispiel: Website mit fließendem Rasterlayout in Dreamweaver Die Firma Adobe Systems hat mit der Veröffentlichung der Version Dreamweaver CS6 im April 2012 auf diesen Trend reagiert und die Möglichkeit für responsives Webdesign eingebaut. Damit kann man automatisiert Seiten mit flexiblem Layout anlegen. Die Funktion Fließendes Rasterlayout im Menü Datei hat diverse Vorteile: Unterstützung der meisten Browser, auch auf mobilen Geräten Modernes HTML5 Es gibt ein Raster zum genauen Ausrichten der Elemente Datei/Neu: Eberhart mobiles_web.docx 8

9 2)Mobile Web-Apps Ein anderer Weg, das Problem der verschiedenen Gerätegrößen zu lösen, ist es, unterschiedliche Versionen der Website zu erstellen, z.b. eine Desktopversion und eine Mobile-Version. Beispiel: bzw. mobile.bahn.de Web-Apps: sind auf allen Web-fähigen Endgeräten, also auf Smartphones, Tablets und anderen mobilen Geräten lauffähig. Die Applikation wird aus dem Web geladen. Native Apps: sind nur auf bestimmten Endgeräten z.b. iphone lauffähig Meist ähnelt das Design der mobilen Websites des einen nativen App, wie man sie aus dem App-Store laden kann. Daher werden die mobilen Websites, die einer nativen Applikation gleichen, auch Web-Applikation (Web-App) genannt. Mit jquery Mobile kann man solche Web-Apps erstellen. Eine separate Website für mobile Geräte bietet Vorteile: Eine eigenes Design für die mobile Version Eine Reduzierung der Inhalte Nur die Informationen, die für unterwegs geeignet sind, werden angezeigt Nachteile: Der größte Nachteil besteht im Aufwand, eine getrennte Version zu entwickeln. jquery Mobile ist ein sogenanntes Web-Framework, das ein Grundgerüst für die Entwicklung mobiler Web- Applikationen zur Verfügung stellt. Es basiert auf den Technologien HTML5, CSS3 und JavaScript bzw. Ajax. Es ist natürlich auch möglich ohne jquery manuell Web-Apps zu entwickeln, was aber einen größeren Aufwand erfordert. Eberhart mobiles_web.docx 9

10 jquery-mobile-websites laufen u.a. unter folgenden mobilen Systemen Apple ios, Android, BlackBerry. Demoseiten findet man unter Weitere Sites: m.ikea.com, m.stanford.edu, m.disneyworld.disney.go.com. Meist werden die mobilen Websites über eine Subdomain m aufgerufen, statt über www. Alternativen zu jquery Mobile: Sencha Touch ( bietet noch mehr Möglichkeiten als jquery Mobile. Damit erstellte Websites sehen meist zu 100% wie native Apps aus. Mit Dreamweaver ab der Version CS5.5 lassen sich mit einer integrierten Funktion jquery Mobile Web-Apps erstellen. Menü Datei / Neu / Seite aus Beispiel : Eberhart mobiles_web.docx 10

11 3) Beispiel: Rasterlayout - Grid Raster (grids) sind ein grundlegendes Design-Element. Um ein Raster zu erzeugen, legt man zuerst die Anzahl der Spalten im Grid-Element fest. Somit erzeugt man eine Abfolge von Tracks. Anschließend werden die Rasterelemente im Raster positioniert, wobei die Tracks als Koordinaten dienen. Sie werden entweder in einen Rasterbereich eingepasst oder überspannen mehrere Rasterbereiche. Wenn man schon einmal mit einem Tabellenkalkulationsprogramm wie Excel gearbeitet hat, kann man sich ein Raster leicht vorstellen. Die Rasterlinien die gedachten Linien zwischen den Zellen definieren eine nummerierte Anzahl von Zeilen und Spalten. Typische Rasterlayouts findet man in bootstrap, foundation usw. Beispiel von Eberhart mobiles_web.docx 11

12 Das Raster im Detail bei Bootstrap Das Raster wird durch zwölf (12) gleichbreite Spalten gebildet. Vordefinierte Klassen können benutzt werden, um Elemente ab einer bestimmten Spalte und über eine Anzahl Spalten hinweg zu platzieren. Innerhalb der Spalten lassen sich Reihen festlegen, um eine wechselnde Nutzung der Spaltenbreiten zu erlauben. Die Vorgehensweise sollte sich an einigen wenigen Regeln orientieren: Reihen (.row) müssen in einem Container sein (.container (feste Breite) oder.container-fluid (volle Breite). Reihen werden benutzt, um mehrere Elemente horizontal nebeneinander zu platzieren Spalten (.col-xx-n) werden in Reihen platziert. Nur Spaltenelemente sind unmittelbare Kindelemente von Reihen. Spaltenabstände (Lücke zwischen Spalten) werden mit padding-regeln definiert. Diese Abstände werden links von der ersten Spalte und rechts der letzten Spalte mit negative Abständen (margin) ausgeglichen. Dadurch ist Inhalt außerhalb des Rasters linksbündig gleich ausgerichtet. Der Aufbau der Spaltenklassen ist einfach: Die Einleitung beginnt mit col- Der mittlere Teil bestimmt die Zuständigkeit für Bildschirmbreiten (xs,sm, md, lg) die Breakpoints Die Zahl am Ende bestimmt die Anzahl der Spalten (1 bis 12) Beispiel: <section class="row"> <article class="col col-md-4"> Wenn man die Klasse.col-xs-4 nutzen, kann man also 3 solchermaßen dekorierte Elemente nebeneinander anordnen (3 * 4 = 12). Die Breitendefinition gilt, bis sie überschrieben wird. Wenn man.col-md-2 nutzen,.col-lg-2 aber nicht, gilt md auch für sehr große Geräte. Gerätespezifische Definitionen Kleine Geräte mit weniger als 768px werden nicht separat definiert, denn diese Geräteklasse ist bereits der Standardwert. Die Angaben in den Variablen sind folgendermaßen definiert: xs : < 768px sm : 768px md : 992px lg : 1200px Aus den Breiten ergeben sich die Dimensionen der 12 Spalten. Eberhart mobiles_web.docx 12

13 Position der Breakpoints: Symbol Gerätebreite Containerbreite Spaltenbreite xs < 768px automatisch automatisch sm 768px 750px 62px md 920px 970px 81px lg 1200px 1170px 97px Die Grenze von 12 Spalten ist nicht absolut und Inhalte werden nie abgeschnitten. Was nicht in das Raster passt, wird einfach auf die nächste virtuelle Zeile verschoben. Elemente, die in einer Spaltendefinition stehen, werden als Ganzes verschoben. Eberhart mobiles_web.docx 13

14 Beispiel: Flexible Formulare Um Formulare auf die vorhandenen Viewpoint-Breiten reagieren zu lassen, darf man für die einzelnen Formularelemente keine festen Breiten definieren. In der Basisversion für kleine Screens sollten Label und Formularfeld untereinander stehen; dafür setze die Weiten der einzelnen Elemente auf 100%. autofocus: Damit setzt man den Cursor auf ein Eingabefeld eigener Wahl, sodass beim Seitenaufruf sofort mit der Eingabe begonnen werden kann. required: Damit markiert man das Feld als Pflichtfeld. Manche Browser tun sich damit aber noch schwer (Safar) und die Unterstützung von Android und Opera Mini hinkt ebenfalls nach. Die Browser, bei denen es einwandfrei funktioniert Firefox, Chrome, Opera und IE10 geben jedoch eine optisch und textlich unterschiedliche Rückmeldung für die Verletzung dieses required-attributes. z.b. Chrome: Firefox: Eberhart mobiles_web.docx 14

15 Durch die Zuweisung der unterschiedlichen Typen für die <input>-felder werden auf mobilen Geräten die Tastaturen entsprechend angepasst. type- sorgt dafür, dass ohne einen weiteren Klick zugänglich ist type= url liefert eine zusätzliche Taste.com für die schnelle Eingabe Mit dem Container div.formset gruppiert man die einzelnen Label-Eingabefeld-Paare und vereinfacht damit deren Ausrichtung. Media Query Damit stellt man Label und Eingabefeld ab einer Viewport-Breite von 30 em nebeneinander und richtet die Labels rechtsbündig aus, um sie möglichst dicht am Eingabefeld zu platzieren: In der layout.css : Ergebnis: Lesetipp: HTML-Formulare Eberhart mobiles_web.docx 15

16 Nur zur INFO: Pattern Mit pattern kann man die Eingabe mit regulären Ausdrücken überprüfen. z.b.: Die Postleitzahl-Eingabe benötigt eine vierstellige Zahl in Österreich <input type= text name= plz id= plz pattern= [0-9]{4} title= Bitte geben Sie eine vierstellige Postleitzahl ein. > Auf der Website findet man Beispiele thematisch geordnet. Quellen: Eberhart mobiles_web.docx 16