Email
Like
Liked ×
Save
Private Content
Embed
Loading embed code…
×
This activity has also been shared with your LinkedIn network
Undo LinkedIn share Settings
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.
Loading

Mobile first responsive web design

Mobile first responsive web design

by Will Hindson, Web designer at Netlife Research on Mar 29, 2012

3,165 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,165
Views on SlideShare: 1,348
Embed Views: 1,817

Actions

Likes: 0
Downloads: 24
Comments: 0

5 Embeds 1,817

http://mobile-meetup.origo.no	1805
http://origo.no	8
http://www.mobile-meetup.origo.no	2
http://oslo.origo.no	1
http://sitestree.com	1

Accessibility

View text version

Categories

Upload Details

Uploaded via SlideShare as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

File a copyright complaint

\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 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 - Diﬀerent 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, diﬃcult to ﬁll space RESPONSIVE LAYOUT - Loading unnecessary content - Developing is time intensiveThursday, March 29, 12
thanks! @willhindson @schjonhaugThursday, March 29, 12