Netbiscuits - 9 Tipps
29
Daniel Haller, 2011 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. Montag, 11. Juli 2011
-
Upload
daniel-haller -
Category
Technology
-
view
1.159 -
download
0
description
Ein paar Tipps, die einem den Einstieg und das Leben mit der Netbiscuits-Plattform erleichtern können.
Transcript of Netbiscuits - 9 Tipps
Daniel Haller, 2011
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.
Montag, 11. Juli 2011
Daniel Haller, 20112
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 :-)
Montag, 11. Juli 2011
Daniel Haller, 2011
Read the f**** Manual.
3
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.
Montag, 11. Juli 2011
Daniel Haller, 2011
Keep it simple and stupid.
4
(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!
Montag, 11. Juli 2011
Daniel Haller, 20115
So sieht KISS aus...
Quelle: http://www.netbiscuits.com/biscuitml-reference
Montag, 11. Juli 2011
Daniel Haller, 20116
Quelle: http://www.netbiscuits.com/biscuitml-reference
So sieht KISS aus...
Montag, 11. Juli 2011
Daniel Haller, 2011
Keine iPhone-Apps.
7
(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.
Montag, 11. Juli 2011
Daniel Haller, 20118
Quelle: http://www.netbiscuits.com/customers
Showcase... (sieht echt nicht nach iPhone aus)
Montag, 11. Juli 2011
Daniel Haller, 20119
BiscuitML-Patterns beachten
Quelle: http://www.netbiscuits.com/biscuitml-reference
Montag, 11. Juli 2011
Daniel Haller, 2011
Konsequent linearisieren
10
Mobile Screens sind schmal. Verdammt schmal.
Daher:
- Mehrspaltige Layouts linearisieren. Umdenken: Es gibt nur noch eine Spalte für Content.
vs.
Montag, 11. Juli 2011
Daniel Haller, 201111
!"#$%&'()"&*(+#,%&-%+&.//,#0.$#(1&(10%2&")1&.1'&*(+#,%&3%4#0%&+"(-5%"6&7./#3,'&3%/,('&*(+#,%&-%+5#$%5&.0"(55&/,.$8("*5&9&3%4#0%5&)$#,#:#1;&<#50)#$5&+)#,3#1;&+,(0=5>
<#50)#$5
!"#$"%
&#'()#*(+,
-"#."%
-#//"$01+,*#(,"%
2($)"*
3#4050678
9::
:;%(4*(,)0:<($".=+>
-#)1<+?$
@++*"%
7%13%"%3&*(+#,%&5#$%?(1$%1$&@1;"%3#%1$5&8("*(+#,%&-%+5#$%
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. Layouts mit mehreren Spalten werden zur Pain in the Ass.
Konsequent linearisieren
Quelle: netbiscuits
Montag, 11. Juli 2011
Daniel Haller, 201112
Linearisieren
Quelle: http://www.spiegel.de/http://m.spiegel.de/
Montag, 11. Juli 2011
Daniel Haller, 201113
Linearisieren
Quelle: http://www.maggi.de/http://wap.maggi.de/
Montag, 11. Juli 2011
Daniel Haller, 201114
Bandbreite beachten
Mobile != DSL- Geringe Bandbreite- Hohe Latenzen- Schwankende Dienstgüte- Funklöcher- Volumentarife- etc.
Daher:
-Weniger ist mehr- Bilder sparsam verwenden- Auf die Komprimierung achten- Beim Design immer die
(geringe) Bandbreite beachten
Montag, 11. Juli 2011
Daniel Haller, 201115
Desktop vs. Mobile:
Spiegel Online (Desktop)*: 800kB
Ladezeiten:- bei 300kB/Sek: 16.5 Sek.- bei 50kB/Sek: 1m 8Sek.
* mit AdBlocker
Bandbreite beachten
Montag, 11. Juli 2011
Daniel Haller, 201116
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
Bandbreite beachten
Montag, 11. Juli 2011
Daniel Haller, 201117
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
Content verteilen
Montag, 11. Juli 2011
Daniel Haller, 201118
„Eine“ Seite(mit Lightboxen)
Content verteilen
Quelle: http://www.nescafe.de/3in1stix/http://m.3in1stix.nescafe.de/
Montag, 11. Juli 2011
Daniel Haller, 201119
Für mobile Version sind >10 Unterseiten notwendig (bei gleichem Content wie der Desktop-Version)!
Content verteilen
Quelle: http://www.nescafe.de/3in1stix/http://m.3in1stix.nescafe.de/
Montag, 11. Juli 2011
Daniel Haller, 2011
Tabellarische Inhalte sind kaum kompatibel zu mobilen Displays.
Daher:
Umbau / Anpassungen notwendig (Layout, Informationsgehalt, etc.)
20
Tabellen anpassen
Beides unbenutzbar
Quelle: http://css-tricks.com/responsive-data-tables/
Montag, 11. Juli 2011
Daniel Haller, 201121
Tabellen anpassen
Quelle: http://www.maggi.de/http://wap.maggi.de/
Desktop: 4-spaltige Tabelle
Mobile: (einfache) Liste
Montag, 11. Juli 2011
Daniel Haller, 201122
Desktop: 1 Tabelle, 4 Spalten
Mobile: 4 Tabellen (auf 4 Seiten), 2 SpaltenQuelle: http://www.nescafe.de/3in1stix/http://m.3in1stix.nescafe.de/
Tabellen anpassen
Montag, 11. Juli 2011
Daniel Haller, 201123
Alle Beispiele und Ideen von: http://css-tricks.com/responsive-data-tables/
Tabellen anpassen
Montag, 11. Juli 2011
Daniel Haller, 201124
- 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
Skalierbarkeit
Montag, 11. Juli 2011
Daniel Haller, 2011
„Klassisches“ Responsive Design
25
Skalierbarkeit
http://www.webdesignerdepot.com/2011/05/big-vs-small-challenges-in-responsive-web-design/http://www.alistapart.com/articles/responsive-web-design/
Montag, 11. Juli 2011
Daniel Haller, 201126
http://www.webdesignerdepot.com/2011/05/big-vs-small-challenges-in-responsive-web-design/http://www.alistapart.com/articles/responsive-web-design/
„Klassisches“ Responsive Design
Skalierbarkeit
Montag, 11. Juli 2011
Daniel Haller, 2011
„Klassisches“ Responsive Design
27
http://www.webdesignerdepot.com/2011/05/big-vs-small-challenges-in-responsive-web-design/http://www.alistapart.com/articles/responsive-web-design/
Skalierbarkeit
Montag, 11. Juli 2011
Daniel Haller, 201128
- 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
Skalierbarkeit
Montag, 11. Juli 2011
Daniel Haller, 201129
Happy coding!
Montag, 11. Juli 2011
