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
Tate Modern chief Chris Dercon, who will be leaving to run a Berlin theatre company
arts
Arts and Entertainment
Tasos: 'I rarely refuse an offer to be photographed'
arts + ents
Have you tried new the Independent Digital Edition apps?
Arts and Entertainment

ebooksNow available in paperback
Arts and Entertainment

ebooks
Arts and Entertainment
tv
Arts and Entertainment
Girls on the verge of a nervous breakdown: Florence Pugh and Maisie Williams star in 'The Falling'
Film
Arts and Entertainment
Legendary charm: Clive Owen and Keira Knightley in 2004’s ‘King Arthur’
FilmGuy Ritchie is the latest filmmaker to tackle the legend
Arts and Entertainment
Corporate affair: The sitcom has become a satire of corporate culture in general

TV review

Broadcasting House was preparing for a visit from Prince Charles spoiler alert
Arts and Entertainment
tvReview: There are some impressive performances by Claire Skinner and Lorraine Ashbourne in Inside No. 9, Nana's Party spoiler alert
Arts and Entertainment
Glastonbury's pyramid stage

Glastonbury Michael Eavis reveals final headline act 'most likely' British pair

Arts and Entertainment
Ewan McGregor looks set to play Lumiere in the Beauty and the Beast live action remake

Film Ewan McGregor joins star-studded Beauty and the Beast cast as Lumiere

Arts and Entertainment
Charlie feels the lack of food on The Island with Bear Grylls

TV

The Island with Bear Grylls under fire after male contestants kill and eat rare crocodile
Arts and Entertainment
Aaron Taylor-Johnson as Quicksilver and Elizabeth Olsen as Scarlet Witch, in a scene from Avengers: Age Of Ultron
filmReview: A great cast with truly spectacular special effects - but is Ultron a worthy adversaries for our superheroes? spoiler alert
Arts and Entertainment
Robin Ince performing in 2006
comedy
Arts and Entertainment
Beth (played by Jo Joyner) in BBC1's Ordinary Lies
tvReview: There’s bound to be a second series, but it needs to be braver spoiler alert
Arts and Entertainment
Paul Hollywood and Mary Berry, the presenters of The Great Comic Relief Bake Off 2015

TV
Arts and Entertainment
A still from Harold Ramis' original Groundhog Day film, released in 1993

Theatre
Arts and Entertainment
Christopher Eccleston (centre) plays an ex-policeman in this cliché-riddled thriller

TV review
Arts and Entertainment
Lena Headey looks very serious as Cersei Lannister in Game of Thrones

TV This TV review contains spoilers
Arts and Entertainment

film
Arts and Entertainment
Wiz Khalifa performs on stage during day one of the Wireless Festival at Perry Park in Birmingham

music
Arts and Entertainment
Festival-goers soak up the atmosphere at Glastonbury

music

Arts and Entertainment
Star Wars creator George Lucas

film

Arts and Entertainment

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.

    Not even the 'putrid throat' could stop the Ross Poldark swoon-fest'

    Not even the 'putrid throat' could stop the Ross Poldark swoon-fest'

    How a costume drama became a Sunday night staple
    Miliband promises no stamp duty for first-time buyers as he pushes Tories on housing

    Miliband promises no stamp duty for first-time buyers

    Labour leader pushes Tories on housing
    Aviation history is littered with grand failures - from the the Bristol Brabazon to Concorde - but what went wrong with the SuperJumbo?

    Aviation history is littered with grand failures

    But what went wrong with the SuperJumbo?
    Fear of Putin, Islamists and immigration is giving rise to a new generation of Soviet-style 'iron curtains' right across Europe

    Fortress Europe?

    Fear of Putin, Islamists and immigration is giving rise to a new generation of 'iron curtains'
    Never mind what you're wearing, it's what you're reclining on

    Never mind what you're wearing

    It's what you're reclining on that matters
    General Election 2015: Chuka Umunna on the benefits of immigration, humility – and his leader Ed Miliband

    Chuka Umunna: A virus of racism runs through Ukip

    The shadow business secretary on the benefits of immigration, humility – and his leader Ed Miliband
    Yemen crisis: This exotic war will soon become Europe's problem

    Yemen's exotic war will soon affect Europe

    Terrorism and boatloads of desperate migrants will be the outcome of the Saudi air campaign, says Patrick Cockburn
    Marginal Streets project aims to document voters in the run-up to the General Election

    Marginal Streets project documents voters

    Independent photographers Joseph Fox and Orlando Gili are uploading two portraits of constituents to their website for each day of the campaign
    Game of Thrones: Visit the real-life kingdom of Westeros to see where violent history ends and telly tourism begins

    The real-life kingdom of Westeros

    Is there something a little uncomfortable about Game of Thrones shooting in Northern Ireland?
    How to survive a social-media mauling, by the tough women of Twitter

    How to survive a Twitter mauling

    Mary Beard, Caroline Criado-Perez, Louise Mensch, Bunny La Roche and Courtney Barrasford reveal how to trounce the trolls
    Gallipoli centenary: At dawn, the young remember the young who perished in one of the First World War's bloodiest battles

    At dawn, the young remember the young

    A century ago, soldiers of the Empire – many no more than boys – spilt on to Gallipoli’s beaches. On this 100th Anzac Day, there are personal, poetic tributes to their sacrifice
    Dissent is slowly building against the billions spent on presidential campaigns – even among politicians themselves

    Follow the money as never before

    Dissent is slowly building against the billions spent on presidential campaigns – even among politicians themselves, reports Rupert Cornwell
    Samuel West interview: The actor and director on austerity, unionisation, and not mentioning his famous parents

    Samuel West interview

    The actor and director on austerity, unionisation, and not mentioning his famous parents
    General Election 2015: Imagine if the leading political parties were fashion labels

    Imagine if the leading political parties were fashion labels

    Fashion editor, Alexander Fury, on what the leaders' appearances tell us about them
    Phumzile Mlambo-Ngcuka: Home can be the unsafest place for women

    Phumzile Mlambo-Ngcuka: Home can be the unsafest place for women

    The architect of the HeForShe movement and head of UN Women on the world's failure to combat domestic violence