How we work. The design previews are removed since the design is not finished yet :)

1. How we work: PS. This
version is
without previews
Core content of the finished
design
Mobile first
Responsive
Ida Aalen / @idaAa
UXCamp Europe 2012

2. Hi!
Ida Aalen / @idaAa
ida@netliferesearch.com

3. The Team

4. Kjernemodellen

5. I wonder if my
OrTelcohe just
was has
published the
checking any
intersting press
prices?
releases lately?
Foto: Flickr-bruker wippetywu CC-BY

6. Whoever
screams the most
will win?

7. It has to be up to the
users.

8. 1400
1200
1000 Some content is
more important
800
Vote
600
400
200
0
1 6 11 16 21 26 31 36 41 46 51 56 61 66 71 76
Tasks

9. Very few
2%
users visit 12%
the 11%
frontpage
76%
Search
Referrals
Direct traffic
Campaigns

10. The Core Model
The Core

11. • Core pages are more
Now what? important than the front
page. This is where your
users solve their task - and
you reach your objectives
• Good ways in, and making
sure there are no blind
alleys, becomes more
important than structure
and hierarchy

13. Talk to others in
the same situation
Get more
people to use
Waiting for the cancer
treatment
society’s
services
Attend a course or
group

15. Mobile first

16. Prosent
34
30 27% of the
population uses 27
Ukentlig dekning
mobile content
Daglig dekning 24
every day
20
17
15
11 11 10 11
10
9 9
5
4 4 4 4
0
Uke 6-26 4Q 2005 4Q 2006 4Q 2007 4Q 2008 4Q 2009 4Q 2010 4Q 2011
2005
Kilde: Forbruker & Media.

17. Mobile
pageviews
are 7 x higher
in dec 2011
than jan
2010

18. Mobile on the
run?
Foto: Flickr-bruker mrjorgen CC-BY-NC-ND

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

21. Unprioritized Limited
websites mobile sites

22. • Designing for mobile first
makes you prioritize and
focus
• If it’s not important
enough to put on mobile, is
it important enough to put
on the desktop?

27. Responsive design

30. Kilde: A-pressen, 2011

31. Around 20% f
Norwegians has
now got access
to a tablet

32. About 2 of 5
visits is from an
Android

33. – We’re now faced with a
browser landscape [...] with
devices becoming smaller
and larger simultaneously.
Ethan Marcotte
Responsive Web Design, s. 6

34. – [...] we’re designing for
more devices, more input
types, more resolutions than
ever before.
Ethan Marcotte
Responsive Web Design, s. 6

35. • Same content on all
platforms
• What we do is make the
presentation adapt to the
screen sizes and devices
• Future-friendly!

37. 1. The Grid

38. Grid on screens

39. Big screen

40. Small screen

41. Content
14 - 20 px
65 character lines

47. Elements

48. Elements

49. Elements
KREFTFORENINGEN

50. Elements
Core content Related Further...
KREFTFORENINGEN

54. Prioritizing on a big screen

55. KREFTFORENINGEN KREFTFORENINGEN
KREFTFORENINGEN
1 2 3

56. KREFTFORENINGEN KREFTFORENINGEN
KREFTFORENINGEN
1 2 3

57. KREFTFORENINGEN KREFTFORENINGEN
KREFTFORENINGEN
1 2 3

58. KREFTFORENINGEN
KREFTFORENINGEN KREFTFORENINGEN
4 5 6

59. KREFTFORENINGEN
KREFTFORENINGEN KREFTFORENINGEN
4 5 6

60. KREFTFORENINGEN
KREFTFORENINGEN KREFTFORENINGEN
4 5 6

61. KREFTFORENINGEN
KREFTFORENINGEN
7 8

62. KREFTFORENINGEN
KREFTFORENINGEN
7 8

63. Summary, sort of:

64. • Think about the content,
The Core structure, links etc for the
most important and most
Model used sites first (“the core”)
• The Core is the same on all
devices

65. • It can improve
Mobile first communication between
graphic and interaction
designers (no grid!)
• It’s easier to show early
design to the client
• Don’t forget completely
about desktop
• It’s easier to go mobile,
desktop, tablet than
mobile, tablet, desktop

66. • Create as system for how
Responsive you want to distribute the
content when you have a
design bigger canvas -a grid
• The graphic designer can
create a grid bases on
content from mobile
sketches
• The interaction designer
can make new sketches
based on a desktop grid

67. Thank you!
Ida Aalen
ida@netliferesearch.com
45 24 24 12
@idaAa