Responsive Landing Pages That Work
-
Upload
ion-interactive -
Category
Design
-
view
7.703 -
download
4
description
Transcript of Responsive Landing Pages That Work
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
© 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
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
what are responsive landing pages?
© 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."
© 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
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
what problem does responsive design solve?
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
the spectrum of screen sizes and resolutions is broadening every day
© 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...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Tablet Comparison Guide 2012
Explosion of new tablets...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Smartphone Comparison Guide 2013
Skyrocketing use of smartphones & "phablets"…..
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
do you need responsive landing pages?
© 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
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Source: Bloomberg,17 Oct 2012
Smartphone sales reached 1 Billion
in 2012...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Source: Bloomberg,17 Oct 2012
Expected to reach 2 Billion by 2015!
© 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
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Not mobile-optimized :(
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Barely legible text & imagery
Painful form
Pinching & zooming required!
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Responsive landing page :)
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Content is easy to read
Form is mobile "finger-friendly"
Responsive imagery
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Plays nicely with desktop :)
© 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
© 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
© 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
© 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
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
9 best practices for 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.
© 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.
© 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.
© 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.
© 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.
© 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.
© 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.
© 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.
© 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.
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Thank you!@[email protected]