Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Progressiivinen parannus on tekniikka, joka auttaa varmistamaan, että ohjelmistosi on vankka ja helposti saatavilla. Seuraamalla sitä voit varmistaa, että mahdollisimman monet ihmiset voivat käyttää verkkosivustoasi tai sovellustasi.

Aloita web-suunnittelun minimaalisella käyttökelpoisella versiolla ja varmista, että se toimii tarpeen mukaan. Kerro sitten lisää toimintoja ja tyyliä, jotta tehokkaammat selaimet voivat hyötyä.

Miten progressiivinen tehostaminen toimii?

Äärimmäisen hajautetun luonteensa vuoksi web on aina tarvinnut tukea valtavaa valikoimaa laitteita. 1970-luvun perustietokoneista nykyaikaisiin pöytäkoneisiin, tabletteihin ja televisioihin, verkkosivustot ovat edenneet pitkälle.

Kaiken ytimessä on HTML. Koska se on "anteeksiantava" kieli, selaimet näyttävät HTML: n yhtä hyvin kuin ne ymmärtävät sen. Yleensä he jättävät huomioimatta kaiken, mitä he eivät tue.

instagram viewer

Tämä voi olla hyödyllistä kehittäjän näkökulmasta, mutta se voi aiheuttaa ongelmia lukijoille. Jos sivustosi näyttää tyhjän sivun, kun JavaScript ei voi toimia, käyttäjillä ei ole muuta vaihtoehtoa kuin hylätä se. Progressiivinen parannus rohkaisee sinua toimittamaan ydinsisältöä kaikille, joilla on siihen pääsy, ja sitten parantamaan sisältöä sopivilla tekniikoilla, kuten CSS: llä ja JavaScriptillä.

Progressiivinen lähestymistapa muotoiluun

CSS on verkon tyylisivukieli joita voit käyttää värejä, fontteja, asettelutja monia muita sivujesi visuaalisia puolia. Voit käyttää sitä parantamaan sisältösi oletusulkoa, mutta se ei tarkoita, että sinun ei pitäisi alun perin jäsentää sisältöäsi oikein.

Otetaan esimerkiksi valikkopalkki; voit strukturoida sen näin:

<nav>
<a href="/register">rekisteröidy</a>
<a href="/login">Kirjaudu sisään</a>
<a href="/about">meistä</a>
<a href="/contact">ottaa yhteyttä</a>
</nav>

Jos haluat näyttää vaakasuuntaisen valikon, jossa jokainen linkki näyttää hieman painikkeelta, voit muotoilla sen käyttämällä tätä CSS: ää:

nav a {
tekstikoristelu: ei mitään;
näyttö: inline-block;
pehmuste: 0.5em 1em;
reuna: 1px kiinteä;
reunan säde: 8px;
marginaali-oikea: 1em;
}

Kun selain näyttää tämän kokonaan, sen pitäisi näyttää tältä:

Jos CSS ei ole käytettävissä, valikko näyttää tältä:

Huomaa, että tämä ei näytä millään valikosta eikä sitä ole kovin helppo käyttää, koska linkit sulautuvat yhdeksi.

Voit käyttää vaihtoehtoista rakennetta tehdäksesi suunnittelusta kestävämmän:

<nav>
<ul>
<li><a href="/register">rekisteröidy</a></li>
<li><a href="/login">Kirjaudu sisään</a></li>
<li><a href="/about">meistä</a></li>
<li><a href="/contact">ottaa yhteyttä</a></li>
</ul>
</nav>

Koska tämä merkintä käyttää järjestämätöntä luetteloelementtiä, se on paljon käyttökelpoisempi ilman CSS: ää:

Huomaa, kuinka paljon helpompaa on nopeasti skannata ja ymmärtää nämä linkit, vaikka selaimen oletustyyli olisikin. Tämä lähestymistapa edellyttää, että lisäät hieman enemmän CSS: ää, jotta voit ohittaa oletusluettelotyylit:

navli { näyttö: linjassa; }

Vaikka lopullinen rakenne ja tyyli ovat monimutkaisempia ja useimmilla käyttäjillä on CSS käytössä, tämä lähestymistapa on kestävämpi. Se on ystävällisempi näytönlukuohjelmien käyttäjille ja päätepohjaiset selaimet.

Toiminnallisuuden esittely asteittain

Progressiivinen parantaminen on tärkeintä, kun kyse on sivuston tai sovelluksen toimivuudesta. Periaatteen mukaan verkkosivustosi tulee toimia niin hyvin kuin mahdollista.

Käytännössä tämä pätee yleensä JavaScriptiin. Jos otat käyttöön asiakaspuolen toiminnan, sen tulee kerrostaa toiminnallisuus sellaisen sivuston tai sovelluksen päälle, joka jo toimii ilman sitä.

Hyvin yleinen tapaus on tapahtumakäsittely. Kuvittele sivu, joka lataa lisäsisältöä pyynnöstä. Tämä voi olla manuaalinen ääretön vieritys, kommentin upotus tai vastaava.

<kehon>
<!--... -->
<painike onclick="lataa lisää();">
Ladata Lisää
</button>
<!--... -->
</body>

Painikkeen klikkaamalla attribuutti sisältää JavaScript-koodin, joka suoritetaan, kun joku napsauttaa painiketta. Jos JavaScript ei kuitenkaan ole käytettävissä, tämä painike ei tee mitään. Käyttäjä jää napsauttamaan tätä painiketta ilman palautetta eikä aavistustakaan siitä, mikä on vialla. Paljon parempi lähestymistapa käyttää progressiivista parannusta:

<kehon>
<!--... -->
<a id ="p2" href="/page/2">Sivu 2</a>

<käsikirjoitus>
toimintolataa lisää() { konsoli.Hirsi("!"); }

/* Korvaa linkki painikkeella */
var linkki = asiakirja.getElementById("p2");
var painike = asiakirja.createElement("painike");
button.innerText = "Lataa lisää";
button.addEventListener("klikkaus", lataa lisää);
asiakirja.body.insertBefore(-painiketta, linkki);
linkki.parentNode.removeChild(linkki);
</script>
</body>

Tämä koodi muuttaa peruslinkin painikkeeksi, jossa on tapahtumakäsittelijä. Ottamalla käyttöön riippuvuuden JavaScriptistä käyttämällä itse JavaScriptiä, voit olla varma, että se toimii. Ja siellä on toiminnallinen oletuskäyttäytyminen, joka toimii, tavallisen linkin muodossa /page/2.

Onko progressiivinen tehostaminen todella välttämätöntä?

Kaikki käyttävät selaimia, joissa on CSS ja JavaScript, joten miksi vaivautua huolehtimaan tilanteesta, jota ei synny? No, on useita syitä, miksi sinun pitäisi omaksua progressiivisen parantamisen hyvä käytäntö.

  1. Ensinnäkin kaikki verkkosivustollasi vierailijat eivät käytä selainta. Jotkut vierailijat ovat botteja, kuten hakukoneen indeksoijia, eivätkä he välttämättä ymmärrä CSS: ää tai JavaScriptiä ollenkaan.
  2. Toiseksi kaikki sivustollasi vierailevat ihmiset eivät käytä selainta, jossa on CSS ja JavaScript. Jotkut vierailijat voivat käyttää päätepohjaista selainta, joka näyttää pelkkää tekstiä minimaalisella muotoilulla. Muut voivat käyttää näytönlukuohjelmaa.
  3. Kolmanneksi, vaikka selain tukee CSS: ää ja JavaScriptiä, asiat menevät pieleen. Rikkinäinen linkki tai huono verkkoyhteys voi johtaa .css- tai .js-tiedoston puuttumiseen. JavaScriptin virhe saattaa aiheuttaa sen, että muu koodi ei toimi ollenkaan.
  4. Lopuksi jotkut vierailijat voivat aktiivisesti päättää poistaa CSS: n tai JavaScriptin käytöstä. He voivat tehdä niin yksityisyydensuojasyistä tai siksi, että he käyttävät hidasta tai maksullista yhteyttä.

Progressiivinen ajattelutapa tekee ihmeitä

Ennen kaikkea asteittainen parantaminen rohkaisee sinua omaksumaan sisältöön perustuvan lähestymistavan. Sisältö on kuningas, joten tekstisi ja kuviesi tulee olla aina kaikkien saatavilla, riippumatta siitä, kuinka he käyttävät sivustoasi.

Antamalla kaikille lukijoille parhaan mahdollisen kokemuksen ja tekemällä siitä vielä paremman niille, jotka voivat hyötyä, voit saada kaikkien maailmojen parhaat puolet. Progressiivinen parantaminen on vain yksi hyvän saavutettavuuden ja käytettävyyden avaintekijä.