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

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