Vaikka mobiililaitteet ja tabletti Kun he viimein tulevat hallitsemaan maailmaa, verkkoteknologia kilpailee jatkuvasti kasvavan näytön koon mukaan. Työkalujen suunnitteleminen tämän ilmiön seuraamiseksi tuo meille kuitenkin uuden määrän ongelmia, ja yksi viimeisistä sanoista: 'Verkossa reagoiva' . Tämä on haaste saada verkko toimimaan useimmilla, ellei kaikissa laitteilla, heikentämättä käyttökokemuksen laatua. Tietokoneen tai kannettavan tietokoneen sisällön suunnittelun sijasta tietojen on oltava saatavilla matkapuhelimille, tableteille tai mille tahansa verkkoon liitetylle pinnalle. Tämä kehitys kuitenkin reagoiva web-suunnittelu Se on osoittautunut vaikeaksi ja joskus tuskalliseksi.

Vaikka tekstitietojen sijoittaminen voi olla melkein triviaalia, hankala osa tulee esiin, kun otetaan huomioon sisältö, kuten reagoivat kuvat, infografiikat, videot ja niin edelleen, joka on aikoinaan suunniteltu pöytätietokoneita ajatellen. Tämä herättää kysymyksen sisällön näyttämisestä oikein, mutta myös siitä, miten sisältöä itse kulutetaan eri laitteilla. Älypuhelinten käyttäjät eroavat pöytätietokoneiden käyttäjistä. Pidä mielessä esimerkiksi datasuunnitelmat ja käsittelynopeus. Google on alkanut korostaa sivustot, jotka ovat hakutuloksissa mobiililaitteille sopivia, joidenkin spekuloimalla jos se johtaa merkittävään nousuun näiden sivustojen joukossa. Aikaisemmat ratkaisut keskittyivät tähän käynnistämällä vain aliverkkotunnuksia, jotka olivat vain mobiileja (ja uudelleenohjattuja), mutta tämä lisäsi monimutkaisuutta ja vanheni nopeasti. (Kaikilla sivustoilla ei ole varaa tähän reittiin.)

Reagoivassa kuvahaussa verkossa

Tässä vaiheessa kehittäjät ja suunnittelijat voivat varmistaa, että heidän verkkosivustonsa lataaminen on optimoitu mobiilisivustoissa oleville käyttäjille. Yli 20% verkkoliikenteestä nyt tulee matkapuhelinkäyttäjiltä, ​​ja määrä kasvaa. Kun kuvat otetaan suurimpien tietosisältöjen joukossa, kokoluokituksesta on tullut etusijalla, mukaan lukien palvelin- ja käyttöliittymäratkaisut. Jotta voimme keskustella näistä koon korjausratkaisuista, meidän on ensin ymmärrettävä kuvien linkittämisen nykyiset puutteet.

sillä on vain lähde-attribuutti linkitetty suoraan kuvaan. Sinulla ei ole mitään tapaa määrittää tarvittavaa oikean tyyppistä kuvaa ilman lisäyksiä.

Emmekö voi laittaa kaikkia HTML-koodiin sisältyviä kuvakokoja ja käyttää display:none CSS-sääntöjen avulla kaikelle paitsi oikealle kuvalle? Se on loogisin ratkaisu täydellisessä loogisessa maailmassa. Mutta tällä tavalla selaimet voivat ohittaa kaikki valottamattomat kuvat eivätkä teoriassa voi ladata niitä. Selaimet on kuitenkin optimoitu yleisen logiikan ulkopuolelle. Sivun hahmontamiseksi mahdollisimman nopeasti selain esikatselee linkitettyä sisältöä jo ennen tyylitaulukoiden ja JavaScript-tiedostojen lataamista. Sen sijaan, että jätettäisiin huomiotta suuret kuvat, jotka on tarkoitettu työpöydälle , päädyimme lataamaan kaikki kuvat, mikä johti paljon suuremman sivun lataamiseen. Vain CSS-tekniikka toimii vain kuville, jotka on tarkoitettu taustaksi, koska ne voidaan asettaa tyylitaulukoissa (käyttäen mediakyselyt ).

Joten mitä verkkosivuston pitäisi tehdä?

Taustajärjestelmät kuvan skaalautuvuuteen

Lukuun ottamatta vain mobiililaitteille tarkoitettuja sivustoja / aliverkkotunnuksia, haemme edelleen käyttäjäagenttia (UA) ja käytämme sitä palvelemaan oikean kokoisia kuvia käyttäjälle. Jokainen kehittäjä voi kuitenkin todistaa, kuinka epäluotettava ratkaisu voi olla. Uusia UA-ketjuja ilmestyy koko ajan, mikä tekee väsyttävästä kattavan luettelon ylläpitämisen ja päivittämisen. Ja tietysti tässä ei edes oteta huomioon kuinka epäluotettavia ja kuinka helposti kiertää UA-ketjuja on aluksi.

Mukautettavat kuvat

Jotkin toissijaiset palvelinratkaisut ovat kuitenkin harkitsemisen arvoisia. Mukautettavat kuvat se on loistava ratkaisu niille taustan ensisijaisille reagoiville kuvaryhmille. Ei vaadi mitään merkintä erityinen, mutta toisaalta se käyttää pientä JavaScript-tiedostoa ja tekee suurimman osan backend-tiedostosi raskaasta nostamisesta. Se käyttää PHP: tä ja määritettyä nginx-palvelinta. Se ei myöskään riipu mistään UA-seurannasta, ja sen sijaan tarkistaa näytön leveyden. Adaptiiviset kuvat toimivat hyvin kuvien skaalauksessa, mutta ovat hyödyllisiä myös silloin, kun suuria kuvia tarvitaan taideohjaus Esimerkiksi kuvan vähentäminen tekniikoilla, kuten rajaus ja kiertäminen, ei vain skaalaus.

Kosketa Sencha

Sencha Touch on toinen back-end-ratkaisu reagoiville suunnittelukuville, vaikka sitä kutsutaan parhaiten ulkoistetuksi ratkaisuksi. Sencha Touch muuttaa kuvan kokoa vastaavasti, kun seurataan UA: ta. Alla perusesimerkki palvelun toiminnasta:

On myös mahdollisuus määrittää koot, jos emme halua Senchan muuttavan kokoa automaattisesti. Päivän lopussa toissijaiset palvelin (ja ulkoistetut) ratkaisut vaativat resursseja pyynnön käsittelemiseksi ennen oikean kuvan lähettämistä takaisin. Tämä vie arvokasta aikaa ja siten hidastaa pyyntö-vastausmatkaa. Parempi ratkaisu voisi olla, jos laite itse päättää, minkä resurssin pyytää suoraan, ja palvelin reagoi oikein.

Etupään ratkaisut

Viime aikoina selaimen puolella on tapahtunut merkittäviä parannuksia reagoivien kuvien ongelmien ratkaisemiseksi.

Elementti W3C on ottanut sen käyttöön ja hyväksynyt HTML5-spesifikaatioissa. Se ei ole tällä hetkellä saatavilla kaikissa selaimissa, mutta ei kauan ennen kuin tämä tapahtuu. Siihen asti luotamme polyfillit Javascript elementille. Polyfillit ovat myös loistava ratkaisu vanhoille selaimille, joilta puuttuu tämä elementti.

On myös tapaus attribuutti srcset määritteen joka on saatavana useille selainpohjaisille -elementille. Tätä voidaan käyttää ilman JavaScriptiä, ja se on hieno ratkaisu, jos muut kuin WebKit-selaimet jätetään huomiotta. Se on hyvä väliaikainen resurssi harvoissa tapauksissa, joissa muut ratkaisut eivät riitä, mutta sitä ei pidä pitää kokonaisratkaisuna.

Kuvan täyttö

Kuvan täyttö se on kirjakauppa polyfill elementille. Se on yksi suosituimmista kirjastoista joukossa käyttöliittymän ratkaisuja kuvan skaalautuvuuteen ja siihen liittyviin ongelmiin. On olemassa kaksi versiota; Picturefill v1 jäljittelee elementtiä span -merkillä kun taas Picturefill v2 käyttää elementtiä jo käytössä olevissa selaimissa ja tarjoaa polyfill vanhoille (esim. IE> = IE9). On joitakin rajoitukset ja häiriöt , etenkin Android 2.3: lle - mikä on muuten esimerkki siitä, miten img srcset tulee pelastamaan. Tässä on näyte merkintä Picturefill v2: n käyttöä varten:

Parantaakseen suorituskykyä käyttäjille, joilla on rajoitettu tietosuunnitelma, Picturefill voi olla yhdistettynä laiskaan kuormitukseen . Kirjasto voisi kuitenkin tarjota laajempaa selaintukea ja käsitellä parittomia tapauksia sen sijaan, että luotettaisiin korjaustiedostoihin.

Imager.js

Imager.js on kirjasto, jonka on luonut BBC uutiset jotta saavutettaisiin, että reagoivilla kuvilla oli erilainen lähestymistapa kuin Picturefillissä. Yrittäessään tuoda kohteen tukemattomiin selaimiin Imager.js keskittyy vain lataamaan sopivat kuvat samalla kun tarkastellaan verkon nopeutta. Se sisältää myös laiskan lataamisen turvautumatta ulkoistettuihin kirjastoihin. Se toimii asettamalla elementtejä paikanpitäjä ja korvaa ne -elementeillä. Alla esitetty koodi osoittaa tämän käyttäytymisen:

new Imager({ availableWidths: [480, 768, 1200] });

Renderoitu HTML näyttää tältä:

new Imager({ availableWidths: [480, 768, 1200] });

Selaintuki on paljon parempi kuin Picturefill, sillä se on käytännöllisempi kuin progressiivinen ratkaisu.

Lähteen sekoitus

Lähteen sekoitus lähestyy tätä ongelmaa hieman eri näkökulmasta kuin muut käyttöliittymäkirjastot. Se näyttää olevan jotain 'mobiili ensin' -ajattelusta, jossa se palvelee oletusarvoisesti pienintä mahdollista resoluutiota. Tunnistamalla laitteen, jolla on suurin näyttö, se vaihtaa kuvalähteen suuremmaksi. Tuntuu enemmän kuin hakata ja vähemmän kuin täysin kasvanut kirjakauppa. Tämä on hieno ratkaisu lähinnä mobiilisivustoille, mutta se tarkoittaa, että resurssien kaksoislataaminen työasemille ja / tai tableteille on väistämätöntä.

Muita merkittäviä JavaScript-kirjastoja ovat:

• HiSRC - JQuery-laajennus reagoiville kuville. JQueryyn luottaminen voi olla ongelma.

• Mobify.js - Yleinen kirjasto reagoivaa sisältöä varten, mukaan lukien kuvat, tyylitaulukot ja jopa JavaScript. 'Sieppaa' dOM ennen resurssin lataamista. Mobify on tehokas ja kattava kirjasto, mutta se voi olla ylivoimainen, jos tavoitteena on vain reagoivia kuvia.

Yhteenvetona

Päivän lopussa kehittäjän on päätettävä, mitä lähestymistapaa sovelluksessa käytetään reagoiva web-suunnittelu kuvia käyttäjällesi. Tämä tarkoittaa, että tiedonkeruu ja testaus antaa sinulle paremman käsityksen siitä, mitä lähestymistapaa käyttää.

Sen pyöristäminen voi auttaa pohtimaan alla olevaa kysymysluetteloa, ennen kuin päätät sopivasta ratkaisusta reagoiville kuville.

• Ovatko vanhat selaimet ongelma? Jos näin ei ole, harkitse nykyaikaisemman lähestymistavan käyttöä (esim. Picturefill, attribuutti srcset).

• Onko vasteaika kriittinen? Jos se ei ole, valitse back-end tai ulkoistettu ratkaisu.

• Pitäisikö ratkaisujen olla sisäisiä? Ulkoistetut vaihtoehdot eivät tietenkään tule kysymykseen.

• Onko sivustolla paljon kuvia, jotka yrittävät siirtyä reagoiviin kuviin? Onko huolta validoinnista tai semanttisista tarroista (tai ei-semanttisista tarroista)? Tämä edellyttää taustaratkaisua, joka ohjaa kuvapyynnöt esimerkiksi Adaptive Images -sovellukseen.

• Onko taiteen suunta ongelma (erityisesti suurille kuville, joissa on paljon tietoa)? Kirjasto, kuten Picturefill, voi olla parempi ratkaisu tällaiseen skenaarioon. Myös mikä tahansa back-end-ratkaisu voisi toimia hyvin.

• Onko JavaScriptiin liittyviä huolenaiheita? Mikä tahansa käyttöliittymäratkaisu ei tule kysymykseen, joten UA-seurantaan luottavat vaihtoehdot, kuten käyttöliittymä tai ulkoistetut.

• Onko prioriteetti mobiilivasteajoille verrattuna työpöydän vasteaikoihin? Source Shufflingin kaltaisen kirjaston tulisi olla sopivin kyseiseen tapaukseen.

• Onko tarpeen reagoida käyttäytymiseen sivuston kaikkiin osa-alueisiin, ei vain kuviin? Mobify voisi toimia paremmin.

• Onko täydellinen maailma saavutettu? Joten käytä vain CSS-likiarvoa display:none!