Responsive Web Design and How it’s Changing the Web You Know

Responsive Web Design and How it’s Changing the Web You Know

When someone visits your website, chances are they are not viewing it the exact way you imagined they would. If users visit your site and they cannot use it easily (or at all), you may have lost your one and only shot at capturing that client. As mobile web browsing statistics continue to sky rocket the question becomes: "How do I make my website visible to the thousands of different devices out there today?" There are many solutions to this problem and we at Skuba have used all of them over our 12 year history. While there are benefits and drawbacks to each, there is now a clear road that we find to be the best solution in 99% of cases.

Early in web history came the browser wars where sites needed to be tested in IE7, IE8, IE9, Firefox, Chrome, Safari. While this is still true, most good web developers have found a set of tools and techniques they use to combat these potential issues. But just when you thought web design was safe, along came mobile browsing. And it came on stronger than anyone predicted.

Between January 2009 and July 2012 mobile usage jumped from .06% to nearly 12% and continues to rise exponentially every month. With currently 1 in 10 people visiting you from a mobile device, how can you afford to not make your website visible to these users? This month mobile browsing in India passed desktop browsing as the number one way to access the web. A new report released by the IDC predicts that mobile browsing will surpass desktop browsing globally by 2015. With hundreds of new devices entering the market every year what is the best way to make your website available to this ever growing client base?

Initially the answer to mobile browsing was thought to be a mobile specific website that is a separate from the main site. While in some instances this is a good solution, it is almost always the wrong route to take. Unless you are leveraging mobile specific technologies (like geolocation, ringtones, or built-in camera) then there is usually no need to build a completely separate website that induces significant extra costs from development to post-launch.

Another major problem with redirecting users to a mobile specific site is that the techniques used to detect what device users are on is flawed from the start. The technique known as Browser Sniffing (also called Device Detection) examines the User Agent string and then matches that to a database of known devices. If the visiting device is listed in the database, users are sent to a mobile version of the site. The problem with this is immediately apparently: what if the user is on a new (or obscure) device that has yet to be entered in the database? You could default redirect to a mobile site and check desktop User Agent strings (which we did use in the past), however this does not resolve the other afore mentioned issue of costs with mobile specific sites.

The most important problem with mobile targeting and redirection is that devices vary in size dramatically across the mobile spectrum. As the popularity of tablets continue to increase a whole new set of issues is created. What if there was a way to serve a single website to all of these devices at a fraction of the cost of creating a mobile specific website or mobile app?

Enter our story's hero: Responsive Web Design. Essentially responsive design is a CSS3 technique that leverages Media Queries to create adjustable layouts targeted to the screen size of a device. This means that content can be shifted or removed entirely to make the most important information easily accessible and prioritized. A great quick summary of responsive web design can be found here: What the heck is responsive web design?

The last step is to make sure that you are not loading huge images, unused files, or excess data that cannot even be viewed by mobile users. It is absolutely vital to not simply use responsive design out of the box, but rather to team it with a mobile-first approach. This powerful technique is also known as progressive enhancement and means that you serve the mobile site first and then load in other elements and features as needed. This will speed load times for users, reduce bandwidth usage, and even make the site run faster on less powerful devices.

The result is a website that has the speed of a mobile specific site, the ability to cater to every device size, and the ease of updating just one single website. We at Skuba are experts in mobile-first responsive web development. Contact us today to work on your next website.