Responsivt webdesign - Sådan får du et websted til at se godt ud på telefoner og tablets

I det hurtigt udviklende landskab af tilsluttede enheder er responsivt webdesign fortsat afgørende for webudvikling.

For ikke længe siden var udtrykket "responsivt webdesign" ikke-eksisterende. Men i dag har de fleste af os været nødt til at vedtage det til en vis grad.

Ifølge Statistica finder pr. 2019 61% af alle Google-søgebesøg sted på en mobilenhed. I september 2020 ændrer Google sin søgealgoritme for at prioritere mobilvenlige websteder.

I dette indlæg vil jeg dække følgende:

  • Hvad er responsivt webdesign?
  • Visningens metatag og hvad det gør
  • Effektive teknikker, der anvendes i responsivt webdesign til at rumme mobile enheder og tablets
  • Værktøjer til at simulere og overvåge mobiloplevelse og tablet-brugeroplevelse

Hvad er responsivt webdesign? (RWD)

Responsivt webdesign er en tilgang, der fokuserer på et webstedsbrugeres miljø. Brugerens miljø afhænger af, hvilken enhed de har oprettet forbindelse til internettet.

Der er mange enhedskarakteristika, der giver muligheder for brugercentreret fokus. Nogle af disse inkluderer:

  • netværks forbindelse
  • skærmstørrelse
  • type interaktion (berøringsskærme, track pads)
  • grafisk opløsning.

Før responsivt webdesign var populært, administrerede mange virksomheder et helt separat websted, der modtog trafik videresendt baseret på brugeragenten.

Men i responsivt webdesign sender serveren altid den samme HTML-kode til alle enheder, og CSS bruges til at ændre gengivelsen af ​​siden på enheden.

Uanset de to ovennævnte strategier er det første skridt i at oprette et websted til telefon eller tablet at sikre, at browseren kender hensigten. Det er her, visningens metatag kommer i spil.

Viewport-metatagget til identifikation af et mobilwebsted

Meta viewport-koden instruerer browseren i, hvordan du justerer siden til bredden på hver enhed.

Når meta viewport-elementet er fraværende, viser mobile browsere websider med standardindstillinger for skrivebordet. Dette resulterer i en tilsyneladende zoomet ud, ikke reagerer oplevelse.

Nedenfor er en standardimplementering:

Nu hvor browseren ved, hvad der foregår, kan vi bruge populære teknikker til at gøre vores hjemmeside lydhør. ?

CSS-medieforespørgsler til forskellige skærmstørrelser og -retninger

Hvis du er ny med responsivt webdesign, er medieforespørgsler den første, vigtigste CSS-funktion at lære. Medieforespørgsler giver dig mulighed for at style elementer baseret på visningsportbredden. En populær CSS-strategi er at skrive mobile stilarter først og bygge ovenpå dem med mere komplekse, desktop-specifikke stilarter.

Medieforespørgsler er en vigtig del af responsivt webdesign, der ofte bruges til gitterlayouter, skriftstørrelser, margener og polstring, der adskiller sig mellem skærmstørrelse og retning.

Nedenfor er et eksempel på en almindelig anvendelse af mobil første styling, hvor en søjle er 100% bred for mindre enheder, men i større visningsport er 50%.

.column { width: 100%; } @media (min-width: 600px) { .column { width: 50%; } }

Koden ovenfor er et simpelt eksempel, men hvad det rent faktisk gør er ret interessant.

  1. Ved først at overveje mobil er "kolonne" -elementet indstillet til at have en bredde på 100%;
  2. Ved at bruge en min-widthmedieforespørgsel definerer vi regler specifikt for visningsport med en mindste bredde på 600px(visningsport bredere end 600px). Så for visningsport bredere end 600pxvores kolonneelement har en bredde, der er 50% af dets overordnede.

Selvom medieforespørgsler er vigtige for responsivt webdesign, bliver mange andre nye CSS-funktioner også bredt vedtagne og understøttet i browsere. Flexbox er en af ​​disse nye, vigtige CSS-funktioner med hensyn til responsivt webdesign.

Hvad er Flexbox?

Du undrer dig måske - "hvad gør Flexbox"? Det bedre spørgsmål er - "hvad kan ikke Flexbox gøre"? Hvad er den nemmeste måde at centrere lodret med CSS? Flexbox. Hvordan opretter du et responsivt gitterlayout? Flexbox. Hvordan kan vi opnå global fred? Flexbox.

Flexbox Layout (Flexible Box) -modulet giver en mere effektiv måde at lægge, justere og fordele plads på emner i en container, selv når deres størrelse er dynamisk (deraf ordet "flex").

I nedenstående eksempel kombinerer vi medieforespørgsler som forklaret ovenfor for at skabe et responsivt gitter.

 main { background: #d9d7d5; display: flex; flex-wrap: wrap; justify-content: space-between; } div { background: #767775; flex-basis: 100%; height: 100px; margin-bottom: 0.5rem; } @media (min-width: 600px) { main { flex-wrap: nowrap; } div { flex-basis: 33%; } } 

Vi opnår følgende med denne kode:

  1. Opret et flexbox-layout med display: flexi vores maincontainerelement.
  2. Stil til mobil først. Vi indstiller det mainelement, flex-wrap: wrapsom gør det muligt for underordnede elementer at pakke ind i vores flexbox-layout som illustreret nedenfor i figur 1. Vi sætter flex-basis: 100%vores divelementer på for at sikre, at de omfatter 100% af moderbredden i flexbox-layoutet (figur 1).
  3. Stil til større enheder som tablets og desktop. Vi bruger en medieforespørgsel svarende til vores eksempel i det foregående afsnit for at indstille vores containerelement maintil flex-wrap: nowrap. Dette sørger for, at underordnede elementer ikke ombrydes, og at de opretholder en kolonne inden for en række type layout. Ved at sætte divtil flex-basis: 33%i medierne forespørgsel - vi etablere kolonner, der er 33% af bredden af moderselskabet.
  4. I dette eksempel vises magien i større enheder med vores kombinerede medieforespørgsel og flexbox-regler. Fordi vi definerede display: flex, og fordi vi ikke tilsidesatte reglen inden for medieforespørgslen, har vi et flexbox-layout til mobil, tablet og desktop. Medierne forespørgsel flex-basis: 33%og nedarvede display: flexregler vil give os en genkendelig flexbox layout som set i figur 2. I fortiden, for at opnå denne kolonne type layout, ville vi nødt til at gøre nogle alvorlige tunge løft og skrive ledningsrod af CSS.

Flexbox giver en fantastisk måde at opnå varierende, flydende layout. I nogle tilfælde har vi måske ikke sådan frihed i lodret rum. Vi skal muligvis tilpasse et element inden for en fast højde. I denne situation har vi en anden teknik til rådighed - vandret rulle.

Vandret rulning med Overflow Scroll

Der kan komme et tidspunkt, hvor du har indhold, der overfylder visningen uden en yndefuld måde at håndtere det på. Se ... overløb rul til undsætning. ?

Almindelige anvendelser til denne teknik inkluderer menuer og tabeller, der kan rulles. Nedenfor er et eksempel på en rullemenu.

Responsivt webdesign RWD Responsiv menu Eksempel på overløbsrulle Dette er meget indhold! Ja, vi har en anden vare
 menu { background: #d9d7d5; padding: 0.25rem; overflow-y: scroll; white-space: nowrap; } span { background: #767775; color: #ffffff; display: inline-block; margin: 0.25rem; padding: 0.5rem; }   Responsive Web Design RWD Responsive menu Overflow scroll example This is a lot of content! Yes we have another item 

Hvordan gjorde du det !? Lad os tage et dybere dykke.

  • overflow-y: scroller den vigtigste ingrediens i denne opskrift. Ved at angive det vil underordnede elementer overløbe den vandrette akse med rulleopførsel.
  • Ikke så hurtigt! Selvom du måske synes, det overflow-yville være nok, skal vi også fortælle browseren ikke at pakke de underordnede elementer med white-space: nowrap?

Now that we have a few RWD layout techniques up our sleeve, let's take a look at elements that pose challenges specific to their visual nature - images and video.

Responsive Images

By using modern image tag attributes we can accommodate a range of devices and resolutions. Below is an example of a responsive image.

 img { max-width: 100%; }     

This is doing a lot of things. Let's break it down:

  1. By setting max-width: 100% the image will scale up or down based on its container width.
  2. By using a combination of picture, source, and img tags we are actually only rendering one image and are only loading the best fitting image based on the user's device.
  3. WebP is a modern image format that provides superior compression for images on the web. By utilizing source we can reference a WebP image to use for browsers that support it, and another source tag to reference a PNG version of the images that don't support WebP.
  4. srcset is used to tell the browser which image to use based on the device's resolution.
  5. We establish native lazy loading by utilizing the loading="lazy" attribute / value pair.

Responsive Video

Responsive video is another subject that has inspired a large number of articles and documentation.

One key strategy to establish responsive images, video, iframes and other elements involves the use of aspect-ratio. The aspect ratio box is not a new technique and quite a useful tool to have up your sleeve as a web developer.

This article provides a solid demonstration about how to achieve "fluid" width videos. Let's take a look at the code and break it down.

 .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }  

In this example we have a YouTube video embed as an iframe and a div container with videoWrapper class. This code is doing a lot... let's dig in.

  • position: relative on the container element allows child elements to utilize absolution positioning relative to it.
  • height: 0 combined with padding-bottom: 56.25% is the key ingredient here which establishes a dynamic behavior, enforcing a 16:9 aspect ratio.
  • position: absolute, top: 0 and left: 0 set on the iframe creates a behavior in which the element positions itself absolutely relative to its parent... sticking it to the top left.
  • And finally width and height of 100% makes the child, iframe element 100% of its parent. The parent, .videoWrapper takes full control of establishing this aspect ratio layout.

I know... it's a lot. There's more we can do to make video and images look the best on phones and tablets. I'd encourage research on those topics independently in addition to this.

Okay, now that we're masters of responsive web design, how can we test what we've done? Fortunately, we have a number of tools to simulate and monitor user experience on a variety of devices.

Tools to Simulate and Monitor Responsive Websites

There are a variety of useful tools to help us create websites with responsive web design. Below are a couple that I find especially useful.

Chrome DevTools Mobile Emulation

Chrome's DevTools provides mobile emulation of a range of tablet and mobile devices. It also provides a "responsive" option which allows you to define a custom viewport size.

Monitoring Mobile Website Performance with Foo

Lighthouse is an open-source tool that provides a way of analyzing website performance specific to a device.

Foo uses Lighthouse behind the scenes to monitor website performance and provides feedback for analysis. You can setup monitoring for both desktop and mobile devices to get continuous feedback about how responsive your website is.

For example, a Lighthouse report will callout images that are improperly loaded based on device.

Conclusion

Responsivt webdesign vil fortsætte med at udvikle sig hurtigt, men hvis vi holder os ajour med aktuelle tendenser, kan vi give vores brugere den bedste oplevelse. Jeg håber, at disse værktøjer og teknikker er nyttige!

Ikke kun vil vores webstedsbrugere drage fordel af et alsidigt design, men også søgemaskiner rangerer vores websider højere.