Communicating with a web developer

 

Developing a website is expensive and complex, so it is vital that you communicate

properly with your web developer – and that you listen to their professional advice.

The first important aspect is making sure that you have the correct documents.

These are: • Your design specification sheet and the designs your designer has created, which you have approved.

• Your technical brief, which you will work on with your developer and transform into your technical specification sheet.

• Information about your hosting and domain name arrangements.

When you meet with your developer, explain in normal language what sorts of

features and goals you want for your website, outlining as many details as possible,

and feel free to show examples. Take the time to understand the developer’s input

and suggestions, and ask them to create a technical specification sheet for the

project. Then do your homework by researching the suggestions made to make

sure you fully understand the parameters of what the developer has suggested.

Remember that a developer is a professional but may not be looking at all the

important aspects, like your target market, so be open to new ideas but keep your own view in mind.

A web developer will strive to make your website meet the following five criteria:

1. Easy to update. Ideally, your website should have a simple CM S that you can

manipulate easily and without technical expertise.

2. Quick to load. Your website must have a small enough file size so that is

will load quickly for a wide variety of people using different computers, connections and browsers.

3. Easy to find. Depending on your contract agreement, your developer will

optimise your website so that it will be found easily by a search engine. Note

that this could be a separate expense.

4. Interactive. Your developer will include interactive elements like the navigation,

links, a search feature or other additions. Your development costs will vary

depending on how many extras you want.

5. Secure. Your developer should put measures in place to protect your website

against spammers, viruses and other web risks.

Like with any other project, make sure that you clarify rates and deadlines before

you approve the work – and be prepared for unexpected delays or problems,

which can occur regularly with web development. Outline the exact outcomes and

deliverables of the project in clear terms; find out what service or maintenance

agreement – if any – is included in the cost. Keep a good documented record of all

decisions made, in case there is a dispute about an aspect of the project.

You will be given the chance to make small corrections as the project progresses,

within reason, but understand what it means when you “sign off” on something.

Signing off means that you are happy with and fully approve the feature under

discussion; after you have signed off, the element cannot be changed again

(except at considerable cost when the developer must revert the project to an

earlier phase). Be completely sure that you are happy with something before you sign off on it.

Website Problems

The website has many problems, including:

• No focus – the viewer doesn’t know where to look or what to click.

• Multiple colourful backgrounds and font colours are confusing – what is a link?

• No defined corporate identity – where is the logo and the brand-appropriate design?

• Hard to read text in the navigation bar (grey on red).

• Vertical navigation makes the visitor scroll down, and the links are not clearly named.

• Far too much clutter and content that is not optimised for web reading. No

white space to guide the eye or create a sense of order.

• Unrelated content – why is there a picture of a welder?

• The page is not centred – it appears on the left of the screen.

• In addition, the site plays music automatically. This is undesirable for several

reasons: it dramatically slows the loading time of the page, it annoys the

viewer and it can infringe copyright, as it seems to do in this case.

Good design:

• Excellent design layout means that the entire page appears above the fold (you don’t need to scroll down at all).

• Good use of white space and symmetrical layout. Content is minimal.

• Having two navigation bars is confusing, but the links are clearly labelled.

• Text is well laid out for readability and is short, and the headings are clearly defined.

• The three blocks at the bottom suggest calls to action.

Web style guides

The process of designing a website involves choosing specific colours, fonts,

images, layouts and other elements. Once your page is conceptualised, it is a

good idea to create a web style guide. Your web style guide is a document that

defines all your design choices, so that your approach is standardised and easy to

refer to if changes need to be made. It also defines key framework and technical

aspects that are important to remember when making additions or changes. This

document is very useful for maintaining a coherent and attractive website and

helps a new designer get up to speed with your design choices. You should update

it regularly to make sure it conforms to your current designs.

For a small business, it is sufficient to note the basic style elements, colours,

fonts and layout preferences, as well as the approaches to usability and user friendliness

(for example, never having more than five headings in the navigation bar).

 
  

   

Online copywriting

Online copy is any promotional written communication, as opposed to images,

graphs or other content, that you publish online. Online copywriting is not the

same as online writing in general. Specifically, copywriting is the art of creating

persuasive text that promote your product or brand. Copywriting explains,

endorses, convinces, attracts and persuades. Any writing that you publish about

your business, both online and off, will fall under the category of copywriting:

your website, brochures, promotional articles, emails and so on. While professional

copywriting for marketing purposes is a specialist skill, anyone can learn to write

effective, engaging content about their brand.

Where do I find it?

Everywhere. Here are just some of the places where you will find online copywriting:

• Websites. All text on a website is web copy, from the home and contact

                   pages to the customer feedback and product descriptions.

• Blogs. Business-run blogs are the epitome of online copywriting.

• Email promotions. Any marketing messages sent by email, like newsletters

                                 and special offers, fall under copywriting.

• Online adverts. The text of any online advertising is also web copy, since it is

persuasive writing used to promote your product or brand.

 Promotional articles and press releases. If you write commissioned articles

about your product, even ones that are loosely related, you are writing web copy.

 

Copy can be divided into two broad categories. Short copy comprises the small

 

bits of text that are dotted around your website, in your online adverts, your

promotional emails, blurbs and so on. Short copy is generally only a few sentences

long and must be direct, to the point and action oriented.

Long copy, in comparison, is any longer piece of writing, like a blog post, email

newsletter, press release or article. Long copy allows you to expand on an idea

and build a brand personality, which helps you engage with your readers, but

needs a strong headline and good style to ensure it is read. Both long and short

copy have an important place on the web and in your brand strategy.

Content management system

 

 

A content management system (CM S) is the system that you use to add or change

content on your page. CM Ses come in varying degrees of complexity, and the one

you will choose to use will depend on your internet skills and on how often you

modify your page’s content. The three options are:

1. Basic template CM S. This type of CM S can be used by anyone because it is

very simple and just requires the user to enter the new data. No technical

knowledge is needed. If you have ever used WordPress (www.wordpress.

com) or Blogger, you have used a simple template CM S. Yola also has a basic

template CM S. This is also the cheapest option, but has the fewest features.

2. Open source CM S. This type of CM S is more advanced and can be customised

by a web developer to include the features you want. This can be a good

option for non-technical people, depending on your choice of open source

CM S. Joomla (www.joomla.org) is a popular option. Open source CM Ses are also free.

3. Custom CM S. Some advanced websites need a custom-build CM S and

generally require a web developer to manage them. This option is viable if

you plan to hire an agency to create your website or if you have a dedicated

IT department; however, the other options are perfectly suitable. Building a

custom CM S is very expensive.

If you plan to update and add content to your page often, choose a CM S that you

find easy to use – that way, you can manage the content yourself without having

to hire a web developer. If your page is going to remain largely static with few

changes, which is unlikely, it is all right to pick a more complex option – but even

in this scenario, you can save yourself time and money by using a system you

understand. The complexity of your website is largely dependent on which CM S

you choose.

Writing for the web

Web copywriting is a specific and unique type of writing, and often requires a

specific touch to get it right. The most important things to remember are to keep

your writing very simple (using short sentences, common words and plenty of

paragraphs), to put the most important ideas first and to structure your text so

that it is easy to read (by using bullet points, bold, spacing and so on). 
 

Basic web design principles

 

 

Whether you plan to design your website yourself or to hire a professional to help

you, it is important to understand the principles of good web design. Even though

a lot of what makes a page attractive is in the eye of the beholder, there are

definite web design principles that your should keep in mind. Remember to tailor

your page to the expectations of your customers.

Keep it simple. A website with a complex navigation, many sidebar links, lots of

text and dozens of images will only confuse and put off your visitors. Keep your

design as simple and neat as possible, and trim away excess content – especially

on your home page. Your visitor should have no doubt about what you want them

to look at and click. If you do need to present a lot of information, make sure it is

extremely well structured and that your navigation is clear.

Prefer minimalism. Web design puts a high value on “white space”, or the empty

places between page elements (which is typically, but not necessarily, white). It is

good to have a lot of white space so that your page looks uncluttered and stylish.

It also helps lead the viewer’s eye to the most important elements – which is part

of a good viewer interface (see section 4.4). This doesn’t mean having a page

that is practically empty; it means that you shouldn’t clutter things and all the

elements of your page should have their own place and be easy to see.

Screen resolution. Screen resolution is the size and shape of the computer

monitor that your page will be viewed on. Most web users have quite a high

screen resolution, though most still use the “square” aspect ratio rather than a “widescreen” one.

Limit your colours and fonts. In line with the philosophy that simple is best, keep

your design to just a few complementary colours and never use more that three

fonts on your website – one is sufficient, as is a standard size. A very important

thing to remember when planning your content is never to make entire words or

sentences capital letters unless it is absolutely necessary – in the online world,

using caps is the equivalent to shouting. Take inspiration from your corporate

identity and existing business designs

Also, make sure that your colours and fonts are “web safe”. Web-safe fonts and

colours are those that anyone using any type of computer and web browser will

be able to view. Never use elements on your page that are not web safe, no

matter how nice they may look: if your customer doesn’t have your obscure font

installed on their computer, they will just see an empty page or a line of gibberish.

Practical considerations. Use your own common sense when you assess your own

page and make adjustments accordingly. Is the text too small or too big? Does

the font and background colour combination make the words hard to read? Is

your heading too big or indistinguishable from the main text? Do your images load

properly, or do they take a long time to appear? Do you have to scroll sideways to

view the whole page? Are there any unnecessary elements cluttering your view?

Are related topics and items grouped together, or is there no discernible order? A

detailed examination of your page will reveal issues like these.

To see more things to watch out for, refer to www.ratz.com/featuresbad.html.

Remember that a website isn’t about its individual elements at the end of the day,

but about what it looks like as a whole – so assess your website as a whole once

you are happy with the elements.

Standardise your style. There is nothing worse than a schizophrenic website with

a new design on every page and a different font and colour for each element.

Make sure that your design stays consistent throughout your website. A good way

to ensure this is to tell your developer to use CSS (which stands for “cascading

style sheet”) when coding your website. This works just like paragraph styles in

Microsoft Word: you can define what “heading 1” or “body text” should look like

by creating a CSS style, and if you ever want to update your page, you can simply

tweak the CSS and the update will be applied to your entire page.

General principles of good writing

 

 

Start with a plan. Before you begin writing, take some time to plan exactly what

you want to say and what purpose you want to achieve with your writing. Consider

how you want to present your information – should it be a list, a blog article, a

table or maybe even an image instead of text? Keep your goal in mind as you write.

Keep it simple. Simple writing means short sentences, clear and direct phrasing

and avoiding complex words or jargon. Use as few words as possible to bring your

point across, and avoid padding your writing with unnecessary adjectives.

• Wrong: Our very exciting new service will completely and totally overhaul the

way you understand and think about web design, CSS, CM S and customer subscription solutions.

• Right: Our new service will change the way you look at all aspects of web development.

Be active, not passive. Wherever possible, write your copy using an active voice rather than a passive one.

• Passive: A large range of services is offered by our company to meet your needs.

• Active: We offer a large range of services to meet your needs.

Write for readability. Readability is a word that means “ease of reading”. There

are many ways to make your text easier to understand. Use bolding or italics to

highlight important words, short paragraphs to keep your ideas separate, bullet

points to outline important details and subheadings to give your text structure.

Do not write whole words or paragraphs in capital letters – this is the equivalent of

shouting online and has the same negative reaction. Most web readers scan text,

which means they run their eyes over it quickly without absorbing everything.

Using these tricks will make your text more scannable and will make sure the crucial things stand out.

• Wrong: Our product has many features, like helping you to manage your

digital documents, keep a list of your online contacts, archive your emails and manage your diary.

• Right: Our product features:

o Manage your digital documents

o Store online contacts

o Archive emails

o Manage your calendar

Be consistent. Every aspect of your brand should be consistent, and this is especially

important for your writing. Always make sure that your written communications use

the same terms, vocabulary, spelling, tone and level of complexity, not to mention

the small but vital stylistic elements. Though you will use different techniques for

you website, blog and other channels, all your writing should feel that it comes

from the same source. An excellent way of achieving this is to create a style guide

for your brand. A style guide specifies the standard terms, spelling and so on for

your brand-related writing – for example, do you spell the word “internet” with a

capital or lower case “i”? You can consult an editor to help you construct one, or

you can download this detailed guide: www.techwr-l.com/files/examplestyleguide.

pdf (note that it refers to US conventions). The Yahoo Style Guide is also an

excellent starting resource: styleguide.yahoo.com.

Be creative. It is perfectly acceptable to let your own creative voice come through

in your writing. You don’t want to sound like a carbon copy of every other product

or brand available. A bit of brand personality (discussed in more detail chapter 7)

is a good thing. Also be creative in what content you create – find new angles,

ideas and niches to explore.

Use correct spelling and grammar. You will look extremely unprofessional if you

have dozens of grammatical mistakes and spelling or typing errors in your writing.

If you keep things simple and consistent, you should have no trouble writing

correctly. Don’t hesitate to consult a dictionary or grammar guide if you are stuck

• Wrong: Our web tool have many useful featurs. You can customize your web site easiliy.

• Right: Our web tool has many useful features. You can customise your website easily.

Proofread your writing. One of the easiest ways to check whether your writing is

correct and clear is, quite simply, to read it. Proofreading is the process of reading

a piece of text in detail and fixing any stylistic, grammatical or content mistakes

that you find. Even if you are not a language expert, you will find that you pick up

lots of small errors on your own. You can also consider hiring a freelance editor to

check your writing for you. A helpful hint is to leave the content for a day before

you go back to proofread it – the time refreshes your mind and makes it easier to

pick up any errors

The parts of a web page

 

 

Every page on your website consists of several distinct parts or elements. There

 

are two important concepts to consider. First, these elements can either be static

– which means that they remain identical on each page of your website (this is

also called “universal” or “global”) – or dynamic – which means that they change

from page to page. Second, every web page has a “fold”, which is the imaginary

line at the bottom of your screen: if an element is “above the fold”, it means

you can view it without scrolling down; “below the fold” is the opposite of this.

Because of this, content that is above the fold generally gets more exposure than

content that is below it, which in turn impacts where you’ll place elements and key

information on a web page.

Here are the main components of a web page, and the criteria that should apply to them.

• The header. Your header is the top-most element of your web page and is

the part that includes your brand name and logo. This is where customers will

look to identify your page, so be sure that it is clear and striking. Your logo

should always appear on the top left of the page, and should be a clickable

image that takes you to the home page. You header will be static and will

always appear above the fold.

• The navigation bar. One step below your header is the navigation bar – the

row of buttons that visitors click on to get to other parts of your site. Always

make sure that your navigation is a horizontal bar at the top, and not a

vertical bar. Depending on the complexity of your page, your navigation bar

could consist of just a few buttons, or it could have elaborate dropdown

menus with many links. Your navigation bar will usually remain static and

will always appear above the fold. It is vital that you give your links obvious

names, so that visitors have no trouble finding what they need. The worst

type of navigation is “mystery meat” navigation, where the visitor is not

given any clues about where each click will take them.

If your page is complex enough, you could consider adding contextual

navigation, which is navigation that changes dynamically depending on where

the user is on your page. Examples of this are “breadcrumb” links, which show

where in the context of the entire website you are, and expanded navigation

bars, which appear as submenus to the main navigation.