Destilirana praksa za izdelavo spletnega mesta, prilagojenega mobilnim napravam

izdelava spletnega mesta za mobilne naprave


Google je leta 2015 predstavil algoritem “Mobilegeddon”, ki je kaznoval spletna mesta, ki niso bila prijazna do mobilnih naprav. V skladu s tem algoritmom bi se uvrstitev spletnih mest, ki niso bila prijazna za mobilne naprave, zmanjšala.

Kot lahko vidite, je mobilni telefon prehitel namizja in prenosnike ter je najbolj razširjena naprava za brskanje po internetu. Google je podjetja spodbudil, da najprej razmišljajo o mobilnih napravah.

svetovna rast prometa mobilnih podatkov

To pomeni, da morajo grafični oblikovalci in tržniki razširiti svojo vizijo na namizja in prenosnike, medtem ko delajo na spletnem mestu.

Kaj je spletno mesto, ki je prijazno mobilnim napravam?

kaj je mobilno prijazno spletno mesto

Kot že ime pove, mobilno spletno mesto je spletno mesto zasnovano, razvito in optimizirano tako, da bo spletna stran gladka na mobilnih napravah – je bolj zapletena in nujna, kot se zdi. Na najbolj osnovni ravni – uporabniki želijo vsebino, ki jo je enostavno videti na mobilnih napravah.

Če je vaše besedilo premalo ali se slike ne nalagajo, se bodo uporabniki razdražili in odšli. Zato je ključnega pomena, da se vsebina ustrezno prilagodi. Na žalost je težko izvesti, ker pametni telefoni, tablični računalniki prihajajo v različnih velikostih in ločljivostih; zato ni fiksne oblike, ki bi vsebino popolnoma prikazala v vsaki napravi.

Tu je nekaj nasvetov, ki vam bodo pomagali optimizirati vaše spletno mesto za mobilne naprave.

Izogibajte se izdelavi ločenega spletnega mesta, prilagojenega mobilnim napravam:

izogibajte se izdelavi ločenih mobilnih spletnih strani

Da bi olajšali izvedbo, se včasih oblikovalci med oblikovanjem spletnega mesta za mobilne naprave odločijo, da bodo vsebino izrezali tako, da je “primerna” in katere dele ne bo prikazala na mobilnem telefonu. Vendar ne moremo nadzorovati, kakšno vsebino si uporabniki želijo videti, prav tako ni mogoče ustvariti ločenega prostora za mobilne naprave razen namizja.

Google vas bo kaznoval, če ugotovi, da imate enaki vsebini za dve isti spletni strani – eno je različica za namizje in / ali prenosnik, drugo pa mobilna različica, ker obstaja samo en Google. Zato sploh ne razmišljajte o ustvarjanju ločenega spletnega mesta za mobilne naprave.

Izkoristite odzivne zasnove:

uporabljajte odzivne predloge za oblikovanje

Odziven dizajn omogoča razvijalcem spletnih strani, da ustvarijo spletno stran, ki si jo je mogoče enostavno ogledati v različnih velikostih naprav. To zmanjšuje veliko dodatnega napora, ki ga morajo razvijalci vložiti, da spletno mesto postane združljivo z različnimi velikostmi naprav.

Odziven dizajn uporablja fleksibilne slike, prilagodljive postavitve in naraščajoče poizvedbe po tablici sloga. Ko bo ta odziven dizajn uporabljen na spletnem mestu, bo spletna stran lahko zaznala velikost in pozicioniranje zaslona uporabnika in nato ustrezno prilagodila postavitev spletne strani.

Izkoristite medijske poizvedbe:

Medijske poizvedbe omogočajo, da napravo vprašate glede njene velikosti in nato usmerite brskalnik, da prikaže stvari po naboru CSS, ki ste ga nastavili v kodi:

primeri poizvedb o medijskih zaslonih

Poizvedbe o medijih so ključni del najbolj mobilnih spletnih mest, vendar morate pred tem poskrbeti, da je sistem pravilno konfiguriran za vse trenutno uporabljene naprave – ne le za dve ali tri najbolj priljubljene mobilne naprave. Hranite seznam naprav ali lahko pridobite te informacije.

Izkoristite okvire, kot je Bootstrap:

Za sprednji del lahko uporabite prosto dostopne okvire, kot so Fundacija 3, Okostje itd. Najboljši prosti okvir je Twitter’s Bootstrap.

uporabite okvir za zagon

Bootstrap je osrednji okvir, zasnovan za hitro in neizogibno spreminjanje spletne strani vašega spletnega mesta na katero koli napravo. Delo vnaprej zgrajenega sistema je veliko lažje kot ustvarjanje nove kode za vsako možno kombinacijo na lastno pobudo (in celo preizkušanje) – in veliko manj je navzdol in zunaj.

Preden začnete uporabljati kateri koli okvir, se prepričajte, da preučite, ali je okvir popolnoma združljiv z vašim spletnim mestom in cilji. Bolj kot so kode in funkcije po meri na vašem spletnem mestu, težje bo zagotoviti, da na mobilni napravi vse deluje nemoteno; če imate kakršne koli težave, se obrnite na pomoč strokovnjaka.

Vedno uporabite virtualno Meta oznako:

Ogledno polje je navidezno območje, ki ga mehanizem za razlago brskalnika uporablja za določitev obsega in velikosti vsebine. Po tem je kritična koda pri gradnji izkušenj z več napravami. Brez te kode vaše spletno mesto ne bo delovalo dobro na mobilni napravi.

Oznaka prizornega brskalnika pove vaš brskalnik, da se mora stran prilegati na zaslon. Obstaja še veliko drugih konfiguracij, s katerimi lahko svojemu prikazu ogledujete nadzor. Spodaj je priporočeno, ki ga je treba uporabiti na začetku dokumenta:

Zelo enostavnejša zasnova:

uporabite preprost odziven dizajn

Pomembna razlika med namiznimi in mobilnimi spletnimi mesti je, da imajo ljudje med gledanjem na mobilnem telefonu preprosto oblikovanje spletnega mesta. To je stvar v resničnem svetu, kot karkoli drugega – velike in zapletene stvari postanejo počasne na mobilni napravi, ena glavnih zahtev uporabnikov pa je, da imajo vsebino spletnega mesta takoj na voljo.

S preprostim dizajnom je tudi preprosto, da boste gledalci pozorni na vsebino, za katero želite, da jo vidijo – mobilni uporabniki imajo zelo kratek čas pozornosti, zato je v vašem interesu, da ohranite preprost dizajn, ne pa da vlagate v kompleks tema.

Nikoli ne prezrite velikosti pisave in velikosti gumba:

Velikost pisave in velikost gumba na vaši spletni strani sta zelo pomembni za mobilne naprave. Velikost pisave mora biti najmanj 14 slikovnih pik. To je morda videti veliko, vendar je bolje, kot da uporabnik poveča za branje vaše vsebine; olajšajte jim prilagoditev pisave na največjo jasnost. Edini čas, ko morate uporabiti manjšo pisavo (najmanj 12px), je na nalepki ali obrazcih.

ne prezrite velikosti pisave

Zdaj, ko pridete do gumbov, večji je gumb, tem bolje – to bo zmanjšalo možnost, da uporabniki pritisnejo na napačen gumb ali manjkajo, če pritisnejo na gumb. Tako kot Apple-ove smernice priporočajo, da je velikost gumba vsaj 44px do 44px. S pomočjo teh smernic boste izboljšali svojo uporabniško izkušnjo in povečali stopnjo konverzije za e-poslovanje.

Povečajte velikost slike:

Pri delu z mobilnimi napravami je cilj imeti najmanjšo velikost datoteke za slike, hkrati pa so videti nežne in bogate na katerem koli zaslonu, ki so si ga ogledali. Razlog je v tem, da je pasovna širina mobilne naprave v primerjavi z namizjem ali prenosnikom veliko manjša in zato povzroča daljši čas nalaganja.

Če boste gledalci naložili datoteko v velikosti 1 MB, si boste morali ogledati sličico, se bodo razdražili in zapustili spletno mesto.

Prijaznost do mobilnih naprav ni le v tem, da bi imeli lepo spletno mesto, ampak tudi izboljšali uporabniško izkušnjo in čas nalaganja. S krčenjem velikosti slike se porabi manj podatkov (shranjevanje podatkov z omejenimi podatkovnimi načrti), hitreje se naloži stran in pusti pozitiven vtis o vašem spletnem mestu.

Znebite se privzetega povečave:

Samodejno povečavo lahko zmede elemente postavitve, posebej za slike in navigacijo. V vaši postavitvi se lahko zdi majhna ali prevelika. Če želite rešiti to težavo, uporabite metaoznako viewport za nastavitev spremenljivk po meri znotraj vsebine. Prepričajte se, da ste v HTML dodali oznako:

Poskusite uporabiti standardne pisave:

Prilagodljive pisave naredijo vaše spletno mesto lepo, vendar v primeru mobilnih naprav uporabniki ne želijo, da naložijo pisavo za ogled spletne strani. Možno je, da ne bodo prenesli pisave in se namesto tega preselili na drugo spletno mesto.

Čeprav je večina pisav nameščena v mobilni napravi in ​​jih boste tako lahko uporabljali v oblikovanju svojega spletnega mesta. Ne pozabite pa na to še nekaj – nekatere pisave je lažje ali težje prebrati različne velikosti, zato se prepričajte, da preverite berljivost pisave, preden jo uporabite pri oblikovanju.

Upoštevajte, navodila:

Povprečno namizje ali prenosnik je vodoravno, seveda se pomikamo navzgor in navzdol, vendar je široko. Pametni telefoni so na drugi strani večinoma elegantni in žaljivi, zato je širina vsebine lahko različna, zato je treba razmisliti. Ko ustvarjate videoposnetke, slike, spustne meje, se spomnite smeri, ki jo bodo ljudje uporabljali med ogledom vsebine.

Ne bojte se zanesti se na strokovnjaka, ki bo popravil vaše spletno mesto in naj bo prijazen, če kar koli ne bo uspelo. To bo morda zahtevalo nekaj naložbe, vendar se lahko z naložbami, ki se vsak dan povečujejo, in Googlovimi posodobljenimi algoritmi, izkaže za izračunano.

Odpeljite:

Z mobilizacijo sveta je zelo pomembno, da bo vaše spletno mesto mobilno prijazno in dejansko nekaj nad pričakovanji, šele takrat lahko na svoje spletno mesto privabite uporabnike. Preden začnete delati na svojem spletnem mestu, se prepričajte, da ste prebrali navodila za prijaznost do mobilnih naprav in prevzeli mnenje strokovnjakov. Upam, da vam bodo ti nasveti pomagali narediti spletno mesto mobilno prijazno. Vaše spletno mesto ni edino, kar mora biti prilagojeno mobilnim napravam. Zagotovite, da je tudi vaše socialno upravljanje mobilno.

Earleen Brown sodeluje s cenjenim podjetjem za SEO Services, vodilnim SEO podjetjem v Indiji. Podjetje je v osnovi IT podjetje Providing SEO Services Indija in ji je veliko pomagala pri izboljšanju pisnih sposobnosti.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map