Network: Web Design - He who prepares, wins

Designing a website is a lot like putting together pieces in a jigsaw puzzle

YOUR BOSS wants you to create a website with about 15 pages. The catch is, she needs it by tomorrow afternoon. What do you do? Panic? Quit?

No. Just follow these four easy steps, and your site will be up and running in no time:

1) Plan

Before you even glance at your computer, you first need to sit down and plan out several aspects of the site. Designing websites is a lot like putting together a jigsaw puzzle. Each piece must fit and link together perfectly to form a uniform picture. Ideally, the elements sit together on the page - text, colours, backgrounds and graphics - each component in the overall design fitting together seamlessly. Like a jigsaw puzzle, you can't force the pieces together. Well, actually you can, but you get the same results in both cases: a big mess. Planning your site before you start coding away may seem like a waste of precious time, but it will save time in the long run.

Define the audience. I can't stress this enough: know your audience. Even for a small project, you need to know who is going to be using it and what they are looking for so that you can better serve their needs when planning the site navigation and layout.

Define and gather the content. The content is the meat of your site (www.webbedenvironments.com/60.html). You need to collect all of the text, graphics, and anything else that will be included on the pages of the site.

Define the navigation. If the site is only a few pages, then you can get away with a single navigational menu. But you may need to separate the various pages into sections and use a main menu and sub-menus. Look at the content and see if you can group different pages together into like categories. These categories will form your main menu, with each page represented in sub-menus.

Create a quick flow chart of how the visitor will navigate through the different pages of the site, giving a brief (just a few words) description of what will be going on each page. You should also include the name of the HTML file for that page so that you can reference the flow chart later when you are putting the site together.

Sketch what a typical page should look like. You can do this in a graphics program, such as Photoshop or Freehand, or you can use pencil and paper. You don't have to go into a lot of detail. The important thing is to plan where the various elements of your layout are going to fit into the page (www.webbedenvironments.com/65.html). For speed, you should try to make all of the pages in the site conform to the same layout.

Get feedback. It's important to get input at this point from whomever you are making this site for to make sure that this is what they want. There is nothing worse than coding a hundred Web pages only to have your boss tell you that it's not what she wanted.

2) Create

Now you are ready to code. Create a template: using your favourite HTML editor, follow the sketch that you made in the planning stage. Create the menus with links, add logos or other graphics that will appear on every page, and use dummy text for your content. This will help you see how the text works on the page before you put in the final content. You should also include notes in your HTML showing where the different parts of the page begin and end. After you have finished testing the template, and are satisfied that it works perfectly, save it as TEMPLATE.html. Creating a template not only saves you time while you are creating the site, it does so later if you need to go back and add pages.

Set up your file structure. Make a copy of the template file for each page in the site using the flow chart you created as a guide. You can now test your navigation and make any adjustments.

Add the content. If you are lucky, all of the text and graphic content is already in digital format, and all you will have to do is copy and paste. If not, I hope you have a good scanner and can type quickly. The clock is ticking.

3) Test

Go through your site with a fine-tooth comb.

Navigation. Check each link to make sure that it not only goes somewhere, but that it goes to the right place. Most good HTML editors will warn you if a link is invalid, but no program can know whether you slipped up and used the wrong URL.

Look for spelling mistakes and typos. Again, most HTML editors will have a spell-checker, but they cannot catch everything.

Before the site goes live, get feedback from the people you are making the site for. Have them check for mistakes as well. You are probably sleep- deprived from staying up all night to finish this thing.

4) Deploy

The final step is to put your site out into the wild. But even though you have tested the site while it sat on your hard drive, always test the navigation again when it is online.

General Tips:

Don't try anything new. Go with what you know. You are under a deadline; now is not the time to teach an old dog new tricks.

Use as few graphics as possible. Graphics can eat up a lot of your time. Use HTML text for your menus and titles. If you want to add a little colour to your pages, use table background colours and Cascading Style Sheets.

Use CSS to control typography. Use it instead of tags to control the appearance of text on the screen. This can save you a lot of time, not only because it will cut down on coding, but when your boss says she wants the headers to be green instead of blue, all you have to do is make a change in one file instead of every page.

Jason Cranford Teague is a senior information architect at iXL and the author of `DHTML for the World Wide Web'. If you have questions, you can find an archive of this column at Webbed Environments (HYPERLINK http://www.webbed environments.com) or e-mail him at jason@webbed environments.com

Arts and Entertainment
Performers drink tea at the Glastonbury festival in 2010

GlastonburyWI to make debut appearance at Somerset festival

Arts and Entertainment
Lena Headey as Cersei Lannister

TV reviewIt has taken seven episodes for Game of Thrones season five to hit its stride

Arts and Entertainment
Jesuthasan Antonythasan as Dheepan

FilmPalme d'Or goes to radical and astonishing film that turns conventional thinking about immigrants on its head

Arts and Entertainment
Måns Zelmerlöw performing

Eurovision
Arts and Entertainment
Graham Norton was back in the commentating seat for Eurovision 2015

Eurovision
Arts and Entertainment
The light stuff: Britt Robertson and George Clooney in ‘Tomorrowland: a World Beyond’
film review
Arts and Entertainment
Reawakening: can Jon Hamm’s Don Draper find enlightenment in the final ‘Mad Men’?
tv reviewNot quite, but it's an enlightening finale for Don Draper spoiler alert
Have you tried new the Independent Digital Edition apps?
Arts and Entertainment

ebooksNow available in paperback
Arts and Entertainment

ebooks
Arts and Entertainment
Breakfast Show’s Nick Grimshaw

Radio
Arts and Entertainment

Eurovision
Arts and Entertainment
'Youth' cast members Paul Dano, Jane Fonda, Harvey Keitel, Rachel Weisz, and Michael Caine pose for photographers at Cannes Film Festival
film
Arts and Entertainment
Adam West as Batman and Burt Ward and Robin in the 1960s Batman TV show

Comics
Arts and Entertainment
I am flute: Azeem Ward and his now-famous instrument
music
Arts and Entertainment
A glass act: Dr Chris van Tulleken (left) and twin Xand get set for their drinking challenge
TV review
Arts and Entertainment
MIA perform at Lovebox 2014 in London Fields, Hackney

music
Arts and Entertainment
Finnish punk band PKN hope to enter Eurovision 2015 and raise awareness for Down's Syndrome

eurovision
Arts and Entertainment
William Shakespeare on the cover of John Gerard's The Herball or Generall Historie of Plantes

books
Arts and Entertainment

Game of Thrones review
Arts and Entertainment
Grayson Perry dedicates his Essex home to Julie

Potter's attempt to create an Essex Taj Mahal was a lovely treat

tv
Arts and Entertainment
A scene from the original Swedish version of the sci-fi TV drama ‘Real Humans’
tv
Arts and Entertainment
Hugh Keays-Byrne plays Immortan Joe, the terrifying gang leader, in the new film
filmActor who played Toecutter returns - but as a different villain in reboot
Arts and Entertainment
Charlize Theron as Imperator Furiosa in Mad Max: Fury Road
film
Arts and Entertainment
Jessica Hynes in W1A
tvReview: Perhaps the creators of W1A should lay off the copy and paste function spoiler alert
Arts and Entertainment
Power play: Mitsuko Uchida in concert

classical
Arts and Entertainment
Dangerous liaisons: Dominic West, Jake Richard Siciliano, Maura Tierney and Leya Catlett in ‘The Affair’ – a contradictory drama but one which is sure to reel the viewers in
TV review
Arts and Entertainment
Richard Herring, pictured performing at the Edinburgh Fringe Festival two years ago
comedy
Arts and Entertainment
Music freak: Max Runham in the funfair band
theatre
Arts and Entertainment
film 'I felt under-used by Hollywood'
Latest stories from i100
Have you tried new the Independent Digital Edition apps?

ES Rentals

    Independent Dating
    and  

    By clicking 'Search' you
    are agreeing to our
    Terms of Use.

    Abuse - and the hell that came afterwards

    Abuse - and the hell that follows

    James Rhodes on the extraordinary legal battle to publish his memoir
    Why we need a 'tranquility map' of England, according to campaigners

    It's oh so quiet!

    The case for a 'tranquility map' of England
    'Timeless fashion': It may be a paradox, but the industry loves it

    'Timeless fashion'

    It may be a paradox, but the industry loves it
    If the West needs a bridge to the 'moderates' inside Isis, maybe we could have done with Osama bin Laden staying alive after all

    Could have done with Osama bin Laden staying alive?

    Robert Fisk on the Fountainheads of World Evil in 2011 - and 2015
    New exhibition celebrates the evolution of swimwear

    Evolution of swimwear

    From bathing dresses in the twenties to modern bikinis
    Sun, sex and an anthropological study: One British academic's summer of hell in Magaluf

    Sun, sex and an anthropological study

    One academic’s summer of hell in Magaluf
    From Shakespeare to Rising Damp... to Vicious

    Frances de la Tour's 50-year triumph

    'Rising Damp' brought De la Tour such recognition that she could be forgiven if she'd never been able to move on. But at 70, she continues to flourish - and to beguile
    'That Whitsun, I was late getting away...'

    Ian McMillan on the Whitsun Weddings

    This weekend is Whitsun, and while the festival may no longer resonate, Larkin's best-loved poem, lives on - along with the train journey at the heart of it
    Kathryn Williams explores the works and influences of Sylvia Plath in a new light

    Songs from the bell jar

    Kathryn Williams explores the works and influences of Sylvia Plath
    How one man's day in high heels showed him that Cannes must change its 'no flats' policy

    One man's day in high heels

    ...showed him that Cannes must change its 'flats' policy
    Is a quiet crusade to reform executive pay bearing fruit?

    Is a quiet crusade to reform executive pay bearing fruit?

    Dominic Rossi of Fidelity says his pressure on business to control rewards is working. But why aren’t other fund managers helping?
    The King David Hotel gives precious work to Palestinians - unless peace talks are on

    King David Hotel: Palestinians not included

    The King David is special to Jerusalem. Nick Kochan checked in and discovered it has some special arrangements, too
    More people moving from Australia to New Zealand than in the other direction for first time in 24 years

    End of the Aussie brain drain

    More people moving from Australia to New Zealand than in the other direction for first time in 24 years
    Meditation is touted as a cure for mental instability but can it actually be bad for you?

    Can meditation be bad for you?

    Researching a mass murder, Dr Miguel Farias discovered that, far from bringing inner peace, meditation can leave devotees in pieces
    Eurovision 2015: Australians will be cheering on their first-ever entrant this Saturday

    Australia's first-ever Eurovision entrant

    Australia, a nation of kitsch-worshippers, has always loved the Eurovision Song Contest. Maggie Alderson says it'll fit in fine