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.
RESPONSIVE CONTAOTeil 1: Layout-Builder und mobile SeitenlayoutsThomas Weitzel think-contao.dePeter Müller pmueller.de道10....
think-contao.depmueller.deWer wir sind
Was wir in Teil 1 vorhaben31. Responsive Webdesign und Contao2. Das CSS-Framework von Contao 33. Der Layout-Builder (mit H...
Die Entwicklung des Webdesign – Übersichtab 1996 Layouten mit HTML-Tabellenab 2001 Webstandards: Designing with CSSab 2006...
2010: Responsive Web Design – der Artikelalistapart.com/article/responsive-web-design
2011: Responsive Web Design – das Buch RWD ursprünglich Fluid Grid-Layout Flexible Images Media Queries Beispielsites...
twitter.com/Malarkey/status/113221032634093569
Begriffschaos: Zeldman definiert… any approach that deliverselegant visual experiencesregardless of the size of theusers d...
Responsive Webdesign = 1x HTML1xHTMLCSSCSSCSS 1x HTML für alle diverse CSS Anpassungen Grundprinzipien Kein starres La...
One size fits all.Meistens.Responsive Webdesign = 1x HTML
Das bietet Contao 3Contao 3Layout-BuilderMobileSeiten-layoutsResponsiveGridResponsive
Backend und Layout-BuilderDas CSS-Framework
Das CSS-Framework im Backend
Das CSS-Framework – die DateienKomponente Pfad und DateinameLayout-Builder (»Holy Grail«)fe_pageassets/contao/css/layout.c...
Der (responsive) Layout-Builder HTML fe_page setzt Meta-Viewport-Tag CSS: assets/contao/css/layout.css1. Standardize s...
Reihenfolge im Quelltext und am BildschirmDer Holy Grail: Einführung
Quelltext: Das Wichtigste zuerst#container umschließt die drei Spalten#footer#header#main#left#right123
Bildschirm: Das Wichtigste in der Mitte#container umschließt die drei Spalten#footer clear:both#header#mainwidth:100%#left...
Lösung: Der Holy Grail Artikel "In Search of the Holy Grail" Matthew Levine im Januar 2006 alistapart.com/article/holyg...
Schritt für Schritt zum heiligen GralDer Holy Grail im Detail
Schritt 1: Der Container#container#footer#headerpadding-left240pxpadding-right240px
Schritt 2: Die drei Inhaltspalten#container umschließt die drei Spalten#footer#header#mainfloat:leftposition:relativewidth...
Schritt 3: Warum springt #left nach oben?#container umschließt die drei Spalten#footer#header#mainwidth:100%#leftfloat:lef...
Schritt 3: Die Ausgangsposition#container umschließt die drei Spalten#footer#header#mainfloat:leftposition:relativewidth:1...
Schritt 3: Die linke Spalte, Teil 1#container umschließt die drei Spalten#footer#header#mainwidth:100%#leftfloat:leftposit...
Schritt 4: Die linke Spalte, Teil 2#container umschließt die drei Spalten#footer#header#mainwidth:100%#leftfloat:leftposit...
Schritt 5: Die rechte Spalte#container umschließt die drei Spalten#footer#header#mainwidth:100%#leftmargin-left: -100%widt...
Der Holy Grail im Überblick#container umschließt die drei Spalten#footer#header#mainfloat:leftposition:relativewidth:100%#...
Das Fazit zum Holy Grail Ziel Inhalt im Quelltext zuerst Inhalt am Bildschirm als mittlere Spalte Methoden negativer ...
Holy Grail < drei Spalten
Contao: zweispaltig, Sidebar rechts#container umschließt die beiden Spalten#footer#header#mainfloat: leftposition:relative...
Contao: zweispaltig, Sidebar links#container umschließt die beiden Spalten#footer#header#mainfloat: leftposition:relativew...
Contao: einspaltig#container umschließt #main#footer#header#mainfloat: leftposition:relativewidth:100%
Auf kleinen Bildschirmen kein Holy GrailDer Layout-Builder < 768px
Der Layout-Builder >767px: Mit Holy Grail
Der Layout-Builder wird responsive/* Viewport < 768px: Display all columns underneath each other */@media (max-width:767px...
Der Layout-Builder < 768px: ohne Holy Grail
Der Layout-Builder – Zusammenfassung Layout Normal: Mehrspaltig, feste Breite 960px plus evtl. 2x10px padding Nachteil:...
"RESS" ist bei Contao schon mit drin...Seitenlayouts für mobile Seiten
„RESS“: RESponsive plus Serverside HTML unterschiedlich andere Frontend-Module andere Inhalte diverse CSS-Anpassungen...
Seitenlayout für mobile Seiten Spezielle Seitenlayouts für mobile Seiten Zuerst ein spezielles Seitenlayout erstellen D...
UA-Sniffing: Wie Contao mobile Geräte erkenntsystem/config/agents.php
Beispiel: Button "Jetzt anrufen"<a href:“tel:004924146361877“>Jetzt anrufen!</a>
Fazit: Responsive Contao1. Layout-Builder ermöglicht responsive Webdesign basiert auf "Holy Grail" Viewport <768px – ein...
Kurze Pause.Danach gehts weiter mit Teil 2"Das Contao Responsive Grid"
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Nächste SlideShare
Wird geladen in …5
×

Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1

16.728 Aufrufe

Veröffentlicht am

In Teil 1 der Präsentation "Responsive Contao" stellen Peter Müller und Thomas Weitzel den Layout-Builder (mit Holy Grail) und die mobilen Seitenlayouts vor.

In Teil 2 folgt das Contao Responsive Grid. Im Workshop wurde Contao in der Version 3.0.6 verwendet.

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

Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1

  1. 1. RESPONSIVE CONTAOTeil 1: Layout-Builder und mobile SeitenlayoutsThomas Weitzel think-contao.dePeter Müller pmueller.de道10. Mai 2013von 9.00 bis 10.00 Uhr
  2. 2. think-contao.depmueller.deWer wir sind
  3. 3. Was wir in Teil 1 vorhaben31. Responsive Webdesign und Contao2. Das CSS-Framework von Contao 33. Der Layout-Builder (mit Holy Grail)4. Mobile Seitenlayouts6. FazitDas Contao Responsive Grid wird in Teil 2 vorgestellt
  4. 4. Die Entwicklung des Webdesign – Übersichtab 1996 Layouten mit HTML-Tabellenab 2001 Webstandards: Designing with CSSab 2006 CSS-Layouts werden normalab 2008 CSS-Grid-Frameworks (960.gs & Co)ab 2010 »responsive« und »mobile«4
  5. 5. 2010: Responsive Web Design – der Artikelalistapart.com/article/responsive-web-design
  6. 6. 2011: Responsive Web Design – das Buch RWD ursprünglich Fluid Grid-Layout Flexible Images Media Queries Beispielsites responsivewebdesign.com/robot/ bostonglobe.comabookapart.com/products/responsive-web-design
  7. 7. twitter.com/Malarkey/status/113221032634093569
  8. 8. Begriffschaos: Zeldman definiert… any approach that deliverselegant visual experiencesregardless of the size of theusers display and thelimitations or capabilities of thedevice.zeldman.com/2011/07/06/responsive-design-i-dont-think-that-word-means-what-you-think-it-means/
  9. 9. Responsive Webdesign = 1x HTML1xHTMLCSSCSSCSS 1x HTML für alle diverse CSS Anpassungen Grundprinzipien Kein starres Layout Flexible Images Media Queries potenzielle Probleme Performance Anordnung des Quellcode Inhaltsmenge
  10. 10. One size fits all.Meistens.Responsive Webdesign = 1x HTML
  11. 11. Das bietet Contao 3Contao 3Layout-BuilderMobileSeiten-layoutsResponsiveGridResponsive
  12. 12. Backend und Layout-BuilderDas CSS-Framework
  13. 13. Das CSS-Framework im Backend
  14. 14. Das CSS-Framework – die DateienKomponente Pfad und DateinameLayout-Builder (»Holy Grail«)fe_pageassets/contao/css/layout.cssCSS-Reset assets/contao/css/reset.cssResponsive Grid (960px, 12 Spalten) assets/contao/css/responsive.css (grid.css)Formulare assets/contao/css/forms.cssTinyMCE-Stylesheet files/tinymce.css
  15. 15. Der (responsive) Layout-Builder HTML fe_page setzt Meta-Viewport-Tag CSS: assets/contao/css/layout.css1. Standardize some basic elements2. Viewport > 767px: Apply the holy grail CSS layout3. Viewport < 768px: Display all columns underneath each other4. Flexible Images: img {max-width:100%;height:auto;}5. Format the Contao image galleries6. Clear floats, hide elements and custom layout sections
  16. 16. Reihenfolge im Quelltext und am BildschirmDer Holy Grail: Einführung
  17. 17. Quelltext: Das Wichtigste zuerst#container umschließt die drei Spalten#footer#header#main#left#right123
  18. 18. Bildschirm: Das Wichtigste in der Mitte#container umschließt die drei Spalten#footer clear:both#header#mainwidth:100%#leftwidth: 240px#rightwidth: 240px12 3
  19. 19. Lösung: Der Holy Grail Artikel "In Search of the Holy Grail" Matthew Levine im Januar 2006 alistapart.com/article/holygrail Der »Holy Grail«erfüllt fünf Bedingungen1. have a fluid center with fixed sidebars2. allow center column to appear first in the source3. allow any column to be the tallest4. require only a single extra <div>5. require very simple CSS
  20. 20. Schritt für Schritt zum heiligen GralDer Holy Grail im Detail
  21. 21. Schritt 1: Der Container#container#footer#headerpadding-left240pxpadding-right240px
  22. 22. Schritt 2: Die drei Inhaltspalten#container umschließt die drei Spalten#footer#header#mainfloat:leftposition:relativewidth:100%#leftfloat:leftposition:relativewidth:240px#rightfloat:leftposition:relativewidth:240pxpadding-left:240px padding-right:240px
  23. 23. Schritt 3: Warum springt #left nach oben?#container umschließt die drei Spalten#footer#header#mainwidth:100%#leftfloat:leftposition:relativewidth:240pxmargin-left: -100%#rightwidth:240pxpadding-left:240px padding-right:240px
  24. 24. Schritt 3: Die Ausgangsposition#container umschließt die drei Spalten#footer#header#mainfloat:leftposition:relativewidth:100%#leftfloat:leftposition:relativewidth:240px#rightfloat:leftposition:relativewidth:240pxpadding-left:240px padding-right:240px#leftfloat:leftposition:relativewidth:240px#rightfloat:leftposition:relativwidth:240pxwenn Platz wäre...
  25. 25. Schritt 3: Die linke Spalte, Teil 1#container umschließt die drei Spalten#footer#header#mainwidth:100%#leftfloat:leftposition:relativewidth:240pxmargin-left: -100%#rightwidth:240px#rightwidth:240pxpadding-left:240px padding-right:240px
  26. 26. Schritt 4: Die linke Spalte, Teil 2#container umschließt die drei Spalten#footer#header#mainwidth:100%#leftfloat:leftposition:relativewidth:240pxmargin-left: -100%right: 240px#rightwidth:240px#rightwidth:240pxpadding-left:240px padding-right:240px
  27. 27. Schritt 5: Die rechte Spalte#container umschließt die drei Spalten#footer#header#mainwidth:100%#leftmargin-left: -100%width: 240pxright: 240px#rightwidth:240pxmargin-right:-100%padding-left:240px padding-right:240px
  28. 28. Der Holy Grail im Überblick#container umschließt die drei Spalten#footer#header#mainfloat:leftposition:relativewidth:100%#leftfloat:leftposition:relativemargin-left: -100%---width: 240pxright: 240px#rightfloat:leftposition:relativemargin-right:-100%---width:240pxpadding-left:240px padding-right:240px
  29. 29. Das Fazit zum Holy Grail Ziel Inhalt im Quelltext zuerst Inhalt am Bildschirm als mittlere Spalte Methoden negativer Margin relative Positionierung Einschränkungen #main, #left und #right ohne padding, border, margin Sidebars nur mit fester Pixelbreite zuverlässig berechenbar Hauptnavigation in #left nur begrenzt sinnvoll Minimale Breite #container: 2x #left plus 1x #right
  30. 30. Holy Grail < drei Spalten
  31. 31. Contao: zweispaltig, Sidebar rechts#container umschließt die beiden Spalten#footer#header#mainfloat: leftposition:relativewidth:100%#rightfloat:leftposition:relativemargin-right:-100%---width:240pxpadding-right:240px
  32. 32. Contao: zweispaltig, Sidebar links#container umschließt die beiden Spalten#footer#header#mainfloat: leftposition:relativewidth:100%#leftfloat: leftposition:relativemargin-left: -100%---width: 240pxright: 240pxpadding-left:240px
  33. 33. Contao: einspaltig#container umschließt #main#footer#header#mainfloat: leftposition:relativewidth:100%
  34. 34. Auf kleinen Bildschirmen kein Holy GrailDer Layout-Builder < 768px
  35. 35. Der Layout-Builder >767px: Mit Holy Grail
  36. 36. Der Layout-Builder wird responsive/* Viewport < 768px: Display all columns underneath each other */@media (max-width:767px) {#wrapper { margin:0; width:auto; }#header, #footer { height:auto; }#container { padding-left:0; padding-right:0; }#main, #left, #right { float:none; width:auto; }#left { right:0; margin-left:0; }#right { margin-right:0; }}
  37. 37. Der Layout-Builder < 768px: ohne Holy Grail
  38. 38. Der Layout-Builder – Zusammenfassung Layout Normal: Mehrspaltig, feste Breite 960px plus evtl. 2x10px padding Nachteil: Horizontaler Rollbalken zwischen 768px und ca. 960px Flexibler: #wrapper { width:90%; max-width:960px; } Flexible Images img { max-width:100%; height: auto; } Media Query < 768px Layout wird einspaltig Fazit Das Layout ist "responsive" und auch auf "mobile" nutzbar Auch ohne ein "mobiles Seitenlayout"
  39. 39. "RESS" ist bei Contao schon mit drin...Seitenlayouts für mobile Seiten
  40. 40. „RESS“: RESponsive plus Serverside HTML unterschiedlich andere Frontend-Module andere Inhalte diverse CSS-Anpassungen Grundprinzipien optimierter Quelltext optimierte Bilder optimierte Inhalte potenzielle Probleme Was ist »mobile«? Was heißt »optimiert«? viele Annahmen ("ass-u-me")HTMLfull siteCSSCSSCSSHTMLmobileCSSCSSCSS
  41. 41. Seitenlayout für mobile Seiten Spezielle Seitenlayouts für mobile Seiten Zuerst ein spezielles Seitenlayout erstellen Dann in der Seitenstruktur das Layout für mobile Seiten zuweisen Ist nicht Teil des CSS-Framework Der Umschalter: {{toggle_view}} Schaltet um zwischen "Desktop" und "Mobile" URL-Parameter ?toggle_view=desktop bzw. mobile Ideal zum Testen der Mobilversion auf dem Desktop Lässt dem Benutzer die Wahl
  42. 42. UA-Sniffing: Wie Contao mobile Geräte erkenntsystem/config/agents.php
  43. 43. Beispiel: Button "Jetzt anrufen"<a href:“tel:004924146361877“>Jetzt anrufen!</a>
  44. 44. Fazit: Responsive Contao1. Layout-Builder ermöglicht responsive Webdesign basiert auf "Holy Grail" Viewport <768px – einspaltiges Layout mit automatischer Breite reicht für viele Websites völlig aus2. Mobiles Seitenlayout Entscheidung "mobile = true" über UA-Sniffing (agents.php) ermöglicht anderes HTML für mobile Geräte (Frontend-Module) Spezielle Stylesheets nur für mobile Geräte3. Contao Responsive Grid (kommt in Teil 2 dieser Präsentation) Viewport >980px – Grid mit 960px und 12 Spalten Viewport <980px – Grid mit 744px und 12 Spalten Viewport <768px – einspaltiges Layout mit automatischer Breite
  45. 45. Kurze Pause.Danach gehts weiter mit Teil 2"Das Contao Responsive Grid"

×