Najbolje prakse za progresivno poboljšanje u web dizajnu

Posao izrade web stranica je nevjerojatno složen s mnogim dijelovima koji se brzo mijenjaju. Cilj zajednice web dizajna je da smanjiti složenost, i smanjiti mogućnost pogreške u svakoj fazi procesa stvaranja.

Progresivno poboljšanje je takva ideja u web dizajnu čiji je cilj smanjiti pogreške i pružiti dosljedno korisničko iskustvo preko puta. Koncept ima vlastitu Wikipedijsku stranicu koja je objašnjava kao metodu potpuno pristupačan sadržaj, prikazivanje naprednih značajki samo ako ih preglednik podržava.

Lako je razumjeti progresivno poboljšanje, ali nije ga lako primijeniti izravno na svoj rad u dizajnu. Htio bih pokriti neke najbolje prakse za progresivno poboljšanje u stvarnim projektima do pomoći dizajnerima da više razmišljaju o svom tijeku rada.

1. Razumijevanje progresivnog poboljšanja

Teorija progresivnog poboljšanja preporučuje početi s jednostavnom web stranicom koji radi u svim preglednicima, čineći ga pristupačan svakom posjetitelju. Zatim dodajte značajke kad god je to moguće.

To je suprotno od gracioznog propadanja koje podrazumijeva sve značajke po defaultu, a zatim degradira kada nešto ne radi.

Progresivno poboljšanje je bolje za cjelokupno korisničko iskustvo, jer u svojoj biti učitava samo potrebne elemente. Svaki web-preglednik može podržavati tekst (i obično slike). Bez ikakvog CSS-a ova informacija će izgledati bezdušno i neukusno, ali će biti dostupna.

Ovaj Popis Apart Članak tvrdi da je progresivno poboljšanje Sadržaj prvo s stilovi i dinamičke komponente dodane kasnije. Sadržaj u semantičkom HTML-u treba isporučiti prije svega.

Napredni CSS i JavaScript koji danas koristimo široko su podržani, ali ako želimo slijediti načela progresivnog poboljšanja, trebali bismo ih smatrati luksuzima.

Ovo je općeniti pregled glavnih značajki progresivnog poboljšanja, koje treba uzeti u obzir:

Semantička oznaka za sav sadržaj
korisnici postavke preglednika treba poštivati
Sadržaj i osnovne funkcionalnosti trebaju biti dostupni svim korisnicima
Nenametljiv JavaScript je učitan samo u okruženjima koja ga podržavaju

Tehnološka ograničenja u front-end razvoju prvenstveno su određena kompatibilnošću preglednika. Progresivno poboljšanje vraća vas na osnove razmišljanja o tome kako najjednostavnija web-stranica golih kostiju može izgledati. Odatle možete plan za naprednije značajke, kao što su CSS3 svojstva.

Ali što je s preglednicima koji ne podržavaju moderni CSS3? Ovo je mjesto gdje se igraju stranice kao što je mogu koristiti. Trebate odlučiti koje su značajke vrijedne implementacije i donositi presude na ciljanu publiku vaše web-lokacije.

2. Održavanje u stilskim listovima

Većina preglednika danas podržava sva osnovna svojstva koja su vam potrebna. Ali napredni CSS3 i dalje predstavlja problem za naslijeđene korisnike, i progresivno poboljšanje nudi rješenje.

Umjesto traženja rezervnih metoda za održavanje tih novih značajki, zabrinjavajte se najprije odgovarajuće strukture rasporeda.

Napišite semantički HTML i CSS oznaku koja radi u što je više moguće aktivnih preglednika (podrška za drevne preglednike kao što je podrška za IE5 nije potrebna).

Uzmite za primjer ovaj JSFiddle koji koristi plovke s dvije bočne trake (.fiksni), i područje sadržaja tekućine (.tekućina). Ako izbrišete sve CSS-ove i ponovno izvedete kôd, primijetit ćete da se sve dobro slaže s prvim stupcem, a zatim s drugim i na kraju posljednjim.

Neki developeri bi željeli imati stupac sadržaja (.tekućina) pojavljuju se prvo u HTML-u. Ovo je mjesto gdje dolazi do naprednog poboljšanja, a alternativna CSS rješenja postaju održiva.

Dva su osnovna cilja vašeg HTML-a sljedeća:

Potpuno semantički i valjan kodirati
dosljedno iskustvo za svakoga

Najjednostavniji način za postizanje tih ciljeva jest početi od ničega i dogurati do, kao što bi to većina zagovornika progresivnog poboljšanja preporučila.

Ako vaš kôd izgleda dobro s onemogućenim i omogućenim CSS-om, on nudi razumno rješenje za svakoga.

Također je vrijedno razmotriti u kojem trenutku spuštate podršku za nešto. Microsoft je već odbacio značajnu podršku za IE6, tako da korisnici koji koriste taj preglednik ne moraju biti vrijedni vašeg vremena.

Ali još uvijek postoji jedno veliko pitanje: što preglednik ne podržava moj moderni CSS, što da radim?

Jednostavno pišite kod koji radi bez to, i moderni CSS smatrati progresivnim poboljšanjem. To je ljepota progresivne metodologije poboljšanja.

Ne trebate vratiti, jer ste vi u osnovi pretpostavljajući da ništa nije podržano po defaultu.

Napredne metode poboljšanja su o tome da web-lokaciju upotrebljavaju čak iu slučajevima kada nešto nije podržano, ali ako je podržano, to je još bolje.

Morate razmotriti kako sadržaj zapravo teče bez CSS-a. Na primjer, kad onemogućim CSS na web-lokaciji prijenosa, sadržaj i dalje teče organski niz stranicu.

Da, ružno je, i da, čini se kao da smo izgubili dvadeset godina napretka ... ali radi.

3. Rukovanje s JavaScriptom

Važno je napomenuti da je svaki problem s JavaScriptom na koji možete naletjeti tijekom razvojnog procesa lukav i jedinstven. Kada izgradite novi projekt s progresivnim poboljšanjem, trebali biste navesti sve potrebne značajke temeljene na JS-u i razmislite o tome kako bi mogle rade bez JavaScripta.

To će zahtijevati puno online istraživanja kako bi pronašli valjana rješenja. Aaron Gustafson je napisao sjajan post s rješenjima za različite probleme, kao što je zamjena Ajaxa meta osvježavanjem sadržaja unutar iframea.

Također, kada stvarate kartice JavaScripta, to je dobra ideja koristite sidrene veze s pravim ID vrijednostima. Na taj način, kada je JavaScript onemogućen, i dalje možete imati vidljive kartice i pristupiti ih pomoću sidrene vrijednosti. Aaron je napisao još jedan dio na popisu A List Apart, koji obuhvaća opći pregled kako biste trebali razmišljati o tim problemima.

Evo još jednog primjera. Recimo da imate vezu koja dinamički učitava sadržaj. href vrijednost je prazna, jer sve se učitava pomoću JavaScripta s metodom preventDefault ().

Umjesto toga, bilo bi mudro postaviti href imovine pokažite na drugu stranicu gdje se sadržaj može učitati prirodno, ali posjetitelj tu stranicu vidi samo kada je JavaScript onemogućen.

Progresivno poboljšanje je više od JavaScripta, ali s razvojem weba svake godine, nema sumnje da JavaScript igra značajnu ulogu.

Radite pod pretpostavkom da sve je onemogućeno, i povećati od tamo. To može uključivati probleme s ugrađenim widgetima koji su izvan vaše kontrole