Thoughts on Responsive Web Design: Pros, Cons and Other Considerations
Date posted: April 26, 2013
Responsive Web Design (RWD) continues to get lots of attention in the higher ed market as an optimal solution for educational websites. Many institutions have launched very attractive and effective RWD redesigns and it certainly seems to be the preferred direction of most of the higher ed website design RFPs we’ve seen over the last six months.
Recently we have begun to read about and hear an expanding range of opinion on the merits of RWD, based on real experience with it in the marketplace from both web design professionals and higher ed marketers. RWD is a particularly effective strategy for content rich websites like we have in higher ed. Large, complex sites incorporating multiple interactive applications and requiring mobile versions with different search and UI priorities present more of a challenge to this approach.
This post is an effort to collect and summarize some of the prevailing wisdom on RWD to provide the non-specialist with a summary of the pros and cons of RWD, specifically in context of higher ed. Given that RWD seems to evoke a “love it” or “hate it” response in so many people, I am sure I will offend the sensibilities of some by my comments so I would like to apologize for that in advance. (I am a Canadian after all). Regardless of its nature, I do look forward to any and all feedback.
I think it is important that people approach this conversation with as open-minded and balanced an approach to website design as possible. My approach to try and accomplish this has always been to start with business and marketing requirements of a site to determine its form, format and content.
Ethan Marcotte, author of one of the seminal works of RWD, also makes this point in his book “Responsive Web Design”.
“But most importantly, responsive web design isn’t intended to serve as a
replacement for mobile web sites. […] And as a development strategy,
it’s meant to be evaluated to see if it meets the needs of the project
you’re working on.”
So let’s take a look are RWD from the point of view of its impacts on different stages of a website’s development, lifecycle and marketing effectiveness.
Site Design Considerations
– Creating one design in RWD, serving all platforms vs multiple designs for mobile, tablet, desktop or app saves time and money.
– One RWD design across all platforms provides a common user experience across those platforms. For example – A student discovers an interesting educational program using their mobile phone on the bus trip home, then go on their desktop at home to further investigate and enter into a website that has the look and feel and sensibilities of the one that drew them to it in the first place. That “scent trail” as referred to in conversion optimization, is a key factor in producing a positive outcome from a prospective student’s web experience.
– Implementation of RWD requires a complete site redesign and reimaging of web applications across desktop and mobile. It is an all or nothing approach that cannot be phased in partially.
– Building effective navigation in RWD for small screen formats (ie smartphones) can be a serious challenge. Sacrifices in design are often made to make it work effectively.
– Image optimization in RWD across multiple formats can be a problem
– Advanced page functionality ie forms, applications etc can be difficult to implement.
– If user intent and/or user requirements are different across platforms, RWD can be difficult to apply, particularly if a mobile page or app is optimized for touch or lead conversion.
This example of a mobile app from JP Morgan Chase Bank demonstrates how a mobile device is intended to be used quite uniquely versus the purpose of a desktop site. According to the company, consumers used this feature to deposit over $4 billion dollars and the app has won several awards including the highly renowned Webby Award in 2011.
Site Production Considerations
– Production of a RWD site is generally a more complex project management challenge than a traditional site, takes longer to build and the approvals process, because it is quite different can be more difficult to manage.
– A range of hardware platforms (and resolutions) are required to thoroughly test your RWD site. Emulators or simply scaling a browser window can be used but they never seem to be quite the same results as working on the real thing.
Site Maintenance Considerations
– One of the real benefits of RSW is that it is much simpler to maintain one code base than two or three. This has important implications on the skill set requirements of your team ( internal or external), the amount of time required for maintenance of your site, as well as your management resources to oversee them. Saving time, money and human resources is a high priority for minimally resourced higher ed Marcomm or IT web groups.
Site Performance Considerations
– RSW sites are generally slower to load than m.dot mobile sites. In the example below the responsive mobile and responsive full web page take approximately the same time to load. Even though the mobile page only displays part of it, it needs the time to download all of it at the front end. An optimized mobile site with the same content would typically load much faster. And the really important part is that every extra second of delay in page loading causes a reduction, (reported up to 7%), in conversion rate.
– Google has publically declared that it likes RWD sites , and apparently ranks them higher.
– A RWD site will reduce your bounce rate on mobile visitors which increases lead generation and ultimately trickles down to increased registrations.
– Because there is only once site, RWD sites typically get better page indexing
– Inbound links are directed to one site.
– All of the above typically improve your search engine page rankings.
– If visitor search intent is different for your mobile vs desktop site RSW has its limitations. The example below demonstrates how keywords can be very specifically mobile and local search oriented. Often these are very different keywords than you would typically optimize your desktop site for.
– Analytics for RWD sites are collected under one Google analytics account making it much simpler to oversee your site’s visitor traffic, goals and marketing ROI.
– The example below demonstrates how traffic, funnel and goal conversions can be analyzed by screen size.
Source: Adobe Blog
– RWD sites have their limitations with respect to efficient A/B testing and conversion rate optimization tactics. The tuning of content and its presentation is more difficult to engineer efficiently across pages that are so scaleable.
As Marcotte’s quote suggests each site has different requirements and objectives and should be evaluated as such. RSW is very effective in certain circumstances but marketers need to be aware that it has its strengths and weakness and apply its use, accordingly.
What factors were most important to you in your decision to use RWD in your last redesign. Or conversely if you chose to stick with a desktop/mobile format strategy, what motivated your decision and with hindsight would you repeat it? What other considerations would you suggest to add to our list. We look forward to hearing from you.