Website Styles

Credit – this article is derived from a guide written by Bradford u3a and shared with the SiteWorks team.

There is a different website design styles, much of which stems from sites having various purposes:

• One style is a menu with limited choices having the content assembled on fairly long pages that you scroll through. For example www.bradfordclub.co.uk
• Another is a where content is arranged on multiple nested pages, found by clicking on links in the top menu to move up and down the nested structure. Menus can just be a list on a page to cut across the hierarchy. For example www.gov.uk/government/organisations/hm-revenue-customs
  In u3a terms this style could be shown as:
  Home > Groups > Languages > French conversation
  This relies on the ‘Languages’ page listing links to all the language groups – something the u3a Groups plugin and shortcode does for you.
• A third approach is extensive sub-menus that pop-up and take you to the pages holding the content. This is common with retailers and supermarkets, for example www.currys.co.uk
• There is also a minimalist style where there are only a few options and the menu is kept out of the way of a swish looking full screen image. This is popular with restaurant and art gallery sites.

Which you choose depends on the purpose of your website and the amount of reading and clicking you can expect visitors to do.

The Bradford Club is wanting to project the feeling that it is a luxurious venue. All it wishes to do is get potential users of the club to get in contact, at which point they will provide the detail of facilities and costs.

The Tax office is trying to provide as much information as possible online to users who can be expected to hunt for information through many pages, reading the directions of where to go next and knowing where they are.

Currys want to present you with everything that they offer in the top page, just by moving the mouse and not having to click anything until you have decided what you want.

The minimalist approach is popular with restaurants. The swishier and more stylish the establishment the plainer the site.

Site Builder adopted the third type and to facilitate migration SiteWorks has mimicked this.

1.1          Home landing page

The home page is the most important page.  It is where a visitor “lands” after entering the basic website address or in practice  clicking on a link or a search result. For a u3a it has to fulfil two purposes:

1. Interest potential members sufficiently to make them to want to learn more
2. Allow existing members to see any recent news/notices and then allow them to navigate into the site to see whatever it was they were looking for. This makes navigation options very important on the Home page.

Site Builder has a Home page and a Welcome Page. On a migrated site these should really be combined into a single ‘Welcome’ page.

1.2        Page Design

Web pages communicate in multiple ways:

• The page layout. What is at the top, the bottom and in the middle. What is immediately seen and what you have to scroll down to view. How elements of the page focus the attention of users to where you want it to be.

• Font sizes, colours and background colours. What is going to catch the eye. Try squinting at the page and see what jumps out at you.

• Things that move or flash on their own. This draws attention but can be very annoying if you are trying to read something on the page. Use this when you want people to click pretty quickly to another page.

• Things that appear by moving the mouse. This is where sub-menus come in. They can quickly show users ‘what is in the tin’ and direct them to what is of most interest.

• Links and ‘read more’s. These allow you to make a page simple and quick to read, with the detail becoming visible only if users have decided they want it.

• The page presents a pop up after a few seconds that needs to be closed by the visitor. Often the page content is blurred until action is taken. Paywalls or sites that require logon work like this, often insisting you pay/register before you can proceed.

• And finally, from a page you can simply click through to from text or an image.

1.3        Attract new Members

Most u3a sites have a dual purpose, to attract new members and inform/retain current members. This applies to Trust sites like u3a.org.uk and siteworks.u3a.org.uk

On pulling in new members it is worth bearing in mind some key marketing principles:

1. The attention span of new users on your site is very limited, until you catch their attention. You can’t expect them to read more than a short paragraph and to make two or three mouse clicks.
   Only when the short statements or simple paragraphs have caught attention, can you expect them to stay and read more. No more than nine words in a sentence.

• Your ultimate aim with new visitors is to attract new members That means you need a way for them to contact you and, ideally, you contact them. The usual method is to have a contact form where the visitor provides an email address for a reply. This can be incentivised by offering information such as a newsletter, or the opportunity to try out an interest Group meeting.
  If email addresses are captured then be very clear on how you will use them, keep them secure and include an easy reliable way for members to unsubscribe – basically your Privacy policy and notice.

• You attract new members by enticing them along a path of increasing interest in what you are offering. To do that you add a ‘call to action’ with a simple message. For example ‘make new friends’ or ‘pursue your interests’. Give them a way to start doing it. For example ‘Try a meeting before you join – click here to contact us’ as discussed above. Perhaps have additional info on which groups or meetings offer this, so you don’t disappoint. They are not likely to come back if ignored or expectations are not met.

• Most critical is how you follow up contact and turn them in to happy members, once your website has led them to get in contact.

1.4        Main menu

There is research to show that most people can only make an effective choice from a maximum of nine options. Six is easier so consider limiting your top menu to less than nine options.

Revision History

Version	Date	Author	Change summary
1	2024-04-20	Graham Tigg	First version based on Bradford u3a’s ‘Playing with websites, Navigation Editing’
2	2024-04-25	Graham Tigg	Comments from Gerry McAllister