[MUSIC]

In stage 3 we wrote all of our emails CSS and ended up with a finished product.

Sort of.

We can do more. We can make the email mobile friendly.

We'll do that in this video and we'll start

with an overview on mobile friendly and responsive email design.

Nowadays, just like with websites, it's not enough

to build an e-mail without accounting for mobile devices.

According to the Pew Research Center,

at least 50% of Americans check their e-mails on mobile devices.

There's a distinction to be made between mobile friendly and responsive however.

Since the mobile friendly emails not necessarily responsive, and

the responsive email is generally speaking always mobile friendly.

A mobile friendly email can be fixed width but still be mobile optimized.

An email with a fixed width 320 pixels

which is width of a phone's screen in portrait

orientation is one example.

It also has font sizes that don't change dependent on screen

size but are large enough to be readable on small screens.

Usually a minimum of 16 or 17 pixels.

It can also retain a multi-column layout while allowing for readers to

tap and zoom into each individual block of content for easier reading.

And it uses large, thumb-tappable buttons for calls

to action.

A responsive email, on the other hand, uses media queries to adjust email

width dependent on the size of the display on which it's being viewed.

That way, the email's width adapts to any display size in any orientation.

It also changes font size from desktop to mobile displays.

Several different display sizes can be targeted using different media queries.

A users layouts can be changed from multi-column to single-column

on the fly and it contains elements like image based buttons that can

be hidden and shown dependent on which platform the email is viewed on.

When designing mobile email we try to follow

the mantra, one eyeball one thumb and arms length.

This means that, on a small screen, an

email should be easily readable with one eye.

Links and calls to action usable with one thumb.

And any text or visual queues large enough so that

all of the above can be done comfortably at arms length.

To meet these objectives, there are a few guidelines we can follow.

We should maintain a minimum font size of 16 pixels.

Call-to-action touch targets, such as buttons,

should be at least 46 pixels squared.

You should also avoid clustering several links together in your copy.

It makes individual links very difficult to access.

Consider how people use devices and design accordingly.

For example, people generally use just one handle in performing

actions on a phone, and two when they're using a tablet.

Similar to websites, we can use media queries to

make emails more mobile friend and responsive across multiple platforms.

A media query follows a pretty simple structure.

For the purpose of email, the media query

styles are nested within the email style tag.

Like a stylesheet within a stylesheet.

There are two major

differences in how media queries are written

for email, versus how they're written for websites.

The first is that each rule within the media

query in an email is marked with an important declaration.

Doing this is necessary because the email's normal CSS is all inline, and

the only way to overrule the inline rules is by using the important declaration.

The other difference is in how each rule set's selector is written.

You may have noticed that they look a little strange here.

These are attribute selectors.

Basically they work in the same way that an ID or class selector would.

They just have different CSS specificity levels.

But the reason we actually use them comes down to Yahoo mail.

The web mail service sometimes renders media query styles regardless of

whether or not the email is being viewed on a mobile device.

Using attributes selectors is a workaround for that issue.

Now that we've covered some basic mobile email

principles, we can begin to apply them to our email.

Next we'll be writing media query CSS for our email

and we'll get it working on both desktop and mobile platforms.