Jinsi ya kufanya tovuti kujibu?

Kwa demokrasia ya simu mahiri na kompyuta kibao, kutengeneza tovuti msikivu imekuwa muhimu. Tovuti inayojibu inaweza kuzoea kiotomatiki vifaa tofauti vya kuvinjari - desktop, simu, kompyuta kibao - kutoa uzoefu bora wa mtumiaji. Tovuti inayojibu pia ni nzuri kwa marejeleo ya wavuti.

Kulingana na Google, zaidi ya 60% ya utafutaji sasa inafanywa kutoka kwa simu ya rununu. Kwa hivyo ni muhimu kuboresha tovuti yako kwa vifaa hivi, vinginevyo trafiki yako itapungua. Bado tovuti nyingi bado hazijaundwa kulingana na hali.

Siku hizi, muundo wa kinachojulikana kama "tovuti"msikivu” (au kubadilika-badilika) imekuwa muhimu. Lakini hii ina maana gani hasa? Je, unawezaje kufanya tovuti iboreshwe kwa ukubwa wote wa skrini?

Muundo sikivu unajumuisha kuunda tovuti inayoweza kujirekebisha kiotomatiki kulingana na mpangilio na vipimo ili kutoa matumizi bora ya mtumiaji kwenye vifaa vyote: kompyuta za mezani 🖥️, kompyuta kibao 💻, simu mahiri 📱.

Hapa kuna mbinu bora zaidi za kuweka ili kuunda tovuti inayoitikia kikamilifu:

🚀 Tumia vizio linganishi (%, em, rem) badala ya pikseli katika CSS

Ili kuruhusu ubadilikaji kamili wa vipengele, inashauriwa kutumia vitengo vya kipimo kama vile %, em au rem badala ya saizi zisizobadilika katika sheria zako za CSS. Asilimia huruhusu kubadilisha ukubwa kiotomatiki kulingana na ukubwa wa skrini.

Mojawapo ya mbinu bora zaidi za kuunda tovuti msikivu ni kuepuka kutumia saizi zisizobadilika katika sheria zako za CSS. Hakika, saizi haziruhusu ukubwa wa vipengele kubadilishwa kulingana na kifaa.

Inapendekezwa kupendelea kinachojulikana vitengo vya jamaa kama asilimia (%), em au rem mahali. % haswa itaruhusu kubadilisha ukubwa kiotomatiki kwa visanduku, maandishi, pambizo, n.k. kulingana na saizi ya skrini.

Kwa mfano, upana uliowekwa 50% katika CSS itahakikisha kuwa kipengele kitachukua 50% ya upana unaopatikana kila wakati, iwe kwenye skrini ya Kompyuta, kompyuta kibao au simu mahiri. Njia hii ya maji ni bora kwa kuunda mipangilio inayoweza kubadilika ambayo inabadilika kikamilifu.

🚀 Bainisha hoja za midia katika laha ya mtindo wa CSS

Hoji za media za CSS ni maagizo muhimu kwa tengeneza tovuti sikivu. Wanakuruhusu kufafanua sheria maalum za CSS ambazo zitatumika kulingana na upana wa kidirisha cha onyesho (njia ya kutazama).

Unaweza kutaja kwa urahisi mipangilio, fonti, kando, nk. tofauti kulingana na ikiwa mtumiaji yuko kwenye kompyuta ya mezani, kompyuta kibao au simu mahiri. Kwa mfano, tunaweza kufafanua hilo ndani upana wa chini ya 768px, mabadiliko ya urambazaji kwenye menyu ya hamburger.

Hoja za media hukuruhusu kurekebisha uwasilishaji na mpangilio wa vipengee vizuri kulingana na saizi ya skrini. Pamoja na vitengo vya CSS vinavyobadilika, ni muhimu kwa tengeneza tovuti kamili msikivu na kutoa matumizi bora ya mtumiaji.

🚀 Fanya picha kuitikia

Picha lazima pia kubadilishwa ili kuwazuia kunyoosha kwa usawa kwenye vifaa fulani. Lazima kwa hiyo boresha picha zako kwa SEO. Mbinu bora rahisi ni kuweka upana wao kama asilimia katika msimbo wa HTML au kupitia CSS.

Tunaweza pia kutumia mali ya CSS "Upana wa juu: 100%" ili picha ikubaliane na chombo chake huku ikidumisha uwiano wake. Inapendekezwa pia kufafanua matoleo kadhaa ya picha sawa katika maazimio tofauti na kuashiria kwa kivinjari ni toleo gani la kutumika kulingana na saizi ya skrini kupitia " sifa.srcset".

Katika kujibu, picha zinapaswa kubadilisha ukubwa kiotomatiki badala ya kunyoosha, ili kuhakikisha ubora bora kwenye vifaa vyote.

🚀 Tumia mfumo sikivu wa CSS

Kutumia mfumo sikivu wa CSS ni mojawapo ya mbinu bora za kufanya tovuti iitikie. Mifumo ya CSS kama vile Bootstrap, Foundation, Bulma, na Materialize hutoa gridi za mpangilio zilizofafanuliwa awali na vipengee vinavyoitikia ambavyo hurahisisha kuunda tovuti inayojibu.

Mifumo hii hutoa madarasa ya CSS yaliyo tayari kutumia ambayo hukuruhusu kuunda mipangilio ukurasa rahisi na msikivu. Wanatumia mbinu kama vile hoja za midia kurekebisha mpangilio na mtindo kiotomatiki kulingana na saizi ya skrini ya kifaa kinachotumiwa kutazama tovuti.

Kwa kutumia mfumo sikivu wa CSS, unaweza kusanidi kwa haraka muundo msingi wa tovuti yako ambao hubadilika kwa urahisi kwa vifaa na saizi tofauti za skrini. Unaweza kupanga vipengele vya tovuti yako kwa urahisi kwa kutumia gridi zinazotolewa na mfumo, ambao unaruhusu mpangilio thabiti kwenye vifaa vyote.

🚀 Jaribu uwasilishaji kwenye vifaa vyote

Ni muhimu kujaribu onyesho la tovuti yako kwenye kompyuta, kompyuta kibao na simu mahiri ili kuhakikisha kuwa inabadilika kikamilifu kwa kila upana wa skrini.

Vivinjari vingi vya kisasa, kama vile Google Chrome na Firefox ya Mozilla, kutoa zana jumuishi za maendeleo. Zana hizi hukuruhusu kuiga vifaa na saizi tofauti za skrini ili kuibua uwasilishaji wa tovuti. Unaweza kupata zana hizi kwa kubofya kulia kwenye ukurasa na kisha kuchagua "Kagua"au"Kagua kipengele".

Kuna huduma za bure mtandaoni kama vile BrowserStack na CrossBrowserTest ambayo hukuruhusu kujaribu uwasilishaji wa tovuti kwenye anuwai ya vifaa na vivinjari. Huduma hizi hukuruhusu kutazama tovuti yako kwenye vifaa tofauti pepe au halisi, kukupa wazo wazi la jinsi itakavyoonekana kwenye kila kifaa.

Viigaji vya kifaa na viigaji ni programu inayoiga sifa na tabia ya vifaa halisi. Kwa mfano, kujaribu kwenye iOS, unaweza kutumia emulator ya Xcode kwa vifaa vya Apple.

Kwa Android, kiigaji cha Android Studio kinapatikana. Zana hizi hukuruhusu kujaribu tovuti yako kwenye vifaa pepe vyenye ubora tofauti wa skrini.

🚀 Epuka vipengele vya ukubwa usiobadilika

Ili kufanya tovuti iitikie, ni muhimu kuepuka vipengele vya ukubwa usiobadilika. Hapa kuna vidokezo vya kufanikisha hili:

Tumia vitengo vinavyonyumbulika vya kipimo: Badala ya kutumia pikseli (px) kufafanua ukubwa wa vipengele, badala yake tumia vipimo vinavyonyumbulika kama vile asilimia (%) au vitengo vya kituo cha kutazama (vh, vw). Hii huruhusu vipengele kuongeza ukubwa wa skrini.

Tumia rafu zinazonyumbulika: Gridi zinazonyumbulika, kama zile zinazotolewa na mifumo sikivu ya CSS, hukuruhusu kuunda mipangilio inayobadilika kwa kutumia safuwima na safu mlalo zinazonyumbulika. Hii inaruhusu vipengele kujipanga upya kiotomatiki kulingana na ukubwa wa skrini, na kutoa hali ya utumiaji thabiti kwenye vifaa vyote.

Epuka upana usiobadilika wa picha: Badala ya kubainisha upana usiobadilika wa picha, tumia kipengele cha CSS "max-upana: 100%;" kuruhusu picha kurekebisha ukubwa sawia na saizi ya kontena lao. Hii inahakikisha kuwa picha zinabadilika kwa usahihi kwa vifaa tofauti bila kufurika au kupotosha.

Tumia faili ya maswali ya media: Hoji za media ni sheria za CSS zinazokuruhusu kutumia mitindo tofauti kulingana na saizi ya skrini. Zitumie kurekebisha mtindo wa vipengee vya ubora tofauti wa skrini ili kuboresha utazamaji kwenye kila kifaa.

🚀 Rahisisha urambazaji kwenye simu ya mkononi

Ili kurahisisha urambazaji wa vifaa vya mkononi na kutoa matumizi bora ya mtumiaji, hapa kuna vidokezo vya kufuata:

Tumia menyu ya kusogeza ya simu ya mkononi: Badilisha menyu ya kawaida ya kusogeza na menyu ya kusogeza ya simu ya mkononi, kama vile menyu ya hamburger. Aina hii ya menyu husaidia kupunguza mrundikano wa skrini na kufanya urambazaji kuwa angavu zaidi kwa watumiaji wa simu.

Weka kikomo idadi ya vipengele vya urambazaji: Punguza idadi ya vipengee vya kusogeza vinavyoonyeshwa kwenye menyu ya simu ya mkononi. Tambua vipengele muhimu zaidi na uzingatie kwa urambazaji rahisi. Unaweza pia kupanga vitu sawa chini ya kategoria ili kuzuia menyu ndefu.

Tumia urambazaji wa ngazi moja : Epuka menyu kunjuzi changamano zilizo na viwango vingi vya menyu ndogo kwenye vifaa vya rununu. Badala yake, chagua urambazaji wa ngazi moja, ambapo watumiaji wanaweza kuabiri moja kwa moja hadi sehemu kuu za tovuti bila kulazimika kupitia viwango vingi.

Tumia vitufe vya vitendo vilivyo wazi: Tumia vitufe vya vitendo vilivyo wazi na vinavyoweza kubofya kwa urahisi ili kuwaelekeza watumiaji kwenye vitendo mahususi, kama vile kuongeza bidhaa kwenye rukwama au kuwasilisha fomu. Hakikisha vitufe ni vikubwa vya kutosha kuguswa kwa urahisi na kidole chako.

Tumia ikoni angavu: Tumia aikoni zinazotambulika kuwakilisha vitendo au kategoria katika menyu ya kusogeza ya simu ya mkononi. Aikoni zilizoundwa vizuri zinaweza kuwasaidia watumiaji kuelewa kwa haraka maana ya vipengele vya kusogeza bila kulazimika kusoma lebo ndefu.

🚀 Kufunga

Muundo wa Tovuti zinazojibu zimekuwa jambo la lazima ili kutoa matumizi bora ya mtumiaji kwenye vifaa vyote.

Kwa kufuata mbinu bora kama vile kutumia vizio vya CSS vinavyonyumbulika, kutekeleza hoja za midia au kuboresha picha, tovuti yoyote inaweza kufanywa kubadilika kikamilifu.

Shukrani kwa sheria hizi chache rahisi, utahakikisha uonyeshaji bora wa tovuti yako kwenye kompyuta za mezani, kompyuta kibao na simu mahiri. Hakuna kukuza ndani na nje tena kwa urambazaji wa starehe!

Ili kwenda zaidi, napendekeza kutumia programu-jalizi yenye nguvu ya WP Rocket kwenye WordPress. Itakuruhusu kuongeza kadiri iwezekanavyo kasi ya upakiaji wa tovuti yako msikivu. Tovuti ambayo inaweza kubadilika na ya haraka sana ndio ufunguo wa uzoefu wa mtumiaji asiye na kasoro!

Maswali

Swali: Ubunifu msikivu ni nini?

A: The kubuni msikivu ni mbinu ya kubuni wavuti inayolenga kutengeneza tovuti adaptive na kazi kwenye vifaa vyote na saizi za skrini. Huruhusu maudhui na mpangilio kurekebishwa kiotomatiki ili kutoa matumizi bora ya mtumiaji, iwe kwenye kompyuta ya mezani, kompyuta kibao au simu mahiri.

Swali: Kwa nini ni muhimu kufanya tovuti iitikie?

J: Kufanya tovuti iitikie ni muhimu ili kutoa hali ya utumiaji thabiti, yenye ubora kwenye vifaa vyote. Pamoja na matumizi ya vifaa vya rununu kuongezeka, ni muhimu kurekebisha tovuti yako ili kukidhi matarajio ya watumiaji na kuboresha viwango vyako vya injini tafuti.

Swali: Ni kanuni gani kuu za ukuzaji wa wavuti sikivu?

Jibu: Kanuni muhimu za ukuzaji wa wavuti unaojibu ni pamoja na kutumia gridi zinazonyumbulika, kuepuka vipengele vya ukubwa usiobadilika, kurekebisha picha, kutumia hoja za midia kutumia mitindo tofauti kulingana na ukubwa wa picha. skrini, na kurahisisha urambazaji kwenye simu ya mkononi.

Swali: Je, mfumo wa CSS msikivu ni upi?

Bado Mfumo wa CSS Kiitikio ni seti ya mitindo ya CSS iliyotengenezwa awali na vipengele vinavyoitikia ambavyo hurahisisha kuunda tovuti inayojibu. Mifumo hii, kama vile Bootstrap, Foundation, na Bulma, hutoa gridi za mpangilio zinazonyumbulika, madarasa ya CSS yaliyo tayari kutumia, na vipengele vinavyoitikia ili kuharakisha mchakato wa maendeleo.

Swali: Je, ninajaribuje jinsi tovuti inavyofanya kazi kwenye vifaa tofauti?

J: Ili kujaribu jinsi tovuti inavyofanya kazi kwenye vifaa tofauti, unaweza kutumia zana za wasanidi wa kivinjari ambazo hukuruhusu kuiga ukubwa tofauti wa skrini. Unaweza pia kutumia huduma za mtandaoni, viigaji vya kifaa au viigaji, au kufanya majaribio kwenye vifaa halisi.

Swali: Je, ni mbinu gani bora za kurahisisha urambazaji kwenye simu ya mkononi?

J: Ili kurahisisha urambazaji wa vifaa vya mkononi, tumia menyu ya kusogeza ya simu ya mkononi kama vile menyu ya hamburger, punguza idadi ya vitu vya kusogeza, tumia usogezaji wa ngazi moja, tumia vitufe vya vitendo vilivyo wazi, boresha kwa upakiaji wa kasi, tumia aikoni angavu na jaribu usogezaji mara kwa mara kwenye sehemu tofauti. vifaa.

Swali: Ninawezaje kufanya tovuti yangu iliyopo ijisikie?

J: Ili kufanya tovuti yako iliyopo iweze kuitikia, unaweza kutumia mfumo sikivu wa CSS ili kurahisisha kusanidi muundo unaoweza kubadilika. Utahitaji pia kurekebisha msimbo uliopo wa CSS ili kutumia vipimo vinavyonyumbulika, epuka vipengele vya ukubwa usiobadilika, na kutumia mitindo mahususi kwa ukubwa tofauti wa skrini kwa kutumia hoja za maudhui.