Ang Distilled Practice para sa Pagbubuo ng Mobile Friendly Website

pagbuo ng mobile friendly na website


Noong 2015, inilabas ng Google ang algorithm na “Mobilegeddon” na uri ng parusahan ng mga website na hindi mobile friendly. Alinsunod sa algorithm na ito, bababa ang ranggo ng mga website na hindi mobile-friendly.

Tulad ng nakikita mo na ang mobile ay naabutan ang mga desktop at laptop at ito ang pinaka malawak na ginamit na aparato para sa pag-browse sa internet. Hinikayat ng Google ang mga negosyong mag-isip muna tungkol sa mobile.

global na paglaki ng trapiko ng mobile data

Nangangahulugan ito na ang mga graphic designer at marketers ay kailangang palawakin ang kanilang mga pananaw sa nakaraang mga desktop at laptop habang nagtatrabaho sa isang website.

Ano ang isang website na mobile-friendly?

ano ang mobile friendly website

Tulad ng iminumungkahi ng pangalan, ang isang mobile-friendly na website ay isang site na dinisenyo, binuo at na-optimize upang ang website ay magiging maayos sa mga mobile – ito ay mas masalimuot at kailangan kaysa sa tila. Sa pinaka pangunahing antas – nais ng mga gumagamit ng nilalaman na madaling tingnan sa mga mobile device.

Kung ang iyong teksto ay napakaliit, o ang mga imahe ay hindi naglo-load, magagalit ang mga gumagamit at umalis. Samakatuwid ito ay kritikal na magkaroon ng naaangkop na laki ng nilalaman. Sa kasamaang palad, nakakapagod na ipatupad dahil ang mga smartphone, mga tablet ay dumating sa iba’t ibang laki at resolusyon; kaya walang nakapirming format upang maipakita ang perpektong nilalaman sa ‘bawat’ aparato.

Narito ang ilang mga tip upang matulungan kang i-optimize ang iyong website para sa mobile.

Iwasan ang paggawa ng isang hiwalay na mobile-friendly website:

maiwasan ang paggawa ng hiwalay na mobile friendly website

Upang gawing madali ang pagpapatupad, kung minsan ang mga nagdisenyo, habang nagdidisenyo ng isang website para sa mobile, nagpasya na gupitin ang nilalaman upang ‘magkasya’ at kung aling mga bahagi na hindi maipakita sa mobile. Gayunpaman, hindi namin makontrol ang anong uri ng nilalaman na nais makita ng mga gumagamit at alinman posible na lumikha ng isang hiwalay na puwang para sa mobile bukod sa isang desktop.

Paparusahan ka ng Google kung nalaman mong mayroon ka magkatulad na nilalaman para sa dalawang parehong mga website – ang isa ay isang desktop at / o bersyon ng laptop habang ang isa ay isang mobile na bersyon dahil may iisang Google. Samakatuwid huwag isipin ang tungkol sa paglikha ng isang hiwalay na website para sa mobile.

Gumamit ng mga tumutugon na disenyo:

gumamit ng tumutugon na mga template ng disenyo

Ang responsableng disenyo ay nagbibigay-daan sa mga developer ng website na lumikha ng isang website na madaling matingnan sa iba’t ibang laki ng mga aparato. Binabawasan nito ang dami ng labis na pagsisikap na dapat ilagay sa mga developer upang gumawa ng isang website na katugma sa iba’t ibang laki ng aparato.

Ang tumutugon na disenyo ay gumagamit ng mga nababaluktot na mga imahe, nababaluktot na layout at mga surging na mga query sa mediaheet media. Kapag ginamit ang tumutugon na disenyo na ito sa isang website, malalaman ng webpage ang laki ng screen at pagpoposisyon ng gumagamit at pagkatapos ay ayusin nang maayos ang layout ng webpage.

Gumamit ng mga query sa media:

Pinapayagan ka ng mga query sa media na magtanong sa isang aparato tungkol sa laki nito at pagkatapos ay ituro ang browser upang ipakita ang mga bagay na sumusunod sa hanay ng CSS na iyong itinakda sa code:

halimbawa ng mga query sa screen ng media

Ang mga query sa media ay ang pangunahing bahagi sa pinaka-mobile-friendly na mga website ngunit bago iyon, kailangan mong tiyakin na ang system ay maayos na na-configure para sa lahat ng mga aparato na kasalukuyang ginagamit – hindi lamang dalawa o tatlong pinakasikat na mga mobile device. Panatilihin ang isang listahan ng mga aparato o maaari kang kumuha ng isang subscription upang makuha ang impormasyong ito.

Gumamit ng mga frameworks tulad ng Bootstrap:

Para sa harap na dulo, maaari mong gamitin ang malayang magagamit na mga frameworks tulad ng Foundation 3, Balangkas atbp Ang pinakamahusay na libreng balangkas ay Ang Bootstrap ng Twitter.

gumamit ng balangkas ng bootstrap

Ang Bootstrap ay isang front-end na balangkas na idinisenyo upang mabilis at hindi maiiwasang masukat ang web page ng iyong website sa anumang aparato. Ang pagpasok sa trabaho ng isang pre-built system ay mas madali kaysa sa paglikha ng isang bagong code para sa bawat posibleng kombinasyon sa iyong sarili (at kahit na pagsubok ito) – at ito ay mas mababa at pababa.

Ngunit bago ka magsimulang gumamit ng anumang balangkas, siguraduhin na pag-aralan kung ang balangkas ay ganap na katugma sa iyong website at mga layunin. Ang higit pa ay ang mga pasadyang mga code at pag-andar sa iyong website, mas mahirap ito upang matiyak na ang lahat ay gumagana nang maayos sa isang mobile device; kumuha ng tulong mula sa isang dalubhasa kung nahaharap ka ng anumang mga paghihirap.

Palaging gumamit ng isang virtual na Meta Tag:

Ang viewport ay isang virtual na lugar na ginamit ng engine na nagbibigay-kahulugan sa browser upang matukoy kung paano nai-scale at laki ang nilalaman. Ang pagkakaroon ng sinabi na, ito ay isang kritikal na code habang nagtatayo ng isang karanasan sa maraming aparato. Kung wala ang code na ito, ang iyong website ay hindi gagana nang maayos sa isang mobile device.

Sinasabi ng isang tag ng viewport sa iyong browser na ang pahina ay kailangang magkasya sa screen. Maraming iba pang mga pagsasaayos na maaari mong sabihin sa iyong viewport na kontrolin. Ang sumusunod ay ang inirerekomenda na isa upang magamit sa pagsisimula ng dokumento:

Zero in sa mas simpleng disenyo:

gumamit ng simpleng disenyo ng tumutugon

Ang makabuluhang pagkakaiba sa pagitan ng desktop at mobile website ay mas gusto ng mga tao ng isang simpleng disenyo ng website habang tinitingnan ang isang mobile. Ito ay isang bagay na tunay na mundo tulad ng anupaman – ang mga bagay na malaki at kumplikado ay naging mabagal sa isang mobile device at isa sa mga pangunahing hinihiling ng mga gumagamit ay ang pagkakaroon ng nilalaman ng website agad na magagamit.

Ang pagpapanatili ng mga disenyo ng simple ay gawing simple upang mapanatili ang atensyon ng mga manonood sa nilalaman na nais mong makita sa kanila – ang mga gumagamit ng mobile ay may isang mahusay na maikling span ng pansin at ito ay sa iyong pinakamahusay na interes na panatilihing simple ang disenyo sa halip na mamuhunan sa isang kumplikadong tema.

Huwag kailanman huwag pansinin ang Sukat ng Font at Sukat ng pindutan:

Ang laki ng font at laki ng pindutan sa iyong webpage matter ng maraming para sa mga mobile device. Ang laki ng font ay dapat na hindi bababa sa 14px. Ito ay maaaring magmukhang malaki, ngunit mas mahusay kaysa sa paggawa ng mag-zoom-in sa gumagamit upang mabasa ang iyong nilalaman; gawing simple para sa kanila sa pamamagitan ng pag-aayos ng font sa maximum na kalinawan. Ang tanging oras na dapat mong gamitin ang isang mas maliit na font (sa isang minimum na 12px) ay nasa label o form.

huwag pansinin ang laki ng font

Ngayon ay dumarating sa mga pindutan, mas malaki ang pindutan, mas mahusay – mabawasan nito ang pagkakataon ng mga gumagamit ng pagpindot sa isang maling pindutan o nawawala ang pagpindot sa pindutan. Tulad ng mga alituntunin ng Apple inirerekumenda ang isang laki ng pindutan na hindi bababa sa 44px sa pamamagitan ng 44px. Sa tulong ng mga patnubay na ito, mapapabuti mo ang iyong karanasan sa gumagamit at dagdagan ang rate ng conversion para sa E-commerce.

Pag-laki ng laki ng imahe:

Kapag nakikipag-ugnayan sa mga mobile device, ang layunin ay ang magkaroon ng pinakamaliit na laki ng file para sa mga imahe habang naghahanap pa rin ng presko at mayaman sa anumang screen na ito ay tiningnan. Ang dahilan ay ang bandwidth ng isang mobile device ay mas mababa kumpara sa isang desktop o laptop at sa gayon ay nagiging sanhi ng mas matagal na oras ng paglo-load.

Kaya kung gagawin mong mag-download ang iyong mga manonood ng isang 1MB file upang makita ang isang imahe ng thumbnail, sila ay magagalit at iwanan ang website.

Ang pagiging mabait sa mobile ay hindi lamang tungkol sa pagkakaroon ng isang magandang site – ngunit din ang pagpapabuti ng karanasan ng gumagamit at ang oras ng paglo-load. Ang pag-urong ng laki ng imahe ay gumagamit ng mas kaunting data (pag-save ng data ng mga limitadong plano ng data), tumutulong upang ma-load ang pahina nang mas mabilis at mag-iwan ng isang positibong impression ng iyong website.

Alisin ang default na zoom:

Ang auto-zoom ay maaaring guluhin ang mga elemento ng layout, lalo na para sa mga imahe at pag-navigate. Maaari itong lumitaw maliit o masyadong malaki sa iyong layout. Upang malutas ang problemang ito, gamitin ang tag ng viewport meta upang mag-set up ng mga pasadyang variable sa loob ng nilalaman. Tiyaking idinagdag mo ang tag sa iyong HTML:

Subukang gamitin ang karaniwang mga font:

Ginagawa ng pasadya, malikhaing mga font na magmukhang maganda ang iyong website ngunit kung sakaling ang mga mobile device, ang mga gumagamit ay hindi nais na ma-prompt upang mag-download ng isang font upang matingnan ang isang webpage. Pagkakataon na hindi nila mai-download ang font at lumipat sa ibang website sa halip.

Bagaman ang karamihan sa mga font ay naka-install sa mobile device at samakatuwid magagawa mong magamit ang mga nasa disenyo ng iyong website. Mayroong isa pang bagay na dapat tandaan na, bagaman – ang ilang mga font ay mas madali o mahirap na mabasa ang ibat ibang laki, samakatuwid siguraduhing suriin mo ang pagiging madaling mabasa ng font bago gamitin ito sa iyong disenyo.

Alalahanin, ang mga direksyon:

Ang isang average na desktop o laptop ay pahalang, siyempre mag-scroll pataas at pababa ngunit malawak ito. Ang mga Smartphone, sa kabilang banda, ay malambot at paninirang-puri na karamihan, samakatuwid ang lapad ng nilalaman ay maaaring mag-iba at samakatuwid ay kailangang pagsasaalang-alang. Kapag lumilikha ka ng mga video, mga imahe, mga drop-down, tandaan ang direksyon na gagamitin ng mga tao habang tinitingnan ang nilalaman.

Huwag matakot na umasa sa isang propesyonal upang ayusin ang iyong website at gawin itong palakaibigan kung may nabigo. Maaaring mangailangan ito ng ilang pamumuhunan ngunit sa pang-araw-araw na pagdaragdag ng mga mobile na gumagamit at pag-update ng algorithm ng Google, ang pamumuhunan na ito ay maaaring patunayan na isang kinakalkula.

Lumayo

Sa pagpapakilos ng mundo, napakahalaga na panatilihin ang iyong website na mobile friendly at sa katunayan, isang bagay sa itaas na inaasahan, pagkatapos ay maaari mong maakit ang mga gumagamit sa iyong website. Tiyakin na basahin mo ang mga alituntunin para sa kabaitan ng mobile at kumuha ng opinyon mula sa mga eksperto bago simulan ang gawain ng iyong website. Inaasahan ko na ang mga tip na ito ay makakatulong sa iyo upang gawin ang iyong website na mobile-friendly. Ang iyong website ay hindi lamang ang bagay na kailangang maging mobile-friendly, tiyakin na ang iyong pamamahala sa lipunan ay mobile-friendly din.

Ang Earleen Brown ay nagtatrabaho sa isang kilalang kumpanya ng SEO Services, isang nangungunang SEO Company India. Ang kumpanya ay karaniwang isang IT firm na Nagbibigay Mga Serbisyo ng SEO sa India at malaki ang naitulong sa kanya sa pagpapahusay ng kanyang mga kasanayan sa pagsusulat.

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