Mobify la libreria per chi sviluppa responsive

19 Luglio 2013Scritto da mario3

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:

Small images downloaded

Big images downloaded

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.

Scritto da mario

Agile web e mobile developer, attraverso il blog mette in campo l'esperienza acquisita quotidianamente sul mondo del lavoro.

3 comments

  • kekko

    19 Luglio 2013 at 23:35

    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?

    Reply

  • Fabiana Testini

    19 Luglio 2013 at 23:35

    Da introdurre in agenzia!
    Tnx

    Reply

  • Paolo

    22 Agosto 2013 at 17:04

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

    Reply

Lascia un commento

Your email address will not be published. Required fields are marked *

https://www.fullstacksas.it/wp-content/uploads/2021/11/FULLSTACK-LOGO-MINI-150x131.png

Via Vito Rosa, 7
70127 Bari – IT
P.iva – 08087100726

Gli attrezzi del mestiere

Full Stack Sas – p.iva 08087100726 – Rea n. BA – 603324

Copyright 2019. Bold Themes. All rights reserved.

bt_bb_section_top_section_coverage_image