Kuriant svetainę svarbu įsitikinti, kad ji puikiai atrodo bet kuriame įrenginyje, nepriklausomai nuo ekrano dydžio ir formos. Interaktyvios svetainės sukurtos taip, kad gerai atrodytų įvairiuose šiuolaikiniuose įrenginiuose, pvz., Kompiuteriuose, telefonuose, planšetiniuose kompiuteriuose, televizoriuose, nešiojamuose kompiuteriuose ir net automobilių ekranuose. Jei norite, kad svetainė būtų reaguojanti, turėsite pakeisti savo CSS ir HTML kodą, kad automatiškai pakeistų jos elementų dydį, atsižvelgiant į konkrečias sąlygas. Šis „wikiHow“moko jus, kaip planuoti ir įgyvendinti pagrindinį interaktyvų žiniatinklio dizainą.
Žingsniai
1 iš 3 metodas: reaguojančio dizaino planavimas
1 žingsnis. Sužinokite, kaip jūsų auditorija naudoja jūsų svetainę
Šiais laikais dauguma žmonių, naršančių internete, tai daro iš mobiliųjų telefonų ir planšetinių kompiuterių. Kad svetainė būtų reaguojanti, turite užtikrinti, kad ji būtų tinkamai rodoma, nesvarbu, kur ji peržiūrima. Jei laikas ir pinigai yra labai svarbūs, sutelkite dėmesį į įrenginių tipus, kurie yra populiariausi jūsų vartotojų (jei tokia informacija yra) ir kaip jie naudoja jūsų svetainę. Naudodamiesi savo analizės programine įranga ar kita tyrimo forma, sužinokite:
- Kokius įrenginius jie dažniausiai naudoja norėdami peržiūrėti svetainę, ypatingą dėmesį skirdami mobiliųjų telefonų/planšetinių kompiuterių/kompiuterių prekės ženklams ir ekrano/skiriamosios gebos dydžiams.
- Kokios naršyklės yra populiariausios tarp jūsų vartotojų. Kalbant apie pasaulinę statistiką, „Google Chrome“yra populiariausia žiniatinklio naršyklė visame pasaulyje, tačiau „Safari“yra antra.
- Kaip lankytojai naudoja jūsų svetainę, pvz., Kiek laiko jie praleidžia ją žiūrėdami, kur peržiūri ir koks turinys yra populiariausias. Tai gali padėti nustatyti, kokio tipo turinį svarbu įtraukti ir kurio galima praleisti.
Žingsnis 2. Sukurkite skirtingus skirtingų įrenginių išdėstymus
Galite naudoti CSS ir „JavaScript“derinį, kad nustatytumėte vartotojo įrenginį, taip pat jo galimybes (nesvarbu, ar jis palaiko „Java“, „Flash“ir pan.), Ir atitinkamai rodyti tam tikrą svetainės versiją. CSS medijos užklausos yra ypač naudingos nustatant įrenginio dydį/skiriamąją gebą.
Žingsnis 3. Apsvarstykite įvairių tipų sąveikas
Jūsų lankytojas gali sąveikauti su jūsų svetaine naudodami pelę, klaviatūrą, jutiklinį ekraną ar net ekrano skaitytuvą, skirtą regos negalią turintiems žmonėms. Atsižvelgiant į tai, jūsų svetainė turėtų reaguoti į pelės paspaudimus, klaviatūros klavišus („Tab“, „Enter“, „Return“ir kt.) Ir ekrano pirštų prisilietimus.
Užvedimo efektas neveikia su niekuo, išskyrus pelę. Užuot naudojęsi šiais efektais, galite reikalauti, kad lankytojas spustelėtų mygtuką ar piktogramą, kad būtų rodoma tai, kas anksčiau buvo rodoma užvedus pelę
4 žingsnis. Apsvarstykite galimybę naudoti turinio valdymo sistemą (TVS)
Paprastas būdas užtikrinti, kad jūsų svetainės dizainas reaguoja, yra naudoti TVS su iš anksto sukurta reaguojančia tema. Naudodami CMS, pvz., „Joomla“, „Drupal“ar „Wordpress“, galite užtikrinti, kad jūsų svetainė puikiai atrodytų visuose įrenginiuose, nereikia patiems koduoti reaguojančių elementų. Pasitarkite su žiniatinklio prieglobos paslaugų teikėju, kad sužinotumėte, kurie TVS įrankiai yra prieinami jūsų paslaugai.
Žingsnis 5. Naudokite internetinius įrankius savo svetainei išbandyti
Dabar, kai interaktyvus žiniatinklio dizainas išpopuliarėjo, yra daugybė nemokamų įrankių, kuriuos galite naudoti norėdami išbandyti savo svetainę. Jei jau sukoduodavote savo svetainę, naudokite šiuos įrankius, kad patikrintumėte, kaip ji atrodo įvairiomis sąlygomis, kad žinotumėte, kur reikia pagerinti reagavimą:
- „Google“pritaikymo mobiliesiems testas: leidžia sužinoti, ar jūsų svetainė mobiliuosiuose įrenginiuose veikia taip pat gerai, kaip ir kompiuterio ekranuose.
- „resizeMyBrowser“: leidžia peržiūrėti svetainę skirtingomis rezoliucijomis.
- Atsakovas: rodo jūsų svetainę skirtinguose įrenginių ekranuose skirtingais išdėstymais (šonu arba dešinėn į viršų).
2 metodas iš 3: sureguliuokite puslapio išdėstymą
1 žingsnis. Apsvarstykite nemokamą reaguojančio stiliaus lapo sistemą
Sistema yra iš anksto parašytas HTML, CSS ir (arba) „JavaScript“rinkinys, kurį galite naudoti kaip savo svetainės skeletą. Visi rėmai yra išbandyti ir optimizuoti, kad veiktų su visomis naršyklėmis, todėl jums tereikia įterpti turinį, pridėti medijos ir spalvų nuostatas ir paskelbti svetainę. Kai kurios populiarios sistemos yra:
- Bootstrap
- Skeletas
- Fondas
Žingsnis 2. Nustatykite peržiūros sritį naudodami metažymą
Jei nenaudojate sistemos, norėsite pradėti nuo svarbiausio reaguojančios svetainės kodavimo aspekto: peržiūros srities. Peržiūros sritis yra svetainės dalis, matoma vartotojui. Svarbiausia, kad jūsų svetainė būtų tinkamai rodoma, neatsižvelgiant į ekrano dydį, yra mastelio peržiūros srities dydžio žymėjimas META žymoje. Norėdami tai padaryti, įtraukite šią žymą kiekvieno svetainės puslapio viršuje:
Žingsnis 3. Nurodykite teksto dydį atsižvelgiant į peržiūros sritį
Nustatę peržiūros sritį, jūsų puslapio tekstas bus pritaikytas ekranui. Tačiau šriftai gali būti per dideli arba per maži, jei jų dydžiai nenurodomi atsižvelgiant į peržiūros sritį. Tai galite padaryti nustatydami šrifto dydį kaip tam tikrą peržiūros srities procentą naudodami „vw“įrenginį. Šis pavyzdys nurodo, kad H1 antraštės turi būti rodomos 10% peržiūros srities pločio, neatsižvelgiant į jos dydį:
wikiKaip
Žingsnis 4. Naudokite medijos užklausas, kad būtų rodomi skirtingi skirtingų dydžių ekrano stiliai
Medijos užklausos leidžia pasirinkti, ar rodyti tam tikrus CSS elementus, atsižvelgiant į ekrano dydį. Savo CSS faile galite nurodyti medijos užklausos specifiką. Šiame pavyzdyje kūno fono spalva taps raudona, jei naudotojo ekrano dydis yra 480 pikselių arba didesnis:
wikiKaip
@media ekranas ir (min. plotis: 480 taškų) {body {background-color: aqua; }}
3 metodas iš 3: vaizdų reagavimas
Žingsnis 1. Naudokite CSS pločio ypatybę, kad padidintumėte vaizdus
Užuot nustatę tam tikro dydžio pikselių (pvz., 500 pikselių) vaizdo plotį, naudokite procentą (pvz., 100%), kad vaizdas atrodytų kaip pirminio pločio ir atitinkamai sureguliuotų. 100% vaizdo pločio nustatymas priverčia vaizdą didinti ir mažinti, priklausomai nuo žiūrovo ekrano dydžio. Norėdami tai padaryti eilutėje:
2 veiksmas. Naudokite maksimalaus pločio ypatybę, kad apribotumėte tikrojo vaizdo dydžio mastelį
Jei ankstesniame žingsnyje naudosite pločio ypatybę, kad padidintumėte vaizdą iki 100%, vaizdas padidės arba susitrauks, kad tilptų 100% talpyklos, nepriklausomai nuo dydžio. Tai reiškia, kad jei vaizdas yra mažesnėje pusėje, jis bus didesnis nei pradinis dydis ir atrodys prastesnės kokybės. Kad taip neatsitiktų, naudokite maksimalų plotį, kad nustatytumėte maksimalų vaizdo mastelio dydį iki 100% (faktinio dydžio). Štai kaip:
Žingsnis 3. Naudokite HTML paveikslėlio elementą, kad skirtingų dydžių ekranuose būtų rodomi skirtingi vaizdai
Jei norite sukurti pasirinktinio dydžio vaizdus, rodomus skirtingo dydžio ekranuose, galite nurodyti, kurias nuotraukas rodyti savo HTML kode. Sukurkite skirtingo dydžio vaizdus ir naudokite šį kodą kaip pavyzdį, nurodydami, kokį vaizdą naudoti 600 ir 1500 pikselių pločio ekranuose:
