![Page 1: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/1.jpg)
04 | Responsive Webdesign
Gregor Biswanger | Freier Trainer, Consultant und Autor
about.me/gregor.biswanger
![Page 2: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/2.jpg)
Responsive Webdesign
![Page 3: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/3.jpg)
Das ist Responsive Webdesign
http://daserste.dehttp://howtowat.ch
![Page 4: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/4.jpg)
Das ist KEIN Responsive Design
http://www.rtl2.de oderhttp://Lingscars.com
![Page 5: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/5.jpg)
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
![Page 6: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/6.jpg)
Eine kleine Geschichte zum Thema Responsive
![Page 7: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/7.jpg)
Das Web war schon immer Responsive!
![Page 8: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/8.jpg)
Der Aufbau vom Layout
• Frameset -> Tabellen -> Div -> Tabellen -> Div
• Standard Auflösung von – 800 x 600
– 1024 x 768
![Page 9: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/9.jpg)
Mobile First Responsive Design
• So klein wie möglich anfangen
• Idee von Luke Wroblewski (lukew.com)
![Page 10: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/10.jpg)
Media Queries@media all {
#content {
text-align:center;
}
}
@media screen and (max-width: 480px) {
#content {
font-size:80%;
color:#0000FF;
}
}
http://cssmediaqueries.com
![Page 11: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/11.jpg)
Der Fluch von Responsive Webdesign
![Page 12: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/12.jpg)
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?
![Page 13: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/13.jpg)
Twitter ging es genauso…
![Page 14: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/14.jpg)
August 2011 war die Geburtsstunde von Bootstrap!
![Page 15: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/15.jpg)
Die Eltern von Bootstrap
Jacob Thornton
![Page 16: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/16.jpg)
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)
![Page 17: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/17.jpg)
Mit Bootstrap Responsive
• Zurück zu Tabellen aber mit Div durch das Bootstrap Grid-
System
• Besteht aus 12 Spalten
![Page 18: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/18.jpg)
Das Bootstrap Grid
![Page 19: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/19.jpg)
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
![Page 20: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/20.jpg)
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
![Page 21: 04 | Responsive Webdesigndownload.microsoft.com/.../04_Responsive-Webdesign.pdfDas Web war schon immer Responsive! Der Aufbau vom Layout •Frameset -> Tabellen -> Div -> Tabellen](https://reader036.vdocuments.net/reader036/viewer/2022081522/5ede925bad6a402d6669e5e4/html5/thumbnails/21.jpg)
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