Home
Le buone carte di HTML5

27 Marzo 2017

Le buone carte di HTML5

di

Uno standard fondamentale che ha veramente cambiato le regole del gioco di design web, user experience e interfaccia.

Grazie a HTML5 i siti web e varie soluzioni di app mobile presentano una esperienza utente (UX) uniforme e compatibile tra diversi schermi. A patto che le carte a disposizione vengono usate in maniera corretta.

Ecco quelle che riteniamo le più importanti, come se parlassimo di autentiche carte da gioco:

  • Il Fante: le microinteraction.
  • La Regina: la parallax scrolling page.
  • Il Re: il responsive design.
  • L’asso nella manica: il codice HTML5 per app mobile.
Microinteraction

Ne abbiamo già parlato più volte. Tanto che le abbiamo inserite nella classifica dei principali trend UX Trend del 2017. Le microinteraction migliorano l’esperienza utente e soppiantano le vecchie animazioni Flash, nonché le GIF animate che invadevano e rallentavano il caricamento dei siti web degli anni novanta.

new-gif1.gif

Speriamo di non vederne più.

 

Parallax scrolling page

Risale a quasi un anno fa, ma conserva la propria attualità, il nostro Scrollabile non troppo.

Ci riferiamo al comportamento di alcune pagine web dove lo sfondo rimane fisso, o si muove più lentamente, durante lo scorrimento verticale di una pagina. Questa è un’altra delle soluzioni realizzabili con HTML5. Riportiamo di seguito un paio di esempi citati nell’articolo 18 great parallax scrolling websites:

  • Il sito dell’agenzia Madwell mostra qualcosa di ancora più particolare. Provate a ridurre la finestra del browser mentre lo osservate.
  • Ancora più interessante è The Walking Dead Zombiefied, dove lo scorrimento non mostra la verticalità della pagina ma anima il fumetto riportato nel sito.

Per chiarirvi le idee del tutto, consultate questa guida.

7a05f484e09ee1169d3f4a9a22a06c5e.jpg

Guida allo scorrimento delle pagine web con parallasse. Ovviamente scorrevole.

 

Responsive Design

Bootstrap può essere considerato il framework base di partenza per progettare in modo responsive. Un po’ di tempo fa avevamo condiviso una breve guida per realizzare app, valida anche per un sito web che rispetti le linee guida del responsive design. Le pagine HTML5 ben progettate seguono una struttura a dodici colonne nelle quali, cambiando le dimensioni dello schermo, vengono reimpaginati i contenuti.

1*Ve9Z3iDw7hBi0K5ZBQqyWw.png

Da qui si comincia a preparare un sito con design responsive. Oppure una app.

 

Questo permette di conservare la completa visualizzazione del contenuto della pagina senza dover ricorrere a scorrimenti orizzontali.

5.jpg

Lo schermo cambia e il sito si reimpagina per mostrare al meglio le informazioni.

 

Su W3schools è possibile consultare la guida alla configurazione delle dodici colonne in fase di design.

App mobile

Sviluppare app mobile in codice nativo HTML5 è un asso nella manica. Su HTML.it trovate un sintetico tutorial su come fare.

Sviluppare mobile app è comodo. Come raccontato da Matteo Tettamanzi a proposito del suo pocket su HTML5, facilitante è stato per YouTube il passaggio al player HTML5 con il conseguente abbandono di Flash.

HTML5 Pocket

Il riferimento rapido da tenere sempre sulla scrivania.

 

Il vantaggio delle app sviluppate in HTML5 è poter realizzare app senza dover scrivere più volte il codice nativo per sistemi operativi diversi. Questo comporta un evidente (o apparente, secondo la situazione) guadagno in tempo (e quindi in denaro). Da un punto di vista della distribuzione, il più grande valore aggiunto può sembrare non dover passare per forza per gli store ufficiali per la pubblicazione e gli aggiornamenti dell’app, senza quindi dover attendere l’approvazione dei big come Apple o Google.

Realizzare app in HTML5 porta però con sé anche un problema importante: la user experience offerta spesso non è coerente con l’apparecchio dove gira l’app. Ogni dispositivo ha proprie regole di ergonomia e standard di interfaccia utente ai quali gli utenti sono abituati e che vanno rispettati. HTML5 per una app è una buona soluzione se ci sono risposte soddisfacenti alle seguenti difficoltà:

  • Correggere bug mirati a seconda del dispositivo che ospita l’app.
  • Gestire workflow di progetti articolati e complessi.

È a rischio anche il ROI (Return On Investment) rispetto a quello potenziale di una app progettata ad hoc e sviluppata con codice nativo precedentemente testato. Una user experience insoddisfacente per l’utenza potrebbe portare all’insuccesso.

In conclusione, HTML5 può essere una mano vincente per lo sviluppatore, senza barare però; perché gli altri partecipanti al gioco potrebbero rendersene conto!

L'autore

Iscriviti alla newsletter

Novità, promozioni e approfondimenti per imparare sempre qualcosa di nuovo

Gli argomenti che mi interessano:
Iscrivendomi dichiaro di aver preso visione dell’Informativa fornita ai sensi dell'art. 13 e 14 del Regolamento Europeo EU 679/2016.