To Respond, or not to Respond… That is the Question

responsive-design Posted in Best Practices for Web Design, Mobile Web Development, User Interface Development
Written by .

I remember a time not long ago when I had a Motorola Razr. Man, I loved that phone. It was compact and light, got great reception and just generally worked as a phone. However, it was a rare occasion that I would actually surf the web with it. The data rates were high on my existing plan, and let’s be honest – the websites looked terrible and took a LONG time to load. Why would I even bother?

A LOT has changed since then. I wouldn’t even consider buying a phone today that didn’t surf the web and come with a data plan, not to mention, I expect websites to load quickly and look great on it. I’m not alone. Website visitors, like their devices, have become much more sophisticated in the last few years and they have much higher expectations about the experiences they have on the websites they visit.

But where do we start? As a business owner with a website, it can be overwhelming to think about how that website performs on the plethora of devices out there. We’re not just talking about the difference between Firefox and Internet Explorer or Mac vs PC anymore. We’re talking about screen resolutions varying all the way from 320 wide to 2500+! (See screen size chart here) We’re also seeing the number of devices and browsers growing on a daily basis. And then there’s the question – do you build an app, do you build a completely separate mobile website, or do you go with a responsive design? Or maybe you have an infinitesimal amount of traffic coming to your website from mobile devices and tablets. Why even bother? Trust me, there is a benefit for you too – please read on.

Let’s start by looking at the pluses and minuses of the three mobile options mentioned above.

Apps

An app is a great idea if you have a specific function on your website that you want optimized for your users. For instance, you’re a hospital and you want patients to easily search for a physician. You could make an app that focuses on that feature. It’s downloaded to the user’s home screen and a quick click away from use.

However, this is just a small portion of what your whole website offers. And you wouldn’t build an app for your entire website. It would make for a big download, and users generally expect more from their apps.

When building an app, you also have to think about the different devices out there. A different version of the app needs to be made for Android, iOS, Windows, Blackberry etc. If you don’t have a team of developers that specializes in the different requirements for each of these, you’re looking at a costly and time consuming project. Not to mention, you won’t be able to submit the app to an app store with the click of a button. That process requires obtaining a developer account, submitting and then praying your app gets approved. To put it bluntly, it’s kind of a crapshoot.

A Separate Mobile Website

A mobile only website requires building a completely separate website in addition to your main desktop website. When a user on a mobile device or table visits your main website, they are served up with the mobile site instead; usually with its own special mobile url like m.weather.com.

This is a great way to ensure that the user is getting mobile optimized content and graphics. Instead of serving up that HUGE full screen background image, they get a small thumbnail. Instead of loading large JavaScript files that make for a cool dynamic experience on a desktop machine, while bogging things down on a phone, they just get the bare necessities.

There are a few negatives to think about with a separate mobile website though.

First is the the mobile specific URL. Say you visit the site on your phone, think it’s cool and want to share it with the world. Unfortunately, when you copy that URL and paste it on Facebook – it’s probably going to take everyone to the mobile site regardless of their device, even that desktop user with the large screen. Who wants to look at a tiny website on their desktop?

Second, how many times have you done a Google search for something on your phone, found the perfect result, clicked on it and been taken to the homepage of the mobile website that has nothing to do with the actual page you were looking for? There might be a link to the full website, but it’s unlikely it will take you to the page you were looking for in the first place. This is an annoying user experience and will probably turn your potential visitors away.

Third, you now have two web properties to maintain. If you don’t have a sophisticated back-end to manage the relationship between your desktop and mobile site, that means a change done to the desktop site will need to be made a second time to the mobile site. Who wants to do something twice?

So that leaves us with…

Responsive Web Design

The term Responsive Web Design was coined by Ethan Marcotte in an article for A List Apart in 2010. A site enhanced with responsive design will take your existing website and reconfigure it based on the device and/or screen resolution of the visitor. Navigation menus are consolidated, images are smaller, unnecessary elements are hidden from view, calls to action are displayed front and center, etc.

A responsive site lets you build ONE website that will target ALL of devices and screen sizes out there.

One argument against responsive web design, was that all of the content for the desktop site would need to be loaded on the mobile view. This is a valid concern. You don’t want that humongous full screen background image to load on a mobile device. The good news is that we can now use something called RESS (Responsive Server Side). This allows us to serve up assets that are optimized specifically for the mobile experience, whereby reducing page load time and bandwidth consumption drastically.

So maybe you’ve looked at your analytics and your website doesn’t get that much traffic from mobile devices and tablets. You can still benefit from responsive design! Let’s not forget that on desktop machines and laptops, the screen sizes can vary widely (see chart here). You may still have users with a laptop screen resolution of 1024 wide or less. You may have users on gigantic screens with a width of 2560. You don’t want to build your site for the lowest common denominator any more because the site will be a tiny dot for a user with the larger screen. With responsive design, you can build a site with much wider dimensions and it will reconfigure, removing the need for vertical scrolling on that small laptop.

So now you’re sold and you’re ready to implement responsive design on your website. Keep in mind that there is still a bit of leg work that needs to be done. If your site is outdated and using a table layout for instance, there will need to be updates to get the HTML markup to a place where it can become responsive. There are also some important design considerations to take into account – menu treatment, sidebar positioning etc.

Rest assured, Thirdwave has been through this process many times and we’re here to answer your questions and guide you through the process. Contact us today to learn more about how we can help you optimize your website’s desktop and mobile experience!

A sampling of responsive sites that Thirdwave has built: