Mobile First and Tablet-Centric Design


Published on

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mobile First and Tablet-Centric Design

  1. 1. Mobile first and Tablet centricdesignJeff WisniewskiUniversity of PittsburghFacebook: @jeffwisniewski
  2. 2. Are you going to be redesigning?DON‟T! until you learn about….. Mobile First and Tablet-Centric Design! Both of which really fall under the rubric of RESPONSIVE design
  3. 3. Responsive Designadapt the layout to the viewing environment
  4. 4. Two Dimensions Mobile-first design= content Tablet-centric design= layout
  5. 5. Mobile first“Were just now starting to think about mobile first and desktop second for a lot of our products.”-Kate Aronowitz, Design Director Facebook
  6. 6. Mobile-first ≠ Mobile friendlyMobile friendly:Remove flashMake layout single columnReward yourself with delicious lunch
  7. 7. Mobile first orthodoxy• Mobile is exploding and has forever changed computing• Designing for mobile first requires a minimalist approach to design that focuses on the key tasks users hope to achieve• Mobile extends your capabilities with GPS, NFC, AR, etc
  8. 8. What‟s so great about mobile-first?Losing 80% of your screen space forces you to focus. You need to know what matters most
  9. 9. You‟re forced to:• Get rid of interface debris• Highlight only your highest value products and services
  10. 10. Evidence• Readability• Flipboard• Instapaper•
  11. 11. Why do we think that the “desktop” user is more willing to put up with having unnecessary crap thrown at them?Unnecessary page cruft is being interpreted as damage and routed around with tools like the Readability bookmarklet, Safari‟s Reader functionality, and Instapaper. -Jeffrey Zeldman
  12. 12. Tablets are now our overlordsAnd I, for one, welcome them…
  13. 13. Tablet meMicrosoft Office 15 apps to include touch mode‟ – theverge.com2012: The year websites optimize for tablets- gigaom.comHoliday Tablet Traffic Jumps 229%
  14. 14. BBC Overhauling Its Website For „Swipability‟-PaidContent
  15. 15. How to
  16. 16. Tips• Make text larger for readability. use em-based font sizes• Bonus tip: Consider offering a text resizing control.• Increase padding and line-height• Remove mouse hover interactions wherever possible. If you want to keep them, extend them to support tap- and-hold interactions as well as mouse hover.• Percentage based containers• Remove elements using the declaration (real or simulated) “position: fixed” because they slow down page scrolling on tablets to much greater extent than on desktop.• Consider cutting some HTTP requests, as you would on mobile
  17. 17. By the numbers• Touch target size: 26-34px• Spacing between elements: Min. 8px ▫ MS Phone guidelines
  18. 18. Touch meRecommended touchtarget size is 9mm/34pxMinimum touch target sizeis 7mm/26pxMinimum spacing betweenelements is 2mm/8pxVisual size is 60-100% of the touch target size- Windows phone touch guideline-
  19. 19. Touch reference guide• Guide and cards•
  20. 20. iOs (iPad) UI guidelines mentation/UserExperience/Conceptual/Mo bileHIG/UIElementGuidelines/UIElementGuid elines.html#//apple_ref/doc/uid/TP40006556 -CH13-SW1