Mobile first, Responsive Design and The Core Model
Upcoming SlideShare
Loading in...5
×
 

Mobile first, Responsive Design and The Core Model

on

  • 2,728 views

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

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

Statistics

Views

Total Views
2,728
Views on SlideShare
2,201
Embed Views
527

Actions

Likes
7
Downloads
40
Comments
1

13 Embeds 527

http://www.scoop.it 331
http://mobilewebstrategies.blogspot.fi 95
http://sprmario.tumblr.com 56
http://mobilewebstrategies.blogspot.com 19
http://www.mobilewebstrategies.blogspot.fi 8
https://twitter.com 5
http://www.blogger.com 4
http://flavors.me 2
http://memolane.com 2
http://mobilewebstrategies.blogspot.com.es 2
http://www.linkedin.com 1
http://feeds.feedburner.com 1
http://mobilewebstrategies.blogspot.de 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile first, Responsive Design and The Core Model Mobile first, Responsive Design and The Core Model Presentation Transcript

  • How we work: PS. This version is without previewsCore content of the finished designMobile firstResponsive Ida Aalen / @idaAa UXCamp Europe 2012
  • Hi!Ida Aalen / @idaAaida@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
  • Whoeverscreams the most will win?
  • It has to be up to theusers.
  • 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
  • Very few 2%users visit 12%the 11%frontpage 76% Search Referrals Direct traffic Campaigns
  • The Core Model The Core
  • • 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
  • Talk to others in the same situation Get more people to useWaiting for the cancertreatment society’s services Attend a course or group
  • Mobile first
  • 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.
  • 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 it important enough to put on the desktop?
  • 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. 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!
  • 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 2 3
  • KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN1 2 3
  • KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN1 2 3
  • 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 used sites first (“the core”) • The Core is the same on all devices
  • • 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
  • • 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
  • Thank you!Ida Aalenida@netliferesearch.com45 24 24 12@idaAa