Responsive Web Design
Responsive website design is the name for a single website which works on desktop, tablet and smartphone devices. Simply put, if your website isn’t responsive, you’re missing out!
But what is responsive web design anyway?
Essentially “responsive website 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. This can make a huge difference to website engagement as many businesses have a high percentage of users on smartphones. In this instance, fast load time, effective design and logical navigation are absolutely crucial.
Tell me more, how does this work?
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 website design
Imagine 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
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 are possible which means a smaller cost compared to having your entire website made from scratch.
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.