• Share
  • Email
  • Embed
  • Like
  • Private Content
Advanced Responsive Design
 

Advanced Responsive Design

on

  • 996 views

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. ...

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.

Statistics

Views

Total Views
996
Views on SlideShare
993
Embed Views
3

Actions

Likes
4
Downloads
56
Comments
0

1 Embed 3

https://twitter.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 of the HTML between the opening and closing 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 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.

Advanced Responsive Design Advanced Responsive Design Presentation Transcript