Writing the Web

Updated for the 25th century and beyond!

I have to say this before everything else: I have no intention to impose anything to anybody. If you don't agree with my opinion you're free to do wathever you want. Is your right.

What follows is an attempt to define some "general guideline" for the writing and publication of a web site. This has been made after a number of trial and errors and is not the product of sophisticated study and research but simply direct experience and a lot of sweat, blood and gunpowed.

HTML is a "language" designed to provide a minimum of functionalities to put text and other elements on a web page. Is not a word processor or a desktop publishing system. There are dozens of different engines to display a web page used by many browsers, each one of them has his own ideas about how to rendere html and it shows. The sooner you'll get the idea the better.

Often I hear (or read) some wanna-be Web master complaints about the fact that "browser so-and-so doesn't render my site the right way" or "browse this-and-that works in a different way". Those peoples haven't realized yet that we live in a very imperfect world.

The moment you misstep in the last step of your chlidren's chair and bang your nose on the ground you'll realize that:

• No two browser in the world display the same page in the same way.
• If the use has your very same browser his monitor is probably different.
• The browser is not a word processor and his structure works accordly to this.
• Nobody owns the Internet, hence standards are very slow to set

This could all be rephrases in the famous Murphy's Law: if something can go wrong, it will.

When we write a web document we have to keep in mind these problems, and try hard to avoid the usual "it works on my system so it has to work for everybody".

If we're reading a book, we espect some things. In specific, we espect that each page of the book will have the text going in the same direction (usually left to right, unless you're reading japanes or arab), from top to bottom, that the typographic font is always the same and that the pages are consequential.

A book that forces us to jump up and down to follow his plot doesn't have a lot of appeal. Not for me anyway.

A web site ain't a book, but most things are the same. In specific, web users espects from a site that he will respect certains things. Usually, when I go to a site I expect:

1. coherence
2. semplicity
3. tolerance
4. usability

Now, let's see each one, shall we?

Just like book's pages are all written with the same typographical font, all in the same way and all of them respect the same pagination rules, I espect all the "pages" of a web site to look more or less the same, with more or less the same choice of characters and some sort of coherence in the construction.

If there is something like a "navigation bar" I espect it to be more or less always in the same position, and more or less the same for each page. If the bar start jumping around or loses parts from page to page without any apparent logic it takes little for me to go away and put the site in the blacklist.

If the site is in more languages or it belongs to a multinational with offices in the whole world I espect the french site (for example) to look very similar to the brittish one and so on.

The simpler a site is, the better. There is the tendency to put everything and the kitchen sink on a page to make it "more interesting" but that is wrong. The page simply look confused and cluttered. Filled up with useless bits.

Is impossible to find what you're looking for (it is there, sure...) and, moreover, it became very slow to load.

Give a structure to the page, try to divide things into coherent blocks between different parts of the site, keep the same structure along the whole thing (see above).

Try to use a color scheme simple and clear, avoid very sophisticated thing that won't be rendered correctly anyway and will make the site complex and unreadable.

And for God sake avoid black background and white character, unless you're working on a funeral parlor web site! Lately I can't find anything but black background and white text!

Lately the so called "organic structure" has became very used. That is nothing more than the tendency to have the pages divied into blocks that are not arranged in a table way, but follows rounded contours and shapes. Nothing bad with it, just keep in mind that the human brain automatically thinks in term of blocks and squares and going too much organic will simply make the site unusable.

Keep in mind that your site could be seen by the last user on the planet with a 33.6Kb modem and IE 3 on a 15" monitor.

Over this, remember that more junk you put on a page, the slower the page will be loaded. Studies made between 1998 and 2002 shows that 80% of the users tend to go away after about 10 seconds if the page hasn't loaded. Since 2002 the average speed of the connection has improved, so I have to suppose that the average patience of the user has gone down.

"Sorry, this site require version X.Y of plugin whattheheckisthat"

andwhydontyougofsckyourself

There are a couple of hundreds different versions of the same browser in the world, why the heck do I have to go install this and that plugin or use that specific browser just to look at your fscking web site? Well, newsflash: there are a couple of thousands web site in the world just like yours and they DO NOT REQUIRE THAT SHIT! What do you think I'm gonna do mr. SmartWebMaster?

The site should be tolerant, that means do not require specific things to work. It is always possible that to use specific functions or feature you require specific things, but the minimal functionalities should be working without anything special.

Not everybody have a 24" monitor 3096x2028 with 64 millions colours and perfectly calibrated.

This simple detail is often forgot by web master, with the end result that text is cut-off or overlapped with other things, graphical bits are rendered wrongly and the whole thing seems crap.

One thing that always gives me trouble, is the tendency to have the site within a fixed width in the center of the screen. This happens mostly if the webmaster uses some editing tool that generate the html directly. I mean, nowadays every monitor is wide-screen, and to have a 28" monitor and to see the site concentrated in 5 cm in the middle of the screen just looks ridicolous. Never heard of "self-adaptation"?

And finally we have arrived to talk about the most important of all things.

The site has to be usable. What does that mean? Let's ask ourselves why do we go on a web site. Well, it depends what kind of site it is, if the site belongs to a commercial company that sell something, usually we go there to get informations about a product we want to buy, get a price and (maybe) buy the thing. If the site is a news site, we go to read the news.

If we found a blog in the middle of a commerce site, well, we are not going to do a lot with it. Same thing if we found advertising in a blog or news site.

For example, a well-known chain of wearehouses of electronic and household appliances has a web site that is totally useless. You won't be able to find any kind of informations about a product in there, nor a price or availability. Just to figure out the address of the nearest wearehouse you'll get an headhace. A completely different thing is the site of a world-renewed chain of wodden furniture and other household things. Not only their web site is chocked full of informations about each of their product, but is really easy to find something and doesn't matter in which language your look at it, they all look coherent.

So focus on what is the scope of your website, do not get sidetracked and don't get lost in things that are completely useless.

You can't hammer a nail with a chainsaw. Well, you can, but nobody with a functioning head would do it. Do not expect a software to be like a swiss' army knife, get the right tool for the job and use it correctly.

Avoid html generators (FrontPage at the top of the list), unless you have a bunch of files to convert quickly or you don't want to learn anything at all. A generator will solve a small problem by removing a lot of the control you can have on the generated code.

Let's keep in mind also that nowadays web sites are not really hand-written, but almost all of them uses publication tools or management system (CMS), most of those thing have built-in editors and other things that reduce your control over the end product, but at the same time they force coherence between the various pages.

The tool box of each web master should at minimum have:

• a good editor

  with syntax colouring and highlighting to show simple typos and other similar problems, inspect the code, search and replace and so on.

• a graphic editor

  to make and edit pictures, banners and the like

• a conversion tool for the graphics

  to convert the various files.

• a spell checker

  to check the syntax of the text

• an html/xhtml manual

  to keep at hand to check things

If you publish the site in the space given by your ISP be sure not to go beyond the limit, like

• space occupied
• number of subdir/files
• number of connections/bandwidth
• presence of adv, banners and the like

Consider the possibility to go with a dedicated web hosting or even to put on your own dedicated server. There are many company now that rent "virtual" servers for a low fee.

Simplicity and usability are the code words. Avoid the latest craze and the latest techno fad, 90% of the users don't have it and don't care about it.

Keep in mind that no two browser display the same thing the same way, so avoid coding for specific versions, and don't tell the user which browser he has to use or he won't came back anymore.

Test your creation with at least 2 different browser and try to keep in mind what the site is about.

Comments are added when and more important if I have the time to review them and after removing Spam, Crap, Phishing and the like. So don't hold your breath. And if your comment doesn't appear, is probably becuase it wasn't worth it.

Kaspa

-AT- Kaspa By Massimo - posted 27/05/2009 00:25 - reply

> Mi permetto di dissentire sull'uso delle tabelle, forse potevano andare bene qualche anno fa, ma adesso ￜ OBBLIGATORIO usare i div nell'impaginazione, altrimenti:
> 1)non si capisce nulla di come si dovrebbero disporre i contenuti
> 2)la pagina non ￜ per nulla accessibile

Veramente e' abbastanza il contrario.
Una tabella impone un ordine a cio' che contiene, mentre un DIV é solo un rettangolo messo da qualche parte. Dove? Dipende dal resto del codice... La superiorità dei DIV sta nel poterli spostare dinamicamente senza problemi (spostare una cella di una TABLE non lo puoi fare cosá alla caSSo), nel poterli aprire e chiudere sempre dinamicamente, insomma... i DIV sono più versatili, é vero. Ma non certo obbligatori. Per quanto riguarda l'accessibilità immagino che tu ti riferisca a delle norme giuridiche o a degli standard W3C, non li conosco e non posso dirne niente. Ma che prevedano "obbligatoriamente" i DIV, mi pare davvero strano.

Senza contare che pure i DIV hanno le loro grane: controllarne con precisione la posizione su browser diversi non é proprio facile. Inoltre, per fare quello per cui le tabelle sono nate per fare (elencare dati in forma tabellare) non c'é ancora niente di meglio che le tabelle, appunto

--
Massimo

@ Massimo By Anonymous coward - posted 08/03/2013 03:56 - reply

-AT- Massimo By Dret - posted 13/06/2009 11:54 - reply

-AT- Dret By Davide Bianchi - posted 14/06/2009 07:11 - reply

ciapel By ciapel - posted 25/07/2008 15:34 - reply

polpetta By polpetta - posted 09/12/2008 09:05 - reply

polpetta By polpetta - posted 09/12/2008 16:27 - reply

Michele Pittoni By Michele Pittoni - posted 29/12/2008 18:45 - reply

iacchi By iacchi - posted 03/01/2009 07:23 - reply

Magari ora come ora le percentuali di utilizzo sulle risoluzioni del monitor sono un po' cambiate (non credo ci sia ancora un 24% di 640X480). Visto che come dici non è bello avere troppo spazio ai lati in un sito, forse è meglio rivedere un po' quelle percentuali e orientare la larghezza minima su un valore un po' più alto (800x600 magari, che in ogni caso è ora molto sotto il 24%, più probabile il 10% o magari più basso ancora .

Si vabbe', adesso se vai a cercare un monitor e' Widescreen o non lo trovi, quindi... Comunque si', quell'articolo fu' scritto quando i monitor erano ancora relativamente piccoli e le schede video non avevano un quad-core e richiedevano il loro alimentatore e ventola di raffreddamento.

Grande! By Lisa - posted 12/01/2009 18:24 - reply

Quest'articolo merita un applauso.
Io ho tante (TROPPE) persone che mi implorano di visitare il loro blog hostato su Livespaces. Dopo i primi due visti, ho rifiutato.

Livespaces ha una struttura pesante, ridondante e scomoda già di per sé. Se poi iniziano ad aggiungerci stelline che fluttuano, colori da epilessia, musichette, foto giganti, e chi più ne ha più ne metta...mi viene voglia di imbracciare il bazooka!

--
Lisa

KISS By Anonymous coward - posted 07/10/2009 12:19 - reply

Previous Next

Davide Bianchi, works as Unix/Linux administrator for a "network security" company of Haarlem. Contacts: mail: davide AT onlyforfun.net , Jabber: davideyeahsure AT gmail.com, Follow @TheRealAndOnlyD

Do you want to contribute? read how.  
 

This site is made by me with blood, sweat and gunpowder, if you want to republish or redistribute any part of it, please drop me (or the author of the article if is not me) a mail.