Responsive email design
•
0 likes•377 views
This document discusses responsive email design and the need for emails to adapt to different devices. It notes that 47% of email opens are on mobile devices and 80% of people delete emails that do not look good on their device. It introduces responsive design techniques like fluid layouts and media queries to style emails differently depending on screen width. It provides examples of CSS rules to make navigation, fonts, colors, padding and content responsive. It also lists apps that do and do not support responsive email design.
More Related Content
What's hot
What's hot (10)
Viewers also liked
Viewers also liked (12)
Similar to Responsive email design
Similar to Responsive email design (20)
Recently uploaded
Recently uploaded (20)
Responsive email design
- 1. Web Designer/Developer Hybrid a.k.a. Hybrid Designer Contact Info: Peter Walker http://WalkerTechArts.com! walkertecharts! petermwalker! peterwalkertexas peter.walker@walkertecharts.com
- 3. 47% of email opens are on mobile devices. Source: http://emailclientmarketshare.com WHY RESPONSIVE DESIGN?
- 4. 80% of people delete an email if it doesn’t look good on their device. WHY RESPONSIVE DESIGN?
- 5. 150 x / day The average number of times a person looks at their mobile device. WHY RESPONSIVE DESIGN?
- 6. Fluid layout - uses percentages instead of widths. Effect - when the size of the browser window changes, the design adapts to the window size. RESPONSIVE DESIGN
- 7. ADAPTIVE DESIGN • Media Queries - add changes to CSS for devices of a particular width. • Usually in the head of the HTML5 document • In the style.css or custom coded CSS page for the device.
- 8. Smartphones - 320px wide by 480px high - Portrait! <link href="css/iphone.css" rel="stylesheet" media="only screen and (min-device-width: 320px) and (max-device-width: 480px)">
- 9. html after <title> in <head> of document ! <style type=”text/css”> rules <style>! <html>! <head>! <title>Awesome Email</title>! <style type=”text/css”> ! rules ! </style>! </head>! <body>
- 10. Media Query ! @media screen and (max-width: 480px)! <html>! <head>! <title>Awesome Email</title>! <style type=”text/css”>! @media screen and (max-width: 480px) ! rules ! </style>! </head>! <body>
- 12. Style Rule - Change Navigation! ! table[class="nav"]{ width: 100% !important; padding: 10px }!
- 13. Style Rule - Enlarge fonts! ! td[class="body-header"]{ font-size: 18px !important; }!
- 14. Style Rule - Change Colors! ! td[class=”body-copy”]{ color: #dddddd; }!
- 15. Style Rule - Add Padding! ! td[class="body"]{ padding: 15px !important; }!
- 16. Style Rule - Change or Hide Content! ! td[class="mobile-hide"]{ display: none; }!
- 17. The HTML ! CSS = the type of container ! or element within the html.! <html>! <head>! <title>Awesome Email</title>! <style type=”text/css”>! td[class="body-header"]{font-size: 18px !important; }! rules ! </style>! </head>! <body>! <table><tr>! <td align=“left” class=“body-header”></td></tr></table>!
- 18. Amazon Kindle Fire Amazon Kindle Fire HD Android 4.x Email (OEM) Windows Phone 7.5 Blackberry OS 6+ SUPPORTED APPS - RESPONSIVE DESIGN
- 19. Apple iPhone Apple iPad Apple iPod Touch BlackBerry Playbook Palm Web OS 4.5 SUPPORTED APPS - RESPONSIVE DESIGN
- 20. Gmail iPhone Mailbox Android 2.1 AndroidYahoo! Mail Blackberry OS5 Windows Mobile 6.1 Windows Phone 7; 8 Windows Surface UNSUPPORTED APPS - RESPONSIVE DESIGN
- 21. NEXT PRESENTATION RESPONSIVE IMAGES Contact Info: Peter Walker http://WalkerTechArts.com! walkertecharts! petermwalker! peterwalkertexas peter.walker@walkertecharts.com