Come sicuramente avrai capito leggendo i miei post, ho un vero e proprio debole per le mobile web app e per l’impiego dei CSS3 al fine di rendere più piacevole la user-experience delle mie interfacce.

Con il miglioramento costante delle caratteristiche hardware dei dispositivi mobili è possibile avvicinarsi sempre di più alle prestazioni di applicazioni native, realizzando effetti come animazioni e transizioni puramente in CSS3.

Inserire nelle web app elementi come touch sliders, slide menu, pull-to-refresh scroll, e molti altri componenti che siamo ormai abituati a vedere nelle applicazioni native, diventa quindi meno complicato.

L’impiego nei siti web

Effetti del genere ovviamente non sono limitati soltanto a smartphone o tablet, ma si possono implementare anche nei “classici” dispositivi desktop. Numerosi web designer e developer li inseriscono per esempio nei propri progetti per renderli più piacevoli e per stupire in modo originale il visitatore.

In questo articolo ti voglio parlare proprio di come realizzare un CSS3 slide panel menu, effetto che ho trovato ultimamente in molti siti web, e che può essere utilizzato in tutti i dispositivi.

Quello che realizzeremo in questo tutorial è quindi un menu CSS3 slide panel, che appare o scompare al click su uno specifico pulsante.

Squarespace usa la tecnica dello slide menu nel proprio sito

Uno degli aspetti fondamentali che caratterizzerà il risultato finale è l’introduzione, se pur a livello base, di un concetto molto importante nell’ambito della compatibilità: il miglioramento progressivo tramite CSS3 (o CSS3 Progressive Enhancement).

Il Progressive enhancement è una strategia impiegata nel web design che utilizza le tecnologie web a più livelli, per permettere a chiunque di accedere a contenuti e funzionalità di base del sito (o della web app) indipendentemente dal browser o dalla connessione utilizzata, fornendo anche una versione migliorata della pagina per coloro che dispongono di un browser più avanzato o maggiore larghezza di banda.

Fonte: Wikipedia

Per quanto riguarda il nostro esperimento, la tecnica di base consisterà nel basare l’animazione dello sliding panel sulla proprietà left per i browser che non supportano le css transform, mentre sulla proprietà translate3d per quelli che la supportano.

Così facendo potremo guadagnare in termini di fluidità e le prestazioni (per capire quali sono gli attributi sui quali agire per migliorare fluidità e prestazioni ti consiglio di leggere: Performance CSS3: consigli per ottimizzare le animazioni).

Ma veniamo al punto.

Il markup HTML

<!-- Menu -->
<nav class="menu">

	<!-- Menu Wrapper -->
	<div class="menu-wrap">
		<span id="menu-close">x</span>
		<a href="index.html">Home</a>
		<a href="services.html">Services</a>
		<a href="portfolio.html">Portfolio</a>
		<a href="about.html">About</a>
		<a href="#contact">Contact</a>
	</div>

	<!-- Menu button -->
	<button id="toggle" title="Menu Toggle">Toggle</button>
</nav>

<!-- contenuto pagina -->

<div class="main-wrapper">			
	<!-- contenuto della pagina -->	
</div>

Dal codice puoi vedere che il menu (class = “menu-wrap”) ed il pulsante di toggle (id=”toggle”) sono stati inseriti all’interno di un wrapper principale con class=”menu”, che sarà poi quello su cui effettueremo l’animazione, assieme al body stesso della pagina

Gli stili CSS

Vediamo gli stili per il wrapper principale del menu:

/* 
	stili del menu
	impostiamo la position a fixed con un right di -200px (il menu "a riposo" 
	esce dalla pagina a destra per un numero di pixel pari alla sua larghezza)
*/
.menu {
    position: fixed;
    right: -200px;
    width: 260px;
    height: 100%;
    top: 0;
    z-index: 10;
    text-align: left
}
/*
	serve per far muovere anche il body nel caso in cui il browser non supporta le CSS transform
*/
body {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

Ora impostiamo gli stili del menu-wrapper che è contenuto all’interno del panel menu principale, quelli del pulsante di chiusura (id=”menu-close”), e quelli del pulsante “toggle”:

/* 
	impostiamo gli stili dell'elemento wrapper che contiene il menu 
*/
.menu-wrap {
    position: absolute;
    top: 0;
    /* impostiamo un left di 60px per dare 'spazio' al pulsante '#toggle' */
    left: 60px;
    background: #1a1a1a;
    width: 200px;
    height: 100%;
    padding-top: 20px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
	impostiamo gli stili dei link del menu	
*/
.menu a {
    margin-left: 20px;
    color: gray;
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.menu a:hover {
    color: #fff
}
.menu a:active {
    color: #fff
}
.menu a>i {
    float: left;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    width: 25px;
    font-size: 14px;
    line-height: 40px;
    margin: 25px 2px
}

/*
	impostiamo gli stili e posizioniamo il pulsante di chiusura che si trova all'interno del paneò
*/

#menu-close {
    cursor: pointer;
    display: block;
    position: absolute;
    font-size: 18px;
    font-weight: bold;
    color: gray;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 18px;
    right: 5px;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}
#menu-close:hover {
    color: #fff;
}

/*
     posizioniamo il pulsante toggle
*/
#toggle{
    position: absolute;	
    top: 25px;
    right: 265px;
    display: block;
    min-width: 110px;
    text-align: right;
    z-index: 11;
    font-size: 18px;
    font-weight: 700;
    color: #FFF;
    text-transform: uppercase;

    padding:0;
    background: none;
    margin:0;
    border:0;
}

Ora impostiamo gli stili del contenuto principale della pagina:

/* stili del contenuto della pagina */

.main-wrapper {
    background: url(../img/header-bg1.jpg) no-repeat center top;
    margin-top: 0px;
    padding-top: 130px;
    text-align: center;
    background-attachment: relative;
    background-position: center center;
    height: 100%;
    width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover    
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Infine, ecco il punto focale del nostro esperimento, dove avviene “la magia”, ovvero il momento in cui scegliamo quale proprietà modificare oper effettuare l’animazione in base alla compatibilità del browser:

/*
	in questa situazione, quindi quando il browser NON supporta le CSS3 transform, 
	muoviamo la reale posizione del menu da fuori dallo schermo al suo interno, agendo sulla 
	proprietà "left"
*/
body:not(.with-translate).open {
    left: -200px;
}

/*
	in questa situazione, quindi quando il browser supporta le CSS3 transform, 
	lasciamo la reale posizione del menu fuori dallo schermo, mentre la trasliamo 
	al suo interno di 200px;
*/
body.with-translate.open {
    left: 0;    
    -webkit-transform: translate3d(-200px , 0 , 0);
    -moz-transform: translate3d(-200px,0,0);
    -ms-transform: translate3d(-200px,0,0);
    -o-transform: translate3d(-200px,0,0);    
    transform: translate3d(-200px,0,0);    
}

/* 
	impostiamo infine la transition ad all	per comprendere sia quella sulla proprietà "translate3d" che sulla proprietà "right"
*/

/* 
	se il browser non supporta le CSS3 transform, utilizziamo 
	la proprietà "right" per creare il nostro effetto 
        sull'elemento del menu
*/
body:not(.with-translate) .menu.open {
    right: 0
}

/* 
	altrimenti la proprietà right dovrà avere lo stesso valore negativo 
	in quanto useremo la proprietà translate per l'animazione 
*/

body.with-translate .menu.open{
	right:-200px;
}

/*
	nel caso in cui si tratta di ie10 attribuiamo la translate anche al menu, 
	che in questa versione non si sposta insieme al body (maledetto IE!)
*/
body.ie10.with-translate .menu.open {
    -webkit-transform: translate3d(-200px , 0 , 0);
    -moz-transform: translate3d(-200px,0,0);
    -ms-transform: translate3d(-200px,0,0);
    -o-transform: translate3d(-200px,0,0);    
    transform: translate3d(-200px,0,0);    
}

/*
       impostiamo la durata delle animazioni per il menu ed il body con 'all'
       in modo da agire sia sulla proprietà 'transform' che sulla proprietà 'right'
*/
.menu, body{
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

Qui vengono definite le due differenti tecniche di animazione distinte in base alla classe del body: se esso ha la classe “with-translate” (significa che il browser supporta la proprietà CSS transform), allora animeremo body e menu traslandoli con la l’attributo “transform: translate3D“, altrimenti lo faremo agendo sulla proprietà “right”.

Il file Javascript

Infine qualche riga di codice per aggiungere o togliere la classe “open” dal body e dal menu, all’evento “click” dei pulsanti desiderati. Controlliamo inoltre, sfruttando modernirz ( che ho incluso nel documento, puoi verificarlo scaricando il codice sorgente), se il browser supporta le CSS transform oppure no (in caso positivo aggiungiamo la classe “with-translate” al body).

$(function(){

	/* 
		grazie a modernizr, controllando le classi del tag HTML 
		possiamo sapere se il browser supporta la transition3d		
	*/
	var supportCssTransforms = $("html").hasClass("csstransforms3d");

    /*
	    se la supporta aggiungiamo la classe 'with-translate' al body, 
	    in modo da poter differenziare la modalità d'effetto tramite CSS
    */
	if(supportCssTransforms){
    	$("body").addClass("with-translate");
	}

        /*
		se si tratta di IE 10 aggiungiamo la classe per il workaround 
		(la condizione di controllo può essere migliorata)		
	*/
	if(navigator.userAgent.indexOf("MSIE 10.")!=-1){
		$("body").addClass("ie10");
	}

	/*
		impostiamo sugli elementi desiderati l'evento click in modo da 
		aprire o chiudere il menu aggiungendo o togliendo la classe "open"	
		al body e al menu stesso	
	*/
	$("#toggle, #menu-close").on("click", function(){
		$("body, .menu").toggleClass("open");		
	});

});

Ecco fatto: ora possiamo visualizzare un vero e proprio CSS3 slide panel menu con tanto di Progressive Enhancement per i dispositivi che non supportano le funzionalità CSS3 più recenti!

Se ti è piaciuto l’articolo, perché non lo condividi?

Da sempre il web designer/developer deve sostenere la famosa dura lotta della compatibilità browser, con un occhio di riguardo soprattutto per Internet Explorer, ed in particolar modo per l’utilizzo delle numerose funzionalità CSS3, che contribuiscono ad incrementare la qualità e la user experience di ogni interfaccia.

Negli ultimi tempi l’interpretazione di animazioni, transizioni e altre proprietà CSS3 su tutti i browser sembra una meta sempre meno lontana, per cui molti front-end developer, compreso il sottoscritto, cercano di impiegarli il più possibile all’interno dei loro progetti.

Tuttavia nell’utilizzare funzionalità del genere bisogna fare attenzione alle performance CSS3 del dispositivo/browser su cui dovranno “girare”, in particolare se si tratta di quelli mobili, molto meno potenti rispetto ai desktop.

Un esperienza a riguardo

Recentemente ho sviluppato e pubblicato nell’App Store Tint, un’applicazione realizzata interamente con markup HTML5, animazioni CSS3 e l’ausilio di Backbone (che approfondirò in un articolo futuro), riscuotendo anche un notevole successo in fatto di download.

Ma perché ho introdotto Tint?

In questo articolo ti voglio parlare di una lezione importante nell’ottimizzare performance CSS3 di animazioni, transizioni ed effetti applicati ad elementi DOM, che ho personalmente imparato durante la mia esperienza nello sviluppo di Tint, la quale ha contribuito ad incrementarne notevolmente le prestazioni.

Nonostante sia da molto tempo che mi occupo di interfacce web, questa è stata la prima volta che ho avuto l’esigenza di ottimizzare al massimo le prestazioni in dispositivi che, per caratteristiche hardware, riescono difficilmente a supportare certi tipi di animazioni e transizioni.

Ho dovuto pertanto cambiare il modo di realizzare alcuni effetti che su smartphone si arrestavano o mostravano uno sfarfallio (quanto lo odio!), mentre per desktop non davano nessun problema.

Punto focale: il rendering

Quando parliamo di prestazioni su un browser, dobbiamo pensare in particolare al rendering e su come esso rappresenti la ragione principale per le scarse prestazioni derivanti dai nostri stili CSS3.

Mi spiego meglio:

i vari step che compongono il processo in base al quale il browser passa dalla “lettura” del DOM al “disegno” sullo schermo, si possono riassumere in 3 fasi principali, nell’ordine:

1. Calcolo dei stili: in questa prima parte vengono calcolate e definite tutte quelle proprietà che definiscono la morfologia dell’elemento, come width, height, margin, padding, font-size, top, left ecc.
2. Disegno dell’elemento: è il momento in cui l’elemento viene “arricchito” con proprietà come ombra, background, outline, border ecc..
3. Creazione dei layers: qui vengono creati i layer dei “disegni” appena creati, che si differenziano in due categorie: quelli per il render, i quali definiscono la struttura ad albero di elementi e sotto-elementi, e quelli grafici, che vengono creati ogni volta che la GPU viene chiamata in causa. Possiamo dire quindi che quest’ultimo processo interessa proprietà CSS3 come translate, transform, scale, rotate ecc..

La cosa più importante su cui soffermarsi è il fatto che queste tre operazioni vengono eseguite dal browser in coda. Per cui se ad un elemento DOM già disegnato sullo schermo, andiamo a modificare proprietà classificate nel primo punto, poi dovranno essere rieseguiti anche gli altri due step.

Se invece modifichiamo attributi appartenenti al secondo step, il browser si preoccuperà di eseguire anche il terzo step.

Infine, modificando proprietà classificate nell’ultimo step, il lavoro del browser sarà alleggerito notevolmente perché non dovrà rieseguire gli step precedenti.

Questo discorso vale in linea generale per tutti i tipi di browser, a parte il nostro solito amico/nemico Internet Explorer, del quale non abbiamo molte informazioni sul processo di rendering (confidiamo nelle future release).

Tutto questo per dire cosa?

Beh, se ho esposto bene il funzionamento di rendering, sarà facile darsi una risposta:

al fine ottimizzare al massimo le prestazioni di un’animazione bisogna fare in modo che il browser prenda la strada più corta per realizzarla.

Faccio un esempio banale.

Se dobbiamo spostare una div dalla parte superiore del documento a quella inferiore in modo animato, invece di applicare l’animazione all’attributo top o bottom, che costringerebbe il browser a ripetere tutte e 3 le fasi del processo per ogni singolo frame dell’animazione, la applicheremo alla proprietà transform: translate ( o transform: translate3d) le quali interesseranno solo l’ultimo dei 3 step.

In questo modo aumenteremo in modo considerevole la fluidità degli effetti dei nostri progetti.

Dall’esempio possiamo vedere due modi diversi di realizzare la stessa animazione, con performance CSS3 completamente differenti.

Di seguito elenco le proprietà per ognuno dei tre (macro) step.

Step 1: calcolo degli stili

Step 2: disegno dell’elemento

Step 3: creazione dei layers

Conclusioni

Una volta preso in considerazione questo importante discorso, la fluidità delle animazioni e transizioni applicate ai vari elementi della mia app Tint è aumentata in modo considerevole, avvicinandosi sempre di più a quella di applicazioni native (se vuoi vedere il risultato l’app è scaricabile nell’app store).

Spero quindi che anche tu applicherai questo importantissimo concetto nel tuo prossimo lavoro.

Buon divertimento!

Come si sà il tempo è denaro, e usare un framework CSS Responsive per velocizzare ed automatizzare i tempi di avvio ed i settings iniziali dei propri lavori è diventata ormai una caratteristica fondamentale per qualsiasi web designer.

Ma cos’è un framework?

Un framework è una struttura logica di supporto su cui un software può essere progettato e realizzato, spesso facilitandone lo sviluppo

Fonte wikipedia

Nel mondo del web design, per essere più specifici, un framework è l’insieme strutturato di file (perlopiù HTML, CSS e Javascript), cartelle e codice standardizzato secondo una logica, che viene utilizzato come fondamenta o supporto per la creazione di un nuovo sito o applicazione web.

Lo scopo di un framework è quindi quello di fornire una base di partenza comune in modo tale che il web designer non debba riscrivere da zero i propri progetti ogni volta, ma possa affidarsi ad una logica di codice solida e comune.

In questo articolo voglio aiutare gli web designer che sono alla ricerca di un framework, ma che ancora non conoscono molto bene le caratteristiche di quelli più utilizzati, proponendo 10 dei migliori framework responsive CSS e open source per la creazione di interfacce grafiche.

Siccome i termini Mobile First e Responsive, con l’avvento e la diffusione di dispositivi mobili sono diventati un must, di seguito ho elencato solo quei Framework che presentano queste funzionalità.

Prima di iniziare

Molte volte, per mancanza di budget o di tempo, ci dobbiamo affidare a dei template responsive premium; prima di mostrarti la lista dei migliori framework responsive ti voglio segnalare questi ottimi temi responsive di altissima qualità che ho avuto l’occasione di usare per alcuni dei miei progetti:

Bootstrap

E’ sicuramente il più famoso, e quello che ha bisogno di meno presentazioni; elegante, intuitivo e veloce. Dispone di un’ottima libreria di componenti javascript, un’ottima documentazione e dalla versione 3.0 è diventato mobile-first. Sviluppato da Twitter, Bootstrap 3 utilizza LESS e, compilato tramite Node.js, offre nella sezione Customize la possibilità di personalizzare quasi ogni aspetto grafico tramite delle variabili prima del download.

Foundation

Si presenta come il più avanzato front-end framework responsive al mondo. Anch’esso mobile-first, fa della semanticità del codice uno dei suoi punti di forza, “per poter scrivere un markup pulito senza sacrificare l’utilità e la velocità del framework”. Come Bootstrap, presenta un’ottima libreria di componenti javascript.

Topcoat

Framework CSS per applicazioni web pulite e veloci. Disegnato per garantire le massime performance, Topcoat presenta una bella collezione di componenti UI, è facilmente personalizzabile e permette anche il donwload in PSD degli elementi dell’interfaccia.

Pure

Pure è si presenta come un set leggero di moduli CSS da utilizzare in ogni tipo di progetto web. Offre una buona documentazione ed effettivamente è molto leggero (il peso totale è di soli 6KB).

Skeleton

Skeleton è un framework semplice e pulito per siti web e applicazioni HTML5. Mette a disposizione solamente gli elementi di cui hai bisogno, niente di più. Come Topcoat permette il download  di un template PSD per il mock up dei tuoi lavori.

YAML

Framework CSS modulare per siti web flessibili, accessibili e responsive. Anche questo molto leggero (5.9 KB) e costruito utilizzando SASS, è testato and supportato dalla maggior parte dei browser come Chrome, Firefox, Opera, Safari ed Internet Explorer.

Gumby

Framework CSS flessibile e responsive. Presenta una buona libreria di elementi UI e include diversi tipi di griglie con molte variazioni di colonne, che permettono di avere la massima flessibilità durante l’intero processo di realizzazione di qualsiasi progetto.

Kube

Dai creatori di Redactor.js, Kube si presenta come un framework CSS per sviluppatori professionali. Dispone di un sistema di griglie rivoluzionario e offre molta libertà sulla codifica degli stili.

Groundwork

Compilato anch’esso tramite SASS, Groundwork CSS è un buon toolkit HTML5 Responsive e Javascript.

Tuktuk

Framework Responsive per dare flessibilità ai propri progetti facilmente. Usa funzionalità CSS 3, è leggero e veloce

Bella lista, ma quale dei framework scegliere?

Scegliere il proprio framework non è sicuramente facile, e si può dire che per poter capire meglio quale fa al caso nostro bisogna  all’inizio provarli direttamente; tuttavia altri aspetti possono essere considerati nella scelta:

• La grandezza e il tipo di progetto che devi realizzare
• La facilità e la velocità di scrittura del codice
• La documentazione (più dettagliata è, e più veloce riuscirai a capire come utilizzare il framework)
• Con quale frequenza il framework viene aggiornato ed il supporto a lungo termine
• La velocità di installazione
• Il numero di opzioni disponibili
• L’integrazione con altri sistemi
• La leggerezza dei file inclusi

E tu quale utilizzerai? Se hai altre ottime soluzioni da segnalare, non esitare a segnalarle nei commenti!

Template responsive premium

Nell’ambito dello sviluppo di applicazioni web per dispositivi mobile, una delle caratteristiche fondamentali ai fini di un’interattività user-friendly è sicuramente il sistema di scrolling: avere un tipo di scrolling fluido e funzionale rende più piacevole l’esperienza dell’utente nei confronti di qualsiasi web application.

Se fino all’introduzione in iOS del sistema di scrolling nativo nel browser, si ricorreva all’utilizzo di plugin javascript come iScroll, con l’istruzione CSS3 -webkit-overflow-scrolling: touch; , che permette di usare nel browser le stesse funzionalità di scrolling delle applicazioni native, ora diventa tutto più facile (almeno per quanto riguarda dispositivi di casa Apple).

Tuttavia, non è ancora stato gestito un sistema di Pull-to-refresh come quello introdotto a partire da iOS6, ormai presente in molte delle applicazioni che presentano delle view con una lista: è per questo che voglio oggi segnalarti l’ottimo plugin scritto da Damien Antipa: pull-to-refresh.js

Il plugin ovviamente è compatibile solo con il sistema operativo iOS, e più specificatamente con le versioni 5 e 6 (molto probabilmente anche con iOS 7), e permette – con poche righe di codice CSS, Javascript ed HTML – di creare un sistema di pull-to-action molto simile a quello nativo.

 

Io lo userò sicuramente per la mia prossima mobile web application, e tu?