The Marketer s Guide to. Responsive Design

Size: px

Start display at page:

Download "The Marketer s Guide to. Responsive Design"

Doreen Boone
5 years ago
Views:

1 The Marketer s Guide to Responsive Design

A new design trend is in town You ve heard of it. You ve seen it in action. But how do you actually do it?

You may have already brought your website into this fabulous new world, but now it's time to explore your options for email marketing.

Keep in mind, creating email templates particularly those using responsive design take both time and experience. If your organization is lacking the time or resources, we can help.

2 A new design trend is in town You ve heard of it. You ve seen it in action. But how do you actually do it? You probably have a few questions about responsive design after all, all the cool kids are doing it. You may have already brought your website into this fabulous new world, but now it's time to explore your options for marketing. The Informz Design Team gets it, so to help make it a little less confusing, they ve answered a few questions. Keep in mind, creating templates particularly those using responsive design take both time and experience. If your organization is lacking the time or resources, we can help. Our team of designers has already done the heavy lifting, and our experience with creating responsive designs can extend your brand to your subscribers as they continue to adopt mobile technologies. Let us know if you need a little help. What is responsive design? Responsive design is a web and design approach aimed at creating sites and s that provide an optimal viewing experience. It allows reading and navigation with a minimum of resizing, panning, or scrolling across a wide range of devices, from desktop computers to mobile phones.

How does responsive design work? An email utilizing responsive design adapts the layout to the viewing screen by using CSS media queries, an extension of the @media rule.

important; } 16 table td { border-collapse: collapse; } 17.yshortcuts a { border-bottom: none!important; } 18 a { color: #1abc9c; text-decoration: none; font-weight: bold; } 19.

3 How does responsive design work? An utilizing responsive design adapts the layout to the viewing screen by using CSS media queries, an extension of rule. Here's an example of how media queries appear in the head section of a mailing. 13 body {margin: 0; padding: 0; } 14 table { border=spacing: 0; } 15 img { display: block!important; } 16 table td { border-collapse: collapse; } 17.yshortcuts a { border-bottom: none!important; } 18 a { color: #1abc9c; text-decoration: none; font-weight: bold; } 19.hide { max-height: 0px; font-size: 0; display: none; } only screen and (max-width: 640px) { 21 body { width: auto!important; } 22 table[class="table600"] { width: 450px!important; text-align: center!important; } 23 table[class="table550"] { width: 87%!important; float: none!important; } Multiple Media Query Styles Styles can be applied to multiple media query conditions in the event different aesthetics need to exist for various screen widths. Here s an example of how multiple media queries appear in the head section of a web page or mailing. 18 a { color: #1abc9c; text-decoration: none; font-weight: bold; } 19.hide { max-height: 0px; font-size: 0; display: none; } only screen and (max-width: 640px) { 21 body { width: auto!important; } 22 table[class="table600"] { width: 450px!important; text-align: center!important; } 23 table[class="table550"] { width: 87%!important; float: none!important; } 24 table[class="table2-2"] { width: 47%!important; } 25 img[class="img1"] { width: 100%!important; height: auto!important; } 26 img[class="img2"] { width: 60%!important; height: auto!important; } 27 table[class="social"] { width : 100px!important; } 28 table[class="table1-3"] { width : 30%!important; } 29 table[class="table3-1"] { width : 64%!important; } 30 td[class="clear_pad"] { padding: 0px!important; } 31 /*space*/ 32 table[class="space"] { display: none!important; } 33 } only screen and (max-width: 479px) { 35 body { width: auto!important; } 36 img[class="top_fold"] { max-width: 0px!important; max-height: 0px!important;} 37 table[class="table600"] { width: 290px!important; } 38 table[class="table550"] { float: none!important; }

Translation for Maximum Width Below is a list of common devices, along with their screen sizes, showing how size translates into a maximum width set as a media query condition: Apple ipad 9.

5 960 640: max-width:960px Apple iphone 5 4 640 1136: max-width:640px Barnes & Noble NOOK 7 1024 600: max-width:1024px BlackBerry Playbook 7 1024 600: max-width:1024px BlackBerry Torch 9800 3.

4 Translation for Maximum Width Below is a list of common devices, along with their screen sizes, showing how size translates into a maximum width set as a media query condition: Apple ipad : max-width:1024px Apple ipad : max-width:1024px Apple ipad : max-width:2048px Apple iphone 3GS : max-width:480px Apple iphone 4S : max-width:960px Apple iphone : max-width:640px Barnes & Noble NOOK : max-width:1024px BlackBerry Playbook : max-width:1024px BlackBerry Torch : max-width:480px BlackBerry Torch : max-width:640px HTC Amaze 4G : max-width:960px HTC Evo 3D : max-width:960px HTC Flyer : max-width:1024px HTC Sensation 4G : max-width:960px HTC Thunderbolt : max-width:480px Motorola Droid BIONIC : max-width:540px Motorola Droid RAZR : max-width:540px Motorola Droid Xyboard : max-width:1280px Samsung Galaxy S 4G : max-width:480px Samsung Galaxy S II : max-width:800px Samsung Galaxy S III : max-width:1280px Samsung Galaxy Tab : max-width:1024px Samsung Galaxy Tab : max-width:1280px Samsung Galaxy Tab : max-width:1280px Samsung Gravity Smart : max-width:320px Samsung Sidekick 4G : max-width:800px

When should responsive design be used? Responsive design is best utilized when a subscriber views a mailing on a device or monitor smaller than 960px in width.

Since screen sizes are smaller on mobile devices, the viewing capacity is often too small to display a full mailing.

5 When should responsive design be used? Responsive design is best utilized when a subscriber views a mailing on a device or monitor smaller than 960px in width. For today s standards, this usually suggests that subscribers are viewing their mailings on mobile phones, usually 540px 320px in screen width. Since screen sizes are smaller on mobile devices, the viewing capacity is often too small to display a full mailing. Mailings with wide containers, multiple columns, or large graphics would need to be scrolled and panned into visibility. Responsive design gives mailings the ability to adjust automatically from multiple columns to single-column layouts, enlarge scalable images and increase font size for legibility. Three Column Layout One Column Layout

Adaptive Design vs. Responsive Design Adaptive design utilizes many of the components of responsive design as a way to define the set of design methods that focus on the user and not the browser.

6 Adaptive Design vs. Responsive Design Adaptive design utilizes many of the components of responsive design as a way to define the set of design methods that focus on the user and not the browser. This method uses a predefined set of layout sizes based on device screen size. The biggest similarity between the two methods is that they both allow mailings to be viewed on mobile devices and various screen sizes, ultimately providing subscribers with a better mobile experience. Where the two methods differ is in their delivery of the responsive/adaptive structures. Responsive design relies on flexible layouts, while adaptive design relies on predefined container sizes. At Informz, we synonymously use the term adaptive with the term optimized. We design all of our templates full or responsive to be predefined at 650px wide to allow for the best viewing experience possible.

Responsive Design Limitations Responsive design won t work in Outlook versions earlier than 2010, non-native Gmail apps (i.e. the iphone or Android Gmail app), IE8 and earlier browsers, and devices prior to 2010.

7 Responsive Design Limitations Responsive design won t work in Outlook versions earlier than 2010, non-native Gmail apps (i.e. the iphone or Android Gmail app), IE8 and earlier browsers, and devices prior to These platforms do not support responsive design because they don t support CSS3 media queries. <DOCTYPE> is needed within your mailing s page in order for certain CSS properties to work correctly. These include the display and float properties, which allow columns to convert from multi to single once reduced to a small screen size. The better doctype to use for design is XHTML transitional, which looks like this in its entirety: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" An advantage to responsive design is that you can create one template for both your full version and responsive template. By adding the appropriate media queries and styles, a full version template can easily turn into a responsive layout. It's critical that a template contain clean code and be mocked up for a mobile version, because if a mailing is viewed within an client that doesn't support media queries, this version will be shown. best practices in HTML and CSS must be used when implementing media queries. Consider their limiations with design, and consistently update templates with advancements in media queries.

8 Creating a responsively designed template 1 Mock up your designs for both the full version and mobile version of your mailing. Remember, even though you are designing one template, the mobile design acts as your end product once a subscriber views the mailing in a mobile device. If you are using an adaptive approach and your design calls for different aesthetics per screen size, make sure to create a mockup per screen size and per device you are designing for. 2 Create your full-version template first, as you would design for larger screens and desktop devices. Keep your mobile version and responsive code in mind when doing this to ensure consistency between both versions of your mailing. Optimize for a max width of 650px, utilizing CSS and HTML attributes best supported for design. 3 Implement your media queries. Once your full version template is complete, add your media queries to the <HEAD></HEAD> section of your page. Make sure all your classes and IDs are referenced in the body of the mailing correctly, with the styles set forth in the Head tag section of the page. Create your styles as inline styles instead of internal styles set forth in the head section to ensure your aesthetics stay intact between major clients.

Email Marketing Mobile Event App Voted #1 in client satisfaction Expert strategic

9 Informz is Engagement Made Easy Choose the solution for powerful communications proven to engage and convert. Marketing Mobile Event App Voted #1 in client satisfaction Expert strategic guidance Innovative, easy-to-use technology Professional Services Powerful Analytics Database Integrations Industry-Leading Deliverability

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2)

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2) Web Development & Design Foundations with HTML5 Ninth Edition Chapter 7 More on Links, Layout, and Mobile Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links