Responsiv Utforming

Responsiv design er en tilnærming til å bygge webgrensesnitt som tilpasser seg størrelsen og egenskapene til enheten som viser dem, ved å bruke flytende oppsett, fleksible bilder og CSS-mediespørringer for å endre flyten til en enkelt kodebase på tvers av viewporter. Den ble introdusert som en navngitt praksis av Ethan Marcotte i 2010, og erstattet den tidligere tilnærmingen med å opprettholde separate skrivebords- og mobilnettsteder, og er nå standardforventningen for praktisk talt alt webarbeid.

Hovedfordelen er å opprettholde én implementering i stedet for flere. Separate mobilnettsteder avviker over tid, akkumulerer inkonsekvenser, kompliserer analyser og søkeindeksering, og dobler kostnaden for hver endring. En responsiv implementering holder innhold, URL-er og funksjonalitet enhetlige, noe som også samsvarer med hvordan søkemotorer indekserer og rangerer sider, siden mobil-først-indeksering evaluerer mobilgjengivelsen av den samme URL-en.

Den vanlige misforståelsen er at responsivitet bare betyr at en layout ikke brytes. Å omforme kolonner til en stabel i et smalt visningsområde er minimumet, ikke målet. Ekte responsivitet tar hensyn til den forskjellige konteksten, funksjonaliteten og intensjonen som er knyttet til forskjellige enheter: berøringsmål som er størrelsesorienterte for fingre i stedet for markører, navigasjonsmønstre som er egnet for små skjermer i stedet for komprimerte skrivebordsmenyer, innholdsprioritering som setter det viktigste materialet først når alt stables vertikalt, og skjemaer som bruker passende inputtyper og tastaturer.

Det er ytelsen som oftest mislykkes med responsive implementeringer i praksis. En layout som tilpasser seg visuelt samtidig som den laster ned bilder i skrivebordsstørrelse, komplette JavaScript-pakker og unødvendige komponenter, leverer en side som ser riktig ut og yter dårlig på akkurat de enhetene og tilkoblingene som er minst i stand til å absorbere kostnadene. Responsive bilder med passende kildesett, betinget lasting av komponenter som ikke vises i små visningsporter, og utsettelse av ikke-kritiske ressurser er det som gjør at tilnærmingen fungerer i felten i stedet for bare i en nettleser som er endret i størrelse på en datamaskin.

Testing av responsivt arbeid krever ekte enheter, ikke bare endring av nettleserstørrelse. Emulatorer reproduserer ikke berøringsupresisjon, faktiske nettverksforhold, minnebegrensninger på maskinvare i mellomklassen eller måten systemtastaturer og nettleserens Chrome bruker vertikal plass på. Mange av de vanligste feilene, inkludert inndata som er skjult av tastaturet, klebrige elementer som bruker mesteparten av en liten skjerm og horisontal overflyt forårsaket av et enkelt bredt element, er usynlige i skrivebordsemulering og umiddelbart synlige på en telefon.

Responsivt arbeid må også ta hensyn til tekstskalering og zoom, som ofte overses og er en vanlig kilde til tilgjengelighetsfeil. En layout bygget med faste pikseldimensjoner kan endre flyten riktig på tvers av enhetsbredder, men den kan brytes helt sammen når en bruker øker nettleserens standard tekststørrelse eller zoomer til to hundre prosent, en innstilling som et betydelig antall mennesker er avhengige av permanent. Innhold som overfyller containere, blir avkortet eller krever horisontal rulling under disse forholdene, svikter både brukervennlighets- og tilgjengelighetsstandarder. Testing med økt tekststørrelse og høye zoomnivåer tar minutter og fanger opp en kategori av feil som testing av enhetsbredde aldri viser, siden de to begrensningene belaster layouten på forskjellige måter.

Fordi responsiviteten spenner over layout, innholdsstrategi og levering, forbedres den sjelden bare ved å justere avbruddspunkter. produktdesign Den varige tilnærmingen er å definere layout, avstand og komponentoppførsel på tvers av viewporter i et designsystem, slik at nye sider arver riktig oppførsel som standard. Ytelsessiden hører hjemme hos nettytelse arbeid, siden forskjellen mellom et responsivt nettsted som konverterer på mobil og et som ikke gjør det vanligvis er vekt og lastestrategi snarere enn layout.