asoluto: Be Responsive! Überall 2013

417 views

Published on

Be Responsive!
Warum man trotz App-Hype die Websites nicht vergessen darf.

Vortrag von Martin Verdino, Managing Partner von asoluto public + interactive relations, zum Thema Responsive Design auf der Überall 2013 – 1st ANNUAL APP CONGRESS VIENNA

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
417
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

asoluto: Be Responsive! Überall 2013

  1. 1. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Martin Verdinobe responsive!ÜBERALL 2013
  2. 2. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013be responsive!InternetmobilesInternetÜBERALL 2013
  3. 3. * NetMarketShare.comMarket share for mobile, browsers, operating systems and search engines Kontakt: martin.verdino@asoluto.com © asoluto.com 2013…17%Notebooks22%Netbooks17%Tablets8%Smartphones30%Desktop6%Large desktopSmart TVSTATIONÄRMOBIL
  4. 4. © asoluto.com 2013Kontakt: martin.verdino@asoluto.comdevice diversityNotebooksNetbooks TabletsSmartphonesDesktop Large DesktopAuflösungen (Pixelanzahl, Größe)Eingabe (Tastatur, Maus, Stift, Finger)Betriebssystem (Windows, OSX, Android, iOS …)Hardware-Features (…)Kontakt: martin.verdino@asoluto.com
  5. 5. © asoluto.com 2013Kontakt: martin.verdino@asoluto.comBrowserInternet Explorer27,7% global24,1% in ATFirefox19,8% global36,3% in ATOpera1,0% global1,5% in ATSafari8,0% global10,3% in ATChrome41,4% global26,18 in ATgesamt: StatCounter Global Stats 05/2013NotebooksNetbooks TabletsSmartphonesDesktop Large Desktop
  6. 6. © asoluto.com 2013Kontakt: martin.verdino@asoluto.comNotebooksNetbooks TabletsSmartphonesDesktop Large DesktopBrowser (mobil)Internet Explorer27,7% global24,1% in AT2% mobile*Firefox19,8% global36,3% in AT0,2% mobile*Opera1,0% global1,5% in AT8% mobile*Safari8,0% global10,3% in AT62% mobile*gesamt: StatCounter Global Stats 05/2013* mobile traffic: Smartphone + Tablet: NetMarketShare.com 03/2013Chrome41,4% global26,18 in AT24% mobile*
  7. 7. Kontakt: martin.verdino@asoluto.com © asoluto.com 20130%25%50%75%100%Situative Dienste News Commerce Kommunikation Lifestyle Suche22,0028,0060,0056,0048,0076,0036,0031,0021,0025,0029,0015,0042,0041,0019,0018,0023,009,00Private Internetnutzung über mobile Apps oder mobile Internetbrowser, April 2012, DeutschlandQuelle: Interrogare / Statista GmbHAnteilderBefragtenin%Etwa zu gleichen Teilen Schwerpunktmäßig AppsSchwerpunktmäßig Browser16,5% 37,5% 30,5% 29,5% 56,5% 60,0%Wie nutzen Sie das mobile Internet?Eher mit mobilen Apps oder über Ihren mobilen Internetbrowser?
  8. 8. Standard-WebsiteMobileWebsiteResponsiveWebsiteAppnichtfür mobile Devicesoptimiertnurfür mobile Devicesoptimiertfür alleDevices optimiertKontakt: martin.verdino@asoluto.com © asoluto.com 2013Wo landen wir, wenn wir (mobil) surfen?
  9. 9. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Beispiel: orf.atca. 13 Zeilenca. 6 Zeilenca. 1 ZeileMobile Website muss aktiv gewählt werden …
  10. 10. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Beispiel: orf.atca. 5 Zeilenca. 6 Zeilenca. 1 ZeileMobile Website muss aktiv gewählt werden …… und bietet weniger Inhalt (keine Bilder)
  11. 11. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Beispiel: zeit.deSmartphone:» wollen Sie zur mobile Website wechseln?Tablet:» wollen Sie die App laden…
  12. 12. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Beispiel: oebb.atKein Angebot für mobile Devices
  13. 13. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Beispiel: google.atSmartphone: optimierte mobile Website wirdautomatisch aufgerufenTablet: optimierte Tablet-Website wirdautomatisch aufgerufen
  14. 14. © asoluto.com 2013Kontakt: martin.verdino@asoluto.comEs gibt eine Alternative …
  15. 15. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Responsive Website – agr.atResponsive Design:» eine Website optimiert für alle Devices
  16. 16. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Responsive Website – simmoag.atResponsive Design:» eine Website optimiert für alle Devices
  17. 17. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Responsive Website – aoporphan.comResponsive Design:» eine Website optimiert für alle Devices
  18. 18. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Responsive Design:Responsive Design ist derSchlüsselbegriff 2013 fürmodernes und flexiblesContent Marketing …content-marketing.comExpected Web Design Trends in 2013:#1 – Responsive Web Design …smashinghub.comforbes.comWhy You Need to Prioritize Responsive Design RightNow: Responsive design is the hot topic for 2013Der Marketing-Trend 2013
  19. 19. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Responsive DesignWas ist das eigentlich?Eine Website*optimiert für alle Devices* ein Design* ein Inhalt (Text, Bild, Rich Media)* ein Content-Management-System* ein Redaktions-Team* …
  20. 20. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Responsive DesignUnd wie funktioniert das?Wir entwickeln eine flexible Website mitmehreren Designdefinitionen (CSS) …… und der (moderne) Browser nimmt sichgenau das, was für das jeweilige Endgerätdie beste User Experience ermöglicht.
  21. 21. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Responsive DesignUnd was braucht man dafür?• ein gutes Interfacekonzept und -design• HTML5 / CSS3 valide Templates• ein CMS, das die Templates nicht „zerstört“+ … Mobile first Ansatz + agiles Projektmodell• und einen State of the Art-Browser, der Media Queries versteht** alle aktuellen mobilen Browser* Safari, Chrome, Opera, Firefox ≥ 3.5, Internet Explorer ≥ 9Internet Explorer≥ 9< 9 (Standard-Website)Firefox≥ 3.5< 3.5 (Standard-Website)OperaSafariChrome✓✓✓✓ ✓}auch fürbestehendeWebsites
  22. 22. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Responsive DesignWorauf können wir reagieren?• Wir wissen, welches Device (mit welchen Spezifikationen) auf dieWebsite zugreift. Darauf können wir reagieren.Die wesentlichen Aspekte:Screen-Auflösungund OrientierungTastatur + Mausoder TouchNutzungs-gewohnheiten
  23. 23. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Responsive DesignScreen-Auflösung und Orientierung• Eine Website für viele Auflösungen und Formate …320 px –» 2880 pxPixelanzahl: 1:9Fläche: 1:4,4hoch/quer
  24. 24. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Screen-Auflösung und OrientierungResponsive DesignSeitenaufbau anpassen• Spaltenanzahl (3-2-1)• Reihenfolge der Elemente• Elemente unterschiedlich darstellen
  25. 25. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Screen-Auflösung und OrientierungResponsive Design
  26. 26. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Tastatur + Maus oder Touch• Eine Website für unterschiedliche Bedienkonzepte …Responsive DesignGröße der Klickflächengelernte Fingergestenkein Hover bei Touch
  27. 27. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013SwipeTastatur + Maus oder Touch …Responsive Design» responsive design» asoluto» martin verdinores …Auswahlstatt EingabeTap
  28. 28. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013am Schreibtischmit beiden Händenauf Tastatur + MausNutzungsgewohnheitenResponsive Designmit zwei Händenund mehreren Fingernmit einer Handund einem Finger
  29. 29. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Responsive DesignNutzungsgewohnheitenBedienbarkeit:einfachokschlecht
  30. 30. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Responsive DesignWie kann Ihre Marke noch weiter profitieren?WebfontsFont-IconsSVG-Logoshochauflösende Bitmaps
  31. 31. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Responsive DesignUnd SEO kommt automatisch mit?Warum?• nur eine URL / keine doppelten Inhalte• geringere Absprungrate (UX)• längere Verweildauer (UX)• einfacheres Backlink-Management• Nutzung bereits erreichter Rankings• einfachere Indexierung der Website durch GoogleDeshalb empfiehlt Google Responsive Design!Google recommends webmasters follow the industry best practice of using responsive web design …Quelle: developers.google.com
  32. 32. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013GegenüberstellungResponsive Website AppKostenApp-StoreGeräteunabhängigkeitSEOInstallationHardwarezugriffOffline-Nutzung
  33. 33. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Martin Verdinomartin.verdino@asoluto.com+43 660 533 36 53» asoluto.combe responsive!IMMER & ÜBERALLFragen?© asoluto.com 2013

×