A Responsive Infographic on Responsive Design

This week’s infographic from Sitefinity Responsive Design: The Only Mobile Strategy That Scales is not just on the topic of responsive design, it’s itself responsive. Go ahead and play around with it (hint: make your browser window skinny and wide). I’ve sized it narrow for your responsive viewing pleasure.

Highlights

  • There aren’t 2 webs (mobile and desktop), rather, there’s multiple devices used to access 1 web.
  • Mobile strategies centered around one device neglect most visitors.

Responsive cheat-sheet:

Mobile websites

Pros

  • Specialized website for one device
  • Straight-forward to create
  • Less code=”lighter”

Cons

  • Doesn’t address spectrum of devices in use today
  • Duplicated content
  • Not aligned with SEO best practices*

Mobile apps

Pros

  • Very specialized and optimized task-focused experience
  • Device-specific capabilities (geo-location, notifications)
  • Constant reminder of your brand/site

Cons

  • Difficult to create and must be created for multiple platforms
  • Must pre-package for multiple app stores
  • Sits outside the CMS

I’ll add that app stores take a cut of in-app transactions that could be avoided through an HTML5 or responsive site, and development talent and time can be expensive, especially when you want to serve beyond Apple and Google environments.

Responsive design

Pros

  • One website for all devices
  • Naturally SEO friendly
  • Aligned with best practices
  • Coexists with other mobile strategies

Cons

  • Challenging to set-up, maintain and test
  • Difficult to apply to large existing sites
  • No unique device experiences

Tags: , ,


Related Articles

3 Responses to “A Responsive Infographic on Responsive Design”

  1. Responsive design is the way forward, but, this article doesn’t seem to mention that unless you’re intelligent with your HTML and CSS mobile users will be downloading content that they never see/use.

    This is especially critical with large images that would load on a standard/desktop version of the site, but when snapped to mobile are just scaled down (100% wide) or hidden via css.

    Sadly, in the UK, many mobile phone contracts still only come bundled with 250MB data =/

  2. Excellent, thank you! That’s the first infographic I’ve seen for Responsive Design. I still don’t like the name very much – it sounds too much like Business Spiel mode. Suits in office meetings pointing at performance graphs muttering, “Responsive design, yerrrsss….” Anyway, it’s certainly given web designers plenty to think about. I hope everyone’s finding the multiple transitions alright!

  3. Propeople says:

    Good job, interesting infografic. We have also tried to list the best tools for drupal responsive design. You can find it here: http://wearepropeople.com/blog/best-responsive-web-design-tools

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS