Transcript
Page 1: Responsive Landing Pages That Work

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

Page 2: Responsive Landing Pages That Work

© 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

Page 3: Responsive Landing Pages That Work

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

what are responsive landing pages?

Page 4: Responsive Landing Pages That Work

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

Page 5: Responsive Landing Pages That Work

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

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

Ethan Marcotte

Page 6: Responsive Landing Pages That Work

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

what problem does responsive design solve?

Page 7: Responsive Landing Pages That Work

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

the spectrum of screen sizes and resolutions is broadening every day

Page 8: Responsive Landing Pages That Work

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

Images courtesy of apple.com

11-inch 13-inch 15-inch

27-inch21.5-inch

Wide variety of screen resolutions & sizes...

Page 9: Responsive Landing Pages That Work

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

Tablet Comparison Guide 2012

Explosion of new tablets...

Page 10: Responsive Landing Pages That Work

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

Smartphone Comparison Guide 2013

Skyrocketing use of smartphones & "phablets"…..

Page 11: Responsive Landing Pages That Work

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

do you need responsive landing pages?

Page 12: Responsive Landing Pages That Work

© 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

Page 13: Responsive Landing Pages That Work

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

Source: Bloomberg,17 Oct 2012

Smartphone sales reached 1 Billion

in 2012...

Page 14: Responsive Landing Pages That Work

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

Source: Bloomberg,17 Oct 2012

Expected to reach 2 Billion by 2015!

Page 15: Responsive Landing Pages That Work

© 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

Page 16: Responsive Landing Pages That Work

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

Not mobile-optimized :(

Page 17: Responsive Landing Pages That Work

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

Barely legible text & imagery

Painful form

Pinching & zooming required!

Page 18: Responsive Landing Pages That Work

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

Responsive landing page :)

Page 19: Responsive Landing Pages That Work

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

Content is easy to read

Form is mobile "finger-friendly"

Responsive imagery

Page 20: Responsive Landing Pages That Work

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

Plays nicely with desktop :)

Page 21: Responsive Landing Pages That Work

© 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

Page 22: Responsive Landing Pages That Work

© 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

Page 23: Responsive Landing Pages That Work

© 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

Page 24: Responsive Landing Pages That Work

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

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

Page 25: Responsive Landing Pages That Work

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

9 best practices for responsive landing pages that work

Page 26: Responsive Landing Pages That Work

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

Page 27: Responsive Landing Pages That Work

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

Page 28: Responsive Landing Pages That Work

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

Page 29: Responsive Landing Pages That Work

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

Page 30: Responsive Landing Pages That Work

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

Page 31: Responsive Landing Pages That Work

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

Page 32: Responsive Landing Pages That Work

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

Page 33: Responsive Landing Pages That Work

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

Page 34: Responsive Landing Pages That Work

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

Page 35: Responsive Landing Pages That Work

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

Thank you!@[email protected]


Recommended