Das Dokument behandelt responsives Webdesign, insbesondere die Verwendung von Bootstrap, und präsentiert die Geschichte sowie die grundlegenden Prinzipien des responsiven Designs. Bootstrap, ein Open-Source-UI-Framework, ermöglicht die Erstellung responsiver Webseiten mit HTML5, CSS3 und JavaScript und hat sich seit seiner Einführung im Jahr 2011 als Standard etabliert. Obwohl responsive Designs zahlreiche Herausforderungen mit sich bringen, bieten sie eine anpassbare Benutzeroberfläche für verschiedene Geräte und Bildschirmgrößen.

1. Responsive Webdesign mit
Bootstrap
Gregor Biswanger | Freier Trainer, Consultant und Autor
about.me/gregor.biswanger

2. Über mich
 Gründer von CleverSocial.de
 Freier Consultant und Trainer
 Schwerpunkte .NET-Architektur, Agile Prozesse, XAML, Web und Cloud
 Technologieberater für die Intel Developer Zone
 Sprecher auf Konferenzen und User Groups
 Freier Autor für heise.de, dotnetpro, WindowsDeveloper und viele
weitere Fachmagazine
 Video-Trainer bei video2brain und Microsoft
Gregor Biswanger
Microsoft MVP für Client App Dev
Intel Black Belt
dotnet-blog.net
about.me/gregor.biswanger

3. Unser Reiseplan
Responsive Design
 Was ist das?
 Geschichte
 Was läuft schlecht?
Bootstrap
 Geschichte
 Einführung
 Best Practices

4. Responsive Design

5. Das ist Responsive Design
http://daserste.de
http://howtowat.ch

6. Das ist KEIN Responsive Design
http://www.rtl2.de oder
http://Lingscars.com

7. Responsive Design 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

8. Eine kleine Geschichte zum Thema Responsive

9. Das Web war schon immer Responsive!

10. Der Aufbau vom Layout
 Frameset -> Tabellen -> Div -> Tabellen -> Div
 Standard Auflösung von
 800 x 600
 1024 x 768

11. Mobile First Responsive Design
So klein wie möglich
anfangen
Idee von Luke Wroblewski
(lukew.com)

12. Media Queries
@media all {
#banner, #content {
text-align:center;
}
#img_banner {
max-width:95%;
}
}
@media screen and (max-width: 480px) {
#img_banner {
border:double 10px #0000FF;
}
#content {
font-size:80%;
color:#0000FF;
}
}
http://cssmediaqueries.com

13. Simulatoren
http://xdk.intel.com

14. Der Fluch von Responsive Design

15. Der Fluch von Responsive Design
 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?

16. Twitter ging es genauso…

17. August 2011 war die Geburtsstunde von Bootstrap!

18. Die Eltern von Bootstrap
Jacob Thornton

19. Bootstrap 3.0
UI Framework fürs 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)

20. Die ersten Schritte
 Download unter getbootstrap.com
 Oder über NuGet
 Ab ASP.NET MVC 5 sogar inklusive

21. Bootstrap im Einsatz! (DEMO)

22. Mit Bootstrap Responsive
 Zurück zu Tabellen aber mit Div durch das Bootstrap Grid-System
 Besteht aus 12 Spalten

23. Das Bootstrap Grid

24. 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

25. Multiple Grids
col-lg-xx >= 1200px
col-md-xx >= 992px
col-sm-xx >=768px
col-xs-xx < 768px

26. Bootstrap Steuerelemente

27. Bootstrap Customizing

28. Bootstrap Themes
http://bootswatch.com

29. FRAGEN?

30. Vielen Dank!
http://about.me/Gregor.Biswanger
Ich freue mich auf Ihr Feedback!