04 | Responsive Webdesign

Gregor Biswanger | Freier Trainer, Consultant und Autor

about.me/gregor.biswanger

Responsive Webdesign

Das ist Responsive Webdesign

http://daserste.dehttp://howtowat.ch

Das ist KEIN Responsive Design

http://www.rtl2.de oderhttp://Lingscars.com

Responsive Webdesign 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 {

#content {

text-align:center;

}

}

@media screen and (max-width: 480px) {

#content {

font-size:80%;

color:#0000FF;

}

}

http://cssmediaqueries.com

Der Fluch von Responsive Webdesign

Der Fluch von Responsive Webdesign

• 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ür´s 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)

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

Das Intel XDK und das Intel App Framework unterstützen das gleiche Prinzip!

• Der App Designer unterstützt unterschiedliche UI Frameworks

• Der App Designer bietet Responsive Webdesign ohne

Programmieraufwand

• Das Intel App Framework selbst unterstützt auch das Grid-

System

Fazit

• Wir wissen jetzt was Responsive Webdesign ist

• Wofür es wichtig ist

• Worauf man zu achten hat

• Und dass das Intel XDK durch den App Designer ein ideales

Tooling bietet