Responsive Web Design

Responsive web design is the latest and greatest trend on the internet. Simply put, if your website isn’t responsive, you’re missing out!

But what is responsive web design anyway?

Essentially “responsive web design” is the process of building a website in such a way that it works across multiple devices. There are three main device groups which we currently design for: desktop, tablet and mobile. The idea is to code a single website which is capable of adjusting its layout, font sizes, navigation and various other key elements, depending on what screen size is available.

Tell me more, how does this work?

Browsing A Responsive Website

One website for multiple devices and screen sizes

You may remember when mobile internet usage started to become a reality. 3G was launched and data started to become affordable for the public. Around this time web designers started building smaller versions of larger websites on a separate domain, commonly something like “m.domain.com”. This allowed web designers and developers to serve different content to mobile users, giving a better mobile experience compared to the regular desktop site. For the most part this strategy has now been superseded by responsive web design.

Typically a responsive website is coded to work on one main platform and then adjusted to work on the remaining two platforms. There’s some debate over which platform takes the initial priority, some saying desktop remains number one, whilst others choose to work “mobile first”. I prefer to look at each project and see what fits best – you need to look at your Google Analytics data to see what percentage of users visit you from which devices (you do have Google Analytics set up – right??). With this data you can work out what main devices are used to view your website and build to accommodate this.

When a user views a website which is responsive, the code that controls the display of the website can query (ask) the browser for it’s dimensions. The website can then adjust it’s layout to suit, which is where the real power of responsive web design lays.

An example of responsive web design

Responsive Design WorkflowImagine a three column layout on a website. It works for the desktop because we have ample space, but it gets cramped on a tablet. By time we get to a smartphone-sized display we have to pinch and zoom to view the content. It’s tedious. Users get irritated and hit the back button. If only the website was responsive!

With responsive code, the user would be served a three column layout on their desktop/laptop. When viewing on a tablet, such as an Apple iPad, they would see the same content arranged in either a two or three column layout, depending on which is more suitable. When viewing the site on a smartphone, they would see the same content arranged in a single column.

In reality responsive web design is much more complicated when done with proper attention to detail. A good front-end web designer/developer will consider issues such as;

  • How the navigation works with a touch screen
  • Are the buttons big enough for large thumbs, and well spaced
  • The speed of the website
  • The resolution of images and icons – do they look good on multiple devices
  • The logical order of content

Do I need a responsive website?

It’s highly likely you will benefit from responsive web design, unless you work in an industry sector where people only use ancient desktop computers. Here are some facts to consider;

  • When replacing an old laptop, a good percentage of the public choose a tablet instead of a new laptop
  • In some industries over 50% of all web traffic is mobile, overtaking desktop usage
  • Google themselves actually recommend responsive web design. This influences your search engine ranking
  • The mobile web is a fast growing market and desktop usage is declining. Even if you don’t have a large percentage of mobile customers now, it’s a good idea to have your website ready

How much does responsive web design cost?

The cost depends on two factors: 1) whether or not this is done at the time of build or as an add on 2) how complex the website is.

I’ve done a few responsive conversions that have taken less than two days work, but it’s always a smoother process if you opt for responsive web design with a brand new website build. That way it’s build into the website properly.

Conversions

If you have an existing website which isn’t responsive, but you would like it to be, please contact me so we can discuss what would need modifying. Conversions start at £280.00.

A brand new website

Sometimes it really is easy and cheaper to start again with new code. Almost everything I make is responsive and so I’ve developed my own framework of reliable code to work with. Visit the pricing page for more information on new website builds including responsive design.

Request more information on responsive web design