asoluto: Be Responsive! Überall 2013

Kontakt: [email protected] © asoluto.com 2013

Martin Verdino

be responsive!ÜBERALL 2013

mailto:[email protected]?subject=


http://www.asoluto.com



be responsive!

Internet

mobilesInternet

ÜBERALL 2013





* NetMarketShare.com Market share for mobile, browsers, operating systems and search engines Kontakt: [email protected] © asoluto.com 2013

…

17%Notebooks

22%Netbooks

17%Tablets

8%Smartphones

30%Desktop

6%Large desktop

Smart TV

STATIONÄR

MOBIL

© asoluto.com 2013Kontakt: [email protected]

device diversity

NotebooksNetbooks TabletsSmartphonesDesktop Large Desktop

Au!ösungen (Pixelanzahl, Größe)Eingabe (Tastatur, Maus, Sti!, Finger)Betriebssystem (Windows, OSX, Android, iOS …)Hardware-Features (…)

Kontakt: [email protected]






Browser

Internet Explorer27,7% global24,1% in AT

Firefox19,8% global36,3% in AT

Opera1,0% global1,5% in AT

Safari8,0% global10,3% in AT

Chrome41,4% global26,18 in AT

gesamt: StatCounter Global Stats 05/2013








Browser (mobil)

Internet Explorer27,7% global24,1% in AT

2% mobile*

Firefox19,8% global36,3% in AT

0,2% mobile*

Opera1,0% global1,5% in AT

8% mobile*

Safari8,0% global10,3% in AT

62% mobile*

gesamt: StatCounter Global Stats 05/2013 * mobile traffic: Smartphone + Tablet: NetMarketShare.com 03/2013

Chrome41,4% global26,18 in AT

24% mobile*






0%

25%

50%

75%

100%

Situative Dienste News Commerce Kommunikation Lifestyle Suche

22,0028,00

60,0056,0048,00

76,00 36,0031,00

21,0025,00

29,00

15,0042,0041,00

19,0018,0023,00

9,00

Private Internetnutzung über mobile Apps oder mobile Internetbrowser, April 2012, DeutschlandQuelle: Interrogare / Statista GmbH

Ant

eil d

er B

efra

gten

in %

Etwa zu gleichen Teilen Schwerpunktmäßig AppsSchwerpunktmäßig Browser

16,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?





Standard-Website

Mobile Website

Responsive Website

App

nicht für mobile Devices

optimiert

nur für mobile Devices

optimiert

für alle Devices optimiert


Wo landen wir, wenn wir (mobil) surfen?






Beispiel: orf.at

ca. 13 Zeilenca. 6 Zeilen

ca. 1 Zeile

Mobile Website muss aktiv gewählt werden …






Beispiel: orf.at

ca. 5 Zeilenca. 6 Zeilen

ca. 1 Zeile

Mobile Website muss aktiv gewählt werden …… und bietet weniger Inhalt (keine Bilder)






Beispiel: zeit.de

Smartphone: » wollen Sie zur mobile Website wechseln?

Tablet: » wollen Sie die App laden…






Beispiel: oebb.at

Kein Angebot für mobile Devices






Beispiel: google.at

Smartphone: optimierte mobile Website wird automatisch aufgerufen

Tablet: optimierte Tablet-Website wird automatisch aufgerufen






Es gibt eine Alternative …






Responsive Website – agr.at

Responsive Design:» eine Website optimiert für alle Devices






Responsive Website – simmoag.at







Responsive Website – aoporphan.com







Responsive Design:

Responsive Design ist der Schlüsselbegriff 2013 für modernes und $exibles Content Marketing …

content-marketing.comExpected Web Design Trends in 2013: #1 – Responsive Web Design …

smashinghub.com

forbes.com

Why You Need to Prioritize Responsive Design Right Now: Responsive design is the hot topic for 2013

Der Marketing-Trend 2013






Responsive 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* …






Responsive DesignUnd wie funktioniert das?

Wir entwickeln eine $exible Website mit mehreren Designde%nitionen (CSS) …

… und der (moderne) Browser nimmt sich genau das, was für das jeweilige Endgerät die beste User Experience ermöglicht.






Responsive DesignUnd was braucht man dafür?

• ein gutes Interfacekonzept und -design

• HTML5 / CSS3 valide Templates

• ein CMS, das die Templates nicht „zerstört“

+ … Mobile #rst 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 ≥ 9

Internet Explorer≥ 9< 9 (Standard-Website)

Firefox≥ 3.5< 3.5 (Standard-Website)

OperaSafariChrome

✓✓✓✓ ✓

} auch für bestehende Websites




Responsive DesignWorauf können wir reagieren?

• Wir wissen, welches Device (mit welchen Spezi%kationen) auf die

Website zugrei'. Darauf können wir reagieren.

Die wesentlichen Aspekte:

Screen-Au$ösung und Orientierung

Tastatur + Maus oder Touch

Nutzungs-gewohnheiten






Responsive DesignScreen-Au!ösung und Orientierung • Eine Website für viele Au$ösungen und Formate …

320 px –» 2880 pxPixelanzahl: 1:9

Fläche: 1:4,4

hoch/quer






Screen-Au!ösung und Orientierung

Responsive Design

Seitenau(au anpassen• Spaltenanzahl (3-2-1)• Reihenfolge der Elemente• Elemente unterschiedlich darstellen


Screen-Au!ösung und Orientierung

Responsive Design






Tastatur + Maus oder Touch • Eine Website für unterschiedliche Bedienkonzepte …

Responsive Design

Größe der Klick$ächengelernte Fingergestenkein Hover bei Touch






Swipe

Tastatur + Maus oder Touch …

Responsive Design

» responsive design» asoluto» martin verdino

res …

Auswahl statt Eingabe

Tap






am Schreibtischmit beiden Händen auf Tastatur + Maus

Nutzungsgewohnheiten

Responsive Design

mit zwei Händen und mehreren Fingern

mit einer Hand und einem Finger






Responsive DesignNutzungsgewohnheiten

Bedienbarkeit: einfachokschlecht






Responsive DesignWie kann Ihre Marke noch weiter pro"tieren?

Webfonts

Font-IconsSVG-Logoshochau$ösende Bitmaps




Responsive 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 Google

Deshalb emp"ehlt Google Responsive Design!Google recommends webmasters follow the industry best practice of using responsive web design …Quelle: developers.google.com





https://developers.google.com

https://developers.google.com


Gegenüberstellung

Responsive Website App

Kosten

App-Store

Geräteunabhängigkeit

SEO

Installation

Hardwarezugriff

Offline-Nutzung






Martin Verdino

[email protected]+43 660 533 36 53

» asoluto.com

be responsive!IMMER & ÜBERALL

Fragen?

© asoluto.com 2013

mailto:[email protected]

mailto:[email protected]



Date post:	26-Jun-2015
Category:	Technology
Upload:	asoluto-public-interactive-relations
View:	239 times
Download:	2 times

asoluto: Be Responsive! Überall 2013

Technology