designkantine mobile first_pdf

Namics.Denken. Präsentieren. Umsetzen.

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

Besser Abspecken mit Design.

1

Namics.Denken. Verstehen. Designkantine.14.03.2012

Menü.

à Antipasti.

à Primi Piatti.

à Secondi Piatti.

à Dolci.

Mobile. Design. Abspecken. Namics.

2


Antipasti.3


Antipasti.

Fingerfood aus Viewports, Responsive Grids und Media Queries.

4


Media Queries.

Antipasti. Abspecken. Design.

à http://www.anderssonwise.com/

5

http://www.anderssonwise.com/

http://www.anderssonwise.com/


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

Viewport.


6

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

7




Responsive Layout.


C

D

BA

C

D

B

A

C

D

B

A

C

D

BA

8


Breakpoints.


C

D

BA

C

D

B

A

C

D

B

A

C

D

BA

Breakpoint 1 Breakpoint 2 Breakpoint 3

9


Breakpoints.


Breakpoint 1

iPhone320px

320px

Breakpoint 2

720px

Breakpoint 3

980px

iPhone480px

iPad768px

iPad1024px

MacBook Air 13”1440px

10

Informationen können durch die Hand verdeckt werden


Mouse vs. Touch.


911



Mouse vs. Touch.


Klickflächeca. 29x44px

12


Mouse vs. Touch.


Klickflächeca. 29x44px


13


Primi Piatti.10.9.2010 1014


PrimiPiatti.

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

15


Inhalt und Relevanz.


Ziele und Sicht des Besuchers Ziele und Sicht des Anbieters

Prim

ärSe

kund

ärUnterstützend(Supplemental)

Essentiell(Mandatory)

Belanglos(Trivial)

Nützlich(Useful)

16


MUST-Methode.



Prim

ärSe

kund

ärUnterstützend(Supplemental)


Belanglos(Trivial)

Nützlich(Useful)

17


Beispiel.


18


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


Beispiel.


M M

MM

M

M

20


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


Beispiel.


U U

UU

22


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


Beispiel.


S

SS

S

S

S

S

S

24


Belanglos (Trivial).


à Zusätzliche Angebote und Funktionen

à Hygieneelemente

à Sekundäre Informationen und Funktionen aus Sicht des Anbieters

25


Beispiel.


T

T

T

T

T

T

26


Beispiel.


M

M

M M

M

MU U

UU

S

SS

S

T

T

T

T

T

S T

S

S27

S


Secondi Piatti.28


Secondi Piatti.

Erlesene Auswahl an Websites serviert auf dem heissen Stein.

29


Mitmachen


à Schere

à Leim

à iPhone Schablonen

à M-U-S-T Raster

30


Mitmachen



Prim

ärSe

kund

är

Unterstützend(Supplemental)


Belanglos(Trivial)

Nützlich(Useful)

31


Beispiel


32


Ablauf


à ca. 15 Min Priorisieren auf der Matrix

à ca. 10 Min Layout auf der iPhone Schablone

à ca. 10. Präsentation der Ergebnisse

33


Resultate


34


Resultate


35


Dolci.36


Dolci.

Frisches Sorbet aus Tipps & Tricks

37


Ohne Maus - Kein Hover


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

38

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

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/

39

http://foundation.zurb.com/

http://foundation.zurb.com/

http://lessframework.com/

http://lessframework.com/

http://framelessgrid.com/

http://framelessgrid.com/

http://cssgrid.net

http://cssgrid.net

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

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


Das Rad nicht neu erfinden

à APIs nutzen


Termine Orte Adressen Telefonnr. Sharing Bookmarks

40


Keine Formulare verbiegen

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


41


Unter der Haube – Datum/Uhrzeit

à Eingabe von Datum und Uhrzeit mittels Picker-Element


42


Unter der Haube - Text

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


43


Prototype Testing


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

44

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

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


Responsive Layout Preview


à http://www.responsinator.com

45

http://www.responsinator.com/?url=smashingmagazine.com

http://www.responsinator.com/?url=smashingmagazine.com


… one last thing


46


Grazie.47

designkantine mobile first_pdf

Documents