Back in 2014, St Margaret's CE Primary School asked if we would redevelop their current Joomla! website which was out of date and not mobile-friendly.
This case study outlines our approach to creating a website design to meet the school's needs.
Our Approach
When the school asked us to create a responsive (see note) website design we first of all installed the latest available release of Joomla! CMS on a server with restricted access (limited to the school and ourselves) to facilitate collaboration during the website design process.
We then customised the Joomla! CMS website's Content (categories, articles and modules) and Navigation Structure (menus and menu links) to meet the school's needs.
Finally, we created a custom WYNCHCO template design, incorporating the design elements described in this case study, to project the school's website and brand across the widest possible range of devices (phones, tablets and PCs) and screen sizes.
Our aim: to create a RESPONSIVE accessible website design.
What we mean by a RESPONSIVE website design is one that will look good on PCs, tablets and smartphones AND one that will respond to YOUR needs as well.
For example: your need to be able to change website branding OR the look & feel of website content.
A custom WYNCHCO template design incorporates:
many many combinations of styles, which we call STYLE SETS, and
a USER FRIENDLY INTERFACE
to enable YOU to make such changes with just a few simple mouse clicks or finger dabs (if you are using a touch screen device).
Some choices made by Simon Corrugating Machinery Ltd
The school may however change these settings any time they wish, simply by toggling a few buttons in the Template Styles screen of their website's control panel.
For example, they might in future choose to:
round the container corners and insert top padding, or
In a WYNCHCO website design we recommend that the Main Menu be displayed in a NAVBAR position, where it can be uniquely styled (see later).
There are other menus which can be displayed in a website. One is a Bottom Menu.
The Bottom Menu is useful for displaying a link to a website's Cookie Policy (recommended following the introduction of GDPR or General Data Protection Regulations).
For this reason, the school chose to display a Bottom Menu in their website.
But also, for user convenience, a menu in the Top Left position when viewed on PCs and Tablets (landscape) - see image.
The school opted to display vertical LIST Menus across their website.
WYNCHCO website designs enable two optional BOXES to be displayed in the NAVBAR.
One is a SEARCHBOX in the navbar-landscape-top position.
The school chose not to display the Main Menu in the above position and so the Searchbox remains hidden in their website.
One is however included ready for use if the school decide in future to move the Main Menu from its current position to the navbar-landscape-top position.
Another Box is a CALLBOX (see above image) which can be displayed in the Navbar on Phones and Tablets (portrait).
Reason: to display a Call to Action.
The school chose to display CONTACT US as their call to action, the text being linked to their website's contact page.
The school may in future replace the text with an image via the Template Styles screen of their website's control panel.
They could also change the link, for example, to one which will trigger a phone call to be made when dabbed on a mobile device.