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
Jamie Dornan as Christian Grey in the first-look Fifty Shades of Grey movie still

film
Arts and Entertainment
Sue Perkins and Mel Giedroyc, centre, are up for Best Female TV Comic for their presenting quips on The Great British Bake Off

TV
Arts and Entertainment
Martin Freeman as Lester Nygaard in the TV adaptation of 'Fargo'

TV
Arts and Entertainment
A scene from Shakespeare in Love at the Noel Coward Theatre
theatreReview: Shakespeare in Love has moments of sheer stage poetry mixed with effervescent fun
PROMOTED VIDEO
Have you tried new the Independent Digital Edition apps?
Arts and Entertainment
<p><strong>2008</strong></p>
<p>Troubled actor Robert Downey Jr cements his comeback from drug problems by bagging the lead role in Iron Man. Two further films follow</p>

film
Arts and Entertainment

theatre
Arts and Entertainment
Tycoons' text: Warren Buffett and Bill Gates both cite John Brookes' 'Business Adventures' as their favourite book

books
Arts and Entertainment
Panic! In The Disco's Brendon Urie performs on stage

music
Arts and Entertainment

film
Arts and Entertainment
Keira Knightley and Benedict Cumberbatch star in the Alan Turing biopic The Imitation Game

film
Arts and Entertainment

TV
Arts and Entertainment
Radio 4's Today programme host Evan Davis has been announced as the new face of Newsnight

TV
Arts and Entertainment
Pharrell Williams performing on the Main Stage at the Wireless Festival in Finsbury Park, north London

music
Arts and Entertainment
Carrie Mathison returns to the field in the fourth season of Showtime's Homeland

TV
Arts and Entertainment
Crowds soak up the atmosphere at Latitude Festival

music
Arts and Entertainment
Meyne Wyatt and Caren Pistorus arrive for the AACTA Aawrds in Sydney, Australia

TV
Arts and Entertainment
Rick Astley's original music video for 'Never Gonna Give You Up' has been removed from YouTube

music
Arts and Entertainment
Quentin Blake's 'Artists on the beach'

Artists unveils new exhibition inspired by Hastings beach

art
Arts and Entertainment
MusicFans were left disappointed after technical issues
Arts and Entertainment
'Girl with a Pearl Earring' by Johannes Vermeer, c. 1665
artWhat is it about the period that so enthrals novelists?
Arts and Entertainment
Into the woods: The Merry Wives of Windsor at Petersfield
theatreOpen-air productions are the cue for better box-office receipts, new audiences, more interesting artistic challenges – and a picnic
Arts and Entertainment
James singer Tim Booth
latitude 2014
Arts and Entertainment
Lee says: 'I never, ever set out to offend, but it can be an accidental by-product'
comedy
Arts and Entertainment
tvThe judges were wowed by the actress' individual cooking style
Independent
Travel Shop
the manor
Up to 70% off luxury travel
on city breaks Find out more
santorini
Up to 70% off luxury travel
on chic beach resorts Find out more
sardina foodie
Up to 70% off luxury travel
on country retreats Find out more
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.

    Screwing your way to the top? Good for Lana Del Rey for helping kill that myth

    Screwing your way to the top?

    Good for Lana Del Rey for helping kill that myth, says Grace Dent
    Will the young Britons fighting in Syria be allowed to return home and resume their lives?

    Will Britons fighting in Syria be able to resume their lives?

    Tony Blair's Terrorism Act 2006 has made it an offence to take part in military action abroad with a "political, ideological, religious or racial motive"
    Beyoncé poses as Rosie the Riveter, the wartime poster girl who became a feminist pin-up

    Beyoncé poses as Rosie the Riveter

    The wartime poster girl became the ultimate American symbol of female empowerment
    The quest to find the perfect pair of earphones: Are custom, 3D printed earbuds the solution?

    The quest to find the perfect pair of earphones

    Earphones don't fit properly, offer mediocre audio quality and can even be painful. So the quest to design the perfect pair is music to Seth Stevenson's ears
    US Army's shooting star: Lt-Col Steven Cole is the man Hollywood calls when it wants to borrow a tank or check a military uniform

    Meet the US Army's shooting star

    Lt-Col Steven Cole is the man Hollywood calls when it wants to borrow a tank or check a military uniform
    Climate change threatens to make the antarctic fur seal extinct

    Take a good look while you can

    How climate change could wipe out this seal
    Should emergency hospital weddings be made easier for the terminally ill?

    Farewell, my lovely

    Should emergency hospital weddings be made easier?
    Man Booker Prize 2014 longlist: Crowdfunded novel nominated for first time

    Crowdfunded novel nominated for Booker Prize

    Paul Kingsnorth's 'The Wake' is in contention for the prestigious award
    Vladimir Putin employs a full-time food taster to ensure his meals aren't poisoned

    Vladimir Putin employs a full-time food taster

    John Walsh salutes those brave souls who have, throughout history, put their knives on the line
    Tour de France effect brings Hollywood blockbusters to Yorkshire

    Tour de France effect brings Hollywood blockbusters to Yorkshire

    A $25m thriller starring Sam Worthington to be made in God's Own Country
    Will The Minerva Project - the first 'elite' American university to be launched in a century - change the face of higher learning?

    Will The Minerva Project change the face of higher learning?

    The university has no lecture halls, no debating societies, no sports teams and no fraternities. Instead, the 33 students who have made the cut at Minerva, will travel the world and change the face of higher learning
    The 10 best pedicure products

    Feet treat: 10 best pedicure products

    Bags packed and all prepped for holidays, but feet in a state? Get them flip-flop-ready with our pick of the items for a DIY treatment
    Commonwealth Games 2014: Great Scots! Planes and pipers welcome in Glasgow's Games

    Commonwealth Games 2014

    Great Scots! Planes and pipers welcome in Glasgow's Games
    Jack Pitt-Brooke: Manchester City and Patrick Vieira make the right stand on racism

    Jack Pitt-Brooke

    Manchester City and Patrick Vieira make the right stand on racism
    How Terry Newton tragedy made iron men seek help to tackle their psychological demons

    How Newton tragedy made iron men seek help to tackle their psychological demons

    Over a hundred rugby league players have contacted clinic to deal with mental challenges of game