I dag blir nettstedet ditt besøkt av et bredt utvalg av enheter: stasjonære datamaskiner med store skjermer, mellomstore bærbare datamaskiner, nettbrett, smarttelefoner og mer.

For å oppnå en optimal brukeropplevelse som en frontingeniør , bør nettstedet ditt justere oppsettet som svar på disse varierte enhetene (dvs. til deres varierte skjermoppløsninger og dimensjoner). Prosessen av svarer til skjemaet for brukerens enhet er referert til som (du gjettet det) Responsivt webdesign (RWD).

Hvorfor er det verdt tiden din å studere Responsivt webdesign eksempler og skift fokus til RWD? Noen webdesignere, for eksempel, gjør det i stedet sitt livs arbeid for å sikre en stabil brukeropplevelse i alle nettlesere, og bruker ofte dager på slutten til å løse små problemer med Internet Explorer.

Dette er en tåpelig tilnærming.

Noen webdesignere bruker dager på slutten på å ta opp små problemer med Internet Explorer og lar mobilbrukerne være som brukte besøkende. Dette er en tåpelig tilnærming.

Mashable kalte 2013 året for responsiv webdesign . Hvorfor? Over 30% av trafikken deres kommer fra mobile enheter. De anslår at dette tallet kan nå 50% innen utgangen av året. Over hele nettet generelt, 17,4% av nettrafikken kom fra smarttelefoner i 2013 . Samtidig står for eksempel Internet Explorer for bare 12% av alle nettleser trafikk, ned ca 4% fra denne tiden i fjor (ifølge W3Skoler ). Hvis du optimaliserer for en bestemt nettleser, i stedet for den globale smarttelefonpopulasjonen, savner du skogen for trærne. Og i noen tilfeller kan dette bety forskjellen mellom suksess og fiasko - responsiv design har implikasjoner for konverteringsfrekvenser , SEO , sprettfrekvenser , og mer.

Den responsive webdesigntilnærmingen

Det som ofte blir glanset om RWD, er at det ikke bare handler om å justere utseendet til nettsidene dine. i stedet bør fokuset være på å logisk tilpasse nettstedet ditt for bruk på tvers av forskjellige enheter. For eksempel: bruk av musen gir ikke den samme brukeropplevelsen som for eksempel berøringsskjermen. Er du ikke enig? Din responsive mobil- og stasjonære layout bør gjenspeile disse forskjellene.

Samtidig vil du ikke omskrive nettstedet ditt for hver av de titalls forskjellige skjermstørrelser som det kan vises på - en slik tilnærming er ganske enkelt gjennomførbar. I stedet er løsningen å implementere fleksible responsive designelementer som bruker samme HTML-kode for å tilpasse seg brukerens skjermstørrelse.

Fra et teknisk synspunkt ligger løsningen i denne responsive designveiledningen: bruk CSS mediespørsmål , pseudo-elementer , fleksible rutenettoppsett og andre verktøy for dynamisk justering til en gitt oppløsning.

Mediespørsmål i responsivt design

Medietyper dukket først opp i HTML4 og CSS2.1 , som muliggjorde plassering av separat CSS for skjerm og utskrift. På denne måten var det mulig å angi separate stiler for en sides datamaskindisplay over utskriften.

@media screen { * { background: silver } }

eller

max-width

I CSS3 , kan du definere stiler avhengig av sidebredden. Siden sidebredden korrelerer med størrelsen på brukerens enhet, lar denne funksjonen deg dermed definere forskjellige oppsett for forskjellige enheter. Merk: mediespørsmål støttes av alle store nettlesere .

Denne definisjonen er mulig gjennom innstilling av grunnleggende egenskaper: device-width, orientation, color, og @media screen and (min-width: 480px) { div { float: left; background: red; } ....... } . Andre definisjoner er også mulig; men i dette tilfellet er det viktigste å merke seg minimum oppløsning (bredde) og orienteringsinnstillinger (liggende vs. stående).

Det responsive CSS-eksemplet nedenfor viser prosedyren for å starte en bestemt CSS-fil med hensyn til sidebredden. For eksempel, hvis 480px er den maksimale oppløsningen på skjermen til gjeldende enhet, vil stilene som er definert i main_1.css bli brukt.

initial-scale

Vi kan også definere forskjellige stiler i samme CSS-stilark slik at de bare brukes hvis visse begrensninger er oppfylt. For eksempel vil denne delen av vår responsive CSS bare brukes hvis den nåværende enheten hadde en bredde over 480px:

user-scalable=false

“Smart zoom”

Nettlesere bruker såkalt “smart zoom” for å gi brukerne en ”overlegen” leseopplevelse. I utgangspunktet brukes smart zoom for å redusere sidestørrelsen proporsjonalt. Dette kan manifestere seg på to måter: (1) brukerinitiert zoom (for eksempel å trykke to ganger på en iPhone-skjerm for å zoome inn på det nåværende nettstedet), og (2) i utgangspunktet å vise en zoomet inn versjon av en webside på laste.

Gitt at vi bare kan bruke responsive mediespørsmål for å løse noen av problemene smart zoom kan målrettes mot, er det ofte ønskelig (eller til og med nødvendig) å deaktivere zoom og sikre at sideinnholdet alltid fyller nettleseren:

display: none;

Ved å sette :before til 1, kontrollerer vi det opprinnelige sidens zoomnivå (det vil si mengden zoom ved sideinnlasting). Hvis du har designet nettsiden din for å være responsiv, bør det flytende, dynamiske oppsettet fylle smarttelefonskjermen på en intelligent måte uten å kreve innledende zoom.

I tillegg kan vi deaktivere zoom helt med :after.

Sidebredder

Si at du ønsker å tilby tre forskjellige responsive sideoppsett: en for stasjonære datamaskiner, en for nettbrett (eller bærbare datamaskiner) og en for smarttelefoner. Hvilke sidedimensjoner bør du målrette mot som avskjæringer (f.eks. 480px)?

Dessverre er det ingen definert standard for sidebredder å målrette mot, men følgende eksempler på responsive verdier brukes ofte:

• 320px
• 480px
• 600px
• 768px
• 900px
• 1024px
• 1200px

Imidlertid finnes det en rekke forskjellige bredde-definisjoner. For eksempel, 320 og oppover har fem standardinnstillinger for CSS3 Media Query: 480, 600, 768, 992 og 1382px. Sammen med det gitte eksemplet i denne responsive veiledningen for nettutvikling, kunne jeg telle opp minst ti andre tilnærminger.

Med noen av disse rimelige settene med trinn kan du målrette mot de fleste enheter. I praksis er det vanligvis ikke behov for å håndtere alle de ovennevnte eksemplene på sidebredder separat - syv forskjellige oppløsninger er sannsynligvis for store. Etter min erfaring er 320px, 768px og 1200px det mest brukte; disse tre verdiene skal være tilstrekkelig for å målrette henholdsvis smarttelefoner, nettbrett / bærbare datamaskiner og stasjonære datamaskiner.

Psuedo-Elements

Hvis du bygger på dine responsive mediespørsmål fra forrige eksempel, vil du kanskje også vise eller skjule viss informasjon programmatisk basert på størrelsen på brukerens enhet. Heldigvis kan dette også oppnås med ren CSS som beskrevet i veiledningen nedenfor.

For det første kan skjuling av noen elementer (:first-line) være en god løsning når det gjelder å redusere antall elementer på skjermen for en smarttelefonoppsett, hvor det nesten ikke er nok plass.

Men utover det kan du også bli kreativ med CSS pseudo-elementer (velgere), f.eks. p:first-line og p. Merk: nok en gang støttes pseudoelementer av alle store nettlesere .

Pseudo-elementer brukes til å bruke bestemte stiler på bestemte deler av et HTML-element, eller til å velge et bestemt delsett av elementer. For eksempel a:visited pseudo-element lar deg definere stiler utelukkende på første linje en bestemt velger (f.eks. a vil gjelde for den første linjen av alle .username:after { content:'Insert your user name'; } @media screen and (max-width: 1024px) { .username:before { content:'User name'; } } @media screen and (max-width: 480px) { .username:before { content:''; } } s). Tilsvarende :before pseudo-element lar deg definere stiler på alle :after s med lenker tidligere besøkt av brukeren. Disse kan helt klart komme til nytte.

Her er et enkelt responsivt designeksempel der vi lager tre forskjellige oppsett for en påloggingsknapp, en stykk for stasjonær, nettbrett og smarttelefon. På smarttelefonen har vi et enslig ikon, mens nettbrettet vil ha det samme ikonet ledsaget av 'Brukernavn'. Til slutt, for skrivebordet, legger vi også til en kort instruksjonsmelding ('Sett inn brukernavnet').

@media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } }

Bruk bare img { max-width: 100% } og

pseudo-elementer, oppnår vi følgende:

For mer om magien til psuedo-elementer, har Chris Coyier en god skrive opp på CSS-Tricks.

Så, hvor skal jeg begynne?

I denne veiledningen har vi etablert noen av byggesteinene for responsiv webdesign (dvs. mediespørsmål og pseudoelementer) og lagt ut noen eksempler på hver. Hvor går vi herfra?

Det første trinnet du bør ta er å organisere alle nettsidens elementer i forskjellige skjermstørrelser.

Ta en titt på skrivebordsversjonen av oppsettet som er presentert ovenfor. I dette tilfellet kan innholdet til venstre (det grønne rektangelet) tjene som en slags hovedmeny. Men når enheter med lavere oppløsning er i bruk (f.eks. Et nettbrett eller smarttelefon), kan det være fornuftig at denne hovedmenyen vises i full bredde. Med mediespørsmål kan du implementere denne oppførselen på følgende måte:

|_+_|

Dessverre er denne grunnleggende tilnærmingen ofte utilstrekkelig ettersom front-enden din blir komplisert. Ettersom innholdsorganisasjonen til et nettsted ofte er forskjellig mellom mobile og stasjonære versjoner, avhenger brukeropplevelsen til slutt av bruken av ikke bare responsiv CSS, men også HTML og JavaScript.

Når du bestemmer responsive oppsett for forskjellige enheter, er flere viktige elementer viktige. I motsetning til stasjonære versjoner der vi har nok plass til innholdet, er smarttelefonutvikling mer krevende. Mer enn noen gang er det nødvendig å gruppere spesifikt innhold og definere hierarkisk viktigheten av individuelle deler.

For en smarttelefon er det viktigere enn noen gang å gruppere spesifikt innhold og definere hierarkisk viktigheten av individuelle deler.

De forskjellige bruken av innholdet ditt er også viktig. Når brukeren din for eksempel har en mus, kan de sette markøren over visse elementer for å få mer informasjon, slik at du (som webutvikler) kan la litt informasjon samles på denne måten - men dette vil ikke være tilfelle når brukeren din er på en smarttelefon.

I tillegg, hvis du lar knapper på nettstedet ditt som gjengis på smarttelefoner som mindre enn en vanlig finger, vil du skape usikkerhet i bruken og følelsen av nettstedet ditt. Legg merke til at i standardbildet (til venstre) i bildet ovenfor, blir noen elementer fullstendig ubrukelige når de vises på en mindre enhet.

Slik oppførsel vil også øke sjansene for at brukeren din gjør en feil, noe som reduserer opplevelsen. I praksis kan dette manifestere seg som reduserte sidevisninger, færre salg og mindre samlet engasjement.

Andre responsive designelementer

Når du bruker mediespørsmål, bør du huske på oppførselen til alle sideelementene, ikke bare de som er målrettet mot, spesielt når du bruker flytende rutenett, i så fall (i motsetning til faste dimensjoner) vil siden være fullstendig fylt til enhver gitt øyeblikk, øke og redusere innholdsstørrelsen proporsjonalt. Siden bredder er satt i prosent, kan grafiske elementer (dvs. bilder) bli forvrengt og forvrengt under en slik flytende layout. For bilder er en løsning som følger:

Andre elementer bør håndteres på lignende måter. For eksempel er å bruke en flott løsning for ikoner i RWD IconFonts .

Noen få ord om flytende rutenett

Når vi diskuterer prosessen med full designtilpasning, ser vi ofte på optimal seeropplevelse (fra brukerens perspektiv). En slik diskusjon bør omfatte maksimal tilrettelagt bruk, elementvikt (basert på synlige sideregioner), forenklet lesing og intuitiv navigering. Blant disse kategoriene er en av de viktigste komponentene justering av innholdsbredde . For eksempel har de såkalte fluid grid-systemene satt elementer, dvs. elementer basert på relative bredder i prosent av den totale siden. På denne måten, alle elementene i Responsivt webdesign systemet justeres automatisk etter størrelsen på siden.

Selv om disse væskesystemene er nært beslektet med det vi har diskutert her, er de egentlig en hel separat enhet som vil kreve en ekstra opplæring for å diskutere i detalj. Derfor vil jeg bare nevne noen store rammer som støtter slik oppførsel: Støvelhempe , Usemantisk , og Braketter .

Konklusjon

Inntil nylig var nettstedoptimalisering et begrep som eksklusivt var forbeholdt tilpasning av funksjonalitet basert på forskjellige nettlesere. I tillegg til den uunngåelige kampen med forskjellige nettleserstandarder som vi står overfor i dag, forutsetter dette begrepet nå å tilpasse seg enheter og skjermstørrelser med responsivt webdesign også. For å kutte det på det moderne nettet, må nettstedet ditt ikke bare vite hvem er ser på det, men hvordan .