Mobile first responsive web design

13. $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

14. Testing Thursday, March 29, 12

15. Thursday, March 29, 12

16. Thursday, March 29, 12

17. DR. EVIL TECHNIQUE Thursday, March 29, 12

18. DEMO Thursday, March 29, 12

19. CONCLUSIONS Thursday, March 29, 12

20. Pros MOBILE FIRST - Prioritisation & focus - Avoid unnecessary content - Avoid mobile as an “aerthought” RESPONSIVE LAYOUT - Diﬀerent layouts with the same base - Flexibility Thursday, March 29, 12

21. 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 intensive Thursday, March 29, 12

22. thanks! @willhindson @schjonhaug Thursday, March 29, 12

Hinweis der Redaktion

\n
## About (Andreas)\n- Forbrukerr&#xE5;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 &#x201C;afterthought&#x201D;\n
## Pros (Will)\n- Prioritisation & Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an &#x201C;afterthought&#x201D;\n
## Pros (Will)\n- Prioritisation & Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an &#x201C;afterthought&#x201D;\n
## Pros (Will)\n- Prioritisation & Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an &#x201C;afterthought&#x201D;\n
## Pros (Will)\n- Prioritisation & Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an &#x201C;afterthought&#x201D;\n
## Pros (Will)\n- Prioritisation & Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an &#x201C;afterthought&#x201D;\n
## Pros (Will)\n- Prioritisation & Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an &#x201C;afterthought&#x201D;\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