„Unsere Website ist für eine Bildschirmauflösung von 1024 x 768 Pixel optimiert.“ Diese oft auf Homepages zu lesenden Worte gehören der Vergangenheit an! Verschiedene Bildschirmgrößen und die Unterschiedlichkeit von Geräten mit Internetzugang stellen komplett neue Anforderungen an Ihre Website. Ihre Kunden und Partner surfen unterwegs auf dem Smartphone oder informieren sich auf der Wohnzimmer-Couch per Tablet-PC oder über den integrierten Browser Ihres Flachbildfernsehers, über das Angebot und die Produkte Ihres Unternehmens. In dieser Session möchte ich Ihnen zeigen auf welche Rahmenbedingungen Sie sich einlassen müssen und wie Response Webdesign es möglich macht mit nur einer Website optimal auf die unterschiedlichsten Geräte vorbereitet zu sein.

1. 7.#März#2013#
FH#Salzburg#
RESPONSIVE#WEBDESIGN#
Vom#Smartphone#bis#zum#FlatHTV,#meine#
Website#passt!#
Werner#Haring#
Werner#Haring#|#New#Media#MarkePng#

2. 7.#März#2013#
FH#Salzburg#
AGENDA#
• Unsere#ZukunT#Gegenwart#ist#mobil!#
• Wo#liegt#das#Problem?#
• Was#kann#Responsive#Webdesign#für#mich#tun?#
• Wie#kann#das#aussehen?#
• Wie#geht‘s#weiter?#

3. 7.#März#2013#
FH#Salzburg#
Quelle:#h]p://www.wired.com/images_blogs/business/2011/08/jobs1984.jpg#

4. 7.#März#2013#
FH#Salzburg#
ZEITEN#ÄNDERN#SICH#
Quelle:#h]p://trialx.com/curetalk/wpHcontent/blogs.dir/7/files/2012/10/steveHjobsH5.jpg#

5. 7.#März#2013#
FH#Salzburg#
Quelle:#Trendone,#Media#EvoluPon#

6. 7.#März#2013#
FH#Salzburg#
Quelle:#Trendone,#Media#EvoluPon#

7. 7.#März#2013#
FH#Salzburg#
Quelle:#Trendone,#Media#EvoluPon#

8. 7.#März#2013#
FH#Salzburg#
DIGITALE#KOMMUNIKATION#IST#MOBIL#&#
INFORMATION#IST#INTERAKTION.#
Quelle:#Trendone,#Media#EvoluPon#

9. 7.#März#2013#
FH#Salzburg#
AUS...#
Quelle:#h]p://www.topcoder.com/wpHcontent/uploads/2013/01/mulPple_devices.jpg#

10. 7.#März#2013#
FH#Salzburg#
...WURDE...#
Quelle:#h]p://www.mirada.tv/wpHcontent/uploads/2012/07/devices_01.png#

11. 7.#März#2013#
FH#Salzburg#
UNSERE#ZUKUNFT#GEGENWART#IST#MOBIL!#
36%''
Smartphone'Penetra2on'Q1/12'
Quelle:#Google,#Unser#mobiler#Planet:#Österreich,#Mai#2012#

12. 7.#März#2013#
FH#Salzburg#
UNSERE#ZUKUNFT#GEGENWART#IST#MOBIL!#
Quelle:#Google,#Unser#mobiler#Planet:#Österreich,#Mai#2012#

13. 7.#März#2013#
FH#Salzburg#
UNSERE#ZUKUNFT#GEGENWART#IST#MOBIL!#
24%#würden#eher#auf##
Ihren#Fernseher#verzichten##
als#auf#ihr#Smartphone.#
Quelle:#Google,#Unser#mobiler#Planet:#Österreich,#Mai#2012#

14. 7.#März#2013#
FH#Salzburg#
UNSERE#ZUKUNFT#GEGENWART#IST#MOBIL!#
41%#suchen#täglich#mit##
ihrem#Smartphone.#
#
58%#davon#suchen#
ProdukPnfos#(danach#Restaurant,#Reisen,#etc.)#
Quelle:#Google,#Unser#mobiler#Planet:#Österreich,#Mai#2012#

15. 7.#März#2013#
FH#Salzburg#
UNSERE#ZUKUNFT#GEGENWART#IST#MOBIL!#
1/3#EHMails#werden#
auf#Smartphones#geöffnet.#
#
Quelle:#m#L2HIntelligenceHReportHMobileH2013,#

16. 7.#März#2013#
FH#Salzburg#
DAS#BEDEUTET:#
5,4#Mio#Österreicher#>#19#Jahren#
2,1#Mio#SmartphoneHBesitzer#
##
>860.000'Suchende'im'mobile'Web/Tag!!!'
'
Und...#>10%#aller#Websiteaufrufe#weltweit#sind#mobil!#
Quelle:#Google,#Unser#mobiler#Planet:#Österreich,#Mai#2012,#
h]p://mobithinking.com/mobileHmarkePngHtools/latestHmobileHstats/b#mobilepageviews#

17. 7.#März#2013#
FH#Salzburg#
WO#LIEGT#DAS#PROBLEM?#
Viele#suchen,#aber#Wenige#bieten#gut#erfassbare##
InformaPon#an!#
'
Ergebnis:''
Frusta2on'&'viele'verlorene'Kundenkontakte!'
Quelle:#Google,#Unser#mobiler#Planet:#Österreich,#Mai#2012#

18. 7.#März#2013#
FH#Salzburg#
BEISPIEL:#„MALER#SALZBURG“#

19. 7.#März#2013#
FH#Salzburg#
BEISPIEL:#„MALER#SALZBURG“#

20. 7.#März#2013#
FH#Salzburg#

21. 7.#März#2013#
FH#Salzburg#
WAS#KANN#RESPONSIVE#
WEBDESIGN#FÜR#MICH#TUN?#
#
www.website.at# tablet.website.at# m.website.at#

22. 7.#März#2013#
FH#Salzburg#
WAS#KANN#RESPONSIVE#
WEBDESIGN#FÜR#MICH#TUN?#
#
www.website.at#

23. 7.#März#2013#
FH#Salzburg#
WAS#MUSS#MEINE#WEBSITE#AM#
SMARTPHONE#KÖNNEN?#
Eigenschaften des Devices nutzen
(passendes Keyboard für
Ladezeiten minimieren – Lazy- Formularfeld, Anruflink, etc.)
loading, nachladen mit jQuery, etc.
Interaktion ermöglichen – Navigation
Website erreichbar machen (kein vs. Scrolling
Flash, Content erkennbar/lesbar
machen, etc.)
Quelle:#Brad#Frost#frei#nach#Kristofer#Layon#
h]p://mobile.smashingmagazine.com/2012/08/22/separateHmobileHresponsiveHwebsiteHpresidenPalHsmackdown/##

24. 7.#März#2013#
FH#Salzburg#
SEITENELEMENTE#

25. 7.#März#2013#
FH#Salzburg#
DAS#MENÜ#
Klick auf den Menübutton
„verschiebt“ das Canvas
Canvas#
Beispiel:#Facebook#Touch#(h]p://touch.facebook.com)#

26. 7.#März#2013#
FH#Salzburg#
OPTIMIERTE#GRAFIKEN#
Quelle:#h]p://www.creaPvegroup.de/blog/wpHcontent/uploads/2012/09/wordpressHhighHresoluPonHrePnaHsupport.jpg#

27. 7.#März#2013#
FH#Salzburg#
UND#SO#SIEHT‘S#AUS:#
Quelle:#h]p://aneventapart.com/event/atlantaH2013#

28. 7.#März#2013#
FH#Salzburg#
Quelle:#h]p://aneventapart.com/event/atlantaH2013#

29. 7.#März#2013#
FH#Salzburg#
Quelle:#h]ps://status.heroku.com/#

30. 7.#März#2013#
FH#Salzburg#
Quelle:#h]ps://status.heroku.com/#

31. 7.#März#2013#
FH#Salzburg#
Quelle:#h]p://parke]Hgassner.at#

32. 7.#März#2013#
FH#Salzburg#
Quelle:#h]p://parke]Hgassner.at#

33. 7.#März#2013#
FH#Salzburg#
SOWEIT#KANN#DAS#GEHEN...#
Quelle:#h]p://webdesign.maratz.com/lab/responsivetypography/realPme/#

34. 7.#März#2013#
FH#Salzburg#
VORTEILE#RESPONSIVE#DESIGN#
Quelle:#frei#nach#h]p://googlemobileads.blogspot.co.at/2012/07/mobileHwebsitesHvsHresponsiveHdesign.html#

35. 7.#März#2013#
FH#Salzburg#
WO#GEHT‘S#MOBIL#HIN?#
Mit#Ende#2013#werden#weltweit#54%#aller#Handys#
Smartphones#sein#=#ca.#3,5#Mrd.#Smartphones#
#
16%#aller#österreichischen#Smartphone#Nutzer#die#jetzt#schon#
das#Internet#nutzen#wollen#in#den#nächsten#12#Monaten#mobil#
einkaufen#
#
#
#
#
Quelle:#Google,#Unser#mobiler#Planet:#Österreich,#Mai#2012,#
h]p://mobithinking.com/mobileHmarkePngHtools/latestHmobileHstats/a#subscribers#

36. 7.#März#2013#
FH#Salzburg#
Quelle:#Brad#Frost#frei#nach#Kristofer#Layon#
h]p://mobile.smashingmagazine.com/2012/08/22/separateHmobileHresponsiveHwebsiteHpresidenPalHsmackdown/##

37. 7.#März#2013#
FH#Salzburg#
Mag.'Werner'Haring,'BSc'
#
+43#660#427#46#49#
office@wernerharing.at#
www.wernerharing.at#
#
h]p://www.facebook.com/haringwerner#
h]p://www.twi]er.com/wernerharing#

38. 7. März 2013
FH Salzburg
WIR DANKEN
UNSEREN SPONSOREN