Responsive Mobile-friendly Website Design

Mobile Friendly Website Design | Cheshire | Manchester | Merseyside | North West UK

We design totally responsive websites!

WYNCHCO website designs not only respond to the needs of your website's visitors.

They respond to your needs as website owner as well.

Every WYNCHCO website design starts out naked

But not for long.

Hover over the image below to see what a difference 3 clicks can make!

If viewing from a mobile then simply dab the image to see what we mean.

6 5 0 naked   

Why choose a WYNCHCO website design?

TWO BIG REASONS:

  1. We aim to put you in control of your website.
  2. And we want to help unleash your creative side!

To this end we make it possible for you to perform your own website makeover in a few simple clicks.

Have you ever wanted to tweak your website's appearance?

Now you can!

Check out the long list of features you can change at the click of a button.

responsive mobile-friendly website designNo need to use any code.

Would you like to know more?

Contact Customer Support on 0161 818 8228.

Features you can quickly and easily change!

Every custom WYNCHCO website design includes a long list of features which you can change at the click of a button.

The exact list of features is determined by the TEMPLATE included with your custom WYNCHCO website design.

To be able to quickly change all the listed features, ask for our 6-7 Template.

LAYOUT

LAYOUT refers to DISPLAY FORMAT and SIDEBAR WIDTH.

example layout

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.

6 7 3 layout

BACKGROUND

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

example background

You may choose to display either a:

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

6 7 4 background colour

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.

6 7 4 background image

CONTAINER

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

example container

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.

container text size

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.

container opacity

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.

container border

Padding

You may increase padding at the top of the screen.

container padding

FOREGROUND (Ask for our 6-7 Template)

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

example foreground

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.

6 7 6 foreground

Hyperlinks

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

6 7 6 hyperlinks

Article Tweaks

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

6 7 6 article tweaks

BOXES

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

example boxes

BOX STYLE SETS include:

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

modules

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

6 7 8 boxes open wide

6 7 8 boxes pill

6 7 8 boxes bordered

6 7 8 boxes solid

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

callbox 2a 2b

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

callbox 3

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

6 7 9 corners images

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.

6 7 9 corners boxes

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.

6 7 9 corners navbar

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.

6 7 11 google fonts

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.

WYNCHCO designs enable you to present website content that is easy to read across a wide range of screen sizes, including Phones, Tablets and PCs.

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

We also include a NAVBAR CALLBOX which may be used to prompt website visitors to contact you when they find your website whilst browsing on Phones and Tablets (portrait view).

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.

More reasons to choose a WYNCHCO website design

WYNCHCO designs enable you to control what website visitors see in response to:

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

6 5 0 naked

to this in 3 clicks!

6 5 1 3 clicks later 

responsive mobile-friendly website designAbout WYNCHCO Solutions

When you request a WYNCHCO website design we will devote as much care and attention to its development as if it were our own.

Call Customer Support on 0161 818 8228.

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

 

Website Design for St Margaret's Primary School | Warrington | Cheshire | North West UKSt Margaret's CE Primary School - Warrington, Cheshire

The school were keen for parents to be able to view their website from their smartphone.

Our WYNCHCO website more than meets their needs.

Read more: Case Study.

 

Website Design for SIMON | Runcorn | Halton | North West UKSIMON Corrugating Machinery - Runcorn, Merseyside

SIMON were using a Joomla! 1.5 website which had been developed in-house when they approached Wynchcote for help.

SIMON were happy to be our first customer to use our premium WYNCHCO brand.

Read more: Case Study.

 

wiremad smallYellows Independent Supporters Trust - Warrington, Cheshire

"Converted from our old static website, the new WYNCHCO website has a number of fantastic features that help promote Warrington Town and our ever growing (independent) Supporters Club."

Read more: Case Study.

 

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

Share This

Follow Us