Business Sector

Website Design for Simon Corrugating Machinery Ltd

Runcorn, Cheshire

simon business school website design composite 800 simon business website design composite 580 simon business website design composite 340

Simon Corrugating Machinery Ltd asked us to create a simple website design for them which would display well on mobile devices, including smartphones and tablets, as well as PCs.

This case study outlines our approach to creating a website design to meet the company's needs.

 

Our Approach

When the company 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 company 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 company's needs.

Finally, we created a custom WYNCHCO template design, incorporating the design elements described in this case study, to project the company'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 company chose to display a gradient image as the BACKGROUND to their website.

simon merseyside website design bg 800simon merseyside website design bg 340

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!

The company 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.

simon merseyside website design container 800simon merseyside website design container 340

The company 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 company decided 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 to display no SIDEBARS across most of their website.

simon business merseyside website design fg 1col 800simon business merseyside website design fg 1col 340

And a RIGHT SIDEBAR on the NEWS page.

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

simon business merseyside website design fg 2col 800

simon business merseyside website design fg 2col 340

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

The MAIN BODY is where all ARTICLES are displayed.

The company 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!

simon business merseyside website design details 340

The company 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).

simon merseyside website design sb 800 simon merseyside website design sb 340

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

See next image.

simon company merseyside website design sb mobile 340

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

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

simon merseyside website design copyright 584

simon merseyside website design copyright 340

The company 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.

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 company 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 company 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 company 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 company 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).

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 company chose to initially display all images in their website with rounded corners. See example.

simon business merseyside website design images 340

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 Privacy Policy (recommended following the introduction of GDPR or General Data Protection Regulations).

For this reason, the company 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.

simon merseyside website design simon top left menu 613 simon merseyside website design simon top left menu 340

We also added unpublished example LIST and TAB Menus for the company 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 company initially chose not to display LIST and TAB Menus in their website.

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 company may easily change).

simon company merseyside website design navbars 800 simon company merseyside website design navbars 340

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

The company did not however require sub-menu links to be created.

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

simon company merseyside website design navbars mobile 580 simon company merseyside website design navbars mobile 340

If the company decides in future to add sub-menu links then they may choose to indicate parent links by means of a chevron.

This can be enabled by toggling the relevant button in the Template Styles screen of their website.

 

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 company requested we include the following additional features when we created their website design.

In the UK and EU the display of a website COOKIE BAR is a legal requirement (GDPR or General Data Protection Regulations).

For this reason the company 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).

simon merseyside website design cookies 607

simon merseyside website design cookies 340

The company 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.

simon company merseyside website design rotator 800 simon company merseyside website design rotator 340

 

joomla support coach trainer cheshire manchester merseyside ukKen Edwards - Website Designer

Ken has more than 10 years experience creating Joomla! website designs for business organisations in Cheshire, Greater Manchester, Merseyside and North West England.

Need help? Just ask

Need help? Just ask