Početna » Web dizajn » Najbolje prakse za progresivno poboljšanje u web dizajnu

    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.

    SLIKA: Prijenos

    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

    Također razmislite o značajkama JavaScripta koje nemaju sveobuhvatnu podršku preglednika. To uključuje API za dohvaćanje, API API-ja, sintaksu funkcije strelice ili čak preglednike bez podrške za moderne knjižnice kao što je jQuery.

    Svaka značajka zahtijeva pojedinačno testiranje s pojedinačnim rješenjem.

    Bit je postupno pojačanog JavaScripta gradite sadržaj koji funkcionira bez skriptiranja. To može dovesti do elementarnog korisničkog iskustva, ali to je u redu sve dok je web-lokacija upotrebljiva, a sadržaj dostupan.

    Ako želite napraviti testiranje uživo, obično možete onemogućite CSS i JavaScript u svakom većem pregledniku da biste vidjeli kako vaša web-lokacija funkcionira. Također je vrijedno razmotriti korištenje proširenja poput A-Testera za usklađenost s WCAG-om.

    JavaScript s progresivnim poboljšanjem je ogromna tema. Evo nekoliko postova koji će vam pomoći da dublje kopate:

    • Progresivno poboljšanje! = “Nema JavaScripta”
    • Interakcija je ključna: progresivno poboljšanje i JavaScript
    • Progresivno poboljšanje: radi se o sadržaju
    • Kako primijeniti progresivno poboljšanje Kada JavaScript izgleda kao zahtjev

    Gdje pada progresivno poboljšanje

    Iako je progresivno poboljšanje briljantna ideja za gotovo svaku vrstu moderne web stranice, ona jednostavno može ne primjenjuju se na projekte koji imaju za cilj potisnuti granice web tehnologije.

    Na primjer, ova metodologija nije dobro rješenje za web aplikacije koje funkcioniraju isključivo na pozivima Ajaxa. Je li to dobar izbor za pristupačnost? Ne, naravno da ne. Ali da je to bio slučaj, većina Codropovih tutorijala ne bi ni postojala. Moraš sjetite se ciljane publike.

    Web-lokacija tvrtke vjerojatno nema publiku koja brine o novim neobičnim CSS3 perspektivnim svojstvima, ali web-programeri mogu biti savršena publika za takve napredne značajke.

    Progresivno poboljšanje samo za web aplikacije nedostaje jednostavno ne mari za povratak u prošlost. Shvaćam da su ove web-aplikacije malobrojne, ali programeri vole napredak, au nekim slučajevima može biti pametno napredovati s novim tehnologijama koje ostavljaju zaostale.

    Ja sam zagovornik progresivnog poboljšanja (ili čak graciozne degradacije, vaš izbor) za opće web projekte. Ali također shvaćam da to nije savršeno rješenje za sve. Zapravo, ne postoji savršeno rješenje. Sve se svodi na potrebe publike i ciljeve projekta.

    Daljnje čitanje

    Ako stalno gradite web-projekte, razmislite o primjeni progresivnog poboljšanja u svom radnom procesu. Mnogo je lakše nego na prvi pogled, a sve počinje s osnovama. Većina tema koje okružuju progresivno poboljšanje zahtijevaju samo praksu i testiranje. Isprobajte prijedloge iz ovog članka i pogledajte što je najbolje za vaš radni tijek.

    Ako želite saznati više o progresivnom poboljšanju, pogledajte ove povezane postove:

    • Razumijevanje progresivnog poboljšanja
    • Progresivno poboljšanje: što je to i kako ga koristiti?
    • Proces JavaScript-ovisnosti: progresivno poboljšavanje mitova koji bacaju