Veebisaidi kujundamisel on oluline veenduda, et see näeb hea välja igas seadmes, sõltumata ekraani suurusest ja kujust. Automaatselt kohanduvad veebisaidid on loodud välja nägema kõikvõimalikes kaasaegsetes seadmetes, nagu arvutid, telefonid, tahvelarvutid, telerid, kantavad ja isegi autode ekraanid. Veebisaidi tundlikuks muutmiseks peate muutma oma CSS- ja HTML -koodi, et muuta selle elementide suurust automaatselt sõltuvalt konkreetsetest tingimustest. See wikiHow õpetab teile, kuidas kavandada ja rakendada lihtsat reageerivat veebidisaini.
Sammud
Meetod 1 /3: reageeriva disaini kavandamine
Samm 1. Uurige, kuidas vaatajaskond teie veebisaiti kasutab
Tänapäeval teeb enamik veebis sirvivaid inimesi seda mobiiltelefonidest ja tahvelarvutitest. Saidi reageerimisvõime tagamiseks peate tagama, et see kuvatakse korralikult olenemata sellest, kus seda vaadatakse. Kui aeg ja raha on üliolulised, keskenduge sellele, milliseid seadmeid teie kasutajad kõige enam armastavad (kui see teave on saadaval) ja sellele, kuidas nad teie saiti kasutavad. Kasutage oma analüüsitarkvara või mõnda muud uurimistööd kasutades järgmist.
- 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 teie kasutajate seas kõige populaarsemad. Mis puutub ülemaailmsesse statistikasse, siis Google Chrome on maailma populaarseim veebibrauser, kuid Safari on lähedal.
- Kuidas külastajad teie veebisaiti kasutavad, näiteks kui palju aega nad selle vaatamisele kulutavad, kus nad seda vaatavad ja milline sisu on kõige populaarsem. See aitab teil otsustada, millist tüüpi sisu on oluline kaasata ja millise võib välja jätta.
Samm 2. Kujundage erinevatele seadmetele erinevad paigutused
Saate kasutada CSS -i ja JavaScripti kombinatsiooni, et tuvastada kasutaja seade, samuti selle võimalused (olenemata sellest, kas see toetab Java, Flashi jne) ja kuvada vastavalt oma saidi konkreetne versioon. CSS -i meediumipäringud on eriti kasulikud seadme suuruse/eraldusvõime määramiseks.
Samm 3. Arvestage erinevat tüüpi interaktsioone
Teie külastaja võib teie veebisaidiga suhelda, kasutades hiirt, klaviatuuri, puuteekraani või isegi nägemispuudega inimeste ekraanilugejat. Seda silmas pidades peaks teie veebisait reageerima hiireklõpsudele, klaviatuuriklahvidele (tabulaator, sisestusklahv, tagastamine jne) ja sõrme puudutustele.
Hover-over-efektid ei tööta millegagi peale hiire. Nende efektide kasutamise asemel võite nõuda, et külastaja klõpsaks nupul või ikoonil, et kuvada kõik, mida hiire hõljutamisel varem näidati
Samm 4. Kaaluge sisuhaldussüsteemi (CMS) kasutamist
Lihtne viis oma saidi kujunduse reageerimisvõime tagamiseks on kasutada eelnevalt koostatud tundliku teemaga CMS-i. Sellise CMS -i kasutamine nagu Joomla, Drupal või Wordpress võimaldab teil oma veebisaidi suurepäraselt välja näha kõikides seadmetes, ilma et peaksite automaatselt reageerivaid elemente kodeerima. Küsige oma veebimajutusteenuse pakkujalt, millised CMS -i tööriistad on teie teenusega saadaval.
Samm 5. Kasutage veebisaidi testimiseks veebitööriistu
Nüüd, kui reageeriva veebidisaini populaarsus on suurenenud, on veebisaidi testimiseks saadaval mitmesuguseid tasuta tööriistu. Kui olete oma veebisaidi juba kodeerinud, kasutage nende tööriistade abil, kuidas see erinevates tingimustes välja näeb, et saaksite teada, kus peate reageerimisvõimet parandama.
- Google'i mobiilisõbralikkuse test: annab teile teada, kas teie sait töötab mobiilseadmetes sama hästi kui arvutiekraanidel.
- resizeMyBrowser: võimaldab teil vaadata oma saiti erinevates resolutsioonides.
- Vastutaja: kuvab teie saidi erinevatel seadme ekraanidel erineva paigutusega (külili või paremal pool).
Meetod 2/3: Lehekülje kujunduse kohandamine
Samm 1. Mõelge tasuta reageeriva stiililehe raamistikule
Raamistik on HTML-i, CSS-i ja/või JavaScripti eelnevalt kirjutatud komplekt, mida saate oma saidi skeletina kasutada. Kõik raamistikud on testitud ja optimeeritud töötama kõigi brauseritega, nii et peate vaid oma sisu sisestama, meedia- ja värvieelistused lisama ning saidi avaldama. Mõned populaarsed raamistikud on järgmised:
- Bootstrap
- Skelett
- Sihtasutus
Samm 2. Määrake vaateaken metasildiga
Kui te raamistikku ei kasuta, peaksite alustama tundliku veebisaidi kodeerimise kõige olulisemast aspektist: vaateaknast. Vaateport on veebisaidi osa, mis on kasutajale nähtav. Teie saidi õige kuvamise võti sõltumata ekraani suurusest on META -sildi vaateava suuruse skaleerimine. Selleks lisage see märgend saidi iga lehe ülaossa:
Samm 3. Määrake teksti suurus vaateava suhtes
Kui teie vaateava on seadistatud, skaleerub teie lehe tekst ekraanile sobivaks. Fondid võivad aga olla liiga suured või liiga väikesed, kui nende suurused pole vaateava suhtes määratud. Seda saate teha, määrates fondi suuruse vw -seadmega vaateprotsendi konkreetseks protsendiks. See näide käsib H1 päistel kuvada 10% vaateava laiusest olenemata selle suurusest:
wikiKuidas
Samm 4. Kasutage meediumipäringuid erinevate ekraanisuuruste jaoks erinevate stiilide kuvamiseks
Meediapäringud võimaldavad teil sõltuvalt ekraani suurusest valida, kas kuvada teatud CSS -elemente. Meediapäringu eripära saate määrata CSS -failis. Selles näites muutub keha taustavärv punaseks, kui kasutaja ekraani suurus on 480 pikslit või suurem:
wikiKuidas
@media ekraan ja (min-laius: 480 pikslit) {body {background-color: aqua; }}
Meetod 3 /3: piltide vastuvõtlikuks muutmine
Samm 1. Kasutage piltide skaleerimiseks atribuuti CSS width
Selle asemel, et määrata pildi laiusele teatud pikslite kogus (nt 500 pikslit), kasutage protsenti (nt 100%), et pilt vaataks oma emalaiuste laiust ja kohandaks vastavalt. Pildi laiuse seadmine 100% sunnib pilti suurendama ja vähendama sõltuvalt vaataja ekraani suurusest. Selle tegemiseks reas:
Samm 2. Pildi tegeliku suuruse skaleerimise piiramiseks kasutage atribuuti max-width
Kui kasutate eelmises etapis atribuuti laius pildi 100% -liseks skaleerimiseks, suureneb või väheneb pilt nii, et see mahuks 100% mahutisse, olenemata selle suurusest. See tähendab, et kui pilt on väiksemal küljel, suureneb see algsest suurusest ja näeb välja halvema kvaliteediga. Selle vältimiseks kasutage maksimaalset laiust, et määrata pildi maksimaalne skaleerimissuurus 100% (selle tegelik suurus). Selleks toimige järgmiselt.
Samm 3. Kasutage HTML -pildielementi erinevate piltide kuvamiseks erinevates ekraanisuurustes
Kui soovite luua kohandatud suurusega pilte, mida kuvada erineva suurusega ekraanidel, saate määrata, milliseid fotosid HTML-koodis kuvada. Looge erineva suurusega pildid ja kasutage seda koodi näitena, et määrata, millist pilti kasutada 600- ja 1500 -pikslistel ekraanidel:
