Windows Developer

Das unabhängige Magazin für Microsoft-Technologien
X

Konferenzrückblick: Das war die BASTA! 2014

Teil 3 der Artikelserie

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

Responsive Webdesign

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.

Mehr aus dieser Ausgabe

Artikel erschienen in

©iStockphoto.com/julos
Der amerikanische Fachautor Eberly verdankt der Programmierung von 3-D-Spielen…
Der Einsatz von Konvertern im Data Binding
Der Einsatz von Konvertern im Data Binding ermöglicht es, eine Eigenschaft…
Mathematische Probleme durch Simulation lösen
Physikalische Prozesse legen der maximal erreichbaren Taktrate einzelner…
Softwarearchitekturen planvoll dokumentieren
Die Dokumentation ist in der Welt der Softwareentwicklung nicht gerade beliebt…
JavaScript ermöglicht nicht nur den Webentwicklern viele Möglichkeiten
JavaScript-Code kann so wie jedes andere Computerprogramm auch Schwachstellen…
JavaScript für C#- und .NET-Entwickler
Anwendungen laufen schon lange nicht mehr ausschließlich auf dem Desktop oder…
XAML: Umlaute und Sonderzeichen
In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum…
Windows Phone 8: Individueller Splashscreen
In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum…
Responsive Webdesign
Dieser Artikel ist der dritte Teil einer Serie zum Thema Cross-Plattform-…
Ein Webkarussell mit Bootstrap
Karusselle findet man auf der Startseite vieler Websites, die in den letzten…
JavaScript überall – Webserverprogrammierung mit Node.js
Mit Node.js findet JavaScript auch auf dem Webserver eine immer größere…
Windows Store Apps: Dynamisches Application Theme
In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum…
 

Kommentare

Ihr Kommentar zum Thema

Als Gast kommentieren:

Gastkommentare werden nach redaktioneller Prüfung freigegeben (bitte Policy beachten).

Übersicht zu diesem Beitrag