Mobiles Web - Ein Blick zurück

Transkript

1 Mobiles Web - Ein Blick zurück Die Ursprünge von HTML reichen zurück bis ca Der ursprüngliche Fokus lag bei der Veröffentlichung von statischen Inhalten in Form von wissenschaftlichen Texten und Bildern (Universität CERN). Über Verlinkungen sollten thematisch ähnliche Quellen leicht erreichbar sein. Das Erstellen von Apps war nicht das Ziel. Das wäre auch gar nicht gegangen. Das zustandslose http-protokoll passt nicht dazu. Jede Anfrage ist isoliert und statisch. Es entwickelten sich Plug-ins, die mehr Freiheit boten und aktivere Applikationen ermöglichten. Dies waren z.b. Java Applets, Flash/Shockwave und Silverlight. Vor allem für Spiele und Multimedia-Applikationen war dies ein großer Vorteil. Seit 2005 kam ein neuer Begriff hinzu, AJAX (Asynchronous JavaScript and XML). Mit Hilfe von dynamischen und asynchronen Anfragen bringt AJAX Dynamik in den Browser. Die HTML-Seite wird weiterhin auf dem Server erzeugt und der größte Teil bleibt statisch. Kleine Bereiche werden je nach Benutzeraktionen nachgeladen und on the fly ausgetauscht. Typische Beispiele sind Vorschlagslisten ( google-suche ), die sich abhängig von der Eingabe anpassen und Vorschläge automatisch vervollständigen. Aus diesen ersten Anfängen haben sich die aktuellen mächtigen Frameworks, allen voran jquery, entwickelt. Weitere Gründe, warum sich das Web so entwickelt hat: JavaScript wird schneller, da die Entwickler von Browsern, vor allem Google, das Interpretieren von JavaScript im Browser deutlich beschleunigten Im Browser ergänzen sich die einzelnen Technologien sehr gut, wie HTML5. CSS und JavaScript, wie z.b. Abspielen von Multimedia-Inhalten, LocalStorage für Caching und Offline-Fähigkeiten, Erweiterung von Formularen (Placeholder und Eingabe- Validierung). EcmaScript Version 5: Der Sprachstandard EcmaScript 5 unterstützt das professionelle Entwickeln von JavaScript. Eberhart mobiles_web.docx 1

2 Produktive Frameworks helfen bei Routineaufgaben und geben Strukturen vor. Sie haben den Zugriff auf den DOM-Baum vereinheitlicht und verstecken die problematischen Unterschiede zwischen den Browsern. Evolution of the Web: 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: Eberhart mobiles_web.docx 2

3 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. 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 3

4 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 Eberhart mobiles_web.docx 4

5 versteckt. 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 Eberhart mobiles_web.docx 5

6 muss man auch eine ansehnliche Version für diesen Fall bereitstellen, also eine Ansicht, die immer funktioniert. 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 6

7 Rasterlayout - Grid Bei responsiven Design erfolgt die Anpassung meist über ein Gestaltungsraster, bei dem der Bildschirm in 12 oder 16 Spalten aufgeteilt wird, in sogenannte Grids. Die einzelnen Elemente werden in das Raster eingepasst, je nach Gerätegröße wird entschieden, wie viele Spalten ein Element belegen soll. In der kleinsten Bildschirmgröße wird das Design meist linearisiert, also alle Elemente werden untereinander angezeigt. z.b. wird auf einem Smartphone alles einspaltig dargestellt. Während es auf großen Displays mehrspaltige Layouts gibt. Technisch gesehen werden dazu CSS Media Queries eingesetzt, die bestimmte Selektoren abhängig von der Bildschirmgröße anzeigen können. 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. Eberhart mobiles_web.docx 7

8 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. Eberhart mobiles_web.docx 8

9 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. 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 9

10 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 768 screen and (min-width: 768px) {.. } Man kann aber auch mit dem max-prefix arbeiten: hier werdem spezielle CSS- Regeln für mobile Endgeräte hinterlegt, nämlich für die erster Version des ipads und kleinere screen and (max-device-width: 768px) {.. } Hier werden alle Geräte gefunden, die eine maximale Breite von 768 Pixel haben. screen and (max-width: 768px) { Hier steht, was passieren soll, wenn die Angabe erfüllt ist, z.b. {body { background-color: red; } } 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. Eberhart mobiles_web.docx 10

11 Media Queries sind in CSS3 definiert. Beispiel: Eine typische Anweisung in der innerhalb eines Stylesheets einsetzet screen and (max-device-width: 768px) { #haupt-inhalt { float: none; width: auto; margin-top: 25px; } } Hier wird dem Inhalt, der sonst rechts fließt, durch float: none entzogen und somit wird er Inhalt unterhalb angezeigt. Die Breite nimmt wieder 100% der verfügbaren Breite ein. Ein oberer Außenabstand margin-top sorgt dafür, dass der Inhalt nicht direkt über der Navigation hängt. 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 11

12 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 12

13 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 Im Grunde unterscheidet man zwischen drei Typen von Apps: a) Web-Apps b) Native Apps c) Hybrid Apps 2a)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. Man schreibt den Code ein einziges Mal und er funktioniert auf sämtlichen Endgeräten. Der gemeinsame Nenner ist stets HTML5. Größter Vorteil ist die Plattform übergreifende Nutzbarkeit. Web-Apps werden grundsätzlich mit Hilfe von HTML5, CSS3 und JavaScript erstellt. Für JavaScript wird zusätzlich gerne ein gutes Framework wie jquery oder sogar jquery-mobile verwendet. Dafür sind, als großer Vorteil, keine aufwendigen Editoren notwendig, sondern man kann mit den bekannten Editoren wie Adobe Dreamweaver, WebStorm und brackets.io arbeiten. Sehr gerne kann man dann auch auf die Kamera zugreifen, eventuell auf den Kalender, das Adressbuch und Geolocation. Eberhart mobiles_web.docx 13

14 Single Page Apps Eine spezielle Ausprägung sind Single Page Apps. Eine Single Page App (SPA) ist eine Clientanwendung, die in JavaScript realisiert wird und im Browser abläuft. Das Konzept verdankt seinen Namen der Tatsache, dass eine solche Anwendung nur eine einzige HTML-Seite benötigt, nämlich die, über die der JavaScript-Code in den Browser geladen wird. Die Anwendung nutzt Ajax-Mechanismen, um mit dem Server zu kommunizieren. Der Ansatz ist aktuell sehr populär, weil sich damit Anwendungen realisieren lassen, die zum einen für den Benutzer auf den ersten Blick sehr ergonomisch sind, zum anderen bewährte und bekannte Muster für die Entwicklung unterstützen. Bekannte Vertreter des Ansatzes sind unter anderem die JavaScript-Frameworks AngularJS und Ember. (Quelle: Tilkov in: Rest und http, 2015, dpunkt-verlag, Heidelberg, S. 264) Web-Apps Nachteile: Auf manche Funktionen von Handys kann man nicht zugreifen, bei nativen Apps sehr wohl. Die offline Benutzung ist etwas schwieriger zu erreichen als bei Nativen Apps. Manche visuellen Effekte, z.b. Übergänge muss man erst mühsam nachbauen 2b)Native Apps: sind nur auf bestimmten Plattformen (Endgeräten) z.b. iphone lauffähig. Das bedeutet, dass der Programmcode nicht 1:1 für eine andere Plattform verwendet werden kann. Meist sind weitreichende Anpassungen oder sogar eine komplette Neuprogrammierung erforderlich, die nicht nur viel Zeit beansprucht, sondern auch verschiedene Experten benötigt. Vorteile nativer Apps: Hohe Performance Zugriffsmöglichkeit auf die Hardware eines Gerätes (z.b. Kamera, Mikrofon) Will man in den Stores wie bei Android und Apple die App anbieten ist dies schon aufwendig. Apple z.b. verlangt eine Jahresgebühr für das Entwicklerprogramm usw. Dazu kommt, dass z.b. Apple selbst entscheidet, ob die App zugelassen wird. Meist ähnelt das Design der mobilen Websites dem einer nativen App, wie man sie aus dem App-Store laden kann. Daher werden die mobilen Websites, die einer nativen Applikation Eberhart mobiles_web.docx 14

15 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: Ein 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. 2c)Hybrid-Apps: Diese sind weder wirklich nativ, d.h. das gesamte Layout-Rendering wird über den eingebetteten Browser anstatt der Plattform mit dem jeweiligen nativen Framework durchgeführt noch rein webbasiert, sie sind nur Webanwendungen, sondern für die Auslieferung in App-Stores verpackt. 2a1)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. 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. Eberhart mobiles_web.docx 15

16 Mit Dreamweaver ab der Version CS5.5 lassen sich mit einer integrierten Funktion jquery Mobile Web-Apps erstellen. Menü Datei / Neu / Seite aus Beispiel : Interessante Links: Quellen: Eberhart mobiles_web.docx 16