Responsive Web DesignVirtualtrends
Wo stehen wir?Quelle: http://wallpaperswide.com/road_to_death_valley-wallpapers.html
Das ist das Web.Quelle: http://www.flickr.com/photos/adactio/sets/72157627691092806/with/6153459388/Quelle: http://www.andr...
Das ist das Web.Quelle: http://www.flickr.com/photos/adactio/sets/72157627691092806/with/6153459388/Quelle: http://www.andr...
Das ist das Web.Quelle: http://www.flickr.com/photos/adactio/sets/72157627691092806/with/6153459388/Quelle: http://www.andr...
Das ist das Web.Quelle: http://www.flickr.com/photos/adactio/sets/72157627691092806/with/6153459388/Quelle: http://www.andr...
Das ist das Web.Quelle: http://www.flickr.com/photos/adactio/sets/72157627691092806/with/6153459388/Quelle: http://www.andr...
Das ist das Web.Quelle: http://www.flickr.com/photos/adactio/sets/72157627691092806/with/6153459388/Quelle: http://www.andr...
7,0Milliardendie Anzahl der Menschenauf der Welt…laut Prognosen sollen es 2050 dann 9.5 Milliarden Menschen seinQuelle: ht...
2,4Milliardendie Anzahl der Internetnutzerauf der ganzen Welt…das sind ~ 35% der Erdbevölkerung und eine Zuwachsrate seit ...
>1Milliardendie Anzahl von Smartphones inNutzung auf der Welt…jedes vierte „Handy“ ist ein Smartphone.Quelle: http://en.wi...
86% mobiler Internetnutzer nutzen ihremobilen Geräte von zu Hause aus…Kein Hype, sondern ein Bestandteil.Quelle: http://ta...
Der Markt wird überschwemmt mit neuen Geräten…Innerhalb von zwei Monaten erschienen diese neuen Geräte:
4"-5" Smartphones• Apple iPhone 5 (4" Apple iOS 6.0)• Nokia Lumia 920 (4.5" Microsoft Windows 8)• HTC Windows Phone 8X (4....
Mobile vs. DesktopQuelle: http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspxInterne...
Okay, was bedeutet das?
Neuen Anforderungen
unterschiedlichste Auflösungenverschiedene OS & Browservariierende Geschwindigkeit(LAN, WLAN, GPRS, EDGE, 3G, LTE)unabhängi...
Quelle: http://wtfmobileweb.com
Quelle: http://wtfmobileweb.com
Quelle: http://wtfmobileweb.com
Quelle: http://wtfmobileweb.com
Quelle: http://wtfmobileweb.com/
:-(
Quelle: http://vitamintalent.com/extra/infographics-viewer/so-you-think-you-can-build-a-website.htmResponsive Web Design
Seperate Mobile Website – Responsive Web Design
Seperate Mobile Website
Pflegeaufwand
hoher Kostenaufwandmain.csstemplate.csswidget.cssChromeFirefoxSafariInternetExplorerProduktinfosNewsartikelm.main.cssm.tem...
URL Management
http://www.example.com http://m.example.com  
http://www.example.com http://m.example.com  A B C
SuchmachinenoptimierungQuelle: https://developers.google.com/webmasters/smartphone-sites/details
Quelle: https://developers.google.com/webmasters/smartphone-sites/details…
Responsive Web Design
Content

ContentCoreThemenStil NachrichtTonPrioritäten AufteilungAnordnung
Quelle: http://www.listofimages.com
UX
User eXperience
Navigation
Menue EinzMenue ZweiMenue DreiMenue VierMenue FünfMenue SechsCompany GmbHHallo, wir sind das weltweitgrößte Unternehmen fü...
Touch & Gesten
http://www.lukew.com/ff/entry.asp?1071TapDoppel-TapDragFlick, Swipe, Wischen
Maus - click Finger - swipe
Feature Detection
GEOlocation
Wieviel kostet Responsive Webdesign?Die Antwort: 13,47€
Hä?
Fakt ist, Responsive Design kostet mehr…
Fakt ist, Responsive Design kostet mehr… als nichts zu tun.
Mobile vs. DesktopQuelle: http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspxInterne...
Mobile Weltimmer mehr Smartphones & Tablets~ 2014 mehr mobile Nutzer als DesktopNeue Anforderungenunterschiedliche Auflösun...
Responsive Web DesignVirtualtrends
Digital Media Night - Responsive Web Design
Digital Media Night - Responsive Web Design
Nächste SlideShare
Wird geladen in …5
×

Digital Media Night - Responsive Web Design

537 Aufrufe

Veröffentlicht am

Responsive Web Design, die Zukunft des Web!

Virtualtrends veranstaltet mehrmals im Jahr die Digital Media Night. Auf dieser Veranstaltung vermitteln wir Wissen aus der Branche und informieren über aktuelle Trends.

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
537
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Digital Media Night - Responsive Web Design

  1. 1. Responsive Web DesignVirtualtrends
  2. 2. Wo stehen wir?Quelle: http://wallpaperswide.com/road_to_death_valley-wallpapers.html
  3. 3. Das ist das Web.Quelle: http://www.flickr.com/photos/adactio/sets/72157627691092806/with/6153459388/Quelle: http://www.androidtapp.com/preview-of-lg-google-tv/lg-google-tv/Quelle: http://www.superiormediasolutions.net/engagement-levels-iphone-vs-ipad-know-thy-user-and-now-know-thy-device/#.UQfPMUpJbAAQuelle: http://bydragonfly.com/Quelle: http://www.flickr.com/photos/kiwanja/3169447879http://www.popphoto.com/gear/2012/05/first-video-recorded-google-glasses
  4. 4. Das ist das Web.Quelle: http://www.flickr.com/photos/adactio/sets/72157627691092806/with/6153459388/Quelle: http://www.androidtapp.com/preview-of-lg-google-tv/lg-google-tv/Quelle: http://www.superiormediasolutions.net/engagement-levels-iphone-vs-ipad-know-thy-user-and-now-know-thy-device/#.UQfPMUpJbAAQuelle: http://bydragonfly.com/Quelle: http://www.flickr.com/photos/kiwanja/3169447879http://www.popphoto.com/gear/2012/05/first-video-recorded-google-glasses
  5. 5. Das ist das Web.Quelle: http://www.flickr.com/photos/adactio/sets/72157627691092806/with/6153459388/Quelle: http://www.androidtapp.com/preview-of-lg-google-tv/lg-google-tv/Quelle: http://www.superiormediasolutions.net/engagement-levels-iphone-vs-ipad-know-thy-user-and-now-know-thy-device/#.UQfPMUpJbAAQuelle: http://bydragonfly.com/Quelle: http://www.flickr.com/photos/kiwanja/3169447879http://www.popphoto.com/gear/2012/05/first-video-recorded-google-glasses
  6. 6. Das ist das Web.Quelle: http://www.flickr.com/photos/adactio/sets/72157627691092806/with/6153459388/Quelle: http://www.androidtapp.com/preview-of-lg-google-tv/lg-google-tv/Quelle: http://www.superiormediasolutions.net/engagement-levels-iphone-vs-ipad-know-thy-user-and-now-know-thy-device/#.UQfPMUpJbAAQuelle: http://bydragonfly.com/Quelle: http://www.flickr.com/photos/kiwanja/3169447879http://www.popphoto.com/gear/2012/05/first-video-recorded-google-glasses
  7. 7. Das ist das Web.Quelle: http://www.flickr.com/photos/adactio/sets/72157627691092806/with/6153459388/Quelle: http://www.androidtapp.com/preview-of-lg-google-tv/lg-google-tv/Quelle: http://www.superiormediasolutions.net/engagement-levels-iphone-vs-ipad-know-thy-user-and-now-know-thy-device/#.UQfPMUpJbAAQuelle: http://bydragonfly.com/Quelle: http://www.flickr.com/photos/kiwanja/3169447879http://www.popphoto.com/gear/2012/05/first-video-recorded-google-glasses
  8. 8. Das ist das Web.Quelle: http://www.flickr.com/photos/adactio/sets/72157627691092806/with/6153459388/Quelle: http://www.androidtapp.com/preview-of-lg-google-tv/lg-google-tv/Quelle: http://www.superiormediasolutions.net/engagement-levels-iphone-vs-ipad-know-thy-user-and-now-know-thy-device/#.UQfPMUpJbAAQuelle: http://bydragonfly.com/Quelle: http://www.flickr.com/photos/kiwanja/3169447879http://www.popphoto.com/gear/2012/05/first-video-recorded-google-glasses
  9. 9. 7,0Milliardendie Anzahl der Menschenauf der Welt…laut Prognosen sollen es 2050 dann 9.5 Milliarden Menschen seinQuelle: http://www.internetworldstats.com/stats.htm
  10. 10. 2,4Milliardendie Anzahl der Internetnutzerauf der ganzen Welt…das sind ~ 35% der Erdbevölkerung und eine Zuwachsrate seit 2000 von > 550%Quelle: http://www.internetworldstats.com/stats.htm
  11. 11. >1Milliardendie Anzahl von Smartphones inNutzung auf der Welt…jedes vierte „Handy“ ist ein Smartphone.Quelle: http://en.wikipedia.org/wiki/List_of_countries_by_number_of_mobile_phones_in_use
  12. 12. 86% mobiler Internetnutzer nutzen ihremobilen Geräte von zu Hause aus…Kein Hype, sondern ein Bestandteil.Quelle: http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx
  13. 13. Der Markt wird überschwemmt mit neuen Geräten…Innerhalb von zwei Monaten erschienen diese neuen Geräte:
  14. 14. 4"-5" Smartphones• Apple iPhone 5 (4" Apple iOS 6.0)• Nokia Lumia 920 (4.5" Microsoft Windows 8)• HTC Windows Phone 8X (4.3" Microsoft Windows 8)• HTC Windows Phone 8S (4.0" Microsoft Windows 8)• Motorola Droid RAZR HD (4.7" Google Android 4.0)• Motorola Droid RAZR M (4.3" Google Android 4.0)• TBD: LG Nexus 4 (4.7" Google Android 4.2)5"-6" Phone/Tablet Hybrids• Samsung Galaxy Note II (5.5" Google Android 4.0)7"-8" Tablets• iPad Mini (7.9" Apple iOS 6.0)• Kindle Fire HD (7" Google Android 4.0 modified)• Kindle Fire (7" Google Android 4.0 modified)20"-30" Desktops• Sony Tap 20 (20" touch screen Microsoft Windows 8)• 21.5-inch iMac (21.5" Apple OSX 10.8)• 27-inch iMac (27" Apple OSX 10.8)9"-10" Tablets• iPad Gen 4 (9.7" Apple iOS 6.0)• Microsoft Surface Tablet (10.6" Microsoft Windows 8)• Kindle Fire HD (8.9" Google Android 4.0 modified)• Lenovo ThinkPad Tablet 2 (10.1" Microsoft Windows 8)• Acer Iconia Tab W510 (10.1" Microsoft Windows 8)• Dell Latitude 10 (10.1" Microsoft Windows 8)• Dell XPS 10 (10.1" Microsoft Windows 8)• Asus Vivo Tab RT (10.1" Microsoft Windows 8)• TBD: Nexus 10 (10" Google Android 4.2)11"-17" Laptops & Convertibles (Tablet/Laptop)• 13" MacBook Pro with Retina (13" Apple OSX 10.8)• Lenovo IdeaPad Yoga 13 (13.3" Microsoft Windows 8)• Lenovo ThinkPad Twist (12.5" Microsoft Windows 8)• Toshiba Satellite U925T (12.5" Microsoft Windows 8)• Dell XPS 12 (12.5" Microsoft Windows 8)• Lenovo IdeaTab Lynx (11.6" Microsoft Windows 8)• Samsung ATIV Smart PC 500T/700T (11.6" Microsoft Windows 8)• Acer Iconia W700 (11.6" Microsoft Windows 8)• Sony Vaio Duo 11 (11.6" Microsoft Windows 8)• Samsung Chromebook (11.6" Google Chrome OS)
  15. 15. Mobile vs. DesktopQuelle: http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspxInternetnutzer(Millionen)2007 2009 2011 2013 2015400800120016002000
  16. 16. Okay, was bedeutet das?
  17. 17. Neuen Anforderungen
  18. 18. unterschiedlichste Auflösungenverschiedene OS & Browservariierende Geschwindigkeit(LAN, WLAN, GPRS, EDGE, 3G, LTE)unabhängige Orte/Kontextedamit verbunden: Zeit/Kosten
  19. 19. Quelle: http://wtfmobileweb.com
  20. 20. Quelle: http://wtfmobileweb.com
  21. 21. Quelle: http://wtfmobileweb.com
  22. 22. Quelle: http://wtfmobileweb.com
  23. 23. Quelle: http://wtfmobileweb.com/
  24. 24. :-(
  25. 25. Quelle: http://vitamintalent.com/extra/infographics-viewer/so-you-think-you-can-build-a-website.htmResponsive Web Design
  26. 26. Seperate Mobile Website – Responsive Web Design
  27. 27. Seperate Mobile Website
  28. 28. Pflegeaufwand
  29. 29. hoher Kostenaufwandmain.csstemplate.csswidget.cssChromeFirefoxSafariInternetExplorerProduktinfosNewsartikelm.main.cssm.template.cssm.widget.cssiPhone4,iPhone5Galaxy SIIINexus 4m.Produktinfosm.Newsartikel
  30. 30. URL Management
  31. 31. http://www.example.com http://m.example.com  
  32. 32. http://www.example.com http://m.example.com  A B C
  33. 33. SuchmachinenoptimierungQuelle: https://developers.google.com/webmasters/smartphone-sites/details
  34. 34. Quelle: https://developers.google.com/webmasters/smartphone-sites/details…
  35. 35. Responsive Web Design
  36. 36. Content
  37. 37.
  38. 38. ContentCoreThemenStil NachrichtTonPrioritäten AufteilungAnordnung
  39. 39. Quelle: http://www.listofimages.com
  40. 40. UX
  41. 41. User eXperience
  42. 42. Navigation
  43. 43. Menue EinzMenue ZweiMenue DreiMenue VierMenue FünfMenue SechsCompany GmbHHallo, wir sind das weltweitgrößte Unternehmen fürDemotexte und Demobilder.off-canvas navigationCompany GmbHHallo, wir sind das weltweitgrößte Unternehmen fürDemotexte und Demobilder.Menue EinzMenue ZweiMenue DreiMenue VierMenue FünfMenue Sechsdropdown navigation
  44. 44. Touch & Gesten
  45. 45. http://www.lukew.com/ff/entry.asp?1071TapDoppel-TapDragFlick, Swipe, Wischen
  46. 46. Maus - click Finger - swipe
  47. 47. Feature Detection
  48. 48. GEOlocation
  49. 49. Wieviel kostet Responsive Webdesign?Die Antwort: 13,47€
  50. 50. Hä?
  51. 51. Fakt ist, Responsive Design kostet mehr…
  52. 52. Fakt ist, Responsive Design kostet mehr… als nichts zu tun.
  53. 53. Mobile vs. DesktopQuelle: http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspxInternetnutzer(Millionen)2007 2009 2011 2013 2015400800120016002000
  54. 54. Mobile Weltimmer mehr Smartphones & Tablets~ 2014 mehr mobile Nutzer als DesktopNeue Anforderungenunterschiedliche Auflösungvariierende GeschwindigkeitenAnpassungsfähiges DesignWebsite wächst mitContent ist Könighochwertiger InhaltUser Experiencetouch Gestikengerätespezifische Funktionen    
  55. 55. Responsive Web DesignVirtualtrends

×