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
James Hewitt has firmly denied being Harry’s father

theatre
Arts and Entertainment
British actor Idris Elba is also a DJ and rapper who played Ibiza last summer

film
Arts and Entertainment
The Doctor and Clara have their first real heart to heart since he regenerated in 'Deep Breath'
TV
Arts and Entertainment
Jamie Oliver
filmTV chef Jamie Oliver turned down role in The Hobbit
News
The official police photograph of Dustin Diamond taken after he was arrested in Wisconsin
TVDownfall of the TV star charged with bar stabbing
PROMOTED VIDEO
Arts and Entertainment
J Jefferson Farjeon at home in 1953
booksBooksellers say readers are turning away from modern thrillers and back to golden age of crime writing
Arts and Entertainment
Female fans want more explicit male sex in Game of Thrones, George R R Martin says

film George RR Martin owns a cinema in Santa Fe

Have you tried new the Independent Digital Edition apps?
Arts and Entertainment

ebooksNow available in paperback
Arts and Entertainment

ebooks
Arts and Entertainment
Clued up: John Lynch and Gillian Anderson in ‘The Fall’

TV review

Arts and Entertainment
The Baker (James Corden) struggles with Lilla Crawford’s Little Red Riding Hood

film...all the better to bamboozle us
Arts and Entertainment
English: Romantic Landscape

art
Arts and Entertainment
Laugh a minute: Steph Parker with Nigel Farage

TV
Arts and Entertainment
Comic Ivor Dembina has staged his ‘Traditional Jewish Xmas Eve Show’ for the past 20 years; the JNF UK charity is linked to the Jewish National Fund, set up to fund Jewish people buying land in Palestinian territories
comedy

Arts and Entertainment
Transformers: Age of Extinction was the most searched for movie in the UK in 2014

film
Arts and Entertainment
Mark Ronson has had two UK number two singles but never a number one...yet

music
Arts and Entertainment
Clara Amfo will take over from Jameela Jamil on 25 January

radio
Arts and Entertainment
This is New England: Ken Cheeseman, Ann Dowd, Frances McDormand and Richard Jenkins in Olive Kitteridge

The most magnificently miserable show on television in a long timeTV
Arts and Entertainment
Andrea Faustini looks triumphant after hearing he has not made it through to Sunday's live final

TV
Arts and Entertainment
Rhys says: 'I'm not playing it for laughs, but I have learnt that if you fall over on stage, people can enjoy that as much as an amazing guitar solo'
musicGruff Rhys on his rock odyssey, and the trouble with independence
Arts and Entertainment
Krysia and Daniel (Hand out press photograph provided by Sally Richardson)
How do today's composers answer the challenge of the classical giant?
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.

    A timely reminder of the bloody anniversary we all forgot

    A timely reminder of the bloody anniversary we all forgot

    Who remembers that this week we enter the 150th anniversary year of the end of the American Civil War, asks Robert Fisk
    Homeless Veterans appeal: Former soldiers pay their respects to a friend who also served

    Homeless Veterans appeal

    Former soldiers pay their respects to a friend who also served
    Downfall of Dustin 'Screech' Diamond, the 'Saved By The Bell' star charged with bar stabbing

    Scarred by the bell

    The downfall of the TV star charged with bar stabbing
    Why 2014 was a year of technological let-downs

    Why 2014 was a year of technological let-downs

    Security breaches and overhyped start-ups dominated a year in which very little changed (save the size of your phone)
    Cuba's golf revolution: But will the revolutionary nation take 'bourgeois' game to its heart?

    Will revolutionary Cuba take 'bourgeois' golf to its heart?

    Fidel Castro ridiculed the game – but now investment in leisure resort projects is welcome
    The Locked Room Mysteries: As a new collection of the genre’s best is published, its editor Otto Penzler explains the rules of engagement

    The Locked Room Mysteries

    As a new collection of the genre’s best is published, its editor explains the rules of engagement
    Amy Adams on playing painter Margaret Keane in Tim Burton's Big Eyes

    How I made myself Keane

    Amy Adams hadn’t wanted to take the role of artist Margaret Keane, because she’d had enough of playing victims. But then she had a daughter, and saw the painter in a new light
    Ed Richards: Parting view of Ofcom chief. . . we hate jokes on the disabled

    Parting view of Ofcom chief... we hate jokes on the disabled

    Bad language once got TV viewers irate, inciting calls to broadcasting switchboards. But now there is a worse offender, says retiring head of the media watchdog, Ed Richards
    A look back at fashion in 2014: Wear in review

    Wear in review

    A look back at fashion in 2014
    Ian Herbert: My 10 hopes for sport in 2015. Might just one of them happen?

    Ian Herbert: My 10 hopes for sport in 2015

    Might just one of them happen?
    War with Isis: The West needs more than a White Knight

    The West needs more than a White Knight

    Despite billions spent on weapons, the US has not been able to counter Isis's gruesome tactics, says Patrick Cockburn
    Return to Helmand: Private Davey Graham recalls the day he was shot by the Taliban

    'The day I was shot by the Taliban'

    Private Davey Graham was shot five times during an ambush in 2007 - it was the first, controversial photograph to show the dangers our soldiers faced in Helmand province
    Revealed: the best and worst airlines for delays

    Revealed: the best and worst airlines for delays

    Many flyers are failing to claim compensation to which they are entitled, a new survey has found
    The stories that defined 2014: From the Scottish independence referendum to the Ice Bucket Challenge, our writers voice their opinions

    The stories that defined 2014

    From the Scottish independence referendum to the Ice Bucket Challenge, our writers voice their opinions
    Stoke-on-Trent becomes first British city to be classified as 'disaster resilient' by the United Nations

    Disaster looming? Now you know where to head...

    Which British city has become the first to be awarded special 'resilience' status by the UN?