7 Pros And Cons To Building Templates With Responsive Design

Mark  Ryan

July 17, 2012

Related Topics

These days every site we work on needs to cater to audiences from mobile phones, tablets, laptops, desktops, and in many cases web TVs and gaming consoles.  The resolutions vary significantly between devices and the content/functional needs vary as well.  We are very excited about building sites that cater to all audiences across all digital channels and devices and lately we have been building more and more sites with Responsive Design.  Responsive Design templates require a different mindset and require unique thinking from strategist, designers, and engineers.  There are some cases when it makes sense to simply build 2 or 3 sets of templates to focus on the mobile/tablet and laptop/desktop audiences independently. Below is a partial list of pros and cons of Responsive Design templates to consider when building new site templates.

The Pros:

  1. The Mobile Site Is No Longer An Afterthought. Creating a site with Responsive Design forces the entire team to constantly consider the specific needs of mobile and tablet audiences during site development. We don't have to annoy mobile or tablet users (like me) with poor sites anymore.
  2. Remember The Saying, “Keep It Simple Stupid”.  As folks are planning out Responsive Design templates, they often start with the larger resolutions (i.e. Desktops) and then shrink the layout to mobile resolutions.  During this process they are eliminating content, design, and functionality that is unnecessary or undesirable.  This practice is great!  It forces the team to start considering what is really important on every page.
  3. Content (and Functionality) Is King!  We've been saying it for years.  But often content takes a backseat to design.
  4. It's cool.  This sounds like an impractical “Pro” but this is why most of us got into web development in the first place.  We like building new and cool things.
  5. Easier Maintenance:  With only one set of templates to work on, your maintenance becomes more focused.
  6. Better SEO:  With one set of URLs in your linking strategy (instead of one for mobile and one for other), you can make better strides into building effective backlinks.
  7. You're Preparing For What Is Next! Let's face it, we can't predict what is coming next.  Car dashboard displays, window browsers that actually appear on the windows in your home, a web browser that appears on the lenses of your glasses, or even web enabled TVs with 60 inch displays...  Implementing a Responsive Display layout gets your team thinking about all sorts of web users.

The Cons:

  1. Twice the Effort:  It takes a lot of smart thinking from strategist, designers, engineers, and copy writers to make a well-designed, adaptive set of templates.  We find that it often takes over twice the effort to build Responsive Display templates as it does to build to sets of templates (for mobile and laptop).
  2. Design And Content Concessions Are A Must: The design team and content team may need to be a bit constrained with their creativity as Responsive Design brings in more limits.
  3. More Difficult Maintenance:  Yes, I included this as a pro and a con.  When performing maintenance, the team will be forced to think of scaling resolutions even when making the smallest (most common) updates to the site such as adding a new press release.
  4. Challenging SEO: Again, I've included this as a pro and a con.  Currently mobile search engines give preference to mobile sites.  Because Responsive Display templates are so unique, it is not clear if search engines like Google can decipher whether or not an adaptive template is relevant to mobile audiences.
  5. Slower Development:  Responsive Design takes unique mind set and a more thoughtful approach to layouts.  This typically adds time to wireframes, design, and implementation of templates.
  6. Link Sharing Is Less Predictable: The Responsive Display template not only adjusts layout for different displays but it also adjusts content, imagery, and functionality often eliminating elements for small browsers.  This means that when you share a link with someone, they may be looking at a very different page than you intended for them to see depending on what device you are looking at the page with and what device they are using.
  7. Browser Compatibility:  Good Responsive Design often utilizes new technologies such as CSS3/Media Queries and HTML5.  Currently not all mobile browsers support these new technologies meaning that the team not only needs to consider different resolutions but also needs to consider older mobile/desktop browsers.

We are very excited about building adaptive templates that deliver the best experience to all types of audiences (even old BlackBerrys ;-) ) and we are even more excited about seeing the direction that Responsive Design templates start to take the web as new development and testing tools come to the market.  If you have some new tools for building Responsive Designs or have seen some great sites that demonstrate Responsive Design, we'd love to see them.

Here are a few of my favorite sites with Responsive Design:

http://www.smashingmagazine.com/

http://bostonglobe.com/

http://lifeingreenville.com/