Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Mobile first, Responsive Design and The Core Model

•
•
Ida Aalen
Ida Aalen

This document discusses designing websites with a mobile-first and responsive approach. It recommends (1) focusing on "core" pages that users rely on the most to accomplish tasks, rather than the front page, (2) designing first for mobile to prioritize important content, and (3) using responsive design with a grid system to display content adaptively across different screen sizes.

Related slideshows

raph Databases with Neo4j – Emil Eifrem
raph Databases with Neo4j – Emil Eifremraph Databases with Neo4j – Emil Eifrem
raph Databases with Neo4j – Emil Eifrem
 
How to create a mobile version of your website
How to create a mobile version of your websiteHow to create a mobile version of your website
How to create a mobile version of your website
 
responsive awareness
responsive awarenessresponsive awareness
responsive awareness
 
1 of 67
Download to read offline
How we work: PS. This version is without previews Core content of the finished design Mobile first Responsive Ida Aalen / @idaAa UXCamp Europe 2012
Hi! Ida Aalen / @idaAa ida@netliferesearch.com
The Team
Kjernemodellen
I wonder if my OrTelcohe just was has published the checking any intersting press prices? releases lately? Foto: Flickr-bruker wippetywu CC-BY
Whoever screams the most will win?
It has to be up to the users.
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
Very few 2% users visit 12% the 11% frontpage 76% Search Referrals Direct traffic Campaigns
The Core Model The Core
• 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
Mobile first, Responsive Design and The Core Model
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
Mobile first, Responsive Design and The Core Model
Mobile first
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.
Mobile pageviews are 7 x higher in dec 2011 than jan 2010
Mobile on the run? Foto: Flickr-bruker mrjorgen CC-BY-NC-ND
Mobile first, Responsive Design and The Core Model
Foto: Martin Bekkelund, www.bekkelund.net via Flickr. Lisens CC-BY-NC-SA 3.0.
Unprioritized Limited websites 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?
Mobile first, Responsive Design and The Core Model
Mobile first, Responsive Design and The Core Model
Mobile first, Responsive Design and The Core Model
Mobile first, Responsive Design and The Core Model
Responsive design
Mobile first, Responsive Design and The Core Model
Mobile first, Responsive Design and The Core Model
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!
Mobile first, Responsive Design and The Core Model
1. The Grid
Grid on screens
Big screen
Small screen
Content 14 - 20 px 65 character lines
Mobile first, Responsive Design and The Core Model
Mobile first, Responsive Design and The Core Model
Mobile first, Responsive Design and The Core Model
Mobile first, Responsive Design and The Core Model
Mobile first, Responsive Design and The Core Model
Elements
Elements
Elements KREFTFORENINGEN
Elements Core content Related Further... KREFTFORENINGEN
Mobile first, Responsive Design and The Core Model
Mobile first, Responsive Design and The Core Model
Mobile first, Responsive Design and The Core Model
Prioritizing on a big screen
KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN 1 2 3
KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN 1 2 3
KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN 1 2 3
KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN 4 5 6
KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN 4 5 6
KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN 4 5 6
KREFTFORENINGEN KREFTFORENINGEN 7 8
KREFTFORENINGEN KREFTFORENINGEN 7 8
Summary, sort of:
• 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
• 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
• 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
Thank you! Ida Aalen ida@netliferesearch.com 45 24 24 12 @idaAa

More Related Content

Mobile first, Responsive Design and The Core Model

  • 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
  • 5. I wonder if my OrTelcohe just was has published the checking any intersting press prices? releases lately? Foto: Flickr-bruker wippetywu CC-BY
  • 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
  • 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?
  • 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!
  • 41. Content 14 - 20 px 65 character lines
  • 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
  • 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