Responsive Design for Landing Pages

white paper
Turning click throughs into breakthroughs.
Responsive
Design
for Landing Pages
Simplifying & optimizing for every device—
in Google Enhanced campaigns—and everywhere else.

Call 888.466.4332 or +1.561.394.9484 or get started at meet.ioninteractive.com/responsive:
Gone are the days when mobile devices were the
exception within your campaigns. Now they’re the
norm. And their usage impacts results. Advertising
and marketing success is dependent on delivering
usable and satisfying messages to all devices—
smartphones, tablets and computers.
If you think you’re not ready to embrace responsive design yet—think again. Google knows it’s
imperative to satisfy all these devices—now. The mandatory switch to enhanced campaigns on July
22, 2013 was Google’s line in the mobile sand. It’s time for all marketers and advertisers to accept
that succeeding in digital, means making your campaigns responsive—today.

Responsive flexibility
& complexity
Responsive design is really several
page designs baked into a single
super page. The number of page
designs depends on the num-ber
of widths at which the layout
changes. These widths are called
break points and the viewport is the
resulting viewable page. If you have
three break points, you have three
viewports within each page.
The flexibility of respon-sive
design is unques-tionable—
one page of
content results in several
different user experi-ences.
The complexity
comes in the design,
development and main-tenance
requirements
to bring that flexibility to
life. Even in a dynamic
responsive page design
environment like ion’s—
where the complexity is
invisible to the marketer
or advertiser creating
the page—there are
additional factors to be
considered in the cre-ative
process.
This viewport and the
tablet on the preceding
page are of the same,
actual, responsive
web page.
Three web design techniques
to satisfy mobile users
Responsive
Responsive design is a relatively new, mainstream web page design
technique that enables one page to satisfy users regardless of their
browsing device’s page width. Responsive pages morph themselves
on the fly to scale and reposition content, and refactor interface
behavior in an effort to deliver a satisfying user experience for all view-ports—
phones, tablets, desktops. Responsive design is like having
several page designs in one—with the user getting the one that’s best
for them. The version of the experience delivered to the user is
based upon the width of their browser.
Device Specific
Device-specific design
targets devices’ user-agent
strings to display pages built
for that specific device. For
example, you could deliver a
specific user experience to
any device that included ‘iP-hone’
in its user agent string.
Mobile-specific experiences
can be highly crafted and of
very high quality, but they
require significant resources
to produce and maintain.
Variable Width
Variable-width pages are the
old-school way of accom-modating
different browser
widths. Unlike responsive
design, variable width simply
scales from a minimum to
a maximum width. There’s
no intelligence built into that
scaling—so content sim-ply
gets wider or narrower.
Variable-width design seldom
results in a satisfying user
experience on any device
beyond the most middle-of-
the-road browser. Vari-able-
width design bears little
resemblance to responsive
design and the two should
not be confused.

Mobile first?
Mobile-first design is an approach that lends itself to a responsive world. It simply means that you create first and foremost for mobile—making the desktop your sec-ondary focus. In many cases your mobile traffic volume has not yet usurped your desktop volume, so you may think that mobile first is foolish. But, when you con-sider a few of the practical design realities, mobile-first makes a lot of sense.
• Mobile screens are smaller, but higher resolution—images can be ‘wider’ in mobile than in desktop
• Mobile contexts often have shorter attention spans—users have less time and patience
• Since mobile pages are often single column, they require specific and prudent hierarchy of information
• Smartphones will have the least content of all your break points—if your message works for smart-phones, it will only work better for tablets and desktops—this is called progressive enhancement
These four factors alone illustrate why mobile-first design is smart. It forces the tough decisions—more concise content, more communicative imagery, and more thoughtful choices around what’s most and least important. When you make those tough choices for the small screen, the bigger screen benefits.
The alternative—and more prevalent philosophy in 2013—is to design for the desktop and then pare down for mo-bile— graceful degradation. The result is more likely to be Frankensteined content and layout—often far less persuasive and cohesive than a mobile-first alternative. Conversion-focused campaign page de-sign benefits greatly from a clear hierarchy of concise content and presentation. Progressive enhancement is more effective than graceful degradation at bringing con-version- focused pages to life.
Four viewports of the same, actual, responsive web page.

9 Point Responsive Design Checklist
e Start small and wide
This depends on how your layout refactors, but your landscape smartphone viewport is often the one with the most layout eccen-tricities and can have the widest possible image use cases. So, start designing and previewing using this viewport.
e Spinning
No, this is not a drinking game. As you’re designing for your smart-phone landscape viewport, continuously check yourself against your portrait smartphone viewport. That’s the most narrow one and the one that will require the most thoughtful and concise headline lengths and wording to avoid odd breaks.
e Scrolling
You may be seeing a trend of preview, preview, preview. Scrolling all the way down to the bottom of your pages—especially at your small-est viewports—will help you maintain the integrity of the entire page across all viewports.
e Forms
Forms are usually important in conversion-focused campaign con-texts. Generally speaking, mobile users have even more disdain for forms than their desktop counterparts. So, your mobile viewport forms better be awesome. Focus on how they scale, fit, scroll, their field types, how their buttons behave, and how hints and errors are surfaced. The form user experience is magnified in a responsive mobile world.
All viewports shown above are of the same, actual, responsive web page.

e Interactive content
Mobile users are accustomed to slick apps that put everything within a finger’s reach. If you can mimic that reality within your conversion
-focused campaigns, you can communicate more content in less space with more elegance. That elegance will result in higher con-versions. Use lightweight, mobile-friendly (touch) versions of tabbed content, rotators, accordions and other interactive elements that let you infer more app and less web page in the UX. This will minimize long-page scrolling and put more content within easier reach.
e Image choices and viewport behavior
As your viewport changes—both up to desktop and down to portrait smartphone—your images are also changing. The way your images morph may include resizing, cropping, positioning or even appearing or disappearing entirely. As your images change position, resize or crop, pay very close attention to how that image is perceived at the various viewports. Perhaps it’s better for a particular image to align centered, while another should be aligned to the right. Specific image content has everything to do with how you want that image to scale, position and resize.
e Navigation considerations
Responsive navigation has some special use-case considerations. Take tabbed content for example. Tabs typically sit side-by-side in a desktop viewport, but stack in a smartphone viewport. What happens in between requires some planning. This impacts design choices like how many navigation items you can support and how long their labels can be. If you have a nine-tab nav of three-word labels, you’re going to have an entire page of navigation (plus scrolling) in your landscape smartphone viewport. That won’t get you conversions.
All viewports shown above and on the following page are of the same, actual, responsive web page.

e Touch considerations
Aside from previously mentioned touch implications, how button and navigation states respond to touch interactions is critical to usability and conversion. Avoid on-states that create two-touch requirements for actuation. Those are a recipe for high bounce rates.
e Third-party content constraints
If your layout is responsive, then your content needs to be responsive as well. A good example of where this can go badly is video. Let’s say your video delivery network player is not responsive, but your page is. Perhaps the container in which the video appears scales and posi-tions gracefully, but the video itself stays either small (if you’re design-ing mobile first) or huge (if you’re designing for graceful degradation). Either way, if that video is important to conversion, then your results will suffer. Use only content that plays well in your viewports.
We hope this checklist is helpful in focusing attention on some of the considerations of conversion-focused responsive landing page design. But, without a tool to help simplify and streamline the responsive design process, it’s resource intensive. Done right, responsive pages put the right content in the right place on the page for every user. It signifi-cantly increases the probability that your campaign will convert visitors into leads, calls & sales. If that’s not reason enough to embrace responsive principles in your landing pages—then Google’s mandate cer-tainly is. Responsive design is one way to make your landing pages as enhanced as your campaigns.

Meet the software that creates,
tests and analyzes the web’s
most effective pages.
responsive
A|B testing
auto-optimization
interactivity
agility relevancy
targeting
MVT mobile
code-free 90%
of our customers
report positive ROI*
*TechValidate Customer Research

Responsive Design for Landing Pages

More Related Content

What's hot (17)

Viewers also liked (7)

Similar to Responsive Design for Landing Pages (20)

More from Evgeny Tsarkov (20)

Recently uploaded (20)

Responsive Design for Landing Pages