Your SlideShare is downloading. ×
asoluto: Be Responsive! Überall 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

asoluto: Be Responsive! Überall 2013

210
views

Published on

Be Responsive! …

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
210
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
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. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Martin Verdinobe responsive!ÜBERALL 2013
  • 2. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013be responsive!InternetmobilesInternetÜBERALL 2013
  • 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. © 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. © 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. © 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. 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. 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. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Beispiel: orf.atca. 13 Zeilenca. 6 Zeilenca. 1 ZeileMobile Website muss aktiv gewählt werden …
  • 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. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Beispiel: zeit.deSmartphone:» wollen Sie zur mobile Website wechseln?Tablet:» wollen Sie die App laden…
  • 12. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Beispiel: oebb.atKein Angebot für mobile Devices
  • 13. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Beispiel: google.atSmartphone: optimierte mobile Website wirdautomatisch aufgerufenTablet: optimierte Tablet-Website wirdautomatisch aufgerufen
  • 14. © asoluto.com 2013Kontakt: martin.verdino@asoluto.comEs gibt eine Alternative …
  • 15. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Responsive Website – agr.atResponsive Design:» eine Website optimiert für alle Devices
  • 16. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Responsive Website – simmoag.atResponsive Design:» eine Website optimiert für alle Devices
  • 17. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Responsive Website – aoporphan.comResponsive Design:» eine Website optimiert für alle Devices
  • 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. 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. 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. 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. 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. 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. 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. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Screen-Auflösung und OrientierungResponsive Design
  • 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. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013SwipeTastatur + Maus oder Touch …Responsive Design» responsive design» asoluto» martin verdinores …Auswahlstatt EingabeTap
  • 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. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Responsive DesignNutzungsgewohnheitenBedienbarkeit:einfachokschlecht
  • 30. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013Responsive DesignWie kann Ihre Marke noch weiter profitieren?WebfontsFont-IconsSVG-Logoshochauflösende Bitmaps
  • 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. Kontakt: martin.verdino@asoluto.com © asoluto.com 2013GegenüberstellungResponsive Website AppKostenApp-StoreGeräteunabhängigkeitSEOInstallationHardwarezugriffOffline-Nutzung
  • 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

×