Blog di Eugi GufoEugi Gufo

Sul 99% dei siti web personali e aziendali vengono pubblicati i contatti dei proprietari o amministratori. L’esperienza pluridecennale nella navigazione su internet ha però permesso al sottoscritto di constatare un triste fatto: una notevole parte dei web-masters non sa pubblicare i contatti in modo corretto.
Certo, comprendo che si tratta di un aspetto tecnologicamente banalissimo. Ma, data la ricorrenza del problema, bisogna parlarne.
Nel presente paragrafo facciamo un tentativo di formulare alcuni principi fondamentali in materia. Essi, logicamente, si dividono in due tipologie: tipografici e funzionali. Per rendere l’esposizione più organizzata, sarebbe più opportuno trattare quei principi per ogni tipo di contatto.

1. I numeri di telefono
I numeri di telefono pubblicati sul sito devono essere a) leggibili e b) cliccabili. La leggibilità dei numeri è tuttora importante perché non possiamo mai immaginare la situazione in cui si trova il nostro visitatore. Potrebbe avere la necessità di leggere il numero per poi dettarlo alla nonna che chiama dall’altra parte del mondo. Oppure leggerlo dallo schermo del computer per inserirlo manualmente nella memoria del telefono. In tal senso la tradizione tipicamente italiana di scrivere il numero di telefono in una sequenza di cifre continua è da considerare sbagliata: essa complica la vita dell’utente, costringendolo a uno sforzo inutile.
Provate a essere obiettivi e dire qual è il formato meglio leggibile:
+393337198198
+39 333 7 198 198
+39.333.7.198.198
(+39) 3337198198
La prima e la quarta versione corrispondono alla tradizione tipografica italiana, mentre la più leggibile è – secondo me – la seconda. La persona che legge non deve cercare disperatamente il punto dove si è fermata a leggere, temendo di avere saltato o ripetuto qualche cifra.
La cliccabilità dei numeri di telefono è altrettanto importante. Tantissime persone, almeno la metà, visiteranno il vostro sito da un dispositivo mobile: devono avere la possibilità di chiamare il numero indicato con meno sforzi fisici e mentali possibile.
Se siamo proprio pigri e ci fidiamo della qualità dei sistemi operativi installati sui telefoni, potremmo anche pubblicare i numeri come dei semplici testi:

+393337198198<br />
+39 333 7 198 198<br />
+39 333.7.198.198<br />
(+39) 3337198198

Ma in tal caso, per esempio, l’iPhone vedrà il terzo modo di scrive il numero come un testo semplice e non come numero cliccabile. Le altre tre opzioni, invece, diventano automaticamente dei link: in appena due «tap» si chiama il numero scelto.

Ma oltre all’iOS esistono tante versioni di Android e altri sistemi operativi. Non si può affidarsi al caso, bisogna rendere il numero cliccabile indipendentemente dal modo in cui viene visualizzato al visitatore. Quindi ci serviamo delle possibilità tecniche offerteci dal HTML5.
La sintassi è estremamente semplice:

<a href="tel:+393337198198">+39 333 7 198 198</a>

Esatto, è come un link con il protocollo «mailto:» che conoscete da anni. Non dimenticatevi di indicare anche il prefisso nazionale (sia nel tag del link che nel numero visibile sulla pagina) perché il visitatore può collegarsi al sito da qualsiasi punto del globo. Il telefono dopo il click sul numero chiederà solo di confermare l’intenzione di contattare il numero indicato.

Questo tipo di link funzionerà anche sui computer con lo Skype installato. Anche per questo è importante rendere intenzionalmente – con il codice – il numero sempre cliccabile.
Inoltre, per offrire il quadro completo della situazione, dovrei aggiungere che il link del numero di telefono può essere realizzato anche in altri modi. Ma non consiglio di utilizzarli in quanto essi sono interpretati correttamente solo da alcuni browser.

<a href="callto:393337198198">funziona su iPhone e Nokia</a>
<a href="wtai://wp/mc;393337198198">funziona su Android</a>
<a href="wtai://wp/mc;+393337198198">formato internazionale per Android</a>

È decisamente meglio utilizzare il protocollo universale tel: con il quale abbiamo iniziato: funzionerà da tutti i dispositivi. Ma se qualcuno avesse la strana e inspiegabile necessità di fare una distinzione tra i vari dispositivi mobili, si potrebbe utilizzare questo script in JavaScript:

<div id="header-phone"></div> 
 
<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  document.getElementById("header-phone").innerHTML = '<span><a href="tel:+ 380985554433 ">(098) 555-44-33</a></span>';
 } else {
  document.getElementById("header-phone").innerHTML = '<span>(098) 555-44-33</span> ';
}
</script>

La rappresentazione grafica dei numeri di telefono è invece una questione abbastanza banale. In CSS potremmo utilizzare una classe:

a.phone-style {
  color: #3e3a37;
  text-decoration: none;
}

Oppure applicare lo stesso stile selezionando i numeri di telefono cliccabili in questo modo:

a[href^="tel:"] {
  color: #3e3a37;
  text-decoration: none;
}

Con l’aiuto della pseudo classe before e dei simboli in unicode possiamo anche aggiungere l’icona di un apparecchio telefonico prima del numero:

a[href^="tel:"]:before {
  content: "\260e";
  margin-right: 0.5em;
}

Il risultato sarà +39 333 7 198 198.
Ora che sapete pubblicare i numeri di telefono in modo corretto, possiamo passare ai tipi di contatto meno sfortunati ma altrettanto importanti.
(La pubblicazione dei numeri di telefono sui siti che utilizzano il XSLT sarà trattata in un paragrafo a parte.)

2. La posta elettronica
Sorprendo tutti e ribadisco il concetto: anche l’indirizzo di posta elettronica pubblicato sul sito deve essere leggibile e cliccabile.
La leggibilità è data dal formato tradizionale dell’indirizzo: nome@sito.it
È giusto scrivere eugi@eugigufo.net
È sbagliato scrivere eugi [at] eugigufo.net, eugi (a) eugigufo.net e in tutte le altre forme fantasiose.
Non dovete temere di pubblicare l’indirizzo perché la protezione dallo spam è una delle mansioni per le quali il vostro sistemista prende lo stipendio. Se, invece, siete un privato, dovreste comunque essere in grado di impostare i doverosi filtri nella casella postale. In ogni caso, non è il compito del visitatore desideroso di contattarvi correggere manualmente il vostro indirizzo. Quest’ultimo deve essere pronto all’uso da subito.
La cliccabilità di un indirizzo e-mail può essere realizzata in almeno due modi ugualmente corretti. Il primo, tradizionale, prevede l’utilizzo del protocollo mailto: nel link. Lo conoscono tutti:

<a href="mailto:eugi@eugigufo.net.net">eugi@eugigufo.net.net</a>

In tal modo viene richiamato il programma client di posta elettronica preferito dall’utente. Non tutti i programmatori si ricordano, però, che è possibile far precompilare anche il soggetto della mail. Eppure è sufficiente aggiungere ?subject=soggetto dopo l’indirizzo:

<a href="mailto:eugi@eugigufo.net.net?subject=Paragrafo 19 di Inerario">eugi@eugigufo.net.net</a>

Il secondo modo valido di linkare l’indirizzo di posta elettronica consiste nel reindirizzare il cliente a una form dedicata (come lo faccio io su questo sito). Ricordiamoci, infatti, che molte persone preferiscono utilizzare la webmail e si infastidiscono per l’apertura dei programmi indesiderati. Inoltre, qualcuno potrebbe decidere di scrivervi da un dispositivo non proprio.

<a href="http://www.eugigufo.net/it/email/">eugi@eugigufo.net.net</a>

La buona regola comune ai due modi consiste nel rendere visibile, almeno da qualche parte, l’indirizzo al quale si propone di scrivere. Il visitatore deve avere la possibilità di salvare il contatto per utilizzarlo nel momento in cui gli è più comodo farlo. Vale anche per il numero di telefono.

3. Il contatto Skype
Non ho mai visto un contatto Skype scritto in una maniera illeggibile, quindi mi limito a sottolineare che è molto facile renderlo cliccabile:

<a href="skype:eugi.gufo">eugi.gufo</a>

Fatelo per la comodità dei visitatori.
Inoltre, la funzionalità del link può essere perfezionata con il parametro dell’azione desiderata. La sintassi diventa così:

<a href="skype:eugi.gufo?azione”>eugi.gufo</a>

Mentre i nomi delle azioni che è possibile aggiungere sono:
userinfo – la visualizzazione del profilo
add – l’aggiunta ai contatti
call – chiamata
chat – l’invio di un messaggio in chat
voicemail – l’invio di un messaggio vocale.
Bene, questi sono i tre tipi di contatti che tutti pubblicano sui propri siti. In tantissimi lo fanno sbagliando qualcosa. Non so quanto sia opportuno trattare i vari, numerosissimi, messenger: forse un giorno lo farò.
In ogni caso, spero di riuscire nella missione difficile di migliorare la comunicabilità nel mondo.

La maggioranza delle persone, al giorno d’oggi, utilizza una grande varietà di apparecchi per navigare sull’internet: non solo i computer, ma pure gli smartphone e i tablet. Per esempio, secondo le statistiche del mio sito circa il 40% delle visite giornaliere viene effettuato con gli smartphone. Questo significa che ai proprietari dei siti conviene rendere questi ultimi adattabili a tutte le tipologie degli schermi rendendo quindi sempre comoda la consultazione dei contenuti.

IMHO, entro pochissimi anni avremo due internet paralleli: quello basato sulle app per gli smartphone (i servizi offerti via form e i contenuti sintetici diffusi via messenger) e quello basato sui vecchi siti responsive per i computer (e forse per i tablet, se questi riescono a sopravvivere). A fino a quel momento siamo costretti a creare i siti responsive per ogni genere di apparecchio. Perché dopo la prima fase dell’entusiasmo per l’internet tascabile la gente sta ormai capendo che il mezzo più comodo per il consumo dei contenuti è comunque il computer con lo schermo sufficientemente grande e comodo.

Realizzare un sito web responsive è in realtà molto più facile di quanto possa sembrare, ma oggi vorrei concentrarmi solo su un preciso aspetto di tale missione: quali dimensioni degli schermi vanno previste. È un aspetto importante perché per essere visualizzato in modo ottimale su tutte le tipologie degli schermi un sito responsive deve:
1) ridurre progressivamente la quantità delle colonne e annullare il float con il stringersi della larghezza della pagina;
2) utilizzare il max-width al posto del width per l’assegnazione della larghezza al contenitore;
3) diminuire i valori di margin e di padding sui dispositivi mobili;
4) ottimizzare le dimensioni dei caratteri sugli schermi piccoli (in modo che l’utente non debba ingrandire la pagina per riuscire a leggere i testi);
5) trasformare i menu orizzontali in menu estendibili;
6) nascondere gli elementi/contenuti secondari sugli schermi piccoli (display: none);
7) diminuire le dimensioni delle immagini di sfondo.
Se mi sono dimenticato qualche punto importante della lista, segnalatemelo pure!
In pratica, nel corso della realizzazione del nostro sito web responsive noi dobbiamo prevedere quelle categorie degli schermi per le quali la composizione della pagina cambia radicalmente. Io utilizzo da tempo questa sequenza di media query (in CSS3):

/* Smartphones (orientamento verticale e orizzontale) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {
/* i vostri stili */
}

/* Smartphones (orientamento orizzontale) ----------- */
@media only screen and (min-width: 321px) {
/* i vostri stili */
}

/* Smartphones (orientamento verticale) ----------- */
@media only screen and (max-width: 320px) {
/* i vostri stili */
}

/* iPads (orientamento verticale e orizzontale) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* i vostri stili */
}

/* iPads (orientamento orizzontale) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* i vostri stili */
}

/* iPads (orientamento verticale) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
/* i vostri stili */
}

/* iPad 3**********/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* i vostri stili */
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* i vostri stili */
}

/* desktopo e portatili ----------- */
@media only screen  and (min-width: 1224px) {
/* i vostri stili */
}

/* schermi grandi ----------- */
@media only screen  and (min-width: 1824px) {
/* i vostri stili */
}

/* iPhone 4 ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* i vostri stili */
}
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* i vostri stili */
}

/* iPhone 5 ----------- */
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* i vostri stili */
}
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* i vostri stili */
}

/* iPhone 6 ----------- */
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* i vostri stili */
}
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* i vostri stili */
}

/* iPhone 6+ ----------- */
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* i vostri stili */
}
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* i vostri stili */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* i vostri stili */
}
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* i vostri stili */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* i vostri stili */
}
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* i vostri stili */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* i vostri stili */
}
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* i vostri stili */
}

Per quanto riguarda il codice appena riportato, è importante sottolineare l’uso intenzionale dell’operatore «only». Esso ci permette di applicare gli stili solo ai browser moderni. I browser vecchi (tra i quali saluto in modo particolare l’IE6) che sanno interpretare solamente il CSS2, devono invece essere trattati con un foglio di stili separato (per non appesantire e «rallentare» quello principale).
Parlerò dei vecchi browser in uno degli articoli successivi (perché purtroppo non possono essere del tutto ignorati), mentre l’obbiettivo del presente paragrafo era quello di condividere con voi uno «schema» in CSS utile, dettagliato e funzionante. Ho fatto risparmiare del tempo alle persone ancora più pigre di me…
Prego!

Ho una ottima notizia per gli sviluppatori front-end. Fare il sidebar di altezza pari a quella del content con il solo CSS è possibile! Di conseguenza, è possibile anche fare il sidebar di altezza 100% con l’impiego del solo CSS e senza impostare l’altezza fissa del div genitore.
Ora vi spiego come si fa. I codici del risultato finale sono riportati verso la fine dell’articolo, ma prima di vederli leggete tutta la spiegazione.
Supponiamo di avere un layout a due colonne: la prima è larga il 25% del div genitore, mentre la seconda è larga il 50% del div genitore.

Nella vita reale possono capitare delle situazioni in cui non abbiamo la possibilità di prevedere in quale delle due colonne ci saranno più contenuti, dunque non possiamo prevedere quale delle due colonne tenderà a essere più lunga (ovviamente in verticale). Solitamente i contenuti di testo sono più corposi, ma su molte pagine dei siti aziendali ho visto i menu laterali molto più lunghi delle zone occupate dai testi.
Il metodo più ovvio e meglio funzionante di creare un layout a due colonne è quello di utilizzare due div con le caratteristiche float. Questo, però, non risolve il problema della altezza:

I blocchi div con float possono però influire sulla altezza del loro container. Di conseguenza, se noi includiamo le nostre due colonne in un container formattando correttamente quest’ultimo (con l’elemento clear o attraverso l’overflow: hidden), esso assumerà l’altezza della colonna più alta:

Se, invece, facciamo due container (uno dentro l’altro), entrambi avranno l’altezza della colonna più riempita.

Ricordiamo le larghezze delle due colonne: 25% per la prima e 50% per la seconda. Quindi la seconda colonna ha la larghezza doppia della prima. Di conseguenza, se assegniamo al container esterno la larghezza 25%, mentre a quello interno la larghezza 200% (cioè il doppio del primo, il 50% della pagina) spostandolo verso destra per una distanza corrispondente alla larghezza del primo container, otteniamo un importante risultato intermedio.

Ora possiamo dedicarci alle colonne. Abbiamo appena creato un container nuovo utile per il calcolo delle dimensioni delle colonne. Dato che la colonna a sinistra deve essere larga il 25% della larghezza della pagina, mentre la larghezza del container interno è già pari al 50% della larghezza della pagina, la nuova larghezza della colonna sarà pari a 50%×0,5=25%. La colonna non deve influire sul flow ma allo stesso tempo deve rimanerne dentro. Quindi impostiamo per la colonna il margin-right: −100% e spostiamo l’elemento verso sinistra per la metà della larghezza del container (50%). Il risultato è proprio quello che ci serve:

Per essere più chiaro ora vi faccio vedere i codici HTML e CSS del risultato finale.
HTML:

<div class="col-wrap1">
<div class="col-wrap2">
<div class="col1">left column</div>
<div class="col2">center column</div>
<div class="clear"></div>
</div>
</div>

CSS:

.col-wrap1 {
width:25%;
background:blue;
}
 
.col-wrap2 {
width:200%;
margin-right:-100%; /* vietiamo a IE6 di allargare il container */
position:relative;
left: 100%;
background:red;
}
 
.col1 {
float:left;
width:50%;
margin-right:-100%;
position:relative;
left:-50%;
}
 
.clear {
clear:both;
font-size:0;
overflow:hidden; /* il preservativo triplo per IE */
}

Sotto questo link si trova un esempio funzionante.
In sostanza, sono stati creati due container che fanno da «controfigure» alle colonne e possono essere allungati entrambi da solamente una delle due colonne.
In uno dei prossimi articoli vi spiego come applicare lo stesso metodo a un layout con le colonne di larghezza fissa.
Il vostro front-end developer aveva detto che è impossibile fare una cosa del genere senza l’uso del JavaScript? Beh, io sono sempre pronto a prendere il suo posto!

Penso che tenda al cento percento la quantità dei front-end developer che hanno dovuto affrontare almeno una volta nella vita il problema del footer «disubbidiente» che non vuole stare in fondo alla pagina. Infatti, il problema si presenta ogni qualvolta che si costruisce una pagina con pochi contenuti o addirittura vuota. Quindi nel presente paragrafo vi racconto della mia soluzione preferita del problema (i codici del risultato finale sono in fondo all’articolo).
In totale sono cinque passaggi:
1. Separiamo il footer dal resto del codice e lo mettiamo al di fuori del contenitore generale wrapper.
2. Nel file dei stili CSS impostiamo l’altezza (height) del 100% per il html e per il body. In questo modo il html e il body verranno estesi per l’intera altezza dello schermo.
3. Assegnamo al contenitore generale wrapper i seguenti parametri:
– min-height: 100%; – l’altezza minima del wrapper (è necessario farlo per i browser moderni, anche se i browser IE fino alla versione 7 non sanno interpretare il min-height);
– height: auto !important; – tale impostazione della altezza serve per le situazioni in cui i contenuti della pagina necessitano più di una schermata. In questo modo il div del content si estenderà verso il basso finché la quantità dei contenuti lo richiederà;
– height: 100%; – questa impostazione serve ai vecchi browser IE.
4. Per il div content impostiamo il padding inferiore pari a 100 px – esso serve per «ospitare» il footer. Tra poco capirete il senso di tale operazione. Ora invece devo precisare che il suddetto valore del padding deve essere pari alla altezza (height) del footer, quindi al posto del 100 potete mettere il vostro valore.
5. Ora abbiamo l’altezza della pagina pari a 100% + 100 px. I 100 pixel di troppo vengono eliminati nel seguente modo: nel file dei stili CSS per il footer impostiamo il margine superiore negativo di stessa quantità di pixel della altezza del footer (e del valore del padding impostato al punto 4). Quindi per il footer scriviamo height: 100 px; margin-top: −100 px; Inoltre, ci serve la caratteristica del footer position: relative; Con l’aiuto del margine negativo il footer si sposta completamente sull’area inferiore del wrapper (che occupa il 100% dello schermo) lasciata libera dei contenuti tramite l’impostazione del padding di cui al punto 4. Qualora i contenuti della pagina fossero superiori alla altezza dello schermo, il footer si vedrà solamente al completo scrolling della pagina fino in fondo.
Con l’utilizzo di questo metodo il footer sarà sempre in fondo alla pagina: anche qualora quest’ultima fosse completamente vuota.
Una rappresentazione schematica di quello che abbiamo fatto:

Ecco il codice CSS:

html {
height: 100%;
}
header, nav, section, article, aside, footer {
display: block;
}
body {
height: 100%;
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
#header {
height: 150px;
}
#content {
padding: 0 0 100px;
height:400px;
}
#footer {
width: 1000px;
margin: -100px auto 0;
height: 100px;
position: relative;
}

E la parte finale del codice HTML del file index.php:

    </div>
    <!-- end content -->
  </div>
  <!-- end main div -->
</div>
<!-- end wrapper div -->

L’unica modifica da fare al file footer.php è quella di togliere il tag </div> che chiude il div wrapper.
Immagino che ad alcuni miei lettori potrebbe non piacere l’idea di avere il footer sempre e in ogni caso fuori dalla prima schermata del browser. Per correggere questo «difetto» potremmo fare in questo modo: portare sempre il footer fuori dal div wrapper e poi assegnare a quest’ultimo l’altezza con il metodo calc(100% – 100px). Questo metodo è però pericoloso: alcuni browser sanno interpretare il calc() solo nelle loro versioni più recenti.
Spero che questo paragrafo vi sia stato utile.

Ole-e-e-e-e-e-e!!!!!
Ho appena scoperto che calc(XXX% – YYYpx); ormai funziona su tutti i browser.
Di conseguenza, dedico un sincero vaffanculo a SASS e simili. Lo sapevo che stando tranquillo sulla riva avrei visto passare certi cadaveri…
Seguendo il link http://caniuse.com/#search=calc anche voi potete rendervi conto della fantastica notizia.