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>
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