Upgrading to Responsive Web Design

The speed at which mobile devices are becoming the norm for viewing online content is a little startling. It seems that almost overnight, beautifully designed sites have become clunky and hard to navigate on a mobile phone. Features that were taken for granted, such as hovering your mouse over a navigation bar to open a augment have no equivalent mechanism for touch activated smartphone screens. And the predictions for the coming year are that desktop versions of websites will become even less relevant. So now your developer/spouse/nephew/friend is telling you that you have to upgrade your website to be responsive.

Okay, so what’s that going to cost me?

Render:

To interpret and convert the code of a web page into its final visual format.

Years ago, when Internet Explorer and Firefox were the powerhouses of the browser universe, designers and developers had to take into account all of the quirks that made a web page render one way or another. Often it meant entirely different stylesheets for each browser, and then different stylesheets for each version of the browser, for backwards compatibility. This was all before auto-updates became commonplace.

It was nice that we had managed to get away from that craziness once technology equalized and Google Chrome hit its stride. Now, with the saturation of connected mobile devices, once again developers are being asked to make sure that their customers’ sites render properly by coding for different instances of screen sizes.

LESS and SCSS. Finally.

Cascading Style Sheets have been around for about 20 years. It’s always been a static language, meaning,a developer couldn’t write conditions, variables or loops into CSS to account for different scenarios. In the last several years however, two different CSS preprocessors have gained widespread support. Not only does it allow for conditions, but it compiles different versions for different screen sizes, which means that less code is being sent, making your web pages load more quickly and efficiently.. Yay!

Responsive as a Separate Template

You can convert your website to a responsive layout by instructing your website to serve up a different template depending on the type of browser requesting the page. If a mobile browser is detected, the mobile template will be rendered, and a desktop browser will receive the desktop version. The advantage is the many mobile templates are ready out of the box, so you can convert your website to a responsive format quickly, especially if you don’t have too much customization. Another advantage is that you can try it out relatively quickly and inexpensively. The disadvantage is that you have to maintain two separate template designs, which could create complications down the road.

Responsive as Your Current Template

The ‘real’ responsive experience is when your website accommodates any browser version, and adapts its look and feel accordingly. Elements that don’t render well are hidden, containers that are side by side become stacked, and probably most importantly, fonts are visible at a normal size. Other features include images that size to the screen resolution and decluttering the site making use of slideout menus and other finger gestures.

The Cost of Upgrading to Responsive Design

As always, it depends. If your site was coded by someone who knows what they’re doing *ahem*, then converting to responsive design should go quickly and cost less than if your website design hasn’t changed in ten years and it was knocked together by someone who has long since moved on to other things. While it’s certainly less expensive to implement a WordPress plugin to do the job (I used WordPress Mobile Pack by appticles.com until I switch to a full responsive theme), your user’s experience will certainly be better if you present them with familiar elements no matter how they view your site.

Leave a Reply

Your email address will not be published. Required fields are marked *