Birchwood Town Council
Website Design for the Public Sector
Warrington, Cheshire
Birchwood Town Council approached us to ask if we would redevelop their existing 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.
These needs included compliance with Level AA of the WCAG 2.1 Accessibility Guidelines, a legal requirement for public sector organisations in the UK and EU.
Read more: Understanding new accessibility requirements for public sector bodies.
Our Approach
When the council 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 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 custom WYNCHCO template design, 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 accessible website design.
What we mean by a RESPONSIVE 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 Birchwood Town Council
BACKGROUND
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!
CONTAINER
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.
FOREGROUND
The council chose not to change the background colour of the HEADER which sits behind their website's BRAND, or to change its width.
And for now decided not to display SIDEBARS in their website.
The council can always change their mind, simply by toggling a couple of buttons in the Template Styles screen of their website's control panel.
And if they choose to display Sidebars they can separately style any Modules they want to display in those Sidebars using our separate BOXES Style Set.
See below.
MAIN BODY
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!
BOXES
BOXES are styled modules which can be displayed anywhere in your website, even inside Articles.
The council initially opted for a one column display and not to display Boxes in their website, but of course they can change their mind any time.
And just in case they do we included several example BOXES for the council to use as their guide - see above image.
Boxes can be easily duplicated. We show you how in our JOOMLERS.UK user guide.
These Boxes can then be styled simply by toggling a few buttons in the Template Styles screen of their website's control panel!
BRANDING
The council wanted a full width SITE BANNER to be displayed in the HEADER 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.
No decision was taken about adding an image or text POSTSCRIPT message when web pages are printed.
The council can of course choose to display such a message whenever they wish.
FONTS
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.
DISPLAY FORMAT
The council wanted a FIXED WIDTH or STATIC website display.
Their website sits in the middle of very large screens but fills the width of smaller screen devices.
When choosing a fixed width display, we recommend either 940 PX or 1140 PX.
The council chose the wider of these two options: 1140 PX.
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:
- the fixed width from 1140 PX to 940 PX, or
- opt for a FLUID display (when the website will fill the width of even the largest screens).
IMAGES
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.
MENUS & MENU LINKS
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 Accessibility Statement (required by law in a public sector body website).
For this reason, the council 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.
We also added unpublished example LIST and TAB Menus for the council to use as a guide if in future they want to display additional menus.
These menus can be styled using BOX Style Sets, and are easy to duplicate. We show how in our JOOMLERS.UK user guide.
The council initially chose not to display LIST and TAB Menus in their website.
NAVBARS
We recommend the Main Menu be displayed in a NAVBAR position of 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.
Sub-sub menu links can also be displayed (not a standard Joomla! CMS feature).
Here is the Main Menu as displayed on Phones and Tablets (portrait) after a user dabs the hamburger button (top right).
The image shows sub-menu links displayed as an accordion when a parent menu link is selected (in this example, The Council).
Display of sub-menu links on phones is not a standard Joomla! CMS feature.
We were able to meet the council's need for such a menu using a 3rd party extension.
The sub-menu links remain hidden until the parent menu link is selected.
The council chose not to indicate parent links by means of a chevron.
But may in future change this by toggling the relevant button in the Template Styles screen of their website.
NAVBAR BOXES
WYNCHCO website designs enable two optional BOXES to be displayed in the NAVBAR.
One is a SEARCHBOX in the navbar-landscape-top position.
The council 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 council 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 council chose to display CONTACT US as their call to action, the text being linked to their website's contact page.
The council 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.
OFF CANVAS DISPLAY
WYNCHCO website designs include unpublished BOXES in the OFFCANVAS position ready for display at the edge of the browser screen.
Such Boxes can be used to display a Call to Action.
The council decided not to display such boxes in their website.
The option however remains available to them if they choose to use the example Boxes provided.
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.
Cookie Bar
In the UK and EU the display of a website COOKIE BAR is a legal requirement (see the GDPR or General Data Protection Regulations).
For this reason the council asked us to install and configure a COOKIE BAR for use with their website.
The image below shows the Cookie Bar as it is displayed on Phones and Tablets (portrait).
Image Rotator
The council were keen to showcase their local area.
They asked us to install and configure an IMAGE ROTATOR 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 (see image) and the images were linked to the Latest News article.
SEARCH BOXES
WYNCHCO website designs include example SEARCH BOXES ready for use in a number of positions.
The council chose to display SEARCH BOXES in three positions:
1) BOTTOM on all devices.
2) TOP-RIGHT on PCs and Tablets (landscape).
3) PORTRAIT-TOP on Phones & Tablets (portrait).
Tell us YOUR design requirements
Call 0161 818 8228 to discuss with Ken, website designer, how we can help you.
Ken has been creating custom responsive website designs for organisations in the public sector since 2008.
Our office is in Warrington. We are keen to work with public sector bodies across Cheshire, Greater Manchester, Merseyside and the North West.
If you are located outside the North West, do still give us a call. We serve the whole of the UK.
WYNCHCO Joomla! CMS Support
If you use the Joomla! CMS and care about keeping your website safe and secure, ask about our Joomla! CMS Support packages.
Read more: WYNCHCO Joomla! CMS Support.
