G oin‘mob ile            Weil die Größe nicht entscheidend ist.    #relicamp12, Frankfurt / Main, 11.-13. Mai 2012        ...
VorstellungMaria Herrmann              Studium der (Diplom-)Theologie              in Würzburg & Salamanca              Ze...
Vorstellung...?              Mein Name              Meine drei »Tags«              Meine bisherigen Erfahrungen
#werbung: {    display: block;    content: “überallinternet“;}
G oin‘mobi le! #werbung: {     display: block;     content: “überallinternet“; }
»    The control which designers know in the print medium,     and often desire in the web medium,     is simply a functio...
StartContent first!        Was möchte ich teilen?        Wie kann man diese Inhalte strukturieren?        Was muss unbeding...
StartWahl der Mittel        Responsive Webdesign        Webapp Ansatz        Extension / Addon / Modul
Responsive Webdesign als MethodeVorgehensweise im Ganzen             Abfrage der Bildschirmgröße             [Eigenschafts...
Responsive Webdesign als Methode
Responsive Webdesign als MethodeVorbereitungen und Leitgedanken              Weg von festen Größen, Grids und Layouts!    ...
Technik, Vorgehensweisen, Best practiceDie Umsetzung                             Bitte Browser öffnen!
Technik, Vorgehensweisen, Best practiceFallstricke        Navigation        http://webdesign.tutsplus.com/tutorials/htmlcs...
Technik, Vorgehensweisen, Best practiceWeitere Helfer        Modernizer.js, etc.        Out of the box-Frameworks (Skeleto...
Technik, Vorgehensweisen, Best practiceDrupal        Zen 7.x.5.x, Omega, Mothership        http://drupal.org/project/media...
Webapp – Das Schaf im Wolfspelz?Grundlagen       Frameworks: jQuery Mobile, Sencha, etc.       Beispiele     http://www.jq...
Fragen?
http://www.alistapart.com/articles/dao/http://www.alistapart.com/articles/responsive-web-design/http://www.abookapart.com/...
Nächste SlideShare
Wird geladen in …5
×

Relicamp12 Responsive Webdesign und Webapps

2.638 Aufrufe

Veröffentlicht am

Veröffentlicht in: Seele & Geist
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.638
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
726
Aktionen
Geteilt
0
Downloads
11
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Relicamp12 Responsive Webdesign und Webapps

  1. 1. G oin‘mob ile Weil die Größe nicht entscheidend ist. #relicamp12, Frankfurt / Main, 11.-13. Mai 2012 Maria Herrmann, Tomate Design
  2. 2. VorstellungMaria 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. 3. Vorstellung...? Mein Name Meine drei »Tags« Meine bisherigen Erfahrungen
  4. 4. #werbung: { display: block; content: “überallinternet“;}
  5. 5. G oin‘mobi le! #werbung: { display: block; content: “überallinternet“; }
  6. 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. 7. StartContent first! Was möchte ich teilen? Wie kann man diese Inhalte strukturieren? Was muss unbedingt mobil erreichbar sein?
  8. 8. StartWahl der Mittel Responsive Webdesign Webapp Ansatz Extension / Addon / Modul
  9. 9. Responsive Webdesign als MethodeVorgehensweise 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. 10. Responsive Webdesign als Methode
  11. 11. Responsive Webdesign als MethodeVorbereitungen 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. 12. Technik, Vorgehensweisen, Best practiceDie Umsetzung Bitte Browser öffnen!
  13. 13. Technik, Vorgehensweisen, Best practiceFallstricke 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. 14. Technik, Vorgehensweisen, Best practiceWeitere Helfer Modernizer.js, etc. Out of the box-Frameworks (Skeleton, Less, CSS Grid, inuit.css...)Schmankerl Bookmark Alert, Homescreen icons und Splash-Screen
  15. 15. Technik, Vorgehensweisen, Best practiceDrupal 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. 16. Webapp – Das Schaf im Wolfspelz?Grundlagen Frameworks: jQuery Mobile, Sencha, etc. Beispiele http://www.jqmgallery.com/
  17. 17. Fragen?
  18. 18. http://www.alistapart.com/articles/dao/http://www.alistapart.com/articles/responsive-web-design/http://www.abookapart.com/products/responsive-web-designhttp://t3n.de/news/responsive-webdesign-umfangreiche-prasentation-tipps-330593/http://mediaqueri.es/

×