For noen år siden var det relativt enkelt å designe og bygge nettsteder. Nettsteder var enklere, og ble sett på skrivebord og bærbare datamaskiner med liten variasjon i skjermstørrelser. I dag med mobilenheter som tar over leserens surfingstid, kan et nettsted sees på en 4,8 "smarttelefonskjerm, en 5" phablet, en 7 "-tabletter eller en hvilken som helst størrelse i mellom.

Så hvordan sikrer du at nettstedet ditt vises riktig på tvers av enhetstyper og skjermstørrelser?

Løsningen ble først foreslått av Ethan Marcotte, da han utforsket måter å lage nettsider design responsive, det vil si at de endres i henhold til skjermstørrelsen. En responsiv nettside design er en som gjør smart bruk av CSS for å sikre at nettsider gjengir seg godt over et bredt spekter av skjermstørrelser - uten å ty til URL-omadressering eller dynamisk betjening av forskjellige HTML- og CSS-koden, avhengig av UserAgent. Det er egentlig ikke en teknologi eller en standard, men heller et sett med designprinsipper som bidrar til å oppnå resultatet.

I løpet av de siste årene har mange responsive maler, CSS-rammer og WordPress-temaer spratt opp. Det er for eksempel mulig å lage en responsiv nettside i WordPress uten å skrive en enkelt linje med kode.

Men en ekte webdesigner er ikke fornøyd med bare å bruke maler. Hun vil gjøre en innsats for å forstå elementene i responsivt webdesign, for å kunne bruke dem effektivt.

Så i dag skal vi se på de 3 grunnleggende teknikkene du trenger å mestre, du er en effektiv responsiv designer.

1. Medieforespørsler

Medieforespørsler lar deg designe forskjellige oppsett for forskjellige medietyper som skjerm, utskrift, TV, håndholdte enheter etc. Avhengig av medietypen kan du konfigurere stilen, skrifttypen og andre elementer på siden.

Introdusert i CSS3, lar medieforespørsler en designer tilpasse presentasjonen av innholdet slik at det passer et bestemt utvalg av utdataenhetstyper. De består av en medietypedeklarasjon og ett eller flere mediefunksjonsuttrykk som vurderer til ekte eller falsk.

Utvalget av medietyper inkluderer håndholdt, skjerm, tv, utskrift og projeksjon. Mediefunksjoner inkluderer, men er ikke begrenset til enhetshøyde, bredde, aspektforhold, oppløsning, fargeindeks samt høyde, bredde på nettleservinduet.

La oss ta et grunnleggende eksempel; Tenk deg at du vil at tekststørrelsen skal krympe på mindre enheter, som telefoner. Spørringen for det ville se ut som:

p {font-size:1em;}@media all and (max-width:400px) {p {font-size:0.8em;}}

Nå er skriftstørrelsen til avsnittene dine satt til 1em, med mindre nettleserbredden er mindre enn 400px, i så fall vil den krympe til 0.8em.

Etter min erfaring er den beste måten å designe en responsiv layout på, først å lage et standard mester stilark med de viktigste strukturelle elementene. Deretter kan du legge til medieforespørsler for å tilpasse elementer basert på oppsettet eller andre elementelementer. Hvis det er mer enn en håndfull regler, kan det være bedre å flytte dem ut til et eget barnark - som du kan selektivt laste inn senere. Slik fungerer det:

Dette stykke kode kontrollerer om enheten er en håndholdt i liggende modus med enhetsbredde mindre enn 720px, og i så fall laster det tabellen layout.css style.css .

Merk at funksjonene bredde, høyde, min / maks bredde, min / maks høyde alle refererer til nettleservinduets bredde og høyde. Enhetens bredde og høyde styres av enhetens bredde, enhetshøyde, min / maksimal enhetbredde, min / maksimal høyde . Hvis du vil se opp flere eksempler ved hjelp av medieforespørsler MDN har en god runde oppe.

2. Vannledninger

"Fluid grid" er et begrep som brukes til å beskrive en layout som er kodet i relative proporsjoner av de ulike elementene, i stedet for med faste pixelverdier.

Tradisjonelle CSS-oppsett brukte faste breddegitter for å plassere elementene. Den faste bredden tilnærmingen fungerer ikke lenger i dag nå, da vi har enhetsskjermbilder fra 3 tommer til noen få meter. I et fluidnettdesign er alt kodet i forhold til dets relative andel til basiselementet, dvs. i stedet for å spesifisere høyden og bredden til hvert element; den er gitt en prosentandel eller relativ størrelse.

Tenk deg at du har fire kolonner. For å gjøre dette væsken, i stedet for å spesifisere hver som 200 piksler bredt, må du spesifisere dem 0,2083% (dvs. som 200/960). I det minste er det prinsippet. Å lage et helt flytende rutenett krever mye omhu. Det er en av de sjeldne tilfellene, jeg vil helst anbefale å bruke tilpassede verktøy. Tiny Fluid Grid , Variable Grid System og Fluid Baseline Grid er noen gode alternativer til å skrive ditt eget væskenett fra bunnen av.

3. Fleksible bilder

Bilder blir ansett fleksible når bildet kommer i innfødt størrelse, så lenge HTML-beholderen støtter det, men når nettleservinduet krymper, skaleres bildet for å passe det.

Selv om resten av designet er flytende og lydhør, vil det ikke gjøre det bra hvis alle komponenter ikke skaleres. Dette kan bli vanskelig med bilder og videoer. Et bilde på 700 piksler vil se bra ut på et skrivebord, men bli hakket av når det vises på en 320 piksler tablett. Mest moderne responsive design bruker CSS maksimal bredde egenskap for å lage bilder skala. (Denne metoden var først foreslått av Richard Butler .)

img {max-width: 100%;}

Disse få linjene vil sikre at bildet ikke blir hugget av ved å sette maksimal bildebredde til 100% av beholderen. Hvis nettleservinduet eller skjermen blir mindre, vil denne delen av CSS-koden krympe bildet forholdsmessig. Høyden justeres automatisk, samtidig som bildeforholdet er låst.

Du kan i stedet låse bildet for å oppta en bestemt vertikal skjermandel som dette

img {max-height: 75%;}

(Pass på at du ikke bruker begge egenskapene med maksimal høyde og maksimal bredde sammen.)

Bildestørrelsen kan også kobles til tekststørrelsen i stedet for overordnet elementet ved hjelp av em , slik:

img {width: 30em;}

Hvis bildet inneholder tekst, kan det hende du vil begrense minimum / maksimumstørrelsen, for å sikre at teksten kan leses. Du kan spesifisere det slik:

img {width: 30em;max-width: 500px;min-width: 100px;}

De samme teknikkene kan brukes til å skalere videoer, for eksempel:

.video embed, .video object, .video iframe {     width: 100%;     height: auto; }

Siste tanker

Responsiv design er fremtiden for vår bransje, men med så mange forskjellige teknikker som flyr rundt, er det ofte vanskelig å holde tritt. Master disse 3 enkle teknikkene, og du vil være 90% av veien til å være en responsiv designer.

Utvalgt bilde / miniatyrbilde, elastisk bilde via Shutterstock.