Responsive web design on jo vuosikymmenen muotisana, ja se on ihanteellinen monen näytön yhteydessä olevaan maailmaan, johon elämme. Tämä kompromissi on kuitenkin suorituskyvyssä suurempien tiedostojen koon vuoksi.

Tämä on herättänyt muutamia asiantuntijoita sanomaan, että kuten Flashin alkuaikoina, reagoiva muotoilu on jotain, josta voimme kaikki olla innoissaan ilman hyvää syytä. Vaikka tällä hetkellä on suorituskykyä koskevia kysymyksiä, ne voidaan voittaa jossain määrin pienillä säätöillä, pakkaamisella ja kuvan kokoa.

Miksi herkkä muotoilu voi toimia hitaasti

Responsive-suunnittelu lataa kaikki samat HTML-elementit jokaiselle laitteelle, mukaan lukien tablet- ja työpöydän toimitukseen tarkoitetut. Tämä tarkoittaa, että kaikki sisältö toimitetaan usein, mukaan lukien kuvat ja komentosarjat, riippumatta siitä, mihin laitteeseen sitä katsotaan.

Tutkimus että 86% vastaajista tällä hetkellä verkossa tarjoaa täydellisen työpöydän sivun mobiililaitteille. Tämä on selvästikin trendi suunnittelustekniikalle, jota on käsiteltävä, jos aiomme lopettaa paisutettujen verkkosivujen edistyminen sen kappaleissa.

Tällä hetkellä herkkä muotoilu lisää sivukokoja ja tämä on trendi, jota on käsiteltävä, varsinkin kun katsotaan, että 57% mobiilikäyttäjistä lähtee, jos sivusto ei lataudu 3 sekunnin kuluessa.

Miten suorituskykyä voidaan parantaa?

Niille, joilla on jo suunnittelu ja jotka haluavat nyt optimoida, Mobitest voidaan käyttää suorituskyvyn mittaamiseen, jotta sitä voidaan jatkaa ja käsitellä. Suunnittelua suunniteltaessa tietenkin optimointi on tässä vaiheessa yksinkertaisempaa ja suorituskykyä pitää aina pitää tärkeänä osana suunnittelua eikä jälkivaikutusta.

Suorituskyvyn parantamiseksi on pienennettävä sivujen ja ladattavien resurssien kokoa. Tämä voidaan tehdä erilaisilla tekniikoilla muuttamatta sivuston ulkonäköä ja tunnetta vakavasti.

Ensinnäkin on otettava huomioon, miten varmistetaan, että vain tarvittavat resurssit lähetetään kohdelaitteeseen. Tämä voidaan tehdä minimoimalla HTTP-pyyntöjen määrä siten, että käyttäjä viettää vähemmän aikaa odottaa DOM ladata. Tämä voidaan puolestaan ​​tehdä pakattamalla CSS- ja Javascript-resursseja, joita varten esimerkiksi työkalut Kompassi - avoimen lähdekoodin CSS authoring framework - voidaan käyttää. Tämän ansiosta kehittäjät voivat luoda puhtaampaa merkintää ja luoda spritseja ja laajennuksia vähäisellä vaivalla.

JavaScriptin osalta työkalut, kuten UglifyJS voidaan käyttää, joka pakkaa koodin.

Ehdollinen lastaus

Tätä voidaan pitää tärkeänä tekniikana, kun kyseessä on herkkä muotoilu, sillä sitä voidaan käyttää varmistamaan, että mobiili- ja älypuhelimen käyttäjät eivät lataa sivuston osa-alueita, jotka hidastavat sitä tai eivät käytä niitä.

Ehdollisen latauksen avulla voidaan estää kaikenlaista sisältöä lataamasta, mukaan lukien sosiaaliset widgetit, kuvat, kartat ja paljon muuta. Tässä vaiheessa on tärkeää huomata, että sivustoa on testattava perusteellisesti jokaisessa optimointivaiheessa, joten on helppo nähdä, mikä on ollut erilainen, kun menet.

kuvat

Tiedämme kaikki, että kuvat ovat yleensä vastuussa suurimman kilobyyttien ottamisesta verkkosivuilla. On myös turvallista sanoa, että työpöydän selaimelle suunnitellut kuvat menestyvät hyvin, kun ne toimitetaan mobiililaitteelle.

Jos sivustolla on myös paljon vanhaa sisältöä, se vaikuttaa entistä paremmin suorituskykyyn ja jollain tavalla estetään tämän sisällön lastausvaatimukset. Tämä voidaan tehdä muuttamalla merkintää muuttamalla src- tai img-elementtejä, PHP-ratkaisu Adaptive Images on todennäköisesti helpompaa. Ohjelmisto havaitsee näytön koon ja luo automaattisesti, kätkee ja toimittaa asianmukaiset skaalautuvat upotetut HTML-kuvat ilman tarvetta muuttaa merkintää. Käytettäessä nestekidenäyttötekniikoita käytettäessä se on kätevä ratkaisu, joka säästää paljon aikaa. Adaptive Images käyttää yhden htaccess-tiedoston, yhden php-tiedoston ja yhden JavaScript-riviä sivuston kävijöiden näytön koon määrittämiseksi.

Teksti

Kannattaa myös ajatella tekstiä, koska se kääritään luonnollisesti, kun laite on kapeneva ja voi aiheuttaa näyttöongelmia. FitText on työkalu, joka voi auttaa käsittelemään tätä, jQuery-plugin, joka päivittää automaattisesti fonttikokoa ja mahdollistaa vähimmäis- ja enimmäiskokoja.

Tämä on ihanteellinen otsikkoihin, jotka saattavat näkyä huonosti mobiililaitteessa ja sallivat CSS3: n määrätyn fonttikoon sivuuttamisen. FitText on kuitenkin tarkoitettu vain otsikoihin, eikä sitä pitäisi käyttää kappaleen tekstissä.

Miksi valita muotoilu reagoivasti?

Vaikka reagoiva muotoilu on sen ongelmat, aivan kuten suhteellisen uusi tekniikka tai tekniikka, kannattaa silti valita rakentavan sivuston tällä tavalla. Kukaan ei halua mennä taaksepäin, ja vaikka se voi olla helpompi rakentaa mobiilisivusto, on paljon parempi olla mahdollisimman innovatiivinen.

Google on samaa mieltä siitä, heidän neuvonsa on käyttää reagoivaa muotoilua parhaaksi tavaksi suunnitella mobiililaitteille. Tietenkin hakuhaaroille tämä tarkoittaa, että niillä on vain yksi indeksoiva URL-osoite, eikä useita URL-osoitteita, jotka ovat olennaisesti samalle sivustolle, joten ne ovat heidän etujensa mukaisia.

Kuitenkin tällä sosiaalisen jakamisen manian ajalla on myös järkevää, sillä mobiilikäyttäjät voivat jakaa sivun jonkun kanssa työpöydällä. Jotta voitaisiin luoda yhtenäinen kokemus, sen pitäisi tarjota sama sisältö.

Lisäksi, kun vastaava sivusto parantaa tuottavuutta työvoimasta, sillä on paljon vähemmän tekemistä. Tämä koskee sisältöä, päivityksiä ja SEO, sillä se on tehtävä erikseen, jos eri sivustoja rakennetaan.

Hahmot

Mobiililaitteet ja tabletit ovat tulossa normaaliksi internet-yhteyden ja surffailun suhteen tässä lähes tietokoneen jälkeisessä aikakaudella. Tablettien myynti maailmanlaajuisesti on noussut vain vuodessa, yli kaksinkertaistunut tuolloin ja monet kuluttajat valitsevat nyt erilaisia ​​laitteita, joissa on Android ja iOS.

Ei ole juurikaan epäilystä siitä, että toistaiseksi reagoiva muotoilu vaikuttaa myönteisesti suorituskyvyn huolissaan. Yhden raportin mukaan , joka pyysi joitakin maailman parhaista tuotemerkeistä, miten reagoiva sivusto oli vaikuttanut liikenteeseen, käyntien kaikkiin laitteisiin nousi huomattavasti.

Siihen sisältyi matkaviestimien kävijämäärien keskimäärin 23% ja 26%: n alennettua poistumisprosenttia, ja vierailijat käyttivät sivustossa noin 7,5% enemmän aikaa kuin aiemmin.

O'Neill, trendikäs surf vaatetusalan vähittäiskauppias, raportoi muunnosnopeuden, joka on 65,7% korkeampi iPadilla ja iPhonella, koska se on kehittänyt reagoivan sivuston. Tämä merkitsi 101,2 prosentin liikevaihdon kasvua näillä laitteilla yksin.

Android-laitteiden osalta muuntokurssi oli jopa parempaa, valtavan 407,3 prosenttia, ja sen osuus oli 591,4 prosentin suuruinen liikevaihdon kasvu. Pienemmät muuntokurssit näkyivät muissa kuin mobiililaitteissa, vaikka kasvu oli edelleen nähtävissä.

Tämä on vain yksi tuotemerkkeistä, jotka vapauttavat lukujaan, ja on aika vaikeaa saada tietoja muilta juuri nyt, aivan kuten sosiaalisen median vaikutus parin vuotta sitten. Kuitenkin se menee jonkin tapaan osoittamaan, että tuotot reagoivan verkkosivuston suunnittelusta voivat olla merkittäviä.

Ottaen huomioon tämän, mikä syy tahansa suunnittelija tarvitsee aloittaa suunnittelu asiakkailleen reagoivasti ja yrittää varmistaa, että he tekevät niin hyvin kuin mahdollista? Ei ole olemassa yhtä, ja ne suunnittelijat, jotka eivät halua menettää vaikeuksia oppia suunnittelemaan, rakentamaan ja optimoimaan sivuston käyttämällä herkkiä tekniikoita, voivat joutua pölyyn.

67% käyttäjistä sanoo ostaneensa mobiilisivustolla ja on ajateltu, että langattoman internetin käyttö ylittää työpöydän seuraavan vuoden. Kun kaikki tämä otetaan huomioon, on helppo ymmärtää, miksi yritykset ovat entistä kiinnostuneempia parhaista mobiiliverkkoratkaisuista, joita he voivat tarjota.

Reagoiva muotoilu voi olla vasta alkuvaiheessa tällä hetkellä, mutta näyttää siltä, ​​että markkinakysyntä kasvattaa sitä nopeasti, joten kannattaa oppia mahdollisimman monta näkökulmaa kurinalaisuuteen.

Mitä tekniikoita olet käyttänyt optimoimaan vastaavia sivustoja? Onko vaihtoehtoisen sisällön toimittaminen estä reagoivan suunnittelun etuja? Kerro meille kommentit.