Yli 60 prosenttia kaikesta verkkoliikenteestä tulee nykyään mobiililaitteista. Sivusto, joka ei ole mobiiliystävällinen, pettää suurimman osan vierailijoistaan, eikä kyse ole pienestä poikkeustapauksesta. Mobiilin hallinta ei ole bonusominaisuus. Se on perustaso, jonka yrityssivustolta odotetaan täyttävän.
Verkkosivuston tekeminen mobiiliystävälliseksi tarkoittaa, että mobiilikävijät saavat saman laadun kokemuksen kuin työpöydän käyttäjät. Ei riisuttua versiota, joka teknisesti latautuu, vaan sivustoa, jolla teksti on luettavaa, navigointi toimii, kuvat näkyvät oikein ja lomakkeet voi oikeasti lähettää puhelimesta turhautumatta.
Tämä artikkeli käy läpi käytännön muutokset, jotka tekevät sivustosta aidosti mobiiliystävällisen: navigoinnista ja tekstistä kuviin, lomakkeisiin ja nopeuteen.
Mitä mobiiliystävällinen tarkoittaa käytännössä?
Mobiiliystävällisellä sivustolla jokainen toiminto toimii oikein puhelimella ilman kiertoteitä. Teksti on luettavaa oletuszoomilla. Navigointi avautuu ja sulkeutuu siististi. Painikkeet ovat riittävän suuria napautettaviksi osumatta väärään elementtiin. Kuvat latautuvat ja näkyvät oikein. Lomakkeet voi täyttää ja lähettää turhautumatta.
Ero teknisesti mobiiliyhteensopivan ja aidosti mobiiliystävällisen välillä on tärkeä. Sivusto on teknisesti yhteensopiva, jos se ei hajoa puhelimella. Se on aidosti ystävällinen, jos sen käyttö puhelimella tuntuu yhtä luontevalta kuin työpöydällä. Ero on yksityiskohdissa. Välit, fonttikoko, napautuskohteiden koko ja latausaika ratkaisevat, tuntuuko kokemus oikealta vai vain juuri ja juuri toimivalta.
Mobiiliystävällisen sivuston perusta on responsiivinen suunnittelu, joka saa asettelun mukautumaan automaattisesti eri näyttökokoihin. Artikkeli mitä responsiivinen suunnittelu on selittää, miten tämä toimii teknisellä tasolla.
Miten testaat, onko sivustosi mobiiliystävällinen?
Luotettavin testi on käydä oma sivustosi läpi oikealla puhelimella. Ei selaimen mobiiliesikatselulla. Ei kapeaksi pienennetyllä työpöytäikkunalla. Oikealla puhelimella, omilla peukaloillasi, niin kuin kävijä sitä käyttäisi.
Käy läpi jokainen sivu. Avaa navigointi ja tarkista, että jokainen linkki on tavoitettavissa. Lue teksti varmistaaksesi, että se on luettavaa ilman zoomausta. Napauta jokaista painiketta varmistaaksesi, että se reagoi oikein. Täytä kaikki lomakkeet ja lähetä ne. Tarkista, että kuvat latautuvat ja näkyvät oikein. Tarkista, ettei mikään vaadi vaakasuuntaista vieritystä.
Hakukoneet tarjoavat myös ilmaisia mobiilitestityökaluja. Syötä URL-osoitteesi, niin työkalu ilmoittaa tietyistä ongelmista, kuten liian pienestä tekstistä, liian lähellä toisiaan olevista klikattavista elementeistä tai näyttöä leveämmästä sisällöstä. Laajempaa ohjeistusta siitä, mitä kannattaa tarkistaa ennen sivuston julkaisua, löydät artikkelista mitä kannattaa tietää ennen verkkosivuston julkaisua joka käsittelee mobiilitestausta osana koko julkaisua edeltävää prosessia.
Miten saat navigoinnin toimimaan mobiilissa?
Navigointi on kohta, jossa mobiilikokemus hajoaa useimmin. Vaakasuuntainen valikko, joka kattaa työpöytänäytön koko leveyden, ei mahdu puhelimen näytölle. Vakioratkaisu on kokoontaitettava valikko, jonka avaa painike, yleensä yläkulmassa.
Valikkopainikkeen täytyy olla heti tunnistettava. Kolmen viivan kuvakkeesta on tullut laajasti ymmärretty käytäntö kokoontaitettaville navigointivalikoille. Kun valikko aukeaa, sen pitäisi peittää riittävästi näyttöä, jotta sitä on helppo lukea ja napauttaa. Kohteiden välillä tarvitaan riittävästi pystysuuntaista tilaa, jotta sormella voi napauttaa yhtä osumatta ylä- tai alapuoliseen.
Pidä mobiilivalikko lyhyenä. Jos työpöydän navigoinnissa on paljon kohtia, mieti, mitä mobiilikävijät todennäköisimmin tarvitsevat ja voisiko toissijaisia kohtia ryhmitellä tai poistaa ylätasolta. Siistimpää mobiilivalikkoa on helpompi käyttää. Artikkeli mitä verkkosivuston navigointi on käsittelee navigoinnin rakennetta ja käytettävyyttä kaikilla laitteilla.
Millaisia tekstin ja fonttien pitäisi olla mobiilissa?
Teksti, jota on helppo lukea työpöydällä, voi muuttua epämukavan pieneksi puhelimella, jos fonttikoko on asetettu liian pieneksi. Leipätekstin vähimmäiskoko 16 pikseliä on laajasti käytetty standardi mobiililuettavuudelle. Sitä pienempi teksti vaatii zoomausta, mitä useimmat kävijät eivät tee.
Myös rivinpituudella on väliä. Työpöydällä tekstirivi voi olla 600-700 pikseliä pitkä. Mobiilissa sama teksti rivittyy paljon lyhyemmiksi riveiksi. Jos riviväli on liian tiukka tai kappaleet liian pitkiä, lukeminen käy epämukavaksi pienellä näytöllä. Lyhyet kappaleet, väljä riviväli ja selkeät katkot osioiden välillä parantavat kaikki luettavuutta.
Otsikoiden pitäisi pienentyä suhteellisesti. H1-otsikko, joka on työpöydällä 48 pikseliä, voi sopia mobiilissa kokoon 28-32 pikseliä. Jos otsikot pysyvät puhelimessa työpöydän kokoisina, ne hallitsevat näyttöä ja työntävät varsinaisen sisällön ensimmäisen näkymän alapuolelle.
Miten käsittelet kuvia mobiilissa?
Kuvat ovat yksi suurimmista suorituskykyriskeistä mobiilissa. Täysresoluutioinen kuva, joka on suunniteltu 1440 pikselin työpöytänäytölle, on paljon tarpeettoman suuri näytettäessä sitä 375 pikselin puhelimen näytöllä. Sen tarjoaminen mobiilikävijöille tuhlaa kaistaa ja hidastaa sivua merkittävästi.
Ratkaisu on tarjota eri laitteille sopivankokoiset kuvat. Useimmat nykyaikaiset sivustorakentimet hoitavat tämän automaattisesti luomalla useita kokoja ja tarjoamalla oikean näytön mukaan. Jos hallitset kuvia käsin, muuta ne suurimpaan kokoon, jossa ne näytetään, ei suurimpaan kokoon, jonka kamerasi voi tuottaa.
Kiinnitä huomiota siihen, miten kuvat rajautuvat mobiilissa. Leveä vaakakuva, joka näyttää tasapainoiselta työpöydällä, voi rajautua kömpelösti korkealla mobiilinäytöllä. Hero-kuvat ja bannerialueet ovat yleisimpiä paikkoja, joissa työpöydän ja mobiilin rajaukset eroavat selvästi. Artikkeli mitä verkkosivuston nopeus on selittää kuvien optimoinnin vaikutuksen sivun kokonaissuorituskykyyn.
Mikä saa lomakkeet toimimaan hyvin mobiilissa?
Lomakkeet ovat mobiilissa suuren kitkan kohta. Kenttien täyttäminen pienellä kosketusnäppäimistöllä on vaativampaa kuin kirjoittaminen täydellä näppäimistöllä. Mitä vähemmän kenttiä, sen parempi. Jokainen ylimääräinen kenttä on tilaisuus turhautumiseen ja syy keskeyttää.
Syöttökentän koolla on väliä. Kenttien on oltava riittävän suuria napautettaviksi tarkasti ja riittävän leveitä, jotta niiden sisällä oleva teksti on luettavaa. Selitteiden pitäisi näkyä kunkin kentän yläpuolella, ei vain paikkamerkkitekstinä kentän sisällä, koska paikkamerkkiteksti katoaa heti, kun joku alkaa kirjoittaa.
Aseta syöttötyypit oikein. Sähköpostikentän pitäisi avata sähköpostinäppäimistö. Puhelinnumerokentän pitäisi avata numeronäppäimistö. Päivämääräkentän pitäisi avata päivämäärävalitsin. Nämä ovat pieniä teknisiä asetuksia, jotka tekevät kokemuksesta huomattavasti sujuvamman.
Testaa jokainen lomake puhelimella täyttämällä se kokonaan ja lähettämällä se. Varmista, että lähetys onnistuu ja mahdollinen vahvistusviesti näkyy oikein. Yhteydenottolomake, joka lähettää onnistuneesti työpöydällä mutta epäonnistuu mobiilissa, menettää hiljaa liidejä ilman että tiedät siitä.
Miten mobiiliystävällisyys vaikuttaa hakusijoituksiin?
Hakukoneet indeksoivat sivustosi mobiiliversion ensin. Tämä tarkoittaa, ettei mobiilikokemus ole tärkeä vain mobiilikävijöille. Se on versio, joka määrää, miten sivustosi ymmärretään ja sijoitetaan kaikilla laitteilla.
Sivusto, joka toimii huonosti mobiilissa, hitaiden latausaikojen, rikkoutuneiden asettelujen tai lukukelvottoman tekstin vuoksi, sijoittuu verrattavia sivustoja alemmas, jos nämä hoitavat mobiilin hyvin. Kävijät, jotka saapuvat mobiilisivustolle ja lähtevät heti, koska se ei toimi, antavat selvän signaalin siitä, ettei sivu palvellut heidän tarpeitaan. Mobiilikävijöiden korkea poistumisprosentti vaikuttaa sijoituksiin ajan myötä.
Sivun nopeus mobiilissa on oma tekijänsä. Sivu, joka latautuu kahdessa sekunnissa nopealla laajakaistayhteydellä, voi tarvita kuusi sekuntia tai enemmän tyypillisellä mobiiliyhteydellä. Optimoidut kuvat, mahdollisimman vähän estäviä skriptejä ja siisti mallipohjan rakenne nopeuttavat kaikki mobiilin latausaikoja. Kattavan kuvan hakukoneoptimoinnin toiminnasta saat artikkelista mitä SEO on joka käsittelee koko aihetta tekniset tekijät mukaan lukien.
Miten WEMASY hoitaa mobiilin
WEMASYn sivustonrakentaja käyttää responsiivisia mallipohjia, jotka mukautuvat automaattisesti työpöydälle, tabletille ja mobiiliin. Visuaalisessa editorissa on mobiiliesikatselu, joten näet rakentaessasi, miltä jokainen osio näyttää pienellä näytöllä. Kuvien optimointi ja mobiilin suorituskyky hoituvat alustalla ilman käsin tehtäviä määrityksiä.
Katso, mitä kuuluu mukaan, osoitteesta WEMASYn sivustonrakentaja tai tutustu vaihtoehtoihin hintasivulla.
Usein kysytyt kysymykset
Mistä tiedän, onko sivustoni mobiiliystävällinen?
Käy sivustosi läpi oikealla puhelimella. Testaa jokainen sivu, jokainen navigointikohta, jokainen lomake ja jokainen painike. Hakukoneet tarjoavat myös ilmaisia mobiilitestityökaluja, joihin syötät URL-osoitteesi ja jotka ilmoittavat tietyistä ongelmista. Käsin tehty läpikäynti ja työkalupohjainen tarkistus yhdessä paljastavat tärkeimmät ongelmat. Selaimen mobiiliesikatselut ovat hyödyllisiä kehityksen aikana, mutta eivät täysin vastaa oikean laitteen kokemusta. WEMASYn sivustorakentimellavoit toteuttaa tämän suoraan omalla sivustollasi.
Voinko tehdä olemassa olevasta sivustosta mobiiliystävällisen ilman uudelleenrakentamista?
Se riippuu siitä, miten sivusto on rakennettu. Nykyaikaisilla sivustorakentimilla rakennettujen sivustojen mobiilikokemusta voi usein parantaa säätämällä mallipohjan asetuksia, muuttamalla kuvien kokoa tai vaihtamalla parempaan mallipohjaan. Räätälöidyllä koodilla tai vanhemmilla alustoilla rakennetut sivustot voivat vaatia merkittävämpää työtä. Joissakin tapauksissa uudelleenrakentaminen nykyaikaisella alustalla on nopeampaa ja tuottaa paremman tuloksen kuin vanhan sivuston paikkaaminen kuntoon.
Sijoittuuko mobiiliystävällinen sivusto korkeammalle hakutuloksissa?
Hakukoneet käyttävät sivustosi mobiiliversiota ensisijaisena versiona indeksoinnissa ja sijoittamisessa. Sivusto, joka toimii hyvin mobiilissa ja latautuu nopeasti puhelimella, pärjää yleensä paremmin kuin ensisijaisesti työpöydälle rakennettu. Sijoitushyödyn lisäksi mobiiliystävällinen sivusto pitää kävijät pidempään, vähentää poistumisprosenttia ja konvertoi paremmin. Nämä käyttäytymissignaalit vaikuttavat myös pitkän aikavälin hakusuorituskykyyn.
Mikä on mobiilisivuston pienin fonttikoko?
Leipätekstin 16 pikselin fonttikoko on laajasti suositeltu vähimmäiskoko mobiililuettavuudelle. Sitä pienempi teksti on vaikealukuista ilman zoomausta. Otsikoiden pitäisi skaalautua suhteellisesti, jotta ne eivät hallitse näyttöä. Vähintään 1,5-kertainen riviväli fonttikokoon nähden parantaa luettavuutta pienillä näytöillä, erityisesti pidemmissä kappaleissa.
Kuinka suuria painikkeiden pitäisi olla mobiilisivustolla?
Mobiilipainikkeille suositellaan laajasti vähintään 44 x 44 pikselin napautuskohdetta. Se antaa sormelle selvän kohteen ja vähentää vahingossa tapahtuvia napautuksia viereisiin elementteihin. Painikkeiden välissä pitäisi myös olla riittävästi tilaa, jotta yhden napauttaminen ei rekisteröidy läheisen elementin napautukseksi. Toimintakehotepainikkeiden pitäisi olla suuria, visuaalisesti erottuvia ja helposti peukalolla tavoitettavia ilman puhelimen asennon muuttamista.