Responsive Landing Pages That Work
 

Responsive Landing Pages That Work

on

  • 7,864 views

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

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.

Statistics

Views

Total Views
7,864
Views on SlideShare
5,654
Embed Views
2,210

Actions

Likes
18
Downloads
96
Comments
0

21 Embeds 2,210

http://ioninteractive.com 1959
http://www.scoop.it 116
http://feeds.feedburner.com 32
http://ion.postclickmarketing.com 30
http://cloud.feedly.com 23
http://192.168.1.243 12
http://www.google.com 8
http://holygardenscommunity.blogspot.com 6
https://twitter.com 3
http://www.ioninteractive.com 3
https://ion14.squarespace.com 3
http://digg.com 3
http://paths.ioninteractive.com 2
http://translate.googleusercontent.com 2
http://www.linkedin.com 2
http://blog.auerswald.de 1
http://newsblur.com 1
http://www.feedspot.com 1
https://hootsuite.scoop.it 1
http://feeder.co 1
http://reader.aol.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Landing Pages That Work Responsive Landing Pages That Work Presentation Transcript

  • © 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 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-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
  • © 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! @ioninteractive info@ioninteractive.com