start small, think big - responsive web design

Responsive Web DesignWUD 12

Big

StartSmallThink

Thomas Piribauer

CEO / UXDintuio User ExperienceConsulting GmbH

Twitter@tpiribauer

Webhttp://intuio.at

Stmk

Rockstar

Erfinder

not me

Mensch Maschine Kommunikation

usable

experience

Use rExpe r i ence !

AmsterdamSchiphol

- 80%

Spaß

You can't just ask customers what they want and then try to give that to them.By the time you get it built, they'll want something new.

”

© 2012 www.intuio.at

viele

jederzeit

überall

jede(r)

http://www.mequoda.com/articles/new-media-trends/web-usage-prediction-when-mobile-and-desktop-collide/

0

500

1000

1500

2000

2007 2008 2009 2010 2011 2012 2013 2014 2015

Mobile Internetnutzer Desktop Internetnutzer

2013

2015

http://bdconf.com/docs/convince_your_boss.pdf

There will be one mobile phone for every person on earth.

1. Nichts

a1.net oebb.at omv.com orf.at

1. Nichts

halten die mobile Nutzbarkeit ihrer Website für wichtig

81%

Fonda 2010

aller österreichischen Unternehmen

8haben eine mobile Website

%

Fonda 2010

aller österreichischen Unternehmen

E ine App fü r s

iPad 1 ,2 , 3 ,

M in iE i ne App fü r a l l e And ro i d Tab le t s

E ine App fü r

W indows

PhonesE ine iPhone

App

E ine B lackbe r r y

App

E ine

And ro i d App

E ine App fü r

Symb ian

Smar tphones

2. Apps

150x täglich schaut eine Person im Durchschnitt auf ihr Handy.

Was sieht sie sich an?

Selten eine App.68% aller Smartphone-Besitzer nutzen nur 5 oder weniger Apps regelmäßig.

http://www.lukew.com/!/entry.asp?1501

48%

26%

26%

App wird nur 1 mal genutzt

App wird 11 mal oder mehr genutzt

App wird nur 2-10 mal genutzt

Wie häufig werden Apps genutzt?

Mobile Webseite

SMS Service

App für iPhone

App für Blackberry

37,9%

21,6%

21,6%

18,9%

http://www.lukew.com/!/entry.asp?1413

Mobile Webseite

App für iPhone

App für Android

App für Blackberry

60%14%

12%

14%

@jamespearce #qconsf 07.11.2012

https://twitter.com/firt/status/266278622376099841

Von allen Smartphone Nutzern

95%auf ihrem Telefon nach einem Produkt oder einer Dienstleistung gesucht.

haben

50%Unternehmen mit einem schlechten mobilen Webauftritt nicht an Freunde weiter.

empfehlen

79%Werbung auf mobilen Webseiten wahr, jedoch nur 38% in einer App.

nehmen

Google Studie zusammen mit Ipsos OTX MediaCT, Mai 2012Compuware "What Users Want from Mobile" 2011

mobil.derstandard.at mobil.zeit.de mobil.post.at m.sparkasse.at

3. Sites

op t im ie r t f ü r

Smar t phones

j edoch n i ch t

op t im ie r t f ü r

Tab le t s

post.at

s ta t t dessen w i r d d i e he r kömml i che Webse i t e angeze ig t

mobil.post.at!

Zwe i ve r sch i edene Webse i t en

3. Sites

mobil.post.at

3. Sites

zeit.de spiegel.de

3. Sites

zeit.de m.spiegel.de

Fü r Desk tops

abe r auch f ü r Tab le t s

und f ü r Smar t phones

. . . und e i gen t l i ch f ü r a l l e ande ren

Ge rä te auch .

Eine Webseite,

die sich jeder Größe anpasst

http://www.bostonglobe.com

und dabei auf jedem Display gut aussieht.

bostonglobe.com

=bostonglobe.com

bostonglobe.com

=

Nur e i ne Webse i t e !

So wie diese

clearairchallenge.com dribbble.com

und natürlichunsere eigene.

Only the true Messiah denies His divinity

1. Users First

2. Content First

Content precedes design. Design in the absence of content is not design,it‘s decoration.

”— Jeffrey Zeldman

3. Mobile First

Client, sei flexibel

CSS Mediaqueries / Flexibles LayoutGrößere Anpassungen werden an definierten Breiten vorgenommen

Fluid ImagesBilder füllen den maximal verfügbaren Platz

Responsive TypographySchriften werden relativ in em oder rem definiertund für alle Displaygrößen optimal angepasst

Wireframes do not work anymore.”

— Mark Boulton @ Fronteers 12

Design WorkflowAlles auf PapierDie Content- und Layout-Struktur mit möglichen Breakpoints wird grob gezeichnet, am besten mit Papier und Bleistift oder auf Whiteboards

Mobile-First im BrowserSemantische HTML-Struktur, Echtdaten und keine Lorem Ipsums, CSS Stile und Animationen, Interaktivität mit JavaScript / jQuery

Style-Tiling im GrafikprogrammDer visuelle Stil für die verwendeten Elemente wird in einem Grafikprogramm gestaltet und schrittweise via CSS in den HTML-Prototyp integriert

4. Performance First

60%

Compuware "What Users Want from Mobile" 2011

< 3 sec.

Server, sei wachsam

Feature Detection / CookiesDer Server identifiziert die Features von Gerät und Browser z.B. via DeviceAtlas

Scaled MediaBilder werden entsprechend der erwarteten Bildschirmgröße skaliert und dann erst verschickt

Custom HTML, CSS & JavaScriptDer Server liefert die notwendige HTML Struktur und nur tatsächlich benötigte CSS und JavaScript Dateien

SMACSS

Tech Slide

future friendly

Stay

http://futurefriend.ly

future friendly

Stay

http://futurefriend.ly

@xon1c@tpir ibauer @intuio

Say hi.

Danke.Pre

senta

tion S

lides

Sleeping Audience Members© Jessica Hagy

http://www.mequoda.com/wp-content/uploads/ui/2testing.gif

http://fc08.deviantart.net/fs50/f/2009/276/1/c/VectorLandscape_by_Kara1984.jpg

http://fc08.deviantart.net/fs50/f/2009/276/1/c/VectorLandscape_by_Kara1984.jpg

http://www.extremetech.com/wp-content/uploads/2012/10/felix-baumgartner-standing-in-his-capsule-about-to-dive.jpg

http://markgorman.files.wordpress.com/2008/07/who-are-they.gif

http://www.shugarecords.com/Images/Products/Large/429506b6-6687-490a-9a9e-26f41ec6a660-0.JPG

http://stigmalitia.com/blog/wp-content/uploads/2011/09/nevermind-then1.jpg

http://tabtimes.com/sites/default/files/jakob_composite%20(1).jpg

http://www.leadership-with-you.com/images/stevejobs.jpg

http://www.urinal.net/schiphol/Slovenia015.med.jpg

http://www.urinalfly.com/images/easy.gif

http://ecx.images-amazon.com/images/I/51TEZZT9YQL._SL500_AA300_.jpg

http://www.flickr.com/photos/brad_frost/7387560446/sizes/l/in/photostream/

http://www.flickr.com/photos/naturestenacity/7290398164/sizes/l/in/photostream/

http://www.flickr.com/photos/cozyta/6646234513/sizes/l/in/photostream/

http://i.telegraph.co.uk/multimedia/archive/02023/followers_2023036i.jpg

http://www.flickr.com/photos/9038210@N07/2088573006/sizes/z/in/photostream/

http://images4.fanpop.com/image/photos/23400000/KISS-kiss-guitarists-23448774-1024-768.jpg

http://smashed.by/davidjones

http://www.flickr.com/photos/lyza/49545547

http://www.flickr.com/photos/hermida/5442243540/sizes/l/in/photostream/

http://www.touchtip.com/iphone/quickly-email-a-task-using-iphone-highrise/

http://rallyhaus.com/the-cars-of-agent-007-james-bond

http://www.flickr.com/photos/bluesoft/4765555124/sizes/l/in/photostream//

http://www.flickr.com/photos/henrybloomfield/6772345145/sizes/l/in/photostream/

http://bukk.it/obama.png

Image Credits