Forstå progressive forbedringsteknikker innen webdesign

Et av de varme temaene innen nettutvikling og webdesignkretser er emnet Progressive Enhancement (PE). Uttrykket kan finnes i mange online funksjoner og kommentarer, inkludert denne casestudien fra North Bay Business Journal, der en vingård i Napa Valley vurderer et nytt nettsteddesign ved bruk av progressive forbedringsteknikker, og Dot Net- magasinet er runden av "Topp 15-nettet Design og utviklingstendenser for 2012. "

Med all den nylige oppmerksomheten rundt progressiv forbedring, ville du tro at det var en ny måte å tenke på, eller et nytt system som bare skjedde opp fra dypet av en eller annen FoU-tenketank. Bemerkelsesverdig er det ikke i det hele tatt; Steven Champion myntet setningen våren 2003, for nesten ti år siden, i flere artikler for Webmonkey, og også mens han holdt presentasjoner på SXSW Interactive Conference. Så hvorfor er det så mye oppmerksomhet rundt emnet med progressiv forbedring nå? Sammen med responsiv webdesign (RWD), som gjør forsøk på å imøtekomme mengden av nettaktiverte enheter på markedet med forskjellige skjermstørrelser og oppløsninger, ser progressiv forbedring en oppblomstring av interesse.

Hva er progressiv forbedring?

PE kan beskrives som en webdesignstrategi som gjør et forsøk på å lage nettsteder som er tilgjengelige for alle enheter, ved å bruke en lagdelt tilnærming med et sett med hovedprinsipper som understreker tilgjengeligheten til innhold og funksjonalitet. PE er utfordringssvaret til en tradisjonell nettstrategi kjent som "grasiøs degradering", noe som betyr at nettstedet er designet for en bestemt nettleserteknologi, og det vil forbli presentabelt eller "forringe" selv om eldre brukeragenter ble brukt. Nådig fornedring forutsetter også at brukerne bare trenger å "oppgradere" nettleserne eller teknologien sin, noe som setter fokuset på sluttbrukeren og ikke nettstedet.

Du trenger ikke at jeg skal fortelle deg hvor mye brukeraksept nettsteder mottar og hva slags mottak de får når besøkende ser en melding som ligner "Best sett på ....". Bare kjør en spørring i favoritt søkemotoren din for uttrykket "Best sett i Netscape" og se hvor mange resultater dukker opp? Hvis noe, vil det vise deg hvor lang tid det har gått siden noen nettsteder er oppdatert; for andre er det en påminnelse om at nettsteder designet spesielt for en nettleser- eller nettleserversjon blir foreldede før enn senere.

Lagene med progressiv forbedring

Aaron Gustafson skrev en bemerkelsesverdig artikkel som beskrev progressiv forbedring som en serie lag som ligner på en lagkake, eller lagene til en Peanut M&M. I Gustafsons modell er senteret innholdslaget av rik semantisk markering; innholdslaget er omgitt av presentasjonslaget, som er CSS og styling; og presentasjonslaget er innkapslet med skriptsjiktet på klientsiden, ellers kjent som JavaScript eller jQuery.

De tre lagene eller lagene til Progressiv forbedring:

  • Innholdslag = rik semantisk HTML-markering
  • Presentasjonslag = CSS og styling
  • Skriptsjikt på klientsiden = JavaScript eller jQuery-oppførsel

Figur A

Fordeler med progressiv forbedring

En praktisk anvendelse av lagdeling av webdesign resulterer i disse fordelene:

  • Forbedret tilgjengelighet - Noen brukere kan ikke lese fra en skjerm, og progressiv forbedring lar de funksjonshemmede glede seg over nettsteder med forbedret brukervennlighet gjennom tekstlesere eller skjermlesere, noe som øker brukerengasjementet.
  • Utvid overførbarhet - Nettsteder vil forbli effektive uansett nettleser, enhet eller plattform gjennom bruk av rektorene til PE og RWD, inkludert mediesøk, CSS3 og HTML5.
  • Ytelsesøkning - Den lagdelte tilnærmingen sikrer at innholdet lastes først, deretter stilene og deretter atferden. Den opplevde ytelsen øker resultatene fra gjengivelsessekvensen, som igjen forbedrer lastetidene når sidene vises.
  • Enkel modulær webdesign - Mens den lagdelte tilnærmingen hjelper med gjengivelse av nettstedet for sluttbrukeren, hjelper det også webutvikleren med å organisere og administrere lagene av teknologier til diskrete moduler ettersom nettstedet vedvarer i en distribuert form for innhold, stiler, og manus.

Bruke PE på webdesign

Hvordan tar du inn hovedprinsippene for progressiv forbedring i webdesignstrategien din? La oss se på lagene igjen for å se hva som kan utnyttes ut av hvert nivå.

Innhold med semantisk HTML-markering

Semantisk HTML-markering sikrer at tagger brukes for å formidle mening og innholdsstruktur, noe som knytter seg til de utviklende HTML5-standardene for webdesign. Eksempler på god semantisk markering inkorporerer HTML5s liste over nye elementer og attributter som,, og, som erstatter den felles generiske blokken og inline, eller den nye og som erstatter den generiske.

Presentasjonsstyling og CSS

Sammen med den semantiske markeringen som finnes i HTML5, mages de utviklende CSS3-standardene godt sammen, og lar webdesignet hoppe av skjermen med farger, bilder, bakgrunner, graderinger, skygger, teksteffekter og mer. Noen hvorfor bare holde seg til ett stilark? I mange implementeringer av nettsteder blir det nødvendig å bruke flere som hjelper til med å skille spesifikke stiler som type, farge og layout, eller definere distinkte medietyper som skjerm, utskrift eller mobil.

Skriftoppførsel

Det siste laget knytter det hele sammen med påtrengende JavaScript eller jQuery, og gir gunstig ytelse til webdesignet ditt. Å innlemme beskjedne skript forbedrer robuste funksjoner mens du opprettholder dem som en egen modul. Det skal også tillate at alt innhold er tilgjengelig uten at alle eller noen av skriptene kjøres. det skal ikke redusere tilgjengeligheten til innholdet, men bør øke og berike tilgjengeligheten av innholdet for alle brukere.

Mens progressiv forbedring har sine kritikere, som en webdesigntilnærming og som en forretningsmodellplan for designhus, gjør den saken om å adressere det økende behovet for å bygge nettsteder som er tilgjengelige for alle dingser, spesielt med eksplosjonen av internettaktiverte mobile enheter.

© Copyright 2021 | pepebotifarra.com