Netbiscuits - 9 Tipps

netbiscuits:
10 9 Tipps.

Randnotiz: Dies ist keine ofﬁzielle 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

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

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.



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!


So sieht KISS aus...

Quelle: http://www.netbiscuits.com/biscuitml-reference

So sieht KISS aus...


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.



Showcase... (sieht echt nicht nach iPhone aus)

Quelle: http://www.netbiscuits.com/customers

BiscuitML-Patterns beachten


Konsequent linearisieren
Mobile Screens sind schmal. Verdammt schmal.

Daher:

- Mehrspaltige Layouts linearisieren.
Umdenken: Es gibt nur noch eine Spalte für Content.

vs.



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


Linearisieren

Quelle:
http://www.spiegel.de/
http://m.spiegel.de/


Linearisieren

Quelle:
http://www.maggi.de/
http://wap.maggi.de/

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


Bandbreite beachten

Desktop vs. Mobile:

Spiegel Online (Desktop)*: 800kB

Ladezeiten:
- bei 300kB/Sek: 16.5 Sek.
- bei 50kB/Sek: 1m 8Sek.

* mit AdBlocker

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


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


Content verteilen
„Eine“ Seite
(mit Lightboxen)

Quelle:
http://www.nescafe.de/3in1stix/
http://m.3in1stix.nescafe.de/

Content verteilen

Für mobile Version sind >10
Unterseiten notwendig
(bei gleichem Content wie der
Desktop-Version)!

Quelle:
http://m.3in1stix.nescafe.de/ 19 Daniel Haller, 2011

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

Tabellen anpassen

Desktop: 4-spaltige Tabelle

Mobile: (einfache) Liste

Quelle:
http://www.maggi.de/
http://wap.maggi.de/

Tabellen anpassen

Desktop: 1 Tabelle, 4 Spalten

Quelle: Mobile: 4 Tabellen (auf 4 Seiten), 2 Spalten
http://m.3in1stix.nescafe.de/ 22 Daniel Haller, 2011

Tabellen anpassen

Alle Beispiele und Ideen von: http://css-tricks.com/responsive-data-tables/


Skalierbarkeit

- Grundproblem: Gerätebedingt extrem unterschiedliche
Auﬂösungen (200px - 1024px Breite)
- Skalierung nur bedingt möglich
(Graﬁken verpixeln, Schriften müssen lesbar bleiben)

Daher:

- Anstelle pixelgenaues Design...
- besser Responsive Design


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/

Skalierbarkeit




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


Happy coding!


Netbiscuits - 9 Tipps

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (15)

Más de Daniel Haller

Más de Daniel Haller (6)

Netbiscuits - 9 Tipps