Responsive Web Design - Demystifying Web

All you ever wanted to know but were afraid to ask about making websites work and look great on mobile devices.

Have you ever heard of ‘responsive web design’? Maybe you remember it has something to do with making your website working on smartphones or tablets, but you’re not entirely sure if you know what it means? It’s alright, I know how easy it is to get lost in this rapidly changing world of new technologies and internet hypes, new trends popping up every day.

Let me shed some light on this obscure term for you and make sure that even if you’re not tech-savvy, you won’t miss anything that might have an impact on your business and sales.

What is responsive design then?

So what is responsive web design? Let’s start with a little test. I bet the website your business most certainly works seamlessly on the standard desktop devices such as deskop PC or laptops.

However, if it was built longer than, let’s say, five years ago and you haven’t paid much attention to it ever since, it might be worth trying to open it on a smartphone or tablet.

See what happens?

If the layout is still the same and you need to zoom in and out, or even scroll horizontally to see the content of your website properly, your website most probably isn’t ready for mobile experience.

And here we come. The reason why the website behaves differently on a smaller screen lies in the technique that your web designer used when building your website.

Before the 2010s almost all websites were designed and built for a standardised size, a size that would fit the screen of practically one type of a device: the PC – 960px or 1024px screen width resolution. However, in the last few years the rise of mobile web browsing called for a change in web development technique: suddenly we needed to make the websites accessible also from mobile devices.

The solution? While there are a few ways how to make your website mobile-friendly, it’s exactly the responsive web design that is by far the best way to go: it allows your website to adapt seamlessly to any size of screen, be it the one of a desktop computer, laptop, a 10-inch tablet, a 7-inch tablet, a 4-inch smartphone screen or whatever comes next. A highly flexible and future proof solution.

How does responsive design work?

Imagine that the homepage of your current website – designed and built according to to the old school static layout – is divided in three columns. When a client or customer access the website on a regular PC screen, all looks well.

However, when they visit the website on a smaller screen (for example a smartphone), they will be forced to scroll horizontally to view all the three columns. Results: an unpleasant user experience and a frustrated potential customer. Nobody likes to be confused.

Responsive design, on the other hand, would enable the content on your homepage to automatically adjust to only two (but longer and easier to read) columns to fit the smaller screen of the device your customer is using.

Similarly, if you like showcasing your products or service on images, responsive design will resize them automatically instead of cutting them off and forcing the visitor to zoom in and scroll back and forth again and again. No content lost, no zooming needed and your website will still look good. Try to open this website on your mobile for to see the responsive design in action by yourself.

In addition, having multiple website views helps to serve more related, adjusted and targeted content for different devices. For example a user of a smartphone when visiting a website of a local restaurant would like to access contact details, opening hours or make a reservation as his or her priority – in most cases.

While a desktop PC user with a more stable and powerful internet connection could browse the same website in less goal oriented way because it’s much quicker and easier for him or her to navigate it back and forth.

It is worth mentioning that having your website pre-designed for multiple type of devices has more benefits than the already mentioned aesthetic and user experience ones. Responsive web design also helps your website perform a lot better in search results and ranking.

Since it allows you to keep a consistent URL for desktop and mobile, it is much easier for visitors of your website to share a link to your content. Sharing is easy. This consistent URL also makes it easier for Google’s link algorithms to list your website in the search results (after all, Google even identified responsive web design as its recommended way for those who aim for optimizing their search engine results on smaller-screen devices), so it also increases the chances that your website will pop up on a Google search. A win-win situation.

What does it mean for you?

Simply, having your website unprepared for a traffic coming from mobiles and tablets can cost you money by loosing customers or leads. The statistics show that mobile use is overtaking desktop and many companies have already shifted towards “mobile first, desktop second” strategy for their businesses. In case you haven’t focused on creating a seamless mobile experience for your customer yet, opting for responsive web design will be a great first step.For any questions or concerns, I am here to help you get started – get in touch!

Leave a comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that * marked fields are mandatory, comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keywords or a domain as your name, or else it will be deleted.

Let's have a personal and meaningful conversation instead. Thanks for dropping by!