Mobile First and Tablet-Centric Design

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