Astro Lesson #29: ala.carte

Today's lesson is a diversion from the toils of CSS, and wanders back to some basic basics. We want to talk about your content - the filling in your web sandwich. If it's not a trim and tasty flavor, even if it may be a double-decker submarine, no-one's gonna come back for a second bite. Whether your chosen topic is widely applicable to all mankind (ham and pineapple), or to a select group of enthusiasts (caviar and smoked salmon) is up to you and your imagination, but how you present it to the world will determine its :

• readability
• legibility
• practicality
• commonsensibility
• eatability

cut.the.bread

"Oh, but what I have to say is just sooooo interesting - people will be dying to read it and won't care what it looks like". Well, that's a nice attitude we must say! Why shouldn't you be kind to your readers and make your web page as deliciously palatable as possible - it's not that difficult and takes hardly any time to prepare at all.

In fact, once you decide on a layout and structure it's a simple matter of baking a template which can be served up over and over again. That's how we handle these lessons and all our other web stuff. Retrogrrl doesn't want to be spending all her time in the kitchen with messy ingredients, she wants to be concentrating on new and exciting toppings.

There's another added bonus in creating a consistent interface - you can keep all your related pages in the same style and presentation, therefore serving up a familiar package to your visitors - a bit like MacDonalds.

butter.up

Here's what we are getting at. You have a choice of displaying your information just as it is (bland and tasteless) or souping it up a little (adding a dash of chilli sauce) with some simple but saucy accompaniments. Here's one we prepared earlier - Choose a sandwhich from the menu :

• Yesterday's meatloaf
• Chef's special

Now which one was tasty and which one did you spit out? Hopefully you agree with retrogrrl and found Yesterday's meatloaf to be underdone and unappetising, and the Chef's special to be scrumdiddlyumptious. Let's look at the recipes shall we?

add.a.filling

The meatloaf was lumpy. It did not look appealing and was hard to swallow. Why?

This web page had good content but wasn't prepared for general consumption - text all spread out right to the edges of the browser window, long paragraphs, no headings, atrocious spelling, no spot color, few graphical elements to catch the eye.

We left it on the plate and did not leave a tip.

The Chef's special melted in our mouths. Why?

This web page contained the same content but a little thought had gone into the way it was served up on the plate - text contained inside a table giving greater control of where it is placed. In this case, the table was given a light colored background to make the text easy to read and to seperate it from the busy background. The width of the table was set to 80% of the browser window so that the text was cleanly away from the edges of the window, and then centered to place it evenly on each side.

Paragraphs were broken up into bite size portions, with judicious use of alternative tags such as blockquote, paragraph, and lists, and headings. This makes it easy to define different sections, and makes it easy for visitors to find what they are looking for. It's also more relaxing on the eyes, rather than scanning lengthy blocks of words.

The spelling and grammar has been checked as much as possible to avoid mistakes which only serve to convince visitors that you don't really know what you are talking about, or haven't bothered to take the time to check your work. It's not always easy to do this, especially as plain old notepad (trusty as it may be) does not have a built in spellchecker - something we all tend to rely upon. But, it's important so make the effort or get a friend to give your web pages the once over, especially if you know that spelling isn't your strong point.

Color has been introduced, both in the background image and table, and in the headings and special points. Changing the color of text involves a simple HTML command (font color="blue" or font color="ffffcc") and takes little time to implement - yet creates vibrancy and gives life to the words themselves - careful use of bold and italics can also add so much piquancy.

Graphics have been used sparingly, with a little javascript to spice it all up.

We licked the plate clean and gave our compliments to the chef!

wash.the.plate

So, wrap this lesson up in a doggy bag, go back home and cut a slice of your own web page. Does it look like a TV dinner or have you been a clever cookie and it earns a chef's hat for delectability? Perhaps it needs thrown in the compost heap and requires a new recipe altogether. Or maybe it just needs a little seasoning here and there. Til next time when retrogrrl creates another dainty dish, or something.