Mobile first, Responsive Design and The Core Model
67
How we work: Core content Mobile first Responsive Ida Aalen / @idaAa UXCamp Europe 2012 PS. This version is without previews of the finished design
description
How we work. The design previews are removed since the design is not finished yet :)
Transcript of Mobile first, Responsive Design and The Core Model
How we work:Core contentMobile firstResponsive
Ida Aalen / @idaAaUXCamp Europe 2012
PS. This version is
without previews of the finished
design
The Team
Kjernemodellen
I wonder if my Telco has
published any intersting press releases lately?
Or was he just checking the
prices?
Foto: Flickr-bruker wippetywu CC-BY
Whoever screams the most
will win?
It has to be up to the users.
0
200
400
600
800
1000
1200
1400
1 6 11 16 21 26 31 36 41 46 51 56 61 66 71 76
Vote
Tasks
Some content is more important
Very few users visit the frontpage
2%12%
11%
76%SearchReferralsDirect trafficCampaigns
The Core Model
The Core
Now what? • Core pages are more 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
Get more people to use
the cancer society’s services
Waiting for treatment
Attend a course or group
Talk to others in the same situation
Mobile first
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
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.
Unprioritized websites
Limited mobile sites
• 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?
Responsive design
Kilde: A-pressen, 2011
Around 20% f Norwegians has now got access
to a tablet
About 2 of 5 visits is from an
Android
– 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
• What we do is make the presentation adapt to the screen sizes and devices
• Future-friendly!
1. The Grid
Grid on screens
Big screen
Small screen
Content14 - 20 px65 character lines
Elements
Elements
ElementsKREFTFORENINGEN
ElementsCore content Related Further...
KREFTFORENINGEN
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
Summary, sort of:
The Core Model
• Think about the content, structure, links etc for the most important and most used sites first (“the core”)
• The Core is the same on all devices
Mobile first • It can improve 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
Responsive design
• Create as system for how you want to distribute the content when you have a 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
