responsive webdesign mit bootstrap

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

Upload: gregor-biswanger

Post on 12-Jun-2015

725 views

Category:

Software


8 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Responsive Webdesign mit Bootstrap

Responsive Webdesign mit

Bootstrap

Gregor Biswanger | Freier Trainer, Consultant und Autor

about.me/gregor.biswanger

Page 2: Responsive Webdesign mit Bootstrap

Ü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

Page 3: Responsive Webdesign mit Bootstrap

Unser Reiseplan

Responsive Design

Was ist das?

Geschichte

Was läuft schlecht?

Bootstrap

Geschichte

Einführung

Best Practices

Page 4: Responsive Webdesign mit Bootstrap

Responsive Design

Page 5: Responsive Webdesign mit Bootstrap

Das ist Responsive Design

http://daserste.de

http://howtowat.ch

Page 6: Responsive Webdesign mit Bootstrap

Das ist KEIN Responsive Design

http://www.rtl2.de oder

http://Lingscars.com

Page 7: Responsive Webdesign mit Bootstrap

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

Page 8: Responsive Webdesign mit Bootstrap

Eine kleine Geschichte zum Thema Responsive

Page 9: Responsive Webdesign mit Bootstrap

Das Web war schon immer Responsive!

Page 10: Responsive Webdesign mit Bootstrap

Der Aufbau vom Layout

Frameset -> Tabellen -> Div -> Tabellen -> Div

Standard Auflösung von

800 x 600

1024 x 768

Page 11: Responsive Webdesign mit Bootstrap

Mobile First Responsive Design

So klein wie möglich

anfangen

Idee von Luke Wroblewski

(lukew.com)

Page 12: Responsive Webdesign mit Bootstrap

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

Page 13: Responsive Webdesign mit Bootstrap

Simulatoren

http://xdk.intel.com

Page 14: Responsive Webdesign mit Bootstrap

Der Fluch von Responsive Design

Page 15: Responsive Webdesign mit Bootstrap

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?

Page 16: Responsive Webdesign mit Bootstrap

Twitter ging es genauso…

Page 17: Responsive Webdesign mit Bootstrap

August 2011 war die Geburtsstunde von Bootstrap!

Page 18: Responsive Webdesign mit Bootstrap

Die Eltern von Bootstrap

Jacob Thornton

Page 19: Responsive Webdesign mit Bootstrap

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)

Page 20: Responsive Webdesign mit Bootstrap

Die ersten Schritte

Download unter getbootstrap.com

Oder über NuGet

Ab ASP.NET MVC 5 sogar inklusive

Page 21: Responsive Webdesign mit Bootstrap

Bootstrap im Einsatz! (DEMO)

Page 22: Responsive Webdesign mit Bootstrap

Mit Bootstrap Responsive

Zurück zu Tabellen aber mit Div durch das Bootstrap Grid-System

Besteht aus 12 Spalten

Page 23: Responsive Webdesign mit Bootstrap

Das Bootstrap Grid

Page 24: Responsive Webdesign mit Bootstrap

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 25: Responsive Webdesign mit Bootstrap

Multiple Grids

col-lg-xx >= 1200px

col-md-xx >= 992px

col-sm-xx >=768px

col-xs-xx < 768px

Page 26: Responsive Webdesign mit Bootstrap

Bootstrap Steuerelemente

Page 27: Responsive Webdesign mit Bootstrap

Bootstrap Customizing

Page 28: Responsive Webdesign mit Bootstrap

Bootstrap Themes

http://bootswatch.com

Page 29: Responsive Webdesign mit Bootstrap

FRAGEN?

Page 30: Responsive Webdesign mit Bootstrap

Vielen Dank!http://about.me/Gregor.Biswanger

Ich freue mich auf Ihr Feedback!