mobile first and tablet-centric design
DESCRIPTION
TRANSCRIPT
Mobile first and Tablet centric designJeff WisniewskiUniversity of PittsburghFacebook: facebook.com/wisniewski.jeffTwitter: @jeffwisniewski
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
Responsive Design
adapt the layout to the viewing environment
Two Dimensions
Mobile-first design= content
Tablet-centric design= layout
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
Mobile-first ≠ Mobile friendlyMobile friendly:
Remove flashMake layout single columnReward yourself with delicious lunch
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
What’s so great about mobile-first?
Losing 80% of your screen space forces you to focus.
You need to know what matters most
You’re forced to:
•Get rid of interface debris•Highlight only your highest value products
and services
Evidence
•Readability•Flipboard• Instapaper•Paper.li
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
Tablets are now our overlords
And I, for one, welcome them…
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
BBC Overhauling Its Website For ‘Swipability’-PaidContent
How to
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
By the numbers
•Touch target size: 26-34px•Spacing between elements: Min. 8px▫MS Phone guidelines
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
Touch reference guide
•Guide and cards•http://www.lukew.com/ff/entry.asp?1071
iOs (iPad) UI guidelines
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html#//apple_ref/doc/uid/TP40006556-CH13-SW1