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?
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+
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/
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 reading their email with?3. Test your audience to see if open rates and clickthrough rates are higher with responsive designtemplates.
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.
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
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 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.
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.
Mobile Friendly Version – Mobile Version –Responsive Design
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
Mobile Friendly Version – Mobile Version –Responsive DesignA Typical Mobile Friendly Version• Fixed width 650px or Less• Fixed layout
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
Mobile Friendly Version – Mobile Version –Responsive DesignA Typical Mobile Version• Fixed width– Usually around 320px wide• Fixed One Column Layout
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
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