Mobile Email 2012

175 views

Published on

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.

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
175
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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…
  • Mobile Email 2012

    1. 1. Mobile EmailResponsive DesignProgressive Disclosure
    2. 2. To coverEnter your email address…Responsive Design & the @media queryProgressive Disclosure
    3. 3. Responsive DesignWhat is it?“Special type of CSS which is activated by Screen size”The @media queries go in the style tagWhen the email is rendered, if the screen is of the specifiedsize, 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. 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 EclairAndroid Outlook Exchange 3rd party appGmail app on all platformsWindows Mobile 6.1, Windows Phone 7,BlackBerry OS 5.
    5. 5. THE NEXT BIT IS VERY GEEKYGEEKY BIT OPTIONALCONTINUE OR SKIP?▌
    6. 6. WHAT??CSS is the way HTML content is styled for a page.External SheetStyle TagsIn-line ( best practice)
    7. 7. External SheetThe HTML links to an external sheetEg:<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• Dont use it for emails!
    8. 8. In-line StylesAdd 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 amilitary court for a crime they didnt commit.</td>Best practiceOnly way for consistent styling in emails
    9. 9. Style TagsThe copy that needs styling has a class or idand 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
    10. 10. BoilerPlatesSome styles are needed to override inbox stylesReset 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%;}
    11. 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 aman who does not exist.</span></body></html>Doctype, html,head & body:stripped by vis-edEverything apart from contentsof body tag, stripped by manyinboxes eg: Yahoo – althoughsome still get rendered??
    12. 12. GEEKY BIT COMPLETE, CARRY ON▌
    13. 13. What does it look like?
    14. 14. Progressive Disclosure
    15. 15. Progressive DisclosureWhat is it?Utilises the way touch screens react to the DHTML “.hover”On a desktop when you hover with a mouse somethinghappens.BUT you cannot hover on touch screens so:• A tap activates it• Another tap deactivates it
    16. 16. THE NEXT BIT IS VERY GEEKYGEEKY BIT OPTIONALCONTINUE OR SKIP?▌
    17. 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 behidden and the copy below with show and so will the “Show”Button.When you tap “Hide” or another “Show” button, the copy andthe “Hide” button will be hidden and the “Show” button willappear.
    18. 18. GEEKY BIT COMPLETE, CARRY ON▌
    19. 19. What does it look like?
    20. 20. Pa-bah!

    ×