Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Progressiv förbättring är en teknik som hjälper till att säkerställa att din programvara är robust och tillgänglig. Genom att följa den kan du säkerställa att så många människor som möjligt kommer att kunna använda din webbplats eller app.

Börja med en minimalt genomförbar version av din webbdesign och se till att den fungerar efter behov. Lägg sedan till extra funktionalitet och stil, så att mer kapabla webbläsare kan dra nytta av det.

Hur fungerar progressiv förbättring?

På grund av dess extremt distribuerade karaktär har webben alltid behövt stödja ett stort antal enheter. Från enkla 1970-talsdatorer till kapabla moderna stationära datorer, surfplattor och tv-apparater har webbplatser kommit långt.

I hjärtat av allt är HTML. Eftersom det är ett "förlåtande" språk kommer webbläsare att visa HTML lika bra som de förstår det. Vanligtvis kommer de att ignorera allt de inte stöder.

instagram viewer

Detta kan vara användbart ur en utvecklares synvinkel, men det kan orsaka problem för läsarna. Om din webbplats visar en tom sida när JavaScript inte kan köras, har användarna inget annat val än att överge den. Progressiv förbättring uppmuntrar dig att leverera kärninnehåll till alla som har tillgång till det, och sedan förbättra det innehållet med hjälp av lämplig teknik, som CSS och JavaScript.

Ett progressivt tillvägagångssätt för styling

CSS är webbens stilmallsspråk som du kan använda för att anpassa färger, typsnitt, layouter, och många andra visuella aspekter av dina sidor. Du kan använda det för att förbättra standardutseendet på ditt innehåll, men det betyder inte att du inte bör strukturera ditt innehåll ordentligt i första hand.

Ta en menyrad, till exempel; du kan strukturera det så här:

<nav>
<a href="/register">Registrera</a>
<a href="/login">logga in</a>
<a href="/about">om oss</a>
<a href="/contact">Kontakt</a>
</nav>

För att visa en horisontell meny, där varje länk ser ut som en knapp, kan du utforma den med denna CSS:

nav a {
text-dekoration: ingen;
display: inline-block;
stoppning: 0.5em 1em;
kant: 1px fast;
border-radie: 8px;
marginal-höger: 1em;
}

När webbläsaren renderar detta helt bör det se ut så här:

Men om CSS inte är tillgängligt visas menyn så här:

Lägg märke till hur detta inte ser ut som en meny och det är inte särskilt lätt att använda eftersom länkarna går samman till en.

Du kan använda en alternativ struktur för att göra designen mer robust:

<nav>
<ul>
<li><a href="/register">Registrera</a></li>
<li><a href="/login">logga in</a></li>
<li><a href="/about">om oss</a></li>
<li><a href="/contact">Kontakt</a></li>
</ul>
</nav>

Eftersom denna uppmärkning använder ett oordnat listelement är det mycket mer användbart i frånvaro av CSS:

Observera hur mycket enklare det är att snabbt skanna och förstå dessa länkar, även med webbläsarens standardutformning. Detta tillvägagångssätt kräver att du lägger till lite mer CSS för att åsidosätta standardliststilarna:

navli { visa: i kö; }

Även om den slutliga strukturen och stilen är mer komplicerad, och de flesta användare kommer att ha CSS aktiverat, är detta tillvägagångssätt mer robust. Det blir vänligare för användare av skärmläsare och terminalbaserade webbläsare.

Introducerar funktionalitet progressivt

Progressiv förbättring är viktigast när det kommer till hur en webbplats eller app fungerar. Principen säger att, oavsett vad, din webbplats ska fungera så bra som möjligt.

I praktiken gäller detta vanligtvis JavaScript. Om du introducerar beteende på klientsidan bör det lägga funktionalitet ovanpå en webbplats eller applikation som redan fungerar utan den.

Ett mycket vanligt fall är händelsehantering. Föreställ dig en sida som laddar ytterligare innehåll på begäran. Detta kan vara en manuell oändlig rullning, en kommentarinbäddning eller liknande.

<kropp>
<!--... -->
<knappen onclick="ladda mer();">
Ladda Mer
</button>
<!--... -->
</body>

Knappens onclick attributet innehåller JavaScript-kod som körs när någon klickar på knappen. Men om JavaScript inte är tillgängligt gör den här knappen ingenting. En användare kommer att lämnas att klicka på den här knappen utan feedback och ingen aning om vad som går fel. Ett mycket bättre tillvägagångssätt använder progressiv förbättring:

<kropp>
<!--... -->
<ett id="p2" href="/page/2">Sida 2</a>

<manus>
fungeraladda mer() { trösta.logga("!"); }

/* Ersätt länk med knapp */
var länk = dokumentera.getElementById("p2");
var knapp = dokumentera.createElement("knapp");
button.innerText = "Ladda mer";
button.addEventListener("klick", ladda mer);
dokumentera.kropp.insertBefore(knapp, länk);
länk.parentNode.removeChild(länk);
</script>
</body>

Denna kod förvandlar den grundläggande länken till en knapp med en händelsehanterare. Genom att introducera beroendet av JavaScript med hjälp av själva JavaScript kan du vara säker på att det kommer att fungera. Och det finns ett funktionellt standardbeteende som fungerar, i form av standardlänken till /page/2.

Är progressiv förbättring verkligen nödvändig?

Alla använder webbläsare med CSS och JavaScript, så varför bry sig om att ta hand om en situation som inte uppstår? Tja, det finns flera anledningar till att du bör använda den goda praxisen med progressiv förbättring.

  1. För det första använder inte alla som besöker din webbplats en webbläsare. Vissa besökare kommer att vara bots, som en sökmotorindexerare, och dessa kanske inte förstår CSS eller JavaScript alls.
  2. För det andra kommer inte alla som besöker din webbplats att använda en webbläsare med CSS och JavaScript. Vissa besökare kan använda en terminalbaserad webbläsare, som visar vanlig text med minimal formatering. Andra kan använda en skärmläsare.
  3. För det tredje, även om en webbläsare stöder CSS och JavaScript, går det fel. En trasig länk eller dålig nätverksanslutning kan leda till att en .css- eller .js-fil saknas. En bugg i JavaScript kan göra att annan kod inte körs alls.
  4. Slutligen kan vissa besökare aktivt välja att inaktivera CSS eller JavaScript. De kan göra det av integritetsskäl eller för att de har en långsam eller betald anslutning.

Ett progressivt tänkesätt gör underverk

Framför allt uppmuntrar progressiv förbättring dig att anta ett tillvägagångssätt med innehållet först. Innehållet är kung, så din text och dina bilder bör alltid vara tillgängliga för alla, hur de än besöker din webbplats.

Genom att ge alla läsare den bästa möjliga upplevelsen och sedan göra den ännu bättre för dem som kan dra nytta av det, kan du få det bästa av alla världar. Progressiv förbättring är bara en nyckelkomponent för god tillgänglighet och användbarhet.