Mobile first, Responsive Design and The Core Model
•
10 j'aime•2,737 vues
How we work. The design previews are removed since the design is not finished yet :)
Recommandé
Recommandé
Contenu connexe
Similaire à Mobile first, Responsive Design and The Core Model
Similaire à Mobile first, Responsive Design and The Core Model (20)
Plus de Ida Aalen
Plus de Ida Aalen (20)
Dernier
Dernier (20)
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