Whether you’re a tech-savvy coder, an engagement-focused marketer, or have a background in illustration and design, we’re betting that you’re ready to take you want to design better emails. Check out our presentation from our latest webinar, "Advanced Responsive Design for Mobile Devices.” This webinar explores design tactics for small screens and touch devices and showcases basics in HTML for responsive emails.
4. Safe Harbor
Safe Harbor statement under the Private Securities Litigation Reform Act of 1995:
This presentation may contain forward-looking statements that involve risks, uncertainties and assumptions. If any such uncertainties materialize or if any
of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward looking
statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or
service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for
future operations, statements of belief, any statement concerning new, planned, or upgraded services or technology developments and customer contracts
or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our
service, new product and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth,
interruptions or delays in our web hosting, breach of our security measures, the outcome of any litigations, risks associated with completed and any
possible mergers and acquisitions, the immature market in which we operate, or relatively limited operating history, our ability to expand, retain, and
motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-
alesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial
results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the
most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filing's section of the Investor
Information section of our Web site.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not
be delivered in time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available.
Salesforce.com, inc. assumes no obligation and does not intend to update these forward looking statements.
10. Designing for
Small Screens
• Content First: Top down Hierarchy
• Single column layout
• Contrast of value and color for content
distinction
• Large text size ensures readability
• Don’t cram - Legibility over length using
concise messaging
11. Designing for
Touch Interfaces
• 44px Minimum Button (Full-width even better!)
• Left or Center Aligned Text
• Adequate Spacing for Touch Accuracy
12. Buttons for
Touch Interfaces
• 44px Minimum Button
(Full-width even better!)
• Left or Center DETAIL:
Screen Resolution allows for more detail to be
seen and more enticing visuals
• Watch your Language!
Avoid using “click here” when users are
actually “tapping”
• Aligned Text
• Adequate Spacing for Touch Accuracy
17. Clean Content
Breaks
Familiar, easy on the
eyes and easy to skim
RECOMMENDATION:
Use containers, rules,
divider graphics and
spacing to define
content breaks
18. Communication at the speed of
instant recognition
Icons = Instant Communication
RECOMMENDATION:
Establish an icon set for
your mobile content and
USE THEM OFTEN
19. Mobile UI
Font Sizes
Average font size in the UI is
about 17px
Stand out from the
surrounding UI with BIGGER
fonts
20px
17px
15px
13px
22. HD = More Beautiful Pixels!
More Beautiful Pixels! = Larger Files
Larger Files = Slower Downloads
Slower Downloads = Loss of Engagement
Images and HD Mobile Displays
23. Derived from annualized monthly Google queries (from AdWords traffic estimator). - screensiz.es
Mobile Pixel Density
Most popular Pixel Density is 200%
(“Retina Display”)
RECOMMENDATION:
Design for 200%
Pixel Density
24. Compression and File Size
320 x 395
JPG Quality: 70
31KB
640 x 789 (200%)
JPG Quality: 70
70KB
640 x 789 (200%)
JPG Quality: 30
33KB
26. Some images need clarity more than others
Resolution Hierarchy
45 x 45
JPG: 70
3KB
90 x 90 (200%)
JPG: 30
3KB
90 x 90 (200%)
JPG: 70
5KB
90 x 90 (200%)
GIF
5KB
90 x 90 (200%)
PNG
4KB
27. RECOMMENDATION:
Design logos and
graphics for 200%
save as GIF or PNG
90 x 90 (200%)
GIF
5KB
90 x 90 (200%)
PNG
4KB
Some images need clarity more than others
Resolution Hierarchy
29. “There's a new email client every day,
whether, desktop, mobile or tablet. You
can do your best to make the experience
hold up across devices, but you can't
make it perfect across devices”
- Alex Williams on 11 Things that Need to Die
in Mobile Email
30. Case in Point: Android Gmail App
Android 9%
of email opens
according to Litmus
About 70%
in the Gmail App
according to Brightwave
user survey
34. Overview of @media query styles
CSS is activated at 480px and smaller
Add body[yahoo] in front of every
style class
Add yahoo=“fix” to the
<body> tag
@media styles are applied to the HTML
with class=“”
!important added to override
in-line styles
35. 7 Responsive Email Techniques
• Wrapping content with fluid widths
• 100% width buttons
• Stacking left column on right
• Stacking right column on left
• Stacking navigation
• Create columns from vertical content
• Showing/Hiding content on mobile
57. Coding recommendations
Do not set too many fixed widths, the
more fixed widths the more styles
you’ll need to add to make the email
responsive.
Design and build to give
your audience the best
experience possible
Don’t be afraid to try
unconventional email
coding techniques for
mobile content
59. Sustainable responsive workflow
• Responsive emails take on average 1.5 – 2X longer to build over static campaigns
• Develop a modular template to reduce build time
• Design and development should work together to build a reusable
wireframe/framework
• Pre-build modules
sharing button language testing in the performance-Driven design session
Create content and design that has visual harmony within the mobile user interface and allow your subscribers to engage with your content in an intuitive and familiar way
Use of list treatments for content deliveryUse containers, rules, divider graphics and spacing to clearly define your content breaks, using
Use of list treatments for content deliveryUse containers, rules, divider graphics and spacing to clearly define your content breaks, using
navigating the smaller screen of a mobile device relies heavily on iconsuse of icons as visuals has been heavily adopted in digital design across channelsinstant associations and messages conveyed in these simple and easily recognizable visuals
smallest font size you are likely to find anywhere in the mobile UI is 16pxText menus and labels are a minimum of 20pxmenu bars use fonts of 24pxtitles and features that content needs to stand out from it’s surroundings so recommendation is at least 36-40px and no smaller than 28px
smallest font size you are likely to find anywhere in the mobile UI is 16pxText menus and labels are a minimum of 20pxmenu bars use fonts of 24pxtitles and features that content needs to stand out from it’s surroundings so recommendation is at least 36-40px and no smaller than 28px
Small devices equipped with beautiful displays which continue to grow in resolutionloading your content with high-resolution images raises issues with download time and potential truncation
Focusing on 200% recommendation:EX. 300px wide image should be created and uploaded at 600px wide at 72dpi, not 300px wide at 144dpi
If managing all of your images at 200% is not sustainable be selective about your important visuals. Logo, buttons, icons, 2D graphics or feature image should look beautiful in mobile
If managing all of your images at 200% is not sustainable be selective about your important visuals. Logo, buttons, icons, 2D graphics or feature image should look beautiful in mobile
Do you slice your images from your PSD?Save time by working at 200%create your visual assets separately they can be placed as smart objects within your PSD
First, an overview of what @media queries are and where they are located in the code.media queries are placed in the <head> of the HTML between the opening and closing <style> tags. The @media call acts like a conditional statement to determine if the styles should be used in the email. In this example if the screen size is 480px or smaller the styles will be used. Yahoo! ignores the media query statement and uses the styles in the email even if it doesn’t meet the conditional statement. The fix is to add body[yahoo] in front of every style. You also need to add yahoo=“fix” to the <body> tag for this to work properly. !important is used on the CSS property if you need to override an in-line style you set as part of the desktop version. In this example we want to override the container table width of 640px with 100%. @media query styles are applied to the html the same way regular CSS styles are added with class=“”.
Next I’m going to go through 7 responsive email techniques used in emails across all industries today.List 7 techniques…I built an example email that utilizes each of these techniques that I’m going to use as an example through the next several slides
The first technique is Wrapping content with fluid widths. In this example you can see how the overall width of the email shrinks down to the mobile screen without loosing legibility of the text.
Breaking the email down to table cells you can see the overall structure is still in tact. We are simply resizing elements and letting the text flow within the new width. A good tip is to only set table cell widths where needed so you don’t have to override a lot of styles in the @media query for the mobile version.
Let’s take a look at the code involved in this technique.We are making the container fluid by applying 100% width.Next we’re resizing all full width images to proportionally fit the width of the container.Finally we’re increasing the font size of the body and headline to increase legibility
The next technique is 100% width buttons, which Tana touched on earlier in the design overview.In this example the button spans 100% width for a better touch experience on the mobile device.This example also uses CSS3 property rounded corners to enhance the visual of the button.Don’t be afraid to experiment with CSS3 properties in your emails, you want to give your audience the best experience possible instead of worrying about being pixel perfect across all devices.
Breaking down the table structure you can see that the desktop button is the width of the button text plus padding. The mobile button spans 100%.
Looking at the code involved in this technique you will see the button class is applied to the table to span the button 100%.I also posted a code snippet to show the use of CSS3 rounded corners within the table cell
The next technique is stacking left content on top of right content. In this example, the desktop version displays the images in one row, but in the mobile example we are going to stack the content 2x2.
For this technique to work you will need a table row with two table cells The responsive code will stack the left column on top of the right column.
Taking a look at the code, this style class is added to both table cells. The first property will span the contents of the cell 100%The second property display will stack the content
The next technique is stacking right content on top of left content. In the example, you can see the image on the right is stacked above the text and button in the mobile version. This technique uses the same CSS properties of the last with some small tweaks to the HTML table structure.
Breaking down the table structure you will see a blank table cell in the desktop version above the text. The right column is using a rowspan to span the table cells on the left. You can place a 1px spacer.gif or hidden content in the top row of the left column. This works because you are changing the hierarchy of the table cells when using the rowspan. In the HTML the blue cell now appears before the green cell.
The CSS code is exactly the same as the last technique, you will apply it to all table cells you want to stack.
The next technique, stacking navigation, is commonly used for footer navigation. It separates and enlarges the links, making it easier for the touch interface of mobile devices.
This technique uses CSS applied to span and a tags. Don’t be afraid to try unconventional email coding techniques. As email designers you are often taught to stay within certain HTML boundaries. Since mobile devices render closer to web standards we can stretch those boundaries with the use of span and div tags in the mobile view.
Taking a look at the styles with this technique, we are first going to remove the padding so the navigation can span full width, then we are going to use display:block to force each link to it’s own line. We are also going to add padding and borders to enhance the design.
The next technique is creating columns from vertical content. In this example you will see the product information is under the photo in the desktop version and is side by side in the mobile version.
This technique uses separate span or div tags around the image and product information to control the layout. Another stray from common email coding best practices.
Looking at the code involved, different styles are applied to the two span tags to tell the content to either float left or right.
The last technique is showing and hiding content on mobile devices.In this example, you can see the last 2 navigation items are removed from the top nav and moved to the footer in the mobile version.
This technique is done by hiding the top nav items on mobile and hiding the bottom nav items on desktop versions.
Hiding content on mobile is very straightforward, just apply a class with display:none to the elements you want to hide.Hiding content on desktop, to show on mobile takes a little more work, due to Outlook and gmail rendering. You will need to add more styles to the HTML tag as well as the embedded style.
A few coding recommendations I just went over… Do not set too many fixed widths, the more fixed widths the more styles you’ll need to add to make the email responsive.Design and build to give your audience the best experience possible, breaking the pixel perfect across all devices mold.Don’t be afraid to try unconventional email coding techniques for mobile content, look to span and div tags to help build your mobile solution.Also, always remember to test testtestNext I’m going to talk more about creating a sustainable responsive workflow to help you start implementing some of these techniques in your emails.
So now after all of that great mobile design and coding content you’re probably thinking this is great but how am I going to find the time to implement this into our emails.We have found that responsive builds take on average 1.5 -2x longer to build over a static campaign so we want to give you some design and coding tips to help streamline the process to implement.We recommend developing a modular template, I know the word template sometimes scares off designers because they think of a template as being a limitation of the design. This doesn’t have to be the case. For a lot of clients we use modular builds to streamline design and development. We usually setup a shared header and footer then create multiple modules for hero and secondary content that can be used as a menu to build an email. This requires more up front time spent with the designer and developer working together to wireframe all of the modules/responsive techniques they think they will ever need. We can use the techniques I just went through as an example. You might need a left over right or a 100% width button, etc. It is also recommended to keep inventory of the modules with content area dimensions for the designer/marketer to work from. The next step is for the developer to pre-build out all the modules with generic content add the responsive code and test the framework. When an email is needed, the designer/marketer will choose from the menu which modules they want to use, create the design and pass to development to implement. The time savings will come for the designer since they will have a predetermined content area to work within and the developer will only need to swap out images and text in the pre-built modules. Testing and QA time will also be reduced since the aggressive testing phase happened in the framework build.
In this crocs example you can see the two emails utilize similar frameworks however sections can be custom designed. All of the responsive code is built into the framework, they actually have multiple break points that display different versions on desktop, mobile and tablet. The initial setup probably took awhile but now they have this flexible framework they can use across all of their marketing emails. The production time is probably drastically reduced since the production team can just swap out text and images.
Expedia is another example of this technique, they use the shared header and footer and have a button style defined that spans 100% on mobile. Another way to expedite the production process is to use variables or logic to add content instead of hard coding text and images into the HTML.