Optimizing HTML Email for Mobile | WDYK
•Download as KEY, PDF•
11 likes•8,590 views
The uptake of mobile devices has been phenomenal. With the growth of email as a communication medium not showing any signs of slowing up either, we've found that 1 in 5 email newsletters are being opened on a mobile device. As a result, the optimization of HTML email for mobile email clients is no longer a 'nice to have', but necessary. In 5 minutes, find out how HTML email designers can apply practical techniques to dramatically improve the readability and usability of their messages. Presented by Ros Hodgekiss at Web Directions' 'What do you know?', 1 September, 2011
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Optimizing HTML Email for Mobile | WDYK
Similar to Optimizing HTML Email for Mobile | WDYK (20)
More from Ros Hodgekiss
More from Ros Hodgekiss (7)
Recently uploaded
Recently uploaded (20)
Optimizing HTML Email for Mobile | WDYK
- 1. MOBILE EMAIL IN 5 MINS
- 2. MOBILE EMAIL IN 5 MINS
- 3. FITTING LOADS OF AWESOME MOBILE EMAIL IN 5 MINS ON A SMALL SCREEN
- 4. EMAIL IS NOT DEAD 70 mobile email users in the US
- 7. WTF?
- 8. MOBILE CSS IS NOT SO HARD
- 9. RESPONSIVE WEB DESIGN RESPONSIVE EMAIL DESIGN?
- 10. MEDIA QUERIES yes, they work in email!
- 11. <style type=”text/css”> ... @media only screen and (max-device-width: 480px) { /* CSS for display on mobile devices */ } ... </style>
- 12. ADAPTING EMAIL FOR MOBILE DEVICES
- 13. hide content adjust layout ADAPTING EMAIL FOR MOBILE DEVICES resize images control font-size
- 14. <style type=”text/css”> ... @media only screen and (max-device-width: 480px) { span[class=date] { display: none; } table[class=table] { width: 300px; } img[class=hero] { width: 100px; } p { -webkit-text-size-adjust:none; } } ... </style>
- 15. <style type=”text/css”> ... @media only screen and (max-device-width: 480px) { span[class=date] { display: none; } table[class=table] { width: 300px; } img[class=hero] { width: 100px; } p { -webkit-text-size-adjust:none; } } ... </style>
- 16. “THE EMAILS ARE TOO DAMN LONG!”
- 19. @media only screen and (max-device-width: 480px) { ... a[class="mobileshow"], a[class="mobilehide"] { display: block !important; } div[class="article"] { display: none; } a.mobileshow:hover { visibility: hidden; } .mobileshow:hover + .article { display: inline !important; } ... } <a href="#" class="mobilehide">Hide</a> <a href="#" class="mobileshow">Show</a>
- 20. WHEN DESIGNING FOR MOBILE DEVICES...
- 21. 1 column bigger links WHEN DESIGNING FOR MOBILE DEVICES... more space concise content
- 22. MOBILE IS THE FUTURE OF EMAIL DESIGN
- 23. mobile is on the rise media queries MOBILE IS THE FUTURE OF EMAIL DESIGN responsive layouts less crap
- 25. DONE! THANK YOU! @yarrcat | roshodgekiss.com
Editor's Notes
- Hi everyone, I&#x2019;m Ros and I&#x2019;m here to give you a crash course on optimizing email for mobile devices.\nIf you&#x2019;ve ever dipped into responsive design, you&#x2019;ll know that the most obvious challenge is...\n
- - Fit lots on a small screen\n- Bad enough with web, but emails are:\n - Long\n - Image heavy\n - Hard to navigate\n - Popular anyway\n\n... fitting everything you need to express on a small screen. It&#x2019;s bad enough as it is compressing web content onto the small screen, but emails tend to be particularly:\nLong | Hard to navigate | Image heavy | Not ideal for short attention spans | Read on mobile devices regardless\n
- - Fit lots on a small screen\n- Bad enough with web, but emails are:\n - Long\n - Image heavy\n - Hard to navigate\n - Popular anyway\n\n... fitting everything you need to express on a small screen. It&#x2019;s bad enough as it is compressing web content onto the small screen, but emails tend to be particularly:\nLong | Hard to navigate | Image heavy | Not ideal for short attention spans | Read on mobile devices regardless\n
- - Fit lots on a small screen\n- Bad enough with web, but emails are:\n - Long\n - Image heavy\n - Hard to navigate\n - Popular anyway\n\n... fitting everything you need to express on a small screen. It&#x2019;s bad enough as it is compressing web content onto the small screen, but emails tend to be particularly:\nLong | Hard to navigate | Image heavy | Not ideal for short attention spans | Read on mobile devices regardless\n
- Email is not dead. People want:\n- Deals\n- Gigs \n- Convenience\n\nThe fact is, the immediacy of email makes it ideal for contexts like:\nDaily deals (Groupon) | Flight alerts | Tickets --> therefore, everyone is reading email on their phones\n
- - 1 in 5 email opens worldwide is on a mobile device\n- 75% of these opens happen on iOS devices\n- More people are reading emails on iPhones, than in Gmail or Hotmail\n\n... in fact, 1 in 5 emails are now opened on a mobile device, by our count. That&#x2019;s more than via Hotmail or Gmail. Roughly 75% of these opens happen on iOS devices, which is a happy problem for email designers. We&#x2019;ll get back to that in a moment.\n
- - Despite this uptake, there are naysayers\n- For the longest time, email the red-headed stepchild\n- Because CSS support has been so poor in most email clients\n- Take heart. Why believe a man who thinks this is the best ad ever\n\nFolks like Zeldman have given up. They don&#x2019;t want to deal with the inherit problems with CSS support. I say, don&#x2019;t listen to a man who had ads like this on his site.\n
- - Because the iPhone has changed everything\n- Usage is on the rise\n- Thanks to WebKit, CSS support in Apple email clients is good\n- Stepchild no more - the email client is a web browser\n\nBut as this presentation is about specifically designing HTML email for mobile devices and 75% of those fall into the iOS basket, things aren&#x2019;t as bad as they sound. First up, iOS devices and Android default Mail use the same engine to render email, as the Safari browser uses to render pages on the web. That means CSS support on these devices is actually pretty good.\n
- - All the things you do as a web designer, you can do for mobile\n- It&#x2019;s just a matter of targeting iOS devices\n- The same techniques for optimizing on the web can be used for email\n\nNext, it&#x2019;s a matter of targeting these mobile devices. And if you&#x2019;ve tried your hand at responsive design for the web, you may be surprised to know that the same techniques which are used to optimize websites can also be used to optimize email.\n
- - Stylesheets which target device capabilities\n- Supply one stylesheet for mobile devices, another for everything else\n\nAnd just as you would use media queries to create responsive designs for the web, so you can with email. For those just starting out, media queries are stylesheets which target device-specific resolutions. The whole idea with media queries is that you supply one stylesheet for email clients on mobile devices, one for everyone else.\n
- - That&#x2019;s what it looks like\n- Works on Android, too! \n\nThere&#x2019;s nothing exotic about the media queries used in email - as you can see, we&#x2019;re targeting iPhone dimensions here, with a landscape width of 480px. This also works on Android devices, too.\n
- - Things you can do with media queries\n\nThere&#x2019;s a couple of things we want to use mobile-specific CSS for. First up, it&#x2019;s great to hiding extraneous stuff that can clutter a small screen. It&#x2019;s also great for converting the email to a narrow layout. Images can be resized to fit on the small screen and tiny font sizes can be made readable.\n
- - Things you can do with media queries\n\nThere&#x2019;s a couple of things we want to use mobile-specific CSS for. First up, it&#x2019;s great to hiding extraneous stuff that can clutter a small screen. It&#x2019;s also great for converting the email to a narrow layout. Images can be resized to fit on the small screen and tiny font sizes can be made readable.\n
- - Things you can do with media queries\n\nThere&#x2019;s a couple of things we want to use mobile-specific CSS for. First up, it&#x2019;s great to hiding extraneous stuff that can clutter a small screen. It&#x2019;s also great for converting the email to a narrow layout. Images can be resized to fit on the small screen and tiny font sizes can be made readable.\n
- - Things you can do with media queries\n\nThere&#x2019;s a couple of things we want to use mobile-specific CSS for. First up, it&#x2019;s great to hiding extraneous stuff that can clutter a small screen. It&#x2019;s also great for converting the email to a narrow layout. Images can be resized to fit on the small screen and tiny font sizes can be made readable.\n
- - Example of techniques\n- It&#x2019;s all well and good that you can read the text... (email is too damn long)\n\nSo first, lets look at a newsletter that hasn&#x2019;t been optimized for reading on email devices. Requires a lot of pinching to read, lots of extraneous stuff going on like dates.\n
- - Example of techniques\n- It&#x2019;s all well and good that you can read the text... (email is too damn long)\n\nSo first, lets look at a newsletter that hasn&#x2019;t been optimized for reading on email devices. Requires a lot of pinching to read, lots of extraneous stuff going on like dates.\n
- - Example of techniques\n- It&#x2019;s all well and good that you can read the text... (email is too damn long)\n\nSo first, lets look at a newsletter that hasn&#x2019;t been optimized for reading on email devices. Requires a lot of pinching to read, lots of extraneous stuff going on like dates.\n
- - !!!\n- Half the battle is dealing with lots of content\n- Borrow a technique used on mobile apps / sites\n\nBut improving readability and usability is just one thing. Using mobile stylesheets, you can also address other issues - like making long email content easy to navigate. In this case, we'll borrow a technique widely used on mobile apps and sites.\n
- - Progressive disclosure\n- Content overview\n- Dive in to what&#x2019;s relevant\n- Selective of how they spend their time, selective of what they read\n\nJust as sites like Wikipedia use toggle buttons on their mobile site to show and hide content, so you too can create toggle buttons to allow users to easily navigate email content. See in this example how we've hidden text and images behind a list of headings. It&#x2019;s called progressive disclosure and it&#x2019;s possible on the iPhone. --> Overview of email&#x2019;s content without scrolling through it.\n--> Selective of time, selective of what content they read.\n
- - Progressive disclosure\n- Content overview\n- Dive in to what&#x2019;s relevant\n- Selective of how they spend their time, selective of what they read\n\nJust as sites like Wikipedia use toggle buttons on their mobile site to show and hide content, so you too can create toggle buttons to allow users to easily navigate email content. See in this example how we've hidden text and images behind a list of headings. It&#x2019;s called progressive disclosure and it&#x2019;s possible on the iPhone. --> Overview of email&#x2019;s content without scrolling through it.\n--> Selective of time, selective of what content they read.\n
- - This technique discovered by Jesse Dodds and myself\n- Takes advantage of hover states on touch devices\n\nHow you implement these toggle buttons is a bit of a hack. In theory, iPhones shouldn&#x2019;t have a hover state on links, but we found that you can trip them off anyway by using a faux link. Here&#x2019;s a snippet that shows how the toggle buttons show and hide content, while swapping states.\n
- - Things to keep in mind when designing for mobile\n\nBut enough with the code. HTML email is a visual medium, so there are a couple of considerations that go into a well-optimized design. For example, 1 column layouts work best, as do using larger links and adding lots of space between them. Short is good - the less scrolling that needs to be done, the better.\n
- - Things to keep in mind when designing for mobile\n\nBut enough with the code. HTML email is a visual medium, so there are a couple of considerations that go into a well-optimized design. For example, 1 column layouts work best, as do using larger links and adding lots of space between them. Short is good - the less scrolling that needs to be done, the better.\n
- - Things to keep in mind when designing for mobile\n\nBut enough with the code. HTML email is a visual medium, so there are a couple of considerations that go into a well-optimized design. For example, 1 column layouts work best, as do using larger links and adding lots of space between them. Short is good - the less scrolling that needs to be done, the better.\n
- - Things to keep in mind when designing for mobile\n\nBut enough with the code. HTML email is a visual medium, so there are a couple of considerations that go into a well-optimized design. For example, 1 column layouts work best, as do using larger links and adding lots of space between them. Short is good - the less scrolling that needs to be done, the better.\n
- - We cannot ignore mobile\n- Using old techniques on new devices\n- Up to us to make email great to read on any device\n- Dial it in!\n\nSo finally, if we&#x2019;re in the business of designing HTML email, we simply have to design for mobile devices. No excuses now. Media queries are straightforward to use. Responsive layouts are nothing new. It&#x2019;s just up to folks like us to make reading email a pleasurable task in any email client.\n
- - We cannot ignore mobile\n- Using old techniques on new devices\n- Up to us to make email great to read on any device\n- Dial it in!\n\nSo finally, if we&#x2019;re in the business of designing HTML email, we simply have to design for mobile devices. No excuses now. Media queries are straightforward to use. Responsive layouts are nothing new. It&#x2019;s just up to folks like us to make reading email a pleasurable task in any email client.\n
- - We cannot ignore mobile\n- Using old techniques on new devices\n- Up to us to make email great to read on any device\n- Dial it in!\n\nSo finally, if we&#x2019;re in the business of designing HTML email, we simply have to design for mobile devices. No excuses now. Media queries are straightforward to use. Responsive layouts are nothing new. It&#x2019;s just up to folks like us to make reading email a pleasurable task in any email client.\n
- - We cannot ignore mobile\n- Using old techniques on new devices\n- Up to us to make email great to read on any device\n- Dial it in!\n\nSo finally, if we&#x2019;re in the business of designing HTML email, we simply have to design for mobile devices. No excuses now. Media queries are straightforward to use. Responsive layouts are nothing new. It&#x2019;s just up to folks like us to make reading email a pleasurable task in any email client.\n
- Thank you!\n