Responsive Mobile-friendly Website Design

SITE BANNER & COPYRIGHT

SITE BANNER refers to the image which is prominently displayed across every page of your website.

Together with the overall Look & Feel, the SITE BANNER reinforces your organisation's brand.

WYNCHCO website designs enable you to display either:

• a SITE BANNER, or
• a SITE TITLE and STRAPLINE.

Site Banner

You may display as many as FIVE different SITE BANNER images, one for each of the following devices:

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

Or if you prefer, you can display one SITE BANNER across all devices.

Site Title & Strapline

You may display a SITE TITLE and STRAPLINE instead.

And choose from hundreds of Google Fonts when you do.

This feature could save you quite a lot of money paying for logo design if your business is a new start-up.

Copyright Statement

You may display a custom COPYRIGHT statement at the bottom of your website.

This statement will be added to the bottom of every page when someone prints one of your website articles. 

Site Banner Link (Ask for our 6-7 Template)

The SITE BANNER is by default linked to the website home page in a WYNCHCO website design.

You may wish to link the SITE BANNER to your Contact Us page.

To do so, follow the instruction below the Site Banner Link field.

LAYOUT

LAYOUT refers to DISPLAY FORMAT and SIDEBAR WIDTH.

Display Format

You may choose either a fixed width (STATIC) or variable width (FLUID) format.

• FLUID: website fills the screen on all devices.
• STATIC: format used by our company website.

It will sit in the centre of the screen on large screen devices.

Sidebar Width

Website sidebars may be NARROW, WIDE or VERY WIDE.

BACKGROUND

BACKGROUND refers to what is displayed on the screen behind your website when it is viewed in a web browser.

You may choose to display either a:

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

You may also control when the BACKGROUND IMAGE is displayed on:

• PCs only,
• Tablets (landscape) & PCs,
• Tablets & PCs, or
• across ALL devices.

Your choice of BACKGROUND IMAGE may be either:

• a solid colour,
• a repeating pattern, or
• one large fixed image.

CONTAINER

CONTAINER refers to the layer of display which sits between the FOREGROUND and the BACKGROUND.

Text size

You may separately change the size of TEXT displayed on large screen devices when visitors use either the Chrome or Firefox web browsers.

Why separate control?

Firefox will by default display a slightly larger font than Chrome. Our default font sizes reflect this - see image below.

Why Chrome & Firefox?

These are by far the most popular browsers.

Example: W3schools.com report Chrome to be used by 75% of their visitors and Firefox to be used by 14%.

89% of visitors use either Chrome or Firefox.

Opacity (Ask for our 6-7 Template)

You may choose whether to present the CONTAINER as being:

• transparent or
• opaque

by selecting the level of OPACITY.

For example, set OPACITY as:

• 0% to make the CONTAINER transparent;
• 100% to make the CONTAINER opaque;
• 10 - 90% to allow the BACKGROUND to be partially visible through the CONTAINER.

Border

You may choose whether or not to display a BORDER around the website CONTAINER.

And control visibility of the BORDER by device used by website visitors.

Padding

You may increase padding at the top of the screen.

FOREGROUND (Ask for our 6-7 Template)

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

FOREGROUND Opacity

You may choose whether to present the FOREGROUND as being:

• transparent, or
• opaque (default setting)

by selecting the level of OPACITY.

For example, set OPACITY as:

• 0% to make the FOREGROUND transparent;
• 100% to make the FOREGROUND opaque;
• 10 - 90% to allow the CONTAINER and BACKGROUND to be seen through the FOREGROUND.

After changing OPACITY you may wish to change:

• the colour of text and hyperlinks, and
• increase Article padding

to make website content easier to read. See below.

Text

You may change the colour of TEXT to ensure it remains easy to read when you change OPACITY and/or BACKGROUND.

Borders

You may also change the colour of BORDERS surrounding:

• SEARCHBOX fields,
• Form fields, and
• Drop-down lists.

Hyperlinks

You may vary the styling of HYPERLINKS to complement your choice of BACKGROUND colour and opacity.

Article Tweaks

When you choose to make the FOREGROUND transparent you may make some additional adjustments to make your website content easier to read.

MENU LINKS

MENU LINKS refers to menu links not displayed in the Navbar position.

You may change the Look & Feel of MENU LINKS displayed in the:

• Top Menu,
• Bottom Menu and
• other menus (not displayed in the Navbar position).

Text Size

You may separately change the size of TEXT displayed on large screen devices when visitors use either the Chrome or Firefox web browsers.

Why separate control?

Firefox will by default display a slightly larger font than Chrome. Our default font sizes reflect this - see image below.

Font Weight

You may vary the weight of font used to complement your choice of background.

Underline (Ask for our 6-7 Template)

You may underline Menu Links to complement your choice of background.

Colour (Ask for our 6-7 Template)

You can change colours of Menu Links in response to other changes you make to your website's Look & Feel.

For example, if you choose to display a dark background, you can change the Menu Links from near black to grey or white.

Font Family (Ask for our 6-7 Template)

You may also change the Menu Link font family using any one of hundreds of Google Fonts.

Read more: How to change Menu Links.

BOXES

BOXES refers to a number of specific STYLE SETS which we include with every WYNCHCO website design.

BOX STYLE SETS include:

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

You may change the look & feel of BOXES using the options shown below.

CALLBOXES

WYNCHCO website designs include 15 unique exemplar CALLBOXES.

Each CALLBOX may be displayed:

• on one or more device, for example on PC, Tabet (portrait), Tablet (landscape) or Phone;
• in any one position, for example in the call-to-action position;
• when any one Menu Link is selected.

Each CALLBOX is derived from the CUSTOM Module included with the Joomla! CMS.

Working with CALLBOXES is just like working with CUSTOM Modules.

EXAMPLE 1

IMAGE WIDTH: 240 PX.

POSITION: 

• Callbox 2A = call-to-action.
• Callbox 2B = call-to-action.

DEVICE: PC & iPad (landscape).

MENU LINKS: May vary.

EXAMPLE 2

IMAGE WIDTH: 480 PX.

POSITION: call-to-action.

DEVICE: PC & iPad (landscape).

MENU LINKS: May vary.

CORNERS (Ask for our 6-7 Template)

You may change the styling of all IMAGE CORNERS.

And separately change the appearance of:

• CALLBOX IMAGE CORNERS, and
• SITE BANNER IMAGE CORNERS.

CORNERS may be square or round.

When you choose round, you may choose the degree of rounding (or radius).

You may also change the styling of:

• BOX CORNERS, and
• ARTICLE CORNERS.

This is a desirable feature when you choose to make the CONTAINER and/or FOREGROUND transparent.

You may also change the CORNER styling of the NAVBAR, which by default presents your website's MAIN MENU.

Choose between square and round corners or both.

NAVBAR

NAVBAR refers to any one of six separate positions in which you can display the MAIN MENU in a WYNCHCO website design.

By default - before you change its Look & Feel - the MAIN MENU looks like this when displayed on PCs & Tablets (landscape).

And it looks like this on Phones and Tablets (portrait).

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

Hover over the above image to see the drop-down menu.

It's easy to change the Look & Feel of the NAVBAR.

SIX NAVBAR POSITIONS

WYNCHCO website designs include SIX pre-configured NAVBAR positions.

Three positions are provided for the display of the MAIN MENU on PCs & Tablets (Landscape).

Three more are provided for displaying the MAIN MENU on Phones & Tablets (portrait).

On PCs and Tablets (Landscape)

NAVBAR

By default the MAIN MENU is displayed below the Site Banner and above the Main Body.

NAVBAR-MAINBODY

You can instead display the MAIN MENU between the LEFT and RIGHT sidebars.

NAVBAR-DESKTOP

Or if you prefer you can display the MAIN MENU at the top of the website.

On Phones and Tablets (Portrait)

NAVBAR-TOP

By default the MAIN MENU is displayed at the top of the website.

NAVBAR-ABOVE-SITEBANNER

You can instead display the MAIN MENU above the Site Banner.

NAVBAR-BELOW-SITEBANNER

Or if you prefer you can display the MAIN MENU below the Site Banner.

Change Look & Feel

You may change the appearance of the MAIN MENU when it is displayed in one of the six provided NAVBAR positions.

TEXT SIZE

You may change the size of MENU LINK text.

And use the Reduce size on Firefox option to reduce text size when viewed in the Firefox web browser.

You may wish to do so when your MAIN MENU contains lots of menu links.

Reason: the Firefox browser displays a slightly larger font than the Chrome browser.

FONT WEIGHT

You may vary the weight of font used to complement your choice of background.

COLOUR

You may change the colour of the  NAVBAR and its MENU LINKS.

FONT FAMILY (Ask for our 6-7 Template)

You may also change the Menu Link font family using any one of hundreds of Google Fonts.

GOOGLE FONTS (Ask for our 6-7 Template)

To change the default FONT FAMILY used by your website you may choose from hundreds of GOOGLE FONTS.

And you may choose a different GOOGLE FONT for each of the following elements:

• body text,
• headings,
• menu links,
• Navbar links and
• the Site Title.

To do so, simply visit the Google Fonts Directory, select a font, and enter its name in each of the fields shown below.

FONT AWESOME ICONS (Ask for our 6-7 Template)

Font Awesome is a font and icon toolkit based on CSS and LESS which was originally created for use with Twitter Bootstrap.

Font Awesome provides more than 600 vector icons which may be displayed within your website without charge, even for commercial use.

WYNCHCO website designs are pre-configured to enable you to make full use of Font Awesome.

Here is an example Font Awesome icon.

An Example Icon

Choose from a wide range of already created Font Awesome icons when you visit the online Font Awesome Icon Cheat Sheet.

NAVBAR CALLBOX

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

We tell you how to use this feature in our Joomla! User Guide.

If you wish you may change the message and landing page - see below.

Display Format

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

Example Text

Example Image

Colour

You may change the colour of text.

CALLBOX background colour will change when you choose a background colour for the NAVBAR.

Hyperlink

You may change the text and hyperlink to point to a landing page of your choice.

For example, your website's CONTACT US page.

STYLE SETS

Use the STYLE SETS to control control which content is seen when, depending upon the device (and screen size) being used by visitors.

STYLE SETS enable you to:

• present content in the Right Sidebar on PCs & Tablets (landscape), whilst either
• hiding the same content on Phones & Tablets (portrait),
• or displaying it in a different position (depending upon device used by a visitor).

STYLE SETS enable you to present three versions of the same image in response to the kind of device and screen size used by website visitors.

You may choose to present:

• a small version of an image on Phones,
• a large version of the same image on Tablets,
• and at the same time a very large version of the same image on PCs.

Benefits of using STYLE SETS

• Faster page load times on mobile devices.
• Reduced clutter on small screen devices.
• Improved performance in mobile search engine results.

the device they are using

For example, you can present a fast loading SIMPLIFIED view of your web pages on small screen devices (like smartphones),

And a more COMPLEX detailed view when displayed on large screen devices (like laptops and PCs).

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

their web browser's screen size

In response to the visitor's screen size, your website can either display

• the same content but use a DIFFERENT LAYOUT, or
• a DIFFERENT LAYOUT and with DIFFERENT CONTENT.

Result: reduced clutter on small screens, improved user experience and improved search engine performance.

Visitors will:

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

and how creative you want to be!

When you use a WYNCHCO website design you can get from this

to this in 3 clicks!

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