Website Design for Birchwood Town Council
Warrington, Cheshire
Birchwood Town Council approached us to ask if we would redevelop their old website which was looking rather dated and did not display content very well on mobile devices.
This case study outlines our approach to creating a website design to meet the council's needs, including compliance with WCAG Accessibility Guidelines at Level AA.
In the UK it is a legal requirement that websites run by public sector organisations comply with Web Content Accessibility Guidelines (WCAG) 2.2 at Level AA.
Read more: Understanding the accessibility requirements for public sector bodies.
If your website is affected then we can help.
Our Approach
When the council asked us to create a Responsive Website Design we first of all installed the latest available release of Joomla! CMS on a server with restricted access (limited to the council 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 council's needs.
Finally, we created a customised version of our WYNCHCO Template, incorporating the design elements described in this case study, to project the council's website and brand across the widest possible range of devices (phones, tablets and PCs) and screen sizes.
Our aim: to create a responsive website design that is accessible to the widest possible audience.
In our view a Responsive Website Design is one which:
- looks great across a wide range of devices regardless of screen size,
- is accessible to the widest possible audience,
- enables you to quickly and easily change website content, branding and appearance.
A WYNCHCO Template Design comprises:
- three Style Sheets,
- dozens of Custom Styles organised into groups,
- each of which can be changed in an instant via the website Dashboard,
putting control of your website's Look & Feel at your finger tips.
Some choices made by Birchwood Town Council
The council chose to display a solid colour as the background to their website.
They could have chosen to display a repeated gradient pattern across the width of the screen.
Or one large image.
They still can whenever they wish, simply by:
- uploading an image, and
- toggling a couple of buttons in the Template Styles screen of their website's control panel.
To change background colour is even easier: simply select a different colour from the palette provided.
The council made the following choices:
- not to change the default Text Size and Letter Spacing,
- to insert 10 PX padding above the Container, and
- to add rounded corners.
The council can adjust 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:
- square the container corners and remove the top padding, or
- increase text size and letter spacing.
The Main Body is where all Articles are displayed.
The council opted to display Article Details below each article in their website.
But not to separate these from the Article with a horizontal line.
Should they in future decide otherwise they can toggle a button in the Template Styles screen of their website's control panel to make the change.
The council wanted a full width Site Banner to be displayed at the top of their website.
We created the image shown above for display on PCs and Tablets (landscape) when more screen width is available.
And a truncated version for display on Phones and Tablets (portrait) where screen width is much narrower.
The council could have instead chosen to display a Site Title on small screen devices.
And they still can, if they toggle the relevant button in the Template Styles screen of their website's control panel.
They might also choose to display a Strapline.
As requested we linked the website's Brand to the Home Page, but the council can quickly change this anytime they choose.
For example, link the Site Banner or Site Title to the Contact Us page.
The council followed our recommendation to display a Copyright Statement at the bottom of their website.
The date can be changed via the Template Styles screen.
WYNCHCO website designs include a number of self-hosted Google Font Family Style Sets.
More can be added upon request, and you can even add your own, choosing from more than 800 fonts listed in the Google Fonts Directory.
The council liked the Open Sans font.
It is a versatile multi-purpose font and so we assigned the font to:
- Branding text,
- Heading text, and
- Button & Menu Link text
as well as Body text.
The council may at any time separately change the font assigned to any one of the above text elements.
We make this possible via the Template Styles screen of the website's control panel.
We also show how to upload additional Google Fonts in our JOOMLERS.UK user guide.
The council wanted a Fixed Width website display.
Their website sits in the middle of very large screens but fills the width of smaller screen devices.
If in future they change their mind they can toggle a button in the Template Styles screen of their website's control panel.
They might for example want to change to a Full Width display (when the website will fill the width of even the largest screens).
WYNCHCO website designs include Image Style Sets to enable you to quickly style any one image when editing an Article.
For example, you might want to display a colour image:
- in greyscale or sepia, or
- display it as a polaroid photograph,
- or change its corner rounding.
But we also make it possible for you to change Corner Rounding globally (i.e. for ALL images in your website).
How? By toggling a button in the Template Styles screen of the website's control panel.
The council chose to initially display all images in their website with rounded corners. See example.
We recommend the Main Menu be displayed in one of several Navbar positions included with a WYNCHCO website design.
The image below shows the Main Menu as it is displayed on PCs and Tablets (landscape).
Note the rounded corners of the Navbar, chosen by the council to tie in with the rounded corners of the Site Banner.
Sub-menu links are displayed as a drop-down list when a parent menu link is selected.
Optional Extras
The Joomla! CMS is available 'off the shelf' from The Joomla! Project, and when correctly installed, works 'out of the box'.
WYNCHCO website designs are not supplied 'off the shelf'.
Each one is created in response to the specific needs of the customer.
The council requested we include the following additional features when we created their website design.
The council asked us to install and configure a Cookie Bar Module for use with their website.
Reason: to comply with UK General Data Protection Regulations (GDPR).
The council were keen to showcase their local area.
They asked us to install and configure a Slideshow Module for display at the top of the Home Page on large screen devices.
We sourced a 3rd party extension and configured it to display five images in rotation.
An image caption was selected and the images were linked to the Latest News article.
Ken Edwards - Website Designer
Ken has more than 10 years experience creating Joomla! website designs, including for public sector organisations, in Warrington, Cheshire, Greater Manchester, Merseyside and North West England.
For Personal Joomla! CMS Support
Call Customer Support on 0161 818 8228Call Customer Support on 0161 818 8228
We offer Joomla! CMS website design and support services to businesses, schools, public sector and third sector organisations across Cheshire, Manchester, Merseyside, and the North West from our office in Warrington.
If you are based in the UK but outside the North West, we can still help.