Responsive Webdesign - Vom Smartphone bis zum Flat-TV, meine Webseite passt

  • 405 views
Uploaded on

„Unsere Website ist für eine Bildschirmauflösung von 1024 x 768 Pixel optimiert.“ …

„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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
405
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
27
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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% SmartphonePenetra2onQ1/12Quelle:#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.000SuchendeimmobileWeb/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&vieleverloreneKundenkontakte!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ürLadezeiten minimieren – Lazy- Formularfeld, Anruflink, etc.)loading, nachladen mit jQuery, etc. Interaktion ermöglichen – NavigationWebsite erreichbar machen (kein vs. ScrollingFlash, Content erkennbar/lesbarmachen, 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 CanvasCanvas# 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.WernerHaring,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 DANKENUNSEREN SPONSOREN