Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Nowadays, just like with websites, it’s not enough to build an email without accounting for mobile devices. Therefore, let's get an overview of mobile-friendly and responsive email design.
-
0:00
[MUSIC]
-
0:04
In stage 3 we wrote all of our emails CSS and ended up with a finished product.
-
0:09
Sort of.
-
0:11
We can do more. We can make the email mobile friendly.
-
0:14
We'll do that in this video and we'll start
-
0:16
with an overview on mobile friendly and responsive email design.
-
0:21
Nowadays, just like with websites, it's not enough
-
0:24
to build an e-mail without accounting for mobile devices.
-
0:27
According to the Pew Research Center,
-
0:30
at least 50% of Americans check their e-mails on mobile devices.
-
0:34
There's a distinction to be made between mobile friendly and responsive however.
-
0:38
Since the mobile friendly emails not necessarily responsive, and
-
0:41
the responsive email is generally speaking always mobile friendly.
-
0:45
A mobile friendly email can be fixed width but still be mobile optimized.
-
0:50
An email with a fixed width 320 pixels
-
0:53
which is width of a phone's screen in portrait
-
0:55
orientation is one example.
-
0:57
It also has font sizes that don't change dependent on screen
-
1:00
size but are large enough to be readable on small screens.
-
1:04
Usually a minimum of 16 or 17 pixels.
-
1:08
It can also retain a multi-column layout while allowing for readers to
-
1:12
tap and zoom into each individual block of content for easier reading.
-
1:17
And it uses large, thumb-tappable buttons for calls
-
1:20
to action.
-
1:22
A responsive email, on the other hand, uses media queries to adjust email
-
1:25
width dependent on the size of the display on which it's being viewed.
-
1:29
That way, the email's width adapts to any display size in any orientation.
-
1:35
It also changes font size from desktop to mobile displays.
-
1:39
Several different display sizes can be targeted using different media queries.
-
1:42
A users layouts can be changed from multi-column to single-column
-
1:45
on the fly and it contains elements like image based buttons that can
-
1:50
be hidden and shown dependent on which platform the email is viewed on.
-
1:54
When designing mobile email we try to follow
-
1:56
the mantra, one eyeball one thumb and arms length.
-
2:00
This means that, on a small screen, an
-
2:02
email should be easily readable with one eye.
-
2:05
Links and calls to action usable with one thumb.
-
2:08
And any text or visual queues large enough so that
-
2:11
all of the above can be done comfortably at arms length.
-
2:14
To meet these objectives, there are a few guidelines we can follow.
-
2:17
We should maintain a minimum font size of 16 pixels.
-
2:20
Call-to-action touch targets, such as buttons,
-
2:23
should be at least 46 pixels squared.
-
2:26
You should also avoid clustering several links together in your copy.
-
2:29
It makes individual links very difficult to access.
-
2:32
Consider how people use devices and design accordingly.
-
2:36
For example, people generally use just one handle in performing
-
2:39
actions on a phone, and two when they're using a tablet.
-
2:43
Similar to websites, we can use media queries to
-
2:45
make emails more mobile friend and responsive across multiple platforms.
-
2:50
A media query follows a pretty simple structure.
-
2:53
For the purpose of email, the media query
-
2:55
styles are nested within the email style tag.
-
2:58
Like a stylesheet within a stylesheet.
-
3:00
There are two major
-
3:01
differences in how media queries are written
-
3:03
for email, versus how they're written for websites.
-
3:06
The first is that each rule within the media
-
3:08
query in an email is marked with an important declaration.
-
3:11
Doing this is necessary because the email's normal CSS is all inline, and
-
3:16
the only way to overrule the inline rules is by using the important declaration.
-
3:21
The other difference is in how each rule set's selector is written.
-
3:24
You may have noticed that they look a little strange here.
-
3:27
These are attribute selectors.
-
3:28
Basically they work in the same way that an ID or class selector would.
-
3:32
They just have different CSS specificity levels.
-
3:35
But the reason we actually use them comes down to Yahoo mail.
-
3:39
The web mail service sometimes renders media query styles regardless of
-
3:43
whether or not the email is being viewed on a mobile device.
-
3:46
Using attributes selectors is a workaround for that issue.
-
3:50
Now that we've covered some basic mobile email
-
3:52
principles, we can begin to apply them to our email.
-
3:55
Next we'll be writing media query CSS for our email
-
3:59
and we'll get it working on both desktop and mobile platforms.
You need to sign up for Treehouse in order to download course files.
Sign up