20. Pros MOBILE FIRST
- Prioritisation & focus
- Avoid unnecessary content
- Avoid mobile as an “aerthought”
RESPONSIVE LAYOUT
- Different 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,
difficult to fill space
RESPONSIVE LAYOUT
- Loading unnecessary content
- Developing is time intensive
Thursday, March 29, 12
22. thanks!
@willhindson
@schjonhaug
Thursday, March 29, 12
Notes de l'éditeur
\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