Täydellinen opas progressiiviselle parannukselle
Vuosien ajan web-suunnittelijat ovat käyttäneet graceful hajoamisperiaatteita varmistaakseen, että vanhempien selainten kävijät voivat ainakin nähdä sisällön heidän verkkosivuillaan, vaikka he eivät näe tarkkaan sitä, miten suunnittelija aikoo.
Graceful degradation antaa suunnittelijoille mahdollisuuden suunnitella uusimmat ja parhaat selaimet ilman, että vieraita vanhempia selainversioita käyttäviä käyttäjiä syrjäyttäisi täysin.
Ja vain siksi, että vanhemmat selaimet saivat usein vähemmän kuin optimaalinen käyttökokemus, ei estänyt suunnittelijoita sijoittamasta keskittymään suoraan uusimpiin tekniikoihin ja tekniikoihin, rationalisoimalla, että vanhempien selainten käyttäjiä käytettiin tai päivitettäisiin.
Progressiivinen lisäys antaa meille paremman vaihtoehdon. Sen sijaan, että keskityttäisiin selainteknologioihin ja tukeen, PE keskittyy sisältöön.
Koska useimmat suunnittelijat varmasti sopivat, sisältö on tärkein osa käytännöllisesti katsoen mitä tahansa verkkosivustohanketta. Mutta monet suunnittelijat eivät täysin ymmärrä progressiivista lisäystä, miten se toimii, ja miksi se on parempi malli kuin armollinen hajoaminen.
Lue vastauksia näihin kysymyksiin ja lisätietoja progressiivisen parannuksen käyttämisestä seuraavassa sivuston suunnitteluprojektissa.
Kuka hyötyy progressiivisesta parannuksesta?
Monet suunnittelijat ajattelevat, että progressiivinen lisäys hyödyttää vain käyttäjiä, jotka käyttävät vanhentuneita selaimia, mutta myös muut käyttäjät hyötyvät. Mobiiliselaimet ovat todennäköisimmin hyötymässä edistyksellisestä parannuksesta. Syyt tähän ovat kaksinkertaisia. Ensinnäkin mobiiliselaimet, jotka eivät tue CSS: tä tai JavaScriptia, voivat silti näyttää sivustosi sisällön. Vaikka nykyajan älypuhelinten selaimet tukevat ainakin yhtä niistä, kaikki peruskäyttäjien selaimet eivät toimi.
Toinen tapa, jolla mobiiliselaimilla on hyötyä, on se, että progressiivisella lisäyksellä rakennetut sivustot voivat helpommin sisällyttää mobiiliversion. Loppujen lopuksi säätiö HTML toimii riippumatta siitä, mikä CSS on kerrostunut sen päälle. Joten luomalla erillinen tyyliselain mobiiliselaimille ei edellytä paljon ylimääräistä työtä.
Näytönlukijoilla on myös paljon helpompi aika, jos perus HTML on hyvin jäsennelty ja semanttinen. Tämän ansiosta sivustosi on paljon helpompaa niille, jotka käyttävät näyttölukijoita. Hakukoneet voivat helpommin skannata hyvin muotoillun HTML: n kuin huonosti koodattuja sivuja, mikä voi merkitä paljon parempaa hakukoneiden sijoittelua sivustollesi.
Muut edut Progressive Enhancement
Edistyneiden käyttökokemusten välittömien hyötyjen lisäksi progressiivisella lisäyksellä rakennetut sivustot ovat yleensä helpommin ylläpitäviä kuin muut sivustot.
Koska perus sisältö ja toiminnallisuus pidetään täysin erillään sivun visuaalisista elementeistä, sivuston ulkoasun muuttaminen ei saisi edes vaikuttaa sivuston toimintaan tai siihen sisältyvään sisältöön. Sivuston uudelleensoittaminen on sitä helpompaa. Sinun tarvitsee vain vaihtaa CSS-tiedostojasi.
Ja rehellisesti, emme saa unohtaa sivuston etuja, joita voidaan tarkastella useimmissa selaimissa.
Vaikka kaikki eivät saa samanlaista kokemusta, se, että joku, joka käyttää vanhentunutta tai vanhentunutta selainta, voi edelleen tarkastella sivustosi sisältöä, voi johtaa enemmän kävijöihin tai asiakkaisiin. Sivustoja, jotka käyttävät lähestymistapaa, joka alkaa asteittaisella parannuksella, ei tarvitse tehdä ylimääräistä työtä, jotta tämä olisi mahdollista.
Rakenna Inside Outista
Progressiivinen lisäys ei keskity selaimen yhteensopivuuteen samalla tavalla kuin graafinen hajoaminen. Sen sijaan se keskittyy ensin sisältöön, sitten esityksen sisältöön ja sitten mihin tahansa komentosarjaan. Tällä tavalla, riippumatta siitä, missä vierailija käyttää laitetta tai selainta, he voivat nähdä sisältösi ilman ongelmia.
Edistyksellisellä parannuksella voi olla hyötyä myös saatavuudelle ja jopa hakukoneoptimoinnille. Aloittamalla hyvin jäsennellyllä, semanttisella HTML: llä saat hyvän perustan, jolla voit rakentaa sivustosi suunnittelua. Ja tämä perus HTML on helppo tulkita näytönlukijoita ja hakukoneiden hämähäkkejä.
Laita sisältö ensin
Aina kun aloitat uuden verkkosivustoprojektin, kannattaa ensin keskittyä sisältörakenteeseen. Luomalla hyvin jäsenneltyä, semanttista HTML-koodia verkkosivustollesi perustuen sinulla on helpompi aika suunnitteluesi esitystasolla.
Hyvin harkitulla HTML: llä on se etu, että esittelytasoja ei tarvitsisi tehdä järkevää. Tämä tarkoittaa sitä, että näytönlukijat, hakukoneiden hämähäkit ja perusmobiiliselaimet pystyvät katselemaan sisältöäsi ilman häiritseviä muotoilukysymyksiä.
Näet edellä, kuinka MSNBC säilyttää kaiken sisällön suunnilleen samassa järjestyksessä jopa ilman CSS: ää. Sivusto on täysin käyttökelpoinen ilman esittelytasoa.
Vaikka sivuston rakenne riippuu kyseisen sivuston sisällöstä, on olemassa joitakin ohjeita, joita sinun pitäisi käyttää perusasioihin.
Aloita otsikko, sitten päävalikko ja sisältö. Sisällesi jälkeen haluat lisätä sivupalkin tiedot tai linkit ja alatunnistetietosi.
Tällä tavalla näytetään ensin sivustosi tunnistetietoja, jota seuraa navigointi (jos joku haluaa siirtyä suoraan toiselle sivulle, kuten yhteyshenkilön tai sivun), ja sitten se siirtyy suoraan sisältöön, mikä on todennäköistä mitä useimmat ihmiset ovat sivustossasi ensisijaisesti. Muokkaa tätä mallia tarpeelliseksi sivustossasi, mutta muista aina, mitä kävijöistä kiinnostaa eniten, ja aseta se mahdollisimman lähelle koodin yläosaa.
Varmista, että sivustosi kaikki toiminnot ovat mahdollisia tässä peruskerroksessa. Tämä tarkoittaa, että lomakkeet ja sovellukset ovat käytettävissä vain HTML- ja palvelinpuolen komentosarjoissa. Vaikka on todennäköistä, että toiminnallisuus ei ole niin hyvin esitetty kuin haluat tai käyttäjäystävällinen, sen pitäisi olla vähintään käyttökelpoinen .
Esitys on seuraava
Kun HTML- ja perustoiminnot ovat valmiit, sinun kannattaa kääntyä esityselementteihin. Valtaosa selaimista, mukaan lukien monet mobiiliselaimet, tukee CSS: tä (vaikkakaan kaikki eivät tue kaikkia CSS: n osa-alueita, erityisesti CSS3: ää). Esityksen taso parantaa sisältöä. Sen pitäisi helpottaa katselua ja käyttöä sekä parantaa käyttökokemusta.
Jossain määrin tässä voi olla enemmän kuin yksi kerros CSS-lisälaitteita. Ensimmäisessä tulisi keskittyä perustyyleihin, jotka tunnistetaan käytännöllisesti katsoen missä tahansa uudessa selaimessa. Teidän ulkoasun, typografian ja värimallin pitäisi olla kaikki mukana tässä kerroksessa samoin kuin muita tyylisiä valintoja.
Lisää sitten toinen kerros sen yläpuolelle, joka hyödyntää kehittyneempiä ominaisuuksia, joita jokainen selain ei ehkä tue, mutta lisää käyttäjien käyttökokemusta sellaisille selaimille, jotka sisältävät tukea.
JavaScript pitäisi olla viimeinen
Joskus näyttää siltä, että JavaScriptä käytetään käytännössä jokaisessa uudessa verkkosivustossa. JavaScript voi suuresti vaikuttaa sivuston tai verkkosovelluksen käytettävyyteen ja käyttäjäkokemukseen.
Ajax on mullistanut tapaa, jolla monet sivustot toimivat ja ovat tehneet valtavan suuria eroja nyt verkossa. Mutta sivustosi tai sovelluksesi pitäisi toimia ilman JS: ää. HTML- tai palvelinpuolen komentotiedostojen pitäisi olla aina olemassa, varsinkin kun puhumme yleisten verkkosivustojen sijaan verkkosovelluksista.
Varmista, että sivustosi on käytettävissä ilman JavaScriptia. Vaikka useimmat verkkokäyttäjät ovat JS: n käytössä selaimessasi nyt, on vielä tapauksia, joissa JavaScript ei ole toivottavaa. Ei kaikilla mobiiliselaimilla siellä on hyvää tukea JavaScriptille. Se ei usein ole käytettävissä näytönlukijoille. Ja siellä on joitain ihmisiä, joilla selaimilla ei vielä ole JavaScript-toimintoja.
Kuten alla olevista kuvakaappauksista näet, Alfred-sovelluksen verkkosivustossa JavaScript-yhteensopivaa versiota ja JavaScript-toimintoa ei ole poistettu käytöstä. Ainoa todellinen ero on, että käyttöehdot ovat ankkuroitu sivun alaosassa sen sijaan, että ne avautuisivat modaalivaiheessa, kun linkkiä napsautetaan. Mutta molemmissa tapauksissa ne ovat linkitettyjä ja täysin luettavissa.
Tässä on täysin toimiva versio sivustosta, jossa on modaalinen ikkuna.
Tässä versiossa, jossa JavaScript on poistettu käytöstä, käyttöehdot näkyvät juuri alatunnisteen yläpuolella. Se on edelleen linkitetty samasta paikasta sisältöön.
Progressiivisen parantamisen toteuttaminen
Olemme puhuneet PE: sta teoreettisella tasolla edellä. Päästäksemme käytännön näkökohtiin sen toteuttamiseen verkkosivustohankkeessa. Ensimmäinen asia on selvittää sivustosi tietorakenne.
Katso käytettävissä olevaa sisältöä ja miten se on järjestettävä. Luo joitain wireframe-malleja, kuinka haluat näyttää sisällön, eri elementtien sijoituksen jne. Priorisoidaksesi ne tässä vaiheessa, mitä pitäisi näkyä lähimpänä koodin yläosassa (tärkeimmät elementit) ja mitä voi alentaa.
Tämä informaation arkkitehtuurivaihe on elintärkeä progressiivisen parannuksen kannalta. Kun tiedät mitä sinun täytyy mennä, voit aloittaa koodauksen. Varmista, että määrität HTML-koodisi oikeassa järjestyksessä tärkeimpien tietojen mukaan. Tämä ei välttämättä täysin vastaa tilausta, jossa asiat näkyvät valmiissa, tyylikkäissä verkkosivustoillasi, mutta se ei todennäköisesti ole liian kaukana (ylätunniste, sisällön keskellä, alareunassa alareunassa).
Varmista, että koodattu HTML on semanttinen. Käytä asianmukaista , , tunnisteet, jne., sekä nimetä oikein divs, jossa sisältösi ilmestyy. Tämä ei ainoastaan anna sitä helpommin, vaan myös ylläpitää koodia ja koodaa CSS: ää paljon helpommin.
Haluat myös koodata minkä tahansa toiminnon tässä vaiheessa käyttämällä palvelinpuolen komentosarjoja. Vaikka lopullinen sivusto voi käyttää Ajaxia ensisijaisiin toimintoihin, on silti tärkeää, että palvelinpuolen varmuuskopiointi on vain siinä tapauksessa.
Kun perus-HTML on valmis, haluat siirtyä esittelytasolle. Siirry tähän suurelta osin kuin suunnittelet minkä tahansa sivuston hanketta. Varmista kuitenkin, että saatat todella koodata CSS: ää, jolla ylläpidät ajatusta siitä, että jokainen CSS-ominaisuus ei toimi kaikissa selaimissa. Varmista, että vaikka jotkut valitsimesi eivät toimi, koko esityksesi ei vaikuta.
Hieman hieno hajoaminen saattaa olla sopiva joihinkin CSS: iin, niissä tapauksissa, joissa todella haluat käyttää tiettyä tekniikkaa, jota ei ole laajasti tuettu. Ei ole mitään väärää, kun käytät sitä selektiivisesti, erityistapauksissa. Tavoitteena on kuitenkin luottaa hyvään, standardipohjaiseen koodaukseen ja semanttiseen merkintään, jotta graceful hajoaminen ei olisi tarpeetonta.
On keskusteltu siitä, onko monen tyylisivun käyttäminen progressiiviseen parannukseen hyvä idea. Erilaisten esitystapojen (asettelun, typografian, värin ym., Sekä erilaisten tyylitietojen erottaminen esimerkiksi tulostus- tai mobiilisuunnitelmista) voi olla järkevää, varsinkin jos tyylitietosi on pitkä tai monimutkainen.
Erilliset tyylitaulukot helpottavat tietyn elementin löytämistä ja voivat helpottaa sivuston ylläpitoa sekä helpottaa ja monimutkaisempaa. Loppujen lopuksi, jos haluat vain vaihtaa väriä, on helpompi avata väristysteksti ja löytää kaikki kyseisen värin esiintymät ja tietää, että et ole unohtanut mitään. Oletetaan kuitenkin, että haluat vaihtaa tietyntyyppisen elementin värin ja typografian sivullasi (kuten kaikki H1: t tai sivupalkin linkit). Sinun täytyy avata useita tyylejä, jotta muutokset tehdään. Käytätkö useita CSS-tiedostoja vai ei, se laskeutuu enemmän henkilökohtaiseen valintaan kuin mikään muu.
Kun CSS on koodattu ja kaikki on testattu, on aika lisätä asiakaspuolen komentojonoja. Tässä vaiheessa sivustosi pitäisi toimia JavaScriptin kanssa tai ilman sitä. JS: n lisääminen voi kuitenkin parantaa käyttäjien kokemuksia ja tyydytystä. Kun olet lisännyt kaikki tarvittavat skriptejä, muista testata sivusto uudelleen, kun komentosarja on poistettu käytöstä, jotta kaikki toimivat edelleen hyväksyttävänä.
Vakuutan asiakkaitasi
Kun työskentelet omalla, henkilökohtaisella verkkosivustolla, progressiivinen lisäys on jotain, jota voit toteuttaa ongelmitta. Asiakkaita käsittelevissä tapauksissa se voi kuitenkin olla hieman hankalampi. Monet asiakkaat ovat yhä kiinni siitä ideasta, että heidän verkkosivuillaan on oltava täsmälleen sama kaikissa selaimissa, joita he ovat koskaan käyttäneet. Koskaan.
Selosta progressiivisen parannuksen edut asiakkaille. Kerro heille, että se on nopeampaa ja halvempaa, jotta he voivat suunnitella sivuston progressiivisella parannuksella mielessään ja että heidän kävijät eivät todennäköisesti välitä kummastakaan tavalla, kunhan sisältö on saatavilla.
Jos he vielä vastustavat, kerro heille, että sinun on mukautettava tarjoukseen sopivasti, jotta kompensoisit vaadittavan ylimääräisen koodausajan ja pyyntiponnistuksen.
Useissa tapauksissa, kun asiakas näkee, että progressiivinen lisäys säästää heitä rahoilla ilman haitallisia vaikutuksia kävijöille, he ovat tyytyväisiä suunnittelemaan sivustonsa tällä tavoin.
Vahingoittunut progressiivinen parannus
Olen varma, että jotkut teistä lukevat tätä artikkelia ja ajattelevat: "Mutta minä suunnittelemme verkkosivustoja joka tapauksessa!" Monet suunnittelijat suunnittelevat verkkosivustoja sisällön ympärille varmistaen, että jokainen kerros on toiminnallinen ennen kuin lisäät toisen kerros.
Heidän HTML on hyvin jäsennelty, heidän CSS toimii koko yksikkönä, mutta silti näyttää hyvältä, vaikka yksi tai kaksi elementtiä ei toimi kunnolla, ja vaikka ilman asiakaspuolen komentojonoja, kaikki toimii edelleen.
Jotkut suunnittelijat ovat luonnollisesti ottaneet progressiivisen parannuksen muotoilun web-suunnittelun. Näille suunnittelijoille tämä artikkeli näyttää kuin vanha hattu.
Mutta niille teistä, jotka käyttävät päinvastaista lähestymistapaa, joko armollisella huononemisella tai suunnittelulla alimman yhteisen nimittäjän kohdalla, eivätkä häiritse kehittyneempää tekniikkaa, harkitse progressiivista lisäystä seuraavalle hankkeelle.
Kirjoitettu yksinomaan WDD: lle Cameron Chapman .
Teetkö automaattisesti sivustoja, joissa on edistyksellinen lisäys mielessä? Tai mieluummin miellyttävän hajanaisen lähestymistavan? Jaa strategiasi kommentteihin!