responsive mistakes aka tips for designing responsive

Responsive mistakes

Ida Aalen / @idaAaUXCamp Europe 2012

Tips for responsive design

Ida Aalen / @idaAaUXCamp Europe 2012

Hi!

Ida Aalen / @idaAaida@netliferesearch.com

Why do responsive design?

13

11 119 10 11

15

24

34

4 4 4 4 5

9

17

27

0

10

20

30

Uke 6-262005

4Q 2005 4Q 2006 4Q 2007 4Q 2008 4Q 2009 4Q 2010 4Q 2011

Ukentlig dekningDaglig dekning

Mobilt innhold mot nye høyder

Kilde: Forbruker & Media.

Prosent

13

11 119 10 11

15

24

34

4 4 4 4 5

9

17

27

0

10

20

30

Uke 6-262005

4Q 2005 4Q 2006 4Q 2007 4Q 2008 4Q 2009 4Q 2010 4Q 2011

Ukentlig dekningDaglig dekning

Mobilt innhold mot nye høyder

Kilde: Forbruker & Media.

Prosent

27% of the population uses mobile content

every day

Mobile pageviews

are 7 x higher in dec 2011

than jan 2010

Kilde: A-pressen, 2011

Around 20% f Norwegians has now got access

to a tablet

About 2 of 5 visits is from an

Android

+

+

+ =

+ =

http://kiddynamitesworld.com/happy-halloween-from-oscar-mr-griffey

– We’re now faced with a browser landscape [...] with devices becoming smaller and larger simultaneously. Ethan Marcotte

Responsive Web Design, s. 6

– [...] we’re designing for more devices, more input types, more resolutions than ever before. Ethan Marcotte

Responsive Web Design, s. 6

• Same content on all platforms

• Same content on all platforms

• What we do is make the presentation adapt to the screen sizes and devices

• Same content on all platforms

• What we do is make the presentation adapt to the screen sizes and devices

• Future-friendly!

Mobile first responsive design!

• Flexible design: % not px• Optimalize for some

typical widths:- Smart phone (320px)- Tablet (600 or 768px)- Netbook (1024px)- Widescreen

#1Responsivize the typography

#2Make touch targets big enough

#3Show the core content above the fold

#4Help your users navigate long pages on mobile

#5Start with mobile, but think about the desktop even when your designing mobile first

Prioritizing on a big screen

KREFTFORENINGEN

1 2 3

KREFTFORENINGENKREFTFORENINGEN

KREFTFORENINGEN

1 2 3

KREFTFORENINGENKREFTFORENINGEN

KREFTFORENINGEN

1 2 3

KREFTFORENINGENKREFTFORENINGEN

4 5 6

KREFTFORENINGEN

KREFTFORENINGEN

KREFTFORENINGEN

4 5 6

KREFTFORENINGEN

KREFTFORENINGEN

KREFTFORENINGEN

4 5 6

KREFTFORENINGEN

KREFTFORENINGEN

KREFTFORENINGEN

7 8

KREFTFORENINGEN

KREFTFORENINGEN

7 8

KREFTFORENINGEN

KREFTFORENINGEN

#6Be aware of supersizing the design on desktop

Big screen

Small screen

Content14 - 20 px65 character lines

#7Don’t remove content from mobile

Foto: Flickr-bruker mrjorgen CC-BY-NC-ND

Foto: Flickr-bruker mrjorgen CC-BY-NC-ND

Mobile on the run?

Foto: Martin Bekkelund, www.bekkelund.net via Flickr. Lisens CC-BY-NC-SA 3.0.

En iPads hverdag

Kilde: A-pressen, 2011

En iPhones hverdag

Kilde: A-pressen, 2011

– People’ll do anything on mobile if you let them

Reading materials...

Mobile FirstLuke Wroblewski (2011)

Responsive Web DesignEthan Marcotte (2011)

Clour Four Bloghttp://cloudfour.com/blog/

Media Queries Bloghttp://mediaqueri.es/

Ida Aalenida@netliferesearch.com45 24 24 12@idaAa

Thank you!