Kun suunnittelet verkkosivustoasi, on tärkeää varmistaa, että se näyttää hyvältä millä tahansa laitteella näytön koosta ja muodosta riippumatta. Responsiiviset verkkosivustot on suunniteltu näyttämään hyvältä kaikenlaisilla nykyaikaisilla laitteilla, kuten tietokoneilla, puhelimilla, tableteilla, televisioilla, puettavilla laitteilla ja jopa auton näytöillä. Jos haluat tehdä verkkosivustosta responsiivisen, sinun on muokattava CSS- ja HTML -koodiasi, jotta niiden elementtien koko muuttuu automaattisesti tiettyjen olosuhteiden mukaan. Tämä wikiHow opettaa sinulle, kuinka suunnitella ja toteuttaa responsiivinen web -suunnittelu.
Askeleet
Menetelmä 1/3: Responsiivisen suunnittelun suunnittelu
Vaihe 1. Selvitä, miten yleisösi käyttää verkkosivustoasi
Nykyään suurin osa verkossa selaavista ihmisistä tekee niin matkapuhelimilla ja tableteilla. Jotta sivusto olisi responsiivinen, sinun on varmistettava, että se näkyy oikein riippumatta siitä, missä sitä tarkastellaan. Jos aika ja raha ovat tärkeitä, keskity käyttäjiesi suosituimpiin laitteisiin (jos nämä tiedot ovat saatavilla) ja siihen, miten he käyttävät sivustoasi. Selvitä analytiikkaohjelmiston tai muun tutkimuksen avulla:
- Millaisia laitteita he käyttävät useimmiten verkkosivuston katseluun kiinnittäen erityistä huomiota matkapuhelinten/tablettien/tietokoneiden tuotemerkkeihin ja näytön/resoluution kokoon.
- Mitkä selaimet ovat suosituimpia käyttäjiesi keskuudessa. Maailmanlaajuisten tilastojen osalta Google Chrome on maailman suosituin selain, mutta Safari on lähellä toista.
- Miten kävijät käyttävät verkkosivustoasi, kuten kuinka paljon aikaa he käyttävät sen katseluun, missä he katsovat sitä ja mikä sisältö on suosituinta. Tämä voi auttaa sinua määrittämään, minkä tyyppinen sisältö on tärkeää sisällyttää ja mikä voidaan jättää pois.
Vaihe 2. Suunnittele eri asettelut eri laitteille
Voit käyttää CSS: n ja JavaScriptin yhdistelmää havaitaksesi käyttäjän laitteen ja sen ominaisuudet (tukeeko se Java-, Flash- jne.) Ja näyttääksesi tietyn sivustosi version vastaavasti. CSS -median kyselyt ovat erityisen hyödyllisiä laitteen koon/resoluution määrittämisessä.
Vaihe 3. Ota huomioon erilaiset vuorovaikutustyypit
Vierailijasi voi olla vuorovaikutuksessa verkkosivustosi kanssa hiiren, näppäimistön, kosketusnäytön tai jopa näkövammaisten näytönlukuohjelman avulla. Tämän vuoksi verkkosivustosi pitäisi vastata hiiren napsautuksiin, näppäimistön näppäimiin (sarkain, Enter, Return jne.) Ja näytön sormen kosketuksiin.
Hover-over-tehosteet eivät toimi millään muulla kuin hiirellä. Näiden tehosteiden käyttämisen sijaan voit vaatia kävijää napsauttamaan painiketta tai kuvaketta näyttääksesi kaiken, mitä hiiren osoittimella aiemmin näytettiin
Vaihe 4. Harkitse sisällönhallintajärjestelmän (CMS) käyttöä
Helppo tapa varmistaa sivustosi suunnittelu on responsiivinen on käyttää CMS: ää, jossa on valmiiksi reagoiva teema. Käyttämällä CMS: ää, kuten Joomla, Drupal tai Wordpress, voit varmistaa, että verkkosivustosi näyttää hyvältä kaikilla laitteilla ilman, että joudut koodaamaan reagoivia elementtejä itse. Tarkista verkkopalveluntarjoajaltasi, mitkä CMS -työkalut ovat saatavilla palvelussasi.
Vaihe 5. Käytä online -työkaluja verkkosivustosi testaamiseen
Nyt kun responsiivisen web -suunnittelun suosio on kasvanut, voit testata verkkosivustosi monilla ilmaisilla työkaluilla. Jos olet jo koodannut verkkosivustosi, kokeile näiden työkalujen avulla, miltä se näyttää eri olosuhteissa, jotta tiedät, missä sinun on parannettava reagointikykyäsi:
- Googlen mobiiliystävällisyystesti: kertoo, toimiiko sivustosi mobiililaitteilla yhtä hyvin kuin tietokoneen näytöt.
- resizeMyBrowser: Voit tarkastella sivustoasi eri tarkkuuksilla.
- Vastaaja: Näyttää sivustosi eri laitteiden näytöillä eri asettelussa (sivuttain tai oikealla puolella).
Tapa 2/3: Sivun asettelun mukauttaminen
Vaihe 1. Harkitse ilmaista responsiivista tyylitaulukkoa
Kehys on valmiiksi kirjoitettu HTML-, CSS- ja/tai JavaScript-joukko, jota voit käyttää sivustosi rungona. Kaikki kehykset on testattu ja optimoitu toimimaan kaikkien selainten kanssa, joten sinun tarvitsee vain lisätä sisältösi, lisätä media- ja väriasetuksesi ja julkaista sivustosi. Jotkut suositut kehykset ovat:
- Bootstrap
- Luuranko
- Säätiö
Vaihe 2. Aseta näkymä metatunnisteella
Jos et käytä kehystä, sinun kannattaa aloittaa responsiivisen verkkosivuston koodauksen tärkeimmästä näkökohdasta: Viewport. Näkymäportti on osa verkkosivustoa, joka näkyy käyttäjälle. Avain sivustosi näyttämiseen oikein näytön koosta riippumatta on META -tunnisteen näyttöportin koon skaalaaminen. Voit tehdä tämän lisäämällä tämän tunnisteen sivuston jokaisen sivun yläosaan:
Vaihe 3. Määritä tekstin koko suhteessa näyttöporttiin
Kun näkymä on asetettu, sivusi teksti skaalautuu näytön mukaiseksi. Fontit voivat kuitenkin näyttää liian suurilta tai liian pieniltä, jos niiden kokoja ei ole määritetty suhteessa näkymäportaaliin. Voit tehdä tämän määrittämällä fonttikoon tietyn prosenttiosuuden näkymäportista vw -yksiköllä. Tämä esimerkki käskee H1 -otsikot näyttämään 10% näkymän leveydestä koosta riippumatta:
wikiKuinka
Vaihe 4. Käytä mediakyselyjä näyttääksesi eri tyylejä eri kokoisille näytöille
Mediakyselyiden avulla voit valita, näytetäänkö tietyt CSS -elementit näytön koon mukaan. Voit määrittää mediakyselyn yksityiskohdat CSS -tiedostossa. Tässä esimerkissä kehon taustaväri muuttuu punaiseksi, jos käyttäjän näytön koko on 480 pikseliä tai suurempi:
wikiKuinka
@media-näyttö ja (min-width: 480px) {body {background-color: aqua; }}
Tapa 3/3: Kuvien mukauttaminen
Vaihe 1. Käytä CSS -leveys -ominaisuutta kuvien skaalaamiseen
Sen sijaan, että asetat kuvan leveydeksi tietyn pikselimäärän (esim. 500 pikseliä), käytä prosenttiosuutta (esim. 100%), jotta kuva näyttää emolevyn leveydeltä ja säätää sen mukaan. Kuvan leveyden asettaminen 100% pakottaa kuvan skaalautumaan ylös ja alas katsojan näytön koon mukaan. Voit tehdä tämän rivissä:
Vaihe 2. Käytä max-width-ominaisuutta rajoittaaksesi kuvan todellisen koon skaalausta
Jos käytät leveysominaisuutta edellisessä vaiheessa kuvan skaalaamiseen 100%: iin, kuva kasvaa tai kutistuu niin, että se mahtuu 100% säiliöön koosta riippumatta. Tämä tarkoittaa, että jos kuva on pienemmällä puolella, se skaalautuu alkuperäistä kokoa suuremmaksi ja näyttää heikommalta. Voit estää tämän tapahtumasta asettamalla maksimileveyden avulla kuvan suurimman skaalauskoon 100% (sen todellinen koko). Toimi seuraavasti:
Vaihe 3. Käytä HTML -kuvaelementtiä näyttääksesi erilaisia kuvia eri kokoisille näytöille
Jos haluat luoda mukautetun kokoisia kuvia näytettäväksi erikokoisilla näytöillä, voit määrittää, mitkä valokuvat näytetään HTML-koodissasi. Luo erikokoisia kuvia ja käytä tätä koodia esimerkkinä 600px- ja 1500px -leveysnäytössä käytettävän kuvan määrittämiseen:
