Besser Abspecken mit Design.Mobile Fi(rs)t.Zürich, März 20121                                   Denken. Präsentieren. Umse...
Mobile. Design. Abspecken. Namics.Menü.     Antipasti.     Primi Piatti.     Secondi Piatti.     Dolci.2    14.03.2012...
Antipasti.3             Denken. Präsentieren. Umsetzen. Namics.
Fingerfood aus Viewports, Responsive    Grids und Media Queries.Antipasti.4                                 Denken. Präsen...
Antipasti. Abspecken. Design.Media Queries. http://www.anderssonwise.com/5   14.03.2012                    Denken. Präsen...
Antipasti. Abspecken. Design.Viewport. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html6   14.03.2...
Antipasti. Abspecken. Design.Responsive Layout. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html7 ...
Antipasti. Abspecken. Design.Responsive Layout.     A                                                        A    B       ...
Antipasti. Abspecken. Design.Breakpoints.    A                                                                        A   ...
Antipasti. Abspecken. Design.Breakpoints.                  iPhone                   320px                           iPhone...
Antipasti. Abspecken. Design.Mouse vs. Touch.           Informationen können durch           die Hand verdeckt werden11   ...
Antipasti. Abspecken. Design.Mouse vs. Touch.                    Klickfläche                    ca. 29x44px               ...
Antipasti. Abspecken. Design.Mouse vs. Touch.                    Klickfläche                    ca. 29x44px               ...
PrimiPiatti.14          Denken. Präsentieren. Umsetzen. Namics.
Ein leichtes Soufflés aus Weissraum, feinste Funktionen und kernigen Botschaften nach Art des Hauses.PrimiPiatti.15       ...
Antipasti. Abspecken. Design.Inhalt und Relevanz.                    Essentiell                        Nützlich           ...
Antipasti. Abspecken. Design.MUST-Methode.                    Essentiell                        Nützlich                  ...
Antipasti. Abspecken. Design.Beispiel.18   14.03.2012                 Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.Essentiell (Mandatory). Informiert über den Zweck / Absender der Website Wird exakt wegen d...
Antipasti. Abspecken. Design.Beispiel.                                M                              M                    ...
Antipasti. Abspecken. Design.Nützlich (Useful). Erschliesst weitere primäre Inhalte / Funktionen Angebot kann ohne diese...
Antipasti. Abspecken. Design.Beispiel.                           U     U                           U                      ...
Antipasti. Abspecken. Design.Unterstützend (Supplemental). Veranschaulicht die Funktionsweise des Angebotes Zusätzliche ...
Antipasti. Abspecken. Design.Beispiel.                        S                                                        S  ...
Antipasti. Abspecken. Design.Belanglos (Trivial). Zusätzliche Angebote und Funktionen Hygieneelemente Sekundäre Informa...
Antipasti. Abspecken. Design.Beispiel.                  T                                             T           T       ...
Antipasti. Abspecken. Design.Beispiel.                  T      S               M                              M           ...
SecondiPiatti.28          Denken. Präsentieren. Umsetzen. Namics.
Erlesene Auswahl an Websites serviert auf dem heissen Stein.SecondiPiatti.29                                   Denken. Prä...
Antipasti. Abspecken. Design.Mitmachen. Schere Leim iPhone Schablonen M-U-S-T Raster30   14.03.2012                 De...
Antipasti. Abspecken. Design.Mitmachen.                                                                                   ...
Antipasti. Abspecken. Design.Beispiel.32   14.03.2012                 Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.Ablauf. ca. 15 Min Priorisieren auf der Matrix ca. 10 Min Layout auf der iPhone Schablone ...
Antipasti. Abspecken. Design.Resultate.34   14.03.2012                 Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.Resultate.35   14.03.2012                 Denken. Präsentieren. Umsetzen. Namics.
Dolci.36         Denken. Präsentieren. Umsetzen. Namics.
Frisches Sorbet aus Tipps & TricksDolci.37                               Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.Ohne Maus - Kein Hover. http://www.abo-checker.ch/phones38   14.03.2012                     ...
Antipasti. Abspecken. Design.Responsive Grids. http://foundation.zurb.com/ http://lessframework.com/ http://framelessgr...
Antipasti. Abspecken. Design.Das Rad nicht neu erfinden. Termine          Orte          Adressen   Telefonnr.      Sharing...
Antipasti. Abspecken. Design.Keine Formulare verbiegen.  Dropdowns, werden je nach Plattform anders dargestellt und sind ...
Antipasti. Abspecken. Design.Unter der Haube – Datum/Uhrzeit.  Eingabe von Datum und Uhrzeit mittels Picker-Element42   1...
Antipasti. Abspecken. Design.Unter der Haube – Text.  Anpassen der Tastatur für Ziffern, Buchstaben, E-Mail, etc.43   14....
Antipasti. Abspecken. Design.Prototype Testing. http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow44   1...
Antipasti. Abspecken. Design.Responsive Layout Preview. http://www.responsinator.com45   14.03.2012                  Denk...
Antipasti. Abspecken. Design.… one last thing.46   14.03.2012                 Denken. Präsentieren. Umsetzen. Namics.
Grazie.47          Denken. Präsentieren. Umsetzen. Namics.
Upcoming SlideShare
Loading in...5
×

“Mobile First“ - Besser Abspecken mit Design

2,770

Published on

Referat Designkantine vom 15. März 2012 - "Mobile First" - Besser abspecken mit Design

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,770
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
44
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • 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
  • http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow
  • http://www.responsinator.com Tool zur Überprüfung von res ponsive Layout auf unters chiedlichen Geräten und Viewports im Webbrowser
  • Sorry Flash, You are out! http://www.nerdnirvana.org/tag/superman/
  • “Mobile First“ - Besser Abspecken mit Design

    1. 1. Besser Abspecken mit Design.Mobile Fi(rs)t.Zürich, März 20121 Denken. Präsentieren. Umsetzen. Namics.
    2. 2. Mobile. Design. Abspecken. Namics.Menü.  Antipasti.  Primi Piatti.  Secondi Piatti.  Dolci.2 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    3. 3. Antipasti.3 Denken. Präsentieren. Umsetzen. Namics.
    4. 4. Fingerfood aus Viewports, Responsive Grids und Media Queries.Antipasti.4 Denken. Präsentieren. Umsetzen. Namics.
    5. 5. Antipasti. Abspecken. Design.Media Queries. http://www.anderssonwise.com/5 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    6. 6. Antipasti. Abspecken. Design.Viewport. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html6 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    7. 7. Antipasti. Abspecken. Design.Responsive Layout. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html7 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    8. 8. Antipasti. Abspecken. Design.Responsive Layout. A A B B B C B C C C A A D D D D8 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    9. 9. Antipasti. Abspecken. Design.Breakpoints. A A B B B B C C C C A A D D D D Breakpoint 1 Breakpoint 2 Breakpoint 39 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    10. 10. Antipasti. Abspecken. Design.Breakpoints. iPhone 320px iPhone 480px iPad 768px iPad 1024px MacBook Air 13” 1440px 320px 720px 980px Breakpoint 1 Breakpoint 2 Breakpoint 310 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    11. 11. Antipasti. Abspecken. Design.Mouse vs. Touch. Informationen können durch die Hand verdeckt werden11 14.03.2012 9 Denken. Präsentieren. Umsetzen. Namics.
    12. 12. Antipasti. Abspecken. Design.Mouse vs. Touch. Klickfläche ca. 29x44px Informationen können durch die Hand verdeckt werden12 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    13. 13. Antipasti. Abspecken. Design.Mouse vs. Touch. Klickfläche ca. 29x44px Informationen können durch die Hand verdeckt werden13 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    14. 14. PrimiPiatti.14 Denken. Präsentieren. Umsetzen. Namics.
    15. 15. Ein leichtes Soufflés aus Weissraum, feinste Funktionen und kernigen Botschaften nach Art des Hauses.PrimiPiatti.15 Denken. Präsentieren. Umsetzen. Namics.
    16. 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 Anbieters16 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    17. 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 Anbieters17 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    18. 18. Antipasti. Abspecken. Design.Beispiel.18 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    19. 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 Betrachters19 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    20. 20. Antipasti. Abspecken. Design.Beispiel. M M M M M M20 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    21. 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 Anbieters21 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    22. 22. Antipasti. Abspecken. Design.Beispiel. U U U U22 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    23. 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 Betrachters23 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    24. 24. Antipasti. Abspecken. Design.Beispiel. S S S S S S S S24 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    25. 25. Antipasti. Abspecken. Design.Belanglos (Trivial). Zusätzliche Angebote und Funktionen Hygieneelemente Sekundäre Informationen und Funktionen aus Sicht des Anbieters25 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    26. 26. Antipasti. Abspecken. Design.Beispiel. T T T T T T26 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    27. 27. Antipasti. Abspecken. Design.Beispiel. T S M M U U T S T M S M T M S S S U M U S S T T27 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    28. 28. SecondiPiatti.28 Denken. Präsentieren. Umsetzen. Namics.
    29. 29. Erlesene Auswahl an Websites serviert auf dem heissen Stein.SecondiPiatti.29 Denken. Präsentieren. Umsetzen. Namics.
    30. 30. Antipasti. Abspecken. Design.Mitmachen. Schere Leim iPhone Schablonen M-U-S-T Raster30 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    31. 31. Antipasti. Abspecken. Design.Mitmachen. Primär Essentiell Nützlich (Mandatory) (Useful) Sekundär Unterstützend Belanglos (Supplemental) (Trivial) Ziele und Sicht des Besuchers Ziele und Sicht des Anbieters31 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    32. 32. Antipasti. Abspecken. Design.Beispiel.32 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    33. 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 Ergebnisse33 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    34. 34. Antipasti. Abspecken. Design.Resultate.34 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    35. 35. Antipasti. Abspecken. Design.Resultate.35 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    36. 36. Dolci.36 Denken. Präsentieren. Umsetzen. Namics.
    37. 37. Frisches Sorbet aus Tipps & TricksDolci.37 Denken. Präsentieren. Umsetzen. Namics.
    38. 38. Antipasti. Abspecken. Design.Ohne Maus - Kein Hover. http://www.abo-checker.ch/phones38 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    39. 39. Antipasti. Abspecken. Design.Responsive Grids. http://foundation.zurb.com/ http://lessframework.com/ http://framelessgrid.com/ http://cssgrid.net/ http://stuffandnonsense.co.uk/projects/320andup/39 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    40. 40. Antipasti. Abspecken. Design.Das Rad nicht neu erfinden. Termine Orte Adressen Telefonnr. Sharing Bookmarks  APIs nutzen40 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    41. 41. Antipasti. Abspecken. Design.Keine Formulare verbiegen.  Dropdowns, werden je nach Plattform anders dargestellt und sind für die jeweilige Eingabeform optimal angepasst41 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    42. 42. Antipasti. Abspecken. Design.Unter der Haube – Datum/Uhrzeit.  Eingabe von Datum und Uhrzeit mittels Picker-Element42 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    43. 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.
    44. 44. Antipasti. Abspecken. Design.Prototype Testing. http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow44 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    45. 45. Antipasti. Abspecken. Design.Responsive Layout Preview. http://www.responsinator.com45 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    46. 46. Antipasti. Abspecken. Design.… one last thing.46 14.03.2012 Denken. Präsentieren. Umsetzen. Namics.
    47. 47. Grazie.47 Denken. Präsentieren. Umsetzen. Namics.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×