What is Responsive Web Design? Part 1: The Basics

Author: Gina
Rare Company

Avatar for Gina Grainger Windridge

Front End Web Developer, Social Media, Search Engine Optimisation

Connect via Google+ Profile

responsive web design

In a nutshell, responsive web design is a technique of creating one website that adapts or ‘responds’ to any viewing device, whether desktop, tablet or smartphone. As a quick example: this blog post is responsive – try re-sizing your browser window (or rotating your phone or tablet sideways).

Responsive Web Design: The Basics

‘Responsive web design’ was originally named and proposed as a design and development method by Ethan Marcotte in May 2010. The process has now gained widespread recognition as more or less, the only way we should be producing websites.

Here at Rare Company, we are generally early adopters of new technologies and started coding websites with this technique 18 months ago. In our view, a responsively designed website is now absolutely essential if you want to engage with the maximum number of visitors and future-proof your internet presence.

Old Style Websites v Responsive

If you were to view a non responsive website on your smart phone, the site would appear very small, the text would be unreadable and you will likely have to scroll or zoom to get the content you want.

On a responsive website, the layout will have changed dynamically from the desktop version down to the mobile version to accommodate the screen size, resolution, bandwidth and scripting abilities. The menu may have become a drop-down one, but the text will be fully readable and there would be no zooming required. This would ensure that no matter which device your user is on, they can use your website with ease.

Of course with all of this adaptation comes a little more coding than an older style website, but at a cost and admin saving compared with the second mobile website or mobile App route that have been tried in the past.

How Does it Work?

Technically speaking, responsive web design uses a combination of CSS (cascading style sheets), media queries, HTML and various scripts to handle text, images and any other responsive related functionality. The coding solutions vary depending on the layout and complexity of the site’s design or functionality.

Responsive Layouts

There are several different types of responsive structures that we can create depending on website content and client needs. Two examples are:

1. The simplest responsive structure: Fluid One Column

responsive web design type as fluid one column

This has one singular column on all pages for all content. As the site loads into different browser or device widths, the pages adjust to fit with content flowing further down each page. We use this structure at Rare Company for simpler responsive website projects, although with additional advanced features, this structure can have a strong and effective visual impact as more complex responsive website structures.

Because of the increased page length on smaller devices, a number of techniques can be used to aid navigation and reduce load times without lessening the overall impact on smartphones and touch devices.

2. A more complex responsive structure: Column Drop

image showing responsive web design as column drop type

This type of responsive website is structured in modular blocks which are all visible on desktop screens, but gradually move underneath each other dynamically as viewing screen widths get smaller. This type allows for a more tightly controlled presentation of content to emphasise an order of priority on each page. Often content placed in side blocks might be secondary navigation, extra highlights, promotions or ‘widgets’, whilst the central main block carries the priority page content.

For those wanting to learn more, we will be going into more detail about layout approaches and structures in future posts. Eager apprentice web developers can visit Luke W‘s great blog site now for more responsive design approaches.

Why is it a Good Idea Again?

Responsive web design is proven to improve usability on your website. Weather you have an online shop, a service or an events-based website, 50% of internet users now access the web through their smart phone or tablet. This means that websites need to be easier to use on  smaller screens, without loosing effectiveness. For some more great statistics about 2013’s mobile and tablet internet usage see this fact-filled infographic.

You may be thinking of building a mobile app instead, but the cost could be substantial – especially when there are so many different types of app stores, phones and tablets to adhere to. Instead, a website that fluidly works across all devices is more cost-effective.

What Does Responsive Web Design Cost?

Although there is more work involved initially compared to old style websites, we have evolved our own techniques of being able to provide responsive web design for all our clients. We can provide a simpler structure for those with more restricted budgets or can produce more advanced sites designed from scratch with custom functionality.

The cost of your website will depend on the number of pages you want, if you also want it to be content managed and any additional features needed. Whether you have an existing website that you want upgrading to work all all devices, or want to create a new site from scratch.

For an upgrade to responsive, we would access your current website ‘back-end’, from there we can adapt your content and re-design and code it responsively.

For a new site from scratch, we can start a new project working closely with you, and we will factor making it responsive into the cost.

See our cost structure for an idea of typical budgets needed for a Rare Company website. Or ask us for a detailed quotation.

Want to see more examples of our responsive web designs? Take a look at our past responsive web designs.