Responsiv Design

Responsiv design är en metod för att bygga webbgränssnitt som anpassar sig till storleken och funktionerna hos den enhet som visar dem, med hjälp av flytande layouter, flexibla bilder och CSS-mediafrågor för att omforma en enda kodbas över viewports. Den introducerades som en namngiven metod av Ethan Marcotte 2010 och ersatte den tidigare metoden att underhålla separata skrivbords- och mobilwebbplatser, och är nu standardförväntningen för i princip allt webbarbete.

Dess främsta fördel är att man kan behålla en implementering snarare än flera. Separata mobilwebbplatser skiljer sig åt över tid, ackumulerar inkonsekvenser, komplicerar analyser och sökindexering och fördubblar kostnaden för varje ändring. En responsiv implementering håller innehåll, webbadresser och funktionalitet enhetliga, vilket också överensstämmer med hur sökmotorer indexerar och rankar sidor, eftersom mobil-först-indexering utvärderar den mobila renderingen av samma webbadress.

Den vanliga missuppfattningen är att responsivitet bara betyder att en layout inte bryts. Att omforma kolumner till en stapel i en smal visningsport är minimum, inte målet. Äkta responsivitet tar hänsyn till de olika kontexter, funktioner och avsikter som är förknippade med olika enheter: pekskärmar i storlek för fingrar snarare än markörer, navigeringsmönster anpassade till små skärmar snarare än komprimerade skrivbordsmenyer, innehållsprioritering som sätter det viktigaste materialet först när allt staplas vertikalt, och formulär som använder lämpliga inmatningstyper och tangentbord.

Det är prestanda som responsiva implementeringar oftast misslyckas i praktiken. En layout som anpassar sig visuellt samtidigt som den laddar ner bilder i skrivbordsstorlek, fullständiga JavaScript-paket och onödiga komponenter ger en sida som ser korrekt ut och presterar dåligt på just de enheter och anslutningar som har minst förmåga att absorbera kostnaden. Responsiva bilder med lämpliga källkodsuppsättningar, villkorlig inläsning av komponenter som inte visas i små visningsportar och uppskjutning av icke-kritiska resurser är det som gör att metoden fungerar i fält snarare än bara i en webbläsare som har ändrats i storlek på en skrivbordsmiljö.

Att testa responsivt arbete kräver riktiga enheter, inte bara storleksändringar i webbläsare. Emulatorer reproducerar inte pekfunktioner, faktiska nätverksförhållanden, minnesbegränsningar på mellanstor hårdvara eller hur systemtangentbord och webbläsarens Chrome förbrukar vertikalt utrymme. Många av de vanligaste defekterna, inklusive inmatningar som skyms av tangentbordet, tröga element som förbrukar större delen av en liten skärm och horisontellt överflöde orsakat av ett enda brett element, är osynliga i skrivbordsemulering och omedelbart uppenbara på en telefon.

Responsivt arbete måste också ta hänsyn till textskalning och zoomning, vilka ofta förbises och är en vanlig källa till tillgänglighetsfel. En layout som är byggd med fasta pixeldimensioner kan omformas korrekt över enhetsbredder men brytas helt när en användare ökar sin webbläsares standardtextstorlek eller zoomar till tvåhundra procent, vilket är en inställning som ett stort antal människor förlitar sig på permanent. Innehåll som överfyller containrar, blir klippt eller kräver horisontell rullning under dessa förhållanden misslyckas med både användbarhets- och tillgänglighetsstandarder. Testning med ökad textstorlek och höga zoomnivåer tar minuter och upptäcker en kategori av fel som testning av enhetsbredd aldrig uppdagar, eftersom de två begränsningarna belastar layouten på olika sätt.

Eftersom responsiviteten omfattar layout, innehållsstrategi och leverans förbättras den sällan genom att enbart justera brytpunkter. produktdesign Den hållbara metoden är att definiera layout, avstånd och komponentbeteende över viewportar inom ett designsystem så att nya sidor ärver korrekt beteende som standard. Prestandasidan hör hemma hos webbprestanda fungera, eftersom skillnaden mellan en responsiv webbplats som konverterar på mobilen och en som inte gör det vanligtvis är vikt och laddningsstrategi snarare än layout.