Teknikker i Responsive Web Design
Vi har snakket mye om responsiv design her på Webdesigner Depot, og delte mange verdifulle ressurser. I dag deler vi en annen verdifull ressurs: På slutten av denne artikkelen finner du detaljer for å få rabatt på Chris Converses responsive design kurs på MightyDeals.
Med CSS3-mediespørsmål kan vi dynamisk endre utformingen og utformingen av en nettside for å levere en optimal brukeropplevelse fra et enkelt sett med HTML- og CSS-oppslag.
Teknikkene i denne artikkelen forklarer hvordan vi kan utnytte denne kraftige evnen til CSS til å også endre bilder, endre navigasjonen på håndholdte enheter og konfigurere standard CSS for kompatibilitet eldre nettlesere.
Opprette forskjellige bilder
Når du endrer designet ditt for forskjellige enheter, bør du vurdere å opprette flere versjoner av grafikken din. Dette kan i stor grad påvirke hastigheten som designet ditt laster på mindre skjermer, og gir deg muligheten til å tilpasse hver versjon av grafikken din.
Eksemplet under viser de forskjellige størrelsesordenene, og beskjæringsvalg, i tillegg til de varierende mengder komprimering som brukes på hvert sett med bilder. Siden mange små skjerm enheter har høyere oppløsning skjermer, ekstra komprimering er unnoticeable, og filstørrelsen er betydelig mindre.
Dra nytte av det faktum at du kan bytte bildene dynamisk, og tilpasse størrelsen og beskjæringen av bildene dine for hver skjermstørrelse. I eksemplet ovenfor viser sidebjørnet for den store skjermstørrelsen flere detaljer i glassmalerivinduet, mens de mindre bildene viser mer kontekst av vinduet.
Tilordne bilder til HTML-elementer
![]()
Ved å tilordne bilder til elementets bakgrunn kan vi endre den refererte grafiske filen, i tillegg til å kunne endre dimensjonene og posisjonsegenskapene til beholderen.
Sett på den globale navigasjonen på håndholdte enheter
Når du ser på nettsider på større skjermbilder, er den forventede plasseringen av navigasjonen øverst eller venstre på skjermen. Med tanke på større skjermer kan vi se innhold i tillegg til navigasjonen, hindrer brukeropplevelsen ikke brukeren i å få innholdet. På håndholdte enheter, kan navigasjonen imidlertid ta opp hele eiendommen på skjermen hvis den vises øverst. Dette kan også føre til at brukeren tror at de må gjøre et annet navigasjonsvalg i stedet for å innse innholdet er lenger under på siden.
For håndholdte enheter vises global navigasjon vanligvis etter innholdet, slik at en bruker kan sveipe oppover gjennom innholdet, og deretter bli presentert med flere navigasjonsalternativer. Utfordringen her er å flytte navigasjonen med CSS uten å måtte endre HTML.
Figuren over viser at navigasjonsmarkeringen er plassert etter hovedinnholdet. Dette gjør at vi kan holde den naturlige strømmen av innhold for håndholdte enheter, og plassere navigasjonen på større skjermer. Dette oppnås ved å sette absolutte posisjoneringsegenskaper på navigasjonsbeholderen når den vises på større skjermbilder, og fjerner stillingsegenskapene på små skjermbilder.
I tillegg til å endre posisjonen til navigasjonen, kan vi også endre stilen også. Standard ankerkoder er restyled på små skjermer for å gjenspeile utseendet på mobilknapper som ofte brukes på håndholdte enheter. Figuren nedenfor viser den dramatiske transformasjonen vår CSS-fil kan ha på våre navigasjonsforbindelser.
Bruk stort skjerm-CSS som standard for eldre nettlesere
For å holde bakoverkompatibilitet med eldre nettlesere, behold de store skjermreglene utenom eventuelle medieforespørsler. Dette sikrer at tidligere versjoner av nettlesere som mangler støtte for medieforespørsler, fortsatt kan se et sett med CSS-regler.
Når spørreskjemaene for media er oppfylt av brukerens skjermstørrelse, vil reglene som er definert i spørringen, tilsidesette reglene utenom spørsmål for storskjerm-enheter. Dette gir deg en innebygd bakoverkompatibilitet for nettlesere som støtter CSS-baserte oppsett, men ikke CSS3-mediesøk.
Lær å skape en responsiv webdesign
Følg med Chris Converse som han lærer deg å skape det ovennevnte webdesignet trinn for steg. Den vanlige prisen for Creating Responsive Web Design kurset er $ 150, men i en begrenset periode kan du få kurset via Mighty Deals for bare $ 39 !