Post on 02-Dec-2014
description
transcript
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/