Scalable vs. Responsive Email Design

yesmail Scalable vs. Responsive Email Design INTERACTIVE What they are, what they look like, how to make them, and when they should be used. 36% and rising! Emails opened on a mobile device 76% of companies only have a basic mobile strategy (or do not have one at all!) This puts consumers in a tail spin 44% 29% 27% of consumers say mobile emails are difficult to read because of point to wrong layouts for mobile screens point to excessive content. excessive scrolling Two design strategies help emails address these issues Scalable Responsive An email layout that is still 100% readable and 100% fingertip clickable when reduced to half its An email layout that adapts to the proportions of the device it is rendered on by using a secondary code. size on a mobile device. VS Stacked Columns Grid Layout Tall vs. Wide Layout Image Switch Alternate Navigation One Column Layout IT IT 5 Big Type Big Buttons Bigger Type Bigger Buttons *for more infc matic on these item view the mobile whitepaper Emails opened on mobile devices and not using these approaches provide a terrible user experience. Horizontal Layout While a sidebar allows a second level of content, without a mobile fallback, this layout further reduces the size of the main content area. Logo Email Main THle Section Mouse Buttons The buttons are too small in a typical layout to be "clicked" easily with a finger or function as an effective call to action. Empty Space The change in orientation between desktop and mobile results in unused space on an already small screen. Not all mobile devices support responsive design. Create a hybrid layout for the best of both worlds! Many of the features of scalable and responsive design are reiterated below, providing an example of hybrid layout that highlights the strengths of both designs. Hybrid Layout as viewed on a computer yes Logo Eonnt te a traend Weh vrie Compose Inbox Navigation Sent Feature Drafts Spam The optional eoment of the sdabar i Saved for the leature to tae center stage, becoming larper lalong with Rtype and buttonl than in the original. CTA | BUTTONI Content (a) Search. CRBUTTON Content (b) Content (c) If responsive design IS NOT SUPPORTED on a particular device If responsive design IS SUPPORTED on a particular device Scalable Responsive Logo Logo EettmW ve Eorward to a friend I Weh view Navigation Feature Navigation Feature CTA I BUTTON The optional content of the sidebar is turned off in this example and allows for the feature to take center stage, becoming larger (along with its type and buttons) than in the original. Content (a) CTAIO Content (b) CIAI 66 CTA | BUTTON Content (c) Centent (al Eye Spy: Benefits of Responsive Design CTA | BUTTON Alternate/Larger logo (link to website) Content (b) Larger navigation (high click through in emails) Sidebar turned off (allows focus on featured content) Larger main column (equals bigger text and call to actions) Uesmail 877.YESMAIL [email protected] yesmail.com NTERACTIVE