Relicamp12 Responsive Webdesign und Webapps

Goin‘ mobileGoin‘ mobile

Maria Herrmann, Tomate Design

Weil die Größe nicht entscheidend ist.#relicamp12, Frankfurt / Main, 11.-13. Mai 2012

Maria Herrmann

Vorstellung

»freie Theologin« – digital native

Studium der (Diplom-)Theologie in Würzburg & SalamancaZentrum für PastoralassistentInnen

Webdesign; Kirche & Social Media

Tomate Design, Hannover

Podcasts, Ästhetik, Webapps

...?

Mein Name

Meine drei »Tags«

Meine bisherigen Erfahrungen

Vorstellung

#werbung: {display: block;content: “überallinternet“;

}

#werbung: {display: block;content: “überallinternet“;

}

Goin‘ mobile!

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page.

But first, we must accept the ebb and flow of things.

We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.

«

»

http://www.alistapart.com/articles/responsive-web-design/

Content first!

Start

Was möchte ich teilen?

Wie kann man diese Inhalte strukturieren?

Was muss unbedingt mobil erreichbar sein?

Wahl der Mittel

Start

Responsive Webdesign

Webapp Ansatz

Extension / Addon / Modul

Vorgehensweise im Ganzen

Responsive Webdesign als Methode

Abfrage der Bildschirmgröße[Eigenschaftsspezifische Stylesheets (Media Queries)]

Angepasste Ausgabe der Inhalte

*) Breite und Höhe des Browserfensters*) Breite und Höhe des Gerätes*) Orientierung (Quer- oder Hochformat)*) Bildschirmauflösung

Responsive Webdesign als Methode

Vorbereitungen und Leitgedanken

Responsive Webdesign als Methode

Weg von festen Größen, Grids und Layouts!

Mal wieder Stift, Papier und Schere zur Hand nehmen!?

Content, content, content!

Mobile first!

Die Umsetzung

Technik, Vorgehensweisen, Best practice

Bitte Browser öffnen!

Fallstricke

Technik, Vorgehensweisen, Best practice

Navigation

Bilder und Videos oder die Sache mit dem width: 100%;

Animationen, Hover, etc.

http://t3n.de/news/responsive-webdesign-adaptive-images-optimiert-bilder-328892/

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-simple-responsive-mobile-first-navigation/

http://www.elmastudio.de/webdesign/webseiten-navigationen-in-responsive-webdesigns-analysiert/

Weitere Helfer

Technik, Vorgehensweisen, Best practice

Modernizer.js, etc.

Out of the box-Frameworks (Skeleton, Less, CSS Grid, inuit.css...)

SchmankerlBookmark Alert, Homescreen icons und Splash-Screen

Drupal

Technik, Vorgehensweisen, Best practice

Zen 7.x.5.x, Omega, Mothership

http://drupal.org/project/media_responsive

http://drupal.org/project/html5_tools

http://drupal.org/project/fences

Grundlagen

Webapp – Das Schaf im Wolfspelz?

Frameworks: jQuery Mobile, Sencha, etc.

Beispiele http://www.jqmgallery.com/

Fragen?Fragen?

http://www.alistapart.com/articles/responsive-web-design/

http://www.alistapart.com/articles/dao/

http://www.abookapart.com/products/responsive-web-design

http://mediaqueri.es/

http://t3n.de/news/responsive-webdesign-umfangreiche-prasentation-tipps-330593/