Mobile first responsive web design
Upcoming SlideShare
Loading in...5
×
 

Mobile first responsive web design

on

  • 3,641 views

A short talk about our process behind designing "Hva koster Tannlegen?" for multiple screen sizes with a mobile-first approach.

A short talk about our process behind designing "Hva koster Tannlegen?" for multiple screen sizes with a mobile-first approach.

Statistics

Views

Total Views
3,641
Slideshare-icon Views on SlideShare
1,775
Embed Views
1,866

Actions

Likes
1
Downloads
26
Comments
0

6 Embeds 1,866

http://mobile-meetup.origo.no 1849
http://origo.no 8
http://www.mobile-meetup.origo.no 6
http://oslo.origo.no 1
http://sitestree.com 1
http://www.pinterest.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

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
  • \n
  • ## About (Andreas)\n- Forbrukerrådet / portals\n- Tasks & user groups\nTELEPRISER og FINANSPORTALEN\n
  • - "Quality" problem - our concept is about price & location\n- Deliver fully designed HTML prototype\n
  • - "Quality" problem - our concept is about price & location\n- Deliver fully designed HTML prototype\n
  • - "Quality" problem - our concept is about price & location\n- Deliver fully designed HTML prototype\n
  • ## Mobile first (Will)\n- Inspired by Ethan Marcotte / mobile first\n
  • ETHAN MARCOTTE\n\nLUKE WROBLEWSKI\n
  • ETHAN MARCOTTE\n\nLUKE WROBLEWSKI\n
  • - Started loosly sketching wireframes\n- Were forced to prioritise and be ruthless with content\n- Didn't think about the desktop site at this stage\n
  • - Started prototyping early (Tech Slide)\n
  • - SASS/COMPASS v useful for working out responsive widths + compass for outputting cross browser css3 prefixes.\n- Sinatra a lightweight framework for tying together the prototype.\n- Git for collaboration\n
  • - SASS/COMPASS v useful for working out responsive widths + compass for outputting cross browser css3 prefixes.\n- Sinatra a lightweight framework for tying together the prototype.\n- Git for collaboration\n
  • - SASS/COMPASS v useful for working out responsive widths + compass for outputting cross browser css3 prefixes.\n- Sinatra a lightweight framework for tying together the prototype.\n- Git for collaboration\n
  • ## Responsive - Sizing up! (Will)\n
  • - Desktop Cut'n'paste experiment\n- Content v stripped down, difficult to translate - introduced map\n
  • \n
  • - what is sass? Preprocessor for CSS\n- SASS calculate percentages and ems from px\n
  • \n
  • ## User tests (Andreas)\n- Tested 3 sizes, random order\n- Nodilus system\n\n
  • \n
  • - Generally successful, experience translated across screen sizes\n
  • - "Very simple", easy to use (even DR EVIL managed)\n
  • ## DEMO (Will + Andreas)\n*Functionality* (Andreas)\n- Initially wanted exactly the same content across all sizes, however quickly learnt that we needed to hide / load content depending on browser size\n- The process for finding a dentist ended quite different across different screens\n\n*Design:* (Will)\n- Link colours - large hit areas etc, translated also to desktop. Might be more difficult other way around!\n- Navigation - Changes in header, footer on mobile\n- Arrow conventions for expandable boxes & links, consistency\n\n*Technical:* (Will)\n- MEDIA QUERIES - base css + tablet & desktop\n- Matchmedia JS media queries\n- SVG x2 Media query\n\n- "Clean" HTML difficult - don't be afraid to use containers\n- Prototype not photoshop, sometimes easy to get stuck in code details.\n- Code changed often, leading to some bloat and unused code\n
  • \n
  • ## Pros (Will)\n- Prioritisation & Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an “afterthought”\n
  • ## Pros (Will)\n- Prioritisation & Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an “afterthought”\n
  • ## Pros (Will)\n- Prioritisation & Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an “afterthought”\n
  • ## Pros (Will)\n- Prioritisation & Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an “afterthought”\n
  • ## Pros (Will)\n- Prioritisation & Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an “afterthought”\n
  • ## Pros (Will)\n- Prioritisation & Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an “afterthought”\n
  • ## Pros (Will)\n- Prioritisation & Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an “afterthought”\n
  • ## Cons (Andreas)\n- Easy to forget about larger screens\n- Navigational conventions might not scale up\n- Content can be very streamlined, difficult to fill space\n
  • ## Cons (Andreas)\n- Easy to forget about larger screens\n- Navigational conventions might not scale up\n- Content can be very streamlined, difficult to fill space\n
  • ## Cons (Andreas)\n- Easy to forget about larger screens\n- Navigational conventions might not scale up\n- Content can be very streamlined, difficult to fill space\n
  • ## Cons (Andreas)\n- Easy to forget about larger screens\n- Navigational conventions might not scale up\n- Content can be very streamlined, difficult to fill space\n
  • ## Cons (Andreas)\n- Easy to forget about larger screens\n- Navigational conventions might not scale up\n- Content can be very streamlined, difficult to fill space\n
  • ## Cons (Andreas)\n- Easy to forget about larger screens\n- Navigational conventions might not scale up\n- Content can be very streamlined, difficult to fill space\n
  • ## Cons (Andreas)\n- Easy to forget about larger screens\n- Navigational conventions might not scale up\n- Content can be very streamlined, difficult to fill space\n
  • \n

Mobile first responsive web design Mobile first responsive web design Presentation Transcript

  • Mobile first & responsive design Andreas Schjønhaug Will HindsonThursday, March 29, 12
  • Hva koster tannlegen?Thursday, March 29, 12
  • Choosing a dentist 1 - Quality 2 - Price 3 - LocationThursday, March 29, 12
  • Mobile firstThursday, March 29, 12
  • Thursday, March 29, 12
  • Thursday, March 29, 12
  • Thursday, March 29, 12
  • Tech slide! - HTML / SASS - COMPASS / JS - Sinatra on Ruby - GitThursday, March 29, 12
  • <---- RESPONSIVIZING! ---->Thursday, March 29, 12
  • Thursday, March 29, 12
  • Thursday, March 29, 12
  • SASS TO THE RESCUE!Thursday, March 29, 12
  • $width-colspan-one: percentage(340px / 1140px); $width-gutter: percentage(20px / 1140px); .container { max-width: 1140px; width: 90%; nav { width: $width-colspan-one; } }Thursday, March 29, 12
  • TestingThursday, March 29, 12
  • Thursday, March 29, 12
  • Thursday, March 29, 12
  • DR. EVIL TECHNIQUEThursday, March 29, 12
  • DEMOThursday, March 29, 12
  • CONCLUSIONSThursday, March 29, 12
  • Pros MOBILE FIRST - Prioritisation & focus - Avoid unnecessary content - Avoid mobile as an “aerthought” RESPONSIVE LAYOUT - Different layouts with the same base - FlexibilityThursday, March 29, 12
  • Cons MOBILE FIRST - Easy to forget about larger screens - Navigational conventions might not scale up - Content can be very streamlined, difficult to fill space RESPONSIVE LAYOUT - Loading unnecessary content - Developing is time intensiveThursday, March 29, 12
  • thanks! @willhindson @schjonhaugThursday, March 29, 12