Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
7.#März#2013#                                FH#Salzburg#RESPONSIVE#WEBDESIGN#Vom#Smartphone#bis#zum#FlatHTV,#meine#Websit...
7.#März#2013#                                   FH#Salzburg#                     AGENDA#•    Unsere#ZukunT#Gegenwart#ist#m...
7.#März#2013#                                                                           FH#Salzburg#Quelle:#h]p://www.wire...
7.#März#2013#                                                                                           FH#Salzburg#      ...
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.#     ...
7.#März#2013#                                                                                  FH#Salzburg#               ...
7.#März#2013#                                                                          FH#Salzburg#                       ...
7.#März#2013#                                                               FH#Salzburg#             UNSERE#ZUKUNFT#GEGENW...
7.#März#2013#                                                               FH#Salzburg#             UNSERE#ZUKUNFT#GEGENW...
7.#März#2013#                                                               FH#Salzburg#             UNSERE#ZUKUNFT#GEGENW...
7.#März#2013#                                                               FH#Salzburg#             UNSERE#ZUKUNFT#GEGENW...
7.#März#2013#                                                  FH#Salzburg#            UNSERE#ZUKUNFT#GEGENWART#IST#MOBIL!...
7.#März#2013#                                                                                   FH#Salzburg#              ...
7.#März#2013#                                                               FH#Salzburg#                                  ...
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?#            ...
7.#März#2013#                  FH#Salzburg# WAS#KANN#RESPONSIVE#WEBDESIGN#FÜR#MICH#TUN?#            #       www.website.at#
7.#März#2013#                                                                                                         FH#S...
7.#März#2013#            FH#Salzburg#SEITENELEMENTE#
7.#März#2013#                                    FH#Salzburg#          DAS#MENÜ#              Klick auf den Menübutton    ...
7.#März#2013#                                                                                    FH#Salzburg#             ...
7.#März#2013#                                                      FH#Salzburg# UND#SO#SIEHT‘S#AUS:#Quelle:#h]p://aneventa...
7.#März#2013#                                                      FH#Salzburg#Quelle:#h]p://aneventapart.com/event/atlant...
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#                   SOWEI...
7.#März#2013#                                                                                         FH#Salzburg#        ...
7.#März#2013#                                                        FH#Salzburg#              WO#GEHT‘S#MOBIL#HIN?#     M...
7.#März#2013#                                                                                                        FH#Sa...
7.#März#2013#                                 FH#Salzburg#Mag.WernerHaring,BSc#+43#660#427#46#49#office@wernerharing.at#www....
7. März 2013              FH Salzburg   WIR DANKENUNSEREN SPONSOREN
Upcoming SlideShare
Loading in …5
×

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

819 views

Published on

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

  • Be the first to comment

  • Be the first to like this

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

  1. 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. 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. 3. 7.#März#2013# FH#Salzburg#Quelle:#h]p://www.wired.com/images_blogs/business/2011/08/jobs1984.jpg#
  4. 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. 5. 7.#März#2013# FH#Salzburg# Quelle:#Trendone,#Media#EvoluPon#
  6. 6. 7.#März#2013# FH#Salzburg# Quelle:#Trendone,#Media#EvoluPon#
  7. 7. 7.#März#2013# FH#Salzburg# Quelle:#Trendone,#Media#EvoluPon#
  8. 8. 7.#März#2013# FH#Salzburg#DIGITALE#KOMMUNIKATION#IST#MOBIL#&# INFORMATION#IST#INTERAKTION.# Quelle:#Trendone,#Media#EvoluPon#
  9. 9. 7.#März#2013# FH#Salzburg# AUS...#Quelle:#h]p://www.topcoder.com/wpHcontent/uploads/2013/01/mulPple_devices.jpg#
  10. 10. 7.#März#2013# FH#Salzburg# ...WURDE...#Quelle:#h]p://www.mirada.tv/wpHcontent/uploads/2012/07/devices_01.png#
  11. 11. 7.#März#2013# FH#Salzburg# UNSERE#ZUKUNFT#GEGENWART#IST#MOBIL!# 36% SmartphonePenetra2onQ1/12Quelle:#Google,#Unser#mobiler#Planet:#Österreich,#Mai#2012#
  12. 12. 7.#März#2013# FH#Salzburg# UNSERE#ZUKUNFT#GEGENWART#IST#MOBIL!#Quelle:#Google,#Unser#mobiler#Planet:#Österreich,#Mai#2012#
  13. 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. 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. 15. 7.#März#2013# FH#Salzburg# UNSERE#ZUKUNFT#GEGENWART#IST#MOBIL!# 1/3#EHMails#werden# auf#Smartphones#geöffnet.# #Quelle:#m#L2HIntelligenceHReportHMobileH2013,#
  16. 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. 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. 18. 7.#März#2013# FH#Salzburg#BEISPIEL:#„MALER#SALZBURG“#
  19. 19. 7.#März#2013# FH#Salzburg#BEISPIEL:#„MALER#SALZBURG“#
  20. 20. 7.#März#2013# FH#Salzburg#
  21. 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. 22. 7.#März#2013# FH#Salzburg# WAS#KANN#RESPONSIVE#WEBDESIGN#FÜR#MICH#TUN?# # www.website.at#
  23. 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. 24. 7.#März#2013# FH#Salzburg#SEITENELEMENTE#
  25. 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. 26. 7.#März#2013# FH#Salzburg# OPTIMIERTE#GRAFIKEN#Quelle:#h]p://www.creaPvegroup.de/blog/wpHcontent/uploads/2012/09/wordpressHhighHresoluPonHrePnaHsupport.jpg#
  27. 27. 7.#März#2013# FH#Salzburg# UND#SO#SIEHT‘S#AUS:#Quelle:#h]p://aneventapart.com/event/atlantaH2013#
  28. 28. 7.#März#2013# FH#Salzburg#Quelle:#h]p://aneventapart.com/event/atlantaH2013#
  29. 29. 7.#März#2013# FH#Salzburg#Quelle:#h]ps://status.heroku.com/#
  30. 30. 7.#März#2013# FH#Salzburg#Quelle:#h]ps://status.heroku.com/#
  31. 31. 7.#März#2013# FH#Salzburg#Quelle:#h]p://parke]Hgassner.at#
  32. 32. 7.#März#2013# FH#Salzburg#Quelle:#h]p://parke]Hgassner.at#
  33. 33. 7.#März#2013# FH#Salzburg# SOWEIT#KANN#DAS#GEHEN...#Quelle:#h]p://webdesign.maratz.com/lab/responsivetypography/realPme/#
  34. 34. 7.#März#2013# FH#Salzburg# VORTEILE#RESPONSIVE#DESIGN#Quelle:#frei#nach#h]p://googlemobileads.blogspot.co.at/2012/07/mobileHwebsitesHvsHresponsiveHdesign.html#
  35. 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. 36. 7.#März#2013# FH#Salzburg#Quelle:#Brad#Frost#frei#nach#Kristofer#Layon#h]p://mobile.smashingmagazine.com/2012/08/22/separateHmobileHresponsiveHwebsiteHpresidenPalHsmackdown/##
  37. 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. 38. 7. März 2013 FH Salzburg WIR DANKENUNSEREN SPONSOREN

×