Today, we all use different devices to access the internet – be it a mobile, laptop or tablet websites need to adjust to the device they are being viewed on. This means that they must become responsive when loading up on different devices.
With the introduction of accessing the internet on your phone from pretty much anywhere, all website owners want their websites to be fully responsive on all devices. Device sizes and resolutions are changing all the time so keeping on top of responsiveness is key to any web design campaign.
“Responsive Web design is the approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation.” Smashing Magazine
It’s important to design for both landscape and portrait resolutions when covering responsiveness. Most devices can switch from portrait to landscape just by turning the device in the user’s hand.
How Does Responsive Web Design Work?
Responsive sites use what’s called fluid grids. All page elements are sized by proportion, rather than pixels. If you have three columns, you wouldn’t say exactly how wide each should be, but rather how wide they should be in relation to the other columns. Column one should take up half the page, column two should take up 30%, and column three should take up 20%, for instance.
Media such as images are also resized relatively. That way an image can stay within its column or relative design element.
Mobile web use has surpassed desktop in the UK, with more and more people using their mobile devices as their primary source, which is why it is vital for small business to make sure their websites are mobile responsive. It’s almost more important than designing a website for a laptop or desktop depending on your industry and audience.