Responsive Design websites - how they look on different devices
This post is to demonstrate how a website configured with a Responsive Design template changes appearance when viewed on different sized devices.
Here is a website we built in 2019. This is displayed on a widescreen PC monitor - note the amount of space on each side, and the position of the primary menu (click to enlarge):
This is on a laptop - note there is no additional whitespace at the sides, and the position of the menu:
And this is on an iPhone 11 Pro - note the change to a touch-screen dropdown menu (known as a hamburger menu), and all alignment has shifted "down" the page:
This demonstrates why configuration needs to be considered for all layouts, and changes need to be re-tested on all platforms to ensure ongoing usability. If there is too much information on a page, it becomes unusable for mobile visitors.
Click here for more information about Responsive Design.
Do you need a new or updated website for your small business or school? Contact WebSolutionZ today!