Responsive Web Design - "Q & A's"

Premium HTML5 Web Template
The best thing about the the latest 'trend' - Responsive Web Design - is that a website needs to be designed only once to be accessed with different devices and operating systems. It is even simpler than any mobile website or template, since the whole website is designed in a way which makes it suitable to adjust to any screen resolution.

The word "responsive", when used for the web design, means that the whole website is constructed in a way where it adjusts according to the resolution of the screen used by the visitor to the website. This design also works well with large websites that don't support Java Script.

In the form of "Q & A's" we will try and answer some of the general questions that we've come across and have been asked by clients about Responsive Web Design.

What is responsive design ?

Our definition of what we think responsive design is:
A pre-configured web design structured to interpret a website users' viewing device and provide the appropriate viewport layout without having to create multiple versions of one site for each individual devices viewport size.

Why do some people feel overwhelmed by responsive design ?

We don't think that its a case of being overwhelmed, it's more of a wow, someone has come up with something that has actually been around for a long time, but is now being focused on in such a way that people are now taking notice.

Fluid and elastic layouts have been around for quite some years, but the majority followed step and went fixed width - to tell you the truth, we did as well. Originally (long time ago) we did a lot of fluid layouts - but as fixed width became the norm, that's what clients wanted so that's what we did.

What's new are CSS3 Media Queries and the idea behind responsive images using CSS's "max-width" element (to mention only one), basically new technology has brought the advancement.

Do we really need a responsive website ?

This is really a question that all website owners should ask themselves, weigh up the pros' and cons' and then decide whether or not a responsive design could be beneficial.

There is always a second solution, in this case it would be a "Mobile Only Version" - a pre-configured stripped down version of the original web design.

We personally don't see the benefit in a mobile only version, not only does the user see a different version, but duplicating content in a SEO point of view is a no-go.

Is responsive design complicated ?

To tell you the truth, Yes.

As we started out with responsive designs it took us more time to understand what we had actually accomplished than what we were doing.

Sounds strange, eh. Basically, coding up the designs either for clients or our demo themes was after a few trials and errors relatively easy, but understanding what was going on was more time consuming.

As always - we have learned by doing and asking silly questions :-).

Does your website need to be changed for a responsive design ?

In most cases the answer must be YES! - It all depends on what kind of state your website is in, when it was built, what technology it uses, how it is coded. If it was built using frames or tables, I personally would suggest going the responsive design approach ASAP.

If more than one designer has been involved in the code maintenance of your website - It's also YES and ASAP. Many of us add new elements to the stylesheets without alwys looking if something already exists, which in turn means clutter and excessive coding.

A rule of thumb - any site that is older than 5 years, should be reviewed, re-built or reverse engineered into a responsive design.

Who benefits from a responsive design ?

Both the site owner and the end user benefit from a responsive design. The owner, due to one site fitting all devices, this means lower costs as only one design needs to be created and managed and not one for each device.

What most people don't take into consideration is that having one site means you are not duplicating content which in turn is a huge benefit when it comes to search engine optimisation. Even Google say that a responsive design is the way to go instead of multiple sites.

The end user benefits in multiple ways, firstly they are shown the same website as a desktop user, slightly modified in look but the same content. Zoom & Scroll is no longer a problem as the responsive device fits itself to the viewport.

Having a responsive design simply put, means your target audience can view your site when ever & wherever they are, be it on a train or in their living room, with a computer, smartphone or tablet.

Does responsive design cost the same as a normal design ?

A responsive design built from the ground up entails more thought, more time and more training / experience, which all in turn means more money. Going the reverse engineering route isn't much cheaper than a complete re-built as the time it takes to debug can be the same as creating new templates.

Nowadays the majority of sites use modular elements with templates. So creating new templates and modifying modules / blocks of code is in most cases quicker.

New technology means that browsers (including mobile device browsers) are not all fully compatible, take IE7 + 8 for example, they basically don't support HTML5 or CSS3 (they do support some aspects) which means workarounds need to be created for these browsers and some of the workarounds are not 100% fail safe.

Having to convert, re-build or reverse engineer old web designs can be a problem, it costs a lot of money and those responsible for the work need to be well trained and know exactly what they are doing, otherwise it can all backfire.

Is responsive design suitable for my website ?

This all depends on what kind of website you are running. If your site is heavily user orientated requiring extensive interaction, something like a social network, dating or chat site or you provide services via App's then it is probably not suited for responsive design.

A website that uses App's for mobile devices doesn't necessarily need to adapt the main website as the App's do the work of a responsive layout - the information is passed to the user via the App, so they don't need to see the website.

Another example is possibly a Photography portfolio - as the code being delivered to all devices is the same in a responsive design, a mobile device would have to load all of the images as well, meaning, large images are compressed visually but not compressed in file size.

Bandwidth is the critical point here, but again, there are workarounds for a portfolio site, you can create smaller images specific for mobile devices, but, the downfall here is, more work means more management = more money.

If you have a question that hasn't been answered here, feel free to Contact us and we will answer your question about responsive design and add it to the list above.