CSSBlog.it » pianificazione

10 trucchi per velocizzare lo sviluppo web

Matteo Moro — Tue, 23 Dec 2008 08:00:36 +0000

Non sono d’accordo su tutti i punti, ma questo è quello che consigliano su SixRevisions.com:

Usa qualche framework
Usa qualche IDE
Dividi i problemi in sotto-problemi
Controlla il funzionamento delle interfacce con più browser
Scrivi il codice pensando al suo riutilizzo
Collabora
Automatizza la formattazione corretta del codice
Non sottovalutare le fasi di analisi e progettazione
Non reinventare l’acqua calda
Riduci le funzionalità

Locali pubblici e web: ottenere visibilità e clienti dalla presenza in rete

Matteo Moro — Fri, 03 Oct 2008 07:00:14 +0000

Da qualche settimana leggo il blog “Aprire un bar“: non sono un operatore del settore, ma da buon frequentatore di locali mi piace tenermi informato su come funzionino. Oltretutto è scritto bene e permette anche a chi, profano come me, non ha grandi conoscenze sull’ambiente dall’altra parte del bancone. Tra gli ultimi post, ce n’è uno che ha attirato la mia attenzione: il sito web di un bar, infatti, si interseca alla perfezione con una delle mie passioni, che poi è anche l’argomento di cui si parla in questo blog.

Ma quali servizi deve fornire il sito web di un bar o, più in generale, di un locale pubblico? Alcuni sono abbastanza banali: orari di apertura aggiornati, una mappa, qualche foto del locale e del personale (o dei proprietari), un listino. Ci sono poi cose che variano a seconda del tipo di locale:

servizi particolari: feste di laurea e pranzi di matrimonio sono solo i primi due esempi che mi sono venuti in mente
eventi: concerti, serate particolari
promozioni: serate a tema o happy hour in genere
specialità: soprattutto se si tratta di un ristorante, le pietanze in cui è specializzato

La cosa che comunque è importante è che le informazioni siano aggiornate: non c’è cosa peggiore di un’informazione sbagliata che proviene direttamente dal gestore.

E visto che le ricerche su Internet per i nomi dei locali o per i servizi eventualmente forniti sembrano essere in aumento, perchè non investire qualcosa in Adwords, mantenere aggiornato il proprio profilo su portali specializzati ed essere presenti su qualche social network?

Insomma, non servono grandi cose: basta una presenza su internet ben pianificata, calibrata sulle effettive esigenze e sul tipo di locale, a iniziare dalle piccole cose: tanto per fare un esempio banale, se nessuno legge la posta elettronica è inutile pubblicare l’indirizzo sul sito, no?

Perchè non aprire nuove finestre per i link?

Matteo Moro — Fri, 04 Jul 2008 05:00:10 +0000

La discussione è di quelle che proseguono da anni: aprire nuove finestre e tenere i visitatori sul proprio sito o lasciare loro libertà di decidere? Per quanto mi riguarda, le pagine web che fanno aprire i link in una nuova finestra mi danno fastidio: da utente, voglio avere il controllo della mia navigazione, che non dev’essere decisa o influenzata da scelte di marketing quantomeno discutibili.

Un’articolo di Smashing Magazine, pubblicato qualche giorno fa, spiega perchè aprire i link nella stessa finestra, portando diversi argomenti interessanti: il fatto di aprire nuove finestre deriva spesso dal timore, da parte di designer o manager, di perdere l’utente, lasciandolo scappare su altri siti. Se, a prima vista, questo può sembrare vero, bisogna anche considerare il fatto che un utente che vuole andarsene se ne andrà, indipendentemente dagli accorgimenti tecnici utilizzati per cercare di trattenerlo. Inoltre, se gli si rende la vita difficile, avrà una percezione negativa delle nostre pagine e non sarà portato a tornare.

Per quanto riguarda, invece, l’usabilità dell’interfaccia, la scelta di aprire i link nella stessa finestra è la migliore. Consideriamo le due situazioni opposte:

utente che vuole una nuova finestra e sito che apre il link nella stessa
utente che vuole il link aperto nella stessa finestra e sito che ne apre una nuova

Nel primo caso, all’utente serà sufficiente aprire manualmente una nuova finestra con il link, utilizzando il menu contestuale del browser o il tasto centrale, a seconda della configurazione. Nel secondo caso, invece, l’utente si troverà spiazzato e dovrà lavorare di copia/incolla per ottenere la situazione che desidera, perdendo oltretutto l’uso del tasto “Indietro” del browser.

Eccezioni

Come per tutte le regole, anche in questo caso ci sono delle eccezioni. Ecco alcuni esempi di situazioni in cui aprendo una nuova finestra si rispetta la volontà dell’utente, prima che quella del webdesigner, in modo che non perda il “filo della navigazione”:

Link a documenti non HTML
Popup informativi durante un processo di acquisto
Licenze o condizioni d’uso da leggere per accettazione

E voi, come vi comportate? Nuove finestre o no?

Capire i visitatori e cucire loro addosso un sito su misura

Matteo Moro — Mon, 30 Jun 2008 05:00:01 +0000

Una delle componenti da tenere in considerazione, quando si progetta un nuovo sito web o se ne modifica uno esistente, sono i visitatori. Chi sono, da dove arrivano, perchè arrivano, che cosa cercano, che cosa li farà scappare? Sono tutte domande utili per capire chi ci legge e, di conseguenza, sono una base di partenza per migliorare. Oltre ai dati statistici, è importante porsi le stesse domande riguardo ai visitatori che vorremmo avere (anzichè su quelli che già abbiamo), in modo da capire anche la direzione in cui muoverci per ottenere gli obiettivi desiderati.

Gli strumenti per analizzare i visitatori sono i più diversi: i più utilizzati sono i sistemi di statistica come Google Analytics, che permettono di conoscere quali sono le pagine più visitate, di entrata e di uscita, le query di ricerca e molte altre informazioni utili. Si può anche ricorrere ad altre tecniche: chiedere opinioni direttamente agli utenti sia attraverso lo stesso sito web (come sta facendo PHPBlog in questo periodo, e vi invito a partecipare) che con questionari o strumenti di questo tipo può essere utile da due punti di vista. Da un lato si avranno le risposte, che forniranno il materiale su cui lavorare; dall’altro, invece, le non-risposte possono dare un’idea sul tipo di visitatori che ha il sito e su quanto sono coinvolti negli argomenti trattati.

Quali che siano gli strumenti usati per l’analisi, bisogna anche capire dove e come applicare le modifiche di cui si manifesta il bisogno. lo studio Vandelay indica alcune strade da seguire per muoversi nella direzione giusta, in base al tipo di visitatori che abbiamo e quelli che vorremmo avere. Cosa andrà controllato, ed eventualmente modificato, nel nostro sito quando avremo capito meglio chi sono i nostri visitatori? Ecco qualche spunto:

Navigazione: a seconda del tipo di visitatori che abbiamo individuato, sarà bene mettere a disposizione una struttura delle pagine coerente con quello che potrebbero cercare, in modo da facilitare la navigazione e rendere più veloce la ricerca di informazioni.
Messaggio: il messaggio che arriva dal sito non sempre corrisponde al suo contenuto. Il messaggio che mandiamo aivisitatori deriva dall’impaginazione, dal logo, dalla struttura delle pagine e da tutto l’insieme di cui il contenuto è solo una parte.
Contenuti: di tutte le parti che compongono un sito, il contenuto è una delle più importanti. Quando si scriverà qualcosa, sarà dunque il caso di porsi alcune domande: è in linea con gli argomenti che voglio trattare? Che tipo di persone potranno essere interessate? Sono quelle che vorrei avere qui?
Tipo di linguaggio: a seconda del tipo di visitatori, deve cambiare anche il linguaggio. Prendendo come esempio un sito di tutorial tecnici per neofiti, sarà bene usare un linguaggio piuttosto semplice. Se invece i visitatori fossero dei tecnici esperti in cerca di documentazione particolare, la cosa cambia.
Posizione dei componenti: è bene fare in modo che gli elementi più rilevanti delle pagine siano bene in vista, in modo che siano facili da trovare per i visitatori. Riempire le pagine di cose inutili crea confusione e non aiuta i visitatori a trovare quello che cercano

Ho dimenticato qualcosa o, peggio, ho predicato bene e razzolato male? Cosa ti aspetti da un blog come questo? Hai trovato quello che ti aspettavi?

Come infastidire gli utenti e non farli tornare mai più

Matteo Moro — Mon, 02 Jun 2008 05:00:12 +0000

Ci sono cose che possono infastidire gli utenti: cose banali che spesso non vengono neanche prese in considerazione e il cui effetto potrebbe essere quello di far scappare la gente. Abbassano il livello di usabilità, appesantiscono inutilmente le pagine, provocano perdite di tempo inutili agli utenti: tutto questo senza un motivo plausibile.

Perchè indurre gli utenti ad andarsene? Bastano pochi accorgimenti per sistemare molti problemi: David Walsh presenta alcuni di questi comportamenti, assolutamente da evitare sulle nostre pagine web.

Ridimensionare la finestra del browser

Alcuni obbligano l’utente ad aprire una nuova finestra del browser. Fa schifo, ma non è la cosa peggiore che si può fare: altri decidono di ridimensionare la finestra del browser dell’utente. Fortunatamente Firefox permette di impedire queste pratiche: se voglio rimpicciolire la finestra lo farò da solo, grazie.

Richiedere il login per leggere articoli generici

Se il contenuto che sto per leggere non è destinato in modo specifico a me, perchè mai dovrei effettuare un login per leggerlo? Per fornire un indirizzo email e le mie abitudini di navigazione a chi gestisce il sito? No, grazie: me ne vado da un’altra parte.

Nascondere il modulo per il login

Quando il contenuto è destinato a me, il login non mi infastidisce: se però non so dove inserire username e password e il tutto è ben nascosto, sto perdendo del tempo inutilmente.

Richiedere l’uso di plugin strani

Vuoi vedere un video? Installa il nostro plugin! Ah, forse per il tuo sistema non è disponibile, o forse dev scaricarlo da questo sito e non da quello, o forse ancora… EHI! Se volete mostrarmi il vostro video, o qualunque altra cosa, fate in modo di utilizzare formati standard. Siete voi che dovete adattarvi all’utenza, non viceversa!

Non ottimizzare le immagini

Come mai quell’icona ci mette una vita ad essere visualizzata? Non sarà mica un’immagine enorme “ridimensionata” attraverso gli attributi del tag img? Accidenti! E se fossi collegato dal cellulare (magari pagando a traffico) o con un modem analogico? E se domani vi arrivasse un picco da millemila utenti contemporanei? Ottimizzare le immagini, grazie.

Usare Ajax dove non serve

Ajax è indubbiamente figo e permette di fare cose che altrimenti non sarebbero possibile, ma ha un difetto: appesantisce le pagine. No, non la dimensione del file da scaricare ma proprio la CPU del dispositivo che uso per navigare. Si tratta infatti di codice Javascript che viene eseguito sul mio PC. Evitatelo quando non è necessario, non voglio comprarmi un dual core solo per ammirare il vostro splendido menu di navigazione.

10 regole per trovare clienti vicini a noi

Matteo Moro — Tue, 22 Apr 2008 05:00:48 +0000

Molti web designer lavorano con clienti a livello nazionale, quando non addirittura mondiale. Questo aiuta sicuramente ad aumentare il mercato potenziale, ma anche il fatto di localizzare il nostro lavoro su obiettivi geograficamente vicini a noi può rivelarsi un vantaggio.

Un interessante articolo di Vandelay Web Design rivela dieci semplici regole per riuscire a conquistare una clientela geograficamente vicina a noi.

Utilizzare i nomi dei luoghi che ci interessano nei titoli delle pagine
Utilizzare correttamente i meta-tag nelle pagine web
Sfruttare la pubblicità pay-per-click
Utilizzare le informazioni fornite delle camere di commercio
Avere link su siti web locali
Lavorare con clienti conosciuti
Proporre i propri servizi ai potenziali clienti nella zona
Partecipare a eventi locali
Distribuire biglietti da visita
Farsi pubblicità a livello locale

Realizzare CSS ben strutturati: alcuni consigli sul metodo di lavoro

Matteo Moro — Fri, 18 Apr 2008 05:00:30 +0000

Oltre alle capacità tecniche, per realizzare dei buoni CSS è necessario avere un metodo di lavoro adeguato, che ci permetta di creare fogli di stile ben commentati e facilmente manutenibili, oltre a evitare le perdite di tempo su aspetti che affrontiamo ad ogni progetto e su dettagli imprevisti al momento della progettazione delle pagine. Partendo da questi presupposti, Antonio Lupetti ha scritto due articoli molto interessanti su Woork, che parlano inizialmente di come creare CSS leggibili e poi del suo metodo di lavoro quando si trova ad affrontare l’inizio di un progetto.

Il metodo si può suddividere in varie fasi, anche se naturalmente le cose cambiano a seconda del progetto e delle abitudini personali del designer. Può comunque essere utile per capire se stiamo sbagliando qualcosa nell’approccio al lavoro o se abbiamo delle tecniche diverse, che consideriamo più corrette di quelle usate da Antonio.

Sii semplice, metodico e pensa a scrivere codice elegante
Prima di iniziare chiediti quale risultato visivo vuoi ottenere
Azzera le proprietà predefinite degli elementi principali
Inizia a scrivere il CSS definendo le proprietà degli elementi HTML
Definisci le classi per gli elementi del layout che intendi realizzare
Scrivi il codice HTML e fai qualche prima prova
Definisci le ultime classi, i dettagli

Posto che ogni progetto web è diverso dagli altri, come affrontate l’inizio di un nuovo lavoro? Avete delle abitudini particolari o utilizzate ogni volta un metodo diverso?

APPROFONDIMENTI:

Woork: “Optimize your CSS files to improve code readability“
Woork: “Write a well structured CSS file without becoming crazy“

Ottimizzare i guadagni: posizionamento della pubblicità

Matteo Moro — Wed, 16 Apr 2008 05:00:50 +0000

Nel momento in cui si progettano pagine web che prevedono l’esposizione di annunci pubblicitari, bisogna tenere presente il fatto che anch’essi andranno a comporre il layout delle pagine e il loro posizionamento va studiato in modo da raggiungere due obiettivi:

ottimizzare i guadagni
non infastidire i lettori

A questo proposito, sul blog di Google Adsense ci sono alcuni consigli sulle pratiche da non seguire per quanto riguarda il posizionamento degli annunci: in particolare, la zona immediatamente sotto il titolo non andrebbe utilizzata per gli annunci, in modo da non confondere le idee al lettore che potrebbe pensare che si tratti effettivamente di contenuti anzichè pubblicità.

In questo blog, oltre ad altri che gestisco, gli annunci sono posizionati proprio sotto il titolo e il motivo è ben preciso: non è mia intenzione interrompere il contenuto posizionando pubblicità tra i paragrafi (questo si, lo considero fastidioso) e la posizione favorisce una migliore contestualizzazione rispetto ai contenuti, fornendo spesso agli utenti un servizio utile, oltre che una fonte di guadagno per il blog.

Sul fatto di indicare chiaramente la pubblicità come tale anzichè mascherarla da contenuto, mi trovo d’accordo: va però considerato che, in un’ottica di design complessivo della pagina, lo stile degli annunci va comunque contestualizzato insieme al resto degli elementi con una certa omogeneità stilistica. Questo non tanto per confondere le idee agli utenti, quanto per non ottenere l’effetto “pugno in un occhio“.

Qual è la vostra esperienza sul posizionamento degli annunci pubblicitari? Avete provato diverse zone della pagina, quali si sono rivelate migliori sia per i guadagni che per la soddisfazione degli utenti?

Migliorare la comunicazione nei rapporti con i clienti

Matteo Moro — Mon, 14 Apr 2008 06:00:19 +0000

Oltre alle capacità tecniche, è importante anche imparare a comunicare con i nostri clienti: una buona comunicazione, infatti, influisce notevolmente sia sulle possibilità di farci scegliere che di portare al termine nel modo migliore i lavori iniziati. La comunicazione non è solo pubblicità, significa anche gestire nel modo migliore i rapporti con i clienti durante lo svolgimento dei lavori, per informarli correttamente sul loro andamento ed evitare inutili perdite di tempo o, peggilo, incomprensioni che potrebbero danneggiare la nostra attività. Prendo spunto da un interessante articolo di Vandelay Web Design per dare qualche consiglio in proposito.

Perchè la comunicazione è importante? Vediamo qualche esempio:

Il web design è un servizio che forniamo al cliente
Il cliente conosce meglio di noi il suo lavoro
Dipendiamo dal cliente, ma anche il cliente dipende da noi
Spesso il cliente è preoccupato sull’andamento dei lavori
Una buona stategia di comunicazione facilita l’acquisizione di nuovi clienti

Ed ecco qualche consiglio, per migliorare il modo di comunicare con i nostri clienti:

Fornisci mezzi per comunicare con te
Non usare un linguaggio troppo tecnico
Incoraggia il cliente ad esprimere opinioni e perplessità
Fai attenzione ai malintesi via e-mail
Usa al meglio gli incontri faccia a faccia
Poni la comunicazione al centro del rapporto con il cliente
Non avere preconcetti sui tuoi clienti
Cerca di spiegarti bene

Se vuoi approfondire l’argomento, leggi l’articolo originale e partecipa alla discussione che si è sviluppata intorno ad esso. Se vuoi condividere con i lettori le tue esperienze, positive e negative, puoi usare i commenti direttamente in questo articolo, sarò felice di leggere le tue opinioni in proposito.

Risparmiare banda utilizzando la sintassi abbreviata dei CSS

Matteo Moro — Fri, 11 Apr 2008 06:00:14 +0000

L’uso corretto dei fogli di stile, oltre a separare il contenuto dalla presentazione e rendere molto più semplice la gestione e l’aggiornamento delle pagine web, consente di velocizzarne il caricamento e risparmiare un bel po’ di banda. Quando però anche il foglio di stile diventa corposo, l’uso della sintassi abbreviata di molte proprietà può tornare utile per risparmiare ulteriore banda.

Naturalmente non ci sono solo vantaggi nell’utilizzo di queste tecniche: la leggibilità del codice ne potrà risentire, soprattutto se oltre alla sintassi abbreviata decidiamo anche di rimuovere gli spazi dal nostro foglio di stile. Si tratta dunque di un lavoro da fare solo al termine dello sviluppo, quando i risultati ottenuti sono soddisfacenti e non sono necessarie ulteriori modifiche: mettere mano a un foglio di stile trattato in questo modo, infatti potrebbe essere molto complesso e portare a brutte sorprese.

In un articolo di CSSNewbie.com, vengono analizzati diversi casi in cui è possibile abbreviare la sintassi, raggruppando diverse caratteristiche della stessa proprietà che potrebbero essere specificate singolarmente: margin, padding, border, background e font sono solo alcune delle proprietà per cui è possibile abbreviare la sintassi. In questi casi, la documentazione del W3C ci verrà in aiuto.

APPROFONDIMENTI:

CSSNewbie.com: “Writing CSS Shorthand“
W3C.org: “CSS 2.1 Specification“