Responsive Design

Responsivt design er en tilgang til at bygge webgrænseflader, der tilpasser sig størrelsen og funktionerne på den enhed, der viser dem, ved hjælp af flydende layouts, fleksible billeder og CSS-medieforespørgsler til at omforme en enkelt kodebase på tværs af viewports. Det blev introduceret som en navngivet praksis af Ethan Marcotte i 2010 og erstattede den tidligere tilgang med at vedligeholde separate desktop- og mobilwebsteder og er nu standardforventningen for stort set alt webarbejde.

Dens primære fordel er at bevare én implementering i stedet for flere. Separate mobilwebsteder afviger over tid, akkumulerer uoverensstemmelser, komplicerer analyser og søgeindeksering og fordobler omkostningerne ved hver ændring. En responsiv implementering holder indhold, URL'er og funktionalitet samlet, hvilket også stemmer overens med, hvordan søgemaskiner indekserer og rangerer sider, da mobil-først-indeksering evaluerer den mobile gengivelse af den samme URL.

Den almindelige misforståelse er, at responsivitet kun betyder, at et layout ikke brydes. At omdanne kolonner til en stak i et smalt viewport er minimummet, ikke målet. Ægte responsivitet tager højde for den forskellige kontekst, funktionalitet og intention, der er forbundet med forskellige enheder: berøringspunkter i størrelse til fingre i stedet for markører, navigationsmønstre, der er egnet til små skærme i stedet for komprimerede skrivebordsmenuer, indholdsprioritering, der sætter det vigtigste materiale først, når alt stables lodret, og formularer, der bruger passende inputtyper og tastaturer.

Det er i praksis, at responsive implementeringer oftest fejler. Et layout, der tilpasser sig visuelt, samtidig med at det downloader billeder i desktopstørrelse, komplette JavaScript-bundter og unødvendige komponenter, leverer en side, der ser korrekt ud og præsterer dårligt på præcis de enheder og forbindelser, der er mindst i stand til at absorbere omkostningerne. Responsive billeder med passende kildekodesæt, betinget indlæsning af komponenter, der ikke vises i små visninger, og udsættelse af ikke-kritiske ressourcer er det, der får tilgangen til at fungere i felten snarere end kun i en browser, der er tilpasset i størrelse på en desktop.

Test af responsivt arbejde kræver rigtige enheder, ikke kun browserstørrelsesjusteringer. Emulatorer gengiver ikke berøringsupræcision, faktiske netværksforhold, hukommelsesbegrænsninger på hardware i mellemklassen eller den måde, systemtastaturer og browser-Chrome bruger lodret plads på. Mange af de mest almindelige fejl, herunder input skjult af tastaturet, klæbrige elementer, der bruger det meste af en lille skærm, og vandret overløb forårsaget af et enkelt bredt element, er usynlige i desktopemulering og umiddelbart synlige på en telefon.

Responsivt arbejde skal også tage højde for tekstskalering og zoom, som ofte overses og er en almindelig kilde til tilgængelighedsfejl. Et layout, der er bygget med faste pixeldimensioner, kan omløbe korrekt på tværs af enhedsbredder, mens det fuldstændigt bryder sammen, når en bruger øger sin browsers standardtekststørrelse eller zoomer til to hundrede procent, hvilket er en indstilling, som et betydeligt antal mennesker er afhængige af permanent. Indhold, der overfylder containere, bliver beskåret eller kræver vandret rulning under disse forhold, overtræder både brugervenligheds- og tilgængelighedsstandarder. Testning med øget tekststørrelse og høje zoomniveauer tager minutter og opdager en kategori af defekter, som testning af enhedsbredde aldrig viser, da de to begrænsninger belaster layoutet på forskellige måder.

Da responsivitet spænder over layout, indholdsstrategi og levering, forbedres den sjældent ved at justere breakpoints alene. Produktdesign Den holdbare tilgang er at definere layout, afstand og komponentadfærd på tværs af viewports i et designsystem, så nye sider arver korrekt adfærd som standard. Ydeevnesiden hører til web ydeevne arbejde, da forskellen mellem et responsivt websted, der konverterer på mobilen, og et, der ikke gør, normalt er vægt og indlæsningsstrategi snarere end layout.