Opas reagoivaan web-suunnitteluun ja parhaisiin käytäntöihin

Opi reagoivasta verkkosuunnittelusta ja siitä, kuinka hyödyntää parhaita käytäntöjä saadaksesi kaiken irti verkkoliiketoiminnassasi.


Suunnittelu reagoivaan web-suunnitteluun

Yhä useammat ihmiset selaavat nyt verkkoa mobiililaitteilla kuin pöytätietokoneilla tai kannettavilla tietokoneilla. Noin 51% verkkosivustojen liikenteestä tulee nyt joku mobiililaitteesta. Jos matkapuhelimella on niin suuri määrä, on ratkaisevan tärkeää, että verkkoyritykset varmistavat, että heidän verkkosivustossaan käytetään reagoivaa verkkosuunnittelua (RWD) ja että ne ovat ajan tasalla uusimpien RWD-parhaiden käytäntöjen suhteen.

Mikä on reagoiva web-suunnittelu?

Yksinkertaisesti sanottuna RWD koostuu suunnittelusta yksi verkkosivusto joka mukautuu sujuvasti mihin tahansa näytön kokoon – olipa se sitten viimeisin 272 pikselin leveä Apple Watch tai plasmatelevisio, joiden välissä ovat tavalliset tietokoneet, tabletit ja mobiililaitteet.

Esimerkki reagoivasta web-suunnittelusta

Jotta voimme selittää tarkemmin, alla sopiva esimerkki reagoivasta web-suunnittelusta Omena verkkosivusto. Alla on vertailu verkkosivuston pöytätietokoneiden ja älypuhelinten näkymistä:

RWD-vertailu työpöydän ja älypuhelimen kuvakaappauksesta

Sisältö on sama molemmissa näkymissä, mutta ulkoasu ja käyttöliittymän suunnittelu ovat erilaisia. Älypuhelimen näytönäkymässä verkkosivun osiot on pinottu pinottamaan pystysuuntaista vieritystä ja navigointivalikko on sijoitettu pois nyt tutun hampurilainen-kuvakkeen taakse. Sivun alaosassa olevat napsautettavat linkit ovat myös riittävän leveitä ja korkeita sormien kosketus eleiden toteuttamiseksi.

RWD: n ytimessä on syvä huolenaihe verkkokäyttäjäkokemus. Suurin osa ihmisistä käy tänään verkkosivustossasi eri paikoista monien erilaisten laitteiden avulla – työpöydällä olevalla tietokoneella, älypuhelimella, kun he ovat metrolla, ja tablet-laitteella nukkumaan mennessä. Käyttäjät odottavat sen toimivan riippumatta siitä, mitä laitetta he käyttävät verkkosivustollasi olevana ajankohtana. RWD: n oikea käyttö tarkoittaa, että käyttökokemus verkkosivustollasi on jatkuvaa ja miellyttävää riippumatta siitä, minkä laitteen käyttäjät ovat.

Responsiivisen web-suunnittelun hyödyntäminen kaikissa mahdollisuuksissa

Vaikka sellaisen verkkosivuston suunnittelu, joka näyttää hyvältä kaikissa näyttöruuduissa, on suuri askel oikeaan suuntaan, on tärkeää, ettet pysähdy siihen. Jotta yrityksesi voi hyödyntää RWD: tä täysimääräisesti, sinun on sijoitettava RWD kattavampaan strategiaan usean laitteen asiakas sen keskellä. Tämä tarkoittaa:

  • Älä tarjoa mobiililaitteiden käyttäjille poistettua versiota työpöydän verkkosivustolta, jos heidän käyttöoikeus on rajoitettu. Vinkki: seuraa mobiililaitteiden käyttäjien toimia verkkosivustollasi. Jos huomaat, että käyttäjät laskeutuvat sivustollesi, mutta tuskin kuluttavat sisältöäsi tai eivät viettävät aikaa siihen, on todennäköistä, että he törmäävät jonkinlaiseen esteeseen.
  • Älä huolehdi mobiilikäyttäjästä täsmälleen samalla tavalla kuin pöytätietokoneen käyttäjä. Hyödynnä täysimääräisesti matkaviestimen tarjoamat potentiaalit. Jos omistat esimerkiksi ravintolan, tee matkaviestinasiakkaille erittäin helppo löytää yrityksesi tai tehdä varaus hyödyntämällä tekniikoiden, kuten HTML5-paikannus ja puhelinnumerotulot verkkosivustollasi.
  • Ole tietoinen sivun nopeus. Tutkimuksen mukaan Nielsen Norman -konserni, johtavien käyttökokemuksen konsulttien, 47% kävijöistä odottaa verkkosivuston latautuvan alle 2 sekunnissa ja 40% kävijöistä poistuu verkkosivustolta, jos latausprosessi kestää yli 3 sekuntia. Tämä on entistäkin tärkeämpää matkapuhelimen käyttäjille, jotka ovat liikkeellä ja joilla on usein kaistanleveysrajoituksia.
  • Ole tietoinen toistamaton sisältö. Jotkut tekniikat, kuten Flash-soittimet, eivät saa laajaa tukea mobiililaitteissa. Siksi on suositeltavaa, että et käytä niitä verkkosivustollasi ja vältä linkittämästä niihin sivuillasi. HTML5-video ja ääni ovat varmasti paljon parempi vaihtoehto verrattuna patentoituihin tekniikoihin. On myös hyvä idea lisätä videosisältösi kopio. Itse asiassa monet käyttäjät voivat mieluummin kirjoitettua sisältöä kuin video tai ääni, jotkut avustavat tekniikat voivat toimia vain kirjoitetussa materiaalissa, ja Google voi hankkia paremmin tietoja videosi tai äänisisällöstäsi.
  • Vältä käyttöä valintaikkunat ja ponnahdusikkunat jotka estävät käyttäjiä näkemästä tai toimimasta sisältöäsi. Näitä on joskus vaikea sulkea myös mobiililaitteissa, joissa näytön kiinteistöjen määrä on rajoitettu, mikä turhauttaa asiakkaitasi.
  • Maksaa huomiota kosketukseen! Jos verkkosivustosi luottaa piilotetun sisällön hiiren siirtämistapahtumiin, tämä toiminto ei toimi mobiililaitteissa. Mobiililaitteet eivät toimi hiirellä. Sen sijaan käyttäjät ovat vuorovaikutuksessa sisällön kanssa kosketus eleillä, kuten napauttamalla ja pyyhkäisemällä. Siksi voit paljastaa piilotetun sisällön napsauttamalla hiiren sijaan. Varmista myös, että verkkosivustosi suunnittelussa otetaan huomioon se, että sormenpäät ovat suurempia kuin hiiren osoitin, antamalla riittävästi tilaa olla vuorovaikutuksessa sivusi linkkien kanssa mukavasti ja sujuvasti.

RWD-sivuston edut

Ensinnäkin, Google suosittaa nimenomaisesti RWD-lähestymistapaa mobiiliystävälliselle verkkosivustolle. Muita RWD-etuja ovat:

  • Yksi URL-osoite helpottaa käyttäjien jakamista ja linkittämistä sisältöön.
  • Yhden verkkosivuston ylläpito on kustannustehokkaampaa kuin usean sivun ylläpitäminen samalle sisällölle;
  • Uudelleenohjaukset mobiilisivustoon vaikuttavat mobiililaitteen käyttäjien sivun latausnopeuteen. Lisäksi selaimen havaitsemiseen perustuva uudelleenohjaus on alttiina virheille, jotka voivat heikentää verkkosivustosi käyttäjäkokemusta. RWD: n käyttöönotto ratkaisee nämä ongelmat yksinkertaisesti siksi, että käyttäessäsi samaa verkkosivustoa sekä työpöytä- että mobiililaitteiden näkymissä, sinun ei tarvitse ohjata käyttäjiä mobiililaitteille tarkoitetulle verkkosivustolle.
  • Eri laitteiden nopeasti muuttuvassa maisemassa on melkein mahdotonta luoda ja päivittää samasta verkkosivustosta useita versioita, jotka on räätälöity kunkin näytön koon ja ominaisuuksien mukaan.

Onko verkkosivustosi reagoiva? Testaa se!

Käytä Google mobiiliystävällinen testi nopeasti testata onko verkkosivustosi reagoiva. Kopioi vain & liitä verkkosivustosi URL-osoite tekstikenttään ja tarkista tulos.

johtopäätös

Jotta verkkosivustosi voidaan varustaa paremmin usean laitteen ekosysteemille, reagoiva web-suunnittelu on välttämätön. Pelkästään itse julistetun reagoivan teeman asentaminen ei kuitenkaan riitä varmistamaan, että verkkosivustosi toimii hyvin ja pitää asiakkaasi tyytyväisinä. Sinun on sisällytettävä RWD online-liiketoimintastrategiaasi useiden laitteiden kuluttajan kanssa. Näin tekemällä on paljon, jotta verkkoyrityksestä tulee suosikki asiakkaidesi ja Googlen keskuudessa.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map