Geriausios pažangiosios žiniatinklio dizaino tobulinimo praktikos

Statybos svetainių statyba yra neįtikėtinai sudėtinga su daugeliu greitai besikeičiančių dalių. Interneto dizaino bendruomenės tikslas yra sumažinti sudėtingumą, ir sumažinti klaidų potencialą kiekviename kūrimo proceso etape.

Progresyvus tobulinimas yra tokia internetinio dizaino idėja, kuria siekiama sumažinti klaidas ir užtikrinti nuoseklią naudotojų patirtį per lentą. Ši koncepcija turi savo „Wikipedia“ puslapį, kuris jį paaiškina kaip metodą visiškai prieinamą turinį, patobulintų funkcijų teikimas tik tuomet, kai ją palaiko naršyklė.

Tai lengva suprasti palaipsnį tobulinimą, bet ne taip paprasta ją tiesiogiai pritaikyti savo projektavimo darbams. Norėčiau padengti kai kuriuos geriausios praktikos, susijusios su laipsniško realaus pasaulio projektų \ t į padėti projektuotojams tvariau galvoti apie savo darbo eigą.

1. Suprasti pažangą

Progresyvaus tobulinimo teorija rekomenduoja pradėkite nuo paprastos svetainės kuri veikia visose naršyklėse, kad ji būtų prieinamas kiekvienam lankytojui. Tada prireikus pridėkite funkcijų.

Tai yra priešingas grakštus degradavimas, kuris pagal nutylėjimą apima visas funkcijas, o tada blogėja, kai kažkas neveikia.

Progresyvus patobulinimas yra geresnis bendrai vartotojų patirčiai, nes jos esmė įkelia tik būtinus elementus. Kiekviena interneto naršyklė gali palaikyti tekstą (ir paprastai vaizdus). Be jokios CSS ši informacija atrodys nuoširdi ir skoninga, tačiau ji bus prieinama.

Tai Sąrašas straipsnyje teigiama, kad laipsniškas tobulinimas yra pirmiausia turinys su stiliai ir dinaminiai komponentai. Semantinio HTML turinys turi būti pristatytas prieš ką nors kitą.

Išplėstinė CSS ir „JavaScript“, kurią šiandien naudojame, yra plačiai palaikomi, tačiau jei norime laikytis laipsniško tobulinimo principų, jie turėtų būti laikomi prabangiais.

Toliau pateikiami bendri pagrindiniai progresyvaus tobulinimo požymiai, į kuriuos turėtumėte atsižvelgti:

• Semantinis žymėjimas už visą turinį
• Naudotojų naršyklės parinktys reikia gerbti
• Turinys ir pagrindinės funkcijos turėtų būti prieinami visiems vartotojams
• Neįtikėtinas „JavaScript“ įkeliamas tik aplinkose, kurios gali ją palaikyti

Technologinius apribojimus, susijusius su „front-end“ plėtra, daugiausia lemia naršyklės suderinamumas. Progresyvus patobulinimas jums grįžta prie pagrindų, galvodami apie tai, kaip paprasčiausias kaulų kaulo puslapis gali atrodyti. Iš ten jūs galite išplėstinių funkcijų planas, kaip CSS3 savybės.

Bet kas apie naršykles, kurios nepalaiko šiuolaikinio CSS3? Čia žaidžiami tokie puslapiai kaip „Galiu naudoti“. Turėtumėte nuspręsti, kokias funkcijas verta įgyvendinti, ir priimti sprendimus jūsų svetainės tikslinę auditoriją.

2. Pragyvenimo stilių lentelėse

Dauguma naršyklių šiandien palaiko visas pagrindines reikiamas savybes. Bet Išplėstinė CSS3 tebėra problema seniems naudotojams, ir laipsniškas tobulinimas siūlo sprendimą.

Užuot ieškoję atsarginių metodų, kad išlaikytumėte šias naujas funkcijas, pirmiausia rūpinkitės savimi tinkamas išdėstymo struktūras.

Parašykite semantinį HTML ir CSS žymėjimą, kuris veikia kaip galima daugiau aktyvių naršyklių (parama senosioms naršyklėms, tokioms kaip IE5, nėra būtina).

Paimkite, pavyzdžiui, šį JSFiddle, kuris naudoja plūdes su dviem šoninėmis juostomis (.fiksuotas) ir skysčio turinio sritis (.skystis). Jei ištrinsite visus CSS ir iš naujo įvesite kodą, pastebėsite, kad viskas sukrauna gražiai su pirmuoju stulpeliu, tada antra, o galiausiai paskutinis.

Kai kurie kūrėjai norėtų turėti turinio stulpelį (.skystis) pirmiausia pasirodo HTML. Tai yra tada, kai paleidžiama progresyvi plėtra, o alternatyvūs CSS sprendimai tampa gyvybingi.

Du pagrindiniai HTML tikslai yra šie:

• Visiškai semantinis ir galiojantis kodą
• A nuosekli patirtis visiems

Paprasčiausias būdas pasiekti šiuos tikslus yra pradėti nuo nieko ir dirbti, kaip daugelis progresyvių advokatų rekomenduotų.

Jei jūsų kodas gerai atrodo su CSS ir išjungtas, ir įjungtas, tuomet jis siūlo visiems priimtiną sprendimą.

Taip pat verta apsvarstyti kokiu momentu jūs paliekate paramą kažkam. „Microsoft“ jau atsisakė didelės paramos „IE6“, todėl vartotojai, kurie naudojasi šia naršykle, gali nebūti verta savo laiko.

Bet vis dar yra vienas didelis klausimas: jei naršyklė nepalaiko mano šiuolaikinio CSS, ką turėčiau daryti?

Jūs tiesiog rašykite kodą, kuris veikia be ji, ir šiuolaikinę CSS laikykite palaipsniui. Tai yra progresyvaus tobulinimo metodikos grožis.

Jums nereikia pragulų, nes esate iš esmės darant prielaidą, kad nieko nėra palaikoma pagal nutylėjimą.

Progresyvūs patobulinimo metodai yra skirti tam, kad svetainė būtų tinkama naudoti net tais atvejais, kai kažkas nepalaikoma, bet jei ji yra palaikoma, tuo geriau.

Jūs turite apsvarstyti kaip turinys faktiškai teka be CSS. Pvz., Kai išjungsiu CSS transliacijos svetainėje, turinys vis dar organiškai nukrenta žemiau puslapio.

Taip, tai bjaurus, ir taip, jaučiasi, kad praradome dvidešimt metų pažangos… bet tai veikia.

3. „JavaScript“ tvarkymas

Verta paminėti, kad kiekviena „JavaScript“ problema, kurią galite įveikti kūrimo proceso metu, yra sudėtinga ir unikali. Sukūrę naują projektą su laipsnišku tobulinimu, turėtumėte išvardyti visas reikalingas JS funkcijas ir apsvarstyti, kaip jie galėtų veikia be „JavaScript“.

Tam reikės daug internetinių tyrimų, kad rastų tinkamus sprendimus. Aaron Gustafson parašė puikų dienoraščio įrašą su įvairiomis problemomis, pvz., „Ajax“ pakeitimu meta atnaujinimu turiniui „iframe“.

Be to, kurdami „JavaScript“ skirtukus, tai yra gera idėja naudoti inkarų sąsajas su tikromis ID reikšmėmis. Tokiu būdu, kai „JavaScript“ yra išjungtas, vis tiek galite matyti skirtukus ir prieiti prie jų. Aaronas parašė dar vieną „A sąrašo“ elementą, kuriame apžvelgiama, kaip turėtumėte galvoti apie šias problemas.

Štai dar vienas pavyzdys. Tarkime, jūs turite nuorodą, kuri įkelia turinį dinamiškai. The href vertė yra tuščia, nes viskas įkeliama per „JavaScript“ su „PrevDefault“ () metodu.

Vietoj to, būtų protinga nustatyti href nuosavybė nukreipkite į kitą puslapį kur turinys gali būti įkeltas natūraliai, bet lankytojas mato tik tą puslapį, kai „JavaScript“ yra išjungtas.

Progresyvus patobulinimas yra daugiau nei „JavaScript“, tačiau kasmet tobulinant internetą toliau, neabejotina, kad „JavaScript“ vaidina svarbų vaidmenį.

Veikkite pagal prielaidą, kad viskas buvo išjungta, ir didinti iš ten. Tai gali apimti problemas, susijusias su įterptais valdikliais, kurie nėra jūsų valdomi

Taip pat pagalvokite apie „JavaScript“ funkcijas trūksta išsamaus naršyklės palaikymo. Tai apima „Fetch API“, „push API“, rodyklės funkcijų sintaksę arba net naršykles be palaikymo šiuolaikinėms bibliotekoms, pvz., „JQuery“.

Kiekvienai funkcijai reikia individualus testavimas su individualiu sprendimu.

Palaipsniui tobulinamos „JavaScript“ esmė yra kurti turinį, kuris veikia be jokių scenarijų. Tai gali lemti pradinę naudotojo patirtį, tačiau tai gerai, jei svetainė yra tinkama ir turinys yra prieinamas.

Jei norite atlikti tiesioginius testus, galite paprastai išjungti CSS ir „JavaScript“ visose pagrindinėse naršyklėse norėdami pamatyti, kaip veikia jūsų svetainė. Taip pat verta apsvarstyti galimybę naudoti išplėtimus, pvz., „A-Tester“, kad būtų laikomasi WCAG reikalavimų.

„JavaScript“ su laipsnišku tobulinimu yra didžiulė tema. Štai keletas pranešimų, kurie padės jums giliau įsikurti:

• Progresyvus tobulinimas! = “Nėra „JavaScript“”
• Sąveika yra raktas: progresyvus tobulinimas ir „JavaScript“
• Progresyvus tobulinimas: apie turinį
• Kaip taikyti progresinį tobulinimą, kai JavaScript atrodo kaip reikalavimas

Kai progresyvaus tobulėjimo trūksta

Nors laipsniškas tobulinimas yra puiki idėja beveik visoms modernios svetainės rūšims, ji paprasčiausiai gali negali būti taikomi projektams, kuriais siekiama sumažinti žiniatinklio technologijų ribas.

Pavyzdžiui, ši metodika nėra tinkamas sprendimas interneto programoms, kurios veikia tik „Ajax“ skambučiais. Ar tai geras pasirinkimas prieinamumui? Ne zinoma ne. Bet jei taip būtų, dauguma „Codrops“ vadovėlių net nebūtų egzistuoti. Tu privalai prisiminkite tikslinę auditoriją.

Verslo svetainė tikriausiai neturi auditorijos, kuri rūpinasi naujomis „CSS3“ perspektyvinėmis savybėmis, tačiau žiniatinklio kūrėjai gali būti puiki auditorija tokioms pažangioms funkcijoms.

Progresyvus patobulinimas tinka tik interneto programoms tiesiog nesirūpinkite grįžtamu laiku. Suprantu, kad šios žiniatinklio programos yra nedaug ir toli, bet kūrėjai mėgsta pažangą, o kai kuriais atvejais gali būti protinga tęsti naujas technologijas, paliekant užstrigusius asmenis.

Aš pritariu visuotiniam interneto projektui, kuris yra laipsniškas (ar net grakštus degradavimas, jūsų pasirinkimas). Bet aš taip pat suprantu, kad tai nėra puikus sprendimas visiems. Iš tiesų nėra tobulo sprendimo. Visa tai lemia auditorijos poreikius ir projekto tikslus.

Papildoma literatūra

Jei nuolat kuriate žiniatinklio projektus, turėtumėte apsvarstyti galimybę taikyti laipsnišką darbo eigos tobulinimą. Tai daug lengviau, nei atrodo iš pirmo žvilgsnio, ir viskas prasideda nuo pagrindų. Dauguma temų, susijusių su laipsnišku tobulinimu, reikalauja tik praktikos ir testavimo. Išbandykite šio straipsnio pasiūlymus ir pažiūrėkite, kas geriausiai tinka jūsų darbo eigai.

Jei norite sužinoti daugiau apie laipsnišką tobulinimą, patikrinkite šiuos susijusius įrašus:

• Suprasti pažangą
• Progressive Enhancement: Kas tai yra ir kaip ją naudoti?
• „JavaScript“ priklausomybės pasikartojimas: mitas, užkertantis kelią pažangiam tobulinimui