Responsiivinen web-suunnittelu sovittaa sivustosi automaattisesti mille tahansa näytölle. Opi, mitä responsiivinen suunnittelu on ja miksi se on tärkeää brändillesi.
Avaa jokin sivusto puhelimellasi ja avaa sama sivusto sitten kannettavalla. Ulkoasu on erilainen, eikö olekin? Valikko saattaa siirtyä, kuvat muuttavat kokoaan ja teksti jakautuu uudelleen näytön mukaan. Tämä on responsiivista web-suunnittelua käytännössä. Sivusto ei ole kaksi erillistä versiota. Se on sama sivusto, joka mukautuu käyttämääsi näyttöön.
Yli puolet kaikesta verkkoliikenteestä tulee nykyään puhelimista ja tableteista. Jos sivustosi näyttää hyvältä vain työpöydällä, menetät enemmän kävijöitä kuin saat pidettyä. Responsiivinen suunnittelu ratkaisee tämän varmistamalla, että sivustosi toimii kaikkialla, jokaisella laitteella, ilman erillisiä sivuja eri näyttökooille.
Mitä responsiivinen web-suunnittelu on?
Responsiivinen web-suunnittelu on tapa rakentaa verkkosivustoja niin, että asettelu, kuvat, teksti ja painikkeet mukautuvat automaattisesti näytön kokoon. Kävijä voi käyttää sivustoasi suurella työpöytänäytöllä, tabletilla tai pienellä puhelimen näytöllä, ja sivusto järjestäytyy uudelleen sopivaksi.
Se ei tarkoita, että työpöytäversiota kutistetaan, kunnes se mahtuu puhelimeen. Se tarkoittaa, että sivusto on alusta alkaen suunniteltu toimimaan kaikilla näyttökooilla. Teksti pysyy luettavana ilman zoomausta. Painikkeet pysyvät riittävän suurina napautettaviksi. Kuvat skaalautuvat ilman, että ne leikkautuvat tai venyvät. Sisältö pysyy samana, mutta esitystapa mukautuu niin, että kävijä saa parhaan kokemuksen millä tahansa laitteella.
Miten responsiivinen suunnittelu toimii?
Responsiivinen suunnittelu käyttää joustavia ruudukkoja ja sivuston koodiin rakennettuja sääntöjä. Säännöt kertovat selaimelle: "Jos näyttö on näin leveä, järjestä sisältö näin. Jos näyttö on kapeampi, järjestä se toisin."
Työpöydällä sivustosi voi näyttää kolme saraketta rinnakkain. Tabletilla nuo kolme saraketta voivat muuttua kahdeksi. Puhelimessa ne pinoutuvat yhdeksi sarakkeeksi, jotta kävijä voi vierittää niitä helposti. Sama sisältö näytetään, vain järjestettynä uudelleen käytettävissä olevaan tilaan.
Myös kuvat mukautuvat. Suuri bannerikuva työpöydällä voi pienentyä puhelimessa, jotta se latautuu nopeammin eikä vie koko näyttöä. Navigointivalikot vaihtuvat usein pienemmillä näytöillä kompaktiin muotoon, kuten hampurilaisvalikoksi, jotta tilaa säästyy mutta kävijät pääsevät silti kaikille sivuille.
Miksi sivustosi tarvitsee responsiivista suunnittelua?
Tämä ei ole kiva lisä. Jos sivustosi ei ole responsiivinen, käännytät ihmisiä aktiivisesti pois.
1. Suurin osa kävijöistäsi käyttää puhelinta
Valtaosa internetin selaajista käyttää nykyään mobiililaitetta. Jos sivustosi on vaikealukuinen, hidas latautumaan tai hankala käyttää puhelimella, nämä kävijät lähtevät ja siirtyvät sivustolle, joka toimii heille paremmin.
2. Hakukoneet sijoittavat mobiiliystävälliset sivustot korkeammalle
Hakukoneet katsovat, kuinka hyvin sivustosi toimii mobiililaitteilla, kun ne päättävät sen sijoituksesta. Mobiiliystävällinen sivusto näkyy hakutuloksissa todennäköisemmin kuin sivusto, joka toimii vain työpöydällä. Jos sivustosi ei ole responsiivinen, sijoituksesi voivat laskea.
3. Yksi sivusto kahden sijaan
Ennen responsiivista suunnittelua jotkin yritykset rakensivat sivustostaan erillisen mobiiliversion. Se tarkoitti kahden sivuston ylläpitoa, sisällön päivittämistä kahdessa paikassa ja kahta URL-osoitteiden sarjaa. Responsiivinen suunnittelu poistaa kaiken tämän. Rakennat yhden sivuston, ja se toimii kaikkialla.
4. Se pitää kävijät sivustollasi pidempään
Kun sivustoa on helppo käyttää, ihmiset viipyvät pidempään. He lukevat useampia sivuja, vierittävät pidemmälle ja toimivat todennäköisemmin. Responsiivinen sivusto poistaa kitkan, jota aiheuttavat pieni teksti, päällekkäiset elementit ja liian pienet painikkeet. Kokemus pysyy sujuvana millä laitteella kävijäsi onkaan.
Responsiivinen suunnittelu ja verkkosivuston navigointi kulkevat käsi kädessä. Sivusto, joka mukautuu jokaiseen näyttöön, tarvitsee silti selkeät valikot ja linkit, jotta kävijät tietävät minne mennä. Jos haluat oppia rakentamaan valikoita, jotka toimivat hyvin eri laitteilla, lue miten verkkosivuston valikko rakennetaan. Ja jos mietit myös, miten pidät sivustosi saavutettavana kaikille, lue miten rakennat kaikille saavutettavan verkkosivuston.
Usein kysytyt kysymykset
Miten testaat, onko sivustosi responsiivinen?
Yksinkertaisin tapa on avata sivustosi puhelimella, tabletilla ja kannettavalla ja katsoa, miltä se näyttää kullakin. Voit myös muuttaa selainikkunan kokoa työpöydällä ja seurata, miten asettelu mukautuu. Tarkempaa tarkistusta varten selaimen kehittäjätyökaluissa on laitteiden esikatselutila, jolla voit simuloida eri näyttökokoja ilman useita laitteita. Seuraa mobiilikävijöiden käyttäytymistä käyttämällä apuna tärkeimpiä mittareita verkkosivuston suorituskyvyn seurantaan.
Mitä eroa on mobile-first-suunnittelulla ja responsiivisella suunnittelulla?
Responsiivinen suunnittelu tarkoittaa, että sivusto mukautuu mihin tahansa näyttökokoon. Mobile-first-suunnittelu on lähestymistapa, jossa suunnittelet ensin pienimmälle näytölle ja skaalaat sitten suuremmille. Mobile-first on strategia responsiivisen suunnittelun sisällä. Molemmat tuottavat sivuston, joka toimii eri laitteilla, mutta mobile-first asettaa puhelinkokemuksen etusijalle alusta alkaen.
Vaikuttaako responsiivinen suunnittelu SEO-sijoituksiisi?
Kyllä. Hakukoneet käyttävät mobiiliystävällisyyttä sijoitustekijänä. Jos sivustosi ei toimi hyvin mobiililaitteilla, se voi sijoittua hakutuloksissa alemmas. Responsiivinen sivusto, joka latautuu oikein kaikilla näyttökooilla, voi sijoittua korkeammalle. Lue lisää siitä, miten nopeus ja suorituskyky liittyvät sijoituksiin: mitä verkkosivuston nopeus on ja miksi sillä on väliä.
Mitkä ovat yleisimmät responsiivisen suunnittelun virheet?
Kiinteän leveyden asettelujen käyttö, jotka eivät mukaudu, liian pienet painikkeet puhelimella, tärkeän sisällön piilottaminen mobiilissa ja testaamatta jättäminen oikeilla laitteilla. Toinen yleinen virhe on tarkistaa sivuston ulkoasu vain yhdellä puhelinmallilla sen sijaan, että testaisi useita näyttökokoja. Myös huono navigointi mobiilissa on usein ongelma: valikot menevät päällekkäin tai linkit ovat liian lähellä toisiaan.
Tarvitsetko erillisen mobiilisivuston, jos sivustosi on responsiivinen?
Et. Se on koko responsiivisen suunnittelun idea. Yksi sivusto toimii jokaisella laitteella. Erillisen mobiilisivuston rakentaminen tarkoittaa kaksinkertaista ylläpitoa, kaksinkertaisia sisältöpäivityksiä ja kahta eri URL-osoitetta. Responsiivinen suunnittelu poistaa kaiken tämän. WEMASYn mallipohjat on rakennettu responsiivisiksi alusta alkaen, joten sivustosi näyttää oikealta jokaisella näytöllä ilman lisätyötä.
Voiko vanhan sivuston tehdä responsiiviseksi ilman uudelleenrakentamista?
Se riippuu siitä, miten sivusto on rakennettu. Joitakin vanhempia sivustoja voi päivittää responsiivisilla koodimuutoksilla. Toiset on rakennettu jäykille rakenteille, joiden vuoksi on helpompaa aloittaa alusta responsiivisella mallipohjalla. Jos nykyinen sivustosi ei ole mobiiliystävällinen ja ulkoasu tuntuu vanhentuneelta, uudelleenrakentaminen nykyaikaisella sivustorakentimella on usein nopeampaa ja antaa parempia tuloksia kuin vanhan ulkoasun paikkaaminen.