Responsive web design, an oxymoron for sadists

With the event of HTML5, the charge of responsive website design is one that many people feel unable to resist. But what is responsive website design and for many people why is it so elusive?

Simply put responsive web design is using CSS code to make the best use of the browser being used to view the website.

Ironically most HTML tags start their life as being responsive and it’s just the styling of these tags which can cause websites not to be responsive.

As with all rules there are a couple of expectations, in in the case of HTML In-line frames and some forms element, which by default used a fixed width and therefore need CSS and more advanced coding to become responsive.

So why so many sites on the web are not responsive?

In short it is easier to code a site which is not responsive.  With non-responsive sites they only need to be designed with one view point in mind. As soon as you have to come up with a design which needs to look good on Phone, tablet and desktop, the wheels come off of the normal design process.

In addition, with the need for SEO/ SERPs, people are often left in a spin wondering what they should do next.

So what’s the solution?

If your audience is never going to view your website on a mobile phone or tablet, then it may be that you don’t need to worry about responsive web design, but you should also consider search engines like Google are starting to look at sites which are not responsive as potentially less worthy websites.

Up until recent times, web designers would be able to produce pixel perfect wire-frames and visuals of what your new website would look like. With responsive web design, because we don’t know exactly the width of the device viewing our website, we need to think in terms of fluid width containers which contain content which re-flow to make the best use of the space available. With images we can get them to proportionally reduce, but for most text, as the container gets smaller the text drop gets deeper. In short this can provide problems for layouts where graphics and images need to line up.

On some formats the area is tiny, it’s vital to have the Call to actions as close to the top of the page as possible. We can’t assume any user will scroll down a massive amount to see your message.

Layouts should be kept clean and simple, with phone areas being so small, it’s easy for poorly designed websites not to work well. By removing everything that is not necessary, not only do we have a website optimised for mobile, but we have a website which effectively communicate with the audience and is also quick to load.

Semantic Web is finally embraced in HTML5, it is simply the idea that we can give intelligence and extra meaning to layout. This not only help the designer to construct websites well, but also will begin to allow search engines to better understand your webpages, which may in future help to improve your rank.

What’s the downside?

Often with a disruptive technology there are winners and looser and in the case of HTML5, with elements becoming more uniform, this will mean websites (at least in the short term) will start to look very similar. While for some designers this will cause issues, it will allow web site owners to put the focus on the content, which of course should be the point of any website.