“Mobile First“ - Besser Abspecken mit Design

Besser Abspecken mit Design.

Mobile Fi(rs)t.
Zürich, März 2012
1
Denken. Präsentieren. Umsetzen. Namics.

Mobile. Design. Abspecken. Namics.

Menü.
 Antipasti.
 Primi Piatti.
 Secondi Piatti.
 Dolci.

2 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.

Antipasti.
3

Fingerfood aus Viewports, Responsive
Grids und Media Queries.

Antipasti.
4

Antipasti. Abspecken. Design.

Media Queries.

 http://www.anderssonwise.com/



Viewport.

 http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html



Responsive Layout.

 http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html



Responsive Layout.
A A
B B B C B
C C
C
A A
D
D D
D



Breakpoints.
A A
B B B B
C C C
C
A A
D
D D
D

Breakpoint 1 Breakpoint 2 Breakpoint 3



Breakpoints.
iPhone
320px

iPhone
480px

iPad
768px

iPad
1024px

MacBook Air 13”
1440px

320px 720px 980px

Breakpoint 1 Breakpoint 2 Breakpoint 3



Mouse vs. Touch.

Informationen können durch
die Hand verdeckt werden

11 14.03.2012
9 Denken. Präsentieren. Umsetzen. Namics.


Mouse vs. Touch.
Klickfläche
ca. 29x44px



Primi
Piatti.
14

Ein leichtes Soufflés aus Weissraum,
feinste Funktionen und kernigen Botschaften
nach Art des Hauses.

Primi
Piatti.
15


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



MUST-Methode.


Primär

Sekundär




Beispiel.



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



Beispiel.
M M

M

M
M

M



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



Beispiel.

U U

U
U



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



Beispiel.
S
S

S

S S
S

S
S


Belanglos (Trivial).
 Zusätzliche Angebote und Funktionen
 Hygieneelemente

 Sekundäre Informationen und Funktionen aus Sicht des Anbieters



Beispiel.
T
T T

T

T T


Beispiel.
T S M M
U U T S T

M
S
M
T M S S
S
U

M U

S
S T T

Secondi
Piatti.
28

Erlesene Auswahl an Websites
serviert auf dem heissen Stein.

Secondi
Piatti.
29


Mitmachen.
 Schere
 Leim
 iPhone Schablonen
 M-U-S-T Raster



Mitmachen.

Primär

Sekundär




Beispiel.



Ablauf.
 ca. 15 Min Priorisieren auf der Matrix
 ca. 10 Min Layout auf der iPhone Schablone
 ca. 10. Präsentation der Ergebnisse



Resultate.


Dolci.
36

Frisches Sorbet aus Tipps & Tricks

Dolci.
37


Ohne Maus - Kein Hover.

 http://www.abo-checker.ch/phones



Responsive Grids.

 http://foundation.zurb.com/

 http://lessframework.com/

 http://framelessgrid.com/

 http://cssgrid.net/

 http://stuffandnonsense.co.uk/projects/320andup/



Das Rad nicht neu erfinden.
Termine Orte Adressen Telefonnr. Sharing Bookmarks

 APIs nutzen



Keine Formulare verbiegen.

 Dropdowns, werden je nach Plattform anders dargestellt und sind für die
jeweilige Eingabeform optimal angepasst



Unter der Haube – Datum/Uhrzeit.

 Eingabe von Datum und Uhrzeit mittels Picker-Element



Unter der Haube – Text.

 Anpassen der Tastatur für Ziffern, Buchstaben, E-Mail, etc.



Prototype Testing.

 http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow



Responsive Layout Preview.

 http://www.responsinator.com



… one last thing.


Grazie.
47

“Mobile First“ - Besser Abspecken mit Design

Recommandé

Recommandé

Contenu connexe

Plus de Namics – A Merkle Company

Plus de Namics – A Merkle Company (20)

“Mobile First“ - Besser Abspecken mit Design

Notes de l'éditeur