What are responsive landing pages? Do you need them? This slide deck answers these questions, provides lots of statistics, and discusses the benefits and considerations of responsive. Plus, get 9 best practices for designing responsive landing pages that work.

1. © i-on interactive, inc. All rights reserved • www.ioninteractive.com

2. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
What's Inside?
• What are responsive landing pages?
• Do you need them?
• Considerations for implementation
• Lots stats, examples & takeaways

3. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
what are
responsive
landing pages?

4. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
Landing pages that can "adapt to the constraints of the
browser window or device that renders it, creating a design
that almost responds to the user’s needs."

5. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
The ingredients
1. Flexible, grid-based layout
2. Fluid images & media
3. CSS 3 media queries
Ethan Marcotte

6. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
what problem
does responsive
design solve?

7. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
the spectrum of screen sizes and
resolutions is broadening every day

8. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
Images courtesy of apple.com
11-inch 13-inch 15-inch
27-inch
21.5-inch
Wide variety of screen resolutions & sizes...

9. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
Tablet Comparison Guide 2012
Explosion of new tablets...

10. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
Smartphone Comparison Guide 2013
Skyrocketing use of smartphones & "phablets"…..

11. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
do you need
responsive
landing pages?

12. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
Source: Nielsen, as cited by Collective, "The Multi-Screen Dayparting Playbook," Feb 25, 2013
71% of media-using
US population is
multi-screen

13. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
Source: Bloomberg,17 Oct 2012
Smartphone sales
reached 1 Billion
in 2012...

14. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
Source: Bloomberg,17 Oct 2012
Expected to reach
2 Billion by 2015!

15. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
“A million screens have bloomed, and we
need to build for all of them.”
2013: The Year of the
Responsive Web Design

16. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
Not mobile-optimized :(

17. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
Barely
legible
text &
imagery
Painful
form
Pinching
&
zooming
required!

18. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
Responsive landing page :)

19. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
Content
is easy
to read
Form is
mobile
"finger-
friendly"
Responsive
imagery

20. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
Plays nicely with desktop :)

21. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
Key Benefits Of Responsive Landing Pages
• Less maintenance
• Fewer landing page versions
• Better user experience, across all devices & browsers
• Better SEO
• Improved social sharing experience

22. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
Responsive Vs Mobile-Specific
responsive mobile-specific
Single page accommodates
desktop, tablet & mobile traffic
Multiple pages must be created &
maintained for desktop & mobile
(tablet often ignored)
Landing page delivered is based
on the width of the browser
Uses user-agent string detection
identify and target mobile users
May not always provide a highly
conversion-focused design
Can be highly crafted & very high
quality mobile user experience
Less freedom/control over design
& placement of content
More freedom to create/design
experiences customized to mobile
Better return on your investment
(designed to adapt as technology
advances)
Could require additional
maintenance & resources

23. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
Mobile First?
• Mobile screens are smaller, but higher resolution — images
can be 'wider' in mobile than in desktop
• Mobile context have shorter attention spans
• Single column layouts require specific hierarchy of
information
• Smartphones have the least break points — if your message
works for mobile, it will work better for tablets & desktops
• Progressive enhancement vs. graceful degradation

24. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
Progressive enhancement
Mobile-first design
Clear hierarchy of content
Concise presentation
Communicative imagery
Graceful degradation
Designed for desktop
Pared down for mobile
Tends to be "Frankensteined"
Less cohesive & persuasive

25. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
9 best practices for
responsive landing
pages that work

26. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
1. Design in your landscape smartphone viewport
Start small & wide. Landscape smartphone
viewport can have the widest possible image use
cases.
Start designing and previewing in this viewport.

27. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
2. Spin often
Continuously check your smartphone
landscape viewport against your
portrait viewport.
Portrait is the most narrow and will
require the most thoughtful & concise
headline lengths.

28. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
3. Scroll frequently
Preview, preview, preview.
Scrolling all the way down to the bottom of your
pages will help you maintain the integrity of the
entire page, across all viewports.

29. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
4. Create finger-friendly forms
Focus on how your forms scale,
fit, scroll, their field types, how
buttons behave & how hints and
errors are surfaced.

30. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
5. Leverage interactive content
Mimic the mobile app. More content in less space with
more elegance.
Minimize long-page scrolling with tabbed content
accordions and other app-like interactive elements.

31. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
6. Use highly communicative images
As your images change positions or size, notice
how they are perceived at various viewports.

32. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
7. Make smart navigation choices
Decide how many nav tabs responsive
design can support. This depends,
based on length of words.

33. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
8. Respond well to touch
Avoid on-states that create
two-touch requirements for
actuation.

34. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
9. Require everyone be responsive
Ensure video and other
third-party media is
responsive as well.

35. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
Thank you!
@ioninteractive
info@ioninteractive.com