Labākās prakses progresīvai uzlabošanai tīmekļa dizainā

Tīmekļa vietņu celtniecība ir ļoti sarežģīta ar daudzām ātri mainīgām daļām. Web dizaina kopienas mērķis ir samazināt sarežģītību, un samazināt kļūdu iespējamību katrā izveides procesa posmā.

Progresīvs uzlabojums ir tāda ideja tīmekļa dizainā, kura mērķis ir samazināt kļūdas un nodrošināt konsekventu lietotāja pieredzi visur. Koncepcijai ir sava Wikipedia lapa, kas to izskaidro kā metodi pilnībā pieejamu saturu, uzlabotas funkcijas padarīšana tikai tad, ja pārlūks to atbalsta.

Tas ir viegli saprast pakāpenisku uzlabošanu, bet ne tik vienkārši to piemērot tieši savam projektēšanas darbam. Es gribētu aptvert dažus labākās prakses, lai pakāpeniski uzlabotu reālos projektus uz palīdzēt dizaineriem ilgtspējīgāk domāt par savu darbplūsmu.

1. Progresīvās uzlabošanas izpratne

Progresīvās uzlabošanas teorija iesaka sākt ar vienkāršu tīmekļa vietni kas darbojas visās pārlūkprogrammās katram apmeklētājam. Pēc tam pievienojiet iespējas, kad vien iespējams.

Tas ir pretējs graciozai degradācijai, kas pēc noklusējuma ietver visas funkcijas, tad degradējas, kad kaut kas nedarbojas.

Progresīvā uzlabošana ir labāka vispārējai lietotāju pieredzei, jo tās pamatā ir ielādē tikai nepieciešamos elementus. Katra tīmekļa pārlūkprogramma var atbalstīt tekstu (un parasti attēlus). Bez CSS šī informācija izskatīsies mīlīga un bez garšas, taču tā būs pieejama.

Tas List Apart raksts apgalvo, ka pakāpeniska uzlabošana ir vispirms ar vēlāk pievienoti stili un dinamiskie komponenti. Semantiskā HTML saturam jābūt piegādātam pirms kaut kas cits.

Mūsdienās izmantotās uzlabotās CSS un JavaScript tiek plaši atbalstītas, bet, ja mēs vēlamies ievērot progresīvās uzlabošanas principus, tie jāuzskata par luksusa precēm.

Tālāk ir sniegts vispārējs progresīvās uzlabošanas galveno elementu nolietojums, kas jāņem vērā:

• Semantiskā atzīme visu saturu
• Lietotāju pārlūka preferences jāievēro
• Būtu jābūt satura un pamata funkcionalitātei visiem lietotājiem
• Neuzkrītošs JavaScript ir ielādēts tikai vidē, kas to var atbalstīt

Tehnoloģiskos ierobežojumus front-end attīstībā galvenokārt nosaka pārlūkprogrammas saderība. Progresīvā uzlabošana jūs atgriezīs pie pamatiem, domājot par to, kā vienkāršākā kaula vienkāršākā mājas lapa varētu izskatīties. No turienes jūs varat plāns uzlabotas funkcijas, piemēram, CSS3 īpašības.

Bet kā ar pārlūkiem, kas neatbalsta mūsdienu CSS3? Tā ir vieta, kur spēlē tādas vietnes kā Can I Use. Jums jāizlemj, kuras funkcijas ir vērts īstenot, un pieņemt spriedumus uz jūsu vietnes mērķauditoriju.

2. Iztikas līdzekļi stilu lapās

Lielākā daļa pārlūkprogrammu šodien atbalsta visas nepieciešamās pamatīpašības. Bet uzlabotā CSS3 joprojām ir problēma mantotajiem lietotājiem, un pakāpeniska uzlabošana piedāvā risinājumu.

Tā vietā, lai meklētu rezerves metodes, lai saglabātu šīs jaunās funkcijas, vispirms rūpējieties par sevi pareizas izkārtojuma struktūras.

Rakstiet semantisku HTML un CSS atzīmi, kas darbojas pēc iespējas vairāk aktīvās pārlūkprogrammās (atbalsts seniem pārlūkiem, piemēram, IE5 atbalsts nav nepieciešams).

Piemēram, izmantojiet šo JSFiddle, kas izmanto pludiņus ar divām sānjoslām (.fiksēts) un šķidruma satura apgabalu (.šķidrums). Ja izdzēšat visus CSS, un atkārtoti ievadīsiet kodu, ko pamanīsiet, viss pirmais, tad otrais un beidzot pēdējais.

Daži izstrādātāji dod priekšroku satura slejai (.šķidrums) vispirms parādās HTML. Tas ir, ja pakāpeniska uzlabošana sāk darboties, un alternatīvie CSS risinājumi kļūst dzīvotspējīgi.

Jūsu HTML divi galvenie mērķi ir šādi:

• Pilnībā semantisks un derīgs kodu
• A pastāvīga pieredze ikvienam

Visvienkāršākais veids, kā sasniegt šos mērķus, ir sākt no nekas un strādāt, tā kā lielākā daļa progresīvo uzlabojumu advokātu to ieteiks.

Ja jūsu kods izskatās labi ar CSS gan invalīdiem, gan iespējotiem, tad tas piedāvā saprātīgu risinājumu ikvienam.

Tas ir arī vērts apsvērt kurā brīdī jūs kaut ko atbalstāt. Microsoft jau ir samazinājis lielu atbalstu IE6, tāpēc lietotāji, kas darbojas šajā pārlūkprogrammā, var nebūt jūsu laika vērts.

Bet ir vēl viens liels jautājums: ja pārlūkprogramma neatbalsta manu mūsdienu CSS, kas man jādara?

Jūs vienkārši rakstiet kodu, kas darbojas bez to, un uzskata mūsdienu CSS par progresīvu uzlabojumu. Tas ir progresīvās uzlabošanas metodikas skaistums.

Jums nav nepieciešami trūkumi, jo jūs esat būtībā pieņemot, ka nekas netiek atbalstīts pēc noklusējuma.

Progresīvās uzlabošanas metodes ir par vietnes lietošanu pat gadījumos, kad kaut kas netiek atbalstīts, bet ja tas tiek atbalstīts, jo labāk.

Jums ir jāapsver kā saturs faktiski plūst bez CSS. Piemēram, ja es atspējoju CSS Transmit tīmekļa vietnē, saturs joprojām plūst organiski uz leju.

Jā, tas ir neglīts, un jā, tā uzskata, ka mēs esam zaudējuši divdesmit gadu progresu… bet tas darbojas.

3. JavaScript lietošana

Ir vērts pieminēt, ka katrs JavaScript jautājums, kas jums var rasties izstrādes procesa laikā, ir grūts un unikāls. Veidojot jaunu projektu ar progresīvu uzlabojumu, jums jāuzskaita visas nepieciešamās JS funkcijas un jāapsver, kā tās varētu darbojas bez JavaScript.

Tas prasīs daudz tiešsaistes pētījumu, lai atrastu derīgus risinājumus. Aaron Gustafson uzrakstīja lielisku blogu ar dažādām problēmām, piemēram, aizstājot Ajax ar meta atsvaidzinājumu par saturu iekšā iframe.

Turklāt, veidojot JavaScript cilnes, tā ir laba ideja izmantot enkura saites ar reālām ID vērtībām. Tādā veidā, kad JavaScript ir atspējots, joprojām var būt cilnes redzamas un pieejamas ar enkura vērtību. Aarons uzrakstīja vēl vienu gabalu uz A saraksta, kas aptver vispārīgāku pārskatu par to, kā jums vajadzētu domāt par šīm problēmām.

Šeit ir vēl viens piemērs. Pieņemsim, ka jums ir saite, kas dinamiski ielādē saturu. The href vērtība ir tukša, jo viss ielādējas, izmantojot JavaScript, izmantojot metodi „PrevDefault” ().

Tā vietā būtu saprātīgi noteikt href īpašums norādiet uz citu lapu kur saturs var ielādēt dabiski, bet apmeklētājs šo lapu redz tikai tad, ja JavaScript ir atspējots.

Progresīvais uzlabojums ir vairāk nekā JavaScript, bet, izstrādājot Web izstrādi katru gadu, nav šaubu, ka JavaScript spēlē nozīmīgu lomu.

Darbojas saskaņā ar pieņēmumu, ka viss ir atspējots, un no augšas. Tas var ietvert problēmas ar iegultiem logrīkiem, kas ir ārpus jūsu kontroles

Domājiet arī par JavaScript funkcijām trūkst visaptveroša pārlūka atbalsta. Tas ietver API ielādi, push API, bultiņu funkcijas sintaksi vai pat pārlūkprogrammas bez atbalsta mūsdienu bibliotēkām, piemēram, jQuery.

Katra funkcija prasa individuāla testēšana ar individuālu risinājumu.

Pakāpeniski uzlabotas JavaScript būtība ir veidot saturu, kas darbojas bez jebkāda skripta. Tas var novest pie rudimentāra lietotāja pieredzes, bet tas ir labi, kamēr vietne ir izmantojama, un saturs ir pieejams.

Ja vēlaties veikt tiešos testus, parasti varat atslēgt CSS un JavaScript katrā galvenajā pārlūkprogrammā lai redzētu, kā jūsu vietne darbojas. Tāpat ir vērts apsvērt iespēju izmantot tādus paplašinājumus kā A-Tester WCAG atbilstībai.

JavaScript ar progresīvu uzlabošanu ir milzīgs temats. Šeit ir dažas ziņas, kas palīdzēs jums izvērsties dziļāk:

• Progresīvā uzlabošana! = “Nav JavaScript”
• Mijiedarbība ir atslēga: progresīva uzlabošana un JavaScript
• Progresīvais uzlabojums: tas ir par saturu
• Kā lietot progresīvu uzlabojumu, ja JavaScript šķiet kā prasība

Ja progresīvais uzlabojums ir īss

Lai gan pakāpeniska uzlabošana ir lieliska ideja gandrīz katram mūsdienu tīmekļa vietnes veidam, tā vienkārši var nav piemērojami projektiem, kuru mērķis ir virzīt tīmekļa tehnoloģiju robežas.

Piemēram, šī metodika nav labs risinājums tīmekļa lietojumprogrammām, kas darbojas tikai ar Ajax zvaniem. Vai tā ir laba pieejamības izvēle? Nē, protams nē. Bet, ja tas tā būtu, vairums Codrops apmācības pat nebūtu pastāvējušas. Tev vajag atcerieties mērķauditoriju.

Uzņēmuma tīmekļa vietnei, iespējams, nav auditorijas, kas rūpējas par spilgtajām jaunajām CSS3 perspektīvas īpašībām, bet tīmekļa izstrādātāji var būt ideāla auditorija šādām papildu funkcijām.

Progresīvā uzlabošana nepietiek tikai tīmekļa lietojumprogrammām vienkārši neinteresē atgriezties laikā. Es saprotu, ka šīs tīmekļa lietojumprogrammas ir maz un tālu, bet izstrādātāji mīl progresu, un dažos gadījumos var būt saprātīgi virzīties uz priekšu ar jaunām tehnoloģijām, atstājot straglistus.

Es atbalstu progresīvu uzlabošanu (vai pat graciozu degradāciju, jūsu izvēli) vispārējiem tīmekļa projektiem. Bet es arī saprotu, ka tas nav ideāls risinājums visam. Patiesībā nav neviena ideāla risinājuma. Tas viss attiecas uz auditorijas vajadzībām un projekta mērķiem.

Turpmāka lasīšana

Ja jūs nepārtraukti veidojat tīmekļa projektus, jāapsver iespēja pakāpeniski uzlabot savu darbplūsmu. Tas ir daudz vieglāk, nekā šķiet pirmajā mirklī, un tas viss sākas ar pamatiem. Lielākā daļa tematu, kas ietver progresīvu uzlabošanu, prasa tikai praksi un testēšanu. Izmēģiniet šī raksta ieteikumus un skatiet, kas vislabāk atbilst jūsu darbplūsmai.

Ja vēlaties uzzināt vairāk par progresīvo uzlabojumu, skatiet šīs saistītās ziņas:

• Progresīvās uzlabošanas izpratne
• Progresīvs uzlabojums: kas tas ir un kā to izmantot?
• JavaScript atkarības nojaukums: mīts-busting progresīvā uzlabošana