Netbiscuits - 9 Tipps

1.361 Aufrufe

Veröffentlicht am

Ein paar Tipps, die einem den Einstieg und das Leben mit der Netbiscuits-Plattform erleichtern können.

Veröffentlicht in: Technologie, Business
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.361
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1
Aktionen
Geteilt
0
Downloads
6
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Netbiscuits - 9 Tipps

  1. 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, 2011Montag, 11. Juli 2011
  2. 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, 2011Montag, 11. Juli 2011
  3. 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, 2011Montag, 11. Juli 2011
  4. 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, 2011Montag, 11. Juli 2011
  5. 5. So sieht KISS aus... Quelle: http://www.netbiscuits.com/biscuitml-reference 5 Daniel Haller, 2011Montag, 11. Juli 2011
  6. 6. So sieht KISS aus... Quelle: http://www.netbiscuits.com/biscuitml-reference 6 Daniel Haller, 2011Montag, 11. Juli 2011
  7. 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, 2011Montag, 11. Juli 2011
  8. 8. Showcase... (sieht echt nicht nach iPhone aus) Quelle: http://www.netbiscuits.com/customers 8 Daniel Haller, 2011Montag, 11. Juli 2011
  9. 9. BiscuitML-Patterns beachten Quelle: http://www.netbiscuits.com/biscuitml-reference 9 Daniel Haller, 2011Montag, 11. Juli 2011
  10. 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, 2011Montag, 11. Juli 2011
  11. 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, 2011Montag, 11. Juli 2011
  12. 12. Linearisieren Quelle: http://www.spiegel.de/ http://m.spiegel.de/ 12 Daniel Haller, 2011Montag, 11. Juli 2011
  13. 13. Linearisieren Quelle: http://www.maggi.de/ http://wap.maggi.de/ 13 Daniel Haller, 2011Montag, 11. Juli 2011
  14. 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, 2011Montag, 11. Juli 2011
  15. 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, 2011Montag, 11. Juli 2011
  16. 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, 2011Montag, 11. Juli 2011
  17. 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, 2011Montag, 11. Juli 2011
  18. 18. Content verteilen „Eine“ Seite (mit Lightboxen) Quelle: http://www.nescafe.de/3in1stix/ http://m.3in1stix.nescafe.de/ 18 Daniel Haller, 2011Montag, 11. Juli 2011
  19. 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, 2011Montag, 11. Juli 2011
  20. 20. Tabellen anpassen Tabellarische Inhalte sind kaum kompatibel zu mobilen Displays. Daher: Umbau / Anpassungen notwendig (Layout, Informationsgehalt, etc.) Beides unbenutzbarQuelle: http://css-tricks.com/responsive-data-tables/ 20 Daniel Haller, 2011Montag, 11. Juli 2011
  21. 21. Tabellen anpassen Desktop: 4-spaltige Tabelle Mobile: (einfache) Liste Quelle: http://www.maggi.de/ http://wap.maggi.de/ 21 Daniel Haller, 2011Montag, 11. Juli 2011
  22. 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, 2011Montag, 11. Juli 2011
  23. 23. Tabellen anpassen Alle Beispiele und Ideen von: http://css-tricks.com/responsive-data-tables/ 23 Daniel Haller, 2011Montag, 11. Juli 2011
  24. 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, 2011Montag, 11. Juli 2011
  25. 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, 2011Montag, 11. Juli 2011
  26. 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, 2011Montag, 11. Juli 2011
  27. 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, 2011Montag, 11. Juli 2011
  28. 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, 2011Montag, 11. Juli 2011
  29. 29. Happy coding! 29 Daniel Haller, 2011Montag, 11. Juli 2011

×