Einführung und erster Überblick Repsonsive Webdesign im Rahmen des Joomla!Day Deutschland 2013 in Nürnberg.

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