How we work:                       PS. This                                  version is                              witho...
Hi!Ida Aalen / @idaAaida@netliferesearch.com
The Team
Kjernemodellen
I wonder if my                  OrTelcohe just                     was has                  published the                 ...
Whoeverscreams the most    will win?
It has to be up to theusers.
1400       1200       1000                                                             Some content is                    ...
Very few                              2%users visit             12%the               11%frontpage                         ...
The Core Model    The Core
• Core pages are moreNow what?       important than the front                page. This is where your                users...
Talk to others in              the same situation                                      Get more                           ...
Mobile first
Prosent                                                                                             3430                  ...
Mobile  pageviewsare 7 x higher in dec 2011   than jan     2010
Mobile on the                    run?Foto: Flickr-bruker mrjorgen CC-BY-NC-ND
Foto: Martin Bekkelund, www.bekkelund.net via Flickr. Lisens CC-BY-NC-SA 3.0.
Unprioritized   Limitedwebsites        mobile sites
• Designing for mobile first    makes you prioritize and    focus•   If it’s not important    enough to put on mobile, is ...
Responsive design
Kilde: A-pressen, 2011
Around 20% fNorwegians hasnow got access  to a tablet
About 2 of 5visits is from an     Android
–   We’re now faced with a    browser landscape [...] with    devices becoming smaller    and larger simultaneously.    Et...
–   [...] we’re designing for    more devices, more input    types, more resolutions than    ever before.    Ethan Marcott...
• Same content on all    platforms•   What we do is make the    presentation adapt to the    screen sizes and devices•   F...
1. The Grid
Grid on screens
Big screen
Small screen
Content14 - 20 px65 character lines
Elements
Elements
Elements           KREFTFORENINGEN
ElementsCore content   Related   Further...                          KREFTFORENINGEN
Prioritizing on a big screen
KREFTFORENINGEN       KREFTFORENINGEN                                                KREFTFORENINGEN1                     ...
KREFTFORENINGEN       KREFTFORENINGEN                                                KREFTFORENINGEN1                     ...
KREFTFORENINGEN       KREFTFORENINGEN                                                KREFTFORENINGEN1                     ...
KREFTFORENINGEN    KREFTFORENINGEN                             KREFTFORENINGEN4                     5                     6
KREFTFORENINGEN    KREFTFORENINGEN                             KREFTFORENINGEN4                     5                     6
KREFTFORENINGEN    KREFTFORENINGEN                             KREFTFORENINGEN4                     5                     6
KREFTFORENINGEN    KREFTFORENINGEN7                     8
KREFTFORENINGEN    KREFTFORENINGEN7                     8
Summary, sort of:
• Think about the content,The Core       structure, links etc for the               most important and mostModel          ...
• It can improveMobile first       communication between                   graphic and interaction                   desig...
• Create as system for howResponsive       you want to distribute the                 content when you have adesign       ...
Thank you!Ida Aalenida@netliferesearch.com45 24 24 12@idaAa
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
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
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
Mobile first, Responsive Design and The Core Model
Mobile first, Responsive Design and The Core Model
Mobile first, Responsive Design and The Core Model
Upcoming SlideShare
Loading in...5
×

Mobile first, Responsive Design and The Core Model

2,753

Published on

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

1 Comment
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,753
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
52
Comments
1
Likes
8
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×