Responsive Webdesign
1 gefällt mir1,155 aufrufe
Das Dokument beschreibt die Agentur basta!media, die sich auf responsive Webdesign spezialisiert hat. Es erläutert die Grundprinzipien und technischen Grundlagen des responsiven Designs und dessen Bedeutung für die Benutzerfreundlichkeit auf verschiedenen Endgeräten. Zudem werden die Entwicklungen im Bereich der Mediaqueries und der Einfluss mobiler Endgeräte auf den Webverkehr thematisiert.
Responsive Webdesign
- 1. basta!media Seite: von 7 basta!media Gruppe - http://www.basta-media.de1 bei Arbeit, Sport und Spiel... Joomla!Day Deutschland 2013 - 14.09.2013 - Nürnberg Wir machen mobil Dienstag, 17. September 13 KW
- 2. basta!media Seite: von 7 basta!media Gruppe - http://www.basta-media.de2 Was bedeutet responsive und ist responsive auch responsive? Responsive Design Dienstag, 17. September 13 KW
- 3. basta!media Seite: von 7 basta!media Gruppe - http://www.basta-media.de3 Warum steht der Typ da? Wer ist das? Werbung Dienstag, 17. September 13 KW
- 4. basta!media basta!media Gruppe - http://www.basta-media.deSeite: von 7 Agenturvorstellung Kurzprofil basta!media ‣ Gegründet: Sommer 2004 ‣ Team: 8 feste und 4 freie Mitarbeiter ‣ Standort: Köln ‣ Schwerpunkte: Internet und Social Media Agentur ‣ Fullservice: Technik & Inhalte aus einer Hand ‣ ca. 30 Joomla! Projekte pro Jahr Online-Kommunikationsagentur Mit wem habt Ihr es hier zu tun? 4 Dienstag, 17. September 13 KW
- 5. basta!media Seite: von 7 basta!media Gruppe - http://www.basta-media.de5 In aller Munde, aber was genau ist damit gemeint? Responsive Web Design Dienstag, 17. September 13 KW
- 6. basta!media basta!media Gruppe - http://www.basta-media.deSeite: von 7 Responsive Web Design ‣ beim Responsive Webdesign (im Deutschen auch responsives Webdesign) handelt es sich um einen gestalterischen und technischen Ansatz zur Erstellung von Websites, so dass diese Websites auf Eigenschaften des jeweils benutzten Endgeräts reagieren können. Der grafische Aufbau einer „responsiven“ Webseite erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Seite betrachtet wird. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie beispielsweise Navigationen, Seitenspalten und Texte. Technische Basis hierfür sind neuere Webstandards wie HTML5, CSS3 und JavaScript. Wikipedia sagt dazu: 6 Wir machen mobil... bei Arbeit, Spaß und Spiel Dienstag, 17. September 13 KW
- 7. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de7 Erste Überlegungen bereits 2004: Cameron Adams Idee zum „Resolution dependent layout“ http://www.themaninblue.com/experiment/ResolutionLayout/ bei Arbeit, Spaß und Spiel Dienstag, 17. September 13 KW
- 8. basta!media basta!media Gruppe - http://www.basta-media.deSeite: von 7 Auf Basis von JavaScript ‣ Kaum Beachtung ‣ Wenig Performance ‣ Browser nicht alle kompatibel ‣ 6 Jahre Dornröschenschlaf Umsetzung zu Beginn 8 Wir machen mobil... bei Arbeit, Spaß und Spiel Dienstag, 17. September 13 KW
- 9. basta!media basta!media Gruppe - http://www.basta-media.deSeite: von 7 Im Mai 2010 ‣ Ethan Marcotte schlägt die sogenannten „MediaQueries“ vor ‣ CSS-basiert ‣ gute Performance ‣ das Thema startet international durch Zweiter Anlauf 9 Wir machen mobil... bei Arbeit, Spaß und Spiel Dienstag, 17. September 13 KW
- 10. basta!media basta!media Gruppe - http://www.basta-media.deSeite: von 7 Abfrage anhand von Einsatzzwecken MediaQueries CSS 2.1 10 Wir machen mobil... bei Arbeit, Spaß und Spiel <link rel="stylesheet" type="text/css" href="core.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> Dienstag, 17. September 13 KW
- 11. basta!media basta!media Gruppe - http://www.basta-media.deSeite: von 7 Abfrage anhand von Auflösungen (Breakpoints) MediaQueries CSS 3 11 Wir machen mobil... bei Arbeit, Spaß und Spiel <link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="mobile.css" /> Dienstag, 17. September 13 KW
- 12. basta!media basta!media Gruppe - http://www.basta-media.deSeite: von 7 Eine der meistbenutzten Abfragen Abfrage von Bildschirmauflösungen 12 Wir machen mobil... bei Arbeit, Spaß und Spiel @media (min-width: 1024px) { /* für hohe Auflösungen */ } @media (min-width: 450px) and (max-width: 1024px) { /* für mittlere Auflösungen (bspw. Netbooks) */ } @media (max-width: 450px) { /* für mobile Endgeräte */ } Dienstag, 17. September 13 KW
- 13. basta!media basta!media Gruppe - http://www.basta-media.deSeite: von 7 ‣ Responsive ‣ fluid Layout ‣ Adaptive ‣ mehrere fixe Layouts ‣ Hybrid ‣ Kombination aus beidem Responsive vs. Adaptive Design 13 Was versteht man unter beiden Begriffen? Wir machen mobil... bei Arbeit, Spaß und Spiel Dienstag, 17. September 13 KW
- 14. basta!media basta!media Gruppe - http://www.basta-media.deSeite: von 7 Beispiel Responsive Webdesign 14 www.basta-media.de Wir machen mobil... bei Arbeit, Spaß und Spiel Dienstag, 17. September 13 KW
- 15. basta!media basta!media Gruppe - http://www.basta-media.deSeite: von 7 Beispiel Hybrid Webdesign 15 www.sv-luebeck.de Wir machen mobil... bei Arbeit, Spaß und Spiel Dienstag, 17. September 13 KW
- 16. basta!media basta!media Gruppe - http://www.basta-media.deSeite: von 7 ‣ Konzeption und Usabilty ‣ Wireframing ‣ Design ‣ Programmierung ‣ Testing Mobile Optimierung beeinflusst alle! 16 Der gesamte Entwicklungsprozess ändert sich Wir machen mobil... bei Arbeit, Spaß und Spiel Dienstag, 17. September 13 KW
- 17. basta!media basta!media Gruppe - http://www.basta-media.deSeite: von 7 Plant Eure Website bereits im Voraus 17 Optimieren heißt auch Weglassen / Umdenken Wir machen mobil... bei Arbeit, Spaß und Spiel Quelle:ASH Berlin / Flickr: http://www.flickr.com/photos/slayeh/ Dienstag, 17. September 13 KW
- 18. basta!media basta!media Gruppe - http://www.basta-media.deSeite: von 7 Content is King 18 Design und Inhalt müssen sich dem Kontext anpassen Wir machen mobil... bei Arbeit, Spaß und Spiel ‣ Welche Breakpoints muss ich setzen? ‣ Welche Inhalte sind relevant, wenn ich z.B. ein Smartphone nutze und unterwegs bin? ‣ Wie kann ich die Usabilty erhöhen und den Content besser aufbereiten? ‣ Nutze ich in der Desktop-Variante Medien, die mobil nicht funktionieren werden? Dienstag, 17. September 13 KW
- 19. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de19 Aktuell über 6.500 verschiedene Endgeräte mit Zugang zu Internetseiten bei Arbeit, Spaß und Spiel Dienstag, 17. September 13 KW
- 20. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de20 Mobiler Traffic wächst bis 2015 jährlich um den Faktor 26. bei Arbeit, Spaß und Spiel Dienstag, 17. September 13 KW
- 21. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de21 bei Arbeit, Spaß und Spiel Quelle: http://www.fastcodesign.com/1663953/infographic-of-the-day-15-facts-about-the-internet-in-2015 Dienstag, 17. September 13 KW
- 22. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de22 bei Arbeit, Spaß und Spiel Quelle: http://www.fastcodesign.com/1663953/infographic-of-the-day-15-facts-about-the-internet-in-2015 Dienstag, 17. September 13 KW
- 23. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de23 MediaQueries werden immer weiter ausgebaut. bei Arbeit, Spaß und Spiel Dienstag, 17. September 13 KW
- 24. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de24 bei Arbeit, Spaß und Spiel Dienstag, 17. September 13 KW
- 25. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de24 color bei Arbeit, Spaß und Spiel Dienstag, 17. September 13 KW
- 26. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de24 color bei Arbeit, Spaß und Spiel monochrome Dienstag, 17. September 13 KW
- 27. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de24 color bei Arbeit, Spaß und Spiel monochrome grid Dienstag, 17. September 13 KW
- 28. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de24 color bei Arbeit, Spaß und Spiel monochrome grid scan Dienstag, 17. September 13 KW
- 29. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de24 color bei Arbeit, Spaß und Spiel monochrome grid scanorientation Dienstag, 17. September 13 KW
- 30. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de24 color bei Arbeit, Spaß und Spiel monochrome grid scanorientation aspect ratio Dienstag, 17. September 13 KW
- 31. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de24 color bei Arbeit, Spaß und Spiel monochrome grid scanorientation aspect ratio max-width Dienstag, 17. September 13 KW
- 32. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de24 color bei Arbeit, Spaß und Spiel monochrome grid scanorientation aspect ratio max-width min-width Dienstag, 17. September 13 KW
- 33. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de24 color bei Arbeit, Spaß und Spiel monochrome grid scanorientation aspect ratio max-width min-width braille Dienstag, 17. September 13 KW
- 34. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de24 color bei Arbeit, Spaß und Spiel monochrome grid scanorientation aspect ratio max-width min-width braille screen Dienstag, 17. September 13 KW
- 35. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de24 color bei Arbeit, Spaß und Spiel monochrome grid scanorientation aspect ratio max-width min-width braille screen print Dienstag, 17. September 13 KW
- 36. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de24 color bei Arbeit, Spaß und Spiel monochrome grid scanorientation aspect ratio max-width min-width braille screen print tv Dienstag, 17. September 13 KW
- 37. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de24 color bei Arbeit, Spaß und Spiel monochrome grid scanorientation aspect ratio max-width min-width braille screen print tv ... Dienstag, 17. September 13 KW
- 38. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de25 Künftig könnte es MediaQueries mit Location-Abfragen geben, mit Abfrage des Batteriestatus, der Internetgeschwindigkeit und der Helligkeit des Umgebungslichts bei Arbeit, Spaß und Spiel Dienstag, 17. September 13 KW
- 39. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de26 Gutes Tool zum Testen: http://www.responsinator.com/ bei Arbeit, Spaß und Spiel Dienstag, 17. September 13 KW
- 40. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de27 Und noch mehr Tools: http://www.basta-blog.de bei Arbeit, Spaß und Spiel Dienstag, 17. September 13 KW
- 41. basta!media Seite: von 237 Wir machen mobil... basta!media - http://www.basta-media.de28 Sexy Screenshots: http://placeit.breezi.com/ bei Arbeit, Spaß und Spiel Dienstag, 17. September 13 KW
- 42. basta!media basta!media Gruppe - http://www.basta-media.deSeite: von 7 Agenturvorstellung ‣ Thorsten Bastian Geschäftsführung & inhaltliche Beratung Telefon: +49 - 22 1 - 6 77 82 36 - 1 E-Mail: t.bastian@basta-media.de Online-Kommunikationsagentur Ihre Ansprechpartner 29 Wir stehen für Sie Rede und Antwort ‣ Jörg Gebauer Geschäftsführung & technische Beratung Telefon: +49 - 22 1 - 6 77 82 36 - 4 E-Mail: j.gebauer@basta-media.de Dienstag, 17. September 13 KW
- 43. basta!media basta!media Gruppe - http://www.basta-media.deSeite: von 7 Vielen Dank! 30 Dienstag, 17. September 13 KW