This post is to demonstrate how a website configured with a Responsive Design template automatically changes appearance when viewed on different sized devices.
Here is a website we built in 2019, displayed on a widescreen PC monitor. Note the amount of space on each side of the Services block, and the position of the primary menu (click to enlarge):
This is the same website displayed on a laptop, which has smaller screen real estate than a desktop. While the header image remains full-width, there’s no additional space on the sides of the Services block (click to enlarge):
And this is the same site on an iPhone 11 Pro. Note the navigation menu has changed to a touch-screen dropdown (known as a hamburger menu), and the Services block – which appears in four columns on larger screens – has shifted to a single column down the page (click to enlarge):
This demonstrates why layout configuration needs to be considered across all devices, and why changes should be re-tested on multiple platforms to ensure usability. If there’s too much information on a page, it can become too long and difficult to navigate for mobile visitors.
Click here for more information about responsive design.
Need a website that works on all devices? Get in touch.
