Responsive site vs. Mobile site

Since the beginning of time, there have been many legendary ongoing battles… Good vs. Evil, Jedis vs Dark Sith Lords, etc. Since internet usage on mobile devices has gone wild, there has been a new battle added to the list: Responsive sites vs Mobile sites (you know, the m.example.com ones). Add to this the fact that according to surveys articles featuring x vs. y are popular, I think that if I also add a photo of a cat or a baby, this post might get some good statistics. So, here we go, unleash hell…

34728312

Personally, I am biased towards responsive design. There is something inherently cool about the idea of having a site that looks good and is usable on more than one screen dimensions, it just feels like it is a more flexible, configurable approach and I feel comfortable with that. Having said that, I have to admit I am by no means a responsive design nor a mobile developer guru, I am just a RWD enthusiast, where RWD stands for Responsive Web Design (and Rear Wheel Drive by the way, I like both). So, let’s put it all out there on the table and see what we can come up with. You are more than welcome to join me on this journey and your feedback and opinion are of vital importance, this is meant to be an open discussion.

So, let’s dance…

Responsive Design

Instead of building a separate site for users accessing your site via a mobile device, you build a one-fits-all site, that adjusts dynamically to the size of the screen, all the elements get re-arranged or even resized, to provide a user friendly interface on all screen sizes.

Responsive-Web-Design-Layouts-and-Media-Queries

Pros

  • Flexibility. There is only one site to maintain, feature and content wise. You don’t end up having an out-dated mobile site, just because you didn’t have time to apply that “new feature” on the mobile site as well. One site, one love. Peace.
  • Similar user experience on all devices. Users don’t need to re-educate themselves on using your site when they access it on a mobile device. Branding is kept intact and the user gets this feeling of continuity and consistency across all devices.
  • A/B testing. You can easily set up A/B tests or Experiments, since it is exactly the same codebase for mobile and desktop.
  • Reporting/Analytics. It is up to you to get either the sum of any analytics metrics for your mobile or desktop visitors or split it, based on screen resolution or any other criteria.
  • SEO, Google recommends it, and we trust Google. It makes web crawling easier for Google, and your site stands a better chance to get ranked higher.
  • One link to share, link, interact with. Any part of your site has one URL across all devices, making it really easy for users to share content, link to content and you don’t need to come up with some mobile to desktop URL mapping implementation.

Cons

  • Effort. Yes, setting up a responsive site is not an easy task, but thankfully, there are some frameworks that can help you with this, for example Twitter Bootstrap. Changing an existing site to a responsive site is even more of a big task, definitely feasible, but time consuming.
  • Performance. A responsive site will normally load everything that the desktop site would load. Of course, there are ways around this. Mobile devices are not as powerful as desktop computers or laptops, so this can be an issue. Add to this that mobile internet connections are slower than our internet connection at home and you might end up with some frustrated users leaving your site before they give it a chance. We all know how important performance is, and especially in case of e-commerce sites, this translates to revenue loss.
  • I could not (or maybe I didn’t want to find any more disadvantages of RWD, anything to add?)

Mobile Site (m.example.com)

Build a site that will be rendered in case the user visits example.com via a mobile device. This is a separate site, new code base, that of course might re-use some of the backend services or even share the same CMS with your main site. This is completely up to you and the way you will implement it. In some cases, developers tend to strip features off the desktop site, to create a less cluttered environment. This is tricky… In some cases, if there is a need to start chopping features or reducing steps (i.e. checkout) maybe it is time this happened on the desktop site as well. After all, it is the same users, and it might well be the case that some features should be removed from the desktop site as well. Moreover, it can get really frustrating, when you realize that some features can’t be reached via your mobile. You add an additional level of complexity, by having to remember all the things that have been excluded from the site. So, in many cases, the task that should take place before building a mobile site, is actually revisit the desktop site and get rid of all the extra “fat”.

mw

Pros

  • Fully customized user experience. Since we are talking about a different site, different code base, sky’s the limit. You can provide your users with a totally new user experience, tailored for small screens. This could make sense especially in case of e-commerce sites.
  • App look and feel. Yes, you can make your mobile site look and behave similar to a mobile app.
  • Less effort. It is generally an easier task to create a mobile site than switch an existing site to RWD. But of course, eventually, you end up with two sites to maintain, and keep synced with each other.
  • Performance. Loading less resources can significantly increase the performance of your site and drop loading time, which means, more happy mobile users.

Cons

  • Flexibility. As mentioned above, with two sites to maintain, making a decision to add a new feature means that you have to consider how this feature or any kind of change can fit or reflect to the mobile site. And of course, in many cases (been there, done that), you make the decision that you will leave the mobile site as is. Little by little, you end up with a mobile site/time machine, stuck in last year’s desktop site.
  • Redirection. The same pages, from a business point of view, for example a product page, have actually different URL’s, which means that you have to come up with some URL’s mapping logic, when switching from mobile to desktop and vice versa. Also, you are responsible for checking via what kind of devices your users access your site, so that you redirect them to the right version, mobile or desktop.
  • Sharing. As the URL is not the same, sharing a page becomes more tricky.
  • SEO. Google recommends that your site is responsive, who am I to disagree?

Conclusion

Let’s just make one thing clear, there is no perfect solution, or a solution that works in all cases. And of course, there is bad implementation of RWD or extra-ordinary implementation of a mobile site… At the end of the day, it all boils down to what the timeframe for the project and the available resources are. For example, if you have a live, non-responsive site, it might be more difficult to change it, or your team might be specialized in building mobile sites, instead of using RWD. It would be really interesting to hear what you have to say and share your experience with either of the two approaches.

Advertisements