Responsive DesignIs it for you?Chris ClementeTemplate DesignerKevin AllenTemplate DesignerNabeel JohnTemplate Designer
Todays Topics• What is Responsive Design?• What can and can’t Responsive Design do?• Responsive vs. Mobile Friendly Design
What is Responsive Design?The approach that suggests that design anddevelopment should react to the user’sbehavior and env...
What Can Responsive Design Do?
Screen sizeImage resizeHeadline and textLinks and buttons• Accommodates for screensizes 350-400px wide• Images are be scal...
Limitations of Responsive Design• Responsive design uses media queries for layouts to reactto platforms and devices. Not a...
What Devices Support Responsive Design in Email?AppleiPhone nativeiPhone Mailbox appiPad nativeiPad mini nativeiPod Touch ...
Is Responsive Design theSolution for You?The answer is in your audience!
Decide for yourself by answering 3questions:1. What devices and browsers support responsivedesign?2. What is your audience...
Responsive design will:• Ensure mobile rendering will be legible• Will enlarge the buttons in your email to amanageable si...
Unresponsive ResponsiveResponsive design offers a much more friendly user experience on a mobile device
Know how your audiencereads their email! Take the time toanalyze your email metrics.Informz collects this information for ...
You can viewthe emailclient typethat youraudience isviewing with(Email client = emailprogram)
Once you seeyou have anaudience witha mobiledevices, lookinto thedifferentdevices to seeif they aresupported:
Learn more about your audience…• Conduct a test: send out two emails and comparethe results• You should be able to discern...
Mobile Usage… our own Report!Each year, Informz analyzes our client’s email metrics toset benchmarks and help associations...
Mobile Friendly Version – Mobile Version –Responsive Design
Mobile Friendly Version – Mobile Version –Responsive Design• Mobile Friendly Version– Approach that accurately displays co...
Mobile Friendly Version – Mobile Version –Responsive DesignA Typical Mobile Friendly Version• Fixed width 650px or Less• F...
Mobile Friendly Version – Mobile Version –Responsive Design• Mobile Version– Designed exclusively for mobile devices– Disp...
Mobile Friendly Version – Mobile Version –Responsive DesignA Typical Mobile Version• Fixed width– Usually around 320px wid...
Mobile Friendly Version – Mobile Version –Responsive Design• Responsive Design– Also called multi screen design– Responds ...
Mobile Friendly Version – Mobile Version –Responsive DesignResponsive Design• Flexible layout• Flexible images• Flexible w...
Questions?
Upcoming SlideShare
Loading in …5
×

Responsive Design Webinar

411 views
312 views

Published on

Check out the slides from the webinar to learn everything you need to know about responsive email design.

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

  • Be the first to like this

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

No notes for slide

Responsive Design Webinar

  1. 1. Responsive DesignIs it for you?Chris ClementeTemplate DesignerKevin AllenTemplate DesignerNabeel JohnTemplate Designer
  2. 2. Todays Topics• What is Responsive Design?• What can and can’t Responsive Design do?• Responsive vs. Mobile Friendly Design
  3. 3. What is Responsive Design?The approach that suggests that design anddevelopment should react to the user’sbehavior and environment based on screensize, platform and orientation.- Smashing Magazine
  4. 4. What Can Responsive Design Do?
  5. 5. Screen sizeImage resizeHeadline and textLinks and buttons• Accommodates for screensizes 350-400px wide• Images are be scaled to fitwithin screen• Enlarge fonts to 12pt-14ptfor body content and 16ptfor headlines• Links can turn into buttonsfor smaller screensWhat Can Responsive Design Do?
  6. 6. Limitations of Responsive Design• Responsive design uses media queries for layouts to reactto platforms and devices. Not all devices support mediaqueries:• iPhone and Android Gmail app (not native), WindowsPhone 6.1+ (except 7.5), Outlook 2007+
  7. 7. What Devices Support Responsive Design in Email?AppleiPhone nativeiPhone Mailbox appiPad nativeiPad mini nativeiPod Touch nativeAndroidFroyo native clientGingerbread native clientIce Creme Sandwichnative clientJelly Bean native clientOutlook.com appMicrosoftSurface tablet(Outlook.com/Hotmail)Windows Phone 7.5BlackBerryOS 7Z10OtherKindle FirePalm webOS 4.5Good.com Mail appSource: StyleCampaign.comArticle: Responsive email supporthttp://stylecampaign.com/blog/2012/10/responsive-email-support/
  8. 8. Is Responsive Design theSolution for You?The answer is in your audience!
  9. 9. Decide for yourself by answering 3questions:1. What devices and browsers support responsivedesign?2. What is your audience reading their email with?3. Test your audience to see if open rates and clickthrough rates are higher with responsive designtemplates.
  10. 10. Responsive design will:• Ensure mobile rendering will be legible• Will enlarge the buttons in your email to amanageable size• Will display content one item at a time – crucial forthe small screen.
  11. 11. Unresponsive ResponsiveResponsive design offers a much more friendly user experience on a mobile device
  12. 12. Know how your audiencereads their email! Take the time toanalyze your email metrics.Informz collects this information for you
  13. 13. You can viewthe emailclient typethat youraudience isviewing with(Email client = emailprogram)
  14. 14. Once you seeyou have anaudience witha mobiledevices, lookinto thedifferentdevices to seeif they aresupported:
  15. 15. Learn more about your audience…• Conduct a test: send out two emails and comparethe results• You should be able to discern whether a responsivetemplate works better than a non-responsivetemplate.• Ultimately, trends are showing that more and morepeople are reading their email on a mobile device. Ifnow is not the time for you to go responsive, thenear future most likely will be.
  16. 16. Mobile Usage… our own Report!Each year, Informz analyzes our client’s email metrics toset benchmarks and help associations see how theiremail marketing programs compare to their peers.In the most recent report, which is being releasedtomorrow, we’ve found that mobile usage continues tosurpass desktop usage. 43% of our client’s membersare reading their emails on mobile devices as comparedto 37% reading on a desktop.
  17. 17. Mobile Friendly Version – Mobile Version –Responsive Design
  18. 18. Mobile Friendly Version – Mobile Version –Responsive Design• Mobile Friendly Version– Approach that accurately displays content onmultiple devices:• Eg. Desktop & Mobile Devices– Content appears smaller on phones and/ormobile devices– May not work perfectly on touchscreendevices• Text becomes too small to read• Hard to click links
  19. 19. Mobile Friendly Version – Mobile Version –Responsive DesignA Typical Mobile Friendly Version• Fixed width 650px or Less• Fixed layout
  20. 20. Mobile Friendly Version – Mobile Version –Responsive Design• Mobile Version– Designed exclusively for mobile devices– Displays content correctly on mobile devicesonly– Usually one column layout– Would require a separate version for desktopemail clients– Could require higher maintenance andexpense
  21. 21. Mobile Friendly Version – Mobile Version –Responsive DesignA Typical Mobile Version• Fixed width– Usually around 320px wide• Fixed One Column Layout
  22. 22. Mobile Friendly Version – Mobile Version –Responsive Design• Responsive Design– Also called multi screen design– Responds to media screens• Changes Layout based on screen resolution– Designing for breakpoints– Single template that works everywhere• Offers significant savings over creating multiplenative templates– HTML and CSS can be repurposed instead of having tobe rewritten, which saves considerable design time
  23. 23. Mobile Friendly Version – Mobile Version –Responsive DesignResponsive Design• Flexible layout• Flexible images• Flexible width• Ability to rearrange the content– Eg: Move menu items to a different place– Convert links into buttons
  24. 24. Questions?

×