What is a responsive website?
A responsive website refers to your sites ability to adapt to the user’s screen size, device and orientation to provide the best experience. This means that regardless of if you’re using a desktop or a mobile, the website will automatically recognise your screen size. This will then adapt to show you a version specifically designed for each device so the user is provided with the best possible experience.
What makes a site responsive?
A website becomes responsive through the use of Cascading Style Sheets or CSS for short, CSS is a rule based language that is responsible for providing your website with all of its styling. Within CSS, developers use responsive breakpoints, referred to as media queries. These ensure the correct layout is displayed for each screen size.
Can Touchscreens affect responsiveness?
When it comes to designing responsive websites, one thing that should always be considered is how the design might affect touch screens. A feature that works perfectly on desktop, might not deliver the same experience on mobile or other devices. The biggest difference with touchscreens is that the cursor is replaced by your fingertip, meaning that you need to make sure that links are big enough to be clicked easily.
Hover effects can also cause issues, these effects work great on desktop and have several benefits when used correctly however, they don’t always have the same impact when using touchscreens. Whilst using touchscreens you typically only touch the screen to either scroll or to click a link, this mean that any content hidden within a hover affect may be missed and could provide a broken experience.
Considering Load Times
When it comes to websites, load times are critical. Faster speeds provide better experience for customers and increases your rankings with google! Google aims for pages to load in under half a second meaning anything slower than that could begin to negatively impact your Google ranking.
Don’t panic, you’ll be relieved to know that most websites don’t meet Googles strict standards however, this provides an opportunity that should be seized with the potential to get ahead of your competitors. The general rule of thumb is that a page should take no longer than 3 seconds to load, which in website terms is an eternity! Statistics show that abandon rates for websites above 3 seconds are over 50% so staying below this really is essential and you should aim for your pages to load as quickly as possible.
Load speeds are important for all devices, but this goes double for mobiles! When users view your website with their mobile data, having larger images and videos could really slow down load times. In addition to this, you’re unnecessarily using up there monthly mobile data allowance, which is not a great user experience!
One way to avoid this is to optimize your images so that they’re the correct size, resolution and format for each device. For example, mobiles have a significantly smaller screen when compared to desktops so it makes sense to use smaller images for these. With CSS you can automatically load each optimised image depending on the screen size that it’s being viewed on. The same applies for videos or alternatively you may decide it’s more beneficial to remove these from mobile view entirely to allow for the fastest possible load times.