Mobile Email 2012
•Descargar como PPTX, PDF•
0 recomendaciones•201 vistas
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.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (16)
Similar a Mobile Email 2012
Similar a Mobile Email 2012 (20)
Más de Andy Thorpe
Último
Último (20)
Mobile Email 2012
- 1. Mobile Email Responsive Design Progressive Disclosure
- 2. To cover Enter your email address… Responsive Design & the @media query Progressive Disclosure
- 3. 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…
- 4. 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.
- 5. THE NEXT BIT IS VERY GEEKY GEEKY BIT OPTIONAL CONTINUE OR SKIP? ▌
- 6. WHAT?? CSS is the way HTML content is styled for a page. External Sheet Style Tags In-line ( best practice)
- 7. 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!
- 8. 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
- 9. 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 man who 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
- 10. BoilerPlates Some styles are needed to override inbox styles Reset all body margins and padding to 0 for good measure body{ 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%;}
- 11. 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??
- 12. GEEKY BIT COMPLETE, CARRY ON ▌
- 13. What does it look like?
- 15. 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
- 16. THE NEXT BIT IS VERY GEEKY GEEKY BIT OPTIONAL CONTINUE OR SKIP? ▌
- 17. .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.
- 18. GEEKY BIT COMPLETE, CARRY ON ▌
- 19. What does it look like?
- 20. Pa-bah!
Notas del editor
- This pres is also build for stand alone training so people can get a gist without me speaking
- From “Style Campaign”GEEK FILTER NEXT!
- SKIPTO SLIDE 12 = 7 CLICKS
- http://www.uploadlibrary.com/andy.thorpe/mediaQ/examples/index.htmlDemo from Admin using email addresses…
- GEEK BIT IS ONE SLIDE!
- http://www.uploadlibrary.com/andy.thorpe/mediaQ/examples/index.htmlDemo from Admin using email addresses…