Search form con animazione CSS3 per HTML Mobile App

Oltre che realizzare interfacce semplici ed intuitive, per creare un’ottima user-experience bisogna rendere la nostra applicazione anche comoda per l’utente. Innumerevoli sono le tecniche per raggiungere questo obiettivo, e nell’ambito di HTML Mobile App, una fra queste è sicuramente quella di ottimizzare lo spazio in cui vengono mostrati gli elementi di una lista.

E’ quello che fa per esempio l’applicazione di Gmail per iPhone, dove se viene selezionato il campo di testo per la ricerca nella casella mail, questo si sposta verticalmente posizionandosi al posto della navbar, che allo stesso tempo modifica anch’essa la sua posizione verticalmente per uscire dallo schermo.

In questo modo è possibile ottimizzare lo spazio per la visualizzazione dei risultati, espandendolo di circa 45 pixel (l’altezza della navbar), che in un dispositivo mobile possono fare la differenza.

Riproduciamo l’effetto con un’animazione CSS3 performante

A tal proposito in questo articolo voglio segnalarti un tutorial che ho scritto per gli amici di LaboratorioCSS.it, atto a riprodurre lo stesso effetto in HTML5 e CSS3, il tutto utilizzando animazioni fluide e performanti (ti consiglio di leggere questo articolo a proposito delle prestazioni).