Pientä harmaata tekstiä sekavalla taustalla. Silmät rasittuvat jo ennen ensimmäisen lauseen loppua. Siksi mobile first -suunnittelu on tärkeää brändillesi. Kun asettelu ja värit vastustavat viestiä, ihmiset lähtevät sanomatta miksi.
Mobile first -suunnittelu alkaa älypuhelimen asettelusta ja laajentaa ominaisuudet sitten suuremmille näytöille. 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 verkkosivuston tekeminen mobiiliystävälliseksi liittyy samaan kokonaisuuteen. Käydään se läpi vaihe vaiheelta.
Mitä on mobile first -suunnittelu
Mobile first -suunnittelu alkaa älypuhelimen asettelusta ja laajentaa ominaisuudet sitten suuremmille näytöille.
Käytännössä mobile first -suunnittelu näkyy verkkosivustosi yläosissa, palvelusivuilla, some-grafiikoissa ja painetuissa materiaaleissa. Kun osaat nimetä asian oikein, voit briefata suunnittelijoita nopeammin ja arvioida luonnoksia varmemmin.
Lähiaiheet, kuten miten verkkosivusto tehdään mobiiliystävälliseksi, liittyvät suoraan tähän. Pidä ne mielessä, kun luet moduulin loppuosan.
Se estää ideat, jotka toimivat vain työpöydällä ja hajoavat puhelimilla.
Miksi mobile first -suunnittelu on tärkeää yrityksellesi?
Asiakkaat arvioivat uskottavuuden asettelusta ennen kuin lukevat joka sanan. Selkeä visuaalinen rakenne vähentää kitkaa ja tekee tarjouksista helpommin ymmärrettäviä.
Hakukoneet painottavat mobiilikokemusta voimakkaasti sivuja järjestäessään.
Suunnittele navigointi ja pääosion sisältö peukalon ulottuville, ennen kuin lisäät sivupalkin vimpaimia.
Jos haluat nähdä, miten tämä liittyy lähiaiheisiin, lue seuraavaksi verkkosivuston uudistus ja verkkosivuston ylätunniste.
Käytännön tarkistuslista tälle päivälle
Suunnittele navigointi ja pääosion sisältö peukalon ulottuville, ennen kuin lisäät sivupalkin vimpaimia.
Kun käyt sivua läpi, kysy, näkyykö mobile first -suunnittelu 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ä liikutti mobile first -suunnittelun tuloksia sivustollasi.
Jaa tämä lista kaikille, jotka päivittävät sivustoasi, jotta mobiiliystävällisyys 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. Hakukoneet painottavat mobiilikokemusta voimakkaasti sivuja järjestäessään.
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 alatunnisteen suunnittelu vertaillaksesi muistiinpanoja tämän moduulin toiseen lukuun.
Se estää ideat, jotka toimivat vain työpöydällä ja hajoavat puhelimilla.
Kysymykset, jotka usein jäävät huomaamatta
Lisätermit, kuten miten verkkosivusto tehdään mobiiliystävälliseksi ja mitä on mobile first -indeksointi, auttavat etsimään syvempiä esimerkkejä ja vertaamaan työtäsi yleisiin standardeihin.
Hakukoneet painottavat mobiilikokemusta voimakkaasti sivuja järjestäessään.
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 mobile first -suunnittelusta, 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 verkkosivuston uudistus ja verkkosivuston ylätunniste, jotta moduuli pysyy mielessäsi yhtenäisenä.
Sinulla on nyt toimiva näkökulma mobile first -suunnitteluun. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointimateriaaleja tai briefaat suunnittelijaa. Jatka lukuihin verkkosivuston ylätunniste ja verkkosivuston alatunnisteen suunnittelu, niin vauhti säilyy tässä moduulissa.
Usein kysytyt kysymykset
Kuinka kauan mobile first -suunnittelun 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 mobile first -suunnitteluun?
Suunnittelijasta on apua monimutkaisissa brändiuudistuksissa, mutta moni mobile first -suunnitteluun liittyvä korjaus onnistuu itse, kun tiedät, mitä etsiä. Käytä lukua verkkosivuston uudistus tämän luvun rinnalla.
Voiko WEMASY auttaa mobile first -suunnittelun soveltamisessa verkkosivustollasi?
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 mobile first -suunnittelussa?
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 ylätunniste.
Miten mobile first -suunnittelu 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 mobile first -suunnittelun jälkeen?
Jatka lukuihin verkkosivuston uudistus ja verkkosivuston ylätunniste tässä kirjassa, niin rakennat brändillesi kokonaisen visuaalisen järjestelmän verkkoon.