What is “Responsive Web Design”?

Responsive Web Design, or RWD, is a relatively new concept in web design, first making an appearance in 2011. It was listed in the top 2 of Web Design Trends 2012 – so it’s a big deal in the web design world. But what is it, and what does it mean for your website?

Basically, RWD means a website ‘responds’ to the device it is being viewed on. Tablets, smartphones and other devices are becoming increasingly more popular than traditional desktops and laptops, meaning more and more people are viewing websites on these devices. While most devices will fit websites onto their screens, it’s often too small, especially on smartphones, and users are having to zoom in to read or view websites properly.

The solution to this problem is RWD. A website will be designed for large, desktop screens as normal, but in addition, the designer will develop a few more layouts for different screen sizes (ie. small screens, tablets and smart phones). Depending on what the user is viewing the website on, will determine which layout of the website is loaded.

A quick way to check if a site is responsive is to shrink your browser window – if the site ‘changes’ to adjust to the width, it’s responsive.

In the past, when phone’s first started becoming more popular with web browsing, two sites were designed. The normal site and a mobi site, but even mobi sites are limited to devices and a certain size. RWD can cover as many sizes as the developer wishes to accommodate.

We recently completed a responsive website - motorvaps.co.za. If you shrink your browser right down, you will get a preview of the layout on a smartphone. Here are some screenshots as well:

Responsive Web Design - Example of Desktop and Mobile

Desktop (left) vs Mobile/Smartphone (right)

Unfortunately, it is not an easy thing of just taking your existing website and making it Responsive. RWD needs to be kept in mind before the site is even designed, as RWD relies on sizes and percentages of the web page. If you have a website that is a year or more older, it’s likely it will need to be redeveloped if you want it to be Responsive.

If you want more info or are interested in getting your website developed for RWD, email me directly on lisa@casson.co.za and I’ll be happy to assist.

  • Bonita

    Nice! Although, this isn’t 100% responsive design.. Only the header area shrinks to support different sizes. The rest of the content only adapts between full screen size and a smaller mobile size. Inbetween sizing, such as a portrait view on the iPad, isn’t supported.

  • Lisa

    Yup you’re 100% correct. It responds to browsers and works perfectly on Android, but I didn’t quite perfect it for iPhone and iPad.