mobile first & responsive web design david weedon - ui/ux designer, covenant technology partners

38
Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

Upload: kenneth-durk

Post on 31-Mar-2015

229 views

Category:

Documents


6 download

TRANSCRIPT

Page 1: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

Mobile First &Responsive Web Design

David Weedon - UI/UX Designer, Covenant Technology Partners

Page 2: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

1.2 Billionmobile web users worldwide

25% in the U.S. are mobile-only

Page 3: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

So Why?

Why did smartphone sales take off so suddenly?

Page 4: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

Why the iPhone?

• Mainly, ease of use

• It was designed as a consumer

product

• Blackberry was designed with

business users in mind

Page 5: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

90% of all websites are not mobile ready

50% of business websites are not mobile ready

Page 6: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

Anywhere from

20%-100%

increased conversation rate after optimizing for mobile

Page 7: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

mobile first.

Page 8: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

the old way:

Design for the desktop first, then scale and trim the content to fit on a phone.

(graceful degradation)

Page 9: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

the new way:

Design for the phone first, then expand and enhance the site up to the full sized version.

(progressive enhancement)

Page 10: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

Sounds like you end up in the same place…

So, what’s the difference?

Page 11: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

desktop first…

Page 12: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

mobile first…

Page 13: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

desktop first: cutting away fat

mobile first: adding spice

Page 14: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

mobile first: constraints

(and why they are a good thing)

Page 15: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

Smaller Screen Size

Page 16: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

Uh oh.

1024x768

320x480

Page 17: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

80%gone, and that’s awesome!

Page 18: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

Some of that content is probably not important.

If all the important content does not fit...

Page 19: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

An example

Luke Wroblewskicredit to:

Page 20: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners
Page 21: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

This is great.

They should have started here.

Page 22: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

How do we know what to cut out?

Know your users and what they need.

Page 23: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

Not all mobile devices are 320x480.

*gasp*

Page 24: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

There are a wide variety of screen sizes.

This isn’t a new problem. We’ve seen it on the desktop for years.

Page 25: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

The real problem: Pixel Density

Page 26: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners
Page 27: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners
Page 28: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

original icon scaled icon retina ready icon

Page 29: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

Limited Attention

Page 30: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners
Page 31: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

Content must be focused. Make it Easy and Fast.

Don’t make me think!-Steven Krug

Page 32: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

Optimize for Speed.

Delays and hiccups are extremely detrimental to conversion rates.

Page 33: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

mobile first is about focus.Decide what is important at the beginning of a

project.

Page 34: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

responsive design

Page 35: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

Responsive design is powered

by

CSS Media Queries

Page 36: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

Requires more forethought and planning than traditional layout, especially for the designer(s).

Easier to maintain... One Site. One Set of Links.

Works best for content focused sites.

Page 37: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

RWD is probably not the best choice for web apps.Sites with Specific Workflows or a big E-Commerce elements work better with custom tailored mobile sites.

Page 38: Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners

Questions?