BlogRead the Latest News

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 I built in 2013 using RocketTheme's Chapelco Joomla! 2.5x template. The layout is configured to a 9:3 ratio (ie. the sidebar space is 25% and the image 75%).

This is displayed on a widescreen PC monitor (note the amount of space on each side):

website pc widescreen


This is on a normal monitor (no additional whitespace at sides):

website pc normalscreen


This is on a 10" Android tablet (note smaller menu font, menu options closer together - there would be no room for an additional menu option - smaller image block and stretching down of side text):

website tablet


And this is on my HTC Android smartphone (note change to touch-screen dropdown menu button and text below image block):

website smartphone


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.

Do you need a new or updated website for your small business or school? Contact WebSolutionZ today!  

Want our Newsletter?

Latest Articles