Responsive Mobile Friendly Website Design

BACKGROUND

BACKGROUND refers to the layer of display which sits behind the CONTAINER when your website is viewed in a browser window.

BACKGROUND Style Set

Change the following features with just a few simple clicks.

Choose to display either a BACKGROUND COLOUR, a BACKGROUND IMAGE or both at the same time.

Background Colour

Change the BACKGROUND COLOUR of your website.

It is white by default but you can display any colour you choose.

Background Image

Choose instead to display a BACKGROUND IMAGE.

When you do you can control when the IMAGE is visible.

For example:

• only on PCs,
• only on Tablets (landscape view) & PCs,
• only on Tablets & PCs, or
• across ALL devices, including Phones.

Choose what kind of BACKGROUND is displayed:

• colour,
• gradient,
• repeating pattern, or
• large image.

Background Padding

Increase padding:

• at top, and
• to the left and right

of the browser screen on PCs and Tablets (landscape).

CONTAINER

CONTAINER refers to the LAYER of display which sits in front of the BACKGROUND.

CONTAINER Style Set

Change the following features with just a few simple clicks.

Text Size & Letter Spacing

Change the size of text displayed in your website.

Increase or decrease the space between letters.

Being able to change text size and letter spacing is useful when you change FONTS.

Top Padding

Change the amount of space above the CONTAINER.

Corners

Choose to display either SQUARE or ROUND corners.

Warning & Error Messages

Change the look & feel of messages as they appear in your website.

For example, when someone enters the wrong user credentials.

FOREGROUND

FOREGROUND refers to the LAYER of display which sits in front of the CONTAINER.

FOREGROUND Style Set

Change the following features with just a few simple clicks.

Header

HEADER refers to the layer of display which sits in front of the FOREGROUND above the MAIN BODY.

You can change the HEADER:

• background colour, and its
• width.

You can also increase the width of the NAVBAR.

Sidebars

You can choose the width of SIDEBAR to be displayed:

• NARROW,
• WIDE or
• VERY WIDE.

MAIN BODY

The MAIN BODY refers to the LAYER of display which sits in front of the FOREGROUND.

It is where all ARTICLES are displayed, as well as BOXES when published in the ABOVE and the BELOW positions.

On PCs & Tablets (landscape) it sits between the LEFT and the RIGHT positions.

On Phones & tablets (portrait) it sits between the PORTRAIT-TOP and the PORTRAIT-BOTTOM  positions.

MAIN BODY Style Set

Change the following features with just one click.

MAIN BODY Padding

Separately control MAIN BODY PADDING on:

• PCs & Tablets (landscape) and
• Phones & Tablets (portrait).

Increase padding to create a more open feel.

Useful when you choose to display a dark screen BACKGROUND.

ARTICLES

Increase ARTICLE padding to create a more open feel.

Show or hide the border above Article Details.

BOXES

BOX refers to a MODULE which has been assigned a BOX STYLE SET.

BOXES can be displayed in any position.

BOX STYLE SETS include:

• BOX,
• CUSTOM BOX,
• TAB MENU BOX and
• SEARCH BOX.

The image below illustrates the breadth of available BOX Style Sets.

The BOX labelled MODULE on the right shows a Module which has not been styled using a BOX Style Set.

Change the Look & Feel

Change the look & feel of BOXES with just a few simple clicks.

It is easy to globally apply style changes to each and every Module to which you have assigned a BOXES Style Set.

And if you would like more power at your fingertips we can create more BOXES Style Sets for you.

Settings you can change with a few simple clicks:

• Text colour,
• Link colour,
• Background colour,
• Border colour,
• Border width,
• Corner rounding, and
• Module padding.

Each BOX Style Set is configured to work with the Custom Module Background Image option included with the Joomla! CMS.

You can also:

• change the OPACITY of BOXES displayed in an OFFCANVAS position,
• change the alignment of SEARCH BOXES, and
• change the vertical space between BOXES displayed in SIDEBARS.

BRANDING

Your website should reflect your brand identity.

Choose to display either:

• a SITE BANNER or SITE TITLE,
• with or without a STRAPLINE.

Change the Look & Feel of the SITE TITLE and STRAPLINE.

Change the landing page to which the SITE BANNER & SITE TITLE are linked.

Change the COPYRIGHT statement at the bottom of your website.

Site Banner

Display any one of six different SITE BANNER images to reflect the screen size of the device used by website visitors:

• PC & Laptop,
• iPad (landscape),
• iPad (portrait),
• Tablet (landscape),
• Tablet (portrait), and
• Phone.

You may choose instead to display one SITE BANNER across all devices and screen sizes.

Site Title & Strapline

Choose to display a SITE TITLE instead of a Site Banner.

Add a STRAPLINE if you wish, and change the font of both.

We include an initial range of Google Fonts for you to use, and make it easy for you to add more.

Copyright Statement

Change the COPYRIGHT text displayed at the foot of your website.

Change its colour to make it more visible when you change your website's BACKGROUND.

Control what visitors see by DEVICE

WYNCHCO website designs incorporate STYLE SETS which enable you to control how content is displayed 'on the fly'.

STYLE SETS determine which MODULES and BOXES are displayed depending upon the DEVICE used to view your website.

Such STYLE SETS enable you to vary:

• LAYOUT, and
• CONTENT

in response to the DEVICE being used.

For example, you can display a fast loading SIMPLIFIED version of your website on SMALL SCREEN devices.

And display the FULL version on LARGE SCREEN devices.

Result

• Faster page load speeds on small screen devices.
• Improved performance in search engines.
• Improved visitor experience.

Control what visitors see by SCREEN SIZE

WYNCHCO website designs incorporate STYLE SETS which enable you to control how content is displayed 'on the fly'.

STYLE SETS determine which MODULES and BOXES are displayed depending upon the SCREEN SIZE used to view your website.

Such STYLE SETS enable you to vary:

• LAYOUT, and
• CONTENT

in response to the SCREEN SIZE being used.

For example, you may display a fast loading SIMPLIFIED version of your website on SMALL SCREENS.

And the FULL version on LARGE SCREENS.

Result

• Faster page load speeds on small screen devices.
• Improved performance in search engines.
• Improved visitor experience.

FONTS

WYNCHCO website designs include a number of GOOGLE FONT FAMILY Style Sets, and you can even add your own.

We show you how in our Joomla! User Guide.

There are more than 800 Google Fonts listed in the Google Fonts Directory.

Each GOOGLE FONT FAMILY Style Set enables you to discretely change the look & feel of a different website element:

• Branding text,
• Body text,
• Heading text, and
• Button & Menu Link text.

A FONT FAMILY comprises a FONT and a FALLBACK FONT.

The FALLBACK FONT is generic (for example, serif or sans-serif) and only used if a website visitor's browser does not recognise your preferred font.

Self-hosted Google Fonts

The Google Fonts we include with WYNCHCO website designs are SELF-HOSTED.

SELF-HOSTED means that the Google fonts are included with your website's template files.

This avoids the need for web browsers to call Google fonts from the Google server every time a website page loads.

Faster page load speed means improved performance in search engines!

FORMAT

The FORMAT Style Set enables you to choose either a STATIC or FLUID display format for your website.

Display Format

Choose between STATIC and FLUID display formats.

• STATIC: fixed width display.
• FLUID: full width display on all screen sizes.

Static Display Width

Choose between a WIDE or VERY WIDE static display:

• WIDE = 940 PX, or
• VERY WIDE = 1140 PX (default).

IMAGES

In a WYNCHCO website design:

+ IMAGE CORNERS are square by default, and

+ IMAGES are displayed in full colour

but they don't have to be.

You can change the look & feel of images using filters.

MENU LINKS

MENU LINK Style Sets enables you to change the Look & Feel of Menu Links with just a few simple clicks.

Change the look & feel of Menu Links displayed in:

• LIST Menus,
• TAB Menus,
• TOP-LEFT,
• TOP and
• BOTTOM Menu.

MENU Styles

WYNCHCO website designs enable you to display MENUS using discrete STYLE SETS.

LIST Menu

Here's what a typical LIST Menu looks like in a WYNCHCO website design before you change its Look & Feel.

The menu shown here is also styled by our CUSTOM BOX Style Set.

Change the text size of LIST Menu Links.

TAB Menu

Here's what a typical TAB Menu looks like in a WYNCHCO website design before you change its Look & Feel.

The menu shown here is also styled by our TAB MENU BOX Style Set.

Change the text size of TAB Menu Links.

TOP Menu

Change the size of TOP Menu Link text.

BOTTOM Menu

Change the size, colour and weight of BOTTOM Menu Link text.

Change the background colour of the BOTTOM Menu.

Show or hide the BOTTOM Menu Link border.

Choose between VERTICAL and HORIZONTAL display on Phones and Tablets (portrait).

PCs & tablets (landscape)

HORIZONTAL display before you change the look & feel.

Without link border.

With link border.

Phones & tablets (portrait)

HORIZONTAL display before you change the look & feel.

VERTICAL display before you change the look & feel.

Without link border.

With link border.

NAVBARS

NAVBAR Style Sets enable you to change the look & feel of MENUS published in NAVBAR positions.

Here's what a MENU published in a NAVBAR position looks like before you change its Look & Feel.

PCs & Tablets (landscape)

Phones and Tablets (portrait)

Menu wraps round on small screen devices like smartphones and tablets.

Menu links slide out when the visitor dabs the hamburger button on the right.

Change the Look & Feel

Change the following features with just a few simple clicks.

Change the colour of:

• NAVBAR Background,
• NAVBAR Corners,
• Menu Link Background,
• Menu Link Text, and
• Menu Link Border.

Change the size of MENU LINK text.

Add a chevron to Parent Links to announce the presence of a Dropdown Menu.

Change the minimum width of Dropdown Menu Links.

Change NAVBAR padding.

Change the appearance of NAVBAR corners.

FIVE NAVBAR POSITIONS

Five unique positions are provided to support prominent display of MENUS on large and small screen devices.

On PCs and Tablets (Landscape)

On Phones and Tablets (Portrait)

NAVBAR BOXES

NAVBAR BOX refers to a module which has been assigned to a NAVBAR position.

NAVBAR BOX STYLE SETS enable you to:

• display or hide, and
• determine the Look & Feel

of NAVBAR BOXES.

WYNCHCO website designs include two NAVBAR BOXES.

SEARCHBOX

The NAVBAR SEARCHBOX is displayed by default in a WYNCHCO website design.

It can be seen at the top of the screen on large screen devices when a Menu is published in the NAVBAR-LANDSCAPE-TOP position.

Simply toggle the DISPLAY button if you want to hide the SEARCHBOX.

CALLBOX

The NAVBAR CALLBOX is displayed by default in a WYNCHCO website design.

It can be seen at the top of the screen on Phones & Tablets (portrait) next to the hamburger button when a Menu is published in one of the NAVBAR positions.

By default it displays a CONTACT US message which is linked to your website's Contact Us page.

Simply toggle the buttons to:

• change the message,
• display an image instead of a text message, and
• change the landing page to which the Call to Action is linked.

Example Text

Example Image

OFF CANVAS DISPLAY

WYNCHCO website designs enable you to publish Modules OFF CANVAS (at the edge of the browser screen).

Modules displayed in the OFFCANVAS position can be used to display a CALL TO ACTION message.

For example: "Need help? Call ..."

See examples in the image below.

When a visitor dabs a CALL TO ACTION the module will slide out, displaying more information.

Select the WYNCHCO template

Select the WYNCHCO template being used by your website to change its STYLE settings.

Select a STYLE Tab

Select each STYLE tab in turn to review its individual STYLE SETTINGS.

Example: FORMAT.

Simply toggle the buttons to change STYLE Settings

The changes you make to STYLE SETTINGS will immediately change the Look & Feel of your website.

That's it!

Example: FORMAT.

Our commitment to you

Customer Consultation

We explore your design requirements at some length to ensure your WYNCHCO website design meets your needs.

Design & Review

We configure your WYNCHCO website's content and navigation, and create a template to project its unique look and feel.

GO LIVE

When you are ready, we publish your WYNCHCO website, and if required, provide ongoing WYNCHCO Joomla! CMS Support.

Accessibility

We aim is to create website designs which are easy to use by everyone and anyone.

Skip Navigation Link

All WYNCHCO website designs include a hidden SKIP NAVIGATION link at the top of the screen to enable users of screen readers to jump straight to the main content on any one page.

See for yourself when you select the TAB key followed by the ENTER key when you first land on a web page.

Colour Contrast

Our choice of colour contrast (or textual content colour combinations), easy to read fonts and punctuation reflects the importance we place upon the provision of accessible content.

Three Click Rule

We adhere to the 'three click rule' in an effort to provide a website navigation structure that is both intuitive and logical.

Responsive Design

All WYNCHCO template designs are responsive. Website visitors can easily read, navigate and interact regardless of device (phones, tablets and PCs) and screen size being used.

Limited use of Tables

We only ever work with tables when there is a specific need, for example, the display of a league table in a sports website.

Concise Content

We aim at all times to write website content that is concise and easy to understand.

When we add forms to a website design,  we employ a logical tab sequence and labels to identify the input required.

Plain English

When asked to write website content we use simple English, short paragraphs and short sentences.

And we use punctuation. Every sentence ends with a full stop.

Reflection

We periodically test web pages using the Google Chrome Vox screen reader.

Recent WYNCHCO website designs

Examples of how WYNCHCO website designs have helped organisations in Cheshire, Greater Manchester, Merseyside, North West England & the UK.