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
Upcoming SlideShare
Loading in...5
×

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

13,118

Published on

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.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
13,118
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

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"

×