Når du designer nettstedet ditt, er det viktig å sørge for at det ser bra ut på alle enheter, uavhengig av skjermstørrelse og form. Responsive nettsteder er designet for å se bra ut på alle slags moderne enheter som datamaskiner, telefoner, nettbrett, TV -er, bærbare og til og med bilskjermer. For å gjøre et nettsted responsivt må du endre CSS- og HTML -koden for å endre størrelsen på elementene automatisk, avhengig av spesifikke forhold. Denne wikiHow lærer deg hvordan du planlegger og implementerer grunnleggende responsivt webdesign.
Trinn
Metode 1 av 3: Planning Responsive Design
Trinn 1. Finn ut hvordan publikummet bruker nettstedet ditt
I disse dager gjør de fleste som surfer på nettet det fra mobiltelefoner og nettbrett. For at et nettsted skal være responsivt, må du sørge for at det vises riktig uansett hvor det vises. Hvis tid og penger er avgjørende, fokuser du på hvilke typer enheter som er mest populære blant brukerne dine (hvis denne informasjonen er tilgjengelig) og hvordan de bruker nettstedet ditt. Bruk analyseprogramvaren eller annen form for forskning for å finne ut:
- Hva slags enheter bruker de oftest for å se nettstedet, med spesiell oppmerksomhet til mobiltelefon/nettbrett/datamaskinmerker og størrelser på skjerm/oppløsning.
- Hvilke nettlesere er mest populære blant brukerne dine. Når det gjelder global statistikk, er Google Chrome den mest populære nettleseren over hele verden, men Safari er en nær andre.
- Hvordan besøkende bruker nettstedet ditt, for eksempel hvor mye tid de bruker på å se det, hvor de ser på det og hvilket innhold som er mest populært. Dette kan hjelpe deg med å finne ut hvilken type innhold som er viktig å inkludere og som kan utelates.
Trinn 2. Design forskjellige oppsett for forskjellige enheter
Du kan bruke en kombinasjon av CSS og JavaScript for å oppdage en brukers enhet, så vel som dens evner (enten den støtter Java, Flash, etc.) og vise en bestemt versjon av nettstedet ditt tilsvarende. CSS Media Queries er spesielt nyttige for å bestemme størrelsen/oppløsningen til enheten.
Trinn 3. Redegjør for ulike typer interaksjoner
Din besøkende kan samhandle med nettstedet ditt ved hjelp av en mus, et tastatur, en berøringsskjerm eller til og med en skjermleser for synshemmede. Med tanke på dette, bør nettstedet ditt svare på museklikk, tastaturtaster (Tab, Enter, Return, etc.,) og fingertrykk på skjermen.
Hover-over-effekter fungerer ikke med noe annet enn en mus. I stedet for å bruke disse effektene, kan du kreve at den besøkende klikker på en knapp eller et ikon for å vise det som tidligere ble vist på en mus
Trinn 4. Vurder å bruke et Content Management System (CMS)
En enkel måte å sikre at nettstedets design er responsiv, er å bruke et CMS med et forhåndsbygd responsivt tema. Ved å bruke et CMS som Joomla, Drupal eller Wordpress kan du sikre at nettstedet ditt ser bra ut på alle enheter uten å måtte kode de responsive elementene selv. Ta kontakt med nettverksleverandøren din for å se hvilke CMS -verktøy som er tilgjengelige med tjenesten din.
Trinn 5. Bruk elektroniske verktøy for å teste nettstedet ditt
Nå som responsivt webdesign har økt i popularitet, er det en rekke gratis verktøy du kan bruke til å teste nettstedet ditt. Hvis du allerede har kodet nettstedet ditt, kan du bruke disse verktøyene til å teste hvordan det ser ut under forskjellige forhold, slik at du vet hvor du må forbedre responsen:
- Mobilvennlig test fra Google: Lar deg vite om nettstedet ditt fungerer like godt på mobile enheter som det gjør på dataskjermer.
- resizeMyBrowser: Lar deg se nettstedet ditt i forskjellige oppløsninger.
- Ansvarlig: Viser nettstedet ditt på forskjellige enhetsskjermer i forskjellige oppsett (sidelengs eller høyre side opp).
Metode 2 av 3: Gjøre sideoppsettet responsivt
Trinn 1. Vurder et gratis responsivt rammeverk for stilark
Et rammeverk er et forhåndsskrevet sett med HTML, CSS og/eller JavaScript som du kan bruke som et skjelett for nettstedet ditt. Alle rammer er testet og optimalisert for å fungere med alle nettlesere, så alt du trenger å gjøre er å sette inn innhold, legge til medier og fargeinnstillinger og publisere nettstedet ditt. Noen populære rammer er:
- Støvelhempe
- Skjelett
- Fundament
Trinn 2. Angi visningsporten med en metakode
Hvis du ikke bruker et rammeverk, vil du starte med det viktigste aspektet ved koding av et responsivt nettsted: Viewport. Visningsporten er den delen av nettstedet som er synlig for brukeren. Nøkkelen til å få nettstedet ditt til å vises riktig uansett skjermstørrelse er å skalere visningsportens størrelse i META -taggen. For å gjøre det, inkluder denne taggen øverst på hver side på nettstedet:
Trinn 3. Angi tekststørrelsen i forhold til visningsporten
Når visningsporten er angitt, skal teksten på siden din skaleres slik at den passer til skjermen. Imidlertid kan fonter vise for store eller for små hvis størrelsene ikke er spesifisert i forhold til visningsporten. Du kan gjøre dette ved å definere skriftstørrelsen som en bestemt prosentandel av visningsporten med vw -enheten. Dette eksemplet forteller H1 -overskriftene å vise med 10% av visningsportens bredde, uansett størrelse:
wikiHow
Trinn 4. Bruk mediespørringer til å vise forskjellige stiler for forskjellige skjermstørrelser
Medieforespørsler lar deg velge om du vil vise bestemte CSS -elementer, avhengig av skjermstørrelse. Du kan angi detaljene for mediespørringen i CSS -filen. I dette eksemplet blir kroppens bakgrunnsfarge rød hvis brukerens skjermstørrelse er 480px eller større:
wikiHow
@media-skjerm og (min-bredde: 480px) {body {bakgrunnsfarge: aqua; }}
Metode 3 av 3: Gjøre bilder lydhøre
Trinn 1. Bruk CSS -breddeegenskapen til å skalere bilder
I stedet for å angi bredden på bildet til en bestemt mengde piksler (f.eks. 500 piksler), bruk en prosentandel (f.eks. 100%) slik at bildet ser på bredden på overordnet og justerer deretter. Hvis du setter et bildes bredde til 100%, tvinges bildet til å skalere opp og ned, avhengig av størrelsen på betrakterens skjerm. Slik gjør du dette på linje:
Trinn 2. Bruk egenskapen maks-bredde til å begrense skalering av bildets faktiske størrelse
Hvis du bruker breddeegenskapen i forrige trinn til å skalere et bilde til 100%, vil bildet vokse eller krympe for å passe 100% av beholderen, uansett størrelse. Dette betyr at hvis bildet er på den mindre siden, vil det skalere opp større enn den opprinnelige størrelsen og utseendet av mindre kvalitet. For å forhindre at dette skjer, bruk maks-bredde for å sette bildets maksimale skaleringsstørrelse til 100% (den faktiske størrelsen). Dette er hvordan:
Trinn 3. Bruk HTML -bildeelementet til å vise forskjellige bilder på forskjellige skjermstørrelser
Hvis du vil lage egendefinerte bilder som skal vises på skjermer i forskjellige størrelser, kan du angi hvilke bilder som skal vises i HTML-koden. Lag bildene i forskjellige størrelser, og bruk deretter denne koden som et eksempel for å spesifisere hvilket bilde som skal brukes på 600px og 1500px bredde -skjermer:
