What is Responsive Design and how can it improve your website?
What is Responsive Design?
The first mobile internet was introduce on Nokia phones in Finland way back in 1996. You may remember WAP (it was pretty rubbish) which gained limited popularity in the early 2000s and allowed access to predominantly text based web pages, often at extortionate prices. WAP quickly started to die off in the late 2000s as phones began to offer full access to the internet in the same way you could access it from a computer.
Since then the use of mobile devices to access the internet has grown dramatically, back in 2014 more people in the UK accessed the internet from their phone than from a desktop for the first time. As the use of the internet via mobile devices really started to take off many websites created dedicated mobile websites. These had reduced page sizes with less images and different layouts from the main website, this helped to make them easier to load and navigate on a phone. This was not an option followed by many smaller businesses as it effectively doubled the upkeep of having a web presence by having to run two different sites simultaneously.
However this is now no longer necessary, many modern phones have the processing power not dissimilar to a low end laptop and the distinction between phone, tablet and computer are becoming less distinct. This increase in the capcity of phones has allowed for the development of responsive design.
Why does this matter?
A 2019 survey showed that over 70% of people in the UK use their mobile phone to access the internet in some way. If you currently own a website then this is an important trend, most older sites were not built with mobile access in mind, but what is worse is that several of the popular modern website builders do not come with mobile friendly designs as standard. One of the main issues I come across when redesigning websites is that, quite simply, they just look terrible on a small screen.
So what does Responsive Design do?
It is no longer necessary to have a separate mobile website in order to reach people browsing the internet on a phone. Responsive design is a key part of any modern website, at the most basic level the code of the website determines what size of screen is being used to view the website and adjusts the content accordingly to make it fit. The real advantage is that you only have one website, with one set of code and one lot of content.
A good responsive design will also optimise the content for the viewer, this means that it will adjust the size and position of images and text on a page in order to make it easier to read on different devices. In addition it will limit the size of the files appropriately, sending smaller images to devices with smaller screens so that the pages will load faster. As most phones are normally connecting through a mobile network and have a finite amount of data this means that it saves your customers money as well as giving them a better experience!
Use the exciting No Lesser Panda Incredi-Respons-o-Sim to witness responsive design in action! Use the viewer to see what a site looks like on a desktop, tablet and mobile phone.
Why does it matter?
A website that is unreadable or looks messy is worse than not having a website at all. You wouldn’t run a shop or restaurant with broken windows and doors hanging off the hinges, so why would you allow your online shop front to look tatty? Speed is also essential. Most users will give up on a site if it doesn’t function within 6 seconds and half will give up in just 3 seconds. Despite this the average webpage currently takes 7 seconds to fully load, not only that but average load times are actually getting slower.
How can No Lesser Panda help?
So here is the pitch, No Lesser Panda offers optimised responsive design as standard across all web design projects. That includes:
- A fully responsive design that looks great on desktops phones and tablets.
- Optimised images images for faster load times.
- Light but effective coding.
- Guaranteed fast load times tested and proven with tools like PageSpeed.
Want to find out more? You can get in touch at [email protected]
This article is the first in the No Lesser Panda Explainer Series. The series aims to provide information about important web design topics to people from a non-technical background.