Adaptive LayoutsMonster on Rails Jan. 2012MobileChristian Peters
Zweitag // Gründungsstory                                                           02.11.2011        Fluid Layouts?      ...
Zweitag // Gründungsstory                                             02.11.2011        Fluid Layouts?       Fluid Layouts...
Zweitag // Gründungsstory                                                                      02.11.2011        Fluid Lay...
Zweitag // Gründungsstory                                                      02.11.2011        Fluid Layouts?       Sub-...
Zweitag // Gründungsstory                                                                      02.11.2011        Fluid Lay...
Zweitag // Gründungsstory                                                                              02.11.2011        F...
Zweitag // Gründungsstory                           02.11.2011       Bauchgefühl:                                 Fluid = ...
Zweitag // Gründungsstory                           02.11.2011       Bauchgefühl:                                 Fluid = ...
Zweitag // Gründungsstory                           02.11.2011       Bauchgefühl:                                 Fluid = ...
Zweitag // Gründungsstory                                                                             02.11.2011       Her...
Zweitag // Gründungsstory                  02.11.2011       The Way to Go            Entwirf n fixe, aber       durchdachte...
Zweitag // Gründungsstory                                   02.11.2011       The Way to Go            Entwirf n fixe, aber ...
Zweitag // Gründungsstory                                                                02.11.2011        Tool-Unterstütz...
Zweitag // Gründungsstory                                                       02.11.2011        Tool-Unterstützung: Resp...
Zweitag // Gründungsstory                                    02.11.2011       Beispiel:       fashmob.com Produktseite    ...
Zweitag // Gründungsstory                   02.11.2011       Nachteil       der vorgestellten Lösung               Noch gr...
Zweitag // Gründungsstory                                                                                           02.11....
Nächste SlideShare
Wird geladen in …5
×

Adaptive Layouts - Monster on Rails Jan. 2012

595 Aufrufe

Veröffentlicht am

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

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
595
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Adaptive Layouts - Monster on Rails Jan. 2012

  1. 1. Adaptive LayoutsMonster on Rails Jan. 2012MobileChristian Peters
  2. 2. Zweitag // Gründungsstory 02.11.2011 Fluid Layouts? Prozente vs. Pixel Layouts mit Prozentangaben ermöglichen fließende Anpassung an Browser-Größe Fixed Grid: Pixelangaben Fluid Grid: ProzentangabenMonster on Rails // Adaptive Layouts 2 11.01.2012
  3. 3. Zweitag // Gründungsstory 02.11.2011 Fluid Layouts? Fluid Layouts: Vor- & Nachteile Mit fließender Adaption geht ein immenser Testaufwand einher. ❖ Vorteile ❖ Vollständige Ausnutzung des verfügbaren Raums ❖ Nur eine Layout-Spezifikation für alle Geräte ❖ Weniger Code ❖ Adaptiv zu jeglicher Fenster- Größe ❖ Beständig gute Lösung ggü. statistische Veränderung in Browser-GrößenMonster on Rails // Adaptive Layouts 3 11.01.2012
  4. 4. Zweitag // Gründungsstory 02.11.2011 Fluid Layouts? Fluid Layouts: Vor- & Nachteile Mit fließender Adaption geht ein immenser Testaufwand einher. ❖ Vorteile ❖ Nachteile ❖ Vollständige Ausnutzung des ❖ Jede Fenstergröße ist ein verfügbaren Raums Randfall ❖ Nur eine Layout-Spezifikation ❖ Immenser Testaufwand für alle Geräte ❖ Gleiches Layout für 240px ❖ Weniger Code und 1920px nicht sinnvoll ❖ Adaptiv zu jeglicher Fenster- ❖ Zusätzliche Maßnahmen Größe notwendig ❖ Beständig gute Lösung ggü. ❖ Keine einheitliche Lösung statistische Veränderung in für Sub-Pixel-Problem Browser-Größen ❖ Gefahr von brechenden LayoutsMonster on Rails // Adaptive Layouts 3 11.01.2012
  5. 5. Zweitag // Gründungsstory 02.11.2011 Fluid Layouts? Sub-Pixel Problem Dem Runden von Pixeln unterliegen zum Teil in Konflikt stehende Ziele. 100%: 50px 25% 25% 25% 25%Monster on Rails // Adaptive Layouts 4 11.01.2012
  6. 6. Zweitag // Gründungsstory 02.11.2011 Fluid Layouts? Sub-Pixel Problem Dem Runden von Pixeln unterliegen zum Teil in Konflikt stehende Ziele. 100%: 50px ❖ Ziele 1. Exakte Ausfüllung des Containers ❖ kein übriger Platz am Ende ❖ kein Umbruch des Inhalts 2. Aufeinander folgende Objekte sollten sich visuell berühren 25% 25% 25% 25% ❖ keine Lücke / Überschneidung 3. Objekte mit gleicher Breite sollten gleich viele Pixel einnehmen 4. Objektgrenzen sollten Pixel des Displays immer ausfüllen ❖ kein VerschwimmenMonster on Rails // Adaptive Layouts 4 11.01.2012
  7. 7. Zweitag // Gründungsstory 02.11.2011 Fluid Layouts? Sub-Pixel Problem Browser lösen das Sub-Pixel-Problem unterschiedlich; beim IE7 sind Umbrüche vorprogrammiert. ❖ Ziele 1. Exakte Ausfüllung des Containers ❖ kein übriger Platz am Ende ❖ kein Umbruch des Inhalts 2. Aufeinander folgende Objekte sollten sich visuell berühren ❖ keine Lücke / Überschneidung 3. Objekte mit gleicher Breite sollten http://ejohn.org/blog/sub- gleich viele Pixel einnehmen Opera 9, Safari 3: 2, 3, 4 pixel-problems-in-css/ 4. Objektgrenzen sollten Pixel des IE 6, IE 7: 2, 3, 4 Displays immer ausfüllen Firefox 2: 1, 2, 4 Firefox 3: 1, 2, 4 ❖ kein VerschwimmenMonster on Rails // Adaptive Layouts 5 11.01.2012
  8. 8. Zweitag // Gründungsstory 02.11.2011 Bauchgefühl: Fluid = P.I.T.A.Monster on Rails // Adaptive Layouts 6 11.01.2012
  9. 9. Zweitag // Gründungsstory 02.11.2011 Bauchgefühl: Fluid = P.I.T.A. Kopfgefühl:Monster on Rails // Adaptive Layouts 6 11.01.2012
  10. 10. Zweitag // Gründungsstory 02.11.2011 Bauchgefühl: Fluid = P.I.T.A. Kopfgefühl: Fluid ist höchstens eine Lösung für triviale LayoutsMonster on Rails // Adaptive Layouts 6 11.01.2012
  11. 11. Zweitag // Gründungsstory 02.11.2011 Herausforderungen Web-Applikationen fordern detaillierte Überlegungen zur Adaptivität; Fluid Grids greifen zu kurz. 240px 2560px 2560pxMonster on Rails // Adaptive Layouts 7 11.01.2012
  12. 12. Zweitag // Gründungsstory 02.11.2011 The Way to Go Entwirf n fixe, aber durchdachte & geteste LayoutsMonster on Rails // Adaptive Layouts 8 11.01.2012
  13. 13. Zweitag // Gründungsstory 02.11.2011 The Way to Go Entwirf n fixe, aber durchdachte & geteste Layouts Die Anzahl n ist eine Budgetfrage.Monster on Rails // Adaptive Layouts 8 11.01.2012
  14. 14. Zweitag // Gründungsstory 02.11.2011 Tool-Unterstützung: Responsive Fixed Grids Lucid Grid Lucid Grid ist ein fixes Grid, das sich in Media Queries reinitialisieren lässt. ❖ Grid Reinitialisierung in Media Queries /* Full width grid */ @include grid-init; .container { @include container; } .sidebar { @include column(3); } .main { @include column(9); } /* Miniature grid within media query */ @media screen and (max-width: 480px) { // redeclare one or more variables $grid-width: 480px; $grid-columns: 6; @include grid-reinit; .container { @include container; } .sidebar { @include column(2); } .main { @include column(4); } }Monster on Rails // Adaptive Layouts 9 11.01.2012
  15. 15. Zweitag // Gründungsstory 02.11.2011 Tool-Unterstützung: Responsive Fixed Grids Crispy Grid Crispy Grid unterstützt verschiedene Grids für verschiedene Geräte. ❖ Multi-Device Konfiguration $devices: desktop, tablet, handheld-640, handheld-320 $grid-column-widths: 30px, 30px, 20px, 20px $grid-gutter-widths: 10px, 10px, 5px, 5px $grid-columns: 30, 25, 25, 13 ❖ Angabe des Geräts in Media Queries /* Full width grid */ .container { @include grid-container; } .sidebar { @include column(3); } .main { @include column(9); } /* Smaller grid within media query */ @media screen and (max-width: 640px) { .container { @include grid-container($device: handheld-640); } .sidebar { @include column(2, $device: handheld-640); } .main { @include column(4, $device: handheld-640)); } }Monster on Rails // Adaptive Layouts 10 11.01.2012
  16. 16. Zweitag // Gründungsstory 02.11.2011 Beispiel: fashmob.com Produktseite https://github.com/zweitag/fashmob_poc/commit/6297aMonster on Rails // Adaptive Layouts 11 11.01.2012
  17. 17. Zweitag // Gründungsstory 02.11.2011 Nachteil der vorgestellten Lösung Noch größere CSS-Dateien!Monster on Rails // Adaptive Layouts 12 11.01.2012
  18. 18. Zweitag // Gründungsstory 02.11.2011 Idee zur Reduzierung von CSS ❖ 1 Stylesheet pro Media <link rel="stylesheet" media="screen and (max-width: 479px)" href="main-320.css" /> <link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 949px)" href="main-480.css" /> <link rel="stylesheet" media="screen and (min-width: 950px)" href="main-950.css" /> ❖ Lokale Verzweigung des Layouts für die Stylesheets $device: handheld-320 $device: handheld-480 $device: handheld-950 $grid-column-width: 20px $grid-column-width: 20px $grid-column-width: 30px $grid-columns: 13 $grid-columns: 19 $grid-columns: 25 @import main @import main @import main #product-recommendations @if $device == handheld-320 display: none @else background: $grey @if $device == handheld-950 or $ie < 9 +column(6) @else if $device == handheld-480 clear: left width: 100%Monster on Rails // Adaptive Layouts 13 11.01.2012

×