Responsive Webdesign mit Bootstrap

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!