Mobify la libreria per chi sviluppa responsive

Mobify la libreria per chi sviluppa responsive

2017
4
CONDIVIDI

In diversi precedenti articoli ho parlato degli innumerevoli vantaggi che consistono nello sviluppare un sito web responsive. Di contro quei pochi svantaggi sono rappresentati dal caricamento di immagini ottimizzate per desktop anche in versione mobile poiché il design reattivo si limita semplicemente a restringerle senza logicamente variare le proprietà di peso; questo rappresenta sicuramente un limite, e chi sviluppa responsive è costretto di volta in volta a cercare un giusto compromesso tra qualità e peso delle immagini.

Qualcuno ha deciso di non prendere sotto gamba questa problematica e di conseguenza ha realizzato Mobify, un progetto open source dedito a migliorare le prestazione dei responsive web sites.

Come funziona Mobify?

mobify
Questa libreria agisce attraverso il DOM, anticipando il caricamento delle risorse riesce ad effettuare un caricamento condizionale delle immagini garantendo maggiore flessibilità e velocità soprattutto sulla parte mobile; non a caso Mobify è particolarmente indicato per chi ottimizza i contenuti su un target prevalentemente mobile:

<div class="small">
    <h1 media="(max-width : 480px)">Small images downloaded</h1>
    <img src="/mobifyjs/examples/assets/images/leaves-small.jpg" width="100%" media="(max-width : 480px)">
    <img src="/mobifyjs/examples/assets/images/office-small.jpg" width="100%" media="(max-width : 480px)">
</div>
<div class="big">
    <h1 media="(min-width : 480px)">Big images downloaded</h1>
    <img src="/mobifyjs/examples/assets/images/leaves-big.jpg" width="100%" media="(min-width : 480px)">
    <img src="/mobifyjs/examples/assets/images/office-big.jpg" width="100%" media="(min-width : 480px)">
</div>

in questo esempio abbiamo 2 div (big e small) che verranno visualizzati rispettivamente in versione desktop e mobile, risparmiando a quest’ultima l’arduo compito di dover caricare un’immagine full-size.

Esempi e Link ufficiali

Potete approfondire il discorso sul sito ufficiale mobify.com dove è presente una documentazione abbastanza esaustiva.
Per quanto riguarda, invece, gli esempi concreti:

Questi ultimi files vanno scaricati insieme poiché il primo è l’esempio ed il secondo la libreria che consente il funzionamento degli scripts.

  • Emporio

    sicuramente molto interessante ma credo che la curva di apprendimento sia abbastanza alta.

  • kekko

    Credo che ormai indipendentemente dal devices la velocità di connessione sta aumentando anche con gli smartphones, per cui sarebbe utile implementare una libreria per alleggerire delle immagini?

  • Fabiana Testini

    Da introdurre in agenzia!
    Tnx

  • Paolo

    Ma l’attributo media è valido per il tag img in l’html5 ?
    Interessante ma niente di che