Introduction

With new mobile devices popping up seemingly every month and usage of these devices continuing to rise, is it any wonder marketers are scrambling to provide an optimum customer experience on these platforms?

The numbers are staggering: More than 700 million smartphones shipped in 2012, roughly a 45 percent increase from 2011. Meanwhile, the number of tablets increased 75 percent to 52 million in the fourth quarter of 2012.

As the number of mobile devices grows, so does the amount of time people are spending on these devices, with average smartphone usage growing 81 percent in 2012. And the No. 1 activity on both smartphones and tablets? Email.

In 2013, predictions are that these trends will continue, with consumers expected to purchase 1.2 billion smartphones and tablets worldwide. How can marketers best adjust to this mobile onslaught without neglecting the desktop experience, where critical engagement and conversions continue to occur?

This white paper aims to help you develop a workable email program that’s appropriate for all of the screens your customers are using to read, interact with and convert from your email messages.

At the heart of this guide is a framework of strategybased questions. These will guide you through the process needed to retool your email marketing program for the opportunities and challenges of multiscreen marketing, whether it’s the restricted landscape of a smartphone, a tablet’s larger playing field or the relatively wide open spaces on a desktop screen.

You won’t find a single “right” strategy in this paper, because email marketing is not “one size fits all.” You must tailor your design strategy to fit the unique needs of your company’s characteristics, personality, resources and structure, your email goals, your customers and your market niche.

This guide is intended primarily for marketing executives and team leaders who are responsible for driving their company’s email marketing strategy and programs. It’s not a technical resource for how to code emails using HTML and CSS3, for example, although it does include a few examples and a list of resources your designer can consult for practical advice.

We do encourage you, however, to share this document with other members of the email team at your company, including your business unit and fellow marketing executives, designers and partners in e-commerce and IT so that you can more easily create lasting changes that will help to keep email the driving force in your digital marketing program.

Section One: Beyond Mobile First, Think 'Multiscreen'

It seems as if mobile email has become the No. 1 discussion topic among digital marketers: What’s the impact? How do you give customers the best email experience in order to get the highest engagement and conversions? How important is mobile optimization, anyway?

Much of this conversation centers on the on-screen experience: What’s the best way to design an email so it renders well and drives opens and clicks (which lead to conversions and other desired goals) on the tiny screen of a smartphone as well as the standard desktop version?

This is an important question to ask, but it’s only one aspect of an effective mobile and multiscreen email marketing strategy. Before you make over the email message itself, you must first work out many other aspects of your multiscreen strategy.

‘Mobile-friendly:’ Is it enough? As marketers, we’ve spent the last few years focused on mobile email viewing and marketing and thinking about how to optimize the viewing experience to get the highest engagement and conversions.

We have exhorted our fellow marketers to get “mobilefriendly” with their email messages so that readers can read copy and images easily without a lot of swiping and scrolling and tap the right link instead of committing one “fat finger” mistake after another.

But that’s the last step in a long chain of events and decisions that will dictate how that content ultimately will function on any screen, regardless of size or device.

[Download PDF to see Image]

You have a lot of analysis and planning to do before you change a single line of code in an email. Keep reading to find out what a group of email authorities suggests for your long-term planning

[Download PDF to see Image]

“Multiscreen,” not just mobile-first. A mobile-first approach is a starting point for revising your email program, but many marketers have interpreted that to mean creating a mobile email version first and then one for desktop or tablet viewing. That simply adds time and expense, two precious resources that are already stretched thin in many marketing departments.

A “multiscreen” approach offers a broader concept of email viewing on all platforms, which in turn can help you create the most useful set of email strategies.

This multiscreen email strategy embraces all the environments where customers view email. It acknowledges the challenges and opportunities that come with reading email on a smartphone while also recognizing that desktop viewing remains the most significant driver of email interaction and conversions for most companies.

Even with that proviso, it’s clear that viewing email on mobile devices has become standard operating procedure for today’s email readers. Consider these statistics provided by email analytics provider Litmus:

• Total mobile opens jumped from 41 percent in November 2012 to 43 percent in December 2012. That’s a 138 percent increase in the last 18 months, and a 48 percent increase in 2012.
• iOS represents 36 percent of total email opens.
• Comparing December to November, there was a small increase in desktop clients for the first time in months

IBM Digital Analytics also reported a 70 percent increase in mobile traffic to retail sites, with more than 18 percent of consumers using their devices. Mobile sales also skyrocketed, reaching close to 13 percent (a 96 percent increase over 2011).

The reality for many companies is that customers often check their email messages on more than one device. They might use their smartphones for the first pass through the inbox of the day, deleting the messages they don’t want to read and then leave the rest for viewing later on a tablet or home/office desktop.

As the analysis and infographic from Litmus shows at right, a lower-than-expected 3 percent of email users view an email message in more than one environment. This only adds to the importance of optimizing emails to render well on the first viewing device.

Knowing what your customers are actually doing with your email messages and on which screen they are most likely to do it is one of the first issues you must resolve. That’s why there’s no simple blueprint in this white paper. Every company, and its customer database, is unique. Your email strategy must accommodate these differences.

Consider the context as well as the screen size and the content. If we focus too narrowly on the screen the subscriber uses to the view the content, we miss the bigger picture: What else is going on while your subscribers are checking their email?

Your mobile viewers have many more distractions to deal with or filter out when checking or reading email on smartphones or tablets.

Smartphone viewers are standing in line somewhere or waiting to pick up kids at school and might not have the luxury of even the five or six seconds of uninterrupted consideration that a desktop email reader might give your email message.

Tablet readers probably don’t bump into other pedestrians as they triage their inboxes, but another screen – the TV – might compete for their attention, as well as kids nearby, loud music or distracting conversations.

A multiscreen email strategy recognizes the unique conditions that can interfere with email viewing and interactions and integrates them into content and design strategies such as subject lines, preheaders, message design, layout and navigation.

It’s not just about the email. Also, consider what happens when your customer clicks from your message to your website. The mobile experience doesn’t end with the email click.

We’ll get specific later on in this paper, but for now, remember this: A lousy landing page can negate all the work you put into remaking your emails for multiscreen viewing.

[Download PDF to see Image]

Section Two: The Framework For Creating a Multiscreen Email Strategy

In this section, we’ll walk you through the strategic questions that will drive your mobile strategy. Only you, your marketing team and the other email stakeholders in your company can determine the best course for your company’s unique email needs.

Question 1: Which devices are our readers using to read our email now, and how will that change in the next few years?

It’s absolutely critical to know where your readers are checking email now. Perhaps 30 percent of your readers read messages on their smartphones, but only a small percentage of them click to your website to convert or take another action from your message.

That doesn’t mean you should abandon a multiscreen approach. Rather, it means you don’t have to scrap an email template that works well for you now in favor of one that looks better on a 2x4-inch screen than on a 19- inch monitor.

“If you throw all of your resources into optimizing for mobile, you might be optimizing for your less valuable people,” says Dela Quist, CEO of the UK-based email agency Alchemy Worx, a Silverpop partner.

Most research and discussion of mobile or multiscreen strategy are directed toward retailers, who are concerned with conversions that lead to purchases, Quist says. However, publishers or B2B emailers, who use email mainly to inform rather than to generate sales, might be better off to optimize for multiple screens instead.

“If you’re in B2B, you’re primarily concerned with having your content seen, not with having people buy from your emails,” says Quist. “You want them to read your white papers and your articles, so it makes a lot of sense to optimize for mobile.”

Conversely, most purchases are considered. “If you’re buying anything of any expense, you won’t necessarily see it in email and buy right from there,” Quist says. “You’ll probably buy at a later date. Why would you buy that pair of pants you saw and liked in an email while you’re on a crowded train? You’ll probably wait until a later date and use another device, like a tablet or desktop.”

[Download PDF to see Table]

How to find out? Use an analytics tool that can detect how many of your readers are reading emails on mobile and other devices as well as which operating systems they’re using.

This is critical to know because mobile operating systems, such as iOS, Android and Windows Mobile, render email differently. This information can guide message content design down the road.

The data generated by services such as Litmus, IBM Email Optimization (formerly Unica/Pivotal Veracity), Return Path and Email on Acid will help you understand not just how mobile your readership is but what they are doing with the email besides reading it.

[Download PDF to see Pie Chart]

Question 3: Does our entire conversion path from email to landing page/website provide a good mobile experience, and are we prepared to fix it if it isn’t?

A well-executed multiscreen approach doesn’t begin and end with the email itself. No matter how well you optimize the message itself for viewing on a mobile screen, the whole process could break down if you send the customer to a clunky or poorly rendered landing page or if your emails cannot deep-link to launch your native mobile app on smartphones or tablets.

Aligning your website/landing pages, email messages and apps can add time and expense to your multiscreen makeover project. It is, however, absolutely necessary.

If your analytics show a sizable percentage of readers click on your mobile emails but a smaller-than-typical percentage converts from them, you’ll have to rethink the amount of effort you put into your mobile and Web efforts.

A key challenge in this email/website alignment is often the huge effort of making the company site mobile-friendly or creating a new mobile app. One email marketer redesigned the company’s emails using responsive design techniques but was then told the new designs had to be scrapped because the website experience was poor for mobile users.

Question 4: What approaches can we use for optimizing multiscreen emails, and how do we decide which is the right one for us?

Following are four common formats or techniques for creating mobile-friendlier email with basic information about how each one works, and its advantages and disadvantages.

We consulted several of the smartest people in email messaging and design for their opinions and present these as well:

Approach #1: “Screen-agnostic” / Scalable

Screen-agnostic and scalable formats are a compromise between mobile and large-screen design.

Screen-agnostic and scalable designs use a single “mobile-friendly” layout intended to be read easily on tablets and smartphones but also to display attractively on bigger screens. Screen-agnostic approach can use a fixed-width or scalable design that resizes automatically as the screen size changes.

This approach uses:

• A single-column format viewed by top-tobottom scrolling
• Proportional tables that ensure that the layout scales with the device screen size
• Larger headline and body-copy font sizes (14-point minimum is often recommended)
• Touch-friendly navigation and call-to-action links and buttons

Advantages: You create a “one and done” template for your email that you can send to all subscribers without needing complicated coding to make sure it renders correctly on different screen sizes as well as in portrait (vertical) and landscape mode on phones and tablets.

Done well, the message should render fairly well across all screens and environments.

“We found that a screen-agnostic approach did not depend on technology to render the correct version,” says Brian Brown of ideapark, a Silverpop agency partner. “We also found the code base was a little lighter, and the workflow was simplified.”

Disadvantages: Focusing on simple and big can make complex emails with multiple elements more challenging. It also sacrifices functionality, such as two-column layouts. As scalable layouts are fixed-width — be it skinny or not — they work well for iOS since content is automatically scaled to the screen width, but are not optimal for other platforms like Android.

Approach #2: Two versions — One for mobile, and one for desktop/large screens

With this approach, you create one version of your email for large screens and another that’s optimized for smaller devices. Using an email analytics solution, you identify, divide and email your database in two segments: frequent mobile openers and desktop client/Webmail openers.

Current thinking among most designers is that tablets, with their larger screen sizes, are included in the desktop camp. However, smaller tablets, such as the iPad Mini, are more often categorized as smartphones.

At right is a case example of a retail company that developed and tested two versions of its standard promotional message. Using Litmus, it determined who its most frequent mobile openers were and then created a mobile optimized version of its standard email.

Conducting an A/B split test, it sent a mobile optimized and regular version of its messages for three separate campaigns to these mobile openers. It found that the mobile optimized version saw a click-through rate 64 percent higher than on its traditional template.

Advantages: Your recipients will receive the email version that is optimized for the screen they use most often. Neither email design nor layout is a compromise. Each is ideal for its screen size and should lead to higher engagement and conversion rates.

Disadvantages: You must create two optimized versions of each message – in other words, it’s the multipart text/HTML versions issue all over again.

[Download PDF to see Image]

Some early adopters got out in front of other email marketers with dual versions and/or a “click to view mobile” link, but it has since fallen out of favor with the advent of new formats.

Also, you cannot predict which devices your subscribers might use each time they read your email. Many people switch between their mobile devices and desktop screens during the day. Dedicated desktop users are continually moving over to mobile email reading. Further, neither of these versions may be optimized for the mid-sized screens of tablets.

Approach #3: Responsive Design

Responsive design uses CSS3 “@media” query tags in your emails to present different versions based on device screen size and other variables. These tags in your desktop layout resize page width and images, reformat fonts and colors and often stack two or three columns of content into one.

Here is an email CSS media query syntax example:

[Download PDF to see Example]

In this abbreviated example, if the recipient is viewing the email on an iPhone, different style values are used to display the HTML. For example, we want the email to shoot across the whole mobile screen (width:100% !important;), but we don’t want it to size below a width of 320 pixels (min-width:320px !important;). A 500 pixel value was used so even when the email is viewed in landscape - the email will still span across the whole width.

For details on how to code responsive emails, please see the “Additional Resources” section at the end of this guide.

Advantages: You create a single message, which provides a seamless experience for viewers no matter which screen they use. Your responsive email will be optimized for many mobile devices, especially the iPhone.

Responsive design also allows you to show or hide blocks of copy in different versions of the email.

Many designers have latched onto this “show-hide” capability because it allows them to customize copy, images or calls to action for different devices. You could show three offers in a desktop version, for example, and then direct the mobile version to hide all but the primary offer.

Disadvantages: Responsive design requires specialized coding expertise and isn’t compatible with all devices/ OS, such as BlackBerry, older versions of Outlook and the Gmail application on an Android mobile. Also, your mobile version might have to lose some valuable content, such as a secondary offer or editorial content. This could reduce click and conversion opportunities.

“From a retailer’s perspective, you could be moving from 10 potential opportunities to click or convert in the desktop email to three or four,” says Mathew Ohene, senior email specialist for Silverpop. “So, you’re already reducing potential sales.”

Approach #4: Device Targeting

Unlike responsive design, which is based on screen size, this approach detects the device your recipient uses at the moment he/she opens the email and then presents an optimized version of your content using standard HTML coding.

Advantages: Because device targeting recognizes the device your reader is using, you can serve up content optimized for specific devices and platforms (e.g. iPhone versus Android, Kindle versus iPad), not just “smartphone” versus “desktop.”

Device targeting also can allow marketers to “deep link” directly to the correct app or launch the correct version of your mobile app if your reader has installed it. This reduces extra clicks and the potential that your reader could drop off the purchase path.

Device targeting can be a bit simpler than using CSS3, although you‘ll need to create optimized versions for different platforms.

Many marketers who use responsive design code one template and reuse it for subsequent campaigns. Device targeting allows marketers to switch templates without having to worry about coding each template from scratch.

Disadvantages: You need a third-party technology to detect the device. The content assets must be image-based; however, text can be converted to an image in real time.

Also, you must include code variations within the email that will present the version that matches the selected device, a move that can add time and expense to a campaign. Lastly, if your recipient blocks images by default or turns them off in the email client, the variations will not display.

Jordan Cohen of Silverpop technology partner Movable Ink, which pioneered the concept, says the technology uses deep-link device targeting that detects whether the phone has a native application installed and can serve up either an optimized website or an email version that directs the reader to download the correct version of the company’s application.

Question 5: Do we have the time, money and technical skills to put into revamping our email program for multiple screens, and does the ROI potential justify the added expense?

Email is not a “one size fits all” channel. Responsive design, for example, looks like a savior for rendering issues, but from a practical standpoint, you might not have employees with the coding skills to make it work or the additional time it takes to create an email with multiple coding variations. Or, you might not have the additional budget for freelance or agency staff to produce these revised versions.

“When someone asks me whether mobile optimization is worth the effort, my first question is, ‘Will the client use the template over and over, or is it for a one-off message?’” says Ohene. “If it’s one-off, it’s a little pointless because of all the time you put into creating it. However, if it’s for your standard promotional messages or a monthly newsletter, where you’re going to use the same layout and structure over and over, then it begins to make more sense.”

Selected Best Practices in Multiscreen Email Design

1. Code as simply as possible to avoid email client incompatibilities and rendering issues on different platforms.

Peter Nelson, creative director for Silverpop, uses a hybrid design that combines basic HTML with some CSS elements to create multiscreen emails for Silverpop corporate messages.

“I don’t trust that the CSS will be read across all the email clients or the browser webmails, so I try to code as basic as possible using HTML as the base with CSS added,” says Nelson. “So, if the subscriber’s email client strips out the CSS, your email message will still render with the base HTML.”

Alex Williams of Trendline Interactive cautions against throwing every coding device your designers can come up with into every email.

“The more media queries you add with responsive design, for example, the more chances you have to get in trouble by not having them render or perform correctly in the email,” says Williams. “I’ve seen responsive designs where people are trying too many things with their media queries. That’s where responsive design emails break. The emails get bloated, and the code doesn’t know what to do.”

2. Optimize the landing page as well as the email.

Most of our email experts agree that your website should continue the multiscreen experience, although Dela Quist of Alchemy Worx holds that customers who really do want to buy will negotiate your site.

But which should come first: the landing page or the email? Brian Brown of ideapark cautions that you might only have one chance to make a good impression: “If I send someone to a really bad mobile experience, I’m training them not to open my emails on a mobile.”

However, Williams urges marketers to get the email right first. “I would go with email first because awareness is our No. 1 job,” he says. “From a budget standpoint, there are a lot fewer moving parts in email that you have to optimize.”

3. Aim for the design approach that will work for the greatest number of subscribers, but don’t hold out for perfection.

Choose the approach that will work for the greatest number of customers while not degrading your most important source of conversions.

“Our philosophy is to make the email look as good as it can on the most important devices in our statistics and, hopefully, not be a bad experience for the devices we’re not as good on,” Williams says. “We can’t make these emails look perfect, which is what we have been judged on in the design community. The days of bulletproof design are over.”

4. Rethink your email program before you change a single line of code in your email messages.

Moving to a new email design format that renders correctly on multiple screens takes more effort than just going up to your email designer and saying, “Can you do this email in responsive design?”

Justine Jordan of Litmus suggests taking time to rethink email content and purpose when moving to a new email design format.

“So many email rendering problems can be solved with an audit and plan,” Jordan says. “You should ask yourself and your team why you’re sending email in the first place. Who are you sending to? What is most important to tell them? What do they need to know? What do we want them to do in the email?

According to Jordan, much of multiscreen optimization consists of essentially stripping your email down to the basics. “By taking this important step back, you’re reevaluating your email program,” says Jordan. “Getting to the heart of why you send email will help you reprioritize your email to make it more mobile-friendly.”

If you choose a scalable or responsive-design approach, you can expect to make fundamental changes in your messages. Below are some items our experts said you should consider as part of your move to a multiscreen strategy:

• New content: What will be your top-priority content that you’ll emphasize high up in your message, and what might you either hide from mobile viewers to save space or position lower in the email?
• New templates: These will take time to design and test.
• Images: Which ones will you choose, and will they be different on different platforms?
• Production process: If you choose any format that requires code variations for different platforms, you’ll likely have to change your production schedule and workflow.

If it all sounds overwhelming, then start small, Jordan suggests: “You can do a media query to make headlines bigger on mobile. But if you want to be strategic about it, you need to plan it out a little more thoroughly, and that’s where an audit can help you figure out where you are and where you want to go.”

5. Use a longitudinal study of subscriber behavior to assess mobile/desktop/ multiscreen activity, and consider whether time of day and time of year might skew your data.

In one three-month study for a client, Alchemy Worx discovered that multiscreen use fell over time, while webmail and mobile-only opens jumped.

“You might conclude from this that these people are going mobile-only, but consider that this went over the Christmas holiday, when one half of the world is visiting the other half,” Quist says. “So, you’ve got only your mobile to check email. Or, your use of webmail grows because you can check your Yahoo email from another PC. You don’t do multiple-screen because you don’t have access to your desktop.”

According to Quist, email sent at different times of the day might also dictate different optimization strategies. “Just as in the holiday season you might need to be more mobile-optimized than in a nonholiday period, your lunchtime email might need to be optimized more than email sent in the evening, when your readers are on tablets or desktops,” Quist says.

6. When starting responsive email design, streamline content and pay careful attention to preheaders.

Brian Sisolak of Trilogy Interactive has been using responsive design for his client emails since summer 2011 and offers these tips:

• Use preheaders to optimize for the inbox.
• Eliminate the need to either pinch-andzoom or left-right scroll.
• Remove unnecessary elements.
• Provide mobile-appropriate content length.

According to Sisolak, inboxes on iOS devices have three elements marketers can use to immediately engage recipients: “From” name, subject line and preheader. Where iOS devices pull that preheader from varies based on the type of email account. To be safe, Sisolak suggests putting the preheader at the top of the HTML and text versions of your emails.

“Once recipients click into the email, our goal is to make it easy for the user to read the content,” says Sisolak. “To accomplish this, we shrink the text-area width and any full-width graphics to 320 pixels. We remove unnecessary borders and images and shrink any call-out graphics. We shrink images dynamically to 98 percent for full width, or 50 percent wide for graphics with smaller overall dimensions.”

Besides the technical tactics, Trilogy Interactive also considers how much content users can absorb on their mobile devices. “Since small screen sizes tax the reader, we’re now beginning to hide some copy on mobile versions of our emails to give the reader a better experience, without losing any of the key messaging,” says Sisolak.

7. Design for touch — the finger is the new mouse

One of the biggest changes resulting from the migration to mobile email readership is the need to design for the finger. Because the majority of mobile devices now use touchscreens, in essence, the finger has become the new mouse.

Here are a few touch-screen design tips from Anna Yeaman of STYLE Campaign:

Vertical spacing: The lack of vertical spacing between the main CTAs in an email can invite incorrect taps in an otherwise well-designed email. Apple’s Human Interface Guidelines recommend a minimum target area of 44 x 44 points.

Left justify for Android: Unlike iOS, Android devices don’t scale content to the width of the screen. This means emails are cut off at about 320 pixels wide on smartphones and 600 pixels on the Kindle Fire. You can swipe to see more, but it’s still best to left-align crucial information, such as your key CTAs. Better still, design buttons that span the width of the screen.

Product images as links: 44-pixel-high buttons take up room that could be otherwise dedicated to content. By combining the two, you make the most of the available space. Experiment with drop shadows, etc., to make product images appear more tappable. There’s no hover state on mobile devices, so users need visual cues.

Don’t ignore your administrative footer: Your designers often overlook the bottom of your email, where they like to use tiny fonts in very light colors. Make sure the links to your preferences, address-change and unsubscribe links have plenty of space between and around them so that recipients don’t mistakenly click on the wrong link.

Push contrast and font size: Push the contrast beyond what you’d do for the desktop, because content becomes hard to read once it’s scaled down. Also, increase the size of your fonts. The iPhone automatically scales it up, often breaking layouts. WP7 recommends no smaller than 15 points, while Apple recommends a 17- to 22-pixel font.

Lighter, cleaner content: Try condensing your copy and ditching any image weight that’s not essential.

Hands-On With The Experts: Case Study And How-To Guides

Mini Case Study: B2C Email Sender Revamping for Mobile

The Challenge: A B2C Silverpop client that sends hundreds of email campaigns a year under multiple brands needed to revamp its complex email messages for the mobile environment.

“We saw mobile opens had increased 10 percentage points over the last few years and knew we had to figure out our strategy,” says Brian Brown, director of modern marketing for ideapark, which worked with the client to redesign the email messages.

“Their database is so large that we have a perfect crosssection of every email client out there. So, we knew we would have to use the lowest common denominator to make sure we had a good experience for the largest number of people.”

The Solution: Brown and the client chose a screenagnostic approach, which uses a single format for all screens without the size variations that scalable email or responsive design entail.

“We didn’t go with responsive design mainly because of the spotty support among email clients, which we couldn’t afford to have,” Brown says. “A screen-agnostic format allowed us to create email that would do no harm to our desktop openers, who are our vast majority of openers, but would move the needle with our mobile viewers.”

The Strategy: The emails this client sends are more complicated than most that have just a single call to action, a paragraph or two of text and an image. Brown and the client started by stripping out any elements they felt they could safely discard and then moved to a narrower email design.

“Then, we moved to a larger call to action, increased font sizes on copy and headlines and moved to larger images,” says Brown. “We use the same content as we had in the earlier emails, which include several secondary calls to action.”

Brown and the client spent several weeks testing prototypes of the new email format extensively on segments of one brand’s regular newsletter before rolling it out to the entire database

The Results: Not only did the client see no degradation of the desktop experience, it also saw a statistically significant improvement in mobile engagement, with no problem with technology.

“We saw engagement all the way through the email, even down at the bottom of the email where we put the coupons,” says Brown. “We know the email is a mile long on mobile because it’s narrower with bigger copy and images, which isn’t necessarily a best practice, but we didn’t see a decrease in interactivity, even on the coupons that we always place at the bottom of the email.”

Next steps: The client will apply the new format to the other newsletters it sends and redesign specialty messages, such as birthday emails, Brown says.

How Silverpop Approaches Responsive Landing Pages

Peter Nelson, creative director for Silverpop, designs and codes emails and Web pages as part of his role at Silverpop. Here, he shares his approach for creating a responsive page

A responsive template is simply an HTML page that responds to the device the page is being viewed on. In other words, it’s a single page that can adjust itself from a mobile layout to a desktop layout.

Check out the example at bottom right of a Silverpop landing page. [Download PDF to see Example] If you open this page on a desktop browser, grab an outer side edge of the window, and drag it in and back out, the page recognizes and responds to the width of the rendering device and rearranges itself accordingly

Creating a responsive page is more complex and requires a bit more work to complete than a typical landing page. There are a number of ways to build a responsive page, but here’s the method that I’ve found works best for me.

Design: My first step is to design a typical landing page for a desktop (usually a minimum width of 800 to 950 pixels wide) and then another design with the same elements in a mobile screen size (a minimum width of 320 pixels and maximum width of 480 pixels).

Tablets use this in-between size with a maximum width 1 pixel below the desktop size and 1 pixel above the maximum-width mobile size.

When designing a page, pay attention to where you place elements within the larger page and the order they will fall on the smaller screens. Make sure you can code the placement in CSS without breaking the layout.

Once the design is approved, I create the different graphics I’ll need for each of the different screen sizes.

HTML CSS Coding: As a side note, I do all my HTML coding in Adobe Dreamweaver outside of Engage (Silverpop’s digital marketing platform). It’s much easier to manage the complexity of these types of pages. I also use CSS to format pages instead of using HTML tables.

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.

We use a media query to detect the screen size and to call in the appropriate style sheet (or section of style sheet if a single sheet is used) to display the layout.

[Download PDF to see Image]

I like to create an individual style sheet for each screen size, such as mobile.css, tablet.css and desktop.css. You can create a single style sheet that houses everything, but I find it more manageable to create individual style sheets.

Also, don’t forget the default general style sheet for older browsers. Older browsers won’t read the media queries, and thus ignore the CSS files those queries contain. You need a default style sheet to fall back on. I use a duplicate of the desktop.css and thus end up with four individual style sheets.

Once the CSS is done and working, I copy and paste the source code into Engage (source view) and the true testing begins. If you haven’t done so already, check out my landing page to see how it works.

If you’re really feeling adventurous, right-click to view the page source and look at the head section where the media queries are placed. There is a whole bunch of stuff there that does a lot of different things!

[Download PDF to see Images]

Conclusion

With the continued proliferation of smartphones and tablets, it’s safe to say “screensizeapalooza” is here to stay. One recent industry study predicted that by 2017, smartphones and tablets will consume three times more data on service providers’ networks than the entire desktop Internet.

Moving forward, savvy marketers will pay careful attention to how their customers and prospects interact with them across devices and adjust their strategy accordingly. This means not only following multiscreen best practices such as keeping coding simple and designing for touch, but also using behavioral marketing tactics to deliver relevant, personal content.

In the end, making sure your content renders correctly and is easy to act on across all devices is only a part of the engagement equation. To fully enhance the customer experience, you’ll also need to deliver the content your contacts want at the time they want it, using their behaviors, preferences and demographics to trigger automated, highly relevant messages that display optimally for whatever device they’re using.