mobile first and tablet-centric design

26
Mobile first and Tablet centric design Jeff Wisniewski University of Pittsburgh Facebook: facebook.com/wisniewski.jeff Twitter: @jeffwisniewski

Upload: jeff-wisniewski

Post on 21-Dec-2014

1.287 views

Category:

Technology


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Mobile First and Tablet-Centric Design

Mobile first and Tablet centric designJeff WisniewskiUniversity of PittsburghFacebook: facebook.com/wisniewski.jeffTwitter: @jeffwisniewski

Page 2: Mobile First and Tablet-Centric Design

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

Page 3: Mobile First and Tablet-Centric Design

Responsive Design

adapt the layout to the viewing environment

Page 4: Mobile First and Tablet-Centric Design
Page 5: Mobile First and Tablet-Centric Design

Two Dimensions

Mobile-first design= content

Tablet-centric design= layout

Page 6: Mobile First and Tablet-Centric Design

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

Page 7: Mobile First and Tablet-Centric Design

Mobile-first ≠ Mobile friendlyMobile friendly:

Remove flashMake layout single columnReward yourself with delicious lunch

Page 8: Mobile First and Tablet-Centric Design

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

Page 9: Mobile First and Tablet-Centric Design

What’s so great about mobile-first?

Losing 80% of your screen space forces you to focus.

You need to know what matters most

Page 10: Mobile First and Tablet-Centric Design

You’re forced to:

•Get rid of interface debris•Highlight only your highest value products

and services

Page 11: Mobile First and Tablet-Centric Design

Evidence

•Readability•Flipboard• Instapaper•Paper.li

Page 12: Mobile First and Tablet-Centric Design

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

Page 13: Mobile First and Tablet-Centric Design

Tablets are now our overlords

And I, for one, welcome them…

Page 14: Mobile First and Tablet-Centric Design

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

Page 15: Mobile First and Tablet-Centric Design

BBC Overhauling Its Website For ‘Swipability’-PaidContent

Page 16: Mobile First and Tablet-Centric Design
Page 17: Mobile First and Tablet-Centric Design
Page 18: Mobile First and Tablet-Centric Design
Page 19: Mobile First and Tablet-Centric Design
Page 20: Mobile First and Tablet-Centric Design

How to

Page 21: Mobile First and Tablet-Centric Design

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

Page 22: Mobile First and Tablet-Centric Design

By the numbers

•Touch target size: 26-34px•Spacing between elements: Min. 8px▫MS Phone guidelines

Page 23: Mobile First and Tablet-Centric Design
Page 24: Mobile First and Tablet-Centric Design

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

Page 25: Mobile First and Tablet-Centric Design

Touch reference guide

•Guide and cards•http://www.lukew.com/ff/entry.asp?1071

Page 26: Mobile First and Tablet-Centric Design

iOs (iPad) UI guidelines

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html#//apple_ref/doc/uid/TP40006556-CH13-SW1