Nella scorsa uscita Sviluppare layout con le Media Queries
abbiamo realizzato un layout, "one page site", con HTML5 e i CSS3 con un'interfaccia dinamica che si adatta al dispositivo di
navigazione utilizzato, sia esso uno smartphone, un tablet o un normale computer.
Nella seconda parte ora, applicheremo a questa struttura di base alcune tecniche per migliorarne la user experience, facendo
ricorso a Javascript e al supporto del framework jQuery.
Tutto il codice presentato va naturalmente richiamato all'interno del metodo $(document).ready,
in modo da essere eseguito non appena è disponibile l'albero DOM del documento.
Navigazione a scorrimento
A prescindere dal device, la pagina di esempio presenta un andamento di navigazione verticale
e può essere utile gestire, con uno script, lo scroll tra i link interni e le loro destinazioni,
ottenendo un piacevole effetto. Grazie a CSS3
e al selector engine di jQuery vengono selezionati tutti i collegamenti ipertestuali che contengono un'ancora,
nel nostro caso oltre alle voci del menu di navigazione anche i pulsanti "torna sù" presenti in ogni sezione di contenuti.
$('a[href^=#]:not([href=#])').click(function(event){
$('html, body').animate({
scrollTop: $($(this).attr("href")).offset().top
}, 1000);
event.preventDefault();
});Simulare la pseudoclasse :hover su dispositivi touch.
Nello sviluppo per dispositivi touch screen non sono disponibili alcuni dei tradizionali eventi del mouse,
ad esempio non è possibile personalizzare gli stati di un link scatenati dal rollover dell'utente su di esso.
Con qualche riga di codice Javascript si può simulare la pseudoclasse :hover, utilizzando una classe
apposita nel foglio di stile CSS e gli eventi onTouchStart e onTouchEnd, rispettivamente molto
simili ai corrrispondenti onMouseOver e onMouseOut delle interfacce tradizionali.
/* Javascript */
$('a').bind('touchstart', function(event){
$(this).addClass('hover');
}).bind('touchend', function(event){
$(this).removeClass('hover');
});/* CSS */
nav li a:hover,
nav li a:focus,
nav li a:active,
nav li a.hover {
/* stili personalizzati */
}Nascondere la barra del browser.
Su un piccolo schermo come quello di un iPhone, la barra degli indirizzi di Safari Mobile occupa un'altezza di circa 60px,
uno spazio verticale recuperabile altrimenti sottratto ai contenuti. Quindi, applicando il seguente codice Javascript, quando
un visitatore apre la pagina del sito è possibile nascondere la toolbar di default:
hideUrlBar = function () {
!pageYOffset && !location.hash && setTimeout(function () {
window.scrollTo(0, 1);
}, 1000);
};
$(document).ready(function() {
var deviceAgent = navigator.userAgent.toLowerCase();
var iOSdevice = deviceAgent.match(/(iphone|ipod)/);
if (iOSdevice) {
hideUrlBar();
}
});
Le immagini: slideshow e gallery.
Implementare uno slideshow di immagini in un layout dinamico come quello della nostra demo
comporta che esso sia in grado di adattarsi all'ambiente in cui viene visualizzato e in cui deve interagire.
Perfetto per questo è il plugin Flexslider, appositamente pensato per
il responsive design. Le prerogative sono veramente interessanti:
- piena compatibilità cross-browser
- supporto per gli eventi touch e tastiera
- animazioni personalizzabili
inoltre numerosi pararametri di configurazione e metodi di callback che lo rendono particolarmente flessibile ad ogni utilizzo.
Per integrare Flexslider nel nostro progetto basta includere nella head del documento il file Javascript
(solo 7kb di peso in versione minimizzata!) e gli stili CSS necessari.
Quindi è sufficiente richiamare lo script che si occupa di determinare automaticamente le dimensioni in larghezza e altezza dello slider.
$('.flexslider').flexslider({
slideshow: true, // autoplay
animation: "slide", // a scelta slide - fade
controlsContainer: '.flex-container', // wrapper opzionale
slideshowSpeed: 3000,
animationDuration: 1000,
controlNav: true, // controlli di navigazione tra le slide
directionNav: false, // contolli next - prev
touchSwipe: true, // abilita le mobile gestures
});Il markup HTML utilizzato per costruire lo slider è molto semplice, è richiesto solamente un contenitore
aggiuntivo per il corretto posizionamento dei controlli di navigazione inseriti dal plugin.
Variando questa struttura è anche possibile inserire una didascalia opzionale su ogni slide.
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li><img src="images/technics.jpg"></li>
<li><img src="images/city.jpg"></li>
<li><img src="images/sports.jpg"></li>
<li><img src="images/nature.jpg"></li>
</ul>
</div>
</div>Per le immagini della sezione Portfolio nella demo del nostro porgetto il plugin jQuery Photoswipe
si presta perfettamente all'integrazione di un lightbox di nuova concezione ottimizzato anche per i dispositivi mobili.
Chi volesse approfondirne le modalità di utilizzo è consigliata la lettura di Responsive image gallery con HTML5, CSS3 e jQuery PhotoSwipe.
In questo caso non utilizzeremo però PhotoSwipe, ma proveremo una soluzione alternativa, in verità molto simile:
si tratta di NETEYE Touch-Gallery che ha tra i suoi vantaggi il
peso contenuto e una estrema facilità d'uso.
L'installazione è velocissima, basta includere solo il plugin Javascript, non sono richiesti stili CSS
aggiuntivi. Anche NETEYE Touch-Gallery è ottimizzato per avere la migliore resa su ogni dispositivo di navigazione,
e in più è corredato di un helper che consente la creazione di simpatici activity indicators, molto
utili per i loader e da esaminare per l'impiego anche in altri eventuali contesti.
Tornando al nostro progetto, per innescare lo script sulla galleria delle immagini basta una riga di codice:
$('.gallery a').touchGallery();Come abbiamo già visto nell'articolo sulle media queries,
affinchè le thumbs si adattino automaticamente al piccolo schermo di uno smartphone e in generale al layout di visualizzazione,
è necessario utilizzare questa regola CSS:
/*non max-width per assicurare il supporto delle vecchie versioni di Internet Explorer*/
img { width: 100%; }Conclusioni
Il progetto funzionante e completo di tutti i file è disponibile per il download,
un concentrato non esaustivo ma ampio di soluzioni pratiche per avvicinarsi al responsive web design.
Già importante per lo sviluppo web in generale, il tema delle performance lo è ancora di più
nell'ambito mobile, sia riguardo all'efficienza e velocità degli script, sia riguardo la riduzione delle richieste HTTP e dei
tempi di caricamento. Anche se sempre più potenti e tecnologicamente dotati, i nuovi device mobili devono fare sempre i conti
con la velocità della rete di connessione, non sempre all'altezza.
In merito a queste problematiche consigliamo la lettura della mini
guida Ottimizzazione: Javascript e performance del sito.
