Artikla

Mobiilisivustosuunnittelu vuonna 2021: kaikki mitä sinun tarvitsee tietää

Mobiilisivustojen suunnittelu on välttämätöntä.





Miksi? Koska mobiililaitteet mullistavat yhteyden muodostamistapamme ja sen seurauksena yritysten toiminnan. Itse asiassa suurin osa verkkoliikenteestä nyt tulee matkapuhelimesta laitteet.

'Mobiililaitteista on tulossa paitsi uusi digitaalinen keskus myös silta fyysiseen maailmaan', sanoi Thomas Husson , Forrester Researchin varatoimitusjohtaja ja johtava analyytikko. 'Siksi mobiili vaikuttaa muuhun kuin vain digitaaliseen toimintaan - se muuttaa koko yritystäsi.'





Toisin sanoen tarvitset mobiilille reagoivan verkkosivuston.

Mutta mikä on mobiililaitteille sopiva verkkosivusto? Tässä artikkelissa opit kaiken mobiiliystävällisistä verkkosivustoista ja näet yhdeksän parasta esimerkkiä mobiilisivustojen suunnittelusta. Lisäksi opit selvittämään, onko verkkosivustosi mobiililaitteille sopiva.


OPTAD-3

Mennään siihen.

Älä odota, että joku muu tekee sen. Palkkaa itsesi ja aloita soittamista.

Aloita ilmaiseksi

Mikä on mobiililaitteille sopiva verkkosivusto?

Yksinkertaisesti sanottuna mobiililaitteille sopiva verkkosivusto on sivusto, joka on suunniteltu ja optimoitu kannettaville laitteille, kuten älypuhelimille ja tableteille.

Ja mobiili reagoiva suunnittelu on prosessi verkkosivuston luominen joka sopeutuu katselemasi näytön kokoon.

Täällä Oberlossa meillä on mobiiliystävällinen verkkosivujen suunnittelu. Verrataan, miltä se näyttää tietokoneella ja mobiililaitteella.

miten saat enemmän tykkäyksiä Instagramissa

Alla olevasta kuvasta näet, että työpöydän verkkosivustolla on runsaasti tilaa, sivuelementit on järjestetty vierekkäin paikoin ja teksti on suhteellisen pieni verrattuna näytön kokoon.

Oberlo Desktop -sivusto

Toisaalta, kun katsot verkkosivustoa mobiililaitteella, sivuelementit pinotaan päällekkäin yhteen pitkään sarakkeeseen, ja kunkin elementin ympärillä on vähemmän tilaa. Painikkeet ovat myös isompia, jotta niitä on helppo napauttaa, ja teksti on suurempi sivun kokoon nähden, jotta se olisi helpompi lukea.

Oberlo Mobile -sivustosuunnittelu

'Rikas ja vuorovaikutteinen kokemus, jonka olemme odottaneet mobiilisovelluksissa, ovat luoneet uudet standardit ja odotukset kaikelle digitaaliselle medialle, mukaan lukien verkko', sanoi Raj Aggarwal , Mobiilimarkkinointiyhtiön Localytics toimitusjohtaja. 'Tuloksena on, että verkkosivustot kehittyvät sovellusten kaltaisiksi niiden monipuolisissa toiminnoissa.'

Mobiilisivustosuunnittelun merkitys

Lasketaan eteenpäin: Vuoden 2019 viimeisellä neljänneksellä älypuhelimet olivat vastuussa huijauksesta 52,6 prosenttia maailmanlaajuisesta verkkosivustoliikenteestä .

Tämä tarkoittaa, että mobiililaitteiden käyttö hallitsee nyt pöytätietokoneita.

Lisää, matkapuhelimen käyttäjien määrä maailmanlaajuisesti odotetaan kasvavan 3,8 miljardiin vuoteen 2021 mennessä.

Kuten Cyndie Shaffstall markkinointiyhtiö Spider Trainersin perustaja sanoi: 'Mobiili ei ole tulevaisuus, se on nyt. Tapaa asiakkaasi valitsemassasi ympäristössä, ei siellä, missä sinulle sopii. ”

Myös mobiililaitteet muuttavat ostotottumuksia.

Googlen mukaan 59 prosenttia asiakkaista sano että pystyt tehdä ostoksia mobiililaitteillaan on tärkeä, kun päätetään joltakin jälleenmyyjältä tai tuotemerkiltä.

Lisää, 70 prosenttia älypuhelinten omistajista myymälässä oston tehneet kääntyivät mobiililaitteidensa puoleen etsimään ostosta etukäteen.

Jos se ei riitä, Googlen algoritmi priorisoi hakutuloksissa mobiililaitteille sopivat verkkosivustot.

Maaliskuussa 2020 Google sanoi 'Yksinkertaisuuden vuoksi siirrymme kaikkien verkkosivustojen mobiilihakemistoon.'

Jos mietit mitä tämä tarkoittaa, Google-kehittäjä kannattaa John Mueller selittää :

'Tällä hetkellä Google tarkastelee sivuston työpöytäversiota ja päättelee sitten, miten se sijoittaa mobiilisivuston näiden tietojen mukaan. Kun tämä päivitys otetaan käyttöön, tapahtuu päinvastainen. Google alkaa tarkastella mobiilisivustoasi ja sijoittaa siitä työpöytäsivuston. '

Päivitys tulee virallisesti voimaan syyskuussa 2020, mutta 70 prosenttia verkkosivustoista hakutuloksissa näytettävät kohteet luokitellaan jo tämän mobiilin ensimmäinen indeksointialgoritmin perusteella.

Google-tilastot

Lopuksi monet käyttäjät lataavat mobiilisivustoja hitailla, heikoilla puhelinyhteyksillä. Tämän seurauksena tuotemerkkien on luotava nopeasti latautuva mobiilisivustosuunnittelu.

Kaiken kaikkiaan maailma on nyt ensin mobiililaitteilla - ja siksi tarvitset reagoivan mobiilisivuston.

8 suunnitteluvinkkiä parhaista mobiilisivustoista

Tässä osassa tarkastelemme tarkemmin kahdeksaa mobiilisivustojen suunnitteluvinkkiä, joita voit käyttää. Lisäksi näet todellisia esimerkkejä joistakin parhaista mobiilisivustoista verkossa.

1. Käytä suuria painikkeita

Mobiililaitteille sopivilla verkkosivustoilla on oltava tarpeeksi suuret painikkeet, jotta käyttäjät voivat napauttaa niitä lähentämättä.

Lisäksi hyperlinkkien välillä on oltava tilaa. Jos linkit sijoitetaan liian lähelle toisiaan, käyttäjät voivat yrittää napsauttaa linkkiä ja napsauttaa vahingossa toista.

Shopify käyttää suuria painikkeita ja sijoittaa runsaasti tilaa hyperlinkkien väliin mobiilisivuston suunnittelussa.

Shopify suuret painikkeet

Kun siis suunnittelet reagoivaa mobiilisivustoasi, pidä väli mielessä ja varmista, että jokaista hyperlinkkiä on helppo napsauttaa.

2. Tee teksti riittävän luettavaksi

Tämä saattaa tuntua hieman ilmeiseltä, mutta se on myös ratkaisevan tärkeää mobiililaitteille sopivan verkkosivuston suunnittelussa.

Käyttäjien ei pitäisi koskaan joutua lähentämään - tai vierittämään vasemmalle tai oikealle - lukemaan jotain. Tekstin tulee aina olla riittävän suuri lukemaan mukavasti.

Alla olevassa esimerkissä Beardbrand , voit nähdä, että kaikki näytössä oleva teksti sopii täydellisesti näytön kokoon.

Beardbrand suuri teksti

Tee tekstistäsi riittävän suuri kaikenkokoisilla näytöillä, jotta käyttäjät voivat helposti lukea sanasi.

3. Yksinkertaista valikoita

Työpöydän verkkosivujen valikoissa on paljon tilaa. He voivat viedä kokonaisen palkin ruudun yläreunaan, ja niillä on kattavat pudotusvalinnat estämättä käyttökokemusta.

Näin ei ole mobiililaitteissa - tilaa ei vain ole tarpeeksi.

Mobiililaitteille sopivien verkkosivustojen tulisi käyttää yksinkertaisia ​​valikoita, jotka tarjoavat yleiskatsauksen verkkosivustosta. Käyttäjät voivat sitten käyttää luokkia, suodattimia tai hakutoimintoa hioakseen etsimäänsä.

Useimmat mobiililaitteille sopivat verkkosivustot käyttävät hampurilaismerkkiä - joka koostuu kahdesta tai kolmesta vaakasuorasta viivasta - osoittamaan valikkoa.

Katsotaanpa hyvä esimerkki yhdestä parhaista mobiilisivustoista, Kylie Skin .

Kun käyttäjät napauttavat kaksirivistä hampurilaisvalikkoa ruudun oikeassa yläkulmassa, heille näytetään koko näytön valikko, jossa on suuret painikkeet ja teksti.

KylieSkin Mobile Menu -esimerkki

Kun luot mobiililaitteille reagoivan verkkosivuston, pidä valikot yksinkertaisina, jotta käyttäjien on helppo löytää etsimänsä.

4. Anna yksinkertainen ja intuitiivinen hakuominaisuus

Verkkosivustosi hakuominaisuus on erityisen tärkeä mobiilikäyttäjille.

Kuten edellä mainittiin, yksinkertaistetut valikot voivat tehdä mobiiliselaamisesta helpompaa. Ne voivat kuitenkin myös vaikeuttaa käyttäjien löytää tietty kohde.

Sijoita hakutoiminto eteen ja keskelle, jotta käyttäjien on helppo löytää haluamasi.

Shopify-käyttäjä Gymshark sijoittaa hakutoiminnon sivun yläpalkkiin. Mukana on myös intuitiivinen suodatintoiminto, jonka avulla käyttäjien on helpompi löytää tietyntyyppisiä tuotteita.

Gymshark-haku- ja suodatinominaisuudet

Avain takeaway? Tee yksinkertainen ja tehokas hakutoiminto osa mobiilisivustosi suunnittelua.

5. Helpota yhteydenpitoa

Jos asiakas etsii yhteystietojasi, heillä saattaa olla vaikeuksia - mikä tarkoittaa, että he ovat todennäköisesti jo turhautuneita. Älä lisää loukkaantumista vahingoittamalla vaikeuttamalla yhteydenottoa sinuun.

kuinka tehdä oma geosuodatin snapchatille

varsinkin kun 84 prosenttia kuluttajista harkita asiakaspalvelu olla keskeinen tekijä päätettäessä ostoksen tekemisestä.

Asiakaspalvelu Stat

Tässä on toinen loistava esimerkki mobiilisivustojen suunnittelusta Shopify-käyttäjältä Bremont . Tämä ylellinen kellomerkki sijoittaa chat-kuvakkeen ruudun oikeaan alakulmaan, mikä tekee verkkosivuston kävijöistä nopeaa ja helppoa ottaa yhteyttä edustajaan.

Bremont-yhteydenottovaihtoehdot

Jos et voi tarjota live-chatia ympäri vuorokauden, harkitse linkittämistä a Facebook-chatbot tai anna yksinkertaisesti yhteydenottolomake, jota käyttäjät voivat käyttää valikon Yhteystiedot-linkin kautta.

6. Luo yksinkertaiset lomakkeet

Käyttäjät saattavat olla taipuvaisempia täyttämään pitkän lomakkeen tietokoneella, koska näyttö on suurempi ja sitä on helpompi kirjoittaa näppäimistöllä.

Mobiililaitteissa lomakkeiden on oltava lyhyempiä suurilla tekstikentillä ja painikkeilla.

Jos esimerkiksi pyydät käyttäjiä kirjautumaan postituslistallesi, sinun ei pitäisi pyytää enempää kuin etunimi ja sähköpostiosoite.

Jos sinun on lisättävä lisää kysymyksiä, tee niihin nopea ja helppo vastaus.

Tässä mobiilisivuston suunnitteluesimerkissä Shopify-käyttäjä QuadLock , näet suuret kentät, joilla on yksinkertaiset lomakevaatimukset. Siellä on jopa avattava valikko, jonka avulla käyttäjät voivat antaa tietoja tiedusteluistaan.

QuadLock-yhteydenottolomake

Lyhyesti sanottuna varmista, että lomakkeet ovat lyhyitä ja suloisia.

7. Luo huomiota herättäviä toimintakehotuksia

TO kehotus toimintaan - tunnetaan myös nimellä CTA - on kuva, banneri tai tekstikappale, joka kirjaimellisesti kehottaa käyttäjiä ryhtymään toimintaan.

Voit esimerkiksi kehottaa käyttäjiä kirjautumaan palveluun postitus lista , lisätietoja tarjouksesta tai tuotteen ostamisesta.

Tällä markkinointitaktiikalla on tärkeä rooli mobiilisivustojen suunnittelussa.

Voi kuitenkin olla haastavaa luoda houkuttelevia toimintakehotuksia niin rajoitetulla näyttötilalla, jolla pelata.

Tässä mobiilisivuston esimerkissä Shopify-käyttäjältä Ylelliset hiukset , näet kaksi banneria, joissa on toimintakehotuksia. Ensimmäinen mainostaa uutta tuotetta, johon sisältyy ilmainen lahja, ja toinen kehottaa käyttäjiä oppimaan lisää tuotemerkin ilmaisesta toimituksesta ja 90 päivän vaihtokäytännöistä.

Ylelliset hiukset toimintakehotuksia

Kun luot toimintakehotuksia mobiililaitteille sopivalle verkkosivustollesi, tee niistä erottuva sijoittamalla ne sivun yläosaan, jossa käyttäjät voivat nähdä ne ilman vierittämistä alaspäin.

8. Vältä ponnahdusikkunoita

Tunnustetaan: Useimmat ihmiset vihaavat ponnahdusikkunoita. Itse asiassa, jos Googlessa 'Vihaan pop-up-mainoksia', löydät melkein 48 miljoonaa tulosta.

Ei ihme, että Google otti käyttöön algoritmin muutos vuonna 2017 joka rankaisee verkkosivustoja, jotka palvelevat tietyntyyppisiä ponnahdusikkunoita mobiililaitteissa.

Nykyään hakusijoituksesi kärsivät todennäköisesti, jos:

  • Näytä ponnahdusikkuna, joka kattaa pääsisällön
  • Näytä erillinen välimainos, jonka käyttäjän on hylättävä, ennen kuin hän pääsee pääsisältöön.
  • Varmista, että sivun yläosa muistuttaa erillistä välimainosta ja aseta alkuperäinen sisältö sen alle.

Pop-upit, jotka imevät

Jotkin ponnahdusikkunatyypit eivät saisi vaikuttaa negatiivisesti sijoituksiisi, kuten

  • Välimainokset, joita käytetään lakisääteisten velvoitteiden täyttämiseen, kuten ikätarkistus, evästeiden suostumus tai GDPR .
  • Kirjaudu ikkunoihin päästäksesi yksityiseen sisältöön, kuten sähköposti tai sisältö, joka on paywallin takana.
  • Pienet bannerit, jotka voidaan helposti hylätä ja jotka käyttävät 'kohtuullisen määrän näyttötilaa', kuten Chromen ja Safarin käyttämät sovelluksen asennusbannerit.

Ponnahdusikkunat, jotka ovat kunnossa

Bottom line, mobiiliponnahdusikkunat turhauttavat käyttäjiä ja voivat vahingoittaa sinua hakusijoitukset , joten käytä niitä vain silloin, kun se on ehdottoman välttämätöntä.

Kuinka selvittää, onko sinulla mobiililaitteille sopiva verkkosivusto

Jos mietit, onko verkkosivustosi mobiililaitteille sopiva, vasta vain hetken aikaa saada selville Googlen mobiililaitteille sopiva testityökalu - kirjoita vain linkki verkkosivustollesi ja napsauta Testaa URL.

Tämä työkalu arvioi verkkosivustosi mobiililaitteille sopivan ja antaa sinulle yksityiskohtaisen erittelyn siitä, mitä voit tehdä sen parantamiseksi.

Google ja aposs Mobile-Friendly Test

Yhteenveto: Mobiilisivustosuunnittelu vuonna 2021

Matkapuhelinystävällinen verkkosivusto on suunniteltu toimimaan hyvin älypuhelimissa ja tableteissa. Ja nyt kun maailma on ensin mobiililaitteissa, myös verkkosivustosi pitäisi olla.

Yhteenvetona tässä on kahdeksan mobiilisivustojen suunnitteluvinkkiä:

  1. Tee painikkeet niin suuriksi, että ihmiset napauttavat niitä.
  2. Varmista, että teksti on tarpeeksi suuri luettavaksi ilman, että käyttäjien on lähennettävä.
  3. Yksinkertaista valikkoa, jotta pienessä näytössä liikkuminen on helppoa.
  4. Sijoita hakutoiminto eteen ja keskelle ja anna käyttäjien suodattaa hakutulokset.
  5. Tee käyttäjien vaivattomaksi ottaa sinuun yhteyttä.
  6. Luo lomakkeita, jotka ovat yksinkertaisia ​​ja nopeita käyttää.
  7. Sijoita toimintakehotukset sivun yläosaan niin, että ne ovat näkyvissä.
  8. Vältä käyttäjien turhauttamista ponnahdusikkunoilla, elleivät ne ole ehdottoman välttämättömiä.

Mitä mieltä olet mobiilisivustojen suunnittelusta? Onko meiltä unohtunut hienoja mobiilisivustojen suunnittelun parhaita käytäntöjä? Kerro meille alla olevissa kommenteissa!

Haluatko oppia lisää?



^