St Margaret's CE Primary School

Website Design for an Academy School

Warrington, Cheshire

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

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

BACKGROUND

The school chose to display a gradient image as the BACKGROUND to their website.

They could instead have chosen to display a repeating pattern background 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 school decided not to:

change the default TEXT SIZE and LETTER SPACING,
insert PADDING above the Container, and
add ROUNDED corners.

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
increase text size and letter spacing.

FOREGROUND

The school decided not to change the background colour of the HEADER which sits behind their website's BRAND, or its width.

And for now decided to display a right SIDEBAR across most of their website.

The image shows they chose WIDE from the three available widths: narrow, wide and very wide.

The school can always change their mind, simply by toggling a couple of buttons in the Template Styles screen of their website's control panel.

MAIN BODY

BOXES

BOXES are styled modules which can be displayed anywhere in your website, even inside Articles.

The school initially opted to style all Boxes in their website using our CUSTOM BOX Style Set.

They can of course change their mind at any time.

And just in case they do we included several example BOXES for the school to use as their guide.

Boxes can be easily duplicated. We show you how in our JOOMLERS.UK user guide.

Boxes can be globally styled by toggling a few buttons in the Template Styles screen of their website's control panel.

BRANDING

The school wanted a SITE BANNER to be displayed on the left side of the HEADER at the top of their website on PCs and Tablets (landscape).

On Phones and Tablets (portrait) the Site Banner is displayed at the top, below the Navbar.

See next image.

The school 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 school can quickly change this anytime they choose.

For example, link the Site Banner or Site Title to the Contact Us page.

The school followed our recommendation to display a COPYRIGHT statement at the bottom of their website.

No decision was taken about adding an image or text POSTSCRIPT message when web pages are printed.

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 school chose 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 school 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 school 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 school 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 school 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 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.

LIST Menus may be styled using BOX Style Sets.

We show how in our JOOMLERS.UK user guide.

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 (which the school may easily change).

Sub-menu links can be displayed as a drop-down list when a parent menu link is selected.

Here is the Main Menu as displayed on Phones and Tablets (portrait) after a user dabs the hamburger button (top right).

The school wanted to indicate parent links by means of a chevron. See above images.

If in future they change their mind then the chevrons can be hidden, simply by toggling a 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 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.