© 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?
...
© 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 ...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
The ingredients
1. Flexible, grid-based layout
2. Fl...
© 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 broa...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Images courtesy of apple.com
11-inch 13-inch 15-inch...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Tablet Comparison Guide 2012
Explosion of new tablet...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Smartphone Comparison Guide 2013
Skyrocketing use of...
© 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-...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Source: Bloomberg,17 Oct 2012
Smartphone sales
reach...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Source: Bloomberg,17 Oct 2012
Expected to reach
2 Bi...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
“A million screens have bloomed, and we
need to buil...
© 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
...
© 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-
frie...
© 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 main...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Responsive Vs Mobile-Specific
responsive mobile-spec...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Mobile First?
• Mobile screens are smaller, but high...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Progressive enhancement
Mobile-first design
Clear hie...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
9 best practices for
responsive landing
pages that w...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
1. Design in your landscape smartphone viewport
Star...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
2. Spin often
Continuously check your smartphone
lan...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
3. Scroll frequently
Preview, preview, preview.
Scro...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
4. Create finger-friendly forms
Focus on how your for...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
5. Leverage interactive content
Mimic the mobile app...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
6. Use highly communicative images
As your images ch...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
7. Make smart navigation choices
Decide how many nav...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
8. Respond well to touch
Avoid on-states that create...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
9. Require everyone be responsive
Ensure video and o...
© i-on interactive, inc. All rights reserved • www.ioninteractive.com
Thank you!
@ioninteractive
info@ioninteractive.com
Upcoming SlideShare
Loading in...5
×

Responsive Landing Pages That Work

8,013

Published on

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.

Published in: Design, Technology

Responsive Landing Pages That Work

  1. 1. © i-on interactive, inc. All rights reserved • www.ioninteractive.com
  2. 2. © 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
  3. 3. © i-on interactive, inc. All rights reserved • www.ioninteractive.com what are responsive landing pages?
  4. 4. © 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."
  5. 5. © 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
  6. 6. © i-on interactive, inc. All rights reserved • www.ioninteractive.com what problem does responsive design solve?
  7. 7. © i-on interactive, inc. All rights reserved • www.ioninteractive.com the spectrum of screen sizes and resolutions is broadening every day
  8. 8. © 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...
  9. 9. © i-on interactive, inc. All rights reserved • www.ioninteractive.com Tablet Comparison Guide 2012 Explosion of new tablets...
  10. 10. © i-on interactive, inc. All rights reserved • www.ioninteractive.com Smartphone Comparison Guide 2013 Skyrocketing use of smartphones & "phablets"…..
  11. 11. © i-on interactive, inc. All rights reserved • www.ioninteractive.com do you need responsive landing pages?
  12. 12. © 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
  13. 13. © i-on interactive, inc. All rights reserved • www.ioninteractive.com Source: Bloomberg,17 Oct 2012 Smartphone sales reached 1 Billion in 2012...
  14. 14. © i-on interactive, inc. All rights reserved • www.ioninteractive.com Source: Bloomberg,17 Oct 2012 Expected to reach 2 Billion by 2015!
  15. 15. © 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
  16. 16. © i-on interactive, inc. All rights reserved • www.ioninteractive.com Not mobile-optimized :(
  17. 17. © i-on interactive, inc. All rights reserved • www.ioninteractive.com Barely legible text & imagery Painful form Pinching & zooming required!
  18. 18. © i-on interactive, inc. All rights reserved • www.ioninteractive.com Responsive landing page :)
  19. 19. © i-on interactive, inc. All rights reserved • www.ioninteractive.com Content is easy to read Form is mobile "finger- friendly" Responsive imagery
  20. 20. © i-on interactive, inc. All rights reserved • www.ioninteractive.com Plays nicely with desktop :)
  21. 21. © 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
  22. 22. © 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
  23. 23. © 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
  24. 24. © 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
  25. 25. © i-on interactive, inc. All rights reserved • www.ioninteractive.com 9 best practices for responsive landing pages that work
  26. 26. © 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.
  27. 27. © 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.
  28. 28. © 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.
  29. 29. © 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.
  30. 30. © 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.
  31. 31. © 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.
  32. 32. © 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.
  33. 33. © 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.
  34. 34. © 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.
  35. 35. © i-on interactive, inc. All rights reserved • www.ioninteractive.com Thank you! @ioninteractive info@ioninteractive.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×