Avaat oman sivustosi puhelimella. Teksti on luettavaa, valikko sulkeutuu siististi ja kuvat muuttavat kokoaan työntämättä mitään näytön ulkopuolelle. Näin responsiivinen verkkosivusto toimii oikein. Kun se ei toimi näin, kävijät lähtevät ennen kuin ehtivät lukea sanaakaan.
Sivustollasi on yksi sisältö ja yksi koodi. Responsiivinen verkkosivusto on lähestymistapa, jossa tämä yksi koodipohja palvelee jokaista kävijää oikein, olipa hän laajakuvanäytöllä tai pystyasennossa pidettävällä puhelimella. Erillisen mobiiliversion rakentamisen sijaan responsiivinen sivusto mukauttaa asettelun, kuvat ja navigoinnin automaattisesti käytössä olevan näytön mukaan.
Sivusto, joka näyttää oikealta vain työpöydällä, pettää suurimman osan kävijöistään jo ennen kuin he ehtivät lukea mitään. Useimmille yrittäjille responsiivisuus ei ole pohdittava päätös. Se on perusodotus, joka tarkistetaan ennen julkaisua.
Miten responsiivinen suunnittelu toimii?
Responsiivinen verkkosivusto käyttää CSS-sääntöjä, joita kutsutaan media queryiksi, tunnistaakseen kävijän käyttämän näytön koon. Sen perusteella asettelu mukautuu. Työpöydällä kolmisarakkeinen osio voi muuttua mobiilissa yhdeksi sarakkeeksi. Vaakasuuntainen navigointivalikko voi tiivistyä painikkeeksi. Kuvat muuttavat kokoaan käytettävissä olevaan leveyteen ylittämättä säiliöidensä rajoja.
Keskeinen periaate on, että sisältö pysyy samana. Muuttuu se, miten sisältö järjestetään ja esitetään. Responsiivinen sivusto ei ole eri sivusto mobiilikäyttäjille. Se on sama sivusto, mukautettuna toiselle näytölle.
Tarkemman teknisen selityksen löydät artikkelista mitä responsiivinen suunnittelu on jossa käydään läpi mekaniikka yksityiskohtaisesti, myös se, miten joustavat ruudukot ja kuvat toimivat eri laitekooilla.
Mitä eroa on responsiivisella suunnittelulla ja pelkällä mobiilisivustolla?
Ennen kuin responsiivisesta suunnittelusta tuli standardi, monet yritykset rakensivat sivustostaan erillisen mobiiliversion, usein eri URL-osoitteeseen. Puhelimella saapuva kävijä ohjattiin mobiiliversioon. Työpöydällä saapuva kävijä näki pääsivuston.
Tämä tapa loi kaksi erillistä ylläpidettävää kokonaisuutta. Toiseen tehdyt muutokset eivät siirtyneet automaattisesti toiseen. Sisällöt menivät epätahtiin. Mobiiliversiossa oli usein vähemmän toimintoja tai vähemmän sisältöä. Kahden koodipohjan hallinta kaksinkertaisti vaivan mutta ei tulosta.
Responsiivinen suunnittelu korvasi tämän tekemällä yhdestä sivustosta kaikkialla toimivan. Yksi URL, yksi sisältö, yksi koodipohja, mukautettuna kaikille näyttökooille. Se on yksinkertaisempi rakentaa, yksinkertaisempi ylläpitää ja parempi hakukoneille, jotka suosivat yhtä arvovaltaista URL-osoitetta kullekin sisällölle.
Mikä muuttuu työpöydän ja mobiilin välillä responsiivisella sivustolla?
Muutokset työpöydän ja mobiilin välillä ovat laajempia kuin useimmat aluksi ymmärtävät.
Asettelun sarakkeet tiivistyvät. Osio, jossa on neljä tuotekorttia vierekkäin työpöydällä, muuttuu mobiilissa vieritettäväksi pinoksi. Navigointivalikot muuttavat muotoaan. Vaakavalikoista tulee kokoontaitettavia paneeleja tai sivulta liukuvia valikkoja. Fonttikoot mukautuvat, jotta teksti pysyy luettavana ilman zoomausta. Painikkeet kasvavat, jotta ne on helpompi napauttaa sormella kuin klikata hiirellä.
Kuvat muuttavat kokoaan täyttääkseen säiliönsä ylittämättä niitä. Taustakuvat voidaan rajata eri tavalla toimimaan pystysuuntaisissa kuvasuhteissa. Lomakkeet säätävät kenttien kokoa ja välejä, jotta niitä voi käyttää mobiilinäppäimistöllä.
Hyvin toteutetun responsiivisen suunnittelun koe ei ole vain se, ettei se hajoa mobiilissa. Se on se, että kokemus mobiilissa tuntuu harkitulta eikä puristetulta.
Miten responsiivinen suunnittelu liittyy sivun nopeuteen?
Responsiivinen suunnittelu ja sivun nopeus liittyvät läheisesti toisiinsa. Responsiivinen sivusto, joka tarjoaa mobiilikävijöille täysikokoisia työpöytäkuvia, on teknisesti responsiivinen mutta käytännössä hidas. Mobiiliverkossa olevat kävijät lataavat kuvia, jotka ovat paljon suurempia kuin heidän näyttönsä pystyy näyttämään.
Hyvin toteutettu responsiivinen suunnittelu hoitaa tämän tarjoamalla jokaiselle laitteelle sopivankokoiset kuvat, pakkaamalla aineistot mobiiliyhteyksille ja lykkäämällä ei-välttämättömien elementtien latausta, jotka hidastavat ensilatausta. Tavoite ei ole pelkkä asettelun mukautuminen. Tavoite on nopea ja sujuva kokemus laitteesta tai yhteyden nopeudesta riippumatta.
Artikkeli mitä verkkosivuston nopeus on kertoo, miten latautumisen suorituskyky vaikuttaa käyttökokemukseen ja hakusijoituksiin ja mistä johtuu, että sivustot toimivat tarpeettoman hitaasti.
Mitä kannattaa tarkistaa arvioidessasi mallipohjan responsiivisuutta?
Kaikki responsiivisiksi merkityt mallipohjat eivät ole yhtä hyvin suunniteltuja mobiilille. Arvioidessasi mallipohjaa kannattaa tarkistaa muutama asia ennen kuin sitoudut.
Avaa mallipohjan demo puhelimellasi, älä vain työpöydän esikatselua. Selaa jokainen osio läpi. Tarkista, että valikko aukeaa siististi ja kaikki linkit ovat tavoitettavissa. Tarkista, että teksti on luettavaa ilman zoomausta. Tarkista, että toimintakehotepainikkeet ovat riittävän suuria napautettaviksi mukavasti. Tarkista, että kuvat näkyvät oikein eivätkä työnnä sisältöä näytön ulkopuolelle.
Kiinnitä huomiota mobiilin väleihin. Osiot, jotka näyttävät ilmavilta työpöydällä, voivat tuntua ahtailta, kun sarakkeet tiivistyvät pienellä näytöllä. Tarkista, että sisältöosioissa on riittävästi täyttöä, jotta teksti ei kulje reunasta reunaan. Artikkeli miten valitset verkkosivuston mallipohjan käsittelee mobiilitestausta osana mallipohjan koko arviointiprosessia.
Mistä tunnistat, ettei verkkosivusto ole kunnolla responsiivinen?
Jotkin responsiivisuuden puutteet ovat ilmeisiä. Toiset ovat niin hienovaraisia, ettet välttämättä huomaa niitä ennen kuin asiakas mainitsee niistä.
Yleisiä merkkejä siitä, ettei sivusto ole kunnolla responsiivinen, ovat teksti, jota joutuu lukemaan vierittämällä vaakasuunnassa, kuvat, jotka ylittävät säiliönsä ja leikkautuvat reunoilta, navigointivalikot, joita ei voi käyttää ilman kursoria, painikkeet, jotka ovat liian pieniä napautettaviksi luotettavasti, ja lomakkeet, joissa syöttökentät eivät mukaudu oikein mobiilinäppäimistölle.
Vähemmän ilmeisiä merkkejä ovat asettelu, joka teknisesti mahtuu mobiiliin mutta näyttää työpöytäsivustolta, joka on puristettu kapeaan sarakkeeseen. Osiot, joissa on liikaa sarakkeita ja jotka tiivistyvät sekavaan järjestykseen. Ylä- ja alatunnisteet, jotka käyttäytyvät mobiilissa eri tavalla, jota alkuperäisessä suunnittelussa ei ole huomioitu.
Vakiotarkistus on käydä jokainen sivu läpi oikealla puhelimella. Selainesikatselut ovat hyödyllisiä kehityksen aikana, mutta eivät täysin vastaa kosketuslaitteen kokemusta.
Miten responsiivinen suunnittelu vaikuttaa hakusijoituksiin?
Hakukoneet käyttävät sivustosi mobiiliversiota ensisijaisena versiona indeksoinnissa ja sijoittamisessa. Sivusto, joka toimii hyvin mobiilissa ja latautuu nopeasti puhelimella, pärjää yleensä hakutuloksissa paremmin kuin ensisijaisesti työpöydälle rakennettu.
Indeksointieron lisäksi huonosti responsiivinen sivusto lähettää kielteisiä signaaleja. Mobiilikävijöiden korkea poistumisprosentti, hitaat latausajat mobiiliverkossa ja vaikealukuinen sisältö laskevat kaikki suorituskykyä ajan myötä. Kävijät, jotka lähtevät heti, koska sivusto ei toimi heidän puhelimellaan, kertovat hakukoneille, ettei sivu palvellut heitä.
Kattavan kuvan hakukoneoptimoinnin toiminnasta ja siitä, mitkä tekniset tekijät ovat tärkeimpiä, saat artikkelista mitä SEO on joka käsittelee aihetta kokonaisuudessaan.
Miten WEMASY hoitaa responsiivisen suunnittelun
Jokainen WEMASYn sivustorakentimen mallipohja on rakennettu responsiiviseksi työpöydälle, tabletille ja mobiiliin. Visuaalisessa editorissa on mobiiliesikatselu työpöytänäkymän rinnalla, joten näet rakentaessasi, miten osiot käyttäytyvät eri näyttökooilla. Suorituskyky ja mobiiliresponsiivisuus hoituvat alustalla ilman käsin tehtäviä määrityksiä.
Katso, mitä kuuluu mukaan, osoitteesta WEMASYn sivustonrakentaja tai tutustu vaihtoehtoihin hintasivulla.
Usein kysytyt kysymykset
Onko sivustoni automaattisesti responsiivinen, jos käytän sivustonrakentajaa?
Useimmat nykyaikaiset sivustorakentimet käyttävät oletuksena responsiivisia mallipohjia. Jos valitsit mallipohjan ajantasaisesta sivustorakentimesta, se on todennäköisesti responsiivinen. Tärkeintä ei ole se, onko mallipohja merkitty responsiiviseksi, vaan se, toimiiko se hyvin puhelimella. Käy sivustosi läpi oikealla mobiililaitteella ja testaa navigointi, kuvat, tekstikoko ja lomakkeet ennen kuin oletat kaiken toimivan oikein. WEMASYn sivustorakentimellavoit toteuttaa tämän suoraan omalla sivustollasi.
Voiko vanhemman sivuston tehdä responsiiviseksi ilman uudelleenrakentamista?
Se riippuu siitä, miten alkuperäinen sivusto on rakennettu. Nykyaikaisilla sivustorakentimilla rakennettujen sivustojen mobiilikokemusta voi usein parantaa säätämällä mallipohjan asetuksia tai vaihtamalla parempaan mallipohjaan. Alusta asti koodatut tai vanhemmille alustoille rakennetut sivustot voivat vaatia merkittävää uudelleentyöstöä. Monessa tapauksessa uudelleenrakentaminen nykyaikaisella alustalla on nopeampaa ja tuottaa paremman tuloksen kuin responsiivisuuden jälkiasennus vanhaan koodipohjaan.
Vaikuttaako responsiivinen suunnittelu sivustoni latausnopeuteen?
Responsiivinen suunnittelu ei sinänsä hidasta sivustoa. Sen toteutustapa voi hidastaa. Sivusto, joka tarjoaa mobiilikävijöille täysikokoisia työpöytäkuvia mobiiliverkossa, latautuu hitaasti, vaikka asettelu mukautuisi oikein. Hyvin toteutettuun responsiiviseen suunnitteluun kuuluvat mobiilille sopivat kuvakoot, pakatut aineistot ja ei-välttämättömien elementtien viivästetty lataus. Asettelun mukautuminen näyttöön on vain osa täydellistä mobiilikokemusta.
Mitä on mobile-first-suunnittelu?
Mobile-first-suunnittelu on lähestymistapa, jossa sivuston mobiiliversio suunnitellaan ja rakennetaan ennen työpöytäversiota, eikä päinvastoin. Se lähtee rajoitetuimmasta ympäristöstä ja laajenee ulospäin. Mobiilin ensin suunnittelu pakottaa selkeämpiin prioriteetteihin. Kun tilaa on vähän, vain tärkein sisältö ja toiminnot säilyvät. Työpöytäversiolla on sitten tilaa rakentaa tämän perustan päälle.
Miten tarkistan, onko sivustoni mobiiliystävällinen?
Käy jokainen sivu läpi oikealla puhelimella. Testaa navigointi, kuvat, tekstikoko, lomakkeet ja painikkeet. Hakukoneet tarjoavat myös ilmaisia mobiilitestityökaluja, joihin syötät URL-osoitteesi ja jotka ilmoittavat tietyistä ongelmista, kuten liian pienestä tekstistä tai liian lähellä toisiaan olevista klikattavista elementeistä. Käsin tehty läpikäynti ja työkalupohjainen tarkistus yhdessä paljastavat tärkeimmät ongelmat.