Need Of The Hour ei ole responsiivinen muotoilu vaan reagoiva suorituskyky
Responsiivisessa suunnittelussa on viime aikoina esiintynyt useita suorituskykyongelmia. Ironista on se, että responsiivinen muotoilu toimii melko hyvin uusimmissa älypuhelimissa, mutta ei mitään muuta kuin samaa.
Saatat olla hämmentynyt, koska useimmilla verkkokäyttäjillä on huippuluokan älypuhelimet. Suurin osa väestöstä käyttää kuitenkin edelleen mobiililaitteita, joissa on pieni näyttö ja joissa on vanha Android- tai iOS-versio ja ehkä vain ominaisuuspuhelin, jossa on vähän toimintoja. Tämän seurauksena responsiivinen suunnittelu ei palvele laajempaa yleisöä, kuten sen pitäisi palvella.
Pitkään vallinnut uskomus, jonka mukaan responsiivinen suunnittelu sopii kaikenkokoisille mobiililaitteille, liittyy paljon tähän ongelmaan. Suorituskyvyn tippuessa ja tyytymättömyyden lisääntyessä on katsottava responsiivisen suunnittelun pidemmälle. Sen sijaan pitäisi keskittyä reagoivan suorituskyvyn varmistamiseen. Tämä viesti on sama.
Joten suuri kysymys on, mitä tehdä?
Hylkää pöytäkoneen suunnittelukonsepti
Merkittävä osa tätä jatkuvaa ongelmaa on se, että painopiste on edelleen pöytäkoneen suunnittelussa. Pääpaino on verkkosivuston suunnittelussa pöytäkoneelle ja sitten muille laitteille, kuten älypuhelimille ja tableteille. Mahdollisiin puuttuviin toimintoihin kehittäjät käyttävät runsaasti välilevyjä ja polyfill-levyjä. Tietenkin on olemassa laajoja kirjastoja nopean kehityksen varmistamiseksi. Tämä ei kuitenkaan ratkaise selaimen yhteensopimattomuutta. Onko perusteltua ryhtyä suunnittelukonseptiin, joka ei tuota toivottuja tuloksia?
Ei ole kovin vaikeaa toteuttaa mobiililähtöistä suunnittelua, jossa pyritään tarjoamaan mobiilikäyttäjälle hänen näytöllään vain tarkoitettua tietoa kaikkien laitetta tappavien asioiden sijaan. Luke Wroblewski käsitteli tätä suunnittelulähestymistapaa ensimmäistä kertaa vuonna 2011, ja sen jälkeen monet alan asiantuntijat ovat ylistäneet hänen läpimurtolähestymistapaansa.
Enemmän dataa, vaikka se vie vain sekunnin murto-osan, voi olla huomattava vaikutus kokonaislatausaikaan. On kuitenkin myös totta, että verkkosivuilla on paljon graafista sisältöä, ja yhä useammat ihmiset käyttävät mobiililaitteitaan päästäkseen niihin. Kun käyttäjä kirjoittaa verkkosivuston URL-osoitteen mobiililaitteella, jossa on matalaresoluutioinen näyttö, hänen tavoitteenaan on aina päästä käsiksi verkkosivuston sisältöön, mutta hänen kokemuksensa on painajainen. Tämä johtuu vaikeudesta navigoida loputtomien tarpeettomien mainosten kautta. Poista tällaiset vältettävät sisältöelementit, jotta käyttäjä pääsee pääsisältöön. Tämä lisää sivuston liikennettä, sillä korkealaatuisia älypuhelimia käyttävien käyttäjien lisäksi monet käyttävät verkkosivustoasi matalaresoluutioisten mobiililaitteiden kautta. Vain tekstiversion toimittaminen on täysin järkevää, jos matkapuhelimen ominaisuudet ovat rajalliset, mutta sitten taas saatat sanoa, että käyttökokemus vaarantuu. No, se on, mutta se on silti parempi kuin vastaanottaa sisältöä ollenkaan. Ainakin tällaisessa tapauksessa käyttäjät pääsevät käsiksi sivustosi perustietoihin. Onko mitään järkeä suunnitella verkkosivustoa siten, että se vähentää sen mahdollista kattavuutta?
Hyväksyt varmasti sen tosiasian, että loputon odottaminen vain verkkosivuston tarkistamiseksi ei innosta ketään. Joidenkin Akamain ja Gomez.comin kyselyjen mukaan noin 50 % verkon käyttäjistä odottaa, että verkkosivusto latautuu kahdessa sekunnissa tai jopa vähemmän. Sivuston hylkäämisen mahdollisuus on suurempi, jos verkkosivusto ei lataudu selaimeen vain 3 sekunnissa! Lisäksi useimmilla verkkokauppasivustoilla on nykyään suuri määrä sosiaalisen jakamisen painikkeita, kuten Facebook, Google Plus, Twitter, LinkedIn jne. Tiesitkö, että nämä painikkeet lisäävät responsiiviseen sivustoosi yli 500 kt ja vaikuttavat sen suorituskykyyn? Pelkästään Facebookin tykkäyspainike vaatii 270 kt:n pakatun koodin! Se vaatii myös useita HTTP-pyyntöjä. Sen sijaan,
Verkkosivuston tehokkuudella on suora vaikutus yrityksen suorituskykyyn, ja hidas reagoiva verkkosivusto ei koskaan tee mitään hyvää yritykselle. Usko tai älä, useimmat mobiilikäyttäjät eivät ole kiinnostuneita tutkimaan tai lukemaan pitkiä artikkeleita. Suurin osa heistä käyttää mobiililaitteitaan helpottaakseen Facebookia, WhatsAppia ja Twitteriä sekä nauttiakseen verkkokaupan ilosta. Lisäksi mobiili ei ole enää trendi, se on tulevaisuus.
Comscoren viime vuoden tilastojen mukaan vain mobiili-Internetin käyttäjien määrä Yhdysvalloissa on kasvanut jyrkästi, kun taas pöytätietokoneiden käyttäjien määrä on laskenut 10,6 prosenttiin.
Tarvitseeko muuta sanoa vakuuttaaksesi?
Varmista miellyttävä hajoaminen
Muutaman viime vuoden aikana olet ehkä törmännyt uuteen muotisanaan responsiivisen suunnittelun maailmassa, ja se on ‘siloinen degradaatio’. Kyllä, siro huonontuminen tarkoittaa, että vaikka ominaisuus ei toimisi onnistuneesti, sen pitäisi epäonnistua tavalla, joka mahdollistaa hyväksyttävän käytettävyyden. Tämä tarkoittaa verkkosivuston suunnittelun luomista pöytäkoneelle ja siirtymistä sitten asteittain tablet-tietokoneisiin, älypuhelimiin ja monikäyttöpuhelimiin. Responsiivisen suunnittelun suorituskyky, jossa verkkosivusto heikkenee sulavasti, on varmasti korkea, koska käyttökokemus on täällä aina huippuluokkaa. Sivusto säilyy puutteista huolimatta toimivana ja kävijä on varmasti vaikuttunut yleisestä laadusta.
Nyt sinulla saattaa olla mielessäsi tämä kysymys, että mikä on niin kiehtovaa sirossa huononemisessa. Vastaus on yksinkertainen. Tämä johtuu siitä, että se tekee sisällöstäsi näkyvää ja luettavaa selaimesta riippumatta, mikä on merkittävä saavutus! Onneksi, jos käytät CSS3:a, siro heikentäminen tulee helpoksi, koska suurin osa CSS3:n ominaisuuksista heikkenee automaattisesti eli pyöristetyt kulmat muuttuvat neliömäisiksi, teksti kääritään yhden rivin sijaan, liukuväreistä tulee tasaisia värejä ja paljon muuta.
Otetaan esimerkki hienosta huonontumisesta. Oletetaan, että olet suunnitellut responsiivisen verkkosivuston JavaScript-ominaisuuksilla ja selaimesi ei tue näitä ominaisuuksia tai ne voivat olla poissa käytöstä asiakkaasi puolelta. Joten mitä voit tehdä saadaksesi sisällön? No, tällaisessa tapauksessa siro huonontuminen sallii selaimesi näyttää sisällön "noscript"-tunnisteen sisällä.
Tämän ymmärrät paremmin alla olevan koodauksen avulla:
<noscript>
<h1>Dear John, you have encountered a problem!</h1>
<p>Your browser lacks support for JavaScript or is temporarily disabled.
Visit our <a href="/support/browsers/">browser support</a> for help.</p>
</noscript>Haluaisin jakaa vielä yhden esimerkin hienosta heikkenemisestä, ja se on HTML5:n käyttö YouTubessa videoiden toistamiseen. Oletetaan, että selaimesi ei tue HTML5:tä, video näytetään käyttämällä Flashia, ja jos edes Flashia ei ole asennettu, saat viestin asentaa sama mobiililaitteellesi. Kummassakin tapauksessa voit katsoa videon. Yksi tämän hienon heikkenemisen haittapuoli on kuitenkin se, että vaikka suorituskyky on hyvä, sinun on tehtävä kompromisseja tietyissä suunnitteluelementeissä, jos käytät vanhentuneita selaimia. Luulen, että verkkosivustosi olennaisten visuaalisten elementtien määrittäminen etukäteen voi tehdä tempun.
Käyttämättömiä kirjastoja ei tarvitse säilyttää
Yksi paras käytäntö voi olla käyttämättömien kirjastojen säilyttäminen. Kyllä, on totta, että käytettyjen ja käyttämättömien kirjastojen kirjaaminen on hyvin aikaa vievää, mutta se on todellakin sen arvoista. Joskus olet ehkä huomannut, että käytät vain yhtä toimintoa kirjaston sisällyttämisen jälkeen. Se voi joskus olla jopa kaksi tai kolme. Useimmiten responsiivisen suunnittelun luomiseen käyttämäni työkalu on jQuery. Itse asiassa on olemassa monia jQuery-kirjastoja, jotka auttavat kehittäjiä luomaan reagoivia verkkosivustoja. Useiden kirjastojen, kuten JavaScript-kirjastojen, sisällyttäminen vain siksi, että olet pitänyt joistakin widgeteistä, pidentää sivusi latausaikaa huomattavasti. On kuitenkin hyvä käytäntö analysoida, mitkä kirjastot ovat käytössä ja missä määrin.
Tarkista ominaisuuksien saatavuus
Voit tarkistaa, tukeeko laitteesi tiettyä ominaisuutta vai ei, ennen kuin otat sen käyttöön. Esimerkiksi, vaikka olet asentanut Google Chromen uusimman version vanhentuneeseen Android-puhelimeesi, se ei silti näytä verkkosivustoasi. Joskus yritettäessä ladata tällaista verkkosivustoa selain kaatuu niin pahasti, että koko mobiililaite ei vastaa. Sinun on käynnistettävä laite uudelleen, ja tämä on viimeinen asia, jonka olet halunnut, eikö olekin? Monet tiettyjen verkkosovellusten käyttäjät kärsivät jo tästä ongelmasta.
Ominaisuuksien puuttuminen laitteissa ja silti verkkosivustojen tai sovellusten suunnittelu on johtanut joihinkin havaittaviin ongelmiin, kuten Google Hangout -sovellusten välittömään kaatumiseen Android-laitteissa maailmanlaajuisesti selaimen tyypistä riippumatta. Tämä huolimatta siitä, että sovellus oli kevyt sovellus. Saatat väittää, että käyttäjät käyttivät Android-älypuhelimien vanhempaa versiota, mutta on myös totta, että tällaisia laitteita on edelleen saatavilla hyllyltä aivan uutena missä tahansa mobiilikaupassa. Monet mobiilikäyttäjät kohtaavat saman suorituskykyongelman myös YouTube- ja Twitter-sovelluksen kanssa. Jopa Googlen Android System Webview -palvelun päivitys Google Playn kautta jäädyttää monet älypuhelimet eräänlaiseksi käyttäjien painajaiseksi.
Optimoi kuvat
Visuaalisesti houkuttelevien suurten kuvien sisällyttäminen on aina houkuttelevaa suunnittelijoille. Ongelma syntyy, kun he eivät pakkaa näitä kuvia ennen niiden lataamista sisällönhallintajärjestelmään. Tämä pätee erityisesti useisiin verkkokauppasivustoihin verkossa. Radwaren tuoreen tutkimuksen mukaan sivut kasvavat, ja noin 45 prosenttia 100 suosituimmasta vähittäismyyntisivustosta ei pakkaa kuvia. Tämä tekee tällaisista sivustoista kookkaampia ja sen seurauksena latausaika pitenee, mutta suunnittelijana voit välttää ongelman.
Tee kuvat pienempikokoisina käyttämällä sopivaa kuvanoptimointityökalua. Tällaisista työkaluista ei itse asiassa ole pulaa verkossa. Joitakin merkittäviä, joita voit ottaa käyttöön, ovat Dynamic Drive, Smush it ja Riot. Jos olet Photoshopin ammattilainen, voit myös optimoida kuvan koon itse. Käytä älykästä pakkaustekniikkaa ja poista se kaikista ylimääräisistä metatiedoista. Grafiikan muuntaminen PNG-muotoon, värikkäiden kuvien muuntaminen JPEG-muotoon ja animoitujen GIF-muotoon tekee myös tempun.
Varustettu ääritapauksiin
Kun aloitat suunnittelun, olet varmasti huomannut, että sinulla on houkutus suunnitella sivut, jotka ovat helpompia. Ainakin näin voit näyttää jotain sidosryhmillesi. Tämä voi tuntua hyvältä ensi silmäyksellä, mutta jos keskität voimasi haastavimpiin skenaarioihin, saat hyvän tuloksen.
Esimerkiksi verkkosivu, jolla on artikkeleita, blogeja ja lehdistötiedotteita. Sillä täytyy olla myös otsikko. Mitä nyt tapahtuu, jos otsikkotilassa, jonka olet ajatellut näkyvän "Responsive Web Design Vinkkejä", on otsikko "10 olennaista vinkkiä ja tekniikkaa onnistuneeseen reagoivaan verkkosivustojen suunnitteluun"? Tämä nyt on ääritapaus.
Yllä olevan kaltainen yritys responsiivisen verkkosivustosi suorituskyvyn optimoimiseksi vaikuttaa näkymätöntä. Nämä pyrkimykset tuottavat kuitenkin hyvää tuottoa tyytyväisten ja tyytyväisten käyttäjien kanssa. Voit käyttää erilaisia työkaluja, kuten Pingdom- työkaluja, joiden avulla voit seurata responsiivisen verkkosivustosi latausaikaa vaivattomasti. Älä ohita testauksen tärkeää osa-aluetta varmistaaksesi, että responsiivinen verkkosivustosi toimii tarkoitetulla tavalla. Testaa sitä mahdollisimman monessa todellisessa laitteessa.
Voit myös käyttää resursseja, kuten Screenflyä, jonka avulla voit testata verkkosivustoasi useilla näytön resoluutioilla. Voit väittää, että kaikki nämä strategiat vaativat huomattavan määrän aikaa, mutta sitten taas on hikoiltava lujasti hyötyäkseen. Nykyään responsiivisen ja responsiivisen suorituskyvyn omaavan verkkosivuston luominen on välttämätöntä, sillä Google arvioi sivustoja niiden suorituskyvyn perusteella. Jos olet suunnittelija tai kehittäjä, älä rajoita mitään yllä olevista parhaista käytännöistä. Sinun tulisi etsiä lisää ratkaisuja, ja se voi vaatia kovasti toimimaan responsiivisen verkkosivuston toimittamiseksi.