We’ve recently created a new meeting room at The Cybermill office to create a better environment for our customers.

Our office is part of the administration area of an old colliery that has been converted into a business park. Riccall mine, a few miles south of York and a mile north of Selby, was part of the Selby coalfield before it closed in 2004. We were the first tenants in the newly converted business park when it was refurbished in 1998.

The main office was originally a very large “L” shaped room, with the main office area joined to the meeting area. The room was painted in magnolia and brown, and also had a solid metal fire door.

As our office is at the end of a fairly long corridor, we made the decision to convert the fire door into our main entrance. One of the complaints that we have when people arrive at the business park is that the tenants are difficult to locate; particularly as our office is one of the furthest from the main door. We now have our own entrance straight on to the car park which should help people find us much more easily.

This new meeting room has been partitioned off from the main office and is now a great space to entertain clients. Everything has been painted, we’ve got some great new furniture, hot and cold drinks and a big 42″ monitor on the wall with remote keyboard and mouse for demonstrating and discussing websites.

We hope you like what we’ve done. We think it’s a huge improvement – now we’ve got to get on with finishing the rest of the office!

A site map is best described as ‘a structured list of pages’. The map should help you and your designer figure out how to organize your website.

If you have no idea where to begin – you’ve come to the right place. We’ll go through the process of making a site map from scratch that your web designer will be thankful for.

In a nutshell, your site map should contain:

• The main pages that will appear on your website
• Some sense of how these pages relate to each other
• An idea of what should appear on the pages

1. An online business card

The first thing that a website should do is act as an online business card. What do people need to know to reach you? The best strategy is to give as many ways as you can (without going over the top). This usually includes:

• Name and address
• Telephone numbers (keep this to a land line and mobile number)
• Map and directions
• Email address & contact form

This is your Contact page – the first page on your site map. Note: bigger companies might want to add additional offices, phone numbers etc. If you do have a range of details to offer, you should always give a ‘preferred number’ to keep things simple.

2. Saying ‘hello’

Summarise your business in a punchy 1-2 sentence tagline. This information, as well as a brief introduction, should form the first parts of your Home page.

The most important page of your site, the Home page needs to inform and impress in equal measure. Try and profile a ‘typical’ site visitor – what do they want to achieve? Do they know who you are already? Is there a specific task they’ll want to follow? The home page should make their lives easy – give them what they want.

In short: the Home page should offer both a summary of your services and a signpost to lead customers on to the information they need.

3. The main event

What comes next is the ‘core content’ of the site. Depending on what you offer this might be a single page or a series of different sections.

The important thing is not to get carried away. What’s the minimum you’ll need to get the message across? Very often the temptation is to visit your competitors’ sites, find features you like and then list them. Unfortunately this can lead to complicated and messy sites. Focus on what you need, rather than what others are doing.

If you offer a range of services, consider grouping them into common themes. For example;

For a financial services website your core content might looking like:

• Services
• Financial planning
• Wealth management
• Risk management

For a photographer’s website, the core content will probably look more like:

• Galleries
• Weddings
• Portraits
• Sports
• Prices
• Weddings
• Portraits

… and so on.

Try to avoid having too many levels of hierarchy in the menu. In the above examples, we’ve shown two levels: top tier (Services, Galleries, Prices) and a second tier (everything else). Once you reach three levels the map starts to get convoluted. For small sites, try to keep to two or fewer. Medium-big sites may have to use a third (or even fourth) tier – it’s then up to your designer to make it work.

The next step is to briefly mention what needs to appear on these pages. In the photographer’s site example:

Weddings
A slideshow gallery of wedding photos, along with a block of text explaining our wedding service

4. The usual suspects

You might be tempted to add a few more pages to the map – About Us and Links are common choices. Think first about whether you really need these pages, or whether you could add the content elsewhere:

• About Us text can often be placed on the Home or Contact pages
• Links pages are a relic from the web’s early days, and offer little to your customers. If a link is useful it might be better placed within the text of another page

Think carefully about each page before adding it to the map. Is it useful for the visitors? Does this content belong on a page I already have?

5. Inevitable extras

Make an ‘extras’ column to the side of your map. Here’s where you list the features that you feel are necessary or useful on the site. These extras may not need a page to themselves, so it’s best to let your designer figure out how to use them. For example:

• A link to my business’ Facebook and Twitter pages
• ‘Subscribe to my mailing list’
• Download my brochure (PDF file)
• Seasonal special offers
• Logos and links to my sponsors

Again, try not to get carried away. You might have heard that Twitter is the new big thing, or that blogging is the key to success – but do you know what’s involved? Do you have the time to learn? If in doubt, ask your designer.

Do remember that lots of extra features will add to the cost of the website. Split them into two groups: ‘essential’ and ‘non-essential’.

6. Consider the future

Planning to expand in six months’ time? If changes are on the horizon make sure your designer is aware that the site may also need to change.

Luckily with a content managed website you’ll often be able to add, remove, reorder and rename your pages yourself – so small changes will usually be possible with a minimum of fuss.

7. Designing your site map

You should have a simple list of pages and descriptions by now: the final step is to arrange them into a sensible structure. The key here is to keep things fairly simple and to try and leave the design decisions to your designer (they’ll thank you for it!)

Spider diagrams and grids are fine; indented lists are even better. Don’t forget to include a brief description next to each item.

An overview

To summarise, you just need to follow these steps to writing a simple, clear and fairly complete site map:

1. Start with a simple business card
2. Consider how your home page will draw in customers
3. Add in the ‘core content’ – services, galleries, information
4. Consider each page carefully – does it really add anything to the site?
5. List those add-ons and extras that you think would be useful
6. Remember to account for any major updates or changes to your business
7. Keep it simple, give the pages a rough hierarchy and add brief descriptions

In the process of redesigning the Cybermill website we got to thinking about our approach to design – how we treat each project we work on. Here are five elements that need to be considered when putting together your website: Usability, Accessibility, Branding, Presentation and Features.

1. Usability – does it work?

You have to treat every visitor to your website with care: attention-spans are short and your competition is just a click or two away. Usability ensures that everything you offer is clean, up-front and easy to use.

There’s nothing more frustrating than a broken site: missing pages, links that don’t work, text that doesn’t copy. There are other kinds of ‘broken’ too – such as confusing menus, hard-to-read text, inappropriate animation and lots more. Nothing on your site should annoy, irritate or confuse – everything should be clearly presented and simple to use.

Checklist:

Sometimes it’s tempting to let style overcome basic usability. Take the main site menu as an example:

• Is your menu always in the same place on each page?
• Does your menu follow the same style and appearance on each page?
• Do the items in your menu have clear concise names?
• Is the menu written in plain HTML (no Flash, JavaScript or plain images)?

If the answer is YES to all four above then you’ve passed a basic usability test!

How do we approach usability?

The only solution to the complex issue of usability is to employ professional web designers who understand these key principles; designers can offer experience and advice to help you get the very best out of your website.

2. Accessibility – does it work for everyone?

The web is available everywhere, on different devices – mobile phones, tablets, notebooks – different internet browsers. Your site also needs to work properly when the text is resized, or when using a screen reader. Websites must be built to be dynamic – to resize, adapt and to degrade gracefully if need be. You cannot always guarantee that your visitors will have up-to-date software so your site will need to fit their capabilities.

Checklist:

Did you know that some internet browsers interpret website code differently? Have you thought about how your site works on different screen resolutions?

• Install a range of the most commonly used browsers on your computer to test the site – see any bugs?
• Try viewing your website with a lower screen resolution – do you need to scroll left and right to see everything?
• Visit your website using an iPad or other tablet device. Does everything look OK?

How do we approach accessibility?

With a thorough understanding of the tech that runs your site; the coding language(s) that exist beneath the design. We’ll always use standards-compliant code written with search engines in mind, thoroughly tested and compatible with all modern browsers and devices.

3. Branding – does it fit?

Is your website appropriate for your business – does it send the right message? Does it fit with the rest of your branding? In an overcrowded market it’s vital to have something that stands out – something that’s unique. One of the great benefits of a bespoke website is that it is created to suit your business – using your branding, colour and content.

Checklist:

Sometimes having an effective design is just about being appropriate to your business message.

• Have you considered the target audience? Have you added something just because you like it?
• Is your choice of font appropriate? (Comic Sans and Papyrus are not appropriate fonts!)
• Do you really need extra snazzy illustrations and backgrounds, or would the site be better with a simpler colour scheme?
• Does the site match the style and colours in your logo?

How do we approach branding?

Each site we build is the result of collaboration between client and designer – with your input and our expertise. We offer a one-on-one relationship with the web designer who works on your site and years of design and branding experience for small to medium-sized businesses.

4. Presentation – does it look great?

Most visitors will form an opinion within the first three seconds; bespoke design will help your business make an immediate impact. Most web users regularly visit big brand sites so they can clearly identify the difference between a site designed by an amateur and one that’s been custom-built by a professional agency. You wouldn’t decorate your high-street store with designs done by the next-door-neighbour’s son – so avoid amateur prices and tired old templates.

Checklist:

Good design is about personal taste as much as anything – but there are some general guidelines to follow:

• Symmetry is more pleasing to the eye
• White-space (empty, neutral or negative space) allows breathing room
• Things look better in threes
• Contrast your colours, especially with text
• Drop shadows, embossing effects and any other gimmicks should be used only with subtlety

How do we approach presentation?

We only offer bespoke designs, done from scratch in Photoshop. We start with a blank document and take it from there. We aim to make every project striking, professional and memorable. We also offer unlimited proofs so you are 100% satisfied with the end result.

5. Features – what does it do?

The core of your site is its functionality. A brochure site needs to display your content and do it well – other sites might involve extra features, like galleries, contact forms, mailing lists, blogs, client areas and much more. These extra tools and services add value to your site and let it work for you 24-hours a day generating new contacts and sales.

Checklist:

The best advice here is simply to ensure that you don’t overdo the functionality of your website.

• Ask yourself: do you really need this feature?
• What’s the core job of the site. Does it do this well?
• Ask someone non-technical to use the site – how do they get on?

How do we approach features?

We offer an extensive range of popular and well-tested tools and add-ons as well as full custom development services for bespoke applications. Whatever your site needs to do we’ll be able to offer a comprehensive solution that’s carefully designed and flawlessly integrated.

Over the past couple of months we’ve been hard at work on a new design which we think represents a real improvement over our previous website. Here’s a quick run-down of the new features and upgrades we’ve made:

Colour scheme

Old website vs New website

We’ve created a memorable style with the new design and we hope it will set us apart from other web design agencies in and around North Yorkshire.

As you can see above, the old site had quite a dark and gloomy background, and whilst we love the rich green colour we felt the whole page needed brightening up. The new site sits on a mostly white background which makes it clean and open and easy to read.

We love our rural location (we’re based in Riccall, just south of York), so we’ve kept the green farmland and bright blue sky from our old site. This all ties neatly into our stylised mill logo and the other graphics on the site.

The bright orange you see in our logo makes a frequent appearance on links and other ‘clickable’ things – this is a great way of drawing attention to important elements on the page.

Graphics and illustrations

1. Original drawing - 2. scanned in - 3. vectorised - 4. coloured

We’ve chosen a distinctive and colourful hand-drawn style for our illustrations to match our logo and show off our graphic design skills. All the graphics on the site have been hand-drawn by Nick Pearson (one of our in-house graphic artists). They were then scanned in and meticulously edited using Photoshop to tidy them up and prepare them for the website.

We’ve also kept the moving clouds from our old site – if you have a screen wide enough you’ll see them floating across the background behind the site content. The clouds require something of a technical feat to pull off – each cloud runs on a ‘track’ that’s timed and set off at different speeds so they’re never in quite the same configuration. If you hang around long enough you might spot something else in the clouds, too – but we’re not going to spoil the surprise here – you’ll just have to wait and see!

Features and content

Our new site is much larger than the old one – a reflection of how much we’ve grown in the last couple of years. We’ve added separate pages for each of the services we offer, so we’re a bit more visible for our key services – website design and development.

We’ve also taken the time to talk about ourselves, what (we think) makes us worth hiring, and to list a few FAQs – give us a shout if you think of anything we’ve missed.

Our portfolio now includes separate pages for a handful of recent projects, giving us an opportunity to show off the work we’re so proud of.

The new blog section will prove extremely handy for news and updates on our services – we also plan to post more in-depth case studies of our favourite website projects in future. Watch this space!

The nuts and bolts

We’ve built the new site around the WordPress CMS engine, mainly thanks to the control this gives us over the inner workings of the site. It also helps that we frequently work using WordPress as one of our preferred content management systems.

The new site doesn’t use any Flash – we’ve moved entirely onto alternative technology for our galleries (jQuery). This is mainly so those visitors with iPads and iPhones can browse the site without missing all the good stuff.

We’re pleased to be able to implement some of the features of the latest up-to-date code (HTML5 and CSS3) in building our new website, but as ever our focus is in making sure that the site is attractive, functional and easy to use. Hopefully you agree with us!

In conclusion

The new website represents the latest stage in our repositioning exercise, which is now taking place.

Over the past few years we’ve been hard at work building up our sister company, Phosys, to focus on website design for photographers. Hundreds of photographers now use the Phosys system to manage their websites and sell images online and the brand is going from strength to strength.

Over the coming months we will be building The Cybermill to focus specifically on servicing businesses by offering premium creative digital services. The Cybermill has been established for over 10 years – we build bespoke websites and applications for small-medium sized business in and around York and Yorkshire, as well as further afield.

We’d love to hear your comments about the new website – you can send these in using the form below.