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
music Malik left the Asian leg of the band's world tour after being signed off with stress last week
News
Author J.K. Rowling attends photocall ahead of her reading from 'The Casual Vacancy' at the Queen Elizabeth Hall on September 27, 2012 in London, England.
peopleNot the first time the author has defended Dumbledore's sexuality
News
‘The Late Late Show’ presenter James Corden is joined by Mila Kunis and Tom Hanks for his first night as host
news
Arts and Entertainment
Joanne Harris, author of Chocolat and Blackberry Wine, wrote a blog post attacking the app and questioning its apparent 'strong Christian bias'
books
Arts and Entertainment
Leading light: Sharma in London

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

ebooksNow available in paperback
Arts and Entertainment

ebooks
Arts and Entertainment
Elizabeth (Heida Reed) and Ross Poldark (Aiden Turner) in the BBC's remake of their 1975 original Poldark

Poldark review
Arts and Entertainment
Daniel Craig as James Bond in Skyfall

Mexican government reportedly paying Bond producers for positive portrayal in new filmfilm
Arts and Entertainment
Disney’s flying baby elephant is set to return in live-action format
filmWith sequels, prequels and spin-offs, Disney plays it safe... and makes a pachyderm
Arts and Entertainment
Nazrin with Syf, Camden
photography
News
The QI Elves photographed at the Soho Theatre. They are part of a team of researchers who find facts for the television programme 'QI'.
people
Arts and Entertainment
‘The Royals’ – a ‘twisted, soapy take on England’s first family’
tv0-star review: Sean O'Grady gives it his best shot anyway
News
Brooke Magnanti believes her reputation has been damaged by the claim
books
Arts and Entertainment
A large fire has broken out in London's historic Battersea Arts Centre
art
Arts and Entertainment
Orla Brady as Anne Meredith, MyAnna Buring as Elizabeth Quinn and Joanna Vanderham as Katherine McVitie in Banished
tvReview: Despite the gritty setting, this drama is as fluffy and soppy as a soap opera
Arts and Entertainment
Julianne Moore and co-director Richard Glatzer, standing, on the set during the filming of ‘Still Alice’ in New York
film
Arts and Entertainment
Great British Sewing Bee finalist Matt Chapple
tvReview: He wowed the judges with an avant garde dress
Arts and Entertainment
Driven to the edge: 'Top Gear' producer Oisin Tymon is said to have had a row with Clarkson
TV
Arts and Entertainment
Nazi officer Matthias Schoenaerts embarks on an affair with married French woman Michelle Williams in 'Suite Francaise'
film review
Arts and Entertainment
Prime movers: Caitriona Balfe (centre) and the cast of Outlander
TV
News
Feasting with panthers: Keynes
books
Arts and Entertainment
Strung out: Mumford & Sons
music
Arts and Entertainment
Avant-garde: Bjork
music
Arts and Entertainment
Despite a decade of reform, prosecutions and convictions of rape has remained consistently low
arts + entsAcademic and author Joanna Bourke in warning to arts world
Arts and Entertainment
Electro Velvet, made up of Alex Larke and Bianca Nicholas, will represent the UK at the Eurovision Song Contest 2015
music
  • Get to the point
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.

    The saffron censorship that governs India: Why national pride and religious sentiment trump freedom of expression

    The saffron censorship that governs India

    Zareer Masani reveals why national pride and religious sentiment trump freedom of expression
    Prince Charles' 'black spider' letters to be published 'within weeks'

    Prince Charles' 'black spider' letters to be published 'within weeks'

    Supreme Court rules Dominic Grieve's ministerial veto was invalid
    Distressed Zayn Malik fans are cutting themselves - how did fandom get so dark?

    How did fandom get so dark?

    Grief over Zayn Malik's exit from One Direction seemed amusing until stories of mass 'cutting' emerged. Experts tell Gillian Orr the distress is real, and the girls need support
    The galaxy collisions that shed light on unseen parallel Universe

    The cosmic collisions that have shed light on unseen parallel Universe

    Dark matter study gives scientists insight into mystery of space
    The Swedes are adding a gender-neutral pronoun to their dictionary

    Swedes introduce gender-neutral pronoun

    Why, asks Simon Usborne, must English still struggle awkwardly with the likes of 's/he' and 'they'?
    Disney's mega money-making formula: 'Human' remakes of cartoon classics are part of a lucrative, long-term creative plan

    Disney's mega money-making formula

    'Human' remakes of cartoon classics are part of a lucrative, long-term creative plan
    Inside the Kansas greenhouses where Monsanto is 'playing God' with the future of the planet

    The future of GM

    The greenhouses where Monsanto 'plays God' with the future of the planet
    Britain's mild winters could be numbered: why global warming is leaving UK chillier

    Britain's mild winters could be numbered

    Gulf Stream is slowing down faster than ever, scientists say
    Government gives £250,000 to Independent appeal

    Government gives £250,000 to Independent appeal

    Donation brings total raised by Homeless Veterans campaign to at least £1.25m
    Oh dear, the most borrowed book at Bank of England library doesn't inspire confidence

    The most borrowed book at Bank of England library? Oh dear

    The book's fifth edition is used for Edexcel exams
    Cowslips vs honeysuckle: The hunt for the UK’s favourite wildflower

    Cowslips vs honeysuckle

    It's the hunt for UK’s favourite wildflower
    Child abuse scandal: Did a botched blackmail attempt by South African intelligence help Cyril Smith escape justice?

    Did a botched blackmail attempt help Cyril Smith escape justice?

    A fresh twist reveals the Liberal MP was targeted by the notorious South African intelligence agency Boss
    Tony Blair joins a strange and exclusive club of political leaders whose careers have been blighted by the Middle East

    Blair has joined a strange and exclusive club

    A new tomb has just gone up in the Middle East's graveyard of US and British political reputations, says Patrick Cockburn
    Election 2015: Meet the top 12 wacky candidates seeking your vote in May

    Election 2015

    Meet the top 12 wacky candidates seeking your vote in May
    Countdown to the election: Operation Save Danny Alexander shifts into high gear as the SNP target his Commons seat

    Operation Save Danny Alexander shifts into high gear

    The Chief Secretary to the Treasury didn’t forget his Highland roots in the Budget. But the SNP is after his Commons seat