mobile email 2012
DESCRIPTION
In the fairly early days of Responsive Design and the very rarely days of progressive disclosure this presentation is a brief walk through of the capabilities of email on mobile devices focussing on Responsive Design and Progressive Disclosure.TRANSCRIPT
Mobile Email
Responsive Design
Progressive Disclosure
To cover
Enter your email address…
Responsive Design & the @media query
Progressive Disclosure
Responsive Design
What is it?
“Special type of CSS which is activated by Screen size”
The @media queries go in the style tag
When the email is rendered, if the screen is of the specified size, the styles in the media query are applied.
Almost anything you can style normally you can change:
Size, colour, font , float, border, colours, visibility…
What does it work on?
Works…
iPhone, iPad, iPod touch,
Android Native clients:
2.2 Froyo, 2.3 Gingerbread,
4.0 Ice Creme Sandwich, 4.1 Jelly bean;
Windows Phone 7.5 (Mango), Windows Phone 8;
BlackBerry OS 6,
Palm web OS 4.5,
Kindle Fire (silk) + HD native clients.
Doesn’t work…
Android Native client: 2.1 Eclair
Android Outlook Exchange 3rd party app
Gmail app on all platforms
Windows Mobile 6.1, Windows Phone 7,
BlackBerry OS 5.
THE NEXT BIT IS VERY GEEKYGEEKY BIT OPTIONALCONTINUE OR SKIP? ▌
WHAT??
CSS is the way HTML content is styled for a page.
External Sheet
Style Tags
In-line ( best practice)
External Sheet
The HTML links to an external sheet
Eg:
<link href="pure360-screen.css" rel="stylesheet" type="text/css" />
• Multiple pages can all use the same sheet:• Easier to maintain and control
• Does not work in many clients
• Don't use it for emails!
In-line Styles
Add the style directly to the tag, eg:
<td style="font-family:arial; font-size:12px; color:red;">In 1972, a crack commando unit was sent to prison by a military court for a crime they didn't commit.</td>
Best practice
Only way for consistent styling in emails
Style Tags
The copy that needs styling has a 'class' or 'id'
and that references the same name in the style in the header:<style>.davebob {font-weight:bold;color:red;}</style>...<span class=“davebob”>A shadowy flight into the dangerous world of a manwho does not exist.</span>
• Not all email clients render it consistently• Can be broken easily• Should not rely on it• Some is needed to counter browsers’ inconsistencies• The only way for responsive design
BoilerPlates
Some styles are needed to override inbox styles
Reset all body margins and padding to 0 for good measurebody{ width:100% !important; -ms-text-size-adjust:100%;
margin:0; padding:0;}
Force Hotmail to display normal line spacing.span.yshortcuts { color:#2A5DB0; background-color:none;
border:none;}
Force Hotmail to display normal line spacing.ExternalClass {line-height:100%; width:100%;}
Style Tag Problems
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> {~subject~} </title><style type="text/css">
.davebob {font-weight:bold;color:red;}</style> </head> <body> <span class=“davebob”>
A shadowy flight into the dangerous world of a man who does not exist.
</span> </body></html>
Doctype, html, head & body: stripped by vis-ed
Everything apart from contents of body tag, stripped by many inboxes eg: Yahoo – although some still get rendered??
GEEKY BIT COMPLETE, CARRY ON▌
What does it look like?
Progressive Disclosure
Progressive Disclosure
What is it?
Utilises the way touch screens react to the DHTML “.hover”
On a desktop when you hover with a mouse something happens.
BUT you cannot hover on touch screens so:• A tap activates it• Another tap deactivates it
THE NEXT BIT IS VERY GEEKYGEEKY BIT OPTIONALCONTINUE OR SKIP? ▌
.hover
<style> a.hovershow:hover {visibility: hidden;} .hovershow:hover + .copy { display: inline !important;}</style>…<a class="hoverhide">Hide</a><a href="#" class="hovershow">Show</a>
When you Tap “Show”, the “Show” button above with be hidden and the copy below with show and so will the “Show” Button.
When you tap “Hide” or another “Show” button, the copy and the “Hide” button will be hidden and the “Show” button will appear.
GEEKY BIT COMPLETE, CARRY ON▌
