Responsive Design

The current hype in the web design world: Responsive Design. In the form of "Q & A's" we will try and answer some of the general questions that we ourselves came across and have been asked by users' of our responsive templates.

Do I have to change my website to cater for a responsive design ?

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 a re-think and by doing so going the responsive design approach.

The problems behind websites that are not self-contained or self-maintained is that it's probable that numerous web designers and or developers have had their sticky fingers all over the files.

Each new element tends to be added to the stylesheets without looking if something already exists, which in turn means clutter and excessive coding for nothing.

A rule of thumb (IMHO) - a site that isn't self-maintained (coding) and is older than 5, should be reviewed and possibly re-built or reverse engineered into a responsive design.

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 preconfigured 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.

Does responsive design cost the same as a normal design ?

From experience the answer is NO! 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 always 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.

If I want to work on the design myself will I need training ?

If you intend on modifying core elements such as JavaScript or CSS files then the answer would be yes, you will need training to modify the templates successfully.

There are caveats that need to be adhered to, such as modifying images, the use of tables and modifying media queries for the individual viewport sizes.

If you don't know exactly what you are doing, you will probably mess up the template or theme in such a way that it possibly won't render correctly in the browser, in some radical cases it may not render at all.

Is responsive design complicated ?

To tell you the truth, Yes. If you don't know your way around CSS and don't understand how media queries actually work, sorry, you most probably will get lost and start asking tons of questions, starting with How or Why.

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 free responsive templates was after a few trials and errors relatively easy, but understanding what was going on was more time consuming.

One of the reasons that we have written such an extensive amount about responsive design is simple, the more information, the more you read, the more you understand and learn.

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.

Responsive web design is relatively new, what considerations need to be taken ?

With all new technology some things have to be taken into consideration, responsive design is no different to others. As responsive design is now starting to walk properly and more & more people are starting to use this technology some aspects do need to be looked at.

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.

What is responsive design ?

Our definition of what we think responsive design is:

A preconfigured 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.
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.

Why are people so 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 we started out with fluid layouts, but as the mass took on fixed width and they 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.

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