Mobile first, Responsive Design and The Core Model

3,691 views

Published on

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

1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total views
3,691
On SlideShare
0
From Embeds
0
Number of Embeds
542
Actions
Shares
0
Downloads
58
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

Mobile first, Responsive Design and The Core Model

  1. 1. How we work: PS. This version is without previewsCore content of the finished designMobile firstResponsive Ida Aalen / @idaAa UXCamp Europe 2012
  2. 2. Hi!Ida Aalen / @idaAaida@netliferesearch.com
  3. 3. The Team
  4. 4. Kjernemodellen
  5. 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. 6. Whoeverscreams the most will win?
  7. 7. It has to be up to theusers.
  8. 8. 1400 1200 1000 Some content is more important 800Vote 600 400 200 0 1 6 11 16 21 26 31 36 41 46 51 56 61 66 71 76 Tasks
  9. 9. Very few 2%users visit 12%the 11%frontpage 76% Search Referrals Direct traffic Campaigns
  10. 10. The Core Model The Core
  11. 11. • Core pages are moreNow 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
  12. 12. Talk to others in the same situation Get more people to useWaiting for the cancertreatment society’s services Attend a course or group
  13. 13. Mobile first
  14. 14. Prosent 3430 27% of the population uses 27 Ukentlig dekning mobile content Daglig dekning 24 every day20 17 15 11 11 10 1110 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.
  15. 15. Mobile pageviewsare 7 x higher in dec 2011 than jan 2010
  16. 16. Mobile on the run?Foto: Flickr-bruker mrjorgen CC-BY-NC-ND
  17. 17. Foto: Martin Bekkelund, www.bekkelund.net via Flickr. Lisens CC-BY-NC-SA 3.0.
  18. 18. Unprioritized Limitedwebsites mobile sites
  19. 19. • 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?
  20. 20. Responsive design
  21. 21. Kilde: A-pressen, 2011
  22. 22. Around 20% fNorwegians hasnow got access to a tablet
  23. 23. About 2 of 5visits is from an Android
  24. 24. – We’re now faced with a browser landscape [...] with devices becoming smaller and larger simultaneously. Ethan Marcotte Responsive Web Design, s. 6
  25. 25. – [...] we’re designing for more devices, more input types, more resolutions than ever before. Ethan Marcotte Responsive Web Design, s. 6
  26. 26. • Same content on all platforms• What we do is make the presentation adapt to the screen sizes and devices• Future-friendly!
  27. 27. 1. The Grid
  28. 28. Grid on screens
  29. 29. Big screen
  30. 30. Small screen
  31. 31. Content14 - 20 px65 character lines
  32. 32. Elements
  33. 33. Elements
  34. 34. Elements KREFTFORENINGEN
  35. 35. ElementsCore content Related Further... KREFTFORENINGEN
  36. 36. Prioritizing on a big screen
  37. 37. KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN1 2 3
  38. 38. KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN1 2 3
  39. 39. KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN1 2 3
  40. 40. KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN4 5 6
  41. 41. KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN4 5 6
  42. 42. KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN4 5 6
  43. 43. KREFTFORENINGEN KREFTFORENINGEN7 8
  44. 44. KREFTFORENINGEN KREFTFORENINGEN7 8
  45. 45. Summary, sort of:
  46. 46. • Think about the content,The Core structure, links etc for the most important and mostModel used sites first (“the core”) • The Core is the same on all devices
  47. 47. • It can improveMobile 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
  48. 48. • Create as system for howResponsive you want to distribute the content when you have adesign 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
  49. 49. Thank you!Ida Aalenida@netliferesearch.com45 24 24 12@idaAa

×