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

So Why?

Why did smartphone sales take off so suddenly?

Why the iPhone?

• Mainly, ease of use

• It was designed as a consumer

product

• Blackberry was designed with

business users in mind

90% of all websites are not mobile ready

50% of business websites are not mobile ready

Anywhere from

20%-100%

increased conversation rate after optimizing for mobile

mobile first.

the old way:

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

(graceful degradation)

the new way:

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

(progressive enhancement)

Sounds like you end up in the same place…

So, what’s the difference?

desktop first…

mobile first…

desktop first: cutting away fat

mobile first: adding spice

mobile first: constraints

(and why they are a good thing)

Smaller Screen Size

Uh oh.

1024x768

320x480

80%gone, and that’s awesome!

Some of that content is probably not important.

If all the important content does not fit...

An example

Luke Wroblewskicredit to:

This is great.

They should have started here.

How do we know what to cut out?

Know your users and what they need.

Not all mobile devices are 320x480.

*gasp*

There are a wide variety of screen sizes.

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

The real problem: Pixel Density

original icon scaled icon retina ready icon

Limited Attention

Content must be focused. Make it Easy and Fast.

Don’t make me think!-Steven Krug

Optimize for Speed.

Delays and hiccups are extremely detrimental to conversion rates.

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

project.

responsive design

Responsive design is powered

by

CSS Media Queries

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.

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.

Questions?