RETROFITTINGEMAIL & LANDING PAGES FOR MOBILE

#modevux

Hello!

Lynn Morehouse

Vocus - Director of UI Design

Scenario:Email and Landing Pages should

be mobile friendly.

See Internet for reasons why.

Keep it simple.

Desktop, Tablet, & Mobile.

Scenario

Example

Email design.

Scenario

Think layout.Not design comp.

Scenario

1 column.Mobile Friendly.

Scenario

Scenario

Solution:Use Media Queries to detect what

device you are using. By width

@media only screen and

(max-width: 599px)

Solution

(max-width: 599px)

[id=container]

width: 100%;

box-sizing: border-box;

img

height: auto;

max-width: 100%;

[class=column]

width: 100%;

height: auto;

display: block;

clear: both;

Solution

Solution

Before.

Solution

After.

Success!Mobile Friendly.

Solution

What about a

Landing Page?

Solution

Still just a

Layout.

Solution

Mobile

is simple.

Solution

Solution

Tablet?

Solution

@media only screen and

(max-width: 959px)

Solution

(max-width: 959px)

[id=container]

width: 100%;

box-sizing: border-box;

img

height: auto;

max-width: 100%;

[class=columns F, G, H, I ]

width: 50%;

Solution

Solution

@media only screen and

(max-width: 480px)

Solution

(max-width: 480px)

[class=column]

width: 100%;

height: auto;

display: block;

clear: both;

Solution

Solution

Thanks!

Find me at:@lynnmorehouse

lmorehouse@vocus.com

vocus.com

#modevux