Vastutuleliku veebidisaini põhimõtted

Tänapäeval on tavaline tava luua veebisait või rakendus, mis kohandab selle kasutajaliidest sõltuvalt brauserist või seadmest. Selle eesmärgi saavutamiseks on kaks lähenemisviisi. Esimene hõlmab veebisaidi või rakenduse erinevate versioonide loomist erinevate seadmete jaoks. Kuid see on ebaefektiivne ja võib põhjustada ettearvamatuid vigu.

Usaldusväärse, tulevikukindla lähenemisviisi otsimisel loodi tundlik-või kohanduv-disain. See keskendub teie paigutuse ühe versiooni loomisele, mis kohandub automaatselt erinevate brauserite või seadmetega.

Selles artiklis õpime tundliku veebidisaini ja aluspõhimõtete kohta, mis aitavad teil luua suurepärase veebisaidi.

Vastutulelikud veebidisaini koostisosad

Vastutulelik veebidisain ei ole nii keeruline, kui tundub. See on tavade komplekt, mida saate kasutada CSS -i kirjutamisel, mitte eraldi tehnoloogia, mille peate nullist õppima. Võimalik, et järgite juba mitut neist põhimõtetest, ilma et peaksite sellest aru saama. Saate aru reageerivast veebidisainist, uurides selle nelja koostisosa: voolav paigutus, tundlikud üksused, paindlikud pildid ja meediumipäringud.

Vedeliku paigutused

Sujuva paigutusega saate luua veebilehti, mis kohanduvad praeguse vaateava laiuse ja kõrgusega. Tavaline tava hõlmab max laius selle asemel, et anda elemendile fikseeritud laius. Kasutades ka protsenti (%), vaateava kõrgus (vh) või vaateava laius (vw) aitab parandada kohanemisvõimet, mis pole pikslitega võimalik (px). Niisiis, kui järgmine kord paigutust koostate, tehke kindlasti need väikesed muudatused ja hakake tundlikest disainitehnikatest kasu saama.

Tundlikud üksused

Täpsema CSS -i juurde liikudes näete sageli selle kasutamist rem ja em pikkusühikute asemel px ühikut. Seda seetõttu, et rem seadme abil on kogu paigutuse skaleerimine ülilihtne. Vaikimisi on 1rem võrdne 16 piksliga, kuna see on proportsionaalne elemendi fondisuurus, tavaliselt 16 pikslit. Ülemise taseme fondi suurust reguleerides saate aga lihtsamaks arvutamiseks määrata 1rem võrdseks 10 piksliga (või mõne muu väärtusega).

Paindlikud pildid

Pildid on isegi kõige elementaarsema paigutuse kujundamisel peamine probleem. Peate alati hoolitsema nende õige suuruse eest, et need sobiksid disainiga. Samuti ei skaleerita neid vaikimisi vaateava muudatustega. Niisiis, peaksite kasutama % piltide mõõtmetega koos max laius vara.

Meediapäringuid kasutades saate reageerivaid saite ellu äratada. Alustuseks on hea kasutada vedelikuvõrke, kuid leiate, et paigutus hakkab lagunema mõnes kohas. Nende vaateava laiuste katkestuspunktide lisamine häälestab erinevate seadmete paigutuse. Meediumipäringud aitavad teil meediafunktsioonide testide tulemuste põhjal CSS -i valikuliselt rakendada. Saate uut uurida CSS -i funktsioonid reageeriva veebisaidi loomiseks lühema ajaga.

Vastutuleliku veebidisaini põhimõtted

Ehkki tundlik veebidisain on mitme ekraani probleemide osas päästja, ei pruugi teil olla fikseeritud füüsilisi piiranguid, millele viidata. Seetõttu on tundliku paigutuse kujundamisel alustamiseks kuus põhilist reageeriva veebidisaini põhimõtet.

Kasutage sisupõhiseid katkestuspunkte

Üks disaini põhiprintsiipe ütleb, et teie veebisaidi kujundus peaks toetama sisu, mitte vastupidi. Meediasisu, nagu videod, fotod ja tekstisisu, näiteks pikk ja lühike veebikoopia, tuleks kõikidel ekraanidel optimaalselt renderdada. Reageeriva veebidisaini võti on kasutada sisupõhiseid katkestuspunkte, mitte seadmepõhiseid.

Valige targalt veebifondid ja süsteemifondid

Veebifondid näevad vapustavad! Teil on palju võimalusi oma kujunduse muutmiseks laheda välimusega veebifontidega. Kuid peaksite teadma, et brauserid peavad iga veebifondi alla laadima. Rohkem veebifonte, rohkem allalaadimisaega. Seevastu süsteemifondid on välkkiired. Kui kasutajal pole kohalikus seadmes nimega süsteemi fonti, langeb see tagasi järgmise fondi juurde fontide perekond. Seetõttu arvestage fontide valimisel kindlasti laadimisaega ja disaininõudlust.

Bitmap -piltide ja vektorite optimeerimine

Kas teie veebisaidil on sisu toetavaid erinevaid ikoone? Sageli on hea tava kasutada bitikaardi vormingut, kui teie ikoonidel on palju üksikasju. Teisest küljest on vektorvormingud viis ikoonide jaoks, mis skaalavad kenasti üles ja alla. Vektorid on sageli väikesed, kuid negatiivne külg on see, et mõned vanemad brauserid ei pruugi neid toetada. Samuti on juhtumeid, kui vektorid on raskemad kui bitikaardid, näiteks kui pilt on väga üksikasjalik. Seetõttu veenduge alati, et optimeerite oma bitikaardipilte ja vektoreid, enne kui need võrku lähevad.

Tehke tundliku esimese voltimise testid

Veebisaidi esimene volt on vaade, mida külastajad näevad esmakordsel laadimisel, enne kerimist. See sisaldab sageli kangelase jagu a tundlik navigeerimisriba, sissejuhatav koopia ja meedia ning CTA. Vastutulelikkus ei piirdu ainult mobiilseadmetega. Peaksite kaaluma ka tahvelarvuteid, mängukonsoole ja muid ekraane. Niisiis, peamine on teha sagedasi teste vähemalt veebisaidi esimese voltimisvaate jaoks. Saate kasutada Chrome DevToolsi (Tuletorn) veebilehe kvaliteedi testimiseks.

Ärge peitke sisu väiksematel ekraanidel

Paljud inimesed arvasid, et mobiilikasutajatel on alati kiire ja nad otsivad hammustussuurust teavet, samal ajal kui lauaarvutite kasutajad on rohkem huvitatud pikaajalisest sisust. Nüüd mõistame, et see pole tänapäeva maailmas tõsi. Inimesed kasutavad kõikjal mobiilseadmeid, otsides täielikku sisu ja täielikku juurdepääsu kõikidele teenustele. Peaksite tagama, et sisu peitmise asemel haldate paigutust ja katkestuspunkte, et seda võimalikult lihtsalt ja vaevata esitada.

Paigutuse haldamine pesastatud objektide abil

Saidi paigutuse ja elementide õige paigutamine nõuab korralikku pingutust. Teil võib olla ka raskusi paljude üksteisest sõltuvate elementide haldamisega. Seetõttu peaksite kaaluma seotud elementide pakkimist konteinerisse või. See aitab vähendada mitme elemendi paigutamise ülesannet ühele, milles asetate ainult ühe elemendi.

Vastupidav disain: kas peaksite kõigepealt kasutama töölauda või kõigepealt mobiili?

Töölaua esimene lähenemisviis tähendab, et kirjutate suurte ekraanide jaoks CSS -i ja seejärel rakendate väiksemate ekraanide kujunduse vähendamiseks meediumipäringuid. Seevastu mobiilne esimene lähenemisviis hõlmab CSS -i kirjutamist väiksemate ekraanidega mobiilseadmete jaoks ja seejärel meediumipäringute rakendamist suuremate ekraanide kujunduse laiendamiseks. Peamine fookus on veebisaidi ja rakenduste vähendamisel absoluutselt hädavajalikeni.

Kui alles alustate tundliku veebiarendusega, peaksite kõigepealt valima töölaua päeva lõpuks peate mobiiltelefonis konteineri üksteise peale laduma seadmeid. Kuigi see on täiesti isiklik otsus, aitab mobiilne esimene lähenemisviis teid struktureerida HTML-i paremal viisil, samal ajal kui töölaua esimene lähenemisviis aitab teil paigutust ja vahekaugust tehnikat.

Kuus parimat kursust UX -disaini õppimiseks

Kui soovite õppida UX -disaini või täiendada oma oskusi, on siin kuus parimat veebikursust, mida saate läbida.

Loe edasi

Autori kohta