0
Mobile first &                         responsive design                                       Andreas Schjønhaug         ...
Hva koster tannlegen?Thursday, March 29, 12
Choosing a dentist                              1 - Quality                              2 - Price                        ...
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                ...
<---- 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);               .con...
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...
Cons       MOBILE FIRST                                -   Easy to forget about larger screens                            ...
thanks!                         @willhindson                         @schjonhaugThursday, March 29, 12
Upcoming SlideShare
Loading in...5
×

Mobile first responsive web design

3,424

Published on

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

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,424
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • ## About (Andreas)\n- Forbrukerr&amp;#xE5;det / portals\n- Tasks &amp; user groups\nTELEPRISER og FINANSPORTALEN\n
  • - &quot;Quality&quot; problem - our concept is about price &amp; location\n- Deliver fully designed HTML prototype\n
  • - &quot;Quality&quot; problem - our concept is about price &amp; location\n- Deliver fully designed HTML prototype\n
  • - &quot;Quality&quot; problem - our concept is about price &amp; 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&apos;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&apos;n&apos;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
  • - &quot;Very simple&quot;, 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 &amp; links, consistency\n\n*Technical:* (Will)\n- MEDIA QUERIES - base css + tablet &amp; desktop\n- Matchmedia JS media queries\n- SVG x2 Media query\n\n- &quot;Clean&quot; HTML difficult - don&apos;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 &amp; Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an &amp;#x201C;afterthought&amp;#x201D;\n
  • ## Pros (Will)\n- Prioritisation &amp; Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an &amp;#x201C;afterthought&amp;#x201D;\n
  • ## Pros (Will)\n- Prioritisation &amp; Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an &amp;#x201C;afterthought&amp;#x201D;\n
  • ## Pros (Will)\n- Prioritisation &amp; Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an &amp;#x201C;afterthought&amp;#x201D;\n
  • ## Pros (Will)\n- Prioritisation &amp; Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an &amp;#x201C;afterthought&amp;#x201D;\n
  • ## Pros (Will)\n- Prioritisation &amp; Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an &amp;#x201C;afterthought&amp;#x201D;\n
  • ## Pros (Will)\n- Prioritisation &amp; Focus\n- Avoid unnecessary content which otherwise would have been suggested\n- Avoid mobile as an &amp;#x201C;afterthought&amp;#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
  • Transcript of "Mobile first responsive web design"

    1. 1. Mobile first & responsive design Andreas Schjønhaug Will HindsonThursday, March 29, 12
    2. 2. Hva koster tannlegen?Thursday, March 29, 12
    3. 3. Choosing a dentist 1 - Quality 2 - Price 3 - LocationThursday, March 29, 12
    4. 4. Mobile firstThursday, March 29, 12
    5. 5. Thursday, March 29, 12
    6. 6. Thursday, March 29, 12
    7. 7. Thursday, March 29, 12
    8. 8. Tech slide! - HTML / SASS - COMPASS / JS - Sinatra on Ruby - GitThursday, March 29, 12
    9. 9. <---- RESPONSIVIZING! ---->Thursday, March 29, 12
    10. 10. Thursday, March 29, 12
    11. 11. Thursday, March 29, 12
    12. 12. SASS TO THE RESCUE!Thursday, March 29, 12
    13. 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. 14. TestingThursday, March 29, 12
    15. 15. Thursday, March 29, 12
    16. 16. Thursday, March 29, 12
    17. 17. DR. EVIL TECHNIQUEThursday, March 29, 12
    18. 18. DEMOThursday, March 29, 12
    19. 19. CONCLUSIONSThursday, March 29, 12
    20. 20. 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
    21. 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 intensiveThursday, March 29, 12
    22. 22. thanks! @willhindson @schjonhaugThursday, March 29, 12
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×