Blog
Read the Latest News
Responsive Design websites - how they look on different devices
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):
This is on a normal monitor (no additional whitespace at sides):
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):
And this is on my HTC Android smartphone (note change to touch-screen dropdown menu button and text below image block):
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!
The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries. WebSolutionZ.com.au is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.