responsive webdesign - vom smartphone bis zum flat-tv, meine webseite passt
Post on 21-Dec-2014
412 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related