Post on 12-Feb-2017
Web Designer/Developer Hybrid a.k.a. Hybrid DesignerContact Info: Peter Walker
http://WalkerTechArts.com!walkertecharts!petermwalker!
peterwalkertexaspeter.walker@walkertecharts.com
RESPONSIVE EMAIL DESIGN
47%of email opens are on mobile devices.Source: http://emailclientmarketshare.com
WHY RESPONSIVE DESIGN?
80%of people delete an email if it doesn’t look good on their device.
WHY RESPONSIVE DESIGN?
150 x / dayThe average number of times a person looks at their mobile device.
WHY RESPONSIVE DESIGN?
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
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.
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)">
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>
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>
Style Rule - Change Navigation!!table[class="nav"]{ width: 100% !important; padding: 10px }!
Style Rule - Enlarge fonts!!td[class="body-header"]{ font-size: 18px !important; }!
Style Rule - Change Colors!!
td[class=”body-copy”]{ color: #dddddd; }!
Style Rule - Add Padding!!
td[class="body"]{ padding: 15px !important; }!
Style Rule - Change or Hide Content!!
td[class="mobile-hide"]{ display: none; }!
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>!
Amazon Kindle FireAmazon Kindle Fire HDAndroid 4.x Email (OEM)Windows Phone 7.5Blackberry OS 6+
SUPPORTED APPS - RESPONSIVE DESIGN
Apple iPhoneApple iPad Apple iPod TouchBlackBerry PlaybookPalm Web OS 4.5
SUPPORTED APPS - RESPONSIVE DESIGN
Gmail
iPhone Mailbox
Android 2.1
Android Yahoo! Mail
Blackberry OS5
Windows Mobile 6.1
Windows Phone 7; 8
Windows Surface
UNSUPPORTED APPS - RESPONSIVE DESIGN
NEXT PRESENTATION
RESPONSIVE IMAGES
Contact Info: Peter Walkerhttp://WalkerTechArts.com!
walkertecharts!petermwalker!
peterwalkertexaspeter.walker@walkertecharts.com