Artikkel

Mobiilse veebisaidi kujundamine aastal 2021: kõik, mida peate teadma

Mobiilse veebisaidi kujundamine on hädavajalik.





Miks? Kuna mobiilseadmed muudavad meie ühenduse loomise ja selle tulemusel ka ettevõtete toimimist revolutsiooniliselt. Tegelikult on enamus veebiliiklusest praegu pärineb mobiililt seadmeid.

'Mobiil on saamas mitte ainult uueks digitaalsõlmeks, vaid ka sillaks füüsilisse maailma,' ütles Thomas Husson , Forrester Researchi asepresident ja peamine analüütik. 'Seetõttu mõjutab mobiil rohkem kui ainult teie digitaalseid toiminguid - see muudab kogu teie äri.'





Teisisõnu, vajate mobiilselt reageerivat veebisaiti.

Mis on aga mobiilisõbralik veebisait? Selles artiklis leiate kõike mobiilisõbralike veebisaitide kohta ja näete üheksa parimat mobiiliveebisaitide kujunduse näidet. Lisaks saate teada, kuidas teada saada, kas teie veebisait on mobiilisõbralik.


OPTAD-3

Lähme selle juurde.

Ärge oodake, kuni keegi teine ​​seda teeb. Palkake ennast ja hakake kaadreid kutsuma.

Alustage tasuta

Mis on mobiilisõbralik veebisait?

Lihtsamalt öeldes on mobiilisõbralik veebisait sait, mis on loodud ja optimeeritud pihuseadmetele, näiteks nutitelefonidele ja tahvelarvutitele.

Ja mobiilne reageeriv disain on protsess veebisaidi loomine mis kohandub vaadatava ekraani suurusega.

Siin Oberlo linnas on meil mobiilisõbralik veebisaidi kujundus. Võrdleme, kuidas see laua- ja mobiilseadmetes välja näeb.

kuidas instagrami järgijaid lisada

Alloleval pildil näete, et töölaua veebisaidil on piisavalt ruumi, leheelemendid on paigutatud kohati kõrvuti ja tekst on ekraani suurusega võrreldes suhteliselt väike.

Oberlo töölaua veebisait

Teisalt, kui vaatate veebisaiti mobiilseadmes, on leheelemendid üksteise otsa laotud ühes pikas veerus ja iga elemendi ümber on vähem ruumi. Samuti on nupud suuremad, et neid hõlpsalt puudutada, ja tekst on lehe suuruse suhtes suurem, et hõlbustada nende lugemist.

Oberlo mobiilse veebisaidi kujundus

'Rikkalikud ja interaktiivsed kogemused, mida oleme mobiilirakenduste kaudu oodanud, on loonud uued standardid ja ootused kogu digitaalsele meediale, sealhulgas veebile,' ütles Raj Aggarwal , Mobiiliturundusettevõtte Localytics tegevjuht. 'Tulemuseks on veebisaitide arendamine, et oma rikkaliku funktsionaalsuse poolest muutuksid rakenduste sarnasemaks.'

Mobiilse veebisaidi kujunduse tähtsus

Olgem asja kallal: 2019. aasta viimases kvartalis vastutasid nutitelefonid tohutult 52,6 protsenti kogu veebisaidi liiklusest .

See tähendab, et lauaarvutites domineerib nüüd mobiilseadmete kasutamine.

Veel, mobiilikasutajate arv kogu maailmas peaks 2021. aastaks kasvama 3,8 miljardini.

As Cyndie Shaffstall , turundusettevõtte Spider Trainers asutaja, ütles: „Mobiil pole tulevik, see on praegu. Tutvuge oma klientidega nende valitud keskkonnas, mitte seal, kus see teile sobib. ”

Mobiilseadmed muudavad ka ostuharjumusi.

Google'i sõnul 59 protsenti ostlejatest öelda, et osatakse oma mobiilseadmetega poodlema on oluline, kui otsustate, milliselt jaemüüjalt või brändilt osta.

Veel, 70 protsenti nutitelefonide omanikest poes ostu sooritanud inimesed pöördusid oma mobiilseadmete poole, et enne ostu uurida.

Kui sellest ei piisa, seab Google'i algoritm otsingutulemustes esikohale mobiilisõbralikud veebisaidid.

2020. aasta märtsis Ütles Google , 'Lihtsustamiseks läheme kõigi veebisaitide jaoks esmalt mobiilseadmete indekseerimisele.'

Kui mõtlete, mida see tähendab, toetab Google'i arendaja John Mueller selgitab :

„Praegu vaatab Google saidi töölauaversiooni ja teeb seejärel aluse, kuidas see mobiilisaiti selle teabe järgi järjestab. Kui see värskendus välja tuleb, juhtub vastupidine. Google hakkab teie mobiilisaidi vaatama ja sellest lähtuvalt reastab töölauasaidi. '

Uuendus tuleb ametlikult mängu 2020. aasta septembris, kuid 70 protsenti veebilehtedest otsingutulemites kuvatud reastatakse juba selle mobiil-esimese indekseerimisalgoritmi põhjal.

Google

Lõpuks laadivad paljud kasutajad mobiiliveebisaite aeglase ja nõrga telefoniühenduse abil. Seetõttu peavad kaubamärgid looma mobiilse veebisaidi kujunduse, mis laaditakse kiiresti.

Kokkuvõttes on maailm kõigepealt mobiiltelefoni jaoks - ja seetõttu vajate mobiilselt reageerivat veebisaiti.

8 disaininõuannet parimatelt mobiiliveebisaitidelt

Selles jaotises vaatleme lähemalt kaheksat mobiiliveebisaidi kujundamise nõuannet, mida saate kasutada. Lisaks näete reaalses elus näiteid mõnest parimast veebi veebisaidilt.

1. Kasutage suuri nuppe

Mobiilisõbralikel veebisaitidel peavad olema piisavalt suured nupud, et kasutajad saaksid neid ilma suumimata puudutada.

Lisaks peab hüperlinkide vahel olema ruumi. Kui lingid asetatakse liiga lähestikku, võivad kasutajad proovida lingil klõpsata ja kogemata teisel lingil klõpsata.

Shopify kasutab suuri nuppe ja paneb oma mobiiliveebisaitide kujundamisel hüperlinkide vahele palju ruumi.

Shopify suured nupud

Seega pidage oma mobiilseadmetele reageeriva veebisaidi kujundamisel silmas tühikuid ja veenduge, et igal hüperlingil saaks hõlpsalt klõpsata.

2. Muutke tekst piisavalt suureks lugemiseks

See võib tunduda veidi ilmne, kuid see on ka mobiilisõbraliku veebisaidi kujunduse jaoks ülioluline.

Kasutajad ei tohiks kunagi millegi lugemiseks suumida - ega kerida vasakule või paremale. Tekst peaks alati olema piisavalt suur, et seda mugavalt lugeda.

Allpool toodud näites alates Beardbrand , näete, et kogu kuvatav tekst sobib ideaalselt ekraani suurusega.

Beardbrandi suur tekst

Muutke oma tekst piisavalt suureks igas suuruses ekraanil, et kasutajad saaksid teie öeldut hõlpsasti lugeda.

3. Menüüde lihtsustamine

Töölaua veebisaitide menüüdes on palju ruumi. Nad võivad ekraani ülaosas hõivata terve riba ja neil on ulatuslikud rippmenüüvalikud, mis kõik kasutajakogemust takistamata.

Mobiilseadmetes see nii ei ole - ruumi on lihtsalt vähe.

Mobiilisõbralikud veebisaidid peaksid kasutama lihtsaid menüüsid, mis esitavad ülevaate veebisaidist. Seejärel saavad kasutajad kategooriate, filtrite või otsingufunktsiooni abil oma otsitavat täiustada.

Enamik mobiilisõbralikke veebisaite kasutab menüü tähistamiseks hamburgeri sümbolit, mis koosneb kahest või kolmest horisontaalsest joonest.

Vaatame head näidet ühelt parimalt mobiiliveebisaidilt, Kylie Skin .

Kui kasutajad puudutavad kaherealist hamburgeri menüüd ekraani paremas ülanurgas, kuvatakse neile täisekraanmenüü, kus on suured nupud ja tekst.

KylieSkini menüü näide

Mobiilile reageeriva veebisaidi loomisel hoidke menüüd lihtsaks, et kasutajatel oleks hõlpsam otsitavat leida.

4. Pakkuge lihtsat ja intuitiivset otsingufunktsiooni

Teie veebisaidi otsingufunktsioon on eriti oluline mobiilikasutajatele.

Nagu eespool mainitud, võivad lihtsustatud menüüd mobiilset sirvimist lihtsustada. Kuid need võivad ka konkreetse üksuse leidmise kasutajatel raskendada.

Selleks, et kasutajatel oleks hõlpsasti soovitud asju leida, asetage otsingufunktsioon esiküljele ja keskele.

Shopify kasutaja Gymshark paigutab otsingufunktsiooni lehe ülemisele ribale. Samuti on olemas intuitiivne filtrifunktsioon, mis hõlbustab kasutajatel teatud tüüpi toodete leidmist.

Gymsharki otsingu- ja filtrifunktsioonid

Võtme kaasa võtmine? Tehke oma mobiilse veebisaidi kujunduse osaks lihtne ja tõhus otsingufunktsioon.

5. Muutke kontakti saamine lihtsaks

Kui klient otsib teie kontaktandmeid, võib tal tekkida probleeme - see tähendab, et tõenäoliselt on ta juba pisut pettunud. Ärge lisage vigastustele solvangut, muutes teiega ühenduse võtmise keeruliseks.

kuidas luua äri facebooki lehte

Eriti kui 84 protsenti tarbijatest kaaluma kasutajatugi ostu sooritamise otsustamisel võtmeteguriks.

Klienditeeninduse stat

Siin on veel üks suurepärane näide mobiilse veebisaidi kujundusest Shopify kasutajalt Bremont . See luksuslike kellade kaubamärk paneb ekraani paremasse alanurka vestlusikooni, mis muudab veebisaidi külastajatel esindajaga ühenduse võtmise kiireks ja lihtsaks.

Bremonti kontakti valikud

Kui te ei saa ööpäevaringselt reaalajas vestlust pakkuda, kaaluge lingi loomist a-ga Facebooki vestlusrobot või esitage lihtsalt kontaktivorm, millele kasutajad pääsevad juurde teie menüüs oleva lingi „Kontakt” kaudu.

6. Looge lihtsad vormid

Kasutajad võivad pigem arvutis pikka vormi täita, kuna ekraan on suurem ja seda on lihtsam klaviatuuriga sisestada.

Mobiilseadmetes peavad vormid olema lühemad suurte tekstiväljade ja nuppudega.

Näiteks kui palute kasutajatel registreeruda teie meililisti, ei tohiks te küsida rohkem kui eesnime ja e-posti aadressi.

Kui peate lisama rohkem küsimusi, tehke neile kiire ja hõlpsasti vastatav.

Selles mobiilse veebisaidi kujunduse näites Shopify kasutaja QuadLock , näete suuri vorminõuetega suuri välju. Seal on isegi rippmenüü, mis aitab kasutajatel oma päringu kohta teavet anda.

QuadLocki kontaktvorm

Ühesõnaga, veenduge, et vormid oleksid lühikesed ja armsad.

7. Looge pilkupüüdvad kutsed tegevusele

TO üleskutse tegevusele - tuntud ka kui CTA - on pilt, bänner või tekstitükk, mis kutsub kasutajaid sõna otseses mõttes üles võtma mingeid toiminguid.

Näiteks võite paluda kasutajatel teie saidile registreeruda meililist , pakkumise kohta lisateavet või toote ostmist.

Sellel turundustaktikal on mobiiliveebide kujundamisel oluline roll.

Siiski võib olla keeruline luua veenvaid kutseid tegevusele nii piiratud ekraanipinnaga, et saaksite neid mängida.

Selles mobiiliveebisaidi näites Shopify kasutaja Luksuslikud juuksed , näete kahte tegevusele kutsumisega bännerit. Esimene reklaamib uut toodet, mis on varustatud tasuta kingitusega, ja teine ​​kutsub kasutajaid üles lisateavet brändi tasuta saatmise ja 90-päevase vahetuse poliitika kohta.

Luksuslikud juuksed kutsuvad üles tegutsema

Kui loote CTA-d oma mobiilisõbraliku veebisaidi jaoks, muutke need silmapaistvaks, asetades need voldiku kohale, kus kasutajad näevad neid ilma alla kerimata.

8. Vältige hüpikuid

Olgem ausad: enamik inimesi vihkab hüpikuid. Tegelikult leiad Google'ist 'Ma vihkan hüpikreklaame' peaaegu 48 miljonit tulemust.

Pole ime, et Google juurutas välja algoritmi muutus 2017. aastal mis karistab veebisaite, mis pakuvad teatud tüüpi hüpikaknaid mobiilseadmetes.

Tänapäeval kannatavad teie otsingujärjestused tõenäoliselt siis, kui:

  • Kuva hüpikaken, mis hõlmab põhisisu
  • Kuvage eraldiseisev vahereklaam, mille kasutaja peab enne põhisisu juurde pääsemist loobuma.
  • Veenduge, et lehe ülaosa sarnaneks eraldiseisva vahereklaamiga ja asetage algne sisu alla.

Hüpikaknad, mis imevad

Sellest hoolimata ei tohiks teatud tüüpi hüpikaknad teie paremusjärjestust negatiivselt mõjutada, näiteks

  • Vahelehed, mida kasutatakse juriidiliste kohustuste täitmiseks, näiteks vanuse kontrollimine, küpsiste nõusolek või GDPR .
  • Sisselogimisaknad, et pääseda juurde privaatsele sisule, näiteks e-postile või palgamüüri taga olevale sisule.
  • Väikesed bännerid, mis on hõlpsasti tagasilükatavad ja „kasutavad mõistlikul hulgal ekraanipinda”, näiteks rakenduse installimise bännerid, mida kasutavad Chrome ja Safari.

Hüpikaknad, mis on korras

Alumine rida: mobiilsed hüpikaknad teevad kasutajatele pettumuse ja võivad teie haiget teha otsingu paremusjärjestus , nii et kasutage neid ainult siis, kui see on hädavajalik.

Kuidas teada saada, kas teil on mobiilisõbralik veebisait

Kui soovite teada, kas teie veebisait on mobiilisõbralik, võtab selle leidmine aega vaid mõne aja Google'i mobiilisõbralik testimistööriist - sisestage lihtsalt link oma veebisaidile ja klõpsake nuppu „Test URL”.

See tööriist hindab teie veebisaidi mobiilisõbralikkust ja annab üksikasjaliku ülevaate selle kohta, mida saate selle parandamiseks teha.

Google ja vabandage mobiilisõbralikkuse test

Kokkuvõte: Mobiilse veebisaidi kujundamine aastal 2021

Mobiilisõbralik veebisait on see, mis on loodud nutitelefonides ja tahvelarvutites hästi töötama. Ja nüüd, kui maailm on kõigepealt mobiilne, peaks olema ka teie veebisait.

Kokkuvõtteks võib öelda, et siin on kaheksa mobiiliveebisaidi kujundamise nõuannet:

  1. Tehke nupud piisavalt suured, et inimesed neid koputaksid.
  2. Veenduge, et tekst oleks piisavalt suur lugemiseks, ilma et kasutajatel oleks vaja suumida.
  3. Lihtsustage oma menüüd, et hõlbustada väikesel ekraanil navigeerimist.
  4. Asetage otsingufunktsioon esiküljele ja keskele ning lubage kasutajatel otsingutulemusi filtreerida.
  5. Muutke kasutajate vaevatu teiega ühenduse võtmine.
  6. Looge lihtsad ja kiiresti kasutatavad vormid.
  7. Asetage kutsed tegevusele voldiku kohale, nii et need oleksid silmatorkavad.
  8. Vältige kasutajate pettumust hüpikakendega, kui see pole hädavajalik.

Mis on teie mõtted mobiilse veebisaidi kujundamise kohta? Kas oleme unustanud mõnda head mobiilse veebidisaini head tava? Andke meile sellest teada allpool toodud kommentaarides!

Kas soovite rohkem teada saada?



^