11. Antipasti. Abspecken. Design.
Mouse vs. Touch.
Informationen können durch
die Hand verdeckt werden
11 14.03.2012
9 Denken. Präsentieren. Umsetzen. Namics.
12. Antipasti. Abspecken. Design.
Mouse vs. Touch.
Klickfläche
ca. 29x44px
Informationen können durch
die Hand verdeckt werden
12 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
13. Antipasti. Abspecken. Design.
Mouse vs. Touch.
Klickfläche
ca. 29x44px
Informationen können durch
die Hand verdeckt werden
13 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
15. Ein leichtes Soufflés aus Weissraum,
feinste Funktionen und kernigen Botschaften
nach Art des Hauses.
Primi
Piatti.
15
Denken. Präsentieren. Umsetzen. Namics.
16. Antipasti. Abspecken. Design.
Inhalt und Relevanz.
Essentiell Nützlich
Primär
(Mandatory) (Useful)
Sekundär
Unterstützend Belanglos
(Supplemental) (Trivial)
Ziele und Sicht des Besuchers Ziele und Sicht des Anbieters
16 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
17. Antipasti. Abspecken. Design.
MUST-Methode.
Essentiell Nützlich
Primär
(Mandatory) (Useful)
Sekundär
Unterstützend Belanglos
(Supplemental) (Trivial)
Ziele und Sicht des Besuchers Ziele und Sicht des Anbieters
17 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
19. Antipasti. Abspecken. Design.
Essentiell (Mandatory).
Informiert über den Zweck / Absender der Website
Wird exakt wegen dieser Funktion / Information besucht
Wichtige Informationen und Botschaften
Primäre Informationen und Funktionen aus Sicht des Betrachters
19 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
21. Antipasti. Abspecken. Design.
Nützlich (Useful).
Erschliesst weitere primäre Inhalte / Funktionen
Angebot kann ohne diesem Element nicht genutzt
werden
Primäre Informationen und Funktionen aus Sicht des Anbieters
21 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
23. Antipasti. Abspecken. Design.
Unterstützend (Supplemental).
Veranschaulicht die Funktionsweise des Angebotes
Zusätzliche Zugänge zur Erschliessung der Inhalte
Zusatzfunktionen die den Mehrwert/Komfort erhöhen
Sekundäre Informationen und Funktionen aus Sicht des Betrachters
23 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
33. Antipasti. Abspecken. Design.
Ablauf.
ca. 15 Min Priorisieren auf der Matrix
ca. 10 Min Layout auf der iPhone Schablone
ca. 10. Präsentation der Ergebnisse
33 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
40. Antipasti. Abspecken. Design.
Das Rad nicht neu erfinden.
Termine Orte Adressen Telefonnr. Sharing Bookmarks
APIs nutzen
40 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
41. Antipasti. Abspecken. Design.
Keine Formulare verbiegen.
Dropdowns, werden je nach Plattform anders dargestellt und sind für die
jeweilige Eingabeform optimal angepasst
41 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
42. Antipasti. Abspecken. Design.
Unter der Haube – Datum/Uhrzeit.
Eingabe von Datum und Uhrzeit mittels Picker-Element
42 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
43. Antipasti. Abspecken. Design.
Unter der Haube – Text.
Anpassen der Tastatur für Ziffern, Buchstaben, E-Mail, etc.
43 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
Namics hilft Abspecken Fühlt sich ihre Website manchmal auch zu dick, behäbig und zu schwer für mobile Endgeräte? Kriegen sie die Inhalte nicht mehr unter oder sind diese aufgeblasen und schwabbelig. Hat ihre Homepage kein Profil mehr und ihre Kernfunktionen sind unter überflüssigen Fett verborgen? Dann wird es Zeit für eine passende Diät und Fitnessprogramm. In ganz schlimmen Fällen muss man auch schon mal das Messer oder Schere zücken können. Bei uns lernen sie heute nicht nur, wie sie gekonnt und skrupellos mit dem kleinen chirurgischen Besteck umgehen können. Wir zeigen Ihnen auch wie mit einfachen Mitteln eine Website für mobile Geräte fit gemacht wird und welche Vorteile dies für den klassischen Webauftritt mit sich bringt. Stichwort: Mobile Usability
Antipasti – Fingerfood aus Viewports, Responsive Grids und Media Queries. Gestaltung Primi Piatti – Ein leichtes Soufflés aus Weissraum, feinste Funktionen und kernigen Botschaften nach Art des Hauses - Inhalt Secondi Piatti – Erlesene Auswahl an Websites serviert auf dem heissen Stein. Dolci – Frisches Sorbet aus Tipps & Tricks
5min
Ist meine Website fit für mobile Endgeräte?
Performance Datenoptimierung
Mit dem Viewport werden Geräteeigenschaften ausgelesen, die Hinweis über das Seitenverhältnis und Displayauflösung geben. Das betrifft einerseits das Layout aber auch die Qualität von Bildern (Retina-Display) und Schriftgrösse
10min
Sind meine Inhalte fit für mobiles Surfverhalten?
Essentiell (Mandatory): Die Website kann nicht ohne diese Information/Funktion auskommen. Nützlich (Useful) Dieses Element fügt einen Mehrwert hinzu, kann aber notfalls auch weggelassen werden. Unterstützend (Supplemental): Dieses Element ergänzt oder wiederholt Inhalte. Belanglos (Trivial): Dieses Element ist redundant oder verschwendet Raum auf die eine oder andere Weise.
Essentiell (Mandatory): Die Website kann nicht ohne diese Information/Funktion auskommen. Nützlich (Useful) Dieses Element fügt einen Mehrwert hinzu, kann aber notfalls auch weggelassen werden. Unterstützend (Supplemental): Dieses Element ergänzt oder wiederholt Inhalte. Belanglos (Trivial): Dieses Element ist redundant oder verschwendet Raum auf die eine oder andere Weise.
Die Website wird exakt wegen dieser Funktion/Information besucht SBB Fahrplanauskunft, Coop@home Kauf eines Produktes, Fotos bei Pinterst Das Angebot kann ohne diesem Element nicht genutzt werden Login/Registrierung, Gibt einen Hinweis auf den Urheber / Zweck der Website Logo, Name, Foto Die Funktion ist notwendig um weitere Inhalte zu erschliessen Navigation, Primäre Aktion Warum soll ich diese Website benutzen? Wie funktioniert es? Was muss ich dafür tun?
Erschliesst weitere primäre Inhalte / Funktionen Hauptnavigation Warum soll ich diese Website benutzen? Wie funktioniert es? Was muss ich dafür tun?
Veranschaulicht die Funktionsweise des Angebotes Video, Testimonial, Bietet zusätzliche Zugänge zur Erschliessung der Inhalte Suche, Quicklinks, Breadcrumb, FatFooter Zusatzfunktionen die den Mehrwert erhöhen Druckfunktion, Weiterleitung, Warum soll ich diese Website benutzen? Wie funktioniert es? Was habe ich davon? Was muss ich dafür tun?
Passive Inhalte und Funktionen Bietet wichtige Funktionen zur Verbreitung der Website Twitter, Facebook, Google+ Hygieneelemente Disclaimer, Impressum, Aktienkurs
5min
http://www.abo-checker.ch/phones
Termine -> Calendar Orte -> Maps Sharing -> Twitter, facebook, Google+ Bookmarking -> Evernote, Digg, Delicious Telefonnummern -> Phone Kontaktdaten -> Adressbook aber auch intergrierte Dienste, wie GPS, Kamera, Mikrofon nutzen.
Checkbox, Radiobutton, Dropdown sind sacrosanct – bitte nicht neu erfinden und schon gar nicht gestalten Zu viel Anpassung auf den verschiedenen Plattformen notwendig Verwirrt den Nutzer, da er Gewohntes neu lernen muss Don ’t break the form
z.B. Durch Verwendung von standardisierten Formularelementen, insbesondere Dropdown-Menüs
z.B. Durch intelligente Auswahl der Tastatur (E-Mail. URL, Text, Ziffern) Suchfelder als solche erkennbar machen inkl. Funktion zum Löschen der Eingabe