Teil 3 der Artikelserie

Responsive Webdesign: Cross-Plattform-Entwicklung mit HTML5 und JavaScript
Kommentare

Dieser Artikel ist der dritte Teil einer Serie zum Thema Cross-Plattform-Entwicklung, in der Sie die vielfältigen Möglichkeiten der App-Entwicklung für alle gängigen Plattformen mit nur einer Programmiersprache kennen lernen. In diesem Teil erkunden und erlernen Sie ausführlich die Möglichkeiten von Responsive Webdesign im Zusammenspiel mit dem Intel-App-Framework und dem Intel XDK.

Der erste Teil dieser Serie stellte eine Einführung zum Thema Cross-Plattform Entwicklung dar. Die Vor- und Nachteile wurden gezeigt und wir erfuhren, weshalb das Thema für uns Entwickler immer wichtiger wird. Passend dazu wurde das kostenfreie Entwicklungstool Intel XDK [1] vorgestellt. Das leichtgewichtige Tool läuft unter Windows, Mac OS X sowie Linux und wurde selbst komplett in HTML und JavaScript entwickelt. Im Gegensatz zu bestehenden Lösungen werden hier alle wichtigen Funktionen aus einer Hand kostenfrei angeboten.

Hier geht’s zu Teil 1 >>>

Der zweite Teil der Serie stellte das Intel-App-Framework vor. Dabei handelt es sich um ein umfangreiches UI-JavaScript-Framework, das eine große Ähnlichkeit zu jQuery Mobile, Zepto.js oder Twitter Bootstrap hat. Mit dem App-Framework Query Selector wurde gezeigt, wie mittels JavaScript auf HTML-Elemente zugegriffen wird. Anschließend wurden mit dem App Designer einige Steuerelemente aus dem App-Framework-UI demonstriert.

Hier geht’s zu Teil 2 >>>

Das sind die Neuheiten

Die Weiterentwicklung findet in einer enormen Geschwindigkeit statt. So war das Intel XDK bei unserem Serienstart gerade mal 74 Megabyte groß und in Version 0115 verfügbar. Mittlerweile sind wir schon bei Version 0240 mit 122 Megabyte angelangt. Die auffälligsten Neuheiten sind zwei weitere Tabs mit „Debug“ und „Profile“ als Preview. Unter dem bisher bekannten „Test“-Tab kann die App via WLAN auf dem Gerät getestet werden. Der neue „Debug“-Tab bietet dieselbe Möglichkeit, jedoch direkt per USB mitsamt umfangreichen Debugging-Funktionalitäten. Da das Intel-XDK-Produktteam großen Wert auf Performance legt, wurde unter dem „Profile“-Tab ein umfangreicher JavaScript-Profiler integriert, der die App zur Laufzeit analysiert. So kann der Entwickler eine ineffiziente Programmierung erkennen und ggf. korrigieren. In der Preview-Version können diese beiden Funktionalitäten leider nur mit Android-Geräten genutzt werden, an einer Unterstützung weiterer Plattformen wird laut Produktteam noch gearbeitet. Beim App Designer hat sich ebenfalls einiges getan. Das Erweitern von Seiten wurde vereinfacht, ihr Aufruf kann direkt mit Buttons verknüpft werden.

Informationen zu den zahlreichen weiteren Neuheiten [2] sind im Blog-Post des Produktteams nachzulesen.

Responsive Webdesign

Responsive Webdesign ist seit 2011 ein absoluter Hype im Bereich der Webentwicklung. Hier geht es darum, mittels eines gestalterischen und technischen Ansatzes Webanwendungen zu erstellen, die auf die Eigenschaften des jeweils benutzten Endgeräts reagieren. Zu diesen Eigenschaften zählen etwa die Device-Größe und die Eingabemedien Maus, Tastatur oder Touch.

Öffnen Sie doch als Beispiel einmal die Websites daserste.de oder howtowat.ch auf Ihrem PC oder Notebook. Dann betrachten Sie die gleiche Seite einmal von Ihrem Smartphone aus (Abb. 1). Sie werden feststellen, dass die Website dort ohne lästiges Heranzoomen bedient werden kann, zudem stehen Touch-freundliche Buttons zur Verfügung. Auch die Schriftgröße wurde für das kleinere Device vergrößert, was das Lesen unterwegs enorm erleichtert. Die Website verhält sich also im Grunde genommen wie eine App.

Abb. 1: Website mit Responsive Webdesign

Das nächste Beispiel zeigt, wie eine Webseite ohne Responsive Webdesign aussieht. Beim Öffnen der Websites rtl2.de oder lingscars.com auf dem Smartphone wird die komplette Seite minimiert angezeigt (Abb. 2). Um den Inhalt korrekt lesen zu können, muss man mittels Touch-Geste an die gewünschten Stellen heranzoomen. Problematisch ist, dass man beim Touch häufig aus Versehen einen Link erwischt. Möchte man allerdings gezielt auf einen Link klicken, kann sich das als schwierig herausstellen, denn die Schrift ist sehr klein und mit Touch kaum zu bedienen. Der Link muss umständlich mit der Fingerspitze getroffen werden.

Abb. 2: Website ohne Responsive Webdesign

Anhand dieser beiden Beispiele bemerken Sie schnell den Mehrwert, den Responsive Design für den Endbenutzer hat. Die wichtigsten Regeln von Responsive Webdesign lauten also:

  • Die Oberfläche passt sich der Device-Größe an.
  • DieOberfläche muss nicht zusätzlich gezoomt werden.
  • Die Oberfläche lässt sich passend zum Device mit Maus/Tastatur oder Touch bedienen.

[ header = Seite 2: Eine kleine Geschichte zum Thema Responsive Webdesign ]

Eine kleine Geschichte zum Thema Responsive Webdesign

Das Thema Responsive Webdesign wurde erstmals von Ethan Marcotte im Mai 2010 im Magazin „A List Apart“ angesprochen. Ein Jahr später veröffentlichte er sein Buch mit dem Titel „Responsive Web Design“. Das Thema selbst wurde von den Medien schnell zum Trend ernannt.

Das Amüsante daran ist: Das Web war eigentlich schon immer responsive. Nur entwarfen die Webdesigner ihre Layouts ständig mit einer anderen Herangehensweise. So gab es zu Anfangszeiten die so genannten Framesets, die sich allerdings als zu komplex und unflexibel erwiesen. Auch Suchmaschinen mochten diese gar nicht. Deshalb verwendete man anschließend einfache Tabellen, was dem Grundgedanken von HTML und des Webs entsprach, nämlich dem Darstellen von Dokumenten. Mediengestalter layouten ihre Seiten schließlich schon immer mittels Tabellen, bevor sie ihr fertiges Ergebnis an die Druckerei senden.

Weil Tabellen nicht geeignet genug erschienen, wechselte der Trend schnell zu Div-Elementen. Dann wurden diese wieder vermieden und man begann erneut mit Tabellen zu arbeiten. In neueren CSS-Versionen wurde auch das Layouten anhand von Divs schließlich wieder attraktiver. Es war also ein einziges Hin und Her. Beide Methoden waren jedoch in der Änderung der Bildschirmgröße flexibel. Doch gewollt war das nicht, und man legte sich auf Standardauflösungen wie 800 mal 600 fest. Darauf folgte der Standard von 1 024 mal 768. Somit ist lediglich in der Herangehensweise ein Umdenken nötig.

„Mobile First Responsive Design“

Doch was ist die richtige Herangehensweise beim Planen und Entwerfen einer modernen Website? Eine Idee verfolgt Luke Wroblewski mit seinem Ansatz „Mobile First Responsive Design“. In den meisten Fällen entwerfen wir zuerst eine komplette Webanwendung auf unserem Computer und versuchen dann mit Mühe und Not, ihren Inhalt für kleine Bildschirmgrößen anzupassen. Erst zu diesem Zeitpunkt stellt man oft fest, dass das aktuelle Layout nicht auf einen kleinen Bildschirm angepasst werden kann. Deshalb entwickelte Wroblewski den Ansatz, die Website mit der kleinsten Bildschirmauflösung zu beginnen und anschließend den Inhalt für größere Auflösungen kompatibel zu machen.

Sein Ansatz fand großen Zuspruch und einige große Unternehmen wie etwa Facebook setzen bereits darauf. Hier werden neue Features zuerst für Smartphoneauflösungen umgesetzt. Wenn die Tests erfolgreich verlaufen, nehmen sich die Entwickler die nächste Auflösung vor.

Der Fluch von Responsive Webdesign

Obwohl sich der Ansatz des Mobile First Responsive Design positiv bewährt hat, stellt er noch lange keine allgegenwärtige Lösung für alle Webdesigner dar. Kundenanforderungen oder auch eigene Pläne geben oft eine funktionsfähige Seite für eine standardmäßige PC-Bildschirmauflösung vor, die dann mit einer höheren Priorität im Vordergrund steht. Erst danach soll entschieden werden, ob weiteres Budget und Zeit in eine Mobile-Version investiert wird.

Hierbei können sich folgende Probleme ergeben: Das aktuelle Design passt nicht zu einer kleineren Auflösung und das Team besteht hauptsächlich aus guten Webentwicklern anstelle von Webdesignern. Bei der Skalierung gibt es ständige Seiteneffekte. Darauf folgen klassische Cross-Browser-Probleme à la „im Safari-Browser des iPads sieht es nicht so toll aus wie im Chrome auf dem Samsung Galaxy Tab“. Die zusätzliche Responsive-Funktion wird also gegen Ende zu aufwändig. Daher muss bei Beginn eines neuen Webprojekts ernsthaft in Frage gestellt werden: Ist Responsive Webdesign wirklich nötig?

Frameworks wie Bootstrap ermöglichen es

Derartige Probleme mit Responsive Webdesign kennt auch das Unternehmen Twitter. Es hatte mit unterschiedlichen Lösungen gearbeitet und war sehr unzufrieden. Zum Vorteil der Öffentlichkeit, denn im August 2011 wurde von den zwei Twitter-Mitarbeitern Mark Otto (@mdo) und Jacob Thornton (@fat) das JavaScript-UI-Framework Bootstrap veröffentlicht. Es basiert auf CSS3 und JavaScript, baut auf HTML5-Konzepte auf und unterstützt alle gängigen Browser. Das Beste daran: Bootstrap ist ein Open-Source-Projekt und wird auf GitHub bereitgestellt.

Bootstrap hat sich so gut bewährt, dass sogar Microsoft ab ASP.NET MVC 5 das Framework in die Projekttemplates mit aufnahm. Natürlich steht es aber auch weiterhin über NuGet zur Verfügung. Intel ist ebenfalls davon überzeugt und unterstützt mit dem Intel XDK auch Bootstrap.

Das Besondere an Bootstrap ist, dass man wieder mit Tabellen layouten kann, allerdings mittels Div-Elementen. So wird via CSS-Klassen definiert, ob es sich bei den Div-Elementen um eine Spalte oder um eine Zeile handelt. Das Highlight dabei: Der Inhalt wird dynamisch angepasst, wenn die Bildschirmauflösung verringert wird. Das verwendete Grid-System besteht immer aus nur zwölf Spalten. Sollte der Inhalt nicht perfekt angeordnet werden, kann man einfach durch Hinzufügen weiterer CSS-Klassen andere Regeln mitgeben. Eine ausführliche Einführung zu Bootstrap finden Sie hier [3].

Der App Designer unterstützt Responsive Webdesign

Wie bereits erwähnt, wird Bootstrap auch vom Intel XDK unterstützt. Allerdings bietet das Intel-App-Framework für die Entwicklung von Cross-Plattform-Apps ebenfallsein Grid-Konzept an, sodass in diesem Artikel weiterhin mit dem Intel-App-Framework gearbeitet werden kann. Unabhängig davon unterstützt das Tooling des integrierten App Designers ein simples Responsive Webdesign ohne zusätzliche Programmierung. Das soll mithilfe einer kleinen Beispiel-App ausführlich gezeigt werden.

Dazu starten wir das Intel XDK und erzeugen unter „Start with App Designer“ ein neues Projekt mit dem Namen „MyResponsiveApp“. Beim Erzeugen der App wird über einen Dialog gefragt, welches UI-Framework verwendet werden soll. In diesem Beispiel wird mit dem App-Framework gearbeitet. Weiter geht es mit einem Klick auf den Select-Button rechts oben.

Wurde das Projekt erzeugt, befinden Sie sich bereits direkt im App Designer mit einer leeren Oberfläche. Diese ist standardmäßig 320 mal 480 Pixel groß, was einer gängigen Smartphonegröße entspricht. Wir können also mit dem Intel XDK ebenfalls nach dem Prinzip Mobile First Responsive Design entwickeln.

Auf der linken Seite wird nun ein Input-Steuerelement durch Drag and Drop platziert. Dieses Steuerelement wird automatisch innerhalb einer Spalte (Column) und einer Zeile (Row) angeordnet (Abb. 3). Das ist an zwei Stellen zu erkennen: oberhalb des Designers in der Elementhierarchie und an den grauen Rändern um das Input-Steuerelement herum. Jetzt passen wir einige Eigenschaften an. So erhält das Label den Wert Name. Die Labelposition wird auf „top left“ gesetzt und der Checkbox-Haken bei Placeholder wird ausselektiert.

Abb. 3: Das erste Steuerelement im App Designer platzieren

[ header = Seite 3: Rows- und Columns-Layout ]

Rows- und Columns-Layout

Ganz gleich ob wir mit Twitter Bootstrap oder dem Intel-App-Framework arbeiten: beide unterstützen Responsive Webdesign mittels eines Grid-Systems. Wir haben bereits eine App mit einem Steuerelement angelegt. Jetzt möchten wir eine weitere Spalte hinzufügen, indem wir das unter „Controls“ zu findende Column-Steuerelement per Drag and Drop neben den rechten grauen Streifen vertikal zum Input-Steuerelement platzieren (Abb. 4).

Abb. 4: Eine weitere Spalte hinzufügen

Mit Hinzufügen der zweiten Spalte wurde die Oberfläche automatisch halbiert. Das Grid-System besteht im Standard immer aus zwölf Spalten, wovon unsere erstellten Spalten nun dynamisch jeweils sechs einnehmen (Abb. 5). Um die Größe der Spalte selbst festlegen zu können, verschieben Sie den mittleren vertikalen und grauen Balken mit gehaltener Maustaste. Die Anzahl wird automatisch im Designer eingeblendet. Für dieses Beispiel bleiben wir allerdings bei den Standardwerten.

Abb. 5: Anzahl der Spalten manuell verändern

Die neue Fläche soll nun mit einem weiteren Steuerelement bestückt werden. Das funktioniert über den Button „Group-Steuerelement“. Nach seiner Platzierung wird die Eigenschaft „Layout“ auf vertical gesetzt. Den untersten Button entfernen wir, indem wir ihn selektieren (Abb. 6) und anschließend das Löschen-Symbol auswählen. Der erste Button soll ein Label mit dem Wert „OK“ erhalten, der zweite eins mit dem Wert „Abbrechen“.

Abb. 6: Button-Group-Steuerelement hinzufügen

Der Designer unterstützt bestens das freie Platzieren und Wechseln von Rows und Columns. Selektieren Sie doch einfach mal zur Übung den zweiten Column-Container. Durch Ziehen mit dem Mauszeiger verfärbt sich der oberste vertikale Balken orange und die Spalte an erster Stelle wird verschoben. Genauso verhält es sich auch bei den Zeilen.

Responsive-Design-Layout

Bisher haben wir gesehen, dass wir durch moderne Mittel wieder mit Tabellen arbeiten können. Das ist gerade für Nichtdesigner sehr angenehm und einfach. Doch der eigentliche Vorteil, der dadurch entsteht, war bisher noch nicht für uns erkennbar. Durch die Demonstration weiterer Responsive-Design-Layout-Features soll sich das nun ändern.

In Sachen Layout ist unsere aktuelle App im Grunde genommen ein negatives Beispiel. Auf einem kleinen Smartphonebildschirm wird links mit sehr wenig Platz eine Textbox angeboten und rechts ganz klein die Buttons. Der geschriebene Text wird nicht komplett dargestellt und die Buttons könnten unabsichtlich ausgelöst werden.

Aus diesem Grund setzt man Wrap Points, die die Spalten bei einer Smartphonebildschirmauflösung automatisch in Zeilen brechen. Diese setzt man manuell durch ein Klick auf das Lineal oberhalb der Arbeitsfläche oder über den „Insert-Wrap-Point“-Button, der links oben mit einem Pfeil und Pluszeichen zur Verfügung steht (Abb. 7). In unserem Beispiel bricht der Designer nach dem Setzen des Wrap Points automatisch die zweite Spalte in eine neue Zeile um. Die Textbox und die Buttons erhalten dadurch mehr Platz.

Abb. 7: Insert-Wrap-Point-Button

Um zu der Auflösung eines Phablets oder Tablets zu wechseln, befindet sich neben dem „Insert-Wrap-Point“-Button ein weiterer Pfeil. Die Auflösung kann aber auch manuell oberhalb des Designers verändert werden oder anhand der kleinen dunkelgrauen Balken am linken und rechten Rand der Oberfläche.

Wechseln Sie doch zur Übung einfach mal zwischen Tablet und Phone. Sehen Sie, wie die Elemente dynamisch passend zum Device angeordnet werden? Orientierungsaspekte werden ebenfalls berücksichtigt. Wechseln Sie hierfür zum Emulate-Tab und wählen Sie ein Smartphone aus. Ändern sie nun auf der linken Seite die Orientierung durch einen Klick auf das horizontal liegende Smartphoneicon.

Jetzt haben wir ganz ohne Programmierungsaufwand und CSS- oder HTML-Kenntnisse eine App erzeugt, die Responsive Webdesign unterstützt, ganz bequem vom Designer aus.

[ header = Seite 4: Media Queries ]

Media Queries

Wie sieht aber der manuelle Weg zum Responsive Webdesign aus? So ganz ohne UI-Framework und weitere Hilfsmittel? Dies wird mit den so genannten Media Queries umgesetzt, die es seit CSS3 gibt. Mit Media Queries macht man die Darstellung der Layoutelemente einer Website von dem Gerät abhängig, auf dem sie aufgerufen wird. So erstellt der Webdesigner für den jeweiligen Typ Ausgabegerät z. B. eine eigene CSS-Datei.

In Listing 1 wird der HTML-Code einer Seite gezeigt, die ein Div-Element mit Text enthält. Im head-Bereich befindet sich eine CSS-Klasse mit einer einfachen Media Query. Diese gibt an, dass bei einer Bildschirmauflösung von 0 bis maximal 480 Pixel die content-Klasse aktiviert wird. Diese verändert die Schriftgröße und Schriftfarbe. Wenn Sie diese HTML-Seite auf dem Desktopcomputer öffnen, wird der Text „Hallo Welt“ ganz normal dargestellt. Minimieren Sie jetzt das Browserfenster auf eine kleinere Auflösung, können Sie beobachten, wie sich der Text automatisch anpasst.

Media Queries sind eigentlich sehr einfach [4]. Setzt man aber ohne passendes UI-Framework auf sie, wird man früher oder später dem Fluch des Responsive Webdesigns verfallen. Auch gibt es viele Szenarien, in denen neben dem UI-Framework zusätzlich bestimmte Media Queries gesetzt werden müssen.




    
    

    
  
Hallo Welt!

Da das auch bei der Cross-Plattform-Entwicklung gilt, unterstützt der App Designer auch Media Queries. Das Besondere daran ist, dass die Funktionalität erneut ohne Programmieraufwand zur Verfügung steht und in wenigen Sekunden eingerichtet werden kann. In unserem Beispiel fügen wir deshalb das Flip-Switch-Steuerelement unterhalb der Button Group hinzu (Abb. 8).

Abb. 8: Flip-Switch-Steuerelement hinzufügen

Dieses ist anfangs noch selektiert, und die dazugehörigen Eigenschaften werden uns rechts angezeigt. Im Styles-Bereich befindet sich der Show-Hide-Button, über den wir eine neue CSS-Klasse erzeugen können. Klicken wir ihn an und geben wir der Klasse den Namen hideFlipSwitch. Direkt darunter sind alle für dieses Steuerelement aktiven CSS-Klassen zu sehen. Nach dem Anlegen des „hideFlipSwitch“-Styles ist dieser auch selektiert. Im Media-Query-Bereich ist standardmäßig immer „All“ für die CSS-Werte aller Auflösungen voreingestellt. Jetzt müssen wir eine weitere Media Query für eine bestimmte Auflösung hinzufügen und dazu auf das Plus-Symbol klicken.In dem erscheinenden Dialog müssen wir einen Wrap Point festlegen (Abb. 9). Wenn bereits Wrap Points gesetzt wurden, wird jetzt einer davon ausgewählt.

Abb. 9: Wrap Point für die neue Media Query festlegen

Die neue Media Query wurde nun erzeugt und ist auch im App Designer unter den Eigenschaften zu sehen. Danach setzen wir einen Haken in der Display-Checkbox mit dem aktivierten Wert none (Abb. 10). Jetzt wird das Flip-Switch-Steuerelement bei einer vertikalen Smartphoneausrichtung automatisch ausgeblendet.

Abb. 10: Media Query für den „hideFlipSwitch“-Style festlegen

Wie versprochen, konnten wir nun eine Media Query hinzufügen, ohne Code zu schreiben. Natürlich kann man aber auch jederzeit zum Webeditor wechseln und den Code manuell erstellen. Nur wer möchte schon diesen zusätzlichen Aufwand betreiben, wenn es mit dem Designer wesentlich einfacher und schneller geht?

Fazit

In dieser Folge sind wir in die Welt des Responsive Webdesigns eingetaucht. Anfangs haben wir gesehen, dass auf diesem Theme auch ein unangenehmer Fluch liegen kann. Dank ausgereifter und umfangreicher UI-Frameworks wird der Bann jedoch gelöst. Sie helfen nicht nur dabei, das umfangreiche Thema zu beherrschen, sondern nehmen Webentwicklern auch einiges an Designarbeit ab.

Ich bin ja immer noch ein großer Freund von XAML, da hier einige Designprobleme, verglichen mit HTML und CSS, deutlich eleganter gelöst wurden. Jedoch finde ich dank der UI-Frameworks nun endlich wieder Spaß am Entwickeln von Webanwendungen. Gerade bei der Entwicklung von Cross-Plattform-Apps bietet das Intel XDK mit dem App Designer einen enormen Mehrwert. Durch angenehmes Tooling lässt sich blitzschnell ein Layout erzeugen, das zudem auch noch moderne Ansprüche erfüllt. Auch die Möglichkeit, unterschiedliche UI-Frameworks zu verwenden, ist ein enormer Vorteil.

In der nächsten Folge beschäftigen wir uns mit dem Zugriff auf Sensoren, der bei der App-Entwicklung eine große Rolle spielt. Denn genau das unterscheidet eine Cross-Plattform-App schließlich von einer einfachen Webanwendung: der Zugriff auf und die Integration mit der Hardware. Wenn Sie weitere Fragen haben, stehe ich gerne per E-Mail unter gregor.biswanger@cleversocial.de zur Verfügung. Jetzt wünsche ich Ihnen aber erst einmal viel Spaß mit dem Intel XDK und dem App Designer.

Gregor Biswanger

Autor

Gregor Biswanger

Gregor Biswanger (Microsoft MVP, Intel Black Belt & Intel Software Innovator) ist Gründer von CleverSocial.de und freier Dozent, Berater, Trainer, Autor und Sprecher. Er berät große und mittelständische Unternehmen, Organisationen und Agenturen rund um die Themen zur Softwarearchitektur, agile Prozesse, XAML, Web- und Hybrid-App-Entwicklung, Cloud-Lösungen, Content Marketing und Social Media Marketing. Er veröffentlichte dazu zahlreiche Video-Trainings bei video2brain und Microsoft.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag