Veebisaidi kujundamisel on oluline tagada, et see näeks hea välja igas seadmes, olenemata ekraani suurusest ja kujust. Reageerivad veebisaidid on loodud nii, et need näeksid head välja kõikvõimalikes kaasaegsetes seadmetes, nagu arvutid, telefonid, tahvelarvutid, telerid, kantavad seadmed ja isegi autoekraanid. Veebisaidi tundlikuks muutmiseks peate muutma oma CSS- ja HTML-koodi, et muuta selle elementide suurust sõltuvalt konkreetsetest tingimustest automaatselt. See Selgitatud õpetab, kuidas planeerida ja rakendada elementaarset responsive veebidisaini.
1
Uurige, kuidas teie vaatajaskond teie veebisaiti kasutab. Tänapäeval teeb enamik veebi sirvivatest inimestest seda mobiiltelefonide ja tahvelarvutite kaudu. Et sait oleks tundlik, peate tagama, et see kuvatakse õigesti olenemata sellest, kus seda vaadatakse. Kui aeg ja raha on olulised, keskenduge teie kasutajate seas kõige populaarsemate seadmete tüüpidele (kui see teave on saadaval) ja sellele, kuidas nad teie saiti kasutavad. Analüütikatarkvara või mõne muu uurimistöö abil saate teada, milliseid seadmeid nad veebisaidi vaatamiseks kõige sagedamini kasutavad, pöörates erilist tähelepanu mobiiltelefonide/tahvelarvutite/arvutite kaubamärkidele ja ekraani/eraldusvõime suurustele. Millised brauserid on kõige populaarsemad. teie kasutajad. Mis puutub ülemaailmsesse statistikasse, siis Google Chrome on maailmas kõige populaarsem veebibrauser, kuid teisel kohal on Safari. Kuidas külastajad teie veebisaiti kasutavad, nt kui palju aega nad seda vaatavad, kus nad seda vaatavad ja milline sisu on kõige populaarsem. See võib aidata teil kindlaks teha, millist tüüpi sisu on oluline lisada ja millise võib välja jätta.
2
Kujundage erinevatele seadmetele erinevaid paigutusi. Saate kasutada CSS-i ja JavaScripti kombinatsiooni, et tuvastada kasutaja seade ja selle võimalused (kas see toetab Java-d, Flashi jne) ja kuvada vastavalt oma saidi teatud versioon. CSS-meediumipäringud on eriti kasulikud seadme suuruse/eraldusvõime määramiseks.
3
Arvestage erinevat tüüpi interaktsioone. Teie külastaja võib teie veebisaidiga suhelda hiire, klaviatuuri, puuteekraani või isegi nägemispuudega inimestele mõeldud ekraanilugeri abil. Arvestades seda, peaks teie veebisait reageerima hiireklõpsudele, klaviatuuriklahvidele (Tab, Enter, Return jne) ja ekraani sõrmepuudutustele. Hõljutusefektid ei tööta muuga kui hiirega. Nende efektide kasutamise asemel võite nõuda, et külastaja klõpsaks nupul või ikoonil, et kuvada kõik, mida hiirekursoril varem kuvati.
4
Kaaluge sisuhaldussüsteemi (CMS) kasutamist. Lihtne viis tagada, et teie saidi kujundus on tundlik, on kasutada CMS-i, millel on eelnevalt loodud reageeriv teema. CMS-i (nt Joomla, Drupal või WordPress) kasutamine võimaldab teil tagada, et teie veebisait näeb kõigis seadmetes suurepärane välja, ilma et peaksite reageerivaid elemente ise kodeerima. Küsige oma veebimajutusteenuse pakkujalt, millised CMS-i tööriistad on teie teenusega saadaval.
5
Kasutage oma veebisaidi testimiseks veebitööriistu. Nüüd, kui responsiivne veebidisain on populaarsemaks muutunud, on mitmeid tasuta tööriistu, mida saate oma veebisaidi testimiseks kasutada. Kui olete oma veebisaidi juba kodeerinud, kasutage neid tööriistu, et testida, kuidas see erinevates tingimustes välja näeb, et saaksite teada, kus on vaja reageerimisvõimet parandada: Google’i mobiilisõbralikkuse test: annab teile teada, kas teie sait töötab ka mobiilis. seadmed nagu arvutiekraanidel.resizeMyBrowser: Võimaldab vaadata oma saiti erinevate eraldusvõimetega.Responsiaator: kuvab teie saiti erinevatel seadmeekraanidel erineva paigutusega (külg või parempoolne üles).
6
Kaaluge tasuta tundliku stiililehe raamistikku. Raamistik on eelnevalt kirjutatud HTML-i, CSS-i ja/või JavaScripti komplekt, mida saate kasutada oma saidi skeletina. Kõik raamistikud on testitud ja optimeeritud töötama kõigi brauseritega, nii et peate vaid sisestama oma sisu, lisama oma meediumi- ja värvieelistused ning avaldama oma saidi. Mõned populaarsed raamistikud on: BootstrapSkeletonFoundation
7
Määrake vaateava metasildiga. Kui te raamistikku ei kasuta, peaksite alustama tundliku veebisaidi kodeerimise kõige olulisemast aspektist: vaateaknast. Vaateava on veebisaidi osa, mis on kasutajale nähtav. Teie saidi õige kuvamise võti olenemata ekraani suurusest on META-sildis oleva vaateava suuruse skaleerimine. Selleks lisage see silt saidi iga lehe ülaossa:
8
Määrake teksti suurus vaateava suhtes. Kui teie vaateava on seadistatud, skaleeritakse teie lehel olev tekst ekraanile sobivaks. Siiski võivad fondid kuvada liiga suured või liiga väikesed, kui nende suurus ei ole vaateava suhtes määratud. Seda saate teha, määrates vw-ühikuga fondi suuruse konkreetse protsendina vaateavast. See näide käsib H1 päistel kuvada 10% vaateava laiusest olenemata selle suurusest:
Selgitatud
9
Kasutage meediumipäringuid, et kuvada erinevate ekraanisuuruste jaoks erinevaid stiile. Meediumipäringud võimaldavad teil valida, kas kuvada teatud CSS-i elemente sõltuvalt ekraani suurusest. Saate määrata oma meediumipäringu üksikasjad oma CSS-failis. Selles näites muutub keha taustavärv punaseks, kui kasutaja ekraani suurus on 480 pikslit või suurem:
Selgitatud
@meediaekraan ja (min-width: 480px) { body { background-color: aqua; }}
10
Kasutage piltide skaleerimiseks atribuuti CSS-i laius. Selle asemel, et määrata pildi laius teatud pikslite arvule (nt 500 pikslit), kasutage protsenti (nt 100%), et pilt vaataks oma ema laiust ja kohandaks seda vastavalt. Kujutise laiuse 100% määramine sunnib kujutist suurendama ja vähendama olenevalt vaataja ekraani suurusest. Selleks tehke järgmist: 
11
Kasutage atribuuti max-width, et piirata kujutise tegeliku suuruse skaleerimist. Kui kasutate kujutise 100% skaleerimiseks eelmises etapis atribuuti laius, pilt kasvab või kahaneb, et see mahuks 100% mahutist olenemata suurusest. See tähendab, et kui pilt on väiksemal küljel, suureneb see algsest suurusest ja näeb välja madalama kvaliteediga. Selle vältimiseks kasutage max-width, et määrata pildi maksimaalseks skaleerimise suuruseks 100% (tegelik suurus). Toimige järgmiselt:
12
Kasutage HTML-pildi elementi erinevate piltide kuvamiseks erineva suurusega ekraanidel. Kui soovite luua eri suurusega ekraanidel kuvamiseks kohandatud suurusega pilte, saate määrata, milliseid fotosid HTML-koodis kuvada. Looge erineva suurusega pildid ja kasutage seda koodi näitena, et määrata, millist pilti laiusega 600 pikslit ja 1500 pikslit kasutada: 