Responsive Mobile-friendly Website Design

SITE BANNER & COPYRIGHT

The SITE BANNER (an image) or SITE TITLE (text) is prominently displayed at the top of every page of your website.

The COPYRIGHT statement is displayed at the bottom of every page.

Choose to display either:

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

Site Banner

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

• PC and iPad (landscape).
• iPad (portrait).
• Tablet (landscape).
• Tablet (portrait).
• Phone.

Alternatively, choose to display one SITE BANNER across all devices.

Site Title & Strapline

When no SITEBANNER image is selected for display on a particular device, a SITE TITLE may be displayed instead.

A STRAPLINE may be displayed below either a SITEBANNER image or a SITE TITLE.

Copyright Statement

Display a custom COPYRIGHT statement at the bottom of every page of your website.

This statement will also be added as a footer whenever your web page is printed.

LAYOUT

LAYOUT refers to DISPLAY FORMAT and SIDEBAR WIDTH.

Display Format

Choose between FIXED and FLUID display formats.

• FLUID: website container fills the screen on all devices.
• STATIC: website container sits in the centre of the screen on large screen devices.

Sidebars

Choose the width of SIDEBAR to be displayed:

• NARROW,
• WIDE or
• VERY WIDE.

BACKGROUND

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

Choose to display the BACKGROUND as an:

• IMAGE,
• a COLOUR, or
• BOTH at the same time.

When you choose to display an IMAGE then you may control when it is visible.

For examaple:

• only on PCs,
• only on Tablets (landscape) & 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.

CONTAINER

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

It comprises the MAIN BODY and MODULES.

Change the appearance of the CONTAINER.

Text

Change the size of website TEXT.

Increase or decrease LETTER SPACING.

Container Padding

Increase padding when you choose to display the Main Menu in the NAVBAR-DESKTOP position.

Container Corners

Remove round corners when you choose to remove space between the CONTAINER and the top of the browser window.

BOXES

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

BOX STYLE SETS enable rapid styling and re-styling of BOXES.

BOX STYLE SETS include:

• OPENBOX,
• BORDEREDBOX,
• PILLBOX,
• SOLIDBOX, and
• WIDEBOX.

The image below illustrates the breadth of available STYLE SETS.

Change the Look & Feel of BOXES, including:

• Heading Text Colour,
• Heading Background Colour, and
• Border Width & Colour.

The appearance of any MODULE which has been assigned the relevant BOX STYLE SET will be instantly changed.

MENU LINKS

Change the Look & Feel of MENU LINKS.

MENU LINK STYLE SETS include:

• List Menu Links,
• Tab Menu Links, and
• Article Index Links

Change the Look & Feel of MENU LINKS, including:

• Text Size, and
• Font Weight

to complement the other changes you make to your website's appearance.

EXAMPLE LIST MENU

Here's what a LIST Menu looks like before you change its Look & Feel in a WYNCHCO Website Design.

EXAMPLE TAB MENU

Here's what a TAB Menu looks like before you change its Look & Feel in a WYNCHCO Website Design.

NAVBAR

NAVBAR refers to six unique positions which may be used to prominently display MENUS at the top of your website.

NAVBAR STYLE SETS enable rapid styling and re-styling of MENUS assigned to these positions.

Before you make any changes a MENU displayed in a NAVBAR position looks like this.

PCs & Tablets (landscape)

Phones and Tablets (portrait)

A drop-down menu appears when the hamburger button (top right) is selected.

Change the Look & Feel of the NAVBAR, including:

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

Change the size of MENU LINK text.

SIX NAVBAR POSITIONS

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

On PCs and Tablets (Landscape)

NAVBAR

Choose to display the MAIN MENU below the Site Banner and above the Main Body.

NAVBAR-MAINBODY

Or within the Main Body.

NAVBAR-DESKTOP

Or at the top of your website. 

On Phones and Tablets (Portrait)

NAVBAR-TOP

Choose to display the MAIN MENU at the top of your website.

NAVBAR-ABOVE-SITEBANNER

Or above the Site Banner.

NAVBAR-BELOW-SITEBANNER

Or below the Site Banner.

NAVBAR BOXES

NAVBAR BOXES are unique MODULES which may be styles and re-styled using a specific STYLE SET.

SEARCHBOX

The NAVBAR SEARCHBOX is displayed on large screen devices when a menu is published in the NAVBAR-DESKTOP position.

CALLBOX

When published the NAVBAR CALLBOX is displayed next to the hamburger button in the NAVBAR positions on Phones & Tablets (portrait).

The CALLBOX will by default display a SKIP TO MAIN CONTENT link to help visually impaired website users.

You my change the message and link, as illustrated below.

Display a CALL TO ACTION as either text or an image.

Example Text

Example Image

Type of device

You can present a fast loading SIMPLIFIED view of your web pages on Phones & Tablets.

And a more COMPLEX detailed view when displayed on PCs and laptops.

Result:

• faster page load speeds on small screen devices, and
• improved performance in search engines. 

Screen size

In response to the size of screen being used, you can:

• choose to display a DIFFERENT LAYOUT, or
• DIFFERENT CONTENT.

Result

• reduced clutter on small screens,
• improved user experience and
• improved search engine results.

Visitors will:

• spend longer time on page, and
• be more likely to make a return visit. 

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.

Take a look at some recent WYNCHCO website designs

Here are three examples of how our WYNCHCO website designs have helped businesses and community groups in Cheshire, Greater Manchester, Merseyside, North West England & the UK.