Responsive Web Design -tekniikat
Olemme puhuneet paljon herkästä suunnittelusta täällä Webdesigner Depotissa ja jaamme paljon arvokkaita resursseja. Tänään me jakamme toisen arvokkaan resurssin: tämän artikkelin lopussa on tietoja siitä, että saat alennuksen Chris Conversein reagoivasta MightyDeals-kurssista.
CSS3-mediakyselyillä voimme dynaamisesti muuttaa verkkosivun suunnittelua ja ulkoasua optimaalisen käyttökokemuksen tarjoamiseksi yhdestä HTML- ja CSS-merkinnästä.
Tässä artikkelissa kerrotaan, kuinka voimme hyödyntää tätä CSS: n voimakasta kykyä muuntaa kuvia, muuttaa navigointia kädessä pidettävien laitteiden avulla ja määrittää vanhojen selainten yhteensopivuuden oletusarvon CSS.
Eri kuvien luominen
Kun muutat mallia eri laitteille, harkitse grafiikan useita versioita. Tämä voi suuresti vaikuttaa nopeuteen, jolla suunnittelusi latautuu pienemmille näytöille, ja antaa sinulle mahdollisuuden muokata grafiikan jokaista versiota.
Seuraavassa esimerkissä esitetään erilaiset mitoitus- ja rajausvalinnat erilaisten pakkausmäärien lisäksi, joita sovelletaan kuhunkin kuvasarjaan. Koska monet pienet näytöllä varustetut laitteet ovat korkeammat resoluution näytöt, ylimääräinen pakkaus on huomaamaton ja tiedostokoko on huomattavasti pienempi.
Hyödynnä sitä, että voit vaihtaa kuviasi dynaamisesti ja muokata kuvasi kokoa ja rajausta kutakin näytön kokoa kohti. Yllä olevassa esimerkissä suuren näytön kokoiselle sivupalkille näkyy yksityiskohtaisesti lasimaalaus, kun taas pienemmät kuvat näyttävät enemmän ikkunan kontekstia.
Määritä kuvat HTML-elementteihin
![]()
Kuvien liittäminen elementin taustalle antaa meille mahdollisuuden muuttaa viitattua graafista tiedostoa sen lisäksi, että pystymme muuttamaan kontin mitat ja sijaintiominaisuudet.
Siirrä maailmanlaajuinen navigointilaite käsikäyttöisiin laitteisiin
Kun katselet verkkosivuja suuremmilla näytöillä, navigoinnin oletettu sijainti on näytön yläosassa tai vasemmalla puolella. Koska suuret näytöt mahdollistavat sisällön navigointin lisäksi, tämä käyttökokemus ei estä käyttäjää saamasta sisältöä. Kädessä pidettävissä laitteissa navigointi voi kuitenkin kestää kaikki näytön kiinteistöt, jos se näkyy yläosassa. Tämä voi myös johtaa käyttäjän uskomaan, että heidän on tehtävä toinen navigointivaihtoehto sen sijaan, että sisällön ymmärtäminen on edelleen alla sivulla.
Kädessä pidettävien laitteiden kohdalla yleinen navigointi tyypillisesti näkyy sisällön jälkeen, joten käyttäjä voi pyyhkiä ylöspäin sisällön läpi, ja sitten esitellä muita navigointiasetuksia. Haasteena on siirtää navigointi CSS: llä muuttamatta HTML: ää.
Yllä oleva kuva osoittaa, että navigointimerkintä on sijoitettu pääsisällön merkinnän jälkeen. Näin voimme säilyttää sisällön luonnollisen virtauksen kädessä pidettäville laitteille ja siirtää navigoinnin uudelleen suurille näytöille. Tämä saavutetaan asettamalla absoluuttiset paikannusominaisuudet navigointisäiliöön katsellessasi suurempia näyttöjä ja poistamalla sijaintiominaisuudet pienillä näytöillä.
Navigoinnin sijainnin muuttamisen lisäksi voimme myös muuttaa tyyliä. Standardin ankkurintunnisteita uusitaan pienillä näytöillä, jotka heijastavat kädessä pidettävien laitteiden yleisesti käytettyjen liikkuvien painikkeiden ulkoasua. Alla oleva kuvio osoittaa dramaattisen muutoksen CSS-tiedostomme voi olla navigointiyhteyksissämme.
Käytä vanhempien selainten oletusasetuksia suurella näytön CSS-asetuksella
Säilyttää suuret näytön säännöt mediakyselyjen ulkopuolella, jotta säilytetään taaksepäin yhteensopivuus vanhempien selainten kanssa. Näin varmistetaan, että mediatiedostojen tukemattomien selainten aikaisemmat versiot voivat silti "nähdä" CSS-sääntöjä.
Kun mediakyselyolosuhteet täyttyvät käyttäjän näytön koolla, kyselyssä määritetyt säännöt ohittavat säännöt laajojen näyttölaitteiden kyselyjen ulkopuolelle. Tämä antaa sinulle sisäänrakennetun taaksepäin yhteensopivuuden selaimille, jotka tukevat CSS-pohjaisia ulkoasuja, mutta eivät CSS3-mediakyselyt.
Opi luomaan reagoiva web-suunnittelu
Seuraa yhdessä Chris Conversein kanssa, kun hän opettaa sinua luomaan edellä mainitun web-suunnittelun askeleelta. Säännöllinen hinta Creating Responsive Web Design -kurssi on 150 dollaria, mutta rajoitetun ajan voit saat kurssin Mighty Dealsin kautta vain 39 dollaria !