Responsive Landing Pages That Work

What's Inside?• What are responsive landing pages?• Do you need them?• Considerations for implementation• Lots stats, examples & takeaways

what are responsive landing pages?

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

The ingredients1. Flexible, grid-based layout2. Fluid images & media3. CSS 3 media queries

Ethan Marcotte

what problem does responsive design solve?

the spectrum of screen sizes and resolutions is broadening every day

Images courtesy of apple.com

11-inch 13-inch 15-inch

27-inch21.5-inch

Wide variety of screen resolutions & sizes...

Tablet Comparison Guide 2012

Explosion of new tablets...

Smartphone Comparison Guide 2013

Skyrocketing use of smartphones & "phablets"…..

do you need responsive landing pages?

Source: Nielsen, as cited by Collective, "The Multi-Screen Dayparting Playbook," Feb 25, 2013

71% of media-using US population is

multi-screen

Source: Bloomberg,17 Oct 2012

Smartphone sales reached 1 Billion

in 2012...

Source: Bloomberg,17 Oct 2012

Expected to reach 2 Billion by 2015!

“A million screens have bloomed, and we need to build for all of them.”

2013: The Year of the Responsive Web Design

Not mobile-optimized :(

Barely legible text & imagery

Painful form

Pinching & zooming required!

Responsive landing page :)

Content is easy to read

Form is mobile "finger-friendly"

Responsive imagery

Plays nicely with desktop :)

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

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

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

Progressive enhancement

Mobile-first designClear hierarchy of content

Concise presentationCommunicative imagery

Graceful degradation

Designed for desktopPared down for mobile

Tends to be "Frankensteined"Less cohesive & persuasive

9 best practices for responsive landing pages that work

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.

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.

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.

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.

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.

6. Use highly communicative images

As your images change positions or size, notice how they are perceived at various viewports.

7. Make smart navigation choices

Decide how many nav tabs responsive design can support. This depends, based on length of words.

8. Respond well to touch

Avoid on-states that create two-touch requirements for actuation.

9. Require everyone be responsive

Ensure video and other third-party media is responsive as well.

Thank you!@ioninteractiveinfo@ioninteractive.com

Responsive Landing Pages That Work

Design

Seo And Landing Pages

Branding Your Landing Pages

Creating responsive landing pages using LeadSquared

MVP Landing Pages

Mobile Landing Pages Talk

HOW TO OPTIMIze LANDING PAGeS OptimizE Landing pagEs FOR COnvERsiOns

Building effective Landing Pages

RESPONSIVE Content Marketing LANDING PAGE Design Guide

Create Beautiful Responsive Marketo Emails & Landing Pages... No Coding Required!

Responsive design landing pages simplifying and optimising for every device

Best Practices: Landing Pages

Nonprofit Landing Pages

viminds, angenehm. · 2020. 11. 11. · / modernes Webdesign - Responsive Design, Adaptive Design / Corporate Websites, Blogs & Microsites / individuelle Web-Anwendungen / Landing-Pages

LeadSquared landing pages are now responsivehelp.leadsquared.com/wp-content/uploads/2012/10/responsive-landing-pages.pdfLeadSquared landing pages are now responsive . What is a responsive

B3 p4 landing pages

Mobile Landing Pages Design

RESPONSIVE Content Marketing LANDING PAGE Design Guide · Responsive Landing Page Design Guide Content Marketing ... pages that convert. ... of landing page design. Follow the rules

Landing pages designs

Landing Page Essentials (Landing Pages 107)

Effective Landing Pages