Teknikker i Responsive Web Design
Vi har talt meget om responsivt design her på Webdesigner Depot og delte mange værdifulde ressourcer. I dag deler vi en anden værdifuld ressource: I slutningen af denne artikel er detaljer for at få rabat på Chris Converses lydhørige design kursus på MightyDeals.
CSS3 medie forespørgsler giver os mulighed for dynamisk at ændre design og layout af en webside for at levere en optimal brugeroplevelse fra et enkelt sæt HTML og CSS markup.
Teknikkerne i denne artikel forklarer, hvordan vi kan udnytte denne kraftfulde evne til CSS til også at ændre billeddannelse, ændre navigationen på håndholdte enheder og konfigurere standard CSS til kompatibilitet med ældre browsere.
Oprettelse af forskellige billeder
Når du ændrer dit design til forskellige enheder, overvej at oprette flere versioner af din grafik. Dette kan i høj grad påvirke den hastighed, som dit design belastes på mindre skærme, og giver dig mulighed for at tilpasse hver version af din grafik.
Eksemplet herunder viser de forskellige størrelsesbestemmelser og beskæringsvalg, ud over de forskellige kompressionsmængder, der anvendes på hvert sæt billeder. Da mange små skærm-enheder har højere opløsningsskærme, er den ekstra komprimering unnoticeable, og filstørrelsen er betydeligt mindre.
Udnyt det faktum, at du kan skifte dine billeder dynamisk og tilpasse størrelsen og beskæringen af dine billeder for hver skærmstørrelse. I eksemplet ovenfor viser sidebjælken for den store skærmstørrelse mere detaljer i vinduet med farvet glas, mens de mindre billeder viser mere kontekst af vinduet.
Tildel billeder til HTML-elementer
![]()
Ved tildeling af billeder til et elements baggrund kan vi ændre den refererede grafiske fil ud over at kunne ændre beholderens dimensioner og positionsegenskaber.
Gendan den globale navigation på håndholdte enheder
Når du ser websider på større skærme, er den forventede placering af navigationen øverst eller venstre på skærmen. I betragtning af større skærme tillader os at se indhold ud over navigationen, forhindrer denne brugeroplevelse brugeren ikke i at få indholdet. På håndholdte enheder kan navigationen dog tage hele skærmen fast ejendom, hvis den vises øverst. Dette kan også få brugeren til at tro, at de skal foretage et andet navigationsvalg i stedet for at indse indholdet er længere under på siden.
For håndholdte enheder vises global navigation typisk efter indholdet, så en bruger kan swipe opad gennem indholdet og derefter præsenteres med yderligere navigationsindstillinger. Udfordringen her er at omplacere navigationen med CSS uden at skulle ændre HTML'en.
Figuren ovenfor viser, at navigationsmarkeringen er placeret efter hovedindholdet. Dette gør det muligt for os at holde den naturlige strøm af indhold til håndholdte enheder og omplacere navigationen på større skærme. Dette opnås ved at indstille absolutte positioneringsegenskaber på navigationsbeholderen, når den ses på større skærme, og fjerner positionsegenskaberne på små skærme.
Udover at ændre placeringen af navigationen kan vi også ændre stilen. Standard anker tags er restyled på små skærme for at afspejle udseendet af mobile knapper, der almindeligvis anvendes på håndholdte enheder. Figuren nedenfor viser den dramatiske transformation, vores CSS-fil kan have på vores navigationslinks.
Brug CSS til stor skærm som standard for ældre browsere
For at holde baglæns kompatibilitet med ældre browsere, skal du holde reglerne på den store skærm uden for eventuelle medieforespørgsler. Dette sikrer, at tidligere versioner af browsere, der mangler support til medieforespørgsler, stadig kan se et sæt CSS-regler.
Når medieforespørgselsbetingelserne er opfyldt af din brugers skærmstørrelse, tilsidesætter reglerne i forespørgslen reglerne uden for forespørgsler til storskærmsenheder. Dette giver dig en indbygget baglæns kompatibilitet til browsere, der understøtter CSS-baserede layouter, men ikke CSS3-medieforespørgsler.
Lær at skabe et lydhurt webdesign
Følg med Chris Converse som han lærer dig at oprette ovennævnte webdesign trin for trin. Den faste pris for Creating Responsive Web Design kursus er $ 150, men i et begrænset tidsrum kan du få kurset via Mighty Deals for kun $ 39 !