Das Dokument gibt zehn Tipps zur Gestaltung von mobilen Inhalten mit Netbiscuits, darunter die Notwendigkeit, einfache und lineare Designs zu verwenden, da mobile Bildschirme schmal sind. Es betont die Bedeutung der Berücksichtigung von Bandbreite und Ladezeiten sowie die Notwendigkeit, Inhalte auf mehrere Seiten zu verteilen und Tabellen anzupassen, um die Benutzerfreundlichkeit zu gewährleisten. Außerdem werden Ressourcen und Dokumentationen zur Unterstützung der Nutzung von Netbiscuits bereitgestellt.

1. netbiscuits:
10 9 Tipps.
Randnotiz: Dies ist keine offizielle netbiscuits-Präsentation. Ich arbeite mit dem Service/Produkt, habe aber darüber hinaus nichts mit dem Unternehmen zu tun.
Daniel Haller, 2011
Montag, 11. Juli 2011

2. In a nutshell:
1. RTFM.
2. KISS - Keep it simple and stupid.
3. Keine iPhone-Apps bauen (wollen).
4. BiscuitML-Patterns beachten.
5. Content konsequent linearisieren.
6. Auf Dateigrößen achten (Code und Medien).
7. Content auf mehrere Seiten verteilen.
8. Tabellen sollten nicht mehr als 2 Spalten haben.
9. Das Screendesign muss skalieren können.
P.S.: Es gibt kein MouseOver und keine Lightboxen :-)
2 Daniel Haller, 2011
Montag, 11. Juli 2011

3. Read the f**** Manual.
Gute Doku verfügbar:
- BiscuitML Referenz
(http://www.netbiscuits.com/biscuitml-reference)
- Forum
(http://www.netbiscuits.com/forum)
- E-Mail Support
(http://www.netbiscuits.com/mysupport)
- („Getting Started“) Guides
(http://www.netbiscuits.com/getting-started)
- Video-Tutorials
(http://www.netbiscuits.com/mobile-development-video-tutorials)
- ...
Übrigens: Auch als Referenz für Konzept und Design gut zu gebrauchen.
3 Daniel Haller, 2011
Montag, 11. Juli 2011

4. Keep it simple and stupid.
(Haupt-)Grund für den Einsatz von netbiscuits:
Eine Codebase für alle Geräte*.
Daher:
- Design follows Content.
- In der Gestaltung ist im Wesentlichen der kleinste
gemeinsamer Nenner ausschlaggebend.
- Es „geht“ fast alles. Aber es sieht nicht so toll aus
wie auf dem iPhone.
* also auch den Longtail jenseits von iPhone und Co!
4 Daniel Haller, 2011
Montag, 11. Juli 2011

5. So sieht KISS aus...
Quelle: http://www.netbiscuits.com/biscuitml-reference
5 Daniel Haller, 2011
Montag, 11. Juli 2011

6. So sieht KISS aus...
Quelle: http://www.netbiscuits.com/biscuitml-reference
6 Daniel Haller, 2011
Montag, 11. Juli 2011

7. Keine iPhone-Apps.
(Haupt-)Grund für den Einsatz von netbiscuits:
Eine Codebase für alle Geräte*.
Daher:
- Immer den Longtail vor Augen haben, nicht das iPhone.
Der Fokus liegt aber auf dem iPhone (Android, etc.)?
Alternative Möglichkeiten in Betracht ziehen!
Zum Beispiel SenchaTouch, iWebKit, jQuery mobile oder die „Rich Internet Features“ von netbiscuits.
7 Daniel Haller, 2011
Montag, 11. Juli 2011

8. Showcase... (sieht echt nicht nach iPhone aus)
Quelle: http://www.netbiscuits.com/customers
8 Daniel Haller, 2011
Montag, 11. Juli 2011

9. BiscuitML-Patterns beachten
Quelle: http://www.netbiscuits.com/biscuitml-reference
9 Daniel Haller, 2011
Montag, 11. Juli 2011

10. Konsequent linearisieren
Mobile Screens sind schmal. Verdammt schmal.
Daher:
- Mehrspaltige Layouts linearisieren.
Umdenken: Es gibt nur noch eine Spalte für Content.
vs.
10 Daniel Haller, 2011
Montag, 11. Juli 2011

11. Konsequent linearisieren
A%4%,(/&*(+#,%&-%+5#$%5&8.5$%"&.13&*("%&%88#0#%1$&$B.1&%4%"&
+%8("%&-#$B&<#50)#$5&.13&<#50)#$CD
„Biscuits“ werden wie „Klötzchen“ aufeinander gestapelt.
!"#$%&'()"&*(+#,%&-%+&.//,#0.$#(1&(10%2&")1&#1&.1'&*(+#,%&3%4#0%&+"(-5%"6&7./#3,'&
Layouts mit mehreren Spalten werden zur Pain in the Ass.
3%/,('&*(+#,%&-%+5#$%5&.0"(55&/,.$8("*5&9&3%4#0%5&)$#,#:#1;&<#50)#$5&+)#,3#1;&+,(0=5>
?(1$%1$&@1;"%3#%1$5&8(" <#50)#$5 7%13%"%3&*(+#,%&5#$%
*(+#,%&-%+5#$%
!"#$"%
&#'()#*(+,
9::
-#//"$01+,*#(,"%
-"#."%
2($)"*
3#4050678
:;%(4*(,)0:<($".=+>
-#)1<+?$
@++*"%
Quelle: netbiscuits
11 Daniel Haller, 2011
Montag, 11. Juli 2011

12. Linearisieren
Quelle:
http://www.spiegel.de/
http://m.spiegel.de/
12 Daniel Haller, 2011
Montag, 11. Juli 2011

13. Linearisieren
Quelle:
http://www.maggi.de/
http://wap.maggi.de/
13 Daniel Haller, 2011
Montag, 11. Juli 2011

14. Bandbreite beachten
Mobile != DSL
-
-
Geringe Bandbreite
Hohe Latenzen
Daher:
- Schwankende Dienstgüte
- Funklöcher - Weniger ist mehr
- Volumentarife
- etc. - Bilder sparsam verwenden
- Auf die Komprimierung achten
- Beim Design immer die
(geringe) Bandbreite beachten
14 Daniel Haller, 2011
Montag, 11. Juli 2011

15. Bandbreite beachten
Desktop vs. Mobile:
Spiegel Online (Desktop)*: 800kB
Ladezeiten:
- bei 300kB/Sek: 16.5 Sek.
- bei 50kB/Sek: 1m 8Sek.
* mit AdBlocker
15 Daniel Haller, 2011
Montag, 11. Juli 2011

16. Bandbreite beachten
Desktop vs. Mobile:
Spiegel Online (Mobile): 300kB
Ladezeiten:
- bei 300kB/Sek: 5.5 Sek
- 50kB/Sek: 41 Sek.
(ab 20 Sek. nur noch Bilder)
Empfehlung von netbiscuits:
Max. 35kB/Seite
16 Daniel Haller, 2011
Montag, 11. Juli 2011

17. Content verteilen
Vorsicht bei Microsites:
- Das Lightbox- oder PopUp-Pattern entfällt im
mobilen UI
- Weniger Content pro Seite
Daher:
- Stärkere Verteilung von Content auf
verschiedene Seiten
- Neue/andere Navigationsstrukturen notwendig
17 Daniel Haller, 2011
Montag, 11. Juli 2011

18. Content verteilen
„Eine“ Seite
(mit Lightboxen)
Quelle:
http://www.nescafe.de/3in1stix/
http://m.3in1stix.nescafe.de/
18 Daniel Haller, 2011
Montag, 11. Juli 2011

19. Content verteilen
Für mobile Version sind >10
Unterseiten notwendig
(bei gleichem Content wie der
Desktop-Version)!
Quelle:
http://www.nescafe.de/3in1stix/
http://m.3in1stix.nescafe.de/ 19 Daniel Haller, 2011
Montag, 11. Juli 2011

20. Tabellen anpassen
Tabellarische Inhalte sind kaum kompatibel zu
mobilen Displays.
Daher:
Umbau / Anpassungen
notwendig
(Layout, Informationsgehalt, etc.)
Beides unbenutzbar
Quelle: http://css-tricks.com/responsive-data-tables/ 20 Daniel Haller, 2011
Montag, 11. Juli 2011

21. Tabellen anpassen
Desktop: 4-spaltige Tabelle
Mobile: (einfache) Liste
Quelle:
http://www.maggi.de/
http://wap.maggi.de/
21 Daniel Haller, 2011
Montag, 11. Juli 2011

22. Tabellen anpassen
Desktop: 1 Tabelle, 4 Spalten
Quelle: Mobile: 4 Tabellen (auf 4 Seiten), 2 Spalten
http://www.nescafe.de/3in1stix/
http://m.3in1stix.nescafe.de/ 22 Daniel Haller, 2011
Montag, 11. Juli 2011

23. Tabellen anpassen
Alle Beispiele und Ideen von: http://css-tricks.com/responsive-data-tables/
23 Daniel Haller, 2011
Montag, 11. Juli 2011

24. Skalierbarkeit
- Grundproblem: Gerätebedingt extrem unterschiedliche
Auflösungen (200px - 1024px Breite)
- Skalierung nur bedingt möglich
(Grafiken verpixeln, Schriften müssen lesbar bleiben)
Daher:
- Anstelle pixelgenaues Design...
- besser Responsive Design
24 Daniel Haller, 2011
Montag, 11. Juli 2011

25. Skalierbarkeit
„Klassisches“ Responsive Design
http://www.webdesignerdepot.com/2011/05/big-vs-small-challenges-in-responsive-web-design/
http://www.alistapart.com/articles/responsive-web-design/
25 Daniel Haller, 2011
Montag, 11. Juli 2011

26. Skalierbarkeit
„Klassisches“ Responsive Design
http://www.webdesignerdepot.com/2011/05/big-vs-small-challenges-in-responsive-web-design/
http://www.alistapart.com/articles/responsive-web-design/
26 Daniel Haller, 2011
Montag, 11. Juli 2011

27. Skalierbarkeit
„Klassisches“ Responsive Design
http://www.webdesignerdepot.com/2011/05/big-vs-small-challenges-in-responsive-web-design/
http://www.alistapart.com/articles/responsive-web-design/
27 Daniel Haller, 2011
Montag, 11. Juli 2011

28. Skalierbarkeit
- Für netbiscuits: Design muss so gestaltet werden, dass es
mindestens in der Breite skalieren kann.
- Dabei helfen Imagesets, die ggf. eingesetzt werden können.
- Trotzdem: Platz für „Puffer“ einplanen!
Imageset
28 Daniel Haller, 2011
Montag, 11. Juli 2011

29. Happy coding!
29 Daniel Haller, 2011
Montag, 11. Juli 2011