Writing the Web


Home Page | Comments | Articles | Faq | Documents | Search | Archive | Tales from the Machine Room | Contribute | Login/Register

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:

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:

If you publish the site in the space given by your ISP be sure not to go beyond the limit, 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.

12 messages this document does not accept new posts
KaspaKaspa By Kaspa - posted 18/06/2008 19:00
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

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

> 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


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

Beh , di fatto l'accessibilità obbliga a usare i DIV per le impaginazioni complesse. Perché esclude le tabelle. Questo perché, oltre a non essere semantiche e aggiungere complessità al DOM, tendono a confondere gli screen reader e i browser testuali.

Per quanto riguarda la posizione dei DIV: certo, dipende dal resto del codice... ma la stessa osservazione vale per qualsiasi tag! smiley Di fatto, per impaginare in modo non triviale, è obbligatorio usare i CSS... che lasciano ben poco al caso.

--
Anonymous coward


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

Le tabelle usate in maniera strutturale sono ormai considerate Deprecate!

Concordo con chi afferma che andavano bene 10 anni fa!

La strutturazione moderna di un layout si fa con i Div, che sono Box atti a contenere le aree tematiche del sito ed eventuali sottosezioni (l'uso dovrebbe comunque essere limitato il più possibile alle Macroaree e associato con un uso "semantico" di tutti gli altri elementi HTML disponibili).

L'impatto iniziale per molti potrà essere più ostico (la tabella da più sicurezza ma è limitante e forza il signfificato stesso dell'elemento HTML). Se associata ad un codice Validato W3C e che presti un minimo attenzione alla semantica, si può produrre un sito facilmente modificabile (via Css), snello e appetibile per i motori di ricerca!
;-)

--
Dret


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

> Le tabelle usate in maniera strutturale sono ormai considerate Deprecate!
> Concordo con chi afferma che andavano bene 10 anni fa!

Funzionano, non rompono i cosi e fanno quello che devono fare. Che ti lamenti?

--
Davide Bianchi


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

bravo


grazie


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

grazie sei fantastico.... anchio dovrò fare un sito adesso ho le idee piu chare grazie veramente quando lo avrò fatto faro queste prove e poi ti diro come è andata ...ciao e stammi bene spero che vedrai il mio messaggio... polpetta

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

ciao sono semrpe io.... polpetta voevo solo dirto che quando ti ho scritto per la prima volta ho dato solo un occhiata veloce al sito ...... oggi invece ho approfondito e ho visto che è proprio bello... volevo farti anche gli auguri di natale anche se purtroppo non ci conosciamo ciao e stammi bene....polpetta

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

Vale sempre il solito principio insomma: Keep It Simple Stupid!

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

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 winking.



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.


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

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


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

"Funzionano, non rompono i cosi e fanno quello che devono fare. Che ti lamenti?--
Davide Bianchi"

semplicemente meravigliosa espressione!

--
GCS/CM d- s:+: a--- C++ UL+++S E--- W+(-) N o+ w-- O? M- PS+ PE Y+ PGP t+(++) 5? X- R* tv- b++ DI+ D++++ G+ e h! r++ y++


12 messages this document does not accept new posts

Previous Next


Davide Bianchi, works as Unix/Linux administrator for an hosting provider in The Netherlands.

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.


This site was composed with VIM, now is composed with VIM and the (in)famous CMS FdT.

This site isn't optimized for vision with any specific browser, nor it requires special fonts or resolution.
You're free to see it as you wish.

Web Interoperability Pleadge Support This Project
Powered By Gojira