There’s never been a better time than to have a responsive website, here’s why!

The number of people browsing the internet on mobile devices has risen drastically in the last decade from only 6% to a whopping 54% at the time of writing. As smartphones become smarter, fewer and fewer people are opting to sit down in front of a PC or laptop and are reaching for their phones instead.

That being said, there is still a need for modern websites to provide a great desktop experience, and then there are all the devices in-between such as tablets and other mobile devices. How do we, as website developers combat this need for websites to be optimised for screen sizes ranging from the smallest of phones to the biggest of desktop monitors? The answer… responsive design!

So what is responsive design?

Simply put, a responsive website is a website that’s been designed and developed in a way that it’s considering the screen size of the device it’s being displayed on, and adapts accordingly. If designed correctly and with great attention to detail the website will look great regardless of the device the user is using.

Things we consider when designing mobile-friendly websites

Properly optimised media

Something to consider about the mobile web is that much of the time people that are using it are connected to 4G networks, which although faster than older technologies such as 3G still do not compare to being on a speedy home broadband connection. We as designers and front-end developers negotiate this by properly optimising aspects of the site, such as images and videos to make the file size as small as possible, while holding onto as much quality as possible. This results in better performance and a happier end user, which I’m sure you will agree is a win-win situation.

Media queries

A media query is quite simply an instruction that we as developers write for the browser to read. In its most basic form, it is a simple “if this then that” statement such as…

“IF the device width is less than 768px, do this, if it’s not, then do this.”

A well-made and truly optimised website will be coded with numerous media queries aimed at catching all use cases.

Designing  websites for thumbs

Another thing we consider when designing for mobile is the size of touch targets. Using a computer with a mouse or track-pad allows for much greater accuracy, whereas on mobile the user’s input device is their thumb. Elements that the user will interact with such as buttons, forms and navigation links should be made larger and easy to touch. We also pay great attention to the placement of these elements to ensure they are in easy reach without having to stretch too far!

Context and placement

Its also extremely important to ensure that key content is properly placed across all screen sizes. Things such as the company logo and phone numbers should be placed in a prime location, ideally “above the fold”, meaning it should be visible as soon as the page loads without having to scroll.

Content should also be contextual based on the screen size as well. As an example, a button reading “Call now” on mobile is perfectly fine as the device can make phone calls. On a desktop computer, this button should read “Call XXXXX XXX XXX” instead, as, in this scenario, the user is going to need to see the phone number and manually enter it into their phone.

User interactions and gestures

Considering the user experience it is also important to think about certain interactions and how they might differ from one screen size to the next. For example, swiping through a gallery of photographs on a mobile website is easy, and most people are familiar with this action. That being said, swiping on a laptop with a trackpad is extremely cumbersome and not user-friendly at all! In this kind of scenario previous and next buttons are certainly the way to go.

a website with a mobile menu that is vertical

Another example of this is website navigation. On desktops, where there is ample space, a menu can span horizontally and show links to separate pages of the website, when on a mobile website though there is limited horizontal space so spanning menus vertically is the option most people go for. The trouble with this though is that if a menu has more than a few links in it, you risk it taking up too much vertical space and the rest of the content gets pushed too far down the page. Its become industry standard in these situations to have a collapsable menu which is revealed by clicking the “hamburger” button.

Website animations

Animations also play a big part in many modern websites, from silky smooth sliders to parallax effects that reveal content as you scroll the page. These make nice additions to most websites, however, they can often hinder mobile performance, especially on lower-end phones. It’s always worth considering if these should be turned off on smaller screen sizes (unless absolutely necessary) to make for a better user experience.

There’s lots to consider, but lots to be gained from doing so…

As you can see, there are lots to consider when designing one website that will work on every possible screen size, but there is so much to be gained from doing so. Designing responsively actually speeds up the process as in the not-so-distant past, developers would make the same website twice for desktop and mobile. There’s also the added reassurance that regardless of the device your end-user (or potential client) is using, you’re website is going to look great!

Is your website responsive?

Not sure if your website is responsive? Google has a free tool you can use to see if it is mobile-friendly on their search console which only takes 60 seconds.

Click here to use the free tool.

Need a responsive website of your own?

We’ve been creating responsive websites for over a decade, why not take a look at some we have designed over on our portfolio?. If you’re interested in us creating a website for you then feel free to contact us and we can work together to create a responsive website for you and your clients.