Campagna aggiornamento browser – parte terza

Facciamo il punto Eccoci giunti alla fine della nostra piccola guida su come creare una campagna di aggiornamento browser. Ripercorrendo […]
Campagna aggiornamento browser – parte terza

Facciamo il punto

Eccoci giunti alla fine della nostra piccola guida su come creare una campagna di aggiornamento browser. Ripercorrendo all’indietro qualche passo, nel precedente articolo abbiamo creato un semplice div contenitore con un paragrafo “messaggio da visualizzare” che tramite jquery veniva mostrato o nascosto in base alla versione del browser.

<div id="old">
    <a id="close" href="#">Chiudi</a>
    Messaggio da Visualizzare
</div>

Alcuni esempi grafici

Ogni situazione, ogni pagina web, ogni sito, ha determinate esigenze strutturali, non è possibile contemplarle tutte ma evidenziare quelli che possono essere i casi che si verificano piu spesso e che possiamo prendere ad esempio nella trattazione di questo articolo. Per facilitare l’apprendimento abbiamo pensato di realizzare in photoshop diverse campagne di sensibilizzazione ed applicarle al template di laboratoriocss, con tanto di screenshot e codice html e css. Sperando di aver fatto cosa gradita, ecco alcuni esempi di applicazioni concrete che possono essere realizzate per un template nello standard come il nostro.





Vediamoli in pratica

I Screenshot [Box in posizione assoluta con overlay di sfondo]
La prima campagna, se vogliamo la piu complessa e invadente perche occupa l’intera schermata del browser e obbliga l’utente a chiuderla per proseguire nella navigazione, è composta da un contenitore in posizione assoluta che occupa il centro della pagina e da uno sfondo che lo mette ulteriormente in risalto. Se hai come primo obbiettivo quello di mettere in risalto la tua campagna affichè tutti i tuoi utenti siano obbligati a leggerla, questa tipologia è quella che fa per te. Scomponendola in elementi, è composta dal div#overlay, dal pulsantino chiudi, dalle iconcine dei browser, dall paragrafo che contiene il testo e div#old.

Arricchiamo l’html di base del precedente tutorial con quanto segue:


<div id="old">
    <a title="Chiudi" href="#">
        <img src="img/close.png" alt="" />
    </a>

    <strong>ATTENZIONE!!!</strong> Stai usando una versione obsoleta di Internet Explorer. Aggiorna internet explorer ad una versione piu moderna oppure scegli un browser dalla lista sottostante per avere una migliore resa grafica, affidabilitá e sicurezza durante la navigazione.

    <a href="http://www.microsoft.com/italy/windows/internet-explorer/worldwide-sites.aspx" target="_blank"><img src="img/ie.jpg" alt="" /></a>
    <a href="http://go.microsoft.com/fwlink/?LinkID=166932" target="_blank"><img src="img/mozilla.png" alt="" /></a>
    <a href="http://www.google.com/chrome/intl/it/browserchoice/eula1.html" target="_blank"><img src="img/chrome.png" alt="" /></a>
    <a href="http://www.apple.com/it/safari/download/windows/thankyou.html?CID=APP-IE-EUIT-Safari-D1&amp;cp=APP-IE-Safari-IT-D1" target="_blank"><img src="img/safari.jpg" alt="" /></a>
    <a href="http://go.microsoft.com/fwlink/?LinkID=166934" target="_blank"><img src="img/opera.png" alt="" /></a>
</div>

e il relativo codice css è il seguente

/* Semplice reset di alcune proprietà */
*{
    margin:0; 
    padding:0
}

a img{
    border: none
}

html,body{
    height:100%;
}

#overlay {
	background-color:#000;
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:100;
}

#old {
	background-color:#ededed;
	border:6px solid #a0a0a0;
	display:block;
	height:120px;
	left:50%;
	margin:-80px 0 0 -392px;
	padding:20px;
	position:absolute;
	top:50%;
	width:745px;
	z-index:102;
}

#old p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#404040;
	margin-bottom:25px;
	padding-bottom:5px;
	line-height:18px;
	border-bottom:3px double #ccc;
}

a#close{
	display:block;
	width:34px;
	height:34px;
	float:right;
}

Per chiarezza conlusiva, allego qui di seguito uno zip contente un riepilogo generale dei file necessari per implementare una campagna di aggiornamento browser con overlay. I successivi casi, verranno soltanto analizzati da un punto di vista dell’accessibilità in quanto basta modificare banalmente i contenuti e il posizionamento del contenitore per ottenere le altre situazioni delle 4 preview. Scarica qui l’esempio completo (lo script è impostato per attivarsi con internet explorer inferiore alla 7)

II Screenshot [Box nel top del sito]
Il secondo screenshot evidenzia un contenitore, formattato diversamente e posizionato prima di qualsiasi altro contenuto. Il contenitore, di colore rosa, risulta molto piccolo e privo di immagini. E’ presente solo un testo che spiega i motivi di questa scelta e il solito pulsantino chiudi. La posizione ne evidenzia l’importanza, ma i contenuti ristretti lo rendono poco invasivo.

III Screenshot [Box nel corpo del sito]
Il terzo screenshot evidenzia il medesimo box del primo esempio, posizionato, in questo caso, prima dell’elenco dei post. Questa situazione non penalizza la navigazione ma, sposta di molto i contenuti fondamentali della pagina, costringendo l’utente ad un fastidioso scroll verso il basso che a lungo andare puo dare noia. Può essere una valida alternativa per chi non ha bisogno di una campagna invasiva al 100% ma ha solo bisogno di mettere in forte evidenza un messaggio.

IV Screenshot [Box nella sidebar del sito]
E’ sicuramente l’alternativa meno invasiva tra tutte, il contenitore è posizionato nella sidebar, senza alcuna sovrapposizione che possa impedire la navigazione o che possa spostare contenuti importanti verso il basso. Scegliete questa se vi interessa la campagna ma non è la vostra priorità. Alcuni utenti la noteranno, molti altri no, fatevene una ragione.

Conclusioni

Sta a voi ora, dopo tutto ciò che è stato detto, se utilizzare una campagna di sensibilizzazione di più impatto visivo ma che può ostacolare e a volte impedire la navigazione, oppure limitarsi ad inserire un messaggio meno invasivo e ingombrante a lato nella sidebar o in parti della struttura che non impediscano la corretta navigazione.

Ma se invece non condividete neanche un pò quanto detto fin’ora, se siete dei fan sfegatati di internet explorer 6, se dareste la vita per poterlo riavere in tutte le sue versioni, potete cliccare qui e aderire alla “fantastica” campagna a favore di IE6 e accodarvi ai 1836 utenti che hanno gia firmato.

“IE6 needs YOUR help … Save IE6” … 🙂

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github