1. G oin‘mob ile
Weil die Größe nicht entscheidend ist.
#relicamp12, Frankfurt / Main, 11.-13. Mai 2012
Maria Herrmann, Tomate Design

2. Vorstellung
Maria Herrmann
Studium der (Diplom-)Theologie
in Würzburg & Salamanca
Zentrum für PastoralassistentInnen
Webdesign; Kirche & Social Media
Tomate Design, Hannover
Podcasts, Ästhetik, Webapps
»freie Theologin« – digital native

3. Vorstellung
...?
Mein Name
Meine drei »Tags«
Meine bisherigen Erfahrungen

4. #werbung: {
display: block;
content: “überallinternet“;
}

5. G oin‘mobi le!
#werbung: {
display: block;
content: “überallinternet“;
}

6. » 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.
We should embrace the fact
that the web doesn’t have the same constraints,
and design for this flexibility.
But first, we must accept the ebb and flow of things. «
http://www.alistapart.com/articles/responsive-web-design/

7. Start
Content first!
Was möchte ich teilen?
Wie kann man diese Inhalte strukturieren?
Was muss unbedingt mobil erreichbar sein?

8. Start
Wahl der Mittel
Responsive Webdesign
Webapp Ansatz
Extension / Addon / Modul

9. Responsive Webdesign als Methode
Vorgehensweise im Ganzen
Abfrage der Bildschirmgröße
[Eigenschaftsspezifische Stylesheets (Media Queries)]
*) Breite und Höhe des Browserfensters
*) Breite und Höhe des Gerätes
*) Orientierung (Quer- oder Hochformat)
*) Bildschirmauflösung
Angepasste Ausgabe der Inhalte

10. Responsive Webdesign als Methode

11. Responsive Webdesign als Methode
Vorbereitungen und Leitgedanken
Weg von festen Größen, Grids und Layouts!
Mal wieder Stift, Papier und Schere
zur Hand nehmen!?
Content, content, content!
Mobile first!

12. Technik, Vorgehensweisen, Best practice
Die Umsetzung
Bitte Browser öffnen!

13. Technik, Vorgehensweisen, Best practice
Fallstricke
Navigation
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-simple-responsive-mobile-first-navigation/
Bilder und Videos oder die Sache mit dem width: 100%;
http://t3n.de/news/responsive-webdesign-adaptive-images-optimiert-bilder-328892/
Animationen, Hover, etc.
http://www.elmastudio.de/webdesign/webseiten-navigationen-in-responsive-webdesigns-analysiert/

14. Technik, Vorgehensweisen, Best practice
Weitere Helfer
Modernizer.js, etc.
Out of the box-Frameworks (Skeleton, Less, CSS Grid, inuit.css...)
Schmankerl
Bookmark Alert, Homescreen icons und Splash-Screen

15. Technik, Vorgehensweisen, Best practice
Drupal
Zen 7.x.5.x, Omega, Mothership
http://drupal.org/project/media_responsive
http://drupal.org/project/html5_tools
http://drupal.org/project/fences

16. Webapp – Das Schaf im Wolfspelz?
Grundlagen
Frameworks: jQuery Mobile, Sencha, etc.
Beispiele http://www.jqmgallery.com/

17. Fragen?

18. http://www.alistapart.com/articles/dao/
http://www.alistapart.com/articles/responsive-web-design/
http://www.abookapart.com/products/responsive-web-design
http://t3n.de/news/responsive-webdesign-umfangreiche-prasentation-tipps-330593/
http://mediaqueri.es/