Најбоље праксе за прогресивно побољшање у Веб дизајну

Изградња веб сајтова је невероватно сложена са многим деловима који се брзо мењају. Циљ заједнице веб дизајна је да смањити комплексност, и смањити могућност грешке у свакој фази процеса стварања.

Прогрессиве енханцемент је таква идеја у веб дизајну чији је циљ смањити грешке и пружају доследно корисничко искуство преко границе. Концепт има сопствену Википедиа страницу која објашњава као методу потпуно приступачан садржај, приказивање напредних функција само када их подржава претраживач.

Лако је разумети прогресивно побољшање, али није лако примијенити га директно на ваш рад. Волео бих да покријем неке најбоље праксе за прогресивно побољшање у стварним пројектима до помоћи дизајнерима да размишљају одрживије о свом раду.

1. Разумевање прогресивног побољшања

Теорија прогресивног побољшања препоручује почните са једноставним веб сајтом који ради у свим претраживачима, чинећи га приступачан сваком посетиоцу. Затим додајте функције кад год је то могуће.

Ово је супротно од грациозне деградације која подразумијева све значајке по дефаулту, а затим деградира када нешто не ради.

Прогресивно побољшање је боље за цјелокупно корисничко искуство, јер је у основи учитава само неопходне елементе. Сваки веб претраживач може подржавати текст (и обично слике). Без било каквог ЦСС-а ова информација ће изгледати бездушно и без укуса, али ће бити доступна.

Ово Лист Апарт чланак тврди да је прогресивно побољшање цонтент-фирст са стилови и динамичке компоненте додане касније. Садржај у семантичком ХТМЛ-у треба испоручити прије свега.

Напредни ЦСС и ЈаваСцрипт који данас користимо су широко подржани, али ако желимо да следимо принципе прогресивног побољшања, они би се требали сматрати луксузима.

Ево општег прегледа главних карактеристика прогресивног побољшања, које треба узети у обзир:

Семантиц маркуп за сав садржај
Корисници поставке прегледача треба поштовати
Садржај и основне функционалности би требали бити доступни свим корисницима
Ненаметљив ЈаваСцрипт је учитан само у окружењима која га подржавају

Технолошка ограничења у развоју фронт-енд-а првенствено су одређена компатибилношћу претраживача. Прогресивно побољшање вас враћа у основна размишљања о томе како најједноставнија веб страница можда изгледа. Одатле, можете план за напредније функције, лике ЦСС3 пропертиес.

Али шта је са прегледачима који не подржавају модерни ЦСС3? Ово је место на коме се играју локације као што је Цан И Усе. Требало би да одлучите које карактеристике су вредне имплементације и доносите судове на основу њих на циљну публику вашег веб сајта.

2. Одржавање у стиловима

Већина претраживача данас подржава све основне особине које су вам потребне. Али напредни ЦСС3 и даље представља проблем за старе кориснике, и прогресивно побољшање нуди решење.

Уместо да тражите резервне методе да бисте одржали ове нове карактеристике, прво се забрињавајте одговарајуће структуре распореда.

Напишите семантички ХТМЛ и ЦСС маркуп који ради у што већем броју активних претраживача (подршка за старе претраживаче као што је подршка за ИЕ5 није потребна).

Узмимо за пример овај ЈСФиддле који користи лебдеће са две бочне траке (.фиксно), и подручје садржаја флуида (.флуид). Ако избришете све ЦСС-ове и поново покренете код, приметићете да се све лепо слаже са првом колоном, а затим другом, и на крају последњим.

Неки програмери би волео да има колону са садржајем (.флуид) појављују се прво у ХТМЛ-у. Ово је место где долази до напредног побољшања, а алтернативна ЦСС решења постају одржива.

Два основна циља ХТМЛ-а су:

Потпуно семантички и валидни код
А доследно искуство за свакога

Најједноставнији начин за постизање ових циљева је да почети од ничега и напредовати, као што би то препоручили већина заговорника прогресивног побољшања.

Ако ваш код изгледа добро са ЦСС-ом и онемогућен и омогућен, онда нуди разумно решење за свакога.

Такође је вредно размотрити у ком тренутку одбацујете подршку за нешто. Мицрософт је већ одбацио значајну подршку за ИЕ6, тако да корисници који користе овај претраживач можда не вреде вашег времена.

Али још увек постоји једно велико питање: ако претраживач не подржава мој модерни ЦСС, шта да радим?

Ви једноставно пишите код који ради без то, и да модерни ЦСС сматрају прогресивним побољшањем. То је лепота методологије прогресивног побољшања.

Не требају ти назад, јер си ти у основи претпостављајући да ништа није подржано по дефаулту.

Методе прогресивног побољшања су о томе да сајт буде употребљив чак иу случајевима када нешто није подржано - али ако је подржано, тим боље.

Морате размотрити како садржај заправо тече без ЦСС-а. На пример, када онемогућим ЦСС на Веб локацији Трансмит-а, садржај се још увек органски креће низ страну.

Да, ружно је, и да, изгледа као да смо изгубили двадесет година напретка ... али ради.

3. Руковање ЈаваСцриптом

Важно је напоменути да је сваки проблем са ЈаваСцриптом на који можете да налетите током процеса развоја лукав и јединствен. Када правите нови пројекат са прогресивним побољшањем, требало би да наведете све потребне функције засноване на ЈС-у и размислите како би могли раде без ЈаваСцрипт-а.

Ово ће захтијевати много онлине истраживања како би се пронашла ваљана рјешења. Аарон Густафсон је написао одличан блог пост са решењима за различите проблеме, као што је замена Ајак-а мета рефресх-ом за садржај унутар ифраме-а.

Такође, када креирате ЈаваСцрипт картице, то је добра идеја користите сидрене везе са правим ИД вредностима. На тај начин, када је ЈаваСцрипт онемогућен, и даље можете имати видљиве картице и приступити их помоћу сидрене вредности. Аарон је написао још један комад на листи А Лист, који покрива општији преглед како бисте требали размишљати о овим проблемима.

Ево још једног примера. Рецимо да имате везу која динамички учитава садржај. Тхе хреф вредност је празна, јер све се учитава преко ЈаваСцрипт-а са методом превентДефаулт ().

Уместо тога, било би мудро одредити хреф имовине покажите на другу страницу где се садржај може учитати природно, али посетилац види ту страницу само када је ЈаваСцрипт онемогућен.

Прогресивно побољшање је више од ЈаваСцрипт-а, али са развојем веб-а који сваке године напредује, нема сумње да ЈаваСцрипт игра значајну улогу.

Радите под претпоставком да све је онемогућено, и повећати од тамо. То може укључивати проблеме са уграђеним видгетима који су изван ваше контроле