Relicamp12 Responsive Webdesign und Webapps

  • View
    2.508

  • Download
    6

Embed Size (px)

DESCRIPTION

 

Text of Relicamp12 Responsive Webdesign und Webapps

  • 1. G oinmob ile Weil die Gre nicht entscheidend ist. #relicamp12, Frankfurt / Main, 11.-13. Mai 2012 Maria Herrmann, Tomate Design
  • 2. VorstellungMaria Herrmann Studium der (Diplom-)Theologie in Wrzburg & Salamanca Zentrum fr PastoralassistentInnen Webdesign; Kirche & Social Media Tomate Design, Hannover Podcasts, sthetik, Webappsfreie Theologin digital native
  • 3. Vorstellung...? Mein Name Meine drei Tags Meine bisherigen Erfahrungen
  • 4. #werbung: { display: block; content: berallinternet;}
  • 5. G oinmobi 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 doesnt have the same constraints, and design for this exibility.But rst, we must accept the ebb and ow of things. http://www.alistapart.com/articles/responsive-web-design/
  • 7. StartContent rst! Was mchte ich teilen? Wie kann man diese Inhalte strukturieren? Was muss unbedingt mobil erreichbar sein?
  • 8. StartWahl der Mittel Responsive Webdesign Webapp Ansatz Extension / Addon / Modul
  • 9. Responsive Webdesign als MethodeVorgehensweise im Ganzen Abfrage der Bildschirmgre [Eigenschaftsspezische Stylesheets (Media Queries)] *) Breite und Hhe des Browserfensters *) Breite und Hhe des Gertes *) Orientierung (Quer- oder Hochformat) *) Bildschirmausung Angepasste Ausgabe der Inhalte
  • 10. Responsive Webdesign als Methode
  • 11. Responsive Webdesign als MethodeVorbereitungen und Leitgedanken Weg von festen Gren, Grids und Layouts! Mal wieder Stift, Papier und Schere zur Hand nehmen!? Content, content, content! Mobile rst!
  • 12. Technik, Vorgehensweisen, Best practiceDie Umsetzung Bitte Browser ffnen!
  • 13. Technik, Vorgehensweisen, Best practiceFallstricke Navigation http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-simple-responsive-mobile-rst-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 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. 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. 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-designhttp://t3n.de/news/responsive-webdesign-umfangreiche-prasentation-tipps-330593/http://mediaqueri.es/