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, 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
Unser Reiseplan
Responsive Design
Was ist das?
Geschichte
Was läuft schlecht?
Bootstrap
Geschichte
Einführung
Best Practices
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
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 {
#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
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 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ü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)
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-xx-9 col-xx-offset-2
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!