Responsive Landing Pages That Work

Embed Size (px)

DESCRIPTION

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.

Text 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 users needs."
  • 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
  • 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-inch 21.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-rst 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
  • 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 nger-friendly forms Focus on how your forms scale, t, scroll, their eld 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! @ioninteractive info@ioninteractive.com