The concept is simple - making your website, application, or digital advertising, respond to being displayed on a small screen (like a smart phone) by altering its layout.
Buttons become larger and easier to touch, whilst other non-vital elements such as decorative images or illustrations are made smaller, or are hidden completely.
With the truly huge range of smart phones, tablets, phablets, laptops and desktop computers available, the implementation of this concept can sometimes be daunting; your website needs to work perfectly for as many screen shapes and sizes as possible, in landscape and portrait! Simply shrinking your website to fit won’t work - intelligent design decisions must be made to ensure a solid experience for users on any device.
Apps are no different. What works for your desktop computer, with it’s keyboard and mouse, will certainly need to change for your phone, with a small touchscreen as the sole form of input. Advertisements must adapt as well, if they are to grab attention in a space of dwindling real estate.
why (and how) to make sure your website is responsive
- There is an increasing trend of visitors browsing the website on a daily basis from mobile devices, rather than traditional computers. Many companies report seeing upwards of 50% of their traffic come from these devices, such as iPhone and Android handsets.
- Modern websites are often designed for mobile first. The layout is planned for use on a small screen, and then scaled up for larger displays, to avoid images and text ever becoming too crowded.
- Mobile devices often rely on touch for browsing, rather than a mouse. Buttons and links should always be large enough to tap with a finger, without difficult aiming.
- Websites loading for mobile will often rely on a slower Internet connection that full desktop sites. To improve loading times for users, measures should be taken to optimise the size of the images being loaded, the order that code resources are being loaded, and the number of resources the website relies on to function. Lots of files and images equals a longer wait for users, and patience can run out quickly.
- Although mobile browsing is relatively young (when compared to traditional desktop websites) a strong design ethos has already arisen around what constitutes a simple to use website for mobile. Elements such as the so-called ‘burger’ menu abound, and act as useful shorthand for communicating meaning to users subconsciously. Utilising these mobile design paradigms will improve user experience.