Oletko avannut verkkosivustosi puhelimella ja nähnyt jotain, joka ei muistuta lainkaan rakentamaasi? Mobiilissa rikkinäinen verkkosivusto on yksi yleisimmistä valituksista brändien omistajilta, jotka suunnittelivat sivustonsa tietokoneella eivätkä koskaan tarkistaneet, miten se toimii pienemmällä näytöllä. Tässä artikkelissa käydään läpi, mikä ongelman aiheuttaa, miten selvität, mikä ongelma sivustoasi vaivaa, ja miten korjaat sen.
Yli puolet kaikesta verkkoliikenteestä tulee nykyään mobiililaitteilta. Osuus on kasvanut vuosia ja kasvaa edelleen. Jos kävijä saapuu sivustollesi puhelimella ja kohtaa liian pientä tekstiä, näytön yli ulottuvia kuvia tai valikon, joka ei reagoi napautukseen, todennäköisyys, että hän jää, on pieni. Korkea pomppuprosentti mobiilissa on usein ensimmäinen mitattava merkki siitä, että jokin on rikki, ja monet brändien omistajat eivät yhdistä näitä kahta ennen kuin tarkistavat analytiikkansa.
Turhauttavaa on, etteivät mobiilinäytön ongelmat ole aina ilmeisiä tietokoneen näkymässä, jolla hallinnoit sivustoasi. Ongelmat paljastuvat yleensä vasta, kun katsot oikeaa puhelimen näyttöä, joten ne voivat jäädä huomaamatta viikkoja tai kuukausia, kun kävijät lähtevät hiljaa pois.
Miksi verkkosivusto näyttää rikkinäiseltä mobiilissa?
Mobiilissa rikkinäiselle verkkosivustolle ei ole yhtä syytä. Ongelma on yleensä yksi viidestä taustalla olevasta syystä, ja joskus useamman yhdistelmä. Kun ymmärrät, mikä syy sivustoasi vaivaa, tiedät, mikä korjaus sopii.
Sivustoa ei ole rakennettu responsiiviseksi
Responsiivinen verkkosivusto mukauttaa ulkoasunsa automaattisesti sitä näyttävän näytön leveyden mukaan. Tietokoneella sisältö voi näkyä kolmessa sarakkeessa. Tabletilla kahdessa. Puhelimella yhdessä vieritettävässä sarakkeessa. Tämä mukautus tapahtuu CSS-säännöillä, joita kutsutaan media queryiksi ja jotka kertovat selaimelle, miten sisältö järjestetään uudelleen eri näyttökoilla.
Jos sivusto on rakennettu ilman responsiivista suunnittelua, se näyttää saman kiinteän asettelun näytön koosta riippumatta. 1 440 pikselin levyiselle tietokoneen näytölle suunniteltu sivusto yrittää piirtyä tuolla leveydellä puhelimen noin 390 pikselin levyiselle näytölle. Tuloksena on kutistettu, loitonnettu sivu, jonka teksti on lukukelvotonta ja painikkeet liian pieniä napautettaviksi. Sisältö on teknisesti olemassa, mutta käyttökelvotonta.
Vanhemmilla sivustoilla, erityisesti vedä ja pudota -editoreilla rakennetuilla, jotka eivät priorisoineet mobiilitulostetta, on usein tämä ongelma. Myös käsin koodatut sivustot, joita ei suunniteltu mobiili edellä, voivat kuulua tähän ryhmään.
Kuvia ei ole mitoitettu mobiilinäytöille
Kuva, joka on ladattu 3 000 pikselin leveydellä ja näytetään ilman rajoituksia, yrittää piirtyä täydessä koossaan riippumatta siitä, missä sitä katsotaan. Tietokoneella selain voi kutistaa sen sopivaksi. Mobiililaitteella ilman responsiivisia mitoitussääntöjä kuva voi työntyä näytön reunan yli ja aiheuttaa vaakasuuntaisen vierityksen tai asettelun romahtamisen.
Vaikka kuvat eivät ylivuotaisi, suuret optimoimattomat kuvat vaikuttavat siihen, miksi verkkosivuston nopeudella on väliä mobiilissa. Hitaasti latautuva kuva, joka estää muun sivun näkymisen, on rikkinäistä toimintaa, vaikka asettelu teknisesti pysyisi kasassa. Mobiiliyhteyksillä olevat kävijät ovat tähän erityisen herkkiä.
Kiinteän levyiset elementit ylivuotavat näytöltä
Kiinteän levyiset elementit ovat säiliöitä, div-elementtejä, taulukoita tai muita HTML-elementtejä, joille on tyylitiedostossa määritetty tietty pikselileveys prosentin tai joustavan yksikön sijaan. 900 pikselin levyiseksi asetettu säiliö näkyy oikein tietokoneella mutta ylittää puhelimen näytön reunan, jolloin käyttäjän täytyy vierittää vaakasuunnassa nähdäkseen koko sisällön. Vaakasuuntainen vieritys verkkosivustolla on lähes aina merkki kiinteän levyisen elementin ylivuodosta.
Taulukot ovat yleinen syyllinen. HTML:llä rakennettu hinta- tai vertailutaulukko kiinteillä sarakkeilla voi romahtaa mobiilissa dramaattisesti, jolloin teksti pinoutuu tavalla, jota on mahdoton lukea. Sama koskee sivupalkkeja, upotettuja widgettejä ja kaikkia elementtejä, joille on koodattu nimenomainen pikselileveys, joka ylittää puhelimen näytön käytettävissä olevan tilan.
Fonttikoot ovat liian pieniä luettaviksi ilman zoomausta
Teksti, joka on luettavaa 14 pikselin koossa tietokoneen näytöllä, voi muuttua lukukelvottomaksi puhelimella, erityisesti tiheillä näytöillä, joissa fyysisten pikselien määrä on paljon suurempi kuin loogisen näytön koko. Jos kävijän täytyy nipistää ja zoomata lukeakseen sisältöäsi, kokemus on rikki, vaikka asettelu olisi teknisesti ehjä.
Suositeltu vähimmäiskoko leipätekstille mobiilissa on 16 pikseliä. Sitä pienempi teksti ei välttämättä ole luettavaa merkittävällä osalla laitteista. Pienempi teksti viestii myös hakukoneille, ettei sivua ole optimoitu mobiilille, mikä voi vaikuttaa sivuston sijoitukseen ja indeksointiin.
Navigointi romahtaa huonosti tai ei toimi kosketuksella
Tietokoneen navigointivalikot rakennetaan usein vaakasuuntaisina palkkeina, joissa alivalikot ilmestyvät hiiren viedessä päälle. Kosketusnäytöllä ei ole hiiren päälle vientiä. Valikko, joka riippuu hiiren päälle viennistä, ei yksinkertaisesti toimi puhelimella. Kävijät napauttavat valikon kohtaa eikä mitään tapahdu, tai heidät viedään väärälle sivulle, koska alivalikon paljastavan päälle viennin tila ei koskaan aktivoidu.
Jopa navigointi, joka teknisesti toimii kosketuksella, voi olla käytännössä rikki, jos napautuskohteet ovat liian pieniä tai liian lähellä toisiaan. Yleinen ohje mobiilin kosketuskohteille on vähintään 44 x 44 pikseliä. Pienemmät kohteet johtavat ohi napautuksiin, vahingossa tapahtuvaan siirtymiseen ja turhautuneisiin kävijöihin, joiden on helpompi lähteä kuin löytää etsimänsä.
Miten tarkistat, onko verkkosivustosi mobiiliystävällinen
Nopein tarkistus on avata sivusto oikealla puhelimella. Käytä omaa laitettasi ja mahdollisuuksien mukaan myös toisen merkin ja mallin laitetta. Se, mikä näyttää hyvältä yhdellä puhelimella, voi näkyä eri tavalla toisella näytön tarkkuuden, selaimen _blocked_öintimoottorin ja käyttöjärjestelmäversion erojen vuoksi.
Selaimen kehittäjätyökalut tarjoavat sisäänrakennetun mobiilisimulaation. Useimmissa tietokoneen selaimissa F12 avaa kehittäjäpaneelin. Laitepalkin kuvake antaa simuloida eri näyttökokoja ja laitetyyppejä. Tämä on hyödyllistä nopeisiin tarkistuksiin, mutta ei täysin korvaa testausta oikeilla laitteilla, koska simuloidut ympäristöt eivät toista todellista kosketuskäyttäytymistä, fonttien piirtoa tai verkko-olosuhteita.
Googlen mobiiliystävällisyystesti, joka on käytettävissä Google Search Consolen kautta, arvioi sivusi ja merkitsee tietyt mobiilikäytettävyysongelmat. Se tunnistaa ongelmia, kuten liian pieni teksti, liian lähellä toisiaan olevat napsautettavat elementit ja sisältö, joka ei mahdu näkymään. Raportti antaa sivukohtaiset tiedot, joten näet, mitkä sivut eivät läpäise ja mitkä läpäisevät.
Analytiikkadatan tarkistaminen lisää teknisen kuvan rinnalle käyttäytymisen tason. Jos mobiilin pomppuprosentti on huomattavasti korkeampi kuin tietokoneen, ero viittaa usein puhelimen näyttö- tai käytettävyysongelmaan. Artikkeli korkea pomppuprosentti mobiilissa selittää, miten luet näitä signaaleja ja mikä saa kävijät lähtemään heti pienemmillä näytöillä.
Miten korjaat mobiilissa rikkinäisen verkkosivuston
Oikea korjaus riippuu siitä, mikä syy ongelman aiheuttaa. Jokaiselle viidestä edellä mainitusta syystä on oma ratkaisunsa.
Siirry responsiiviseen asetteluun
Jos sivusto ei ole lainkaan responsiivinen, korjaus on joko rakentaa se uudelleen responsiivisella kehyksellä tai siirtyä alustalle, joka tuottaa responsiivista HTML:ää oletuksena. Responsiivisuuden lisääminen ei-responsiiviseen sivustoon jälkikäteen on mahdollista, mutta usein työläämpää kuin uudelleenrakennus responsiivisesta lähtökohdasta. Jos sivusto on modernilla alustalla, joka tukee responsiivisia teemoja tai pohjia, siirtyminen responsiiviseen pohjaan on yleensä nopeampi tie.
Mitoita ja rajaa kuvat
Kuvat tulisi ladata todellisessa tarvittavassa näyttökoossa, ei alkuperäisessä vientiresoluutiossa. Useimmille verkkosivuston kuville 1 200 pikselin enimmäisleveys riittää tiheille näytöille ja pitää tiedostokoot hallittavina. CSS-säännöt, jotka asettavat kuville max-width: 100%, varmistavat, etteivät ne koskaan ylivuoda säiliöstään näytön leveydestä riippumatta. Tämä yksi sääntö ratkaisee useimmat kuvien ylivuotoongelmat ilman yksittäisten kuvien koon muuttamista.
Korvaa kiinteät leveydet joustavilla yksiköillä
Säiliöiden, taulukoiden ja muiden asetteluelementtien kiinteät pikselileveydet tulisi korvata prosenttipohjaisilla leveyksillä tai joustavilla CSS-yksiköillä, kuten em, rem tai vw. Säiliö, jonka leveys on width: 90% eikä width: 900px, skaalautuu sopivasti jokaisella näyttökoolla. Taulukoille CSS-sääntö, joka tekee taulukoista vaakasuunnassa vieritettäviä säiliössään, estää niitä rikkomasta koko asettelua kapeilla näytöillä.
Suurenna fonttikokoja mobiilille
Leipätekstin pitäisi olla mobiilissa vähintään 16 pikseliä. Jos tietokoneen tyylitiedosto määrittää pienemmän koon, mobiilin näyttöleveyksiin kohdistettu media query voi ohittaa sen. Myös otsikoiden koot kannattaa tarkistaa, sillä monet otsikkotyylit, jotka näyttävät suhteellisilta tietokoneella, muuttuvat puhelimella liian suuriksi ja työntävät muun sisällön näkyvän alueen alapuolelle ennen kuin kävijä on ehtinyt lukea mitään.
Korvaa hiiren päälle vientiin perustuva navigointi mobiilivalikolla
Tavallinen ratkaisu mobiilinavigointiin on kokoontaitettava valikko, jota kutsutaan usein hampurilaisvalikoksi ja joka avautuu napautuksella hiiren päälle viennin sijaan. Useimmat responsiiviset kehykset ja verkkosivustorakentimet sisältävät tämän mallin oletuksena. Jos nykyisen sivuston navigoinnilla ei ole mobiilivastinetta, sellaisen lisääminen vaatii joko tyylitiedoston ja JavaScriptin muokkaamista tai siirtymistä teemaan, jossa mobiilinavigointi on sisäänrakennettu. Napautuskohteiden koko kannattaa myös tarkistaa, jotta kaikki valikon kohdat täyttävät 44 pikselin vähimmäisohjeen.
Jos sivustollasi on rikkinäisiä sivuja ulkoasuongelmien lisäksi, visuaalisen asettelun korjaaminen ensin helpottaa usein siirtymistä jokaiselle sivulle ja niiden testaamista tarkistuksen aikana.
Näin WEMASY hoitaa mobiilin
WEMASYn Sivustonrakentaja tuottaa responsiivista HTML:ää jokaiselle sivulle ilman määrityksiä. Asettelut mukautuvat automaattisesti mobiilinäyttöjen kokoihin, kuvat pysyvät säiliöissään ja navigointi vaihtuu kosketusystävälliseen valikkoon puhelimilla ja tableteilla. Fonttikoot, napautuskohteet ja välistykset on määritetty alustan suunnittelujärjestelmässä täyttämään mobiilikäytettävyyden standardit, joten WEMASYllä julkaisevat brändit aloittavat mobiilivalmiilla sivustolla sen sijaan, että heidän täytyisi korjata sellainen jälkikäteen.
Katso, mitä kuuluu mukaan, sivulta WEMASYn Sivustonrakentaja tai tutustu käytettävissä oleviin tilauksiin hinnoittelusivulla.
Usein kysytyt kysymykset
Miksi verkkosivustoni näyttää hyvältä tietokoneella mutta rikkinäiseltä mobiilissa?
Näin käy tyypillisesti, kun sivusto on rakennettu tai suunniteltu ensisijaisesti tietokoneella katsottavaksi ilman responsiivisia CSS-sääntöjä, jotka mukauttavat asettelun pienemmille näytöille. Tietokoneen selaimessa on riittävästi leveyttä näyttää kiinteä asettelu tarkoitetulla tavalla. Puhelimen näytössä ei ole, joten elementit ylivuotavat, menevät päällekkäin tai kutistuvat lukukelvottomiksi. Sivuston tarkistaminen selaimen mobiilisimulaatiotilassa tai oikealla laitteella on nopein tapa nähdä, mitä mobiilikävijät kokevat. WEMASYn Sivustonrakentajalla voit ottaa tämän käyttöön suoraan omalla sivustollasi.
Vaikuttaako rikkinäinen mobiiliasettelu Google-sijoitukseeni?
Kyllä. Google käyttää mobiili edellä -indeksointia, mikä tarkoittaa, että sivun mobiiliversio on se, jota Google arvioi ensisijaisesti sijoituksia varten. Sivusto, jolla on mobiilinäytön ongelmia, pientä tekstiä tai näkymästä ylivuotavaa sisältöä, saa heikommat käytettävyyspisteet, mikä vaikuttaa kokonaisvaltaiseen hakusuorituskykyyn. Mobiiliongelmien korjaaminen parantaa sekä käyttökokemusta että hakukoneoptimointia.
Mikä aiheuttaa vaakasuuntaisen vierityksen mobiilisivustolla?
Vaakasuuntainen vieritys mobiilissa johtuu lähes aina elementistä, jolla on kiinteä pikselileveys, joka ylittää puhelimen näytön leveyden. Yleisiä syyllisiä ovat taulukot, sivupalkit, upotettu sisältö, kuvat ilman leveysrajoituksia ja säiliöt, joille on asetettu tietty pikselileveys prosentin sijaan. Ylivuotavan elementin tunnistaminen selaimen kehittäjätyökaluissa ja kiinteän leveyden korvaaminen prosentilla tai ylivuodon hallinnan lisääminen sen yläsäiliöön ratkaisee ongelman yleensä.
Miten testaan, onko verkkosivustoni mobiiliystävällinen?
Avaa sivusto oikealla puhelimella ja vieritä jokainen tärkeä sivu läpi. Avaa se sitten tietokoneen selaimen kehittäjätyökaluissa ja käytä laitesimulaatiotilaa esikatsellaksesi useilla näyttöleveyksillä. Jäsennellyn tarkistuksen saat ajamalla sivut Google Search Consolen mobiilikäytettävyysraportin läpi, joka merkitsee tietyt ongelmat, kuten liian pienen tekstin, liian lähellä toisiaan olevat napsautettavat elementit ja näkymän määritysongelmat. Molemmat tavat yhdessä antavat kattavimman kuvan.
Voinko korjata rikkinäisen mobiilisivuston rakentamatta koko sivustoa uudelleen?
Se riippuu siitä, miten sivusto alun perin rakennettiin. Jos sivusto toimii alustalla, joka tukee responsiivisia teemoja, siirtyminen responsiiviseen teemaan on usein nopein korjaus eikä vaadi sisällön rakentamista alusta. Jos sivusto on käsin koodattu ei-responsiivisella asettelulla, kohdennetut CSS-muutokset media queryillä voivat ratkaista tietyt ongelmat ilman täyttä uudelleenrakennusta. Jos asettelu kuitenkin perustuu taulukoihin tai nojaa voimakkaasti kiinteisiin leveyksiin kauttaaltaan, täysi uudelleenrakennus responsiiviselle pohjalle on yleensä tehokkaampaa kuin yksittäisten ongelmien paikkaaminen.
Miksi kävijät lähtevät verkkosivustoltani vain muutaman sekunnin jälkeen mobiilissa?
Kun kävijät päätyvät sivulle, jolla on näyttöongelmia, lukukelvotonta tekstiä, rikkinäinen navigointi tai hitaasti latautuvia kuvia, he lähtevät nopeasti, koska sivu ei täytä heidän perustason käytettävyysodotuksiaan. Mobiilikävijöiden sietokyky kitkalle on lyhyempi kuin tietokoneella. Jos asettelu on rikki tai hidas, he palaavat hakutuloksiin ja klikkaavat kilpailijan tulosta. Artikkeli kävijät lähtevät verkkosivustoltasi kattaa kaikki syyt, joiden vuoksi ihmiset lähtevät nopeasti, ja miten selvität, mikä niistä vaivaa sivustoasi.