Responsive Webdesign mit
Bootstrap
Gregor Biswanger | Freier Trainer, Consultant und Autor
about.me/gregor.biswanger
Über mich
 Gründer von CleverSocial.de
 Freier Consultant und Trainer
 Schwerpunkte .NET-Architektur, Agile Prozesse, X...
Unser Reiseplan
Responsive Design
 Was ist das?
 Geschichte
 Was läuft schlecht?
Bootstrap
 Geschichte
 Einführung
 ...
Responsive Design
Das ist Responsive Design
http://daserste.de
http://howtowat.ch
Das ist KEIN Responsive Design
http://www.rtl2.de oder
http://Lingscars.com
Responsive Design Regeln
 Oberfläche passt sich der Device-Größe an
 Oberfläche muss nicht zusätzlich gezoomt werden
 O...
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 {
#banner, #content {
text-align:center;
}
#img_banner {
max-width:95%;
}
}
@media screen and (ma...
Simulatoren
http://xdk.intel.com
Der Fluch von Responsive Design
Der Fluch von Responsive Design
 Das aktuelle Design passt nicht dazu
 Wir sind gar keine Designer
 Ständige Seiteneffe...
Twitter ging es genauso…
August 2011 war die Geburtsstunde von Bootstrap!
Die Eltern von Bootstrap
Jacob Thornton
Bootstrap 3.0
UI Framework fürs Web
Open-Source auf GitHub
Basiert auf CSS3 und JavaScript
Baut auf HTML5 auf
Unterstützt ...
Die ersten Schritte
 Download unter getbootstrap.com
 Oder über NuGet
 Ab ASP.NET MVC 5 sogar inklusive
Bootstrap im Einsatz! (DEMO)
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-...
Multiple Grids
col-lg-xx >= 1200px
col-md-xx >= 992px
col-sm-xx >=768px
col-xs-xx < 768px
Bootstrap Steuerelemente
Bootstrap Customizing
Bootstrap Themes
http://bootswatch.com
FRAGEN?
Vielen Dank!
http://about.me/Gregor.Biswanger
Ich freue mich auf Ihr Feedback!
Upcoming SlideShare
Loading in …5
×

Responsive Webdesign mit Bootstrap

1,145 views

Published on

Bootstrap ist ein Open-Source-Framework von Twitter, das eine Reihe von Hilfsmitteln für die Gestaltung von Websites und Webanwendungen bereitstellt. Die Gestaltungsvorlagen basieren auf HTML und CSS und beinhalten Formulare, Buttons, Tabellen und viele andere Oberflächenelemente. Dieser Vortrag gibt eine Einführung und weitere wertvolle Tipps aus der Praxis.

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

  • Be the first to like this

No Downloads
Views
Total views
1,145
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Webdesign mit Bootstrap

  1. 1. Responsive Webdesign mit Bootstrap Gregor Biswanger | Freier Trainer, Consultant und Autor about.me/gregor.biswanger
  2. 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. 3. Unser Reiseplan Responsive Design  Was ist das?  Geschichte  Was läuft schlecht? Bootstrap  Geschichte  Einführung  Best Practices
  4. 4. Responsive Design
  5. 5. Das ist Responsive Design http://daserste.de http://howtowat.ch
  6. 6. Das ist KEIN Responsive Design http://www.rtl2.de oder http://Lingscars.com
  7. 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. 8. Eine kleine Geschichte zum Thema Responsive
  9. 9. Das Web war schon immer Responsive!
  10. 10. Der Aufbau vom Layout  Frameset -> Tabellen -> Div -> Tabellen -> Div  Standard Auflösung von  800 x 600  1024 x 768
  11. 11. Mobile First Responsive Design So klein wie möglich anfangen Idee von Luke Wroblewski (lukew.com)
  12. 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. 13. Simulatoren http://xdk.intel.com
  14. 14. Der Fluch von Responsive Design
  15. 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. 16. Twitter ging es genauso…
  17. 17. August 2011 war die Geburtsstunde von Bootstrap!
  18. 18. Die Eltern von Bootstrap Jacob Thornton
  19. 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. 20. Die ersten Schritte  Download unter getbootstrap.com  Oder über NuGet  Ab ASP.NET MVC 5 sogar inklusive
  21. 21. Bootstrap im Einsatz! (DEMO)
  22. 22. Mit Bootstrap Responsive  Zurück zu Tabellen aber mit Div durch das Bootstrap Grid-System  Besteht aus 12 Spalten
  23. 23. Das Bootstrap Grid
  24. 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. 25. Multiple Grids col-lg-xx >= 1200px col-md-xx >= 992px col-sm-xx >=768px col-xs-xx < 768px
  26. 26. Bootstrap Steuerelemente
  27. 27. Bootstrap Customizing
  28. 28. Bootstrap Themes http://bootswatch.com
  29. 29. FRAGEN?
  30. 30. Vielen Dank! http://about.me/Gregor.Biswanger Ich freue mich auf Ihr Feedback!

×