“mobile first“ - besser abspecken mit design

1 Namics.Denken. Präsentieren. Umsetzen.

Mobile Fi(rs)t.Mobile Fi(rs)t.Zürich, März 2012

Besser Abspecken mit Design.Besser Abspecken mit Design.

1

2 14.03.2012

Menü.

Antipasti.

Primi Piatti.

Secondi Piatti.

Dolci.

Mobile. Design. Abspecken. Namics.

Namics.

Denken. Präsentieren. Umsetzen.

3 Namics.Denken. Präsentieren. Umsetzen.

Antipasti.

4

Antipasti.

Fingerfood aus Viewports, Responsive Grids und Media Queries.

Namics.


5 14.03.2012

Media Queries.

Antipasti. Abspecken. Design.

http://www.anderssonwise.com/

Namics.


http://www.anderssonwise.com/

6 14.03.2012

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

Viewport.


Namics.


7 14.03.2012

Responsive Layout.


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

Namics.


8 14.03.2012

Responsive Layout.


C

D

BA

C

D

B

A

C

D

B

A

C

D

BA

Namics.


9 14.03.2012

Breakpoints.


C

D

BA

C

D

B

A

C

D

B

A

C

D

BA

Breakpoint 1 Breakpoint 2 Breakpoint 3

Namics.


10 14.03.2012

Breakpoints.


Breakpoint 1

iPhone320px

320px

Breakpoint 2

720px

Breakpoint 3

980px

iPhone480px

iPad768px

iPad1024px

MacBook Air 13”1440px

Namics.


11

Informationen können durch die Hand verdeckt werden

14.03.2012

Mouse vs. Touch.


9 Namics.


Namics.

Denken. Präsentieren. Umsetzen.12


14.03.2012

Mouse vs. Touch.


Klickflächeca. 29x44px

Namics.

Denken. Präsentieren. Umsetzen.13 14.03.2012

Mouse vs. Touch.


Klickflächeca. 29x44px


14

Primi Piatti.14

Namics.


15

PrimiPiatti.

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

Namics.


16 14.03.2012

Inhalt und Relevanz.


Ziele und Sicht des Besuchers Ziele und Sicht des Anbieters

Pri

mär

Seku

nd

är

Unterstützend(Supplemental)

Essentiell(Mandatory)

Belanglos(Trivial)

Nützlich(Useful)

Namics.


17 14.03.2012

MUST-Methode.



Pri

mär

Seku

nd

är



Belanglos(Trivial)

Nützlich(Useful)

Namics.


18 14.03.2012

Beispiel.


Namics.


19 14.03.2012

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

Namics.


20 14.03.2012

Beispiel.


M M

MM

M

M

Namics.


21 14.03.2012

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

Namics.


22 14.03.2012

Beispiel.


U U

UU

Namics.


23 14.03.2012

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

Namics.


24 14.03.2012

Beispiel.


S

SS

S

S

S

S

S

Namics.


25 14.03.2012

Belanglos (Trivial).


Zusätzliche Angebote und Funktionen

Hygieneelemente

Sekundäre Informationen und Funktionen aus Sicht des Anbieters

Namics.


26 14.03.2012

Beispiel.


T

T

T

T

T

T

Namics.


27 14.03.2012

Beispiel.


M

M

M M

M

MU U

UU

S

SS

S

T

T

T

T

T

S T

S

S

S

Namics.


28

Secondi Piatti.

Namics.


29

Secondi Piatti.

Erlesene Auswahl an Websites serviert auf dem heissen Stein.

Namics.


30 14.03.2012

Mitmachen.


Schere

Leim

iPhone Schablonen

M-U-S-T Raster

Namics.


31 14.03.2012

Mitmachen.



Pri

mär

Seku

nd

är



Belanglos(Trivial)

Nützlich(Useful)

Namics.


32 14.03.2012

Beispiel.


Namics.


33 14.03.2012

Ablauf.


ca. 15 Min Priorisieren auf der Matrix

ca. 10 Min Layout auf der iPhone Schablone

ca. 10. Präsentation der Ergebnisse

Namics.


34 14.03.2012

Resultate.


Namics.


35 14.03.2012

Resultate.


Namics.


36

Dolci.Namics

.Denken. Präsentieren. Umsetzen.

37

Dolci.

Frisches Sorbet aus Tipps & Tricks

Namics.


38 14.03.2012

Ohne Maus - Kein Hover.


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

Namics.


39 14.03.2012

Responsive Grids.


http://foundation.zurb.com/

http://lessframework.com/

http://framelessgrid.com/

http://cssgrid.net/

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

Namics.


40 14.03.2012

Das Rad nicht neu erfinden.

APIs nutzen


Termine Orte Adressen Telefonnr. Sharing Bookmarks

Namics.


41 14.03.2012

Keine Formulare verbiegen.

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


Namics.


42 14.03.2012

Unter der Haube – Datum/Uhrzeit.

Eingabe von Datum und Uhrzeit mittels Picker-Element


Namics.


43 14.03.2012

Unter der Haube – Text.

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


Namics.


44 14.03.2012

Prototype Testing.


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

Namics.


45 14.03.2012

Responsive Layout Preview.


http://www.responsinator.com

Namics.


46 14.03.2012

… one last thing.


Namics.


47

Grazie.Namics

.Denken. Präsentieren. Umsetzen.

“mobile first“ - besser abspecken mit design

Technology