Gestaltung der App

Es gibt einige Grundideen, über die man nachdenken muss, bevor man eine Web-App gestaltet.

Überlegungen zur Gestaltung

Geräteunterstützung und Design-Nachbildung

Die Kenntnis über die Arten der Geräte, auf denen Ihre App laufen soll, ist von höchster Wichtigkeit. Dieses Wissen über die verschiedenen Endgeräte und ihre unterschiedlichen Fähigkeiten sagt uns, welche Funktionen wir verwenden können und wie Oberflächenkomponenten aussehen sollten. Viele mobile JavaScript-Frameworks, wie Dojo Mobile, unterstützen vielen Geräte-Themes, die die einfache Einbindung dieser Vorgaben in das Design ermöglichen. Sogar wenn Sie JavaScript-Frameworks nicht verwenden möchten, können Sie die verlangten Grundvorlagen auch umsetzen.

Ausrichtungen

Die Unterstützung der Ausrichtungen erfordert große Beachtung, wenn leistungsfähige Web-Apps, die auf mobilen Endgeräten laufen sollen, entwickelt werden. Eine klare Ausrichtung ist bei Desktop-Computern festgelegt: Der Bildschirm ist standardmäßig horizontal ausgerichtet. Anders ist das bei mobilen Endgeräten: Diese können vertikal oder horizontal ausgerichtet sein. Eine gute Web-App zeigt sich in beiden Ausrichtungen ansprechend. JavaScript- und CSS-Medienabfragen erlauben Entwicklern, die Ausrichtung zu erkennen und auf diese zu reagieren.

Gesten oder einfache Touch-Aktionen?

Machen Sie sich jetzt schon Gedanken über die Interaktion in den Menüs. Soll sich der Nutzer durch das Anklicken von Buttons oder durch Gesten durch Menüs navigieren? Die Antwort auf diese Frage legt sich dadurch fest, ob die Anwendung Platz für statische Kontrollelemente haben muss oder ob geschickte Gesten mit dem Nutzer kommunizieren sollen. JavaScript-Bibliotheken, wie jGestures können Ihnen bei der Gestensteuerung helfen.

Grundlegende App-Design-Prinzipien

Ohne Rücksicht auf die verschiedenen Geräte, auf denen Ihre App laufen soll, haben wir hier ein paar grundlegende Regeln, die bei der Entwicklung beachtet werden sollten, aufgelistet:

• Vermeiden Sie Pixel-basierte Breitenangaben, wenn Sie eine App für verschiedene Geräte mit unterschiedlichen Größen/Ausrichtungen entwickeln.
• Verwenden Sie Vektor-Grafiken, damit die Dimensionen auf unterschiedlichen Größen elegant eingestellt werden können.
• Setzen Sie nicht die Unterstützung von allen Funktionen auf unterschiedlichen Plattformen voraus, Funktionsprüfungen sind sehr wichtig!
• Desto flexibler die App designed wurde, desto leichter wird das Design auf andere Geräte übertragbar sein.

Das Design unserer App wird sehr typisch mit zwei Oberflächen gestaltet werden. Der erste Bildschirm soll ein Suchfeld für die Eingabe des vom Nutzer gewünschten Ortes und eine Liste mit vorherigen Sucheingaben enthalten. Der zweite Bildschirm zeigt eine einfache Liste mit den Tweets von Twitter an. Jeder Bildschirm zeigt die gleiche Kopfzeile an.

Unsere App soll auch dynamisch auf die Ausrichtung des Bildschirmes reagieren, auf eine einfache Geste antworten und eine vernünftige Anzeige auf Desktop-PCs und mobilen Endgeräten zustande bringen. Die Dateistruktur der App wird ungefähr so aussehen:

- app
  -  app.css
  -  app.manifest
  -  app.js
  -  images/
      -  icon-16.png
      -  icon-48.png
      -  icon-128.png
  -  index.html

Diese Struktur kann möglicherweise variieren. Weil die App nur eine kleine Beispielanwendung ist, brauchen wir keine weiteren Ordnerstrukturen. Die Bilder werden in verschiedenen Größen für verschiedene Geräte dargestellt. Das icon-128.png-Bild wird zum Beispiel für Mac OS X-Desktop-Installationen verwendet.