This post is to demonstrate how a Joomla! 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!