Downloaded 80 times
![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](https://image.slidesharecdn.com/mar27advancedresponsivedesignfinal-1-140328162238-phpapp01/75/Advanced-Responsive-Design-34-2048.jpg)
Uploaded bySalesforce Marketing Cloud
Advanced Responsive Design
The document outlines a webinar that emphasizes the importance of designing for mobile screens and touch interfaces, including best practices for responsive email coding and mobile user interface design. It includes a safe harbor statement regarding forward-looking statements by Salesforce and discusses potential risks involved in the company's operations. Key recommendations are provided for creating responsive content, optimizing images for mobile, and the importance of collaboration in designing effective email campaigns.
More Related Content
Similar to Advanced Responsive Design
Advanced Responsive Design
- 1. Welcome Please take thepoll along the right of the screen.
- 2. Your active participationis encouraged Please use the chat function and send to „All Panelist‟ to ask questions
- 3. Webinar Follow-up Watch yourinbox Presentation will be recorded and shared in a follow-up email.
- 4. Safe Harbor Safe Harborstatement 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.
- 5. Advanced Responsive Design March27th, 2014
- 6. Agenda • Designing forSmall Screens and Touch Interfaces • Responsive Email Coding Techniques • Sustainable Responsive Workflow • Questions • Resources
- 7. Speakers Tracy Novotny Senior TechnicalProducer tnovotny@exacttarget.com
- 8.
- 9. Designing for SmallScreens and Touch Interfaces
- 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
- 13. CSS Buttons RECOMMENDATION: Use CSSto style buttons for complete scalability & clarity
- 14. “A picture isworth a thousand words. An interface is worth a thousand pictures.” - Ben Schneiderman
- 15. What mobile subscribersare used to interacting with Google Maps Facebook YouTube Google+ WeChat At Home in the Mobile UI
- 16. Clean Content Breaks Familiar, easyon the eyes and easy to skim
- 17. Clean Content Breaks Familiar, easyon the eyes and easy to skim RECOMMENDATION: Use containers, rules, divider graphics and spacing to define content breaks
- 18. Communication at thespeed of instant recognition Icons = Instant Communication RECOMMENDATION: Establish an icon set for your mobile content and USE THEM OFTEN
- 19. Mobile UI Font Sizes Averagefont size in the UI is about 17px Stand out from the surrounding UI with BIGGER fonts 20px 17px 15px 13px
- 20. 28px 17px 24px Mobile UI Font Sizes RECOMMENDATION: Headlines≥ 28px Body Text ≥ 17px
- 21.
- 22. HD = MoreBeautiful Pixels! More Beautiful Pixels! = Larger Files Larger Files = Slower Downloads Slower Downloads = Loss of Engagement Images and HD Mobile Displays
- 23. Derived from annualizedmonthly 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 FileSize 320 x 395 JPG Quality: 70 31KB 640 x 789 (200%) JPG Quality: 70 70KB 640 x 789 (200%) JPG Quality: 30 33KB
- 25. RECOMMENDATION: Create mobile photosat 200% and output at 30% JPEG Quality
- 26. Some images needclarity 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 graphicsfor 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
- 28. Smart Objects are yourfriends HD Images & Creative Workflow
- 29. “There's a newemail 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
- 31.
- 32. RECOMMENDATION: Make style decisions notmockup decisions Creative Control Where You Can
- 33.
- 34. Overview of @mediaquery 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 EmailTechniques • 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
- 36. Wrapping content withfluid widths
- 37. Wrapping content withfluid widths
- 38. Wrapping content withfluid widths
- 39.
- 40.
- 41.
- 42. Stacking left columnon right
- 43. Stacking left columnon right
- 44. Stacking left columnon right
- 45. Stacking right columnon left
- 46. Stacking right columnon left
- 47. Stacking right columnon left
- 48.
- 49.
- 50.
- 51. Create columns fromvertical content
- 52. Create columns fromvertical content
- 53. Create columns fromvertical content
- 54.
- 55.
- 56.
- 57. Coding recommendations Do notset 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
- 58.
- 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
- 60. Responsive Layout Modules Mobile 1 2 3 Desktop Leftcolumn text drops below image Right column text drops below image Right column image drops below body text
- 61.
- 62.
- 63. Questions? Please type questionsin the chat panel to „All Panelist'
- 64. Resources: http://bit.ly/designtoolkit Follow the ExactTargetBlog: http://www.exacttarget.com/blog/category/mobile/design-mobile/ Download The Design ToolKit
- 65. Upcoming Webinars: http://www.exacttarget.com/resource-center/webinarsRegister: April 29th Bridgingthe Digital Divide The Role of the CMO in the Digital Era
Editor's Notes
- #13 sharing button language testing in the performance-Driven design session
- #16 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
- #17 Use of list treatments for content deliveryUse containers, rules, divider graphics and spacing to clearly define your content breaks, using
- #18 Use of list treatments for content deliveryUse containers, rules, divider graphics and spacing to clearly define your content breaks, using
- #19 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
- #20 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
- #21 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
- #23 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
- #25 Focusing on 200% recommendation:EX. 300px wide image should be created and uploaded at 600px wide at 72dpi, not 300px wide at 144dpi
- #27 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
- #28 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
- #29 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
- #35 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=“”.
- #36 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
- #37 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.
- #38 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.
- #39 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
- #40 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.
- #41 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%.
- #42 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
- #43 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.
- #44 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.
- #45 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
- #46 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.
- #47 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.
- #48 The CSS code is exactly the same as the last technique, you will apply it to all table cells you want to stack.
- #49 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.
- #50 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.
- #51 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.
- #52 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.
- #53 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.
- #54 Looking at the code involved, different styles are applied to the two span tags to tell the content to either float left or right.
- #55 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.
- #56 This technique is done by hiding the top nav items on mobile and hiding the bottom nav items on desktop versions.
- #57 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.
- #58 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.
- #60 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.
- #62 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.
- #63 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.