Responsiiviset web -suunnittelun periaatteet

Nykyään on yleinen käytäntö rakentaa verkkosivusto tai sovellus, joka säätää käyttöliittymän selaimen tai laitteen mukaan. Tämän tavoitteen saavuttamiseksi on kaksi lähestymistapaa. Ensimmäinen koskee verkkosivustosi tai sovelluksesi eri versioiden luomista eri laitteille. Mutta se on tehotonta ja voi johtaa arvaamattomiin virheisiin.

Kun etsitään luotettavaa ja tulevaisuuden kannalta kestävää lähestymistapaa, keksittiin reagoiva-tai mukautuva-muotoilu. Se keskittyy rakentamaan asettelustasi yhden version, joka mukautuu automaattisesti eri selaimiin tai laitteisiin.

Tässä artikkelissa opimme reagoivasta verkkosuunnittelusta ja perusperiaatteista, joiden avulla voit tehdä mahtavan verkkosivuston.

Responsiiviset verkkosuunnittelun ainesosat

Responsiivinen web -suunnittelu ei ole niin monimutkaista kuin miltä se kuulostaa. Se on joukko käytäntöjä, joita voit käyttää CSS: ää kirjoittaessasi, ei erillinen tekniikka, joka sinun on opittava alusta. Saatat jo noudattaa useita näistä periaatteista huomaamatta sitä. Voit ymmärtää responsiivisen web -suunnittelun tutkimalla sen neljää ainesosaa: sulavat asettelut, reagoivat yksiköt, joustavat kuvat ja mediakyselyt.

Nesteiden asettelut

Joustavalla asettelulla voit luoda verkkosivuja, jotka mukautuvat nykyiseen näkymän leveyteen ja korkeuteen. Yleinen käytäntö sisältää max-leveys ominaisuus sen sijaan, että annettaisiin kiinteä leveys elementille. Myös käyttämällä prosentteja (%), näkymän korkeus (vh) tai näkymän leveys (vw) auttaa parantamaan sopeutumiskykyä, joka ei ole mahdollista pikseleillä (px). Joten kun seuraavan kerran rakennat asettelua, muista ottaa nämä pienet muutokset käyttöön ja hyödyntää reagoivia suunnittelutekniikoita.

Responsiiviset yksiköt

Kun siirryt edistyneempään CSS: ään, näet usein sen käytön rem ja em yksikköä pituuden sijaan px yksikköä. Tämä johtuu siitä, että rem yksikön ansiosta koko asettelun skaalaaminen on erittäin helppoa. Oletuksena 1rem on 16px, koska se on verrannollinen elementin fonttikoko, tyypillisesti 16 pikseliä. Voit kuitenkin asettaa 1rem: n yhtä suureksi kuin 10 pikseliä (tai mitä tahansa muuta arvoa) laskemisen helpottamiseksi säätämällä ylätason kirjasinkokoa.

Joustavat kuvat

Kuvat ovat ensisijainen huolenaihe, kun suunnitellaan jopa kaikkein perusasettelua. Sinun on aina huolehdittava niiden koosta oikein, jotta ne sopivat muotoiluun. Lisäksi oletusarvoisesti ne eivät skaalaudu näkymän muutoksiin. Kannattaa siis käyttää % kuvien mittojen mukaan max-leveys omaisuutta.

Voit herättää reagoivat sivustot elämään mediakyselyiden avulla. Nesteverkot ovat hyvä aluksi, mutta huomaat, että on muutamia kohtia, joissa asettelu alkaa hajota. Katkaisupisteiden lisääminen näille näkymäleveyksille säätää eri laitteiden asettelua. Mediakyselyt auttavat sinua soveltamaan valikoivasti CSS: ää mediaominaisuustestien tulosten perusteella. Voit tutkia uutta CSS -ominaisuudet reagoivan verkkosivuston luomiseksi lyhyemmässä ajassa.

Responsiiviset web -suunnittelun periaatteet

Vaikka responsiivinen web-suunnittelu on pelastaja moninäyttöongelmissa, sinulla ei ehkä ole kiinteää fyysistä rajoitusta, johon viitata. Siksi responsiivisen asettelun suunnittelussa on kuusi responsiivisen web -suunnittelun perusperiaatetta.

Käytä sisältöpohjaisia ​​raja-arvoja

Yksi suunnittelun perusperiaatteista sanoo, että verkkosivustosi suunnittelun tulee tukea sisältöä, ei päinvastoin. Mediasisältö, kuten videot, valokuvat ja tekstisisältö, kuten pitkä ja lyhyt verkkokopio, tulisi toistaa optimaalisesti kaikilla näytöillä. Reagoivan web-suunnittelun avain on käyttää sisältöpohjaisia ​​katkaisupisteitä laitepohjaisten sijasta.

Valitse Web -fontit ja järjestelmäfontit viisaasti

Web -fontit näyttävät upeilta! Sinulla on useita vaihtoehtoja muokata suunnittelua tyylikkäillä web-kirjasimilla. Mutta sinun pitäisi tietää, että selainten on ladattava jokainen verkkokirjasin. Enemmän web -fontteja, enemmän latausaikaa. Sitä vastoin järjestelmäfontit ovat salamannopeita. Jos käyttäjällä ei ole nimettyä järjestelmäfonttia paikallisella laitteellaan, se palaa seuraavaan kirjasimeen fonttiperheen pino. Ota siis huomioon latausaika ja suunnittelutarve kirjasimia valittaessa.

Optimoi bittikarttakuvat ja -vektorit

Onko sivustossasi erilaisia ​​kuvakkeita, jotka tukevat sisältöä? Usein on hyvä käytäntö käyttää bittikarttamuotoa, jos kuvakkeissasi on paljon yksityiskohtia. Toisaalta vektorimuodot ovat tapa mennä kuvakkeille, jotka skaalautuvat hienosti ylös ja alas. Vektorit ovat usein pieniä, mutta haittapuoli on, että jotkin vanhemmat selaimet eivät ehkä tue niitä. On myös tapauksia, joissa vektorit ovat bittikarttoja painavampia, kuten silloin, kun kuva on hyvin yksityiskohtainen. Varmista siksi aina, että optimoit bittikarttakuvasi ja -vektorisi ennen niiden siirtymistä verkkoon.

Suorita testit reagoivaan ensimmäiseen taittoon

Verkkosivuston ensimmäinen taitto on näkymä, jonka kävijät näkevät, kun se latautuu ensimmäisen kerran, ennen vieritystä. Se sisältää usein sankariosan, jossa on reagoiva navigointipalkki, johdantokappale ja media sekä CTA. Reagointikyky ei rajoitu pelkästään mobiililaitteisiin. Kannattaa harkita myös tabletteja, pelikonsoleita ja muita näyttöjä. Joten avain on suorittaa usein testejä ainakin verkkosivuston ensimmäisen taitonäkymän osalta. Voit käyttää Chrome DevTools (Majakka) verkkosivun laadun testaamiseksi.

Älä piilota sisältöä pienemmissä näytöissä

Monet ihmiset olettivat, että mobiilikäyttäjät ovat aina kiireessä etsimässä purentakokoisia tietoja, kun taas pöytäkoneiden käyttäjät pitävät enemmän pitkän muodon sisällöstä. Nyt ymmärrämme, että tämä ei pidä paikkaansa nykymaailmassa. Ihmiset käyttävät mobiililaitteita kaikkialla, etsivät täydellistä sisältöä ja täyden pääsyn kaikkiin palveluihin. Sinun on varmistettava, että sisällön piilottamisen sijaan hallitset asettelua ja raja -arvoja esittääksesi ne mahdollisimman helposti ja vaivattomasti.

Hallitse asettelua sisäkkäisten objektien avulla

Sivuston ulkoasun ja paikannuselementtien rakentaminen oikein vaatii vaivaa. Sinulla on myös voinut olla vaikeuksia hallita monia toisistaan ​​riippuvaisia ​​elementtejä. Siksi kannattaa harkita asiaan liittyvien elementtien käärimistä säiliöön tai. Tämä auttaa vähentämään useiden elementtien asettamista yhdeksi, jossa asetat vain yhden elementin.

Responsiivinen muotoilu: Pitäisikö sinun ensin käyttää pöytätietokonetta vai ensin mobiililaitteita?

Työpöydän ensimmäinen lähestymistapa tarkoittaa, että kirjoitat CSS: n suurille näytöille ja käytät sitten mediakyselyitä pienentääksesi pienempien näyttöjen suunnittelua. Sitä vastoin mobiilin ensimmäinen lähestymistapa sisältää CSS: n kirjoittamisen mobiililaitteille pienemmillä näytöillä ja sitten mediakyselyjen soveltamisen laajentaaksesi suuremman näytön suunnittelua. Pääpaino on verkkosivuston ja sovellusten vähentämisessä ehdottomaan olennaiseen.

Jos olet vasta aloittamassa responsiivista verkkokehitystä, siirry ensin työpöydälle päivän päätteeksi, sinun on pinottava kontti päällekkäin mobiililaitteella laitteet. Vaikka se on täysin henkilökohtainen päätös, mobiili ensimmäinen lähestymistapa auttaa sinua jäsentämään HTML paremmin, kun taas työpöytä-ensimmäinen lähestymistapa auttaa sinua asettelussa ja välilyönneissä tekniikat.

Kuusi suosituinta UX -suunnittelun kurssia

Jos haluat oppia UX -suunnittelua tai parantaa taitojasi, tässä on kuusi parasta verkkokurssia, joihin voit osallistua.

Lue seuraava

Kirjailijasta