Relicamp12 Responsive Webdesign und Webapps

2,755 views

Published on

Published in: Spiritual
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,755
On SlideShare
0
From Embeds
0
Number of Embeds
762
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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/

×