Yksi kilpailija näyttää viimeistellyltä joka näytöllä. Toinen näyttää ahtaalta ja vanhanaikaiselta, vaikka molemmat myyvät samanlaisia palveluja. Ero johtuu yleensä siitä, miten verkkosivusto tehdään mobiiliystävälliseksi, ja sen takana olevista tavoista. Huomaat eron heti, vaikka et osaisi vielä nimetä jokaista sääntöä.
Mobiiliystävällinen verkkosivusto on luettavissa ilman zoomausta, pienten linkkien näpyttelyä tai vaakavieritystä. Tässä luvussa kerrotaan selkeästi, mitä se tarkoittaa, miksi se vaikuttaa verkkosivustoosi ja markkinointiisi ja miten sitä sovelletaan ilman jargonia. Näet myös, miten mobile first -suunnittelu liittyy samaan kokonaisuuteen. Edetään vaihe vaiheelta.
Mitä verkkosivuston tekeminen mobiiliystävälliseksi tarkoittaa käytännössä
Mobiiliystävällinen verkkosivusto on luettavissa ilman zoomausta, pienten linkkien näpyttelyä tai vaakavieritystä.
Paikallisten yritysten liikenteestä suurin osa tulee ensin puhelimilla.
Mobile first -suunnittelussa rakennetaan ensin pienimmän näytön kokemus ja vasta sitten työpöydän lisät.
Näin teet verkkosivustostasi mobiiliystävällisen
Testaa napautuskohteet, kirjasinkoot ja lomakkeet oikealla puhelimella joka viikko.
Aloita yhdestä sivusta, kuten etusivusta tai pääasiallisesta laskeutumissivusta. Korjaa suurin ongelma ensin ja vie sama malli sitten muihin pohjiin.
Yhdistä tämä luku lukuihin mobile first -suunnittelu perustaksi ja verkkosivuston ylätunniste moduulin seuraavaksi askeleeksi.
Käytännön tarkistuslista tälle päivälle
Testaa napautuskohteet, kirjasinkoot ja lomakkeet oikealla puhelimella joka viikko.
Kun tarkastat sivua, kysy, näkyykö mobiiliystävällisyys jo ensimmäisellä vierityksellä mobiilissa. Jos ei, järjestä osiot uudelleen, ennen kuin viimeistelet yksityiskohtia.
Ota kuvakaappaukset ennen muutoksia ja niiden jälkeen, jotta näet, mikä paransi sivustosi mobiiliystävällisyyttä.
Jaa tämä lista kaikille, jotka päivittävät sivustoasi, jotta mobile first -suunnittelu pysyy yhtenäisenä uusilla sivuilla.
Valitse yksi mittari seurattavaksi tässä kuussa, esimerkiksi sivulla vietetty aika tai lomakkeen aloitukset. Näin suunnittelumuutokset liittyvät liiketoiminnan tuloksiin eivätkä pelkkään makuun.
Miten tämä aihe liittyy laajempaan brändiisi
Visuaaliset valinnat eivät yleensä pysy yhdellä sivulla. Mobile first -suunnittelussa rakennetaan ensin pienimmän näytön kokemus ja vasta sitten työpöydän lisät.
Somejulkaisujesi, sähköpostiesi ja painettujen materiaalien kannattaa toistaa samaa hierarkiaa, värejä ja kirjasinsääntöjä kuin verkossa.
Kun brändin visuaalit alkavat ajautua erilleen, asiakkaat aistivat pienen epäsuhdan, vaikka eivät osaisi selittää sitä.
Käytä lukua verkkosivuston ylätunniste vertaillaksesi muistiinpanoja tämän moduulin toiseen lukuun.
Paikallisten yritysten liikenteestä suurin osa tulee ensin puhelimilla.
Kysymykset, jotka usein jäävät huomaamatta
Lisätermit, kuten mobile first -suunnittelu ja responsiivinen verkkosivusto, auttavat etsimään syvempiä esimerkkejä ja vertaamaan työtäsi yleisiin standardeihin.
Mobile first -suunnittelussa rakennetaan ensin pienimmän näytön kokemus ja vasta sitten työpöydän lisät.
Kirjoita ylös yksi ennen ja jälkeen -muutos, jonka testaat toimivalla sivulla tällä viikolla. Pienet mitatut muutokset voittavat epämääräiset suunnitelmat.
Kun tiimilläsi on yhteinen sanasto siitä, miten verkkosivusto tehdään mobiiliystävälliseksi, korjauskierroksia tulee vähemmän suunnittelijoiden ja toimistojen kanssa.
Työkalut, joilla visuaaliset päivitykset sujuvat helpommin
Monen asettelu- ja tyyliongelman korjaaminen ei vaadi omaa koodia. Visuaalisella editorilla säädät välit, värit ja typografian ja esikatselet samalla mobiili- ja työpöytänäkymät.
WEMASYn Sivustonrakentajassa on visuaalinen muokkaus, joten voit julkaista muutokset odottamatta kehittäjää jokaisen pienen säädön takia. Avaa Sivustonrakentaja, kun olet valmis soveltamaan oppimaasi.
Kun julkaiset päivityksiä, tarkista uudelleen luvut mobile first -suunnittelu ja verkkosivuston uudistus, jotta moduuli pysyy mielessäsi yhtenäisenä.
Sinulla on nyt toimiva näkökulma verkkosivuston mobiiliystävällisyyteen. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointimateriaaleja tai briefaat suunnittelijaa. Jatka lukuihin verkkosivuston uudistus ja verkkosivuston ylätunniste, niin vauhti säilyy tässä moduulissa.
Usein kysytyt kysymykset
Kuinka kauan verkkosivuston mobiiliystävällisyyden parantaminen kestää?
Useimmat pienyritykset näkevät selkeämpiä sivuja muutaman keskittyneen jakson jälkeen, kun soveltavat tämän luvun perusteita. Aloita etusivusta ja vie samat säännöt sitten palvelu- ja yhteystietosivuille.
Tarvitsetko suunnittelijan mobiiliystävälliseen verkkosivustoon?
Suunnittelijasta on apua monimutkaisissa brändiuudistuksissa, mutta moni mobiiliystävällisyyteen liittyvä korjaus onnistuu itse, kun tiedät, mitä etsiä. Käytä lukua mobile first -suunnittelu tämän luvun rinnalla.
Voiko WEMASY auttaa tekemään verkkosivustostasi mobiiliystävällisen?
WEMASYn Sivustonrakentajassa on visuaalinen editori, jolla säädät asettelua, värejä ja typografiaa ilman koodia. Avaa Sivustonrakentaja, niin voit päivittää mallit ja esikatsella muutokset mobiilissa.
Mikä on yleisin virhe mobiiliystävällisen verkkosivuston teossa?
Ihmiset yrittävät korjata kaiken kerralla sen sijaan, että etenisivät yksi sivu kerrallaan. Valitse yksi ykkösasia, kuten luettavuus tai kontrasti, ja katso sitten seuraavaa parannusta varten lukua verkkosivuston uudistus.
Miten verkkosivuston mobiiliystävällisyys liittyy SEO:hon?
Selkeä visuaalinen hierarkia ja luettava teksti pitävät kävijät sivulla pidempään, mikä tukee hakukoneiden seuraamia sitoutumissignaaleja. Yhdistä suunnittelukorjaukset hyvään sisältörakenteeseen, niin tulokset ovat parhaat.
Mitä kannattaa opiskella seuraavaksi mobiiliystävällisen verkkosivuston jälkeen?
Jatka lukuihin mobile first -suunnittelu ja verkkosivuston uudistus tässä kirjassa, niin rakennat brändillesi kokonaisen visuaalisen järjestelmän verkkoon.