Прогресивно подобрение
Или е грациозна деградация?
Не можете просто да говорите за прогресивно подобрение, без да споменете грациозната деградация. Каква е разликата между тези понятия? Както бе споменато в по-ранна статия, грациозната деградация може да се преведе като постепенно деградиране. Това е много широко понятие, но в контекста на мрежата може да се разбира като устойчивост на грешки на клиентските уеб интерфейси, сървърната страна на сайтовете и т.н. В тази статия грациозната деградация ще се разбира като устойчивост на грешки на клиентските уеб интерфейси.
Какво е прогресивно подобрение? Най-често този термин се превежда като прогресивно подобрение. Прогресивното подобрение предполага, че уеб интерфейсите трябва да се създават на етапи, циклично, от прости към сложни. На всеки етап трябва да се получи цялостен уеб интерфейс, който ще бъде по-добър, по-красив и по-удобен от предишния. Можем да кажем, че сега има четири такива етапа:
На втория етап документът се проектира с помощта на добрия стар CSS и придобива по-изчистен вид: появява се мрежата на страницата, задават се параметрите на шрифта на елементите, фоновите изображения и т.н.
На третия етап се прилагат нови функции от фамилията спецификации CSS3 и документът се довежда до блясък: полупрозрачни твърди тела, заоблени ъгли, сенки. Също така, използвайки CSS3, можете да добавяте различни анимационни и декоративни функции: постепенно избледняване или изместване на елементи, подчертаване на полета на формуляри и т.н.
Обобщаваме целта на описаните етапи:
Може да се каже, че уеб интерфейс, създаден съвестно и с високо качество, в съответствие с подхода на грациозна деградация, ще се държи по същия начин като уеб интерфейс, изграден в съответствие с прогресивното подобрение. Тоест, прогресивното подобрение енищо повече от грациозна деградация, доведена до съвършенство. Въпреки това отбелязваме основните разлики между тези понятия:
- Грациозното влошаване е по-широка концепция от прогресивното подобрение, което е ограничено само до уеб интерфейси. Прогресивното подобрение е нашето, родно, уеб.
- Прогресивното подобрение задава вектора на движение (започнете просто!), но за грациозната деградация това не е толкова важно.
- Прогресивното подобрение подчертава важността на съдържанието, докато за изящното влошаване то остава на заден план.
Като цяло прогресивното подобрение е по-строга и последователна идеология за разработка на уеб интерфейс.
Защо се появи Progressive Enhancement
По-рано беше казано, че ако вземем и направим уеб интерфейса възможно най-висококачествен в съответствие с грациозната деградация, тогава получаваме същото нещо, както при прилагането на прогресивно подобрение. Така че защо да измисляте това подобрение?
Отговорът е прост: малко хора се справиха много добре с грациозната деградация. Това беше разочароващо за наистина високопоставени и отговорни разработчици. В края на краищата почти всеки би могъл да каже, че „правя грациозна деградация“, но усилията и времето, изразходвани от различните разработчици, варираха на порядък.
Накратко, такава хак работа с толерантност към грешки беше доста уморена от „правилните“ разработчици, трябваше да се направи нещо. Прогресивното подобрение се появи като реакция на лоша грациозна деградация. Сега наистина добрите разработчици и дизайнери могат да направят прогресивно подобрение, но лошите не могат, тъй като е по-трудно и трудоемко. В същото време новият подход абсорбира всички най-добри практики от грациозната деградация.
Практически пример
Първата стъпка е да създадете формуляр, като използвате чист HTML. Да, формане толкова красива, но функционална. Полученият код и резултатът са показани на фигурата:
На втория етап, използвайки най-простия CSS, ще направим формуляра по-красив: добавете фон, размери, подложка. Сега формата изглежда по-добре:
В третата стъпка ще използваме някои нови свойства на CSS, за да придадем блясък на формата. Нека добавим кръгове с border-radius, пускане на сенки за елементи с box-shadow, използване на CSS градиенти за стилизиране на бутона и т.н. Нека използваме някои разширени селектори, за да се отървем от допълнителните подложки. Резултатът е доста добър:
Използвайки най-простия пример, ние показахме как работи подходът за прогресивно подобрение. Между другото, този пример може да се "почувства на живо" в интерактивна демонстрация в HTML Academy.
Ще влезем с помощта на AJAX, така че не е нужно да се занимавате с формата, аз използвам div. Заоблени ъгли и сенки ... Това е проблем. За полета за въвеждане използвам въвеждане без граници, като за фон ще задам картина с рамка и сенки. Ще направя бутона с помощта на div, ще сложа изображение на бутон с градиент и сенки на фона. Готино! И в стария IE ще изглежда добре и просто изрежете няколко снимки.
Прогресивно подобрение и адаптивен дизайн
В същото време се появи подобен подход, който се нарича mobile first. Името му може да се преведе на български като "мобилен на първо място". Всъщност това е същият responsive дизайн, но със задължителното изискване: винаги започвайте да проектирате responsive интерфейс от мобилната версия.
Съотношението между адаптивния дизайн и мобилните първи подходи е много подобно на съотношението между елегантно влошаване и прогресивно подобряване.Първият подход в двойката е общ, а вторият подход е специфичен и добавя допълнителни изисквания към първия: „започнете с прост HTML“, „започнете да проектирате с мобилна версия“, „погалете котката“.
Струва си да се отбележи, че изразените подходи са перфектно комбинирани помежду си и се допълват перфектно. И в близко бъдеще всички най-добре представящи се ще кажат: „Правим първо мобилни устройства + прогресивно подобрение.“
Защо прочете това
Знаейки за този подход и разбирайки работата му, можете по-правилно да зададете задачи на изпълнителя. Използването на прогресивно подобрение от разработчиците на вашия сайт ще ви спести както пари, така и време.