Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Relicamp12 Responsive Webdesign und Webapps

2.874 Aufrufe

Veröffentlicht am

Veröffentlicht in: Seele & Geist
  • Als Erste(r) kommentieren

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/

×