Mobile-First Design – mitä se on ja miksi sillä on merkitystä

Syksy 2018 oli koettelevaa aikaa verkkomarkkinoijille, bloggaajille, digitaalisille toimistoille… periaatteessa kaikille, joiden leipä ja voi tulee verkkomaailmasta. Miksi? Koska juuri silloin hakukonejätti Google alkoi ottaa käyttöön mobiili-indeksointiaan. Tämä ei todellakaan tullut yllätyksenä, sillä "Mobilegeddon" -tapahtumassa vuonna 2015 jo otettiin käyttöön mobiililaitteilla hyvin näkyvien verkkosivustojen priorisointi. Mobiililähtöinen suunnittelu oli jo olemassa, mutta Google onnistui silti aiheuttamaan paniikkia.

Otetaan kuitenkin askel taaksepäin hetkeksi ja katsotaan, mitä "mobiili-ensin" itse asiassa tarkoittaa.

Mobile-First Design selitetty

Lyhyesti sanottuna mobiililaitesuunnittelu on sellaista suunnittelua, jossa mobiililaitteet asetetaan etusijalle. Yleensä tämä sisältää älypuhelimet ja tabletit tai mitkä tahansa laitteet, joissa on pienempi näyttö. Ymmärtääksemme tämän käsitteen oikein meidän on ensin puhuttava responsiivisesta verkkosuunnittelusta tai RWB :stä. RWB:ssä periaatteessa mahdollistamme verkon ja sen kaiken muodon ja sisällön mahtumaan pienemmille näytöille laadun heikkenemättä. Se on myös tehtävä tavalla, joka on ihmisten mielestä kätevä tai mukava. Kun se on tehty oikein, responsiivinen suunnittelu tarkoittaa, että käyttäjän ei tarvitse zoomata, vierittää tai panoroida näyttöä nähdäkseen koko sivuston sisällön.

On selvää, että koska mobiilihaut ovat ohittaneet työpöytähaut, on luonnollista, että verkkosivusto on responsiivinen. Kysymys ei ole edes vahvimpien selviytymisestä. Se on yksinkertaisempaa. Jos verkkosivustosi ei ole responsiivinen, se voi yhtä hyvin olla olematon. Ihmisillä ei ole aikaa tai kärsivällisyyttä reagoimattomiin verkkosivustoihin.

Mutta tässä on muutakin kuin pelkkä reagointikyky. Tuotekehityksessä suunnittelijat ottivat lähtökohtana työpöytäversion. Sitten, kun kyseisen version viimeistely, he periaatteessa luopuivat tietyistä elementeistä optimoidakseen tuotteen mobiilikäyttöön.

Nykyään prosessi on erilainen. "Progressiivinen edistyminen" on laajasti käytetty periaate suunnittelussa, jonka lähtökohtana on mobiiliversio. Ja juuri sitä "mobiili-ensin" tarkoittaa. Suunnittelu alkaa mobiilipäästä ja laajenee sitten vähitellen edistyneempiin versioihin.

Mobile-First -indeksointi

Kuten aiemmin mainitsimme, Google otti vuonna 2018 käyttöön aivan uuden tavan indeksoida sivustot. Indeksointi on tärkeää, koska se on yksi mekanismeista, jota Google käyttää päättäessään kuinka korkealle sivustosi sijoittuu hakukoneiden tulossivuilla.

Pohjimmiltaan mobiilien indeksointi tarkoittaa siis sitä, että kun Google ottaa käyttöön indeksointirobottinsa, ne etsivät ensin sivustosi mobiiliversiota ja sitten työpöytäversiota. Huomaa, että mobiiliversio ei ole ainoa, joka indeksoidaan ja luokitellaan. Myös työpöytäversiosi huomioidaan, mutta vasta mobiiliversion jälkeen. Jos verkkosivustollasi ei ole mobiiliversiota, sillä on merkittävä negatiivinen vaikutus verkkosivustosi sijoitukseen. Ei vain sitä. Myös verkkosivustosi tarjoaman mobiilikokemuksen laatu on yksi tekijä.

Ja siksi jokaisen verkkosivuston omistajan tulisi ottaa mobiili-ensisijaisuus erittäin vakavasti.

Optimointi mobiililaitteille ensin

Joten sait itsellesi hienon reagoivan teeman? Hyvä. Reagointikyky on erittäin tärkeää. Älä kuitenkaan ajattele hetkeäkään, että työsi mobiililaitteille optimoinnissa päättyy siihen. Se on sitä monimutkaisempi.

Olitpa tekemässä vanhaa WordPress-sivustoasi kevätsiivouksessa tai rakentamassa aivan uutta, voit tehdä siitä houkuttelevamman Googlen indeksointiroboteille ja mobiiliensimmäiselle indeksoinnille.

• Optimoi verkkosivustosi nopeus

Google vihaa hitaita verkkosivustoja. Oikeasti. Sillä on erityinen ennakkoluulo sellaisten verkkosivustojen suhteen, jotka latautuvat hitaasti. Kesästä 2018 lähtien Google on virallisesti priorisoinut nopeat verkkosivustot, joten sitä on ehdottomasti mietittävä.

Vaikka verkkosivustosi on hieman hidas, älä huoli. On monia asioita, joita voit tehdä nopeuttaaksesi sitä. Voit esimerkiksi käyttää yhtä erinomaisista välimuistilaajennuksista, jotka luovat sivustostasi HTML-yhteensopivan version, jotta se latautuu nopeammin. Voit myös pakata kaikki tiedostosi niin, että ne ladataan pienimmässä ja keveimmässä koossa. Käy lopuksi jonkin aikaa verkkosivustosi läpi ja etsi teknisiä virheitä, kuten rikkinäisiä linkkejä, liian täynnä olevia sivuja ja niin edelleen.

Mitä tulee hakukoneoptimointiin (SEO), olettaen, että käytät jo kaikkia alan parhaita käytäntöjä, on pari muuta asiaa, jotka on pidettävä mielessä.

Ensinnäkin sinun on varmistettava sisällön tasa-arvo sivustosi versioiden välillä. Tämä koskee erityisesti sisäisiä linkkejä, strukturoitua dataa, tunnisteita ja vastaavia. Varmista myös, että palvelimesi voivat käsitellä indeksointinopeutta. Tämä oli ongelma, kun mobiiliensimmäinen indeksointi otettiin käyttöön, mutta yllättävän monet verkkosivustot eivät ole vieläkään mukautuneet uuteen indeksointiin.

Lopuksi tarkkaile indeksoinnin tilaa säännöllisesti ja varmista, että robots.txt on vahvistettu ja palvelimen lokitiedostot ovat kunnossa.

• Valitse responsiivinen kehys

Kyllä, sanoimme aiemmin, että responsiivisen teeman käyttäminen, joka on rakennettu reagoivaan kehykseen, ei riitä oikeaan mobiilioptimointiin. Mutta se on edelleen yksi olennaisista tekijöistä, joten ajattelimme, että meidän pitäisi toistaa.

Bootstrap ja Foundation ovat tällä hetkellä suosituimpia ja luultavasti parhaiten reagoivia kehyksiä, joten valitse teema käyttämällä jotakin niistä. Ne ovat ihanteellisia verkkosivustosi suunnittelun kääntämiseen pienemmille näytöille minimaalisella häiriö- ja bugiriskillä. Lisäksi ne tekevät niin sekä käyttöliittymä- että taustatasolla, joten ne vähentävät huomattavasti kehittäjien työtaakkaa.

• Optimoi navigointi, sisältö ja vuorovaikutus

Täydellisen tasapainon löytäminen riittämättömän sisällön ja liian suuren sisällön välillä on kaikkien mobiilisivustojen yleinen vaiva. Silti se on taistelu, jota meidän on vain jatkettava. Vierailijat tarvitsevat tietoa, ja se on esitettävä selkeästi ja yksinkertaisesti. Sotkua ei voida hyväksyä. Järjestä sisältösi niin, että voit sanoa, mitä sinulla on sanottavaa, strategista toimintakehotustasi etkä mitään muuta.

Harkitse myös verkkosivustosi navigointia. Jos se on liian monimutkaista, se ei yksinkertaisesti sovellu mobiililaitteille.

Seuraavaksi, jos työpöydän navigointipalkki on pitkä, sinun on lyhennettävä sitä huomattavasti mobiiliversiossasi. Harkitse tekstin suurentamista ja linkkien muuntamista painikkeiksi, joita on helppo napauttaa.

Tarkista lopuksi, onko asettelusi oikein optimoitu yleisiä kädessä pidettäviä toimintoja, kuten napauttamista ja pyyhkäisyä, varten.

Tämä on varsin looginen askel, mutta ei haittaa korostaa sitä vielä kerran. Sinun on aina tarkistettava ja testattava kaikki sivustollasi. Vaikka et olisi tehnyt muutoksia viime aikoina, harkitse satunnaisen testin tekemistä nähdäksesi, toimiiko kaikki hyvin.

Useimmat ihmiset käyttävät nykyään moderneja selaimia tai mobiililaitteille optimoituja selaimia. Hämmästyttävä prosenttiosuus Internetin käyttäjistä käyttää kuitenkin edelleen vanhempia selainversioita, ja sinun on myös mietittävä niitä. Haluat verkkosivustosi näyttävän yhtä hyvältä vanhassa iPhone 4s:ssä kuin uudessa Huawei P20:ssa.

Testaa vain verkkosivustosi suunnittelun reagointikykyä ja älä unohda A/B-jakotestausta, erityisesti aloitussivujesi osalta. Tietenkin ennen kaikkea muuta, mukauta sivustosi mobiiliversio ja valmistele se käyttäjiä varten.

Mobile-first on trendi, joka jatkuu jonkin aikaa, ja se on todellisuus, joka meidän kaikkien on hyväksyttävä. "Me" tarkoitamme kaikkia, jotka ovat mukana verkkosivuston luomisessa ja ylläpitämisessä. Suunnittelijat, kehittäjät, järjestelmänvalvojat, SEO-asiantuntijat, toimittajat, tekstinkirjoittajat – jokaisen on muistettava priorisoida mobiili. Tämä ei tietenkään tarkoita, että meidän pitäisi laiminlyödä työpöytäversioita. Mobiililähtöinen suunnittelu on vain otettava vakavasti.

Toivomme, että tämä artikkeli oli hyödyllinen. Jos pidit siitä, tutustu myös joihinkin näistä artikkeleista!