Past how-tos:
Click to the archives to get past how-tos. A new one will appear on this page each month.

Register here if you want to be alerted when new articles appear.

Email us if you need to know how to do something. If we don't know how to do it we'll find out and produce an article for you.

How to design a website
without overloading your wastebasket

Why did I feel like a beached whale when I designed this website? Well, I know how to swim, but I’ve never surfed the waves. I was dumping draft after draft into the trash, just like a surfboard would have me thrashing around in the silt if I ever tried surfing.

Now I know what I should have done, so here’s some tips for anyone who wants to design a website, who has never used web design software before, but who is fairly OK at following menus and creating nice looking word documents, or (un)cool PowerPoint presentations.

---

Realize you need to learn more than the web design software. Web pages have images, photos, design, and layout. You need to know how to use graphic design software, too. I used Adobe Creative Suite CS2, including In-Design, Illustrator and Photoshop.

Choose your software. Adobe Creative Suite comes with Go-Live, but I chose to use Macromedia Dreamweaver 8. A friend who works for Adobe and has a web design business advised me to. Adobe owns Macromedia so I was happy to go along with his suggestion. Your knowledgeable friends are going to be worth their weight in gold (my friend is a big guy!). I had used FrontPage before, but Microsoft is abandoning it and introducing something new – anyway I never found it easy to use.

Invest in graph paper and pencil. The alternative is to open a new page in your software and figure out the look of the page on the go. Bad idea. Sketch out what you want your main page to look like AND size up everything. I’m not going to get technical here. Think of it like making a patchwork quilt. You need to plan where the different shapes and sizes are going to go on your canvas – it’s exactly the same with your web page canvas. Note the sizes you want each of your elements to be so that when you come to create the actual page you can set all your guides quickly and easily.

Sketch out all the other pages noting what needs to link to what. The time you invest in this planning before starting up the software will repay you a million times over. I would have saved so much time and avoided so many attempts if I had just had a picture of what I was trying to create.

Look at your favorite web pages to get design ideas. Link to About Us to get the lowdown on why WordisWorth contains what it does and looks like it does. Theory has informed it, but About Us explains it in practice without jargon.

Go to a class or get an instruction book to learn how to use the software. I chose to learn from books. Some books are available for download from libraries for free but as I have only one computer screen, I preferred to have a print text so I could have it by my side as I worked. If you’ve got two computers (maybe a desktop and a laptop or a PDA) you can use the two screens side-by-side and save money.

Choose a book that suits your style of learning. Some are designed around tutorials where you work on pre-prepared files to learn different things. Others take you step-by-step through the process of learning as you create your own files. I tried to learn from the tutorial texts without using their files. I tried to implement their lessons on my own site. Draft six later, I realized it was a bad idea and started from scratch yet again.

Realize that the textbooks take you through different methods of developing websites – with tables, with layouts, with frames and with CSS (cascading style sheets). Learn them all before creating your own Website. I moved from one method to another as I was going through the book before realizing that it was the final method, CSS, that I really needed to make my tasks, updating, standardizing and formatting so much quicker and easier. But I wouldn’t have understood it without learning about tables and seeing them in practice. I've still not quite mastered setting up CSS files, but I will eventually.

Decide on your font sizes, colors, and styles for headings, general texts, links, sidebars, navigation bars, and captions and note it down on your notepad – believe me you’ll forget if you don’t. Look at http://www.alistapart.com/. Note that some fonts are sans and some are serif. OK, that was jargon, sorry. Sans serif is text without squiggly bits and serif has squiggles. Ariel is sans serif and Times Roman is a serif font. Neither looks good on the web. Make sure that what you choose is supported by various browsers; otherwise, those trying to read your site might get gobbledygook. Geneva and Perpetua are the main typefaces in WordisWorth.

Watch the sizes of your images. Avoid placing a huge image onto your webpage and then resizing it in the webpage – it will retain its humungous number of bytes. Resize and sharpen it in Photoshop first and then place it on your page. Or optimize it in Macromedia Fireworks to get the smallest and best-looking format for your image.

Learn about Meta-tags. So far I know what they are - the words you put in to get search engines to find your site. I still haven't implemented them, though!

Ignore all the above if you want an in-depth practical learning experience. My experience was packaged with graying hair, deepening frown lines, heightened stress levels, grumpiness, late nights, and no chance to slip in a G and T as a reward for doing something right!

Return to home page