Your Website Should Be Responsive

Pin It

Responsive DisplaysResponsive Web Design (RWD) is the concept of having a website respond to conform to the screen size of the device on which it is being viewed. This is a very useful feature of modern web design that your website should definitely have.

The Explosion In Mobile Device Use

The need for websites to be designed with Responsive Design principles in mind came to prominence after the explosion in use of mobile devices in recent times. To date, several approaches to implementing RWD are in place after the initial implementation of the concept by Audi.Com in late 2001.

The amount of internet traffic from mobile devices now makes up more than 50% of total Internet traffic, according to Wikipedia. The explosion in mobile device use also means that there are various devices on the market with different screen sizes hitting the market and doing so at ever increasing rates. The challenge is to have all these devices display a website properly as the designer intended.

Before Responsive Design

Prior to Responsive Design arriving on the scene, website layouts were designed to be static without any built in fluid mechanisms. In order to view a website fully on such a website, if viewing on a mobile device, you had to scroll sideways and back and forth since the site would have primarily been designed for the desktop.

A solution to this problem at the time was for a website to be produced in two versions, in what were termed the desktop and mobile versions. Although you are unlikely to see this on modern websites, there are some websites that still run this  arrangement. The problem with this set up was that it produced the duplication of work in maintaining the two versions of the website as the changes on the website had to be done in two places.

How RWD Works

At its most fundamental implementation, Responsive Web Design relies on CSS media query rules and the fluid grid concept as long as using flexible images. Percentages that define relative sizes instead of absolute sizing are used to produce layouts that will fit into any current view-port and adjust dynamically.

Javascript may also be used to detect the type of device being used and provide progressive enhancement to appropriately size the website for the device screen upon which it is being viewed. Frameworks such as Bootstrap and JQuery are also in use to facilitate the implementation of RWD.

More Than Just Changing Screen Size

Responsive Web Design is responsible for much more that just adjusting the website to the screen size of the device on which it is viewed. RWD can be used to completely alter the website layout for optimum viewing on devices of various screen sizes.

Elements of the website can be made visible or invisible depending on screen size. Some features of a website may be made visible in different areas on a desktop than on a tablet for example. Elements may even have different characteristics, such as colour, all depending on the size of the screen of the device on which they are viewed.

How About Your Website

You may have a website or thinking about getting one. Either way, there are two solid reasons why your website should be responsive.  The first and most important reason is that you want to give the best experience for visitors to your website regardless of what screen size they are on. The second is that Google and other search engines think RWD is so important that your website gets a higher ranking on these search engine if it is responsive.

Pin It