Post on 02-Jun-2020
04 | Responsive Webdesign
Gregor Biswanger | Freier Trainer, Consultant und Autor
about.me/gregor.biswanger
Responsive Webdesign
Das ist Responsive Webdesign
http://daserste.dehttp://howtowat.ch
Das ist KEIN Responsive Design
http://www.rtl2.de oderhttp://Lingscars.com
Responsive Webdesign Regeln
• Oberfläche passt sich der Device-Größe an
• Oberfläche muss nicht zusätzlich gezoomt werden
• Oberfläche lässt sich passend zum Device mit Maus/Tastatur
oder Touch bedienen
Eine kleine Geschichte zum Thema Responsive
Das Web war schon immer Responsive!
Der Aufbau vom Layout
• Frameset -> Tabellen -> Div -> Tabellen -> Div
• Standard Auflösung von – 800 x 600
– 1024 x 768
Mobile First Responsive Design
• So klein wie möglich anfangen
• Idee von Luke Wroblewski (lukew.com)
Media Queries@media all {
#content {
text-align:center;
}
}
@media screen and (max-width: 480px) {
#content {
font-size:80%;
color:#0000FF;
}
}
http://cssmediaqueries.com
Der Fluch von Responsive Webdesign
Der Fluch von Responsive Webdesign
• Das aktuelle Design passt nicht dazu
• Wir sind gar keine Designer
• Ständige Seiteneffekte
• Cross-Browser Probleme
• Zu aufwändig
Fazit: Ist es wirklich nötig?
Twitter ging es genauso…
August 2011 war die Geburtsstunde von Bootstrap!
Die Eltern von Bootstrap
Jacob Thornton
Bootstrap 3.0
• UI Framework für´s Web
• Open-Source auf GitHub
• Basiert auf CSS3 und JavaScript
• Baut auf HTML5 auf
• Unterstützt alle gängigen Browser
(Sogar IE7, Safari und Opera kompatibel)
Mit Bootstrap Responsive
• Zurück zu Tabellen aber mit Div durch das Bootstrap Grid-
System
• Besteht aus 12 Spalten
Das Bootstrap Grid
Das Bootstrap Grid
col-xx-6 col-xx-6
col-xx-4 col-xx-4 col-xx-4
col-xx-3 col-xx-3 col-xx-3 col-xx-3
col-xx-9 col-xx-3
col-xx-9 col-xx-offset-2
Das Intel XDK und das Intel App Framework unterstützen das gleiche Prinzip!
• Der App Designer unterstützt unterschiedliche UI Frameworks
• Der App Designer bietet Responsive Webdesign ohne
Programmieraufwand
• Das Intel App Framework selbst unterstützt auch das Grid-
System
Fazit
• Wir wissen jetzt was Responsive Webdesign ist
• Wofür es wichtig ist
• Worauf man zu achten hat
• Und dass das Intel XDK durch den App Designer ein ideales
Tooling bietet