Mobile First and Tablet-Centric Design
Download as PPTX, PDF1 like1,148 views
- Mobile first and tablet-centric design focus on creating responsive designs that adapt to different screen sizes, with mobile-first design prioritizing content for mobile screens and tablet-centric design focusing on layout for tablets. - Designing for mobile first requires a minimalist approach and focusing on key tasks by removing unnecessary elements and highlighting the most important content/features. - Evidence shows users prefer stripped-down, content-focused designs on mobile via tools like Readability and services like Instapaper that remove excess content.
Mobile First and Tablet-Centric Design
- 1. Mobile first and Tablet centric design Jeff Wisniewski University of Pittsburgh Facebook: facebook.com/wisniewski.jeff Twitter: @jeffwisniewski
- 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. Responsive Design adapt the layout to the viewing environment
- 5. Two Dimensions Mobile-first design= content Tablet-centric design= layout
- 6. Mobile first “We're just now starting to think about mobile first and desktop second for a lot of our products.” -Kate Aronowitz, Design Director Facebook
- 7. Mobile-first ≠ Mobile friendly Mobile friendly: Remove flash Make layout single column Reward yourself with delicious lunch
- 8. 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
- 9. What‟s so great about mobile-first? Losing 80% of your screen space forces you to focus. You need to know what matters most
- 10. You‟re forced to: • Get rid of interface debris • Highlight only your highest value products and services
- 11. Evidence • Readability • Flipboard • Instapaper • Paper.li
- 12. 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
- 13. Tablets are now our overlords And I, for one, welcome them…
- 14. Tablet me Microsoft Office 15 apps to include 'touch mode‟ – theverge.com 2012: The year websites optimize for tablets - gigaom.com Holiday Tablet Traffic Jumps 229% -jumptap.com
- 15. BBC Overhauling Its Website For „Swipability‟-PaidContent
- 20. How to
- 21. 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
- 22. By the numbers • Touch target size: 26-34px • Spacing between elements: Min. 8px ▫ MS Phone guidelines
- 24. Touch me Recommended touch target size is 9mm/34px Minimum touch target size is 7mm/26px Minimum spacing between elements is 2mm/8px Visual size is 60-100% of the touch target size - Windows phone touch guideline - http://msdn.microsoft.com/en-us/library/hh202889(v=vs.92).aspxs
- 25. Touch reference guide • Guide and cards • http://www.lukew.com/ff/entry.asp?1071
- 26. iOs (iPad) UI guidelines https://developer.apple.com/library/ios/docu mentation/UserExperience/Conceptual/Mo bileHIG/UIElementGuidelines/UIElementGuid elines.html#//apple_ref/doc/uid/TP40006556 -CH13-SW1