Web Design Basics: Responsive Design


Responsive web design is all about creating a page which adapts instantly to the device that it is being viewed on; this could be the resizing or re-organising of items on a page for example. So in theory, a responsive design means you can adequately view and use the web page you’re looking at whether it’s on a large monitor, a laptop, tablet or smartphone.

Clearly it’s so important because of the rise of smartphones and other devices with fewer and fewer people accessing the internet through traditional desktop computers and laptops; screens are getting smaller and smaller. This is reflected in the likes of Google’s “mobile-first” policy whereby sites with mobile designs primarily will be given priority in the search results.

Some Practical Examples

Let’s say a traditional website that you are viewing via a desktop monitor has three columns; if you looked at the same site via a smartphone or tablet it might make your scroll horizontally because the screen you’re using is far smaller. Clearly this is a less than satisfactory user experience and this can also lead to the distortion of certain elements or elements being completely hidden. Throw into the mix that smartphones and tablets generally have both a portrait and landscape view and your site can end up in a real muddle!

If your site is responsive however, the smartphone/tablet version of your site might adjust to one column or two so the content looks as it should and is pleasurable rather than painful to view. Other alternatives are having the content stacked vertically or allowing the user to swipe over to view other columns. Images will automatically resize without becoming distorted or, worse, partially or completely cut off.

In short, the best responsive design is completely unnoticeable!

Other issues to consider


Desktop and some laptop devises will use a mouse to navigate whereas smartphones and tablets are generally touch screen. So different design considerations are needed for both.

Download speed

Fewer graphics are often used it your smartphone set up to minimise download speed and load up times. This needs careful consideration so only the most important images and large files remain (or are adjusted).

Small businesses need to switch

Small businesses need responsive web design due to the proliferation of smartphones and the growth of the “review industry”. When individuals or businesses want a service they will invariably reach for their smartphone and will also look to check out reviews and endorsements. This is why being responsive is critical to your business’ success.

Share this post with your friends

Share this post with your friends