7.#März#2013#

FH#Salzburg#

RESPONSIVE#WEBDESIGN#

Vom#Smartphone#bis#zum#FlatHTV,#meine#

Website#passt!#

Werner#Haring#

Werner#Haring#|#New#Media#MarkePng#

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?#

7.#März#2013#

FH#Salzburg#

Quelle:#h]p://www.wired.com/images_blogs/business/2011/08/jobs1984.jpg#

7.#März#2013#

FH#Salzburg#

ZEITEN#ÄNDERN#SICH#

Quelle:#h]p://trialx.com/curetalk/wpHcontent/blogs.dir/7/files/2012/10/steveHjobsH5.jpg#

7.#März#2013#

FH#Salzburg#

Quelle:#Trendone,#Media#EvoluPon#

7.#März#2013#

FH#Salzburg#

Quelle:#Trendone,#Media#EvoluPon#

7.#März#2013#

FH#Salzburg#

Quelle:#Trendone,#Media#EvoluPon#

7.#März#2013#

FH#Salzburg#

DIGITALE#KOMMUNIKATION#IST#MOBIL#&#

INFORMATION#IST#INTERAKTION.#

Quelle:#Trendone,#Media#EvoluPon#

7.#März#2013#

FH#Salzburg#

AUS...#

Quelle:#h]p://www.topcoder.com/wpHcontent/uploads/2013/01/mulPple_devices.jpg#

7.#März#2013#

FH#Salzburg#

...WURDE...#

Quelle:#h]p://www.mirada.tv/wpHcontent/uploads/2012/07/devices_01.png#

7.#März#2013#

FH#Salzburg#

UNSERE#ZUKUNFT#GEGENWART#IST#MOBIL!#

Quelle:#Google,#Unser#mobiler#Planet:#Österreich,#Mai#2012#

36%''Smartphone'Penetra2on'Q1/12'

7.#März#2013#

FH#Salzburg#

UNSERE#ZUKUNFT#GEGENWART#IST#MOBIL!#

Quelle:#Google,#Unser#mobiler#Planet:#Österreich,#Mai#2012#

7.#März#2013#

FH#Salzburg#

UNSERE#ZUKUNFT#GEGENWART#IST#MOBIL!#

Quelle:#Google,#Unser#mobiler#Planet:#Österreich,#Mai#2012#

24%#würden#eher#auf##Ihren#Fernseher#verzichten##

als#auf#ihr#Smartphone.#

7.#März#2013#

FH#Salzburg#

UNSERE#ZUKUNFT#GEGENWART#IST#MOBIL!#

Quelle:#Google,#Unser#mobiler#Planet:#Österreich,#Mai#2012#

41%#suchen#täglich#mit##

ihrem#Smartphone.#

#

58%#davon#suchen#

ProdukPnfos#(danach#Restaurant,#Reisen,#etc.)#

7.#März#2013#

FH#Salzburg#

UNSERE#ZUKUNFT#GEGENWART#IST#MOBIL!#

Quelle:#m#L2HIntelligenceHReportHMobileH2013,#

1/3#EHMails#werden#

auf#Smartphones#geöffnet.##

7.#März#2013#

FH#Salzburg#

DAS#BEDEUTET:#

Quelle:#Google,#Unser#mobiler#Planet:#Österreich,#Mai#2012,#

h]p://mobithinking.com/mobileHmarkePngHtools/latestHmobileHstats/b#mobilepageviews#

5,4#Mio#Österreicher#>#19#Jahren#

2,1#Mio#SmartphoneHBesitzer#

##

>860.000'Suchende'im'mobile'Web/Tag!!!''Und...#>10%#aller#Websiteaufrufe#weltweit#sind#mobil!#

7.#März#2013#

FH#Salzburg#

WO#LIEGT#DAS#PROBLEM?#

Quelle:#Google,#Unser#mobiler#Planet:#Österreich,#Mai#2012#

Viele#suchen,#aber#Wenige#bieten#gut#erfassbare##

InformaPon#an!#

'Ergebnis:''Frusta2on'&'viele'verlorene'Kundenkontakte!'

7.#März#2013#

FH#Salzburg#

BEISPIEL:#„MALER#SALZBURG“#

7.#März#2013#

FH#Salzburg#

BEISPIEL:#„MALER#SALZBURG“#

7.#März#2013#

FH#Salzburg#

7.#März#2013#

FH#Salzburg#

WAS#KANN#RESPONSIVE#

WEBDESIGN#FÜR#MICH#TUN?#

#

www.website.at# tablet.website.at# m.website.at#

7.#März#2013#

FH#Salzburg#

WAS#KANN#RESPONSIVE#

WEBDESIGN#FÜR#MICH#TUN?#

#www.website.at#

7.#März#2013#

FH#Salzburg#

WAS#MUSS#MEINE#WEBSITE#AM#

SMARTPHONE#KÖNNEN?#

Website erreichbar machen (kein Flash, Content erkennbar/lesbar machen, etc.)

Interaktion ermöglichen – Navigation vs. Scrolling

Eigenschaften des Devices nutzen (passendes Keyboard für Formularfeld, Anruflink, etc.) Ladezeiten minimieren – Lazy-

loading, nachladen mit jQuery, etc.

Quelle:#Brad#Frost#frei#nach#Kristofer#Layon#

h]p://mobile.smashingmagazine.com/2012/08/22/separateHmobileHresponsiveHwebsiteHpresidenPalHsmackdown/##

7.#März#2013#

FH#Salzburg#

SEITENELEMENTE#

7.#März#2013#

FH#Salzburg#

DAS#MENÜ#

Canvas#

Beispiel:#Facebook#Touch#(h]p://touch.facebook.com)#

Klick auf den Menübutton „verschiebt“ das Canvas

7.#März#2013#

FH#Salzburg#

OPTIMIERTE#GRAFIKEN#

Quelle:#h]p://www.creaPvegroup.de/blog/wpHcontent/uploads/2012/09/wordpressHhighHresoluPonHrePnaHsupport.jpg#

7.#März#2013#

FH#Salzburg#

UND#SO#SIEHT‘S#AUS:#

Quelle:#h]p://aneventapart.com/event/atlantaH2013#

7.#März#2013#

FH#Salzburg#

Quelle:#h]p://aneventapart.com/event/atlantaH2013#

7.#März#2013#

FH#Salzburg#

Quelle:#h]ps://status.heroku.com/#

7.#März#2013#

FH#Salzburg#

Quelle:#h]ps://status.heroku.com/#

7.#März#2013#

FH#Salzburg#

Quelle:#h]p://parke]Hgassner.at#

7.#März#2013#

FH#Salzburg#

Quelle:#h]p://parke]Hgassner.at#

7.#März#2013#

FH#Salzburg#

Quelle:#h]p://webdesign.maratz.com/lab/responsivetypography/realPme/#

SOWEIT#KANN#DAS#GEHEN...#

7.#März#2013#

FH#Salzburg#

Quelle:#frei#nach#h]p://googlemobileads.blogspot.co.at/2012/07/mobileHwebsitesHvsHresponsiveHdesign.html#

VORTEILE#RESPONSIVE#DESIGN#

7.#März#2013#

FH#Salzburg#

Quelle:#Google,#Unser#mobiler#Planet:#Österreich,#Mai#2012,#

h]p://mobithinking.com/mobileHmarkePngHtools/latestHmobileHstats/a#subscribers#

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#

#

#

#

#

7.#März#2013#

FH#Salzburg#

Quelle:#Brad#Frost#frei#nach#Kristofer#Layon#

h]p://mobile.smashingmagazine.com/2012/08/22/separateHmobileHresponsiveHwebsiteHpresidenPalHsmackdown/##

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#

7. März 2013FH Salzburg

WIR DANKEN UNSEREN SPONSOREN