Perché tabelle e divitis rendono il tuo sito inaccessibile?
Ci sono diversi errori di accessibilità e usabilità molto diffusi tra i web-designer o aspiranti tali, perché eliminarli dal tuo sito web dovrebbe essere una domanda che contiene già la risposta: se sono problemi è chiaro che vadano eliminati.
La cosa migliore sarebbe eliminare le problematiche a monte, fare dell’accessibilità e dell’usabilità la tua forma mentis: dovresti correggere il tuo approccio nei confronti del web prima di commettere qualche errore.
In ogni caso, che la frittata sia già fatta o che sia soltanto nella tua testa, andremo ora a vedere come eliminare i problemi più comuni che rendono il tuo sito poco accessibile ed usabile.
L’impaginazione a tabelle e le spacer.gif
Fortunatamente è un errore sempre meno comune, ma per anni è stato un flagello.
Le tabelle servono esclusivamente a rappresentare relazioni logiche fra i dati (testi, numeri, immagini): se vuoi usarle per qualunque altra cosa, non farlo.
Come non penseresti mai di utilizzare un cavatappi per pettinarti i capelli, non dovresti nemmeno pensare di utilizzare una tabella per impaginare un sito: le tabelle servono per presentare dei dati e basta.
Perché viene fatto quest’uso sbagliato delle tabelle?
L’impaginazione a tabelle si è diffusa nel periodo delle specifiche CSS1, soprattutto per la facilità con cui si poteva impostare un layout a larghezza 100%, per occupare tutta la larghezza della finestra del browser, ed anche grazie ad alcuni programmi di editing wysiwyg (e pure allo strumento “sezione” di Photoshop) che, in tale modalità, creavano direttamente il codice con un uso sconsiderato di tabelle annidate.
A tutt’oggi, chi ancora utilizza le tabelle per impaginare, in genere lo fa per ignoranza; ma andiamo a vedere perché è un problema.
Perché usare le tabelle per l’impaginazione è un male?
Utilizzare le tabelle per impaginare il layout grafico di un sito equivale a produrre una dose esagerata di mark-up presentazionale: una serie di righe e celle (spesso riempite con immagini spaziatrici “spacer.gif”) con dentro altre tabelle che servono a simulare margini e spazi tra gli elementi (cosa che sarebbe compito dei CSS). Questo si traduce in un peso della pagina realmente eccessivo.
Il sito del Comune de L’Aquila ha una pagina index che pesa la bellezza di 132.25KB di cui 84.08KB di codice (cioè di tabelle), con una grafica praticamente inesistente.
L’index del sito del Comune di Nettuno pesa addirittura 428.69KB, ma quello che colpisce di più qui è l’uso delle immagini divisorie che si ripete per ogni voce del menu:
<td>
<a href="http://www.comune.nettuno.roma.it/comune.php">Home</a>
<img height="23" src="/graphics/misc_div.gif" width="12" alt="nettuno"></p>
</td>
<p>
Dopo questi esempi penserai che il problema è rilegato ai siti dei comuni, che sono così “brutti” che il problema delle tabelle è solo uno dei tanti. Non è così.
Se entriamo nei div che compongono la struttura del sito ufficiale della BMW, scopriremo che ci nasconde niente popo di meno che… tabelle!
Per un peso totale di 837.97KB. Certo gran parte del peso è dato da script e dal filmato swf, ma arrivare a 47.88KB di codice html per una pagina così semplice… è un gran bell’errore!
Oltre al peso spropositato, che ha come conseguenza diretta un caricamento molto rallentato, c’è da tenere in considerazione il come le tabelle e gli elementi grafici inseriti in questo modo vengono interpretati dagli screen-reader.
Ad esempio, nel caso del Comune di Nettuno, lo screen-reader leggerà per ogni divisorio l’alt-tag dell’immagine: Home, Nettuno, Sindaco e Giunta, Nettuno etc. Ma se non avessero messo l’alt-tag, la lettura sarebbe stata ancora peggio: Home, misc_div.gif, Sindaco e Giunta, misc_div.gif, e via dicendo.
Problemi correlati
Una naturale declinazione del problema si realizza nella creazione di un codice HTML presentazionale, poiché vengono spesso utilizzati gli attributi tipici delle celle: bgcolor, width, height, background, align, valign, border e via dicendo, o addirittura, come nel caso del Comune di Nettuno, le immagini vengono inserite direttamente nell’html.
Il sito del Comune di Cervara, sempre a tabelle, riesce a pesare in totale 150,69 KB, di cui 129.18KB di immagini non compresse.
Inoltre come accennavo prima, se non prendi le dovute precauzioni, un sito impaginato a tabelle è praticamente impossibile da consultare per disabili non-vedenti, che utilizzano browser testuali e screen-reader per navigare: i browser testuali (tipo lynx) linearizzano il contenuto della tabella partendo dalle righe ed elencandone ogni cella, da sinistra a destra.
Ne consegue che in un caso simile a questo:
| Titolo del sito | ||
| Voce menu 1 | Titolo della pagina | |
| Voce menu 2 | Contenuto A | Contenuto C |
| Voce menu 3 | Contenuto B | Contenuto D |
| footer |
il risultato dato da un browser testuale sarà il seguente:
Titolo del sito
Voce menu 1
Titolo della pagina
Voce menu 2
Contenuto A
Contenuto C
Voce menu 3
Contenuto B
Contenuto D
footer
Portando a una perdita totale del senso logico della pagina.
Un occhio di riguardo dovresti darlo anche agli spider dei motori di ricerca, equiparabili ad utenti non-vedenti: senza i dovuti accorgimenti il tuo sito verrebbe indicizzato come sopra; ricordati anche che il peso di una pagina oltre ad aumentare il tempo di caricamento della stessa è anche penalizzante verso gli stessi spider.
I rimedi
Se il tuo sito ha un layout grafico impaginato a tabelle faresti meglio a redimerti, a cancellarlo e a rifarlo da capo.
Dovresti fissare bene in mente un’equazione fondamentale, cioè HTML : semantica = CSS : presentazione.
Perciò togli quel <table width=”100%”> e sostituiscilo con un semplice <div id=”contenitore”> a cui puoi assegnare una dimensione del 100% semplicemente definendo la regola: #contenitore{width:100%;}, meglio se in un foglio di stile esterno.
La degenerazione: divitis
Che stai facendo? Ho detto di sostituire la tabella con un div contenitore, non di replicare ogni singola cella e farla diventare un div a sé stante!
Devi stare attento, questo è uno degli errori più comuni: pensare a tabelle, cosa che non devi fare assolutamente. Quando pensi a tabelle, il fatto che tu usi <div> al posto di <td> non fa di te un professionista del web migliore.
Ti porto l’esempio di uno dei siti più famosi al mondo, che non ha bisogno di presentazioni: Facebook, di cui Biroblu ha contato i div. Il verdetto è che una bacheca ne riesce a contenere anche 1612!
Analizzando i div di Facebook è lampante come si sarebbe potuto ovviare al problema, utilizzando via via degli elementi più adatti allo scopo. La struttura di un contenuto (chiamato in genere link) ad esempio è più o meno così:
<div class=”UIImageBlock clearfix storyContent”> <img src=”immagine del profilo”> <div class=”UIImageBlock_Content UIImageBlock_MED_Content”> <div class=”uiSelector mlm mlm hideSelector uiSelectorRight”> X (Nascondi) </div> <div class=”wrap”></div> <div class=”actorName actorDescription”>Nome della persona + eventuale tag</div> <div class=”mvm uiStreamAttachments clearfix”> <div class=”UIImageBlock clearfix”> Immagine del link <div class=”UIImageBlock_Content UIImageBlock_MED_Content fsm fwn fcg”> <div class=”uiAttachmentTitle”> Testo principale del link (quello in blu) </div> <div class=”mts uiAttachmentDesc”> Sottotitolo del link (quello in grigio</div> <div> <div class=”uiTextSubtitle”>autore del link</div> Ora di pubblicazione · Mi piace / Non mi piace più · Commenta · Condividi </div> </div> </div> </div> </div> </div>
Non vado oltre nei commenti perché rischio la pazzia, ma tutto questo si sarebbe potuto fare in maniera più semplice, con meno div e classi, utilizzando altri elementi come <blockquote>, <span>, <hn>, <p> e via dicendo. Addirittura i singoli link pubblicati si sarebbero potuti racchiudere in una lista non ordinata (<ul>) e al posto del
<div class=”UIImageBlock clearfix storyContent”><p>
si sarebbe potuto usare un <li> per ogni link-contenuto. Vorrei farti notare oltre tutto il <div class=”wrap”></div>, l’equivalente di una cella vuota.
Conclusione
Abbiamo visto nel dettaglio quali sono le problematiche date da un layout organizzato su tabelle e qual è l’alternativa migliore per ovviare a questa pratica errata.
Adesso sei ancora un fermo sostenitore delle tabelle o qualcosa in te si è mosso?
O magari già prima odiavi l’uso improprio dell’elemento <table> ma non sapevi di essere affetto da divitis?
Com’è la struttura del tuo sito? Utilizzi sempre dei div in particolare (mainContainer, content, nav…) o punti a dare uno stile anche agli elementi <html> e <body>? Qual è, per te, la tecnica migliore?
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
58 commenti
Trackback e pingback
-
Tweets that mention Perché tabelle e divitis rendono il tuo sito inaccessibile? | Your Inspiration Web -- Topsy.com
[...] This post was mentioned on Twitter by mtx_maurizio, Simone D'Amico. Simone D'Amico said: Perché tabelle e divitis rendono il…
Bell’articolo complimenti anche se non penso ci sia ancora gente (professionista) che usa il tabellare.
Ciao Riccardo, grazie dei complimenti. :)
Anche io la pensavo come te, ma dando un’occhiata in giro ho notato che non è proprio come dovrebbe essere.
Soprattutto i siti di grandi compagnie (fatti anche da grandi studi) sorprendono per errori del genere!
Anch’io credo nella (quasi) scomparsa delle tabelle usate per l’impaginazione.
Invece la “divite” è un problema diffuso (che ha contagiato anche me!).
Ogni tanto mi ricapita di vedere miei progetti vecchi e dire “qui al posto del div ci potevo mettere un p, anche perché quello che segue è un paragrafo di testo!”.
Penso che cercando bene troveresti moltissimi siti con layout tabellare, anche di designer professionisti e insospettabili… il morbo divitis ha colpito anche me per un periodo: per guarire è importante informarsi! :)
Ottimo articolo. Aggiungerei che a volte, i soggetti affetti da ‘divite’, si rifiutano persino di usare le tabelle per presentare dei dati tabellari :P
Grazie Francesco, hai ragione, capita a volte di imbattersi in dati che dovrebbero trovarsi logicamente intabellati e invece non si sa come si reggono in piedi tra div, span e altri elementi! :)
Nel comune di nettuno non c’è neanche l’apertura del body.
Per facebook credo che il problema sia soprattutto il fatto che con il tempo hanno sempre aggiunto cose, senza rifare il codice… credo che sarebbe meglio se pensassero a riscriverlo tutto da zero, anche perchè il traffico è enorme e avere il codice pulito aiuterebbe a togliere molti dei problemi che ha.
Credo che il problema principale è che ci siano molti web designer di vecchia data che sono fossilizzati ai vecchi metodi, con cui magari si trovano bene (secondo loro) e non si aggiornano, cercando nuove e migliori soluzioni.
Mentre è semplice da capire e accettare: codice pulito = maggiore velocità = maggiore accessibilità = maggiore mantenibilità… si può ancora continuare.
boh!
Come dicevo infatti, nei siti dei comuni il problema delle tabelle è solo uno dei tanti!
Per quanto riguarda FB, concordo con te in parte: sicuramente parte del problema è un discorso di aggiunta, ma credo che in realtà non ci sia stata una buona strutturazione di fondo. Per quanto tu voglia aggiungere/cambiare, se hai prodotto un codice semantico e strutturato con un po’ di logica, non dovresti mai finire in quella situazione!
Quanto dici dei “web-designer di vecchia data” invece risponde al vero… ci sono tante persone che si sono trovate a fare questo mestiere in maniera quasi “casuale”, assunti come ingegneri e finiti a fare il sito web dell’azienda perché le competenze gli permettevano di farlo (e come non era importante all’epoca)… mi è capitato di lavorare con qualcuno di loro, quando gli ho detto che il layout non si costruisce su tabelle mi ha guardato nello stesso modo in cui dovevano aver guardato Galileo sostenere che la terra è rotonda!
Ottimo articolo.
Anche io che non sono un grafico sono assolutamente contrario alle tabelle solo se non strettamente necessarie questo a volte quando devo far vedere degli elementi alienati (risultati di un query) preferisco di gran lunga i div in float left e qui a volte viene la divite.
Su questo punto faccio molte “discussioni” con il mio grafico.
Ciao Luca, ti ringrazio :)
Cerca di non eccedere in entrambi i casi… ma per quello che ti posso dire dalla mia esperienza, i grafici “puri” hanno diversi problemi a relazionarsi col web, anche solo per il fatto che in genere progettano per supporti “fissi” (locandine, volantini, biglietti da visita), ma di questo ne parleremo in un prossimo articolo :)
Ciao, bell’articolo, complimenti :-)
Personalmente credo di essere colpito dalla “divite”, dato che oltre a qualche lista e ai tag base (html, body, etc), non uso altro. Per quanto sia scorretto a livello ideologico, i div consentono una certa flessibilità che i tag normali non permettono, nonostante i vari CSS Reset.
Purtroppo da quando ho iniziato a programmare ho iniziato a snobbare un po’ l’HTML. Prima ero molto preciso.
Ciao Joel, grazie dei complimenti. :)
Affetto da “divite”? Il primo passo verso la soluzione è ammettere il problema!
Io utilizzo il reset di yahoo con alcune modifiche fatte da me, e a dirti la verità trovo gli elementi completamente flessibili (come se fossero tutti dei div).
Puoi ancora tornare sulla retta via ;)
Eppure ancora molti siti vengono realizzati con le tabelle, conosco agenzie che curano il web di alcuni enti pubblici che usano ancora le tabelle :(
Questo perché la maggior parte dei web designer sono improvvisati e utilizzano software come photoshop per esportare il tutto in html.
Le tabelle non devono essere odiate perché la loro natura ( per quanto snaturata da alcuni colleghi ) è quella di intabbellare ( scusate il termine ) dati in caso di elenco.
Cmq Ottimo Articolo Anna ;)
Sì, infatti per scrivere questo articolo ho fatto qualche ricerca e si trova veramente di tutto (ma non ho voluto colpire singoli designer o agenzie, da qui la scelta dei siti segnalati).
Dovremmo fare una campagna per le tabelle: “non abusare di loro, usale solo quando necessario”! ;)
Grazie Rocco
ne conosco anch’io tanti, all’inizio come tutti coloro che abbandonavano le tabelle farcivo i miei layout di div ora ad ogni nuovo progetto li abbandono sempre più preferendo stilizzare in modo opportuno i tag p, ul ecc
Ottimo articolo.
Grazie Nicola, come dire: sbagliando si impara… nel nostro lavoro si tende ad un approccio da autodidatta, e avendo dei risultati esteticamente buoni anche senza particolari conoscenze, molti tendono a non informarsi ed aggiornarsi su quali siano le tecniche migliori e più corrette.
“Come dicevo infatti, nei siti dei comuni il problema delle tabelle è solo uno dei tanti!”
Hai perfettamente ragione e ti parlo per esperienza diretta, nei comuni (specialmente quelli piccoli) spesso ci si trova di fronte a persone che stentano ad utilizzare office, figuriamoci un cms, e figuriamoci a distinguere tra un buon cms ed uno meno.
Da ricordarsi cmq è che non sempre è colpa di chi li fa i siti, (io fossi un ente pubblico un cms non validato non lo prenderei neanche in considerazione, anche se nella realtà poi sai benissimo che non è così) ma anche di chi decide di acquistarli, che per inesperienza o cieca fiducia si lascia abbindolare da questa o quella ditta, ditta che sa benissimo il livello di preparazione di chi poi lo andrà a d usare, e che è così libera (una volta venduto il sito) di fatturare ore e ore tra assitenze, ripristino di pessimi sistemi che inevitabilmente si andranno a bloccare, e addirittura a volte rifacimenti completi, facendo pagare fior di quattrini l’istallazione di cms quali joomla o wordpress (con solo un minimo di personalizzazione grafica) liberamente scaricabili.
Scusa lo sproloquio……..e cmq gran bell’articolo…….complimenti :)
Hai ragione la colpa è sia di chi li fa (e da una parte credo sia giusto che noi puntiamo il dito, proprio perché c’è una grande ignoranza da parte dei clienti), sia del cliente che fa la scelta: mi aspetterei che i siti di pubbliche amministrazioni (appunto i comuni) rispettassero per lo meno la legge Stanca, ma come dici tu spesso la realizzazione dei portali viene messa in mano all’impiegato che utilizza office e magari si adatta bene a frontpage (inorridisco solo a nominarlo), e se ci si rivolge fuori non credo che si faccia questa gran ricerca dell’esperto, della competenza, e questi sono errori del cliente.
Il discorso è un po’ diverso, ma io stessa ho dovuto fare un corso intensivo di 2 settimane di PhotoShop a una persona che non aveva più la sua mansione ed era quindi era stata nominata “grafica interna” all’azienda (una GRANDE azienda)… a 53 anni, senza aver mai fatto nulla di grafica e senza avere nessuna competenza!
Comunque ti ringrazio Cristiano per i complimenti e, figurati, anche io potrei parlare per ore solo di questo.:)
Trovo l’articolo davvero interessante! Io tuttavia, e sbaglio e anzi magari vi sprono a fare un prossimo tutorial, trovo i div molto scomodi per la creazione di form abbastanza complesse. Dico così perchè in tali casi è facile che mi arrivi da alcuni grafici un layout in cui devo per forza dare praticamente una classe specifica al singolo elemento della form, perchè si trovano disallineati o con effetti strani, a volte più larghi a volte meno. In questi casi vengo “salvato” dalla tabella. Sono folle o succede ad altri? Come ovviate al problema?
Ciao Gleenk, grazie. :)
L’idea del tutorial per impaginare un form non è banale, la tentazione di utilizzare una tabella spesso è forte.
Io utilizzo una lista non ordinata e do gli stili ai label e agli elementi del form (direttamente agli elementi, senza fare classi), ma cerco anche di razionalizzare il tutto: non so bene cosa intendi per ” disallineati o con effetti strani, a volte più larghi a volte meno” (se mi mostrassi un esempio potrei prenderlo da spunto per un tutorial) però, se ho capito bene, penso che anche per una valenza estetica sarebbe bene che i campi abbiano una lunghezza “regolare”, non che sia uno più ampio e uno meno, e allo stesso modo ben allineati.
Fammi sapere, così approfondiamo :)
Il fatto è che potrei avere una form “a blocchi”, un blocco a 3 colonne, uno a 6, uno a 2 e così via, tutti nella stessa form. Gli stili inline sono da evitare anche se in questo caso, cm dici te, aiutano ma non sono la soluzione no? Al momento non ho disegni da fornirti ma da quel che ti ho scritto sopra penso che avrai capito ;) attendo news!
A dirti la verità il discorso dei blocchi a 3, 6 e 2 colonne non mi è chiaro per niente… O_o io in genere valido xhtml strict quindi gli stili inline non li uso proprio :) Se riesci a spiegarmi meglio te ne sarei grata!
Arg! Esempio:
form divisa in 3 blocchi.
1 blocco con una struttura interna a 3 colonne.
2 blocco con una struttura interna a 2 colonne
3 blocco con una struttura interna a 5 colonne
tasti di clear e invio.
Supponiamo poi che questa form sia distribuita su più “tab o schermate”. Mettiamo che nella seconda schermata ho altri 3 blocchi con un andamento completamente diverso dai precedenti perchè il grafico si è sbizzarrito.
Ora, usando i div dovrei creare una vagonata di classi specifiche, un sacco di div clear e quant’altro. No?
Ah ora è più chiaro! Diciamo che il fatto di stravolgere così tanto la struttura sarebbe totalmente negativo dal punto di vista dell’usabilità, in quanto lascia l’utente finale spaesato… quindi per tagliare la testa al toro la soluzione è tagliare la testa al grafico! ;)
Altrimenti è ovvio che gli stili in linea sono l’unica soluzione per mantenere un minimo di sanità mentale!
Ehe sono d’accordo, comunque secondo me un bel tutorial in merito sarebbe gradito no? ;)
Sicuramente anche l’accessibilità e l’usabilità nella realizzazione di un modulo sarà un argomento che verrà trattato prossimamente, e forse in forma tutorial potrebbe essere anche più semplice da spiegare, vedremo :)
Non ci posso credere… ancora si parla di tabelle per i layout!! O_O’
E’ una pratica vecchissima, incoraggiata dai vecchi editor visuali, ma oggi (spero che) non si usa più!!!
I layout a tabelle erano più semplici da comprendere, e spesso risultava più facile ottenere delle strutture particolari, con i div all’inizio sembra tutto complesso ma dopo diventa una droga :)
Ciao Tatac, hai ragione, ma più che dire
“ancora si PARLA di tabelle per i layout!! O_O'”
direi
“ancora si USANO tabelle per i layout!! O_O'”
:)
Quello che mi sorprende di più è il sito della BMW, non ci credo che la scelta sia data da semplice ignoranza, sarei curioso di sapere una loro risposta…comunque bell’aritcolo Anna.
Ero talmente convinta che non le usasse più nessuno che a me hanno sorpreso veramente tutti!
Grazie Francesco :)
non ho mai usato i div per i form, stilizzo sempre direttamente gli elementi del form e applico delle classi agli stesse elementi se devo differenziare,
esempio se ho un form che deve avere una larghezza diversa applico la classe con quella dimensione al tag form senza specificare la larghezza del tag fieldset, in questo modo gli stessi elementi input , select ecc si adattano di volta in volta al form e alle sue dimensioni, un modo per allineare label e input è renderli flottanti e poi rispristinare la sequenza con un br a cui si applica una classe in cui si definisce clear:both,
è solo uno spunto, io faccio sempre così.
Mi sembra un’ottima soluzione Nicola, grazie per averla condivisa :)
Ciao Anna complimenti intanto per l’articolo.
Qualche mese addietro – per un progetto interno su cui stiamo lavorando – abbiamo iniziato a stilare una lista di tutti i web designer italiani (freelancer, agenzie, ecc) con i relativi siti web.
Quello che ne sta venendo fuori è a dir poco sorprendente.
Al momento, quasi il 90% dei siti presi in esame – su un campione di circa quattrocento – risultano di livello “dilettantistico”: o realizzati con tabelle stile anni ’90 e senza alcun design, o con l’installazione di joomla/wordpress con un template free (raramente a pagamento), nessuna cura per l’accessibilità e l’usabilità, loghi fatti con lo stile delle clip art di Word…
Tutto questo porta ad una evidente conclusione: in mezzo a questo oceano di persone che decantano di saper realizzare siti internet, solo una piccolissima parte risulta avere le giuste competenze per svolgere correttamente questo lavoro.
La tua conclusione mi pare buona …..se mi parli di grandi agenzie,………ma un po azzardata se invece mi coinvolgi anche piccole realtà come quelle dei freelance (io rientro in quella categoria), che soprattutto per problemi di capitale ma anche di tempo, si ritrovano a dover utilizzare servizi e risorse free, per poter avere un minimo di presenza sul web.
Mi sento chiamato in causa con il tuo post in quanto anche il mio sito è parecchio datato, risale quasi 4 anni fa, e solo ora che ho un po più di possibilità sto preparando un portfolio più professionale (cmq partendo da un template free)
Buona parte di quel 90% di siti “dilettantistici” sono li per innumerevoli cause, (soprattutto economiche) che quasi mai hanno a che fare con la professionalità di chi dietro cerca di lavorare con dei clienti sempre più difficili e che badano soprattutto al portafoglio e mai al risultato concreto, impedendo il nascere di belle realtà anche in campo freelance.
ciao cristiano, mi dispiace tu ti sia sentito tirato in causa in prima persona, la statistica che ho tirato in ballo non era riferita ai soli freelancer, anzi ti dirò di più, in quel 90%, cosa che può sembrare ancora più assurda, sono più i siti di improvvisate web agency a farla da padrone.
ma su una cosa comunque non sono affatto d’accordo:
non credo che siano le risorse free o la mancanza di capitale a rendere un sito professionale, potrei citarti diversi freelancer molto bravi che hanno un sito di tutto rispetto, da fare invidia a quelli di agenzie cosiddette “grandi”, come quello della nostra sara, giusto per fare un esempio.
Ciao Nando, grazie per i complimenti, sarei proprio curiosa di avere più informazioni in merito a queste statistiche, ma anche facendo un giro ci si rende conto che purtroppo questi dati, ahimè, non dovrebbero lasciarci così sorpresi!
Cristiano scusami ma neanche io sono molto d’accordo con quanto dici: capisco i problemi di tempo e di capitale, in quanto mi trovo anche io nella stessa situazione, ma penso che far bene il proprio sito dovrebbe essere un esercizio e un investimento.
Personalmente ho tenuto in piedi il mio sito per circa 1 anno con un’unica pagina che riportava ai miei profili social-network e a una semplice pagina contatti, perché? Perché non avevo tempo di fare un sito più ampio, e piuttosto che farlo male ho preferito farlo “ridotto”.
Inoltre il codice bisogna saperlo scrivere e non c’è da pagare per questo, basta un blocco note (anzi, in genere sono proprio programmi a pagamento che scrivono codice errato e con tabelle, vedi photoshop, prime versioni di dreamweaver e… frontpage).
Per chiarire, sto parlando del free-lance “Mister X” non di te in particolare…
Per quanto riguarda i clienti hai tutto il mio sostegno e la mia comprensione :)
su questo invece concordo pienamente :) , come dicevo ad Anna un paio di post sopra,si trova parecchia gente che ti appioppa delle vere schifezze, passandoli per chissa che lavoro, contando sul fatto che il cliente medio “non sa”………avrei per le mani almeno 4 esempi seppure in una realtà piccola come la mia, di portali lasciati all’abbandono, in quanto il cliente si è trovato alla fine un sistema mal funzionante e per lui quasi impossibile da gestire, e nell’impossibilità economica di poterlo rifare a regola d’arte.
Per il resto ti posso solo dire che Sara rappresenta quello che tutti i freelance vorrebbero essere credo, e che se ci fossero meno sciacalli in giro di sicuro, un sito come il suo sarebbe la norma e la base per questa attività……….cosa che però non sempre (per lo meno agli inizi) è sempre realizzabile
Io la chiamo divificazione (o divification nei forum esteri) :)
Comunque un analogo problema è spesso presente nell’uso degli attributi, soprattutto nelle classi, dove un certo elemento viene inutilmente sovraclassato con informazioni visuali (es. first o last) quando con i soli css è possibile identificare certi elementi con opportuni selettori
O nei css stessi dove le regole vengono ripetute in maniera inutilmente verbosa ed estramamente specifiche partendo da elementi antenati distantissimi.
Tutto vero Fabrizio, anche se .last risulterà necessaria ancora per qualche anno, non credo che IE 7 (che non supporta :last-child) scomparirà molto presto, ahinoi :)
Ottimo articolo, ho sempre un calo di zuccheri quando vedo siti fatti con tabelle a matriosca!
In tanti fanno questo errore (“orrore”) perché sono solo “designer” o solo “developer”… ma in ogni caso lo si fa sempre perché si sottovaluta l’importanza di una buona base. Cose come ottimizzare il caricamento delle pagine, trovare un tag chiuso nel posto sbagliato, avere una visione d’insieme sono cose pesantissime da fare se hai fin dall’inizio sviluppato male. Ogni volta che lo dico qualcuno annuisce e mi molla un “però”
Una persona che conosco sta facendo un corso di grafica e recentemente le hanno insegnato a fare un layout con le tabelle… sostenendo che non si fa, ma che comunque devono sapere come si fa. Fosse per me farei impaginare i promessi sposi in html per mesi prima di parlare del lato grafico!
LOL sarebbe un’ottima soluzione, con tanto di testo parafrasato a fronte e note a piè pagina, sennò è troppo semplice :)
Ti capisco, noi puristi del codice siamo sempre indicati come pignoli, purtroppo.
Grazie dei complimenti e mi raccomando, bustina di zucchero a portata di mano ;)
tabelle sì, tabelle no… a volte mi viene il dubbio se per presentare con le tabelle i dati di un articolo di ecommerce sia la strada giusta… io credo di sì, ma forse ci potrebbe essere una soluzione più “giusta”. Che ne dite?
Ciao Cristiano, ben venuto.
Penso che più che una domanda di questo genere dovresti chiederti: userei la tabella per elencare i dati o per posizionarli?
Mi spiego meglio, questi dati relativi all’articolo, li metteresti “in tabella” o in una posizione specifica della pagina? Tipo “Nome dell’articolo” in alto, sotto sulla sinistra “Foto dell’articolo”, sulla destra, a fianco alla foto “Descrizione dell’articolo” e sotto “Prezzo dell’articolo”? In questo caso non dovresti utilizzare una tabella.
Una tabella può essere utile invece nel momento di presentare una lista di articoli (che sia un riepilogo nel carrello o un confronto), quindi ci sarà una colonna “Nome dell’articolo” e sotto tutto l’elenco degli articoli, una colonna “foto dell’articolo” e sotto tutte le foto degli articoli e via dicendo con la descrizione e i prezzi. In questo caso la tabella è utile ed anzi è la scelta migliore e più logica.
Spero di averti aiutato :)
Un bel post, anche se discutere sull’utilizzo delle tabelle a fine 2010 mette una profonda tristezza. Sono ancora veramente tanti i web designer e le web agency che lavorano in questo modo, ed in Italia il problema è sicuramente accentuato dall’arretratezza della situazione.
Per fortuna non mancano gli esempi validi: chi vuole diventare un professionista ha tutti i mezzi a disposizione per farlo seriamente.
E’ tutto come dici tu, parole sante! Ti ringrazio per aver commentato e apprezzato.
mi consigliate un buon libro o un tutorial per smettere di convertire le tabelle esportate da photoshop in div???
Ciao Marco, ti consiglio di leggere questo tutorial per la tua richiesta specifica https://www.yourinspirationweb.com/2009/09/27/come-trasformare-un-psd-in-xhtml-e-css-senza-perderci-la-ragione/
e soprattutto di studiarti html e css: ti consiglio questi libri http://bit.ly/ed9lC8 e http://bit.ly/dQUsF5
Scusatemi guardate in che stato è il sito del mio ex liceo (Preparate gli zuccheri) http://www.liceorussellmilano.it/.
Mi ero messo giu ha riscriverlo tutto da zero (proprio vedendo lo stato del sito che mi sono messo a leggere qualche guida su html e css qua e la, scoprendo anche voi…) solo che ormai sono uscito e non ho portato a termine il lavoro… loro pero in tutto questo tempo non hanno fatto proprio niente!!!
E’ un problema comune, è lo stesso atteggiamento che ha lo IED, non mi stupisce che lo abbia il tuo liceo (come anche il mio all’epoca).
Non ho avuto bisogno degli zuccheri, il sito è riuscito a farmi bloccare Safari! :)
tranquillo, ho una scorta di dolciumi in ufficio !!
Non ci sono parole per descrivere questo fenomeno: sarebbe meglio non esserci affatto su internet! Ma sopratutto mi chiedo come diavolo fanno a tenere aggiornato un sito del genere….
oltretutto linkano addirittura la legge stanca… http://www.liceorussellmilano.it/Normative/Normative_index.htm
Magari se siete in cerca di un lavoro potreste offrirvi di sistemargli il sito XD
da stampare e da appendere in ufficio, a monito di chi:
• aggiornarsi costa tempo e fatica per cui, “non va bene ma le uso”, “sono anni che faccio siti”, “le tabelle si usano ancora”
• per chi crede che un sito basta che si vede, del codice chissenefrega
• che ci vuole a fare un sito? il fratello di mio cugino…
• sitonline, fireworks, iweb, photoshop.. e tutti i programmi che vi dicono che possono scrivere loro il codice… non si scappa, per scrivere un buon codice ci vuole una mente umana!
Brava Anna, bell’articolo !
Ma soprattutto: ho scoperto finalmente DIV di cosa fosse l’abbreviazione!!!
(Abbiate pazienza, sono ignorante :)
Mi definisco un artigiano smanettone del web, ho pubblic ato siti web usando bovinamente le tabelle. Due pricipalmente i motivi per cui provo una certa idiosincrasia verso i css: a) il non poter centrare i menù; B) internet explorer (secondo me il limite maggiore alla diffusione dei css)
intendi IE4?
Ciao,
bell’articolo. Chiaro e motivante