Offline – damit eine App in jedem Winkel der Welt funktioniert - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 277

Stärken von HTML5 zum Tragen: Die automatische Skalierbarkeit auf verschiedenste
Bildschirmgrößen.
Die wichtigste Eigenschaft Ihrer Todo-App ist, dass sie offline funktioniert. Aufgaben
und gute Ideen entstehen überall und interessieren sich nicht dafür, ob Sie gerade Netz
haben oder nicht. Die WebApp wird damit die Todo-Liste auf dem Gerät speichern. So
sind alle Aufgaben immer verfügbar. Zusätzlich können Sie neue Aufgaben auch ohne
Internetverbindung anlegen.
7
7.3.2 Der Wireframe der Todo-App
Das Interface besteht insgesamt aus zwei Bereichen. Im oberen Bereich wird Ihre Todo-
Liste angezeigt (Abbildung 7.6). Jedes Todo ist als kleiner Kasten gestaltet, der es klar
von anderen Todos abgrenzt. Links neben jedem Todo findet sich eine Art Checkbox,
mit der Sie Todos als »erledigt« markieren und somit löschen können. Im unteren
Bereich des Bildschirms findet sich ein Eingabefeld, mit welchem Sie neue Todos hin-
zufügen. Dabei halten Sie das Interface so minimalistisch, dass Sie sogar auf einen Sub-
mit-Button verzichten. Ihr Todo fügen Sie einfach mit einem einfachen (¢) hinzu.
Generell gilt: Verzichten Sie auf Interface-Elemente wie Buttons, wenn Sie durch ein-
fache Gesten oder andere Tasten (wie in diesem Fall die (¢) -Taste) ersetzt werden kön-
nen. Ein einfaches und damit intuitives Interface werden Ihre Benutzer schätzen und
letztendlich häufiger verwenden. Erfolgreiche Apps zeichnen sich durch hervorra-
gende Benutzeroberflächen aus, die mit möglichst wenig Tabs zum Ziel führen.
Abbildung 7.6 Der Wireframe für die Todo-App
Legen Sie eine HTML-Datei mit dem üblichen Grundgerüst an. Vergessen Sie nicht
die Meta-Elemente im head -Bereich der Webseite, mit dem Sie den Vollbildmodus
aktivieren und das Zoomen deaktivieren. In das body -Element kommen nun die Ele-
mente für die Liste und das Eingabefeld: