Tim Whitacre

Software Synthwave Scotch

Responsive Design Question

First off…. if you are unfamiliar with the term “responsive web design” (RWD) check out A List Apart's article on responsive web design.

Now that that's out of the way. I'd like to take a look at a recent issue brought up by a client I was working with. In building out their website with fluid grids and RWD, we came across a small issue. That issue was that when a visitor of the website was using a tablet, phone or any smaller-dimension browsing device, there was no way for them to get back to a full site view.

This may sound a little strange, but it got me thinking. Remember when mobile versions of a website because really popular? Remember when jQuery mobile came out? Both of these solutions came about because we wanted an easy way to present our websites to clients on smaller devices, especially phones. While iPhones and Android browsers are great, sometimes you want a smaller version of the website to quickly navigate around and get the information you came seeking. Unfortunately not everyone has the money or really even needs a full blown native mobile app, but pretty much everyone these days should consider some sort of mobile solution. This is what spawned the mobile version of websites and ultimately the need for responsive design. Shortly after the creation of mobile version websites, developers needed a way to give the visitor the ability to go back to the “desktop version” of a site while on their phones. This is because generally speaking, a mobile version of a website is quite a bit different than the desktop version. Usually there are less images and less interactive features. Mobile websites generally focus more on content than anything else. The idea is to give the reader a quick overview or snapshot of what your company does.

So, back to my original problem. When creating a website using RWD, does one need to include a way to go back to a desktop version? You see, a mobile version a lot of times sits on a subdomain like mobile.domain.com or m.domain.com. With RWD, there is no “other version” of the website but rather you use CSS3 media queries to determine how the content is portrayed to the visitor depending on the dimensions of their browsing window. Since it's not a separate version of the site, how and more importantly should you include a way to go back to a full desktop version.

When I first started using RWD over a year ago, I didn't ever consider this. I figured since we would still be showing the exact same site with just little bit less flair, the visitor didn't need a way to “go back”. Recently though, as many companies are embracing this technology, I find myself more and more frustrated that I can't view certain sites on my iPhone the way they were originally meant to be viewed. There is not way to go back. After having a brief discussion with this client I'm currently working with, they decided they did want a way to do this.

To not drag this on any further, I've decided that it's much better to just give the visitors the choice. How can this be handled? Well there are many ways to tackle this from a programming standpoint. The BEST way, in my opinion, is to take care of it using your server-side language and setting either a temporary cookie or using a session to create an ID on the body tag that will override all of the media queries and thus presenting the site in its original format. It's not a small task, but once you build it into the framework of your choice, it will be done.

I have yet to do this on my website, which currently utilizes RWD, but when I get time I'll post up the code example of how I did it in case you are wondering. In the meantime, feel post a comment below or share your thoughts.