Onko sinulla " reagoiva sivusto "? Tämä on sivusto, jonka ulkoasu muuttuu vierailijalaitteen ja näytön koon mukaan. Responsive web design on nyt alan parhaita käytäntöjä. Googlen suosittelee, että se löytyy miljoonista sivustoista verkossa. Suuri ero on kuitenkin siitä, että verkkosivut, jotka yksinkertaisesti "sopivat" eri näytön koot ja joilla on todella reagoiva sivusto.
Olen rutiininomaisesti katsonut, että yritykset uudistavat verkkosivustonsa ja työntävät lehdistötiedotteensa, jotka esittelevät uuden mobiiliystävällisen muotoilunsa hyveitä. Kun vierailen kyseisissä sivustoissa, löydän usein sellaisen ulkoasun, joka todellakin skaalautuu ja muuttuu eri näytöille sopivaksi, mutta siltä osin kuin ne ottavat ajatuksen reagoinnista. Tämä ei riitä. Todella reagoiva verkkosivusto on enemmän kuin pelkkä skaalaus, joka sopii pienempään tai isompaan näyttöön. Näillä sivustoilla on myös seuraavat tärkeät piirteet.
1. Optimoitu suorituskyky
Kukaan ei halua odottaa verkkosivuston lataamista ja kun joku käyttää mobiililaitetta, jolla on yhteys, joka saattaa olla vähemmän kuin ihanteellinen, tarve ladata sivuston nopeasti on vielä tärkeämpää.
Miten voit siis optimoida sivustosi tehokkuuden? Jos aloitat uuden sivuston uudelleensuunnittelun osana, sinun on luotava tehokkuusbudjetti osana projektia. Jos työskentelet olemassa olevan sivuston kanssa, eivätkä aloita tyhjästä, ensimmäinen askel on testata sivustosi tehokkuutta nähdäksesi, missä olet tänään.
Kun sinulla on perusviiva, jossa sivustosi on suorituskykyinen, voit aloittaa tarvittavat parannukset latausnopeuden lisäämiseksi. Hyvä paikka aloittaa luultavasti sivustosi kuvat. Liian suuret kuvat ovat # 1 syyllistyneenä hitaisiin lastauspaikkoihin, joten optimointi kuvien lähettämiseen web-toimitukselle voi todella auttaa sivustossasi suorituskyvyn näkökulmasta.
Tosiasia on, että parannettu verkkosivuston suorituskyky ja nopeat latausnopeudet ovat hyötyä, jota kaikki kävijät arvostavat. Loppujen lopuksi kukaan ei ole koskaan valittanut, että sivusto latautuu "liian nopeasti", mutta jos sivusto kestää liian kauan latautumista, se karkottaa ihmiset kokonaan, onko se reagoiva "sopivaksi" ruudulla vai ei.
2. Smart Content Hierarchy
Kun verkkosivusto näkyy suurella näytöllä, voit asettaa sisältöä monin eri tavoin, koska saatavilla on huomattava määrä kiinteistöjä. Voit usein sovittaa tärkeät viestit ja kuvat, uutiset, tapahtumatiedot ja sivuston navigoinnin heti näytöllä. Näin kävijä voi helposti ja nopeasti skannata koko sivun sisällön ja päättää, mikä on heille tärkeä.
Tämä skenaario muuttuu melko dramaattisesti, kun otat kyseisen sivuston suunnittelun ja muunnat sen pienille näyttölaitteille, kuten matkapuhelimelle. Yhtäkkiä työskentelet murto-osaa näytön kiinteistöä sinulla oli ennen. Tämä tarkoittaa sitä, että sinun on päätettävä, mikä tulee näkyviin ensimmäisellä sivustolla, mitä seuraa sitä jne. Sen sijaan, että kaikki näkyy kerralla, sinulla on todennäköisesti vain yksi tai kaksi asiaa (joista yksi todennäköisesti on navigointi). Tämä tarkoittaa, että hierarkian päätöksiä on tehtävä. Valitettavasti se, mikä usein määrää, mitä tulee ensin näytölle, ja sitten toinen, jne. On tapa, jolla sivu on itse koodattu. On helpointa, kun rakennat reagoivaa sivustoa, näyttämään mitä tahansa ensimmäistä koodia ensin näytöllä, jota seuraa koodin toinen kohde ja niin edelleen. Valitettavasti mikä saattaa olla tärkeintä yhdelle laitteelle, se ei välttämättä ole yhtä kriittinen toisessa. Todella reagoiva sivusto ymmärtää, että sisällön hierarkia muuttuu erilaisten tilanteiden mukaan ja sen pitäisi olla älykäs siitä, mitä se näyttää missä.
CSS-ulkoasutekniikan parannukset, mukaan lukien CSS-ruudukkoasetukset, Flexbox ja paljon muuta, antavat web-suunnittelijoille ja kehittäjille lisää vaihtoehtoja sisältöä älykkäästi, eikä HTML-koodin sisältöalueiden tarkkaa järjestystä. Näiden uusien mallintatekniikoiden hyödyntäminen tulee entistäkin tärkeämmäksi, kun laitteen maisema ja sivuston käyttäjien tarpeet kehittyvät edelleen.
3. Kokemukset, joissa otetaan huomioon laitteen vahvuudet ja heikkoudet
Laitteiden aiheen pysyminen - jokainen laite, jolla joku voi käyttää sivustoosi, on sekä kyseiselle alustalle ominaisia vahvuuksia että heikkouksia. Suuri vastaava sivusto ymmärtää eri laitteiden ominaisuudet ja rajoitteet ja käyttää niitä luomaan räätälöityjä kokemuksia, jotka sopivat parhaiten mihin tahansa laitteeseen, jonka kävijä voi käyttää tällä hetkellä.
Esimerkiksi matkapuhelin sisältää useita ominaisuuksia, joita et löydä perinteiseltä pöytätietokoneelta. GPS on yksi esimerkki mobiilikeskeisestä ominaisuudesta (kyllä, saat yleiset sijaintitiedot myös työasemilta, mutta GPS-laite on paljon tarkempi). Sivustosi voi käyttää GPS-tietoja älykkäästi lähettämään henkilölle yksityiskohtaiset ja tarkat vaiheittaiset ohjeet tai erikoistarjoukset, jotka perustuvat juuri siihen, missä he ovat tällä hetkellä.
Toinen esimerkki tästä periaatteesta käytännössä olisi sivusto, joka ymmärtää, millainen näytönäyttö käytät ja lähettää kuvia, jotka sopivat parhaiten tähän näyttöön. Jos sinulla on korkea pikselitiheys, voit päättää lähettää korkealaatuisia kuvia kyseiselle näytölle. Nämä samat kuvat olisivat hyödyttömiä vähemmän helppokäyttöisessä näytössä, mutta ylimääräinen laatu menetettäisiin, kun ylimääräinen tiedostoko ladataan ilman todellista syytä.
Todella loistavat reagoivat sivustot pitävät koko käyttökokemusta ja pyrkivät räätälöimään tämän kokemuksen perustuen paitsi laitteiden tyypin tai näytön koon lisäksi myös muihin laitteiston tärkeisiin näkökohtiin.
4. Sisältö kontekstilla
Alun perin reagoiva web-suunnittelu sai nimensä johtuen siitä, että sivuston ulkoasu vastaa eri ruudun kokoja, mutta voit vastata niin paljon enemmän kuin pelkkä näytön koko. Edellisen esimerkin avulla, jossa käytetään laitteen vahvuuksia ja heikkouksia, voit käyttää niitä sekä muita tietoja, kuten päivämäärää ja aikaa, todella mukauttaa sivustokokemusta.
Kuvittele verkkosivusto suuresta näyttelytapahtumasta. Vaikka reagoiva verkkosivusto muuttaisi sivuston sivujen sijoittelua erilaisten näyttöjen skaalaamiseksi, voit myös käyttää päivämäärää sen määrittämiseksi, mikä sisältö on tärkein. Jos se on aika ennen tapahtumaa, sinun on todennäköisesti näkyvästi esitettävä rekisteröintitiedot. Jos tapahtuma kuitenkin tapahtuu tosiasiallisesti, rekisteröinti ei välttämättä ole tärkein sisältö. Sen sijaan voit päättää, että tapahtumien aikataulu on kriittisempi, koska se on merkityksellisempi kyseisen käyttäjän välittömien tarpeiden kannalta.
Kun otat asioita eteenpäin, voit napauttaa laitteen GPS: ää selvittääksesi, missä ne ovat tosiasiallisesti messuosassa. Voit antaa heille vuorovaikutteista sisältöä niiden sijaintipaikan perusteella, näyttäen heille läheisiä koteja tai istuntoja, joiden avulla pääset alkuun.
5. Esteettömyys
Viimeinen esimerkki, jossa tarkastelemme sitä, miten sivusto todella pystyy vastaamaan kävijöiden tarpeisiin, on ajatella verkkosivujen saavutettavuutta . Verkkosivujen on oltava mahdollisimman monen käytettävissä, mukaan lukien vammaiset. Verkkosivustosi on voitava käyttää joku, joka tarvitsee näytönlukijan tai muun avustetun ohjelmiston sisällön käyttämiseen. Tällä tavoin sivustosi vastaa heidän tarpeisiinsa, koska olet varmistanut, että työkokemus vammaisille vierailijoille on edelleen sopiva.
Vastaamalla mahdollisimman moniin datapisteisiin, ei pelkästään näytön kokoon, verkkosivusto voi olla paljon muutakin kuin vain "mobiiliystävällinen". Se voi olla todella reagoiva kokemus jokaisen ilmauksen mielessä.