Uyenza njani iwebhusayithi ukuba iphendule?

Ngedemokhrasi yee-smartphones kunye neetafile, ukwenza iwebhusayithi noluphendulayo iye yaba yimfuneko. Isiza esiphendulayo siyakwazi ukuziqhelanisa ngokuzenzekelayo nezixhobo ezahlukeneyo zokukhangela - desktop, mobile, tablet -ukubonelela ngamava omsebenzisi afanelekileyo. Iwebhusayithi ephendulayo nayo ilungile ireferensi yewebhu.

NgokukaGoogle, ngaphezulu kwe-60% yokukhangela ngoku yenziwe kwiselula. Ke ngoko kunyanzelekile ukuba wenze indawo yakho ilungele ezi zixhobo, kungenjalo itrafikhi yakho iya kuhla. Nangona kunjalo iisayithi ezininzi azikayilwanga ngokuguquguqukayo. Kule mihla, uyilo lwezinto ezibizwa ngokuba "ziiwebhusayithi"noluphendulayo” (okanye ubhetyebhetye) kuye kwaba yimfuneko. Kodwa kuthetha ukuthini kanye oku? Ungayenza njani iwebhusayithi ilungiselelwe zonke iisayizi zesikrini?

Uyilo oluphendulayo lubandakanya ukudala indawo ekwazi ukuziqhelanisa ngokuzenzekelayo ngokwendlela yoyilo kunye nemilinganiselo ukuze ibonelele ngamava afanelekileyo omsebenzisi kuzo zonke izixhobo: iidesktops, iitafile, ii-smartphones.

Yintoni indawo ephendulayo?

Khawucinge ngewebhusayithi efana ne-digital superhero, ekwazi ukuziguqula ngokuthanda kwayo. Yile nto kanye isiza esiphendulayo siyiyo! Inamandla omlingo okuziqhelanisa nazo zonke izikrini, nokuba yi-smartphone yakho oyisebenzisayo kwezothutho, ithebhulethi yakho efakwe kakuhle kwisofa yakho, okanye ikhompyuter yakho eofisini. Ngokungathi ngomlingo, umxholo ulungelelaniswa ngokutsha, imifanekiso ilungiswa ngokutsha, kwaye ukukhangela kwenziwa lula ukukunika amava enziwe ngomthungi.

Le ndawo yobukrelekrele ifana nokuba nomncedisi wakho wokukhangela kwiwebhu. Ilindele iimfuno zakho kwaye ilungelelanise ngokufanelekileyo. Zimkile iintsuku apho bekufuneka ujike iminwe yakho ukuze usondeze kumbhalo omncinci okanye ujonge imenyu engafanelekanga kwiscreen sakho sokuchukumisa. Isiza esiphendulayo siyasiqonda isixhobo sakho kwaye sihlengahlengise ngoko nangoko, senza utyelelo lwakho lube lonwabe kangangoko, nokuba ukwiscreen sefowuni esincinci okanye isijongi esikhulu sekhompyuter.

Ekugqibeleni, indawo ephendulayo ifana nokuba newebhusayithi ethetha zonke iilwimi zezixhobo zanamhlanje. Inxibelelana ne-smartphone yakho kunye nelaptop yakho, iqinisekisa ukuba umyalezo uhlala ufika ngokucacileyo, nokuba yeyiphi na "intetho" yesikrini. Sisisombululo esigqibeleleyo kwihlabathi lethu elidibeneyo, apho sihlala sitshintsha phakathi kwezixhobo. Ngesiza esiphendulayo, uqinisekile ukuba uhlala unamava okukhangela agudileyo kwaye amnandi, nasiphi na isixhobo okhetha ukusisebenzisa.

Indlela yokwenza isayithi iphendule?

Ukudala iwebhusayithi ephendulayo ayingomlingo, kodwa kuseti yeendlela kunye nezenzo ezilungileyo ezivumela indawo yakho ukuba iqhelane nazo zonke izikrini. Nokuba ungumphuhlisi onamava okanye umtsha kwihlabathi lewebhu, nanga amanyathelo angundoqo okuguqula indawo yakho engatshintshiyo ibe liqonga elibhetyebhetye neliguqukayo. Ngokulandela le migaqo, uya kuba nakho ukubonelela ngamava afanelekileyo omsebenzisi kuzo zonke izixhobo, ukusuka kwii-smartphones ukuya kwizikrini ezinkulu zedesktop.

Sebenzisa iiyunithi ezizalanayo (%, em, rem) kuneepixels kwiCSS

Ukuvumela ukulungelelaniswa okupheleleyo kwezinto, kuyacetyiswa ukuba kusetyenziswe iiyunithi ezihambelanayo zokulinganisa ezifana %, em okanye i-rem kunokuba pixels ezisisigxina kwimithetho yakho CSS. Iipesenti zivumela uhlengahlengiso oluzenzekelayo ngokwesayizi yesikrini. Enye yezona ndlela ziphambili zokuziqhelanisa ukudala indawo ephendulayo kukuphepha ukusebenzisa ipixels ezinzileyo kwimithetho yakho yeCSS. Ewe, ii-pixels azivumeli ubungakanani bezinto ukuba zilungelelaniswe ngokuxhomekeke kwisixhobo.

Kuyacetyiswa ukuba uthande oko kubizwa ngokuba ziiyunithi ezizalanayo ezifana iipesenti (%), em okanye rem endaweni yoko. I-% ngokukhethekileyo iya kuvumela uhlengahlengiso oluzenzekelayo lweebhokisi, imibhalo, imida, njl. kuxhomekeke kubungakanani beskrini. Umzekelo, ububanzi bubekwe ku I-50% kwi-CSS iya kuqinisekisa ukuba i-elementi iya kuhlala ithatha i-50% yobubanzi obukhoyo, nokuba kwi-PC, ithebhulethi okanye isikrini se-smartphone. Le ndlela yolwelo ifanelekile ekudaleni iiplani eziguquguqukayo ezilungelelanisa ngokugqibeleleyo.

Ukuchaza imibuzo yemidiya kwiphepha lesimbo leCSS

Imibuzo yemidiya yeCSS yimiyalelo ebalulekileyo ye yenza iwebhusayithi ephendulayo. Bakuvumela ukuba uchaze imigaqo ethile ye-CSS eya kusebenza ngokuxhomekeke kububanzi befestile yokubonisa (indawo yokujonga). Ungakhankanya ngokulula uyilo, iifonti, imida, njl. ezahlukeneyo kuxhomekeke ekubeni umsebenzisi ukwikhompyuter, ithebhulethi okanye i-smartphone. Ngokomzekelo, singakuchaza oko ngaphantsi kwe768px ububanzi, utshintsho lokuhamba kwimenyu ye-hamburger.

Imibuzo yemidiya ikuvumela ukuba ulungelelanise kakuhle unikezelo kunye nolungiselelo lwezinto ngokuxhomekeke kubukhulu besikrini. Idityaniswe neeyunithi eziguquguqukayo zeCSS, ziyimfuneko yenza indawo efanelekileyo iphendula kwaye ibonelele ngamava omsebenzisi angcono.

Yenza imifanekiso iphendule

Imifanekiso kufuneka nayo zihlengahlengiswe ukuthintela ukolula ngokungafaniyo kwizixhobo ezithile. Kufuneka ke ngoko lungisa imifanekiso yakho ye-SEO. Eyona ndlela ilula yokwenza kukusetha ububanzi bazo njengepesenti kwikhowudi ye-HTML okanye ngeCSS.

Sinokusebenzisa ipropati ye-CSS "ubukhulu bobubanzi: 100%" ukuze umfanekiso uziqhelanise nesikhongozeli sawo ngelixa ugcina imilinganiselo yawo. Kukwacetyiswa ukuba uchaze iinguqulelo ezininzi zomfanekiso ofanayo kwizisombululo ezahlukeneyo kwaye ubonise kwisikhangeli ukuba yeyiphi na inguqulelo emayisebenze ngokuxhomekeke kubungakanani bekhusi ngokusebenzisa " uphawusrcset“. Ekuphenduleni, imifanekiso kufuneka iguqule ubungakanani ngokuzenzekelayo kunokolula, ukuqinisekisa umgangatho ophezulu kuzo zonke izixhobo.

Sebenzisa isakhelo se-CSS esiphendulayo

Ukusebenzisa isakhelo se-CSS esiphendulayo yenye yeendlela ezilungileyo zokwenza iwebhusayithi iphendule. Izikhokelo ze-CSS ezifana ne-Bootstrap, iSiseko, i-Bulma, kunye ne-Materialize zibonelela ngeegridi ezichazwe kwangaphambili kunye nezinto eziphendulayo ezenza kube lula ukwenza iwebhusayithi ephendulayo. Ezi zikhokelo zibonelela ngokulungele ukusetyenziswa kweeklasi ze-CSS ezikuvumela ukuba wenze iiplani iphepha eliguqukayo neliphendulayo. Basebenzisa ubuchule obunje ngemibuzo yemidiya ukunyenyisa ngokuzenzekelayo uyilo kunye nesimbo ngokusekwe kubungakanani besikrini sesixhobo esisetyenzisiweyo ukujonga isiza.

Ngokusebenzisa isakhelo se-CSS esiphendulayo, unokukhawuleza ukuseta isakhiwo esisisiseko kwiwebhusayithi yakho ehambelana kakuhle nezixhobo ezahlukeneyo kunye nobukhulu besikrini. Unokwenza lula ukucwangcisa izinto zakho zesayithi usebenzisa iigridi ezibonelelwe ngesakhelo, esivumela ukwakheka okuhambelanayo kuzo zonke izixhobo.

Unikezelo lovavanyo kuzo zonke izixhobo

Kubalulekile ukuvavanya ukuboniswa kwewebhusayithi yakho kwiikhompyuter, iitafile kunye nee-smartphones ukuqinisekisa ukuba ihambelana ngokugqibeleleyo kububanzi besikrini ngasinye. Uninzi lweziphequluli zangoku, ezifana UGoogle Chrome kunye neMozilla Firefox, zibonelela ngezixhobo zophuhliso ezihlanganisiweyo. Ezi zixhobo zikuvumela ukuba ulinganise izixhobo ezahlukeneyo kunye nobukhulu besikrini ukuze ube nombono wonikezelo lwewebhusayithi. Ungafikelela kwezi zixhobo ngokucofa ekunene kwiphepha uze ukhethe “Hlola"Okanye"Jonga uhlobo".

Kukho iinkonzo zasimahla ze-intanethi ezinje IbrowserStack kunye neCrossBrowserTesting ekuvumela ukuba uvavanye unikezelo lwewebhusayithi kwiintlobo ngeentlobo zezixhobo kunye nezikhangeli. Ezi nkonzo zikuvumela ukuba ujonge iwebhusayithi yakho kwizixhobo ezahlukeneyo zenyani okanye ezibonakalayo, zikunika umbono ocacileyo wendlela eza kujongeka ngayo kwisixhobo ngasinye.

I-emulators yesixhobo kunye ne-simulators yisoftware ephindaphinda iimpawu kunye nokuziphatha kwezixhobo zokwenyani. Umzekelo, ukuvavanya kwi-iOS, ungasebenzisa i-emulator ye-Xcode yezixhobo ze-Apple. Kwi-Android, i-emulator ye-Android Studio iyafumaneka. Ezi zixhobo zikuvumela ukuba uvavanye iwebhusayithi yakho kwizixhobo ezibonakalayo ezinezisombululo ezahlukeneyo zesikrini.

Ziphephe izinto ezinobungakanani obusisigxina

Ukwenza iwebhusayithi iphendule, kubalulekile ukunqanda izinto ezinobungakanani obusisigxina. Nanga amanye amacebiso okuphumeza oku:

Sebenzisa iiyunithi zomlinganiselo obhetyebhetye: Endaweni yokusebenzisa ipixels (px) ukuchaza ubungakanani beelementi, endaweni yoko sebenzisa iiyunithi ezibhetyebhetye zomlinganiselo ezifana neepesenti (%) okanye iiyunithi zokujonga (vh, vw). Oku kuvumela izinto ukuba zilinganise ngokulinganayo kubungakanani besikrini.

Sebenzisa iiracks eziguquguqukayo: Iigridi eziguquguqukayo, njengalezo zibonelelwe ngesakhelo se-CSS esiphendulayo, zikuvumela ukuba wenze iiplani eziguquguqukayo usebenzisa iikholamu eziguquguqukayo kunye nemigca. Oku kuvumela izinto ukuba zizilungelelanise ngokuzenzekelayo ngokusekwe kubungakanani besikrini, ukunika amava angaguqukiyo omsebenzisi kuzo zonke izixhobo.

Phepha ububanzi obumiselweyo bemifanekiso: Endaweni yokuchaza ububanzi obumiselweyo bemifanekiso, sebenzisa ipropathi yeCSS “ububanzi obukhulu: 100%;” ukuvumela imifanekiso ukuba iphinde ilingane nobungakanani besikhongozeli sayo. Oku kuqinisekisa ukuba imifanekiso ihambelana ngokuchanekileyo kwizixhobo ezahlukeneyo ngaphandle kokuphuphuma okanye ukuphazamisa.

Sebenzisa i Imibuzo yemidiya: Imibuzo yemidiya yimithetho yeCSS ekuvumela ukuba usebenzise iindlela ezahlukeneyo ngokuxhomekeke kubukhulu besikrini. Zisebenzise ukunyenyisa isitayile sezinto kwizisombululo ezahlukeneyo zesikrini ukwenza ngcono ukujonga kwisixhobo ngasinye.

Yenza lula ukuhamba ngefowuni

Ukwenza lula ukuhamba ngefowuni kunye nokubonelela ngamava angcono omsebenzisi. Sebenzisa imenyu yokukhangela ehambayo. Buyisela imenyu yokukhangela yesiqhelo kunye nemenyu yokukhangela ephathwayo, efana nemenyu yehamburger. Olu hlobo lwemenyu lunceda ukunciphisa i-clutter yesikrini kwaye lwenza ukuba ukukhangela kube lula ngakumbi kubasebenzisi beselula.

Nciphisa inani lezinto zokukhangela. Nciphisa inani lezinto zokukhangela eziboniswe kwimenyu ephathwayo. Chonga ezona zinto zibalulekileyo kwaye ugxininise kuzo ukuze kube lula ukuhamba. Unokwenza amaqela afanayo phantsi kweendidi ukunqanda imenyu ende.

Sebenzisa ukukhangela kwinqanaba elinye : Ziphephe iimenyu zokuhla ezintsonkothileyo ezinamanqanaba amaninzi eemenyu ezisezantsi kwizixhobo eziphathwayo. Endaweni yoko, khetha ukukhangela kwinqanaba elinye, apho abasebenzisi banokuhamba ngokuthe ngqo kumacandelo aphambili esayithi ngaphandle kokuhamba kumanqanaba amaninzi.

Sebenzisa amaqhosha entshukumo acacileyo: Sebenzisa amaqhosha entshukumo acacileyo, acofa ngokulula ukukhokela abasebenzisi kwizenzo ezithile, njengokufaka imveliso kwinqwelo okanye ukungenisa ifom. Qinisekisa ukuba amaqhosha makhulu ngokwaneleyo ukuba angacofa ngokulula ngomnwe wakho.

Sebenzisa ii-icon ezicacileyo: Sebenzisa ii-icon ezibonakalayo ukumela izenzo okanye iindidi kwimenyu yokukhangela ephathwayo. Ii-icon eziyilwe kakuhle zinokunceda abasebenzisi baqonde ngokukhawuleza intsingiselo yezinto zokukhangela ngaphandle kokufunda iilebhile ezinde.

isiphelo

Uyilo lwe Iisayithi eziphendulayo ziye zaba yimfuneko ukubonelela ngamava asemgangathweni kumsebenzisi kuzo zonke izixhobo. Ngokulandela iindlela ezingcono ezifana nokusebenzisa iiyunithi ze-CSS eziguquguqukayo, ukuphumeza imibuzo yemidiya okanye ukulungisa imifanekiso, nayiphi na iwebhusayithi inokwenziwa ilungelelanise ngokugqibeleleyo.

Ngombulelo kule mithetho ilula imbalwa, uya kuqinisekisa ukuboniswa kwewebhusayithi yakho kwiikhompyuter, iitafile kunye nee-smartphones. Akusekho ukusondeza ngaphakathi nangaphandle Ukuhamba kakuhle!

Ukuya phambili ngakumbi, ndincoma ukusebenzisa iplugin yeWP Rocket enamandla kwiWordPress. Iya kukuvumela ukuba wenze ngcono kangangoko isantya sokulayisha kwindawo yakho esabelayo. Indawo eguqukayo kwaye ikhawuleza kakhulu isitshixo amava omsebenzisi ungenabala!

FAQ

Umbuzo: Yintoni uyilo oluphendulayo?

A: I design ezwayo yindlela yoyilo lwewebhu ejolise ekwenzeni iwebhusayithi eguqukayo kwaye esebenzayo kuzo zonke izixhobo kunye nobukhulu besikrini. Ivumela umxholo kunye nohlengahlengiso ngokuzenzekelayo ukubonelela ngamava afanelekileyo omsebenzisi, nokuba kwidesktop, ithebhulethi okanye i-smartphone.

Umbuzo: Kutheni kubalulekile ukwenza iwebhusayithi iphendule?

A: Ukwenza iwebhusayithi iphendule kubalulekile ekuboneleleni okufanayo, ngamava omsebenzisi asemgangathweni kuzo zonke izixhobo. Ngokusetyenziswa kwezixhobo eziphathwayo ezikhulayo, kubalulekile ukulungelelanisa iwebhusayithi yakho ukuhlangabezana nolindelo lwabasebenzisi kunye nokuphucula umgangatho we-injini yokukhangela.

Umbuzo: Yiyiphi imigaqo ephambili yophuhliso lwewebhu oluphendulayo?

A: Imigaqo ephambili yophuhliso lwewebhu oluphendulayo lubandakanya ukusebenzisa iigridi eziguquguqukayo, ukuphepha izinto ezinobungakanani obusisigxina, ukulungelelanisa imifanekiso, ukusebenzisa imibuzo yemidiya ukusebenzisa iindlela ezahlukeneyo ngokuxhomekeke kubukhulu bomfanekiso, kunye nokwenza lula ukuhamba kwiselula.

Umbuzo: Yintoni isakhelo se-CSS esiphendulayo?

A: A Isakhelo seCSS Ukuphendula yiseti yeendlela ezenziwe kwangaphambili zeCSS kunye namacandelo aphendulayo enza kube lula ukwenza iwebhusayithi ephendulayo. Ezi zicwangciso, ezifana ne-Bootstrap, iSiseko, kunye ne-Bulma, zibonelela ngeegridi ze-flexible layout, iiklasi ze-CSS ezilungele ukusetyenziswa, kunye namacandelo aphendulayo ukukhawulezisa inkqubo yophuhliso.

Umbuzo: Ndiyivavanya njani indlela iwebhusayithi enikezela ngayo kwizixhobo ezahlukeneyo?

A: Ukuvavanya indlela iwebhusayithi esebenza ngayo kwizixhobo ezahlukeneyo, ungasebenzisa izixhobo zomphuhlisi zesikhangeli ezikuvumela ukuba ulinganise ubukhulu besikrini obahlukeneyo. Unokusebenzisa kwakhona iinkonzo ze-intanethi, i-emulators yesixhobo okanye izilingisi, okanye uvavanyo kwizixhobo eziphathekayo zokwenyani.

Q: Zeziphi ezona ndlela zilungileyo zokwenza lula ukuhamba ngemfonomfono?

A: Ukwenza lula ukuhamba ngemfonomfono, sebenzisa imenyu yokukhangela ephathwayo efana nemenyu yehamburger, nciphisa inani lezinto zokuhamba, sebenzisa inqanaba elinye lokukhangela, sebenzisa amaqhosha entshukumo acacileyo, lungiselela ukulayisha isantya, sebenzisa ii-icon ezinengqondo kwaye uvavanye rhoqo ukuzulazula kwiindawo ezahlukeneyo. izixhobo.

Umbuzo: Ndingenza njani ukuba iwebhusayithi yam ekhoyo iphendule?

A: Ukwenza iwebhusayithi yakho ekhoyo iphendule, ungasebenzisa isakhelo se-CSS esiphendulayo ukwenza kube lula ukuseta i-adaptive structure. Kuya kufuneka kwakhona uguqule ikhowudi ye-CSS esele ikhona ukuze usebenzise iiyunithi eziguquguqukayo zomlinganiselo, unqande izinto ezinobungakanani obusisigxina, kwaye usebenzise izitayile ezithile kwiisayizi ezahlukeneyo zesikrini usebenzisa imibuzo yemidiya.