Contao Mobile - 01 Einführung

Transcrição

Responsive Contao - Das neue CSS-Framework
Contao-Nordtag - 02.03.2013
2
Was wir heute vorhaben
1. Einführung
2. Das CSS-Framework
3. Der Layout-Builder mit Holy Grail
4. Der Layout-Builder ohne Holy Grail
RESPONSIVE CONTAO
5. Mobile Seitenlayouts
DAS NEUE CSS-FRAMEWORK
6. Fazit
Peter Müller – pmueller.de
3
Die Entwicklung des Webdesign – Übersicht
ab 1996
Layouten mit HTML-Tabellen
ab 2001
Webstandards: Designing with CSS
ab 2006
CSS-Layouts werden normal
ab 2008
CSS-Grid-Frameworks (960.gs & Co)
ab 2011
»responsive« und »mobile«
Und dann kam alles anders...
2008: CSS-Grid-Frameworks
Alle Monitore können 1024 x 768.
So let's pretend we have 960px.
2010: Responsive Web Design – der Artikel
So let's pretend we have what?
alistapart.com/article/responsive-web-design
Peter Müller - [email protected]
1
2011: Responsive Web Design – das Buch

RWD ursprünglich




Fluid Grid-Layout
Flexible Images
Media Queries
Beispielsites

responsivewebdesign.com/robot/

bostonglobe.com
twitter.com/Malarkey/status/113221032634093569
abookapart.com/products/responsive-web-design
Begriffschaos: Zeldman definiert
Responsive Webdesign = 1x HTML


CSS
… any approach that delivers
elegant visual experiences
regardless of the size of the
user's display and the
limitations or capabilities of the
device.

1x HTML für alle
diverse CSS Anpassungen
Grundprinzipien



1x
HTML
CSS

potenzielle Probleme

CSS
Kein starres Layout
Flexible Images
Media Queries


Performance
Anordnung des Quellcode
Inhaltsmenge
zeldman.com/2011/07/06/responsive-design-i-dont-think-that-word-means-what-you-think-it-means/
„RESS“: Anderes HTML für mobile Seiten

CSS
HTML unterschiedlich


HTML
full site
CSS

CSS




HTML
mobile

CSS
Responsive
LayoutBuilder
optimierter Quelltext
optimierte Bilder
optimierte Inhalte
Contao 3
potenzielle Probleme

CSS
andere Frontend-Module
andere Inhalte
diverse CSS-Anpassungen
Grundprinzipien

CSS
Das bietet Contao 3

Was ist »mobile«?
Was heißt »optimiert«?
viele Annahmen ("ass-u-me")
Responsive
Grid
Mobile
Seitenlayouts
2
Das CSS-Framework im Backend
Das CSS-Framework
Backend und Layout-Builder
Das CSS-Framework – die Dateien
Komponente
Pfad und Dateiname
Layout-Builder (»Holy Grail«)
fe_page
assets/contao/css/layout.css
CSS-Reset
assets/contao/css/reset.css
Responsive Grid (960px, 12 Spalten)
assets/contao/css/responsive.css
Formulare
assets/contao/css/forms.css
TinyMCE-Stylesheet
files/tinymce.css
Der (responsive) Layout-Builder


HTML

fe_page

setzt Meta-Viewport-Tag
CSS: assets/contao/css/layout.css
1.
2.
3.
4.
Der Holy Grail: Einführung
Reihenfolge im Quelltext und am Bildschirm
Standardize some basic elements
Viewport > 767px: Apply the holy grail CSS layout
Viewport < 768px: Display all columns underneath each other
Flexible Images: img {max-width:100%;height:auto;}
5. Format the Contao image galleries
6. Clear floats, hide elements and custom layout sections
3
Quelltext: Content First
Bildschirm: Content Mitte
#header
#header
#container umschließt die drei Spalten
#main
2
1
1
#left
#main
width: 240px
#left
#right
width:100%
3
#right
width: 240px
2
3
#footer
#footer clear:both
Lösung: Der Holy Grail

Artikel "In Search of the Holy Grail"



Der Holy Grail im Detail
Matthew Levine im Januar 2006
alistapart.com/article/holygrail
Schritt für Schritt zum heiligen Gral
Der »Holy Grail«erfüllt fünf Bedingungen
1.
2.
3.
4.
5.
have a fluid center with fixed sidebars
allow center column to appear first in the source
allow any column to be the tallest
require only a single extra <div>
require very simple CSS
Schritt 1: Der Container
Schritt 2: Die drei Inhaltspalten
#header
#header
#main
float:left
position:relative
width:100%
padding-left
padding-right
240px
240px
#container
#footer
padding-left:240px
#left
#right
float:left
position:relative
width:240px
float:left
position:relative
width:240px
padding-right:240px
#footer
4
Schritt 3: Warum springt #left nach oben?
Schritt 2: Die drei Inhaltspalten
#header
#header
#left
float:left
position:relative
width:240px
margin-left: -100%
#main
#main
float:left
position:relative
width:100%
width:100%
#right
width:240px
padding-left:240px
padding-right:240px
#left
#right
float:left
position:relative
width:240px
float:left
position:relative
width:240px
padding-left:240px
#footer
padding-right:240px
#left
float:left
position:relative
width:240px
margin-left: -100%
#main
#right
width:100%
width:240px
float:left
position:relative
width:240px
margin-left: -100%
right: 240px
#main
#right
width:100%
width:240px
padding-right:240px
#right
#right
width:240px
width:240px
padding-right:240px
padding-left:240px
#footer
#footer
Schritt 5: Die rechte Spalte
Der Holy Grail im Überblick
#header
padding-left:240px
wenn Platz wäre...
#header
#left
margin-left: -100%
width: 240px
right: 240px
float:left
position:relative
width:240px
Schritt 4: Die linke Spalte, Teil 2
#header
#left
#right
float:left
position:relative
width:240px
#footer
Schritt 3: Die linke Spalte, Teil 1
padding-left:240px
#left
#main
#header
#right
width:100%
width:240px
margin-right:-100%
padding-right:240px
#footer
#left
float:left
position:relative
margin-left: -100%
--width: 240px
right: 240px
padding-left:240px
#main
#right
float:left
position:relative
width:100%
float:left
position:relative
margin-right:-100%
--width:240px
padding-right:240px
#footer
5
Das Fazit zum Holy Grail

Ziel



Methoden



Holy Grail < drei Spalten
Inhalt im Quelltext zuerst
Inhalt am Bildschirm als mittlere Spalte
negativer Margin
relative Positionierung
Einschränkungen



Layoutspalten ohne padding, border, margin
Sidebars nur mit fester Pixelbreite zuverlässig
Hauptnavigation in #left nur begrenzt sinnvoll
Contao: zweispaltig, Sidebar rechts
Contao: zweispaltig, Sidebar links
#header
#header
#main
#right
float: left
position:relative
width:100%
float:left
position:relative
margin-right:-100%
--width:240px
#container umschließt die beiden Spalten
#footer
padding-right:240px
#main
#left
float: left
position:relative
margin-left: -100%
--width: 240px
right: 240px
padding-left:240px
float: left
position:relative
width:100%
#container umschließt die beiden Spalten
#footer
Contao: einspaltig
#header
Der Layout-Builder < 768px
Auf kleinen Bildschirmen kein Holy Grail
#main
float: left
position:relative
width:100%
#container umschließt #main
#footer
6
Der Layout-Builder >767px: Mit Holy Grail
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; }
}
Der Layout-Builder < 768px: ohne Holy Grail
Der Layout-Builder – Zusammenfassung

Layout



Mehrspaltig, feste Breite: 960px plus evtl. 2x10px padding
Horizontale Scrollbar bei Viewport zwischen 768px und 960px
Flexibler: #wrapper{width:90%;max-width:960px;}

Flexible Images

Media Query < 768px

Fazit


max-width:100%; height: auto;
Layout wird einspaltig

„responsive“ und auf „mobile“ nutzbar

auch ohne "mobiles Seitenlayout"
Seitenlayout für mobile Seiten
Layouts für mobile Seiten

Spezielle Seitenlayouts für mobile Seiten




Der Umschalter: {{toggle_view}}




Seitenlayout für mobile Seiten erstellen
Seitenlayout für mobile Seiten zuweisen
Contao3-Buch, Kap. 18.4, Seite 493 bis 496
Schaltet um zwischen "Desktop" und "Mobile"
URL-Parameter ?toggle_view=desktop bzw. mobile
Lässt dem Benutzer die Wahl der Version
Contao3-Buch, Kap. 18.4.3, Seite 497 bis 498
7
Wie Contao mobile Geräte erkennt
Beispiel: Button "Jetzt anrufen"
system/config/agents.php
<a href:“tel:004924146361877“>Jetzt anrufen!</a>
Fazit: Responsive Contao

Der Layout-Builder





Mobile Seitenlayouts

ermöglichen anderes HTML für mobile Geräte

Spezielle Stylesheets nur für mobile Geräte



Vielen Dank fürs Zuhören!
enthält den "Holy Grail"
Media Query optimiert das CSS für kleine Bildschirme
ermöglicht "responsive Webdesign"
reicht für viele Websites völlig aus
Spezielle Frontend-Module im Seitenlayout
Spezielle Inhaltselemente (mit der Erweiterung [Mobile_Visibility])
Das Responsive Grid


ermöglicht responsive Grid-Layouts.
machen wir dann ein anderes Mal.
pmueller.de
Contao-Seminare bei boldt-training.de
8

Contao Mobile - 01 Einführung

Transcrição

Documentos relacionados

Für Alle Responsive Webdesign - opentext

Cargo evo

Maschinen Frommer GmbH

Left Boy – vier Gründe, warum man ihn kennen muss

Modernes Webdesign

isoKERAM Gewebeband

Level: 2 Wall Line Dance Beginner/Intermediate / 32 Counts

Blatt 5 – Digitale Medien - Medieninformatik

WIR SUCHEN CSS-CRACK (m/w) AB JANUAR 2013

Drucker / printer