FONTE: studiomader.it

FONTE: jankoatwarpspeed.com

Il design per dispositivi mobili può rivelarsi costoso in termini di tempo e risorse, per una serie di motivi che Design Logix spiega in un interessante articolo:

• Varietà di modelli
• Varietà di browser
• Limiti di input/output
• Mancanza di dicumentazione
• Mancanza di standard

Se a questi problemi aggiungiamo che, solitamente, le connessioni mobili sono più lente di quelle fisse, ci si accorge che il design (o re-design, nel caso in cui si voglia adattare un sito esistente) per dispositivi mobili non è così semplice come potrebbe apparire.

Questa è una delle situazioni in cui l’aver progettato bene le pagine costituirà un notevole risparmio sia in termini di tempo che di fatica. Le strade da seguire, infatti sono fondamentalmente tre:

• Inviare al dispositivo solo il codice (x)HTML
• Utilizzare fogli di stile specifici, di tipo “handheld”
• Prevedere una doppia versione delle pagine

L’invio del solo codice (x)HTML è la soluzione più semplice, a patto che le pagine siano ben strutturate. Permette, infatti, di visualizzare correttamente i contenuti su un gran numero di dispositivi senza lavoro aggiuntivo. Le pagine appariranno “nude” rispetto a quanto si vede sul PC, ma i vantaggi in termini di leggibilità (viste le dimensioni dello schermo) e di velocità di caricamento (vista l’assenza di immagini decorative e fogli di stile) sono innegabili.

Se a una pagina ben strutturata aggiungiamo dei fogli di stile dedicati, di tipo “handheld”, possiamo ottenere un risultato ancora migliore. I problemi, a questo punto, possono essere due: la maggiore pesantezza, dovuta al foglio di stile stesso e alle eventuali immagini decorative, e l’incompatibilità. Il supporto ai fogli di stile, infatti, è molto variabile a seconda del dispositivo utilizzato e il loro uso può creare problemi per quegli apparecchi che hanno dovessero avere comportamenti strani.

La doppia versione delle pagine è forse la scelta più radicale: costerà un sacco di tempo e denaro, bisognerà fare a pugni con terminali e browser diversi, ma si potrà ottenere un risultato ottimizzato al livello di singolo modello di telefono o palmare. I problemi non mancano: la manutenibilità delle pagine e l’uscita di nuovi modelli rappresentano un problema per questo tipo di approccio.

Quale approccio scegliere? Come spesso accade, la risposta è “dipende”. Dipende dalle dimensioni del sito, dalla quantità di risorse che possiamo impiegare per la realizzazione, dal tipo di compatibilità che vogliamo avere con i vari dispositivi mobili. E voi, quale scegliereste?

Sempre più spesso, infatti, ci sono persone che accedono alle nostre pagine utilizzando i dispositivi più diversi: palmari, smartphone, console da gioco, eccetera. Nel caso specifico, l’articolo spiega come adattare un’applicazione web che fa uso di ExtJS in modo che possa essere utilizzata senza problemi da un utente che la visualizza con un Nintendo Wii, console che sta prendendo sempre più piede.

I problemi da affrontare sono principalmente la minore risoluzione di un televisore (per quanto HD possa essere) rispetto al monitor di un PC, la distanza dell’utente dallo schermo e i diversi dispositivi di input utilizzati. Va tenuto in considerazione, infatti, che l’utente Wii non ha a disposizione nè tastiera nè mouse, ma solo il Wiimote.

Si tratta, naturalmente, solo di una panoramica del problema, che è molto più complesso. Se però siete interessati all’argomento, potete leggere l’articolo originale, sul blog di ExtJS.

In questo articolo, vi presenterò una tecnica IMR (IMage Replacement): ve ne indicherò anche altre, ma quella che spiegherò è la mia preferita.

Prima di tutto cerchiamo di spiegare cosa significa utilizzare una tecnica di image replacement: sicuramente vi sarà capitato per lavoro, o per qualche esperimento, di voler inserire un titolo elaborato a livello grafico, magari con un pò di ombreggiatura e con dei font che sicuramente non sono presenti su tutti i computer.

Certamente un font del genere non sarà presente su tutti i computer, molto probabilmente in quelli di qualche grafico, ma quasi certamente non ci sarà sul PC di un utente medio. Cosa fareste voi a questo punto? Inserireste il tag <img />, magari aggiungendo al suo interno l’attributo alt=”LifeStyle Web”, pensando di aumentare l’accessibilità del sito web?

Se procedete in questo modo, certamente avrete scritto del codice xHTML corretto, con l’aggiunta del tag alt, ma avrete perso tutti i benefici che un titolo può dare inserito in una pagina web. Come ben sapete, da quando é stato introdotto il metalinguaggio xHTML i suoi tag hanno avuto in aggiunta un valore semantico; quindi se utilizziamo un’immagine al posto di un titolo, non stiamo utilizzando il tag in modo corretto.C’é da dire, inoltre, che ciò non aiuta il posizionamento sui motori di ricerca!

Infatti, ad oggi, non ci sono motori di ricerca in grado di leggere il testo presente nelle immagini: queste vengono semplicemente ignorate o, nel caso migliore, indicizzate soltanto come immagini.

Ma il titolo di una pagina é una parte essenziale della stessa, perchè quindi non utilizzarlo in modo che venga visto con la giusta importanza dai motori di ricerca donandogli un aspetto grafico più gradevole?

Ecco qui che viene in nostro aiuto la tecnica di image replacement!

Prendendo spunto da un articolo di Html.it, vi presento quella che preferisco: la Cover-up span.

Il markup necessario alla realizzazione di questa tecnica è:

<h2 id="titolo"><span></span>LifeStyle Web</h2>

Come potete vedere è un codice leggermente insolito, infatti presenta sia un id necessario per identificare univocamente il nostro titolo, che uno span vuoto che utilizzeremo per sovrapporre l’immagine al testo del titolo.
Per fare questo avremmo bisogno di posizionare il nostro titolo come position: relative e con le dimensioni dell’immagine che andremmo ad utilizzare, in modo da poter posizionare il nostro span in modo assoluto, con la capacità di sovrapporsi al titolo, impostando le dimensioni al 100% e avrà come background l’immagine che sostituirà il titolo.

Andiamo a vedere un pò di CSS:

h2#titolo{
position: relative;
width: 440px;
height: 77px;
font: bold 12px Arial,sans-serif;
color: #000;
}
h2#titolo span{
position: absolute;
width: 100%;
height: 100%;
background:url(titolo.png);
}

Ecco a voi il segreto di questa tecnica! Per essere precisi, ho impostato al titolo anche un font più piccolo, in modo tale che rimanga all’interno dell’immagine, e un colore uguale a quello utilizzato nell’immagine, in modo che se un utente visualizza il sito con le immagini disabilitate sarà sempre in grado di leggere qualcosa, importantissimo per chi utilizza un browser testuale!

Potete tranquillanemte andare sul sito di html.it e controllare l’articolo che vi avevo consigliato precedentemente, ma io preferisco questa tecnica perchè la ritengo la più compatibile e semplice da utilizzare; in fin dei conti questa tecnica vi porta ad utilizare delle tecniche che molto probabilmente conoscete di già come il posizionamento assoluto e quello relativo.

Le altre tecniche di image replacement che troverete si basano sulla conoscenza dello z-index e sul mascherare il titolo con lo sfondo dell’immagine, personalmente non le trovo molto comode, ma sentitevi pure liberi di comunicarmi quale preferite e soprattutto il perchè!

Proviamo a ragionare da web designer: in questo senso la prima motivazione che potrebbe spingerci a ridisegnare il nostro sito o blog è il fatto che abbiamo voglia di cambiare, perchè abbiamo visitato un sito che ci è piaciuto particolarmente, perchè abbiamo voglia di sperimentare nuove tecniche. Ma questo potrebbe appunto andare bene per un blog personale, laddove le scelte e la conduzione del sito non sono messe a dura prova da scelte di marketing, di pubblicità, da obiettivi da raggiungere. Ci addentreremo tra un momento in questi problemi. Vale, per la logica dei blog e dei siti personali in genere, la regola – molto apprezzata – del “If You Really Want, Then Go For It“, che brutalmente potremmo tradurre con un “se ti va fallo!”. Per un web designer questa operazione del tutto spassionata è fondamentale per almeno tre motivi:

1. per puro divertimento, perchè programmare e creare design è una passione, una semplice e stimolante passione, quella che ti incolla alle notizie, ai portali, ai forum, alla sedia e al monitor per tante ore;
2. perchè rappresenta una palestra insostituibile per sperimentare e provare nuove tecniche, nuovi codici;
3. perchè il tutto resta al di fuori da un possibile ambito lavorativo: il successo – diciamo così – è limitato al tuo spazio personale e spassionato, senza regole precise, senza nessuno cui rendere conto. Forse è proprio questa anche la natura del blogging, e la giustificazione ad un fenomeno costantemente in crescita.

E veniamo ad argomenti più tecnici e/o seriosi. D’ora in avanti non faremo più il distinguo tra sito (inteso come sito commerciale, come portale, come sito personale) e blog (inteso come deve intendersi – chiaro no?) ma useremo i due termini scambievolmente. Un sito si fonda su un preciso scopo (vendere del materiale, promuovere una iniziativa o una società, procacciare clienti, fornire qualsivoglia servizio) e vive grazie alle visite e al traffico generato, cioè esiste e continua ad esistere grazie agli utenti che lo visitano e che in qualche modo partecipano all’attività del sito.

Partecipare all’attività di un sito è un concetto estremamente vago: per un blog significa (oltre alla mera visita) incamerare commenti; per un sito aziendale significa procacciare clienti; per un sito di commercio on-line incrementare il proprio business. Ora, anche per quanto riguarda il web design vale il concetto de “Il Cliente Ha Sempre Ragione”.  Al di là di scelte grafiche e di programmazione precise, che coinvolgono solo pochi esperti, è fondamentale che il sito piaccia, sia navigabile e godibile, facilmente accessibile.

Tre componenti fondamentali per il successo di un sito. Qual è il loro significato?

• godibile: il sito deve piacere a primo impatto, essere stimolante dal punto di vista grafico, dal punto di vista dei colori. Mai pesante piuttosto leggero. Equilibrato e non eccessivamente ricco di grafica. Il giusto mix di estetica abbinata ai contenuti. Godibile si riferisce infatti pure ai contenuti: da sola, la grafica fa ben poco;
• navigabile: che ci crediate o no esistono su Internet dei siti raggiunti i quali un visitatore si pone la seguente domanda: “E ora? Dove clicco per andare su…? Dove mi porta questo link? Come faccio ad andare…?”. Barre di navigazione per niente esplicative, link nascosti o, peggio, mal-posti, menu disordinati, layout confusi. La psicologia del visitatore è un argomento tanto affascinante quanto complicato da comprendere. Più conosciamo dei nostri abituali visitatori, più sappiamo come meglio interpretare i loro desideri, come meglio anticipare i loro consigli o richieste, e il come lo vediamo a breve;
• accessibile: una materia in continua evoluzione, sulla quale sono stati scritti interi volumi e libri molto interessanti. Il discorso è semplice: in rete si può accedere, e di fatto si accede, mediante sempre più svariati dispositivi. Non solo PC con schermi da 21 pollici, ma anche palmari, smartphone, telefonini, laptop con schermi piccoli, per finire con gli screen-reader per utenti con problemi di vista. Accessibilità significa dunque permettere a chiunque di poter godere dei contenuti di un sito, indipendentemente da particolari software (si può notare come le scritte “questo sito è ottimizzato per…” stanno via via scomparendo, a ragione!) o da particolari dispositivi (“questo sito è ottimizzato per essere visualizzato con uno schermo da 83 pollici”, anche queste scritte per fortuna sono sempre meno visibili).

Quando un web designer esegue un’analisi qualitativa del sito che ha progettato, e si rende conto che uno dei precedenti parametri non è completmente rispettato o può essere migliorato, allora deve procedere necessariamente al redesign. Perchè, banalmente, il successo del sito può essere inficiato: un utente che non riesce a connettersi alle pagine tramite il suo solito palmare non visiterà più il sito, un utente che si vede costretto a usare un particolare software non visiterà più il sito. E – dalla natura degli uomini segue – un utente a cui non piace il nostro layout e i nostri colori visiterà il nostro sito raramente e gli frulleranno in testa pensieri brutti sul sito e sul web designer (al quale certamente non si affiderà per la costruzione del proprio sito personale). In ogni caso il discorso è lo stesso: perdiamo clienti, perdiamo visitatori.

Una volta capito che è necessaria un’operazione di redesign, si può procedere nella maniera più opportuna. Esistono infinite vie e procedimenti differenti per avviare un redesign. Si possono contattare i visitatori o gli utenti-più-cari per effettuare un sondaggio del tipo “cosa ti piacerebbe vedere nel sito?” (in ambito di contenuti) o “quale grafica migliore per il sito?” (in ambito di grafica e layout). O sondaggi più professionali per capire come strutturare meglio la navigazione (in questo senso sono ottimi i programmi per analizzare il traffico generato sul sito, dal sito e verso il sito: pagine di provenienza, pagine in cui gli utenti arrivano sul sito, pagine di maggiore visita, tempi di visita, e via via statistiche sempre più precise). Se torniamo all’esempio del blog, il principale veicolo per capire cosa gli utenti vorrebbero dal nostro sito è la sezione dei commenti: ad una lettura attenta possiamo scoprire tantissime cose e quindi provare ad adeguarci alle richieste più o meno esplicite per raggiungere un maggiore successo.

L’ultima cosa che qui facciamo notare è un errore comune che si fa quando si parla di redesign: il termine non corrisponde esattamente alla variazione di grafica, quindi immagini e colori. E non è nemmeno limitato ad un discorso di layout. Per redesign si intende qualcosa di più complesso. Riguarda per esempio la possibilità (a volte necessità) di ritoccare il codice (X)HTML del sito oltre che i fogli di stile, di prevedere una modifica di eventuali database. Un’operazione che richiede dunque un forte e largo ragionamento.

E così termina questa breve analisi. La materia del redesign è molto complessa, qui è stata trattata in maniera semplice e semplicistica. Il discorso potrebbe farsi interessante e potrebbe essere ampliato. Ad esempio, secondo voi, quali sono altri motivi che spingono al redesign? P.S.Una cosa interessante che penso di poter avviare è la discussione di alcuni redesign dei siti più famosi. Chiunque abbia idee o suggerimenti, o chiunque volesse partecipare, è ben accetto! 

APPROFONDIMENTI:

• Programmazione.it: “I motivi di un redesign“

(Pubblicato anche su KikoWeb.org)

Per questi motivi, è bene prendere in considerazione con attenzione questi problemi nel momento in cui andremo a definire i fogli di stile: l’utilizzo delle unità di misura corrette, permetterà di non trovarsi in guai inaspettati alla fine dei lavori, dovendo tornare indietro e fare modifiche che si riveleranno difficoltose e, di conseguenza, costose.

In un mondo ideale, in cui tutti i browser si comportano secondo gli standard, tutti useremmo i pixel come unità di misura per i fogli di stile da applicare per la visualizzazione su schermo. Purtroppo, però, il mondo è tutt’altro che ideale e facendo in questo modo andremo a scontrarci con un problema di IE, nella sua versione per Windows. Utilizzando i pixel come unità di misura, infatti, non è possibile ridimensionare il testo da parte dell’utente: questo potrebbe essere un problema, visto che non sappiamo a priori chi leggerà le nostre pagine, ed quindi necessario trovare una soluzione.

La soluzione arriva dall’unità di misura em, derivata dalla tipografia e che rappresenta una delle unità di misura di tipo relativo (i pixel, al contrario, sono di tipo assoluto). Le impostazioni predefinite dei browser, prevedono che la dimensione del testo abbia una base di 16 pixel, per cui possiamo considerare questo valore come punto di partenza per i nostri fogli di stile, utilizzando dimensioni relative per il resto dei contenuti, in base alle nostre esigenze.

Come prima cosa, per semplificare i calcoli, andremo a definire la dimensione del testo nell’elemento &ls;body> come 0,625% del valore iniziale, in modo da portarlo a 10 pixel. A questo punto, l’unità em si comporta concettualmente come le percentuali. Potremo quindi definire la dimensione del testo nell’elemento <h1> come 2.4em, in modo che diventi di 24 pixel e così via. Gli utenti che avranno bisogno di aumentare o diminuire le dimensioni del testo, potranno utilizzare le funzioni fornite dal web-browser e ottenere un ridimensionamento armonico dei contenuti.

Se l’unità em si comporta come le percentuali, perchè non utilizzare direttamente le percentuali? La risposta è semplice. il valore 1em equivale sempre alla dimensione, in quel particolare elemento, del font. E’ dunque possibile utilizzare la stessa unità di misura per definire bordi, margini e dimensioni dei blocchi contenitore, andando in questo modo a creare un layout completamente ridimensionabile dall’utente in base alle proprie esigenze. Il ridimensionamento, essendo sempre proporzionato alle dimensioni del testo, sarà dunque armonico e non rovinerà il nostro lavoro di impaginazione.

APPROFONDIMENTI:

• How to size text using ems
• Effective Style with em
• Font Sizing
• Em Calculator

CREDITS:

Le foto utilizzate nell’articolo appartengono agli utenti Flickr und_dann e mociman e sono state pubblicate sotto licenza Creative Commons.