Responsive email design

21
Web Designer/Developer Hybrid a.k.a. Hybrid Designer Contact Info: Peter Walker http://WalkerTechArts.com walkertecharts petermwalker peterwalkertexas [email protected]

Transcript of Responsive email design

Page 1: Responsive email design

Web Designer/Developer Hybrid a.k.a. Hybrid DesignerContact Info: Peter Walker

http://WalkerTechArts.com!walkertecharts!petermwalker!

[email protected]

Page 2: Responsive email design

RESPONSIVE EMAIL DESIGN

Page 3: Responsive email design

47%of email opens are on mobile devices.Source: http://emailclientmarketshare.com

WHY RESPONSIVE DESIGN?

Page 4: Responsive email design

80%of people delete an email if it doesn’t look good on their device.

WHY RESPONSIVE DESIGN?

Page 5: Responsive email design

150 x / dayThe average number of times a person looks at their mobile device.

WHY RESPONSIVE DESIGN?

Page 6: Responsive email 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

Page 7: Responsive email 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.

Page 8: Responsive email design

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

Page 9: Responsive email design

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>

Page 10: Responsive email design

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>

Page 11: Responsive email design
Page 12: Responsive email design

Style Rule - Change Navigation!!table[class="nav"]{ width: 100% !important; padding: 10px }!

Page 13: Responsive email design

Style Rule - Enlarge fonts!!td[class="body-header"]{ font-size: 18px !important; }!

Page 14: Responsive email design

Style Rule - Change Colors!!

td[class=”body-copy”]{ color: #dddddd; }!

Page 15: Responsive email design

Style Rule - Add Padding!!

td[class="body"]{ padding: 15px !important; }!

Page 16: Responsive email design

Style Rule - Change or Hide Content!!

td[class="mobile-hide"]{ display: none; }!

Page 17: Responsive email design

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

Page 18: Responsive email design

Amazon Kindle FireAmazon Kindle Fire HDAndroid 4.x Email (OEM)Windows Phone 7.5Blackberry OS 6+

SUPPORTED APPS - RESPONSIVE DESIGN

Page 19: Responsive email design

Apple iPhoneApple iPad Apple iPod TouchBlackBerry PlaybookPalm Web OS 4.5

SUPPORTED APPS - RESPONSIVE DESIGN

Page 20: Responsive email 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

Page 21: Responsive email design

NEXT PRESENTATION

RESPONSIVE IMAGES

Contact Info: Peter Walkerhttp://WalkerTechArts.com!

walkertecharts!petermwalker!

[email protected]