Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

639 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

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

×