SlideShare ist ein Scribd-Unternehmen logo
1 von 29
Downloaden Sie, um offline zu lesen
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
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
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
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
So sieht KISS aus...




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




   Quelle: http://www.netbiscuits.com/biscuitml-reference
                                                            6   Daniel Haller, 2011
Montag, 11. Juli 2011
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
Showcase... (sieht echt nicht nach iPhone aus)




   Quelle: http://www.netbiscuits.com/customers
                                                   8   Daniel Haller, 2011
Montag, 11. Juli 2011
BiscuitML-Patterns beachten




   Quelle: http://www.netbiscuits.com/biscuitml-reference
                                                            9   Daniel Haller, 2011
Montag, 11. Juli 2011
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
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
Linearisieren




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



                           12                            Daniel Haller, 2011
Montag, 11. Juli 2011
Linearisieren




          Quelle:
          http://www.maggi.de/
          http://wap.maggi.de/
                                 13   Daniel Haller, 2011
Montag, 11. Juli 2011
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
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
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
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
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
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
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
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
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
Tabellen anpassen




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

                                                                     23          Daniel Haller, 2011
Montag, 11. Juli 2011
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
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
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
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
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
Happy coding!




                              29        Daniel Haller, 2011
Montag, 11. Juli 2011

Weitere ähnliche Inhalte

Andere mochten auch

Immobilienaktien bleiben auch in Krisenzeiten stets handelbar
Immobilienaktien bleiben auch in Krisenzeiten stets handelbarImmobilienaktien bleiben auch in Krisenzeiten stets handelbar
Immobilienaktien bleiben auch in Krisenzeiten stets handelbarEllwanger & Geiger Privatbankiers
 
INSTITUTIONELLES IMMOBILIENGESCHAFT UND DAS GEWISSE EXTRA MEHR.
INSTITUTIONELLES IMMOBILIENGESCHAFT UND DAS GEWISSE EXTRA MEHR.INSTITUTIONELLES IMMOBILIENGESCHAFT UND DAS GEWISSE EXTRA MEHR.
INSTITUTIONELLES IMMOBILIENGESCHAFT UND DAS GEWISSE EXTRA MEHR.Ellwanger & Geiger Privatbankiers
 
DIE MARKTMEINUNG AUS STUTTGART: Stimmung an den Aktienmärkten bleibt schlecht
DIE MARKTMEINUNG AUS STUTTGART: Stimmung an den Aktienmärkten bleibt schlechtDIE MARKTMEINUNG AUS STUTTGART: Stimmung an den Aktienmärkten bleibt schlecht
DIE MARKTMEINUNG AUS STUTTGART: Stimmung an den Aktienmärkten bleibt schlechtEllwanger & Geiger Privatbankiers
 
THAK Workshop »Kunst und Kommunikation im Social Web« am 09. April 2014
THAK Workshop »Kunst und Kommunikation im Social Web« am 09. April 2014THAK Workshop »Kunst und Kommunikation im Social Web« am 09. April 2014
THAK Workshop »Kunst und Kommunikation im Social Web« am 09. April 2014Frank Koebsch
 
Netzneutralität - Eine Einführung in das Thema
Netzneutralität - Eine Einführung in das ThemaNetzneutralität - Eine Einführung in das Thema
Netzneutralität - Eine Einführung in das ThemaDaniel Haller
 
Social Media & Rekrutierung - Hype oder Standard (7. April Schaffhausen)
Social Media & Rekrutierung - Hype oder Standard (7. April Schaffhausen)Social Media & Rekrutierung - Hype oder Standard (7. April Schaffhausen)
Social Media & Rekrutierung - Hype oder Standard (7. April Schaffhausen)Yves Maeder
 
Unsere Kunst. Ihr Wert.
Unsere Kunst. Ihr Wert.Unsere Kunst. Ihr Wert.
Unsere Kunst. Ihr Wert.Frank Koebsch
 
Kommentar zum Immobilienaktienmarkt: Immobilienaktien trotz guter Unternehmen...
Kommentar zum Immobilienaktienmarkt: Immobilienaktien trotz guter Unternehmen...Kommentar zum Immobilienaktienmarkt: Immobilienaktien trotz guter Unternehmen...
Kommentar zum Immobilienaktienmarkt: Immobilienaktien trotz guter Unternehmen...Ellwanger & Geiger Privatbankiers
 
Antifaschismus in Deutschland
Antifaschismus in DeutschlandAntifaschismus in Deutschland
Antifaschismus in DeutschlandPatrick Balk
 
Wave 6 - Social Business am Prüfstand - Österreich
Wave 6 - Social Business am Prüfstand - ÖsterreichWave 6 - Social Business am Prüfstand - Österreich
Wave 6 - Social Business am Prüfstand - ÖsterreichSebastian Watschinger
 
Pflegerentenversicherung: Die finanzielle Absicherung für den Pflegefall im B...
Pflegerentenversicherung: Die finanzielle Absicherung für den Pflegefall im B...Pflegerentenversicherung: Die finanzielle Absicherung für den Pflegefall im B...
Pflegerentenversicherung: Die finanzielle Absicherung für den Pflegefall im B...Ellwanger & Geiger Privatbankiers
 

Andere mochten auch (15)

Immobilienaktien bleiben auch in Krisenzeiten stets handelbar
Immobilienaktien bleiben auch in Krisenzeiten stets handelbarImmobilienaktien bleiben auch in Krisenzeiten stets handelbar
Immobilienaktien bleiben auch in Krisenzeiten stets handelbar
 
INSTITUTIONELLES IMMOBILIENGESCHAFT UND DAS GEWISSE EXTRA MEHR.
INSTITUTIONELLES IMMOBILIENGESCHAFT UND DAS GEWISSE EXTRA MEHR.INSTITUTIONELLES IMMOBILIENGESCHAFT UND DAS GEWISSE EXTRA MEHR.
INSTITUTIONELLES IMMOBILIENGESCHAFT UND DAS GEWISSE EXTRA MEHR.
 
DIE MARKTMEINUNG AUS STUTTGART: Stimmung an den Aktienmärkten bleibt schlecht
DIE MARKTMEINUNG AUS STUTTGART: Stimmung an den Aktienmärkten bleibt schlechtDIE MARKTMEINUNG AUS STUTTGART: Stimmung an den Aktienmärkten bleibt schlecht
DIE MARKTMEINUNG AUS STUTTGART: Stimmung an den Aktienmärkten bleibt schlecht
 
Crowdsourcing Summit: Ideenreichtum & Innovationen aus der Crowd
Crowdsourcing Summit: Ideenreichtum & Innovationen aus der CrowdCrowdsourcing Summit: Ideenreichtum & Innovationen aus der Crowd
Crowdsourcing Summit: Ideenreichtum & Innovationen aus der Crowd
 
THAK Workshop »Kunst und Kommunikation im Social Web« am 09. April 2014
THAK Workshop »Kunst und Kommunikation im Social Web« am 09. April 2014THAK Workshop »Kunst und Kommunikation im Social Web« am 09. April 2014
THAK Workshop »Kunst und Kommunikation im Social Web« am 09. April 2014
 
Netzneutralität - Eine Einführung in das Thema
Netzneutralität - Eine Einführung in das ThemaNetzneutralität - Eine Einführung in das Thema
Netzneutralität - Eine Einführung in das Thema
 
Social Media & Rekrutierung - Hype oder Standard (7. April Schaffhausen)
Social Media & Rekrutierung - Hype oder Standard (7. April Schaffhausen)Social Media & Rekrutierung - Hype oder Standard (7. April Schaffhausen)
Social Media & Rekrutierung - Hype oder Standard (7. April Schaffhausen)
 
Unsere Kunst. Ihr Wert.
Unsere Kunst. Ihr Wert.Unsere Kunst. Ihr Wert.
Unsere Kunst. Ihr Wert.
 
Kommentar zum Immobilienaktienmarkt: Immobilienaktien trotz guter Unternehmen...
Kommentar zum Immobilienaktienmarkt: Immobilienaktien trotz guter Unternehmen...Kommentar zum Immobilienaktienmarkt: Immobilienaktien trotz guter Unternehmen...
Kommentar zum Immobilienaktienmarkt: Immobilienaktien trotz guter Unternehmen...
 
Antifaschismus in Deutschland
Antifaschismus in DeutschlandAntifaschismus in Deutschland
Antifaschismus in Deutschland
 
DER MARKTBERICHT MÜNCHEN, 1. - 3. Quartal 2015
DER MARKTBERICHT MÜNCHEN, 1. - 3. Quartal 2015DER MARKTBERICHT MÜNCHEN, 1. - 3. Quartal 2015
DER MARKTBERICHT MÜNCHEN, 1. - 3. Quartal 2015
 
Wave 6 - Social Business am Prüfstand - Österreich
Wave 6 - Social Business am Prüfstand - ÖsterreichWave 6 - Social Business am Prüfstand - Österreich
Wave 6 - Social Business am Prüfstand - Österreich
 
Presseinformation: Kein Werterhalt ohne Risiken
Presseinformation: Kein Werterhalt ohne RisikenPresseinformation: Kein Werterhalt ohne Risiken
Presseinformation: Kein Werterhalt ohne Risiken
 
Ccss
CcssCcss
Ccss
 
Pflegerentenversicherung: Die finanzielle Absicherung für den Pflegefall im B...
Pflegerentenversicherung: Die finanzielle Absicherung für den Pflegefall im B...Pflegerentenversicherung: Die finanzielle Absicherung für den Pflegefall im B...
Pflegerentenversicherung: Die finanzielle Absicherung für den Pflegefall im B...
 

Mehr von Daniel Haller

Scotchklub / Whisky Basics
Scotchklub / Whisky BasicsScotchklub / Whisky Basics
Scotchklub / Whisky BasicsDaniel Haller
 
HTML5 für Einsteiger, Designer und Projektmanager
HTML5 für Einsteiger, Designer und ProjektmanagerHTML5 für Einsteiger, Designer und Projektmanager
HTML5 für Einsteiger, Designer und ProjektmanagerDaniel Haller
 
Kanban: Keep it simple
Kanban: Keep it simpleKanban: Keep it simple
Kanban: Keep it simpleDaniel Haller
 
Web Services leicht gemacht
Web Services leicht gemachtWeb Services leicht gemacht
Web Services leicht gemachtDaniel Haller
 
Mobile Strategy / Apps, WebApps, HybridApps
Mobile Strategy / Apps, WebApps, HybridAppsMobile Strategy / Apps, WebApps, HybridApps
Mobile Strategy / Apps, WebApps, HybridAppsDaniel Haller
 

Mehr von Daniel Haller (6)

Scotchklub / Whisky Basics
Scotchklub / Whisky BasicsScotchklub / Whisky Basics
Scotchklub / Whisky Basics
 
HTML5 für Einsteiger, Designer und Projektmanager
HTML5 für Einsteiger, Designer und ProjektmanagerHTML5 für Einsteiger, Designer und Projektmanager
HTML5 für Einsteiger, Designer und Projektmanager
 
Kanban: Keep it simple
Kanban: Keep it simpleKanban: Keep it simple
Kanban: Keep it simple
 
Web Services leicht gemacht
Web Services leicht gemachtWeb Services leicht gemacht
Web Services leicht gemacht
 
Kanban HowTo
Kanban HowToKanban HowTo
Kanban HowTo
 
Mobile Strategy / Apps, WebApps, HybridApps
Mobile Strategy / Apps, WebApps, HybridAppsMobile Strategy / Apps, WebApps, HybridApps
Mobile Strategy / Apps, WebApps, HybridApps
 

Netbiscuits - 9 Tipps

  • 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