mag 07

I fogli di stile (CSS, Cascading Style Sheets) sono per noi che realizziamo siti web accessibili e usabili, una vera boccata di aria fresca. Grazie ad essi, il web design ha finalmente potuto staccarsi dal codice contenuto nelle pagine, permettendo maggiore personalizzazione in fase di sviluppo e debug.

In questo articolo che suggerisco possiamo imparare a sfruttare meglio quest’ennesima perla del W3C, approfondendo la conoscenza delle specifiche tecniche e studiando i pezzi di codice proposti dai guru del settore.

Interessante è ad esempio la gestione differenziata delle pagine, per la quale abbiamo un foglio di stile per la visualizzazione a video ed uno studiato per una migliore impaginazione della stampa.

Alcuni dirty tricks ci insegnano invece a rendere le nostre pagine più visibili a spider e crawler che i motori di ricerca utilizzano per l’indicizzazione dei nostri contenuti.Vediamo poi come sia possibile assegnare due classi ad un medesimo oggetto, con evidenti benefici in termini di granularità della presentazione.

Supponendo ad esempio di avere due classi distinte per la formattazione del testo, chiamate testo e articolo, possiamo assegnarle ad un unico paragrafo elencandole semplicemente una di seguito all’altra, ponendo attenzione a separare le due voci con uno spazio (e non con le virgole, che in questo caso non vengono contemplate):

< p class="testo articolo" >Testo del mio articolo…< /p>

Tanto semplice quanto utile! Sull’onda del successo, l’autore dell’articolo Trenton Moss ci ha fatto omaggio di altri dieci tips and tricks sull’uso dei CSS, scrivendo un secondo articolo sull’interessantissimo blog, Webcredible.

Che dire, non è tutto AJAX quello che luccica :-)

Autore: Stefano Martini

Technorati tag: css, cascading style sheets, ajax, usability, w3c

mar 15

sito-web.jpg Queste poche, ma fondamentali regole vi aiuteranno a iniziare meglio la progettazione del vostro sito web. Sono solo alcuni consigli da chi lavora nel settore del web da oltre 10 anni.

Nulla a che vedere con il concetto con cui si realizzavano siti web negli anni ’80 e ’90.

1. No al contatore utenti: il contatore non ha nessuno scopo a meno quello di far apparire il tuo sito come quello di un amatore, anche se con i tuoi lavori vuoi dare ai visitatori delle informazioni sul tuo sito, probabilmente non è il caso di far sapere anche questa informazione (specialmente se il sito non è molto visitato).Se proprio vuoi sapere quante persone hanno visitato il tuo sito, chiedi al tuo host di attivare le funzionalità per creare le statistiche. I dettagli disponibili rendono le funzionalità del semplice contatore decisamente antiquate e ridotte.

2. Dimentica i testi lampeggianti o in movimento: l’unico posto in cui i testi lampeggianti risultano adatti è sulle insegne di bar o nei siti internet realizzati nella metà degli anni 90. Non sono comunque particolarmente attraenti e le persone non si aspettano molto da siti con questa caratteristica.
Riguardo alla discussione fra la realizzazione di contenuti online e la versione stampabile, tenete bene a mente che la velocità di lettura di un testo a schermo è di ¼ rispetto alla velocità su carta. Questo dimostra che nel web, dobbiamo dire quello che vogliamo in modo chiaro e semplice.

3. Inserisci intestazioni con un criterio: uno degli elementi fondamentali della pagina web è l’intestazione. All’interno del marcatore TITLE è necessario specificare il titolo della pagina che appare nel titolo della pagina e fra i risultati dei motori di ricerca.

I visitatori fanno attenzione ai titoli della pagina, quindi fai attenzione al fatto che siano chiari… se realizzi una pagina su come prendersi cura dei cani ed il tuo si chiama ‘birillo’; non chiamare la tua pagina “birillo ed i suoi simpatici amici” ma dovresti chiamare la tua pagina con un titolo del tipo “Come prendersi cura dei cani”

4. Non forzare le persone a scaricare l’ultimo versione del browser o plugin particolari per vedere il tuo sito: a meno che tu abbia un sito bello da far paura, non ha senso ridurre il numero di contatti a causa di funzioni particolari del browser o per l’uso di animazioni in Flash.

Attualmente, con l’uso appropriato dei CSS e dell’XHTML puoi realizzare una serie di pagine dall’aspetto accattivante senza dover effettuare modifiche sostanziali alla struttura se browser obsoleti come Netscape 4 sono utilizzati da un discreti numero di utenti.

5. Pensaci due volte prima di usare i frame: nei vecchi tempi era utile ricorrere ai frame anche a causa della ridotta capacità dell’HTML di realizzare layout efficaci. Ora con la tecnica del posizionamento CSS supportata correttamente dai maggiori browsers non è necessario usare i frame per il 99% dei siti.

Chi realizza un sito web per la prima volta ha comunque problemi a realizzarlo correttamente e tende a rendere il sito più complesso del necessario, creando infine una serie di problemi per l’indicizzazione della pagina attraverso i motori di ricerca.

6. No ai trucchetti per giocare i motori di ricerca: nel passato sono stati sviluppati una serie di metodi discutibili al fine di acquisire un rank (posizionamento) elevato con i motori di ricerca. Fra le tecniche utilizzate c’era quella di inserire centinaia di parole chiave con il testo invisibile (stesso colore di sfondo, con posizionamento negativo o con determinati tag HIDDEN nel foglio di stile.

Queste tecniche hanno avuto un successo limitato nel passato ma ora non sono più valide. Cercare di giocare Google (il re dei motori di ricerca) significa portare il tuo sito verso una fine orribile! Non possiamo spiegare, in questo articolo come ottenere un posizionamento elevato, ma tieni a mente questo concetto: un buon contenuto presentato in modo onesto, è alla base di un elevato rank ed un traffico elevato sul tuo sito.

7. Chat rooms: molti visitatori non danno credito alle chat rooms. E la cosa peggiore di una chat room è avere una chat room vuota! Chi ha voglia di entrare in un club in cui non c’è nessuno? Se non hai un sito con decine di migliaia di visitatori al mese, anche se uno degli argomenti trattati necessita la realizzazione di una chat room, lascia perdere.

8. Introduzioni Flash: sono colpevole come la maggior parte dei web designer perchè anche io ne facevo un uso pesante fino a qualche anno fa. Fino a pochi anni fa, le introduzioni in Flash erano dappertutto, anche se non sono sicuro se qualcuno sapeva perchè era necessario realizzarle, ma il collegamento ‘skip intro’ è il secondo pulsante più cliccato nei siti oggi!

Non perdete tempo con la realizzazione di introduzioni Flash e a mio modesto avviso Flash dovrebbe essere utilizzato solo in occasioni speciali dove si vuole dare un tocco di animazione e interattività per colpire l’utente in una zona particolare del sito e comunicare un messaggio emotivo.

9. Pagine in costruzione: non scordare che se la pagina non è completa, non metteterla online. Se esiste un link che porta a quella pagina, togli il collegamento fino a quando la pagina non è pronta. Se la tua pagina è quasi pronta per farlo notare ai tuoi visitatori, segnala una data con gli ultimi aggiornamenti e inserisci al più presto i contenuti mancanti. Soprattutto non inserire una di quelle stupide immagini ‘under construction’ con lo scavatore o l’omino che scava….ma che scava nella ricerca del tuo sito?

10. Non utilizzare uno sfondo musicale sulle tue pagine web! Ad alcuni che realizzano siti web piace l’idea di un piccolo sottofondo musicale per dare un maggiore carattere alla pagina. Se si tratta dei siti di MTV o della Disney, questa scelta è ottimale. Ma nella maggioranza dei casi non è una buona idea per due buone ragioni:

  1. I file sonori sono tipicamente ‘pesanti’, e richiedono un elevato tempo di scaricamento.
  2. Alcuni computer non hanno le casse attive, così costringi queste persone a scaricare materiale che non utilizzano.

Se proprio intendi inserire una colonna sonora nel tuo sito, utilizza almeno con l’opzione di poterla accendere o spegnere. In questo caso ti consigliamo di realizzare una struttura in Flash, la maggioranza dei browser hanno il plug-in di Flash e Flash supporta i file compatti mp3.

Naturalmente, se desideri dare agli utenti la possibilità di ascoltare musica, come l’ultima registrazione della tua band o la registrazione di un’intervista, la soluzione migliore è creare una versione podcast del file mp3 da scaricare in streaming o leggere con un lettore gratuito.

11. Tieniti sempre aggiornato sulle ultime tecniche in termine di codice e script ma non esagerare e riversarle tutte nello stesso sito, sopratutto se non lo richiede. Servizi come i feed RSS, il podcast o la gestione di immagini con tecnologia ajax (ligthbox, thickbox, ecc…) sono tutte tecniche molto attraenti del nuovo web, ma sono da utilizzarsi con parsimona per non farle inflazionare.
Autore: Stefano Martini

Technorati tag: siti web, flash, css, xhtml, web design, google, mp3, frame

feb 14

Non sono diventato pazzo … ma ho solo fatto un pò di riflessioni su alcuni parametri che spesso vengono dimenticati da chi realizza siti web e perde un pò di vista la mission del cliente, che non sempre è una multinazionale della farmaceutica!

Anche se i layout con i CSS sono presenti da anni, non sono mai stati cosi importanti come di recente. Questo era dovuto in pratica a un supporto non cross-browser, cioè limitato a pochissimi browser (come Netscape 4).

Oggi, i CSS 2.0 sono compatibili con più del 99% dei browsers (statistiche verificabili).

Allora perchè non converti il layout a tabelle del tuo sito web in uno senza tabelle in modo da realizzare un sito web accessibile e cross-browser?

Sembra impossibile ma guadagnerai più soldi. Non ci credi? Eppure è così … e adesso vi spiego le ragioni:

1) Riduzione dei costi di consumo in banda

Le pagine Web che utilizzano i CSS tendono ad avere dei file molto leggeri come byte rispetto a quelle fatte con le tabelle. Spesso le dimensioni del file si riducono del 50% quando si passa dalla tabella al CSS.

Avere file HTML più leggeri significa quindi ridurre i costi di banda poichè se ne usa una porzione minore e per portali che hanno un elevato traffico questo è un enorme vantaggio.

Il motivo principale di questa riduzione di peso delle pagine Web è dovuta al fatto che le informazioni di presentazione grafiche sono in un documento CSS esterno che viene richiamato solo quando la pagina è caricata e salvata nella cache del browser.

Le pagine con tabelle oltretutto, riportano tutt la grafica insieme al codice HTML per ogni singola pagina del sito, capite da questo il motivo del peso maggiore e della lentezza nel caricare la pagina stessa.

Inoltre i CSS possono essere utilizzati per sostituire rollover di immagini in JavaScript, allegerndo ancora di più il codice e il peso della pagina. Guardate questo articolo in inglese, menu di navigazione con CSS per capire meglio.

2) Pagine che si aprono e si scaricano più velocemente ti farebbero guadagnare di più?

Certamemente! Una bassa velocità di download è un parametro fondamentale per l’usabilità dei siti Web, da ciò si deduce che l’apertura più veloce di una pagina web ne accresce la sua usabilità.

Il nuovo re-design del Web (il Web 2.0) si appoggia anche su questi nuovi modi di concepire e progettare il Web, che deve essere uno strumento di marketing e incrementare quel tasso di conversione (Return Of Investment) che spesso è molto basso.

3) I downloads con CSS sono più veloci, per questi motivi

  • I browser leggono ben due volte all’interno delle TABELLE prima di stampare il contenuto a video, una per leggere la struttura e la seconda per leggere i contenuti.
  • Le pagine con TABELLE appaiono sullo schermo in una sola volta, solo fino a che l’intera tabella non è stata scaricata.
  • Le TABELLE rischiedono l’uso di immagini “spaziatrici” per aiutare l’impaginazione.
  • La pagina HTML costruita tramite i CSS in genere, contiene meno codice rispetto alle pagine generate con TABELLE .
  • Tutto il codice che compone la pagina è contenuto in un file CSS esterno, che verrà caricato solo una volta. Al contrario i layout a TABELLE in ogni pagina HTML devono essere ricaricate ogni volta che una nuova pagina viene caricata.
  • Con i CSS puoi controllare l’ordine di visualizzazione dei contenuti sulla pagina e fare in modo che i contenuti appaiono prima del caricamento delle immagini e il tuo sito sarà apprezzato anche per questa piccolo trucco.

Conclusioni

La rottamazione dei siti web attraverso un restyling di grafica e codice, da un layout a tabelle a quello in CSS, è un duro e lungo processo sopratutto per grandi siti ma avrai dei notevoli vantaggi.

Autore: Stefano Martini
Technorati tag: web, web standards, css, web design, web 2.0, tableless

feb 08

Oggi vorrei focalizzare l’attenzione sulla funzione link che troviamo sull’account sitemap di Google, la trovo interessante, anche se non per stabilire chissà quale valore per i link che troviamo in elenco, ma per vedere a colpo d’occhio chi ci ha linkato dal suo sito.

Si possono avere sorprese verificando i BL che ci arrivano, va bene che ci sono altri modi per verificarli, ma trovarseli li comodi invoglia a controllare e così ho fatto anche io.

Infatti ho subito trovato un sito che linkava il mio sito di posizionamento nei motori da un layer nascosto con css, li per li mi è un po’ scocciato anche perchè non ne vedevo l’utilità neppure per lui, visto che un link non cliccabile per google vale meno di zero, poi parlando con l’amico Fabio dell’Orto abbiamo ragionato e siamo arrivati alla conclusione che Google non dovrebbe penalizzare un sito solo perchè qualche pirla lo linka da un layer nascosto.

Sarebbe troppo facile infatti far penalizzare un sito della concorrenza, penso che Google sappia bene quando una cosa è fatta intenzionalmente o al solo scopo di nuocere.

Comunque date un occhiata a questa funzione per i link di Google Sitemap, naturalmente bisogna essere registrati, avere un account insomma, poi bisogna verificare la proprietà del sito che si intende controllare, mediante un tag che Google ti da da inserire sulla pagina del sito, quindi effettuata la verifica della proprietà, Google ci permetterà di verificare una serie di cose, link appunto sia in entrata che in uscita dal nostro sito, e la situazione che ha trovato Googlebot l’ultima volta che ci è passato, segnalandoci se ci sono stati problemi o link interrotti.

Bene, buon lavoro con Google Sitemap dunque.

Gualtiero Santucci.
Technorati tag: PosizionamentoBacklinksGoogleGooglebotSitemap