6 consigli per velocizzare il tuo sito

speedIl tempo di caricamento di un sito è un fattore molto importante per l’esperienza di navigazione dell’utente e non solo.
Ad oggi, dato che può sembrare incredibile, circa il 55% dei siti web risultano pesanti o lenti e questo significa che più della metà dei siti esistenti non si sono mai posti il problema di quanto sia performante il loro sito e di conseguenza non si sono mai preoccupati dell’esperienza di navigazione offerta agli utenti.

Secondo una ricerca effettuata da Kissmetric un solo secondo di ritardo nel caricamento di una pagina produce una serie di effetti negativi tra i quali la riduzione delle visite del 10% e un’opinione negativa di circa il 40% dei visitatori, senza contare che queste statistiche non si occupano della lettura sui dispositivi mobili per i quali risulta che solo il 28% ha un sito pienamente responsivo.
Se i secondi di attesa passano a 3 il 57% dei visitatori potrebbe abbandonare il sito, si tratta quindi di un fattore cruciale per un sito web.

Controlliamo lo stato del nostro sito

Per controllare lo stato del nostro sito possiamo usare Google PageSpeed Insights, un tool che oltre ad analizzare il nostro sito ci dà anche una serie di consigli utili su come risolvere i problemi riscontrati nell’analisi.

6 Consigli per velocizzare il caricamento della pagina

Ottimizzare la cache
Tutti i siti hanno una serie di risorse statiche che non cambiano mai, CSS, JavaScript, immagini, tutti elementi che possono impiegare del tempo a caricarsi.
Ottimizzare tramite il web server la cache per gli elementi statici migliora di sicuro le performance del sito, e ancora una volta Google ci viene in aiuto con una serie di best practice su come usare la cache.

Ridurre il numero di round-trip verso il server
Il round trip è il tempo che impiega un pacchetto a viaggiare tra client e server ed è un fattore rilevante nel tempo di risposta, quindi quanto più è alto il numero dei pacchetti necessari per visualizzare la pagina che si muoveranno avanti e indietro tra il browser e il web server maggiore sarà il tempo di caricamento della pagina.
Ci sono una serie di accorgimenti che possiamo adoperare per ridurre al minimo indispensabile il numero dei round-trip, evitando ad esempio i redirect di pagina non necessari come quelli per tracciare la pagine visitate o i comportamenti degli utenti, oppure riducendo il peso e il numero dei file CSS e JavaScript tramite gli strumenti di minimizzazione o ancora caricando le risorse in maniera asincrona e parallelizzando i download dove possibile.
Anche il numero di immagini presenti nella pagina ha un impatto notevole nella performance del nostro sito. Tecniche come CSS Sprites ci permettono di raggruppare all’interno di un unico file le diverse immagini che dobbiamo mostrare nelle pagine ed estrarle in seguito tramite CSS.
Dobbiamo evitare inoltre quando possibile di usare funzioni per caricare contenuti esterni che aumentano il tempo di caricamento di una pagina come document.write(), mentre possiamo invece elencare le risorse esterne all’interno dell’Header HTML o usare un semplice iframe.

Controllo del peso
Nell’ottica di ridurre gli sprechi per velocizzare il tempo di risposta va tenuta sotto controllo la dimensione della richiesta che inviamo al server cercando di non eccedere i 1500 byte. Dobbiamo quindi evitare di usare i cookie come fossero tabelle di un database eliminando i campi non usati o non necessari.
Si può inoltre velocizzare il caricamento di file e risorse statiche attraverso un dominio o una CDN che non necessita di cookie, evitando in questo modo di inviare il cookie per accedere ad una risorsa che non necessita di tale informazione.

Pubblicità
Non bisogna eccedere col numero di annunci pubblicitari sul sito poiché ognuno di essi costa tempo e velocità.

Pulsanti Social
Indispensabili al giorno d’oggi per avere un sito che sia media friendly, i Pulsanti Social rappresentano comunque un tempo aggiuntivo di caricamento per la pagina. Troppi pulsanti di condivisione posso inoltre rendere il sito poco sociale come spiega questo post, quindi meglio pochi ma buoni.

Rich Media
Immagini e video di alta qualità possono essere un’ottima scelta per un sito ma anche rivelarsi una trappola rendendo la pagina pesante e lenta.
Dobbiamo fare attenzione, oltre ovviamente alla quantità, anche al formato che utilizziamo, è inutile ad esempio utilizzare un formato in alta definizione per immagini di piccole dimensioni.

Questi consigli sono solo una piccola parte di quello che possiamo fare per rendere il nostro sito più performante, ma vale la pena cominciare.

Per approfondire: What Makes Your Website Slow? 6 Ways To Optimize Page Load Speed

3 Requisiti Essenziali Di Un Sito Web Nel 2014

webdesign_2014L’innovazione nel mondo del web design così come in quello del marketing digitale è strettamente correlata alla diffusione delle nuove tecnologie e di nuovi dispositivi.

Le aziende che vogliono avere una presenza in rete per raggiungere un’audience quanto più vasta è possibile, devono quindi adattarsi in maniera celere ai continui cambiamenti che l’innovazione tecnologica produce.

Al giorno d’oggi, ad esempio, sempre più persone scelgono di accedere ad internet attraverso i dispositivi mobili e questo trend si presuppone continuerà negli anni a venire.

3 requisiti essenziali di web design che un sito deve avere nel 2014:
  1. Design mobile-friendly
    Come ci mostrano le statistiche, gli accessi da dispositivi mobili sono in continuo aumento quindi è d’obbligo avere un sito progettato per essere mobile-friendly.
    Una delle tecniche più utilizzate di recente per disegnare un sito con queste caratteristiche è il Responsive Web Design che tramite Framework come Bootstrap ci permette di creare siti web che si adattino a tutti i tipi di dispositivi.
    Oltre questo aspetto tecnico ce ne sono altri ugualmente importanti che vanno considerati:
    1. Il testo
      La visibilità di un testo su un piccolo schermo non è ottimale, la dimensione del carattere deve essere quindi abbastanza grande da permettere un’agevole lettura.
    2. Design
      I dispositivi mobili quando non sono connessi ad una rete Wi-Fi spesso non hanno una velocità di accesso alla rete elevata. Creare un design leggero senza inutili accessori e immagini superflue sicuramente farà in modo che il nostro sito sia caricato più velocemente.
    3. Video
      Secondo il report di ByteMobile i video visti dai dispositivi mobili oscillano dal 50% fino ad arrivare al 69% su alcune reti.
      Il problema di avere video visibili su tutti i dispositivi lo risolve HTLM5 che soppianta il vecchio flash.
  2. Design orientato al SEO
    Il tempo di caricamento del nostro sito è un elemento importante da considerare per il SEO ed è fortemente condizionato dalle scelte fatte in fase di design.
    Dobbiamo quindi selezionare con attenzione quanti e quali elementi vogliamo inserire nelle nostre pagine. Aggiungere troppi componenti o animazioni può peggiorare le prestazioni del nostro sito e di riflesso la nostra indicizzazione nei motori di ricerca.
    Anche la qualità del codice e la scrittura dei nostri meta tag rivestono un aspetto importante sia per l’indicizzazione che per usufruire a pieno delle potenzialità di condivisione dei social network.
    Su The Moz Blog troviamo The Web Developer’s SEO Cheat Sheet 2.0, una guida che illustra gli aspetti fondamentali del SEO e della quale è disponibile anche una versione in pdf.
  3. Lo Storytelling aziendale
    Raccontare la nostra storia, quali sono le cose che proponiamo e il perché, sono fattori di primaria importanza. Chi cerca informazioni o prodotti  tende ad abbandonare il sito se non comprende bene chi siamo e cosa facciamo.
    Vediamo le 4 sezioni che dovrebbero essere presenti nel nostro sito per raccontare di noi e delle nostre competenze.
    1. Blog
      Il content marketing è un ottimo sistema per aumentare contatti e relazioni attraverso la realizzazione di contenuti di qualità.
      Fornendo agli utenti sempre più pagine da consultare si stabilisce nel tempo un rapporto di fiducia facilitando il salto da utente a cliente.
    2. Servizi
      Per essere affidabili e attendibili agli occhi di un potenziale cliente è utile fornire una sezione che spieghi in modo semplice qual è la nostra competenza e quali servizi vengono offerti.
    3. Chi siamo
      Le persone fanno affari con le persone non con i siti, chi è interessato ai nostri servizi vuole sapere chi siamo per potersi fidare, difatti molto spesso la pagina più visitata di un sito è proprio l’About.
      E’ utile dare un volto all’azienda e per farlo ad esempio si possono elencare tutti i componenti della squadra con le loro foto e i link ai loro profili sui social network.
    4. Contatti
      Questa pagina deve essere semplice senza troppe distrazioni, il suo solo scopo è fornire i nostri recapiti a chi vuole entrare in contatto con noi.

Per saperne di più: 3 Must-Have Qualities of an Effective Website in 2014

Il Web Design Nel 2014

14 Web Site Trend For 2014

Il web design è in continua evoluzione con sempre nuove tendenze, tecniche e idee.
Aggiornare il design e le funzionalità offerte dal nostro sito ci aiuta a migliorarne la fruibilità.

Vediamo alcune delle principali tendenze che incontreremo sempre più di frequente nel 2014, anche se non tutte sono ovviamente applicabili ad ogni sito, né vanno tutte implementate per cercare di avere un maggiore impatto sugli utenti.

14 tendenze del web design nel 2014

  1. Single Page Sites
    Il sito a pagina singola è un tipo di design a foglio unico molto utile per i siti di piccole dimensioni che non hanno moltissimi contenuti da esporre, e garantisce uno stile di navigazione semplice ed efficace. Questo tipo di approccio è ovviamente sconsigliato per i siti di grandi dimensioni e con molti contenuti, e se l’obiettivo del design è il SEO.
    Un esempio di questa tecnica di web design è: Grandriverconnection
  2. Scrolling
    L’ampia diffusione dei dispositivi mobili sta cambiando il modo in cui i lettori accedono ai siti, costringendoli a scorrere di più la pagina per poterne leggere tutto il contenuto. Non è necessario avere tutte le informazioni a centro pagina e se da un lato si aprono nuove prospettive per la progettazione delle pagine, dall’altro le pagine troppo lunghe e ricche di contenuti possono sovraccaricare e disorientare gli utenti.
    Nel 2014 le pagine web vanno pensate e disegnate in modo da coinvolgere e incoraggiare l’utente a scorrere la pagina.
  3. Flat UI
    L’interfaccia utente piatta è un concetto di web design emergente e già implementato in molti siti web.
    Al contrario della tendenza precedente, lo scheumorfismo, questa tecnica si concentra essenzialmente sui contenuti e fornisce un disegno pulito senza elementi di distrazione.
    Meno immagini e design semplice equivalgono a tempi di caricamento più rapidi.
    iOS 7, Gmail, Facebook e Windows 8 sono tutti esempi di interfacce che hanno implementato la Flat UI.
  4. Fixed Header Bar
    La parte più impegnativa della creazione di un sito è fare in modo che la navigazione sia il più possibile semplice e intuitiva.
    I menu di navigazione bloccati nella testata della pagina web costringono gli utenti a scorrere verso l’alto ogni volta che devono muoversi attraverso il sito.
    Con le pagine web più ricche di contenuti e l’uso sempre maggiore dei browser mobili l’accesso a questo tipo di menu è diventato sempre più scomodo.
    La soluzione per il 2014 sarà la barra di navigazione in posizione fissa che segue lo scrolling della pagina per consentire ai lettori di accedervi rapidamente, agevolandone la navigazione.
    Postkudos applica questa tecnica.
  5. Large Type
    L’aumento della risoluzione degli schermi ha reso necessario aumentare la dimensione standard del carattere per rendere il testo più leggibile e chiaro.
    L’uso di caratteri grandi ha un impatto immediato su chi legge e riesce a comunicare meglio l’obiettivo del sito. Se una pagina web è troppo ricca di contenuti il visitatore potrebbe decidere di non leggerla, ma in pochi secondi i large type possono mettere in risalto le voci che potrebbero interessare il lettore ed attirare la sua attenzione.
  6. Javascript / HTML 5 Animations / CSS 3
    L’avvento dell’iPhone e la sua incompatibilità con animazioni e video in Flash/Silverlight, ha accelerato la transizione verso Javascript, HTML e CSS.
    Con i browser moderni, gli sviluppatori non dovranno più fare affidamento sui plugin per creare animazioni e video.
    Queste tecnologie più recenti spesso non sono disponibili nei vecchi browser, ma funzionano perfettamente sui dispositivi mobili.
  7. Parallax Scrolling
    Il Parallax scrolling è una speciale tecnica di web design in cui lo sfondo, le immagini e il testo sono animati.
    Mentre si scorre la pagina, testo e altri elementi grafici si muoveranno sulla pagina creando scene e modificando il contenuto.
    Il curriculum interattivo di Robby Leonardi è un ottimo esempio di questa tecnologia.
  8. Large Background
    In passato usare enormi immagini come sfondo del sito era un’idea impensabile perché rallentava il caricamento delle pagine web.
    Con connessioni Internet più veloci, questa problematica è sparita e la domanda che ci si pone è più che altro se una grande immagine di sfondo sia utile al sito senza creare distrazioni.
    Con un design appropriato e la giusta immagine è possibile applicare questa tecnica per migliorare l’esperienza del lettore e mettere in risalto i contenuti del sito.
    City of Albion adotta questa tipologia di web design.
  9. Video Backgrounds
    Insieme all’uso di immagini ad alta definizione come sfondo assistiamo a quello dei video in background progettati non per diventare il centro principale del sito, ma per valorizzarne il design e i contenuti.
    Getsalestraining dà l’idea di come possiamo usare efficacemente i video background.
  10. Separate Mobile Site
    Uno dei modi più popolari per la creazione di un sito che sia fruibile dai dispositivi mobili è quello di crearne uno completamente separato spesso posizionato in un sotto-dominio del sito principale, come ad esempio ha scelto di fare Repubblica.
    Quando un utente si collega da un dispositivo mobile, viene immediatamente reindirizzato alla versione ad esso destinata. Contenuti e disegno sono completamente diversi ed è necessaria la manutenzione di un doppio sito.
    Nuove tecnologie stanno soppiantando e rendendo obsoleta questa soluzione in favore di nuove procedure ed in particolare verso la scelta del responsive web design.
  11. Responsive Web Design
    Ad oggi il Responsive Web Design è la migliore tecnica per progettare un sito mobile-friendly.
    Piuttosto che gestire una serie completamente separata di contenuti e un diverso design, è possibile adattare il contenuto esistente alla risoluzione del dispositivo che si sta utilizzando.
    Smartphone, Tablet e utenti desktop possono vedere lo stesso contenuto con un layout diverso progettato specificamente per le dimensioni dello schermo del dispositivo.
    Attraverso il responsive design è possibile evidenziare contenuti importanti per chi visita il sito tramite smartphone, come orari, luoghi, o numeri di telefono.
    Un esempio di responsive web design è il tema di WordPress che uso in questo blog.
  12. High-Resolution Screen
    Proprio come la televisione a definizione standard è stata superata negli ultimi anni dall’introduzione di segnali ad alta definizione, gli schermi ad alta risoluzione diventeranno comuni su computer e dispositivi mobili.
    Dal momento in cui Apple ha iniziato a costruire i propri dispositivi con lo schermo retina ad alta definizione, è nata la necessità di avere grafica ad alta risoluzione nei siti web per evitare l’effetto di pixelizzazione.
    Questa necessità non è impellente visto l’esigua fetta di traffico internet che occupano i dispositivi retina, ma è da tenere d’occhio per l’immediato futuro.
  13. Third-Party Services
    A volte per risolvere problematiche invece di reinventare soluzioni ogni volta, possiamo contare su servizi di terze parti che lo hanno già fatto per noi.
    Se si vogliono ad esempio pubblicare foto in tempo reale di un evento, si possono integrare Instagram o Flickr, che aggiorneranno automaticamente il sito web.
    I Servizi di terze parti possono anche rivelarsi utili per mostrare i video, implementare un sistema di newsletter, o raccogliere statistiche sui visitatori di un sito.
  14. Software as a Service
    Proprio come i servizi di terze parti, il Software as a Service (SaaS) ci permette di usufruire di un servizio per la risoluzione di un problema.
    MailChimp, per esempio, è un sistema di newsletter gratuito fino a 2.000 abbonati e 12.000 email al mese.
    Se invece ci dovesse essere la necessità di inviare più email o di gestire un numero maggiore di abbonati il servizio prevede il pagamento di una quota di sottoscrizione che sarà comunque inferiore ai costi necessari per costruire e gestire in proprio il servizio.

Se sei arrivato a leggere l’articolo fino in fondo, allora anche questo blog è un buon esempio di web design.

Per approfondire: 14 Website Trends for 2014

10 strumenti per il Responsive Web Design

responsiveLe statistiche rivelano che sempre più persone preferiscono accedere a internet usando cellulari, smartphone e tablet piuttosto che dal PC.

Assistiamo quindi ad una sempre crescente richiesta per la progettazione di siti web in maniera responsiva, per ottenere la migliore user-experience possibile.

Diamo uno sguardo ai 10 strumenti che possono essere di aiuto sia ai designer che ai developer:

  1. Lettering
    La tipografia in un sito web è fondamentale.
    Questo plugin jQuery ci permette di controllare tutti gli aspetti come gli spazi e la crenatura.
    http://letteringjs.com/
  2. Fit text
    Questo plugin jQuery ci permette di testare in maniera molto efficace la visualizzazione del testo su vari dispositivi.
    http://fittextjs.com/
  3. Fluid 960 Grid systems o il suo successore Unsemantic
    Permettono in maniera semplice e veloce la costruzione di griglie responsive.
    Come suggerisce il nome, la griglia ha una larghezza di 960px con 12 o 16 colonne, il tutto ampiamente personalizzabile.
    http://960.gs/
    http://unsemantic.com/
  4. Imgsizer.js
    Il ruolo di questo script è di assicurarsi che le immagini vengano correttamente visualizzate sui sistemi Windows.
    http://unstoppablerobotninja.com/demos/resize/imgSizer.js
  5. Gridless
    Tramite questo Framework è possibile disegnare pagine senza griglie in maniera molto semplice.
    Il codice è stato realizzato avendo in mente la filosofia del mobile-first e del responsive design, in modo da rendere il sito compatibile con tutti i dispositivi.
    http://thatcoolguy.github.com/gridless-boilerplate/
  6. Adobe Device Central
    Per testare il risultato del nostro lavoro sull’ampia gamma di smartphone e tablet, la soluzione ideale sarebbe quella di farlo dai dispositivi stessi.
    Se non ne abbiamo la possibilità Adobe Device Central è uno dei migliori prodotti sul campo.
    Con una libreria in continua crescita, è possibile scegliere praticamente qualunque dispositivo di rilievo sul mercato, pronto per il test vituale.
    http://www.adobe.com/products/devicecentral.html
  7. PxtoEM
    E’ uno strumento per la conversione di unità di misura assolute (cioè px e pt) in unità di misura relative, per la tipografia, la spaziatura, larghezza del contenitore, ecc.
    http://pxtoem.com/
  8. Respond.js
    Quando parliamo di responsive web design non ci riferiamo solo allo sviluppo per i dispositivi mobili, ma alla tecnica che ci permette di sviluppare siti adatti a qualsiasi tipo di browser anche il più datato.
    Questo script si occupa del responsive web design in IE6, 7 e 8.
    https://github.com/scottjehl/Respond
  9. Web Developer
    Questa straordinaria estensione per Firefox e Chrome fornisce una serie di strumenti estremamente utili allo sviluppo dei siti.
    http://chrispederick.com/work/web-developer/
  10. Modernizr
    Molto simile a Respond.js, Modernizr fornisce anche la funzionalità per il caricamento condizionale.
    Consente cioè di caricare determinate risorse in base al browser che l’utente sta usando al momento, rendendo così le pagine più snelle e il loro caricamento più rapido.
    http://modernizr.com/

Per approfondire: 10+ Responsive Web Design Tools to Speed Up The Work Flow