What is a responsive website?

The role and idea of responsive design was discussed and described at the World Wide Web Consortium (W3C) in July 2008 under the title “One Web”.

This recommendation, although specific to mobile devices, emphasises that it is made in the context of One Web. It therefore includes not only the browsing experience on mobile devices, but also on devices with higher screen resolution such as the desktop.

The One Web concept refers to the idea of achieving a “Web for All” accessible from any type of device (Web on Everything).

Today, due to the multitude of devices on the market, information is not accessible on all of them. Or rather, it is accessible, but the content is not displayed properly, so the user may get information partially or not at all.

Since then, it has taken about 4 years for people to recognize the need for this technology, and once it started, it was unstoppable.

A responsive website is the type of website that will adapt its content to any screen size, from smartphones and tablets to laptops, desktops and very large screens. A few years ago, whenever someone tried to view content on a non-responsive website, that person would have had a lot of trouble trying to understand what they were looking for on that page. The content would overlap, the text would be too large for the device (especially between 2012 – 2014), therefore customers would get frustrated and exit the site within seconds. According to Google Analytics, the bounce rate of a website dropped from 80% for a non-responsive website, to 50% for the same website, but created modern fluid design technologies.

How does the responsive website concept work?

There are several technologies that a developer can use to make your website responsive.

The responsiveness of your website is usually determined by the CSS code that has been written into your website files. CSS controls everything and if your code is done properly, then you won’t have any problems presenting your site to your customers. In CSS, responsiveness is controlled by Media Queries or @media.

Another option would be to integrate your site with a responsive CSS framework such as Bootstrap. Bootstrap is an amazing framework developed by Twitter. It manages more than 10 million sites around the world and has seen tremendous growth over the past 8 years. Bootstrap uses a few predefined classes that will create the actual layout of your web page. Bootstrap’s structure is based on sections or rows.

Each row is divided into 12 columns that you can adjust or adapt according to your needs. Content can easily be placed in any of the 12 columns. You can also have a column of 6, 4, 3, 2 or 1. Bootstrap is cool and we strongly recommend it for almost any responsive website project. We’ve seen low-volume sites built on Bootstrap, but also enterprise software using the same technology.

Advantages and disadvantages of using responsiveness on your website

We originally wanted to call this topic “Advantages of using responsive on your website”, but decided to try to discuss the disadvantages of this technology as well. So, let’s start…

Advantages

The main advantage of using a responsive website is that you will finally have your content displayed correctly on all screen sizes. This can easily translate into:

• Increased sales
• Increased leads
• Increased traffic
• A better perception of your business
• The image of a modern company using state-of-the-art technology

Disadvantages

The main disadvantage would be that a responsive design (responsive website) requires coding work. This means that you will have to hire a developer to do this for you. However, this is a small to medium investment, with a 100% return on investment within 3 to 6 months.

Another small issue would be code changes. Whenever you have to change something on your site, it has to be done on different screen sizes. So you would have to make changes on smartphones, tablets, desktops and very large screen sizes.

The last disadvantage is the complexity of the CSS code. As any developer knows, you can write code and you can write good code. If you go beyond your code, you will always get amazing results. However, if you lack tech skills you can cause serious problems with your website or your client’s website. So be very careful when working with responsive CSS.

Also, keep in mind that you need to have a well-defined vision of the site, what to use on desktops and large screen sizes or of course what to hide on certain devices.