Mobile first, Responsive Design and The Core Model
10 likes2,740 views
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.
![– We’re now faced with a
browser landscape [...] with
devices becoming smaller
and larger simultaneously.
Ethan Marcotte
Responsive Web Design, s. 6](https://image.slidesharecdn.com/mobilefirstresponsivecore-idaaalen-uxcamp-120526125523-phpapp01/85/Mobile-first-Responsive-Design-and-The-Core-Model-33-320.jpg)
![– [...] we’re designing for
more devices, more input
types, more resolutions than
ever before.
Ethan Marcotte
Responsive Web Design, s. 6](https://image.slidesharecdn.com/mobilefirstresponsivecore-idaaalen-uxcamp-120526125523-phpapp01/85/Mobile-first-Responsive-Design-and-The-Core-Model-34-320.jpg)
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
- 3. The Team
- 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?
- 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
- 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