Кращі практики для прогресивного вдосконалення веб-дизайну

Ремесло побудови веб-сайтів неймовірно складно з багатьма швидко мінливими деталями. Мета спільноти веб-дизайну - це зменшити складність, і зменшити потенційну помилку на кожному етапі процесу створення.

Прогресивне покращення така ідея в веб-дизайн, який прагне зменшити помилки і забезпечити постійний досвід користувачів по усіх напрямках. Концепція має власну сторінку Вікіпедії, яка пояснює її як метод повністю доступний вміст, надання розширених функцій лише тоді, коли підтримується браузером.

Легко зрозуміти прогресивне вдосконалення, але не так просто застосувати його безпосередньо до проектної роботи. Я хотів би покрити деякі кращі практики для прогресивного вдосконалення в реальних проектах до допомагати дизайнерам думати більш стабільно про свій робочий процес.

1. Розуміння прогресивного підвищення

Теорія прогресивного вдосконалення рекомендує почати з простого веб-сайту що працює у всіх браузерах, роблячи це доступний для кожного відвідувача. Потім додайте функції, коли це можливо.

Це є протилежністю витонченої деградації, яка включає всі функції за замовчуванням, потім погіршується, коли щось не працює.

Прогресивне вдосконалення краще для загального користувальницького досвіду, оскільки по суті це завантажує тільки необхідні елементи. Кожен веб-браузер може підтримувати текст (і зазвичай зображення). Без будь-якого CSS ця інформація буде виглядати м'якою і несмачною, але вона буде доступною.

Це Список Apart Стаття стверджує, що прогресивне вдосконалення є першим с Стилі та динамічні компоненти додаються пізніше. Вміст у семантичному HTML-коді повинен бути доставлений раніше за все.

Передові CSS і JavaScript, які ми використовуємо сьогодні, широко підтримуються, але якщо ми хочемо дотримуватися принципів прогресивного вдосконалення, їх слід вважати предметом розкоші.

Ось загальний виклад основних особливостей прогресивного вдосконалення, які слід враховувати:

Семантична розмітка для всього вмісту
Користувачі " налаштування браузера необхідно дотримуватися
Має бути зміст і основна функціональність доступні для всіх користувачів
Завантажується лише ненав'язливий JavaScript в середовищах, які можуть його підтримувати

Технологічні обмеження у розробці front-end визначаються в першу чергу сумісністю браузерів. Прогресивне вдосконалення повертає вас до основ, які думають про те, як найпростіша веб-сторінка може виглядати. Звідти можна план для більш розширених функцій, як властивості CSS3.

А як щодо браузерів, які не підтримують сучасний CSS3? Саме тут діють такі сайти, як Can I Use. Ви повинні вирішити, які функції варто реалізовувати, і виносити судження на основі на цільову аудиторію вашого веб-сайту.

2. Допомога у таблицях стилів

Більшість браузерів сьогодні підтримують всі основні властивості, які вам потрібні. Але розширений CSS3 як і раніше залишається проблемою для застарілих користувачів, і прогресивне вдосконалення пропонує рішення.

Замість того, щоб шукати резервні методи для підтримки цих нових функцій, перш за все, зайдіть до себе належні структури макета.

Напишіть семантичний HTML і CSS розмітку, яка працює в якомога більшій кількості активних браузерів (підтримка старих браузерів, таких як підтримка IE5, не потрібна).

Візьміть для прикладу цей JSFiddle, який використовує плаваюче поле з двома бічними панелями (.фіксований), і область вмісту рідини (.рідини). Якщо ви вилучите всі CSS, і повторно запустите код, ви помітите, що все складається з першим стовпцем, потім другим, і, нарешті, останнім.

Деякі розробники вважають за краще мати стовпець вмісту (.рідини) з'являються спочатку в HTML. Тут прогресивне вдосконалення вступає в гру, і альтернативні рішення CSS стають життєздатними.

Основними цілями вашого HTML є:

Повністю семантичний і дійсний код
A відповідний досвід для всіх

Найпростіший спосіб досягти цих цілей - це починати з нічого і опрацювати, тому що більшість захисників прогресивного вдосконалення рекомендували б це.

Якщо ваш код добре виглядає, коли CSS вимкнено і увімкнено, він пропонує розумне рішення для всіх.

Варто також врахувати в який момент ви відмовляєтесь від підтримки. Корпорація Майкрософт вже втратила велику підтримку IE6, тому користувачі, які використовують цей браузер, можуть не вартий вашого часу.

Але є ще одне велике питання: якщо браузер не підтримує мої сучасні CSS, що робити?

Ви просто писати код, який працює без це, і розглядати сучасний CSS як прогресивне вдосконалення. Це краса методології прогресивного вдосконалення.

Вам не потрібні зворотні кошти, тому що ви в основному припускаючи, що нічого не підтримується за замовчуванням.

Методи прогресивного вдосконалення полягають у тому, щоб зробити сайт корисним навіть у тих випадках, коли щось не підтримується, але якщо він підтримується, тим краще.

Вам потрібно розглянути як вміст фактично протікає без CSS. Наприклад, коли я вимикаю CSS на веб-сайті Transmit, вміст все ще органічно протікає по сторінці.

Так, це потворно, і так, здається, що ми втратили двадцять років прогресу ... але це працює.

3. Обробка JavaScript

Варто відзначити, що кожен випуск JavaScript, на який ви можете зіштовхнутися під час розробки, є складним і унікальним. Коли ви будуєте новий проект з прогресивним вдосконаленням, вам слід перерахувати всі необхідні функції на основі JS і розглянути, як вони можуть працювати без JavaScript.

Для цього потрібно багато онлайн-досліджень, щоб знайти правильні рішення. Аарон Густафсон написав чудову публікацію в блозі з вирішенням різноманітних проблем, наприклад, замінити Ajax на мета-оновлення для вмісту всередині iframe.

Також, коли ви створюєте вкладки JavaScript, це гарна ідея використовувати якірні посилання з реальними значеннями ID. Таким чином, коли JavaScript вимкнено, ви можете мати видимі та доступні вкладки за допомогою прив'язки. Аарон написав ще один фрагмент на A List Apart, який охоплює більш загальний огляд того, як ви повинні думати про ці проблеми.

Ось ще один приклад. Припустимо, у вас є посилання, яке динамічно завантажує вміст. The href значення порожнє, тому що все завантажується через JavaScript з методом preventDefault ().

Натомість було б доцільно встановити href власності вкажіть на іншу сторінку де вміст може завантажуватися природно, але відвідувач бачить лише цю сторінку, коли JavaScript вимкнено.

Прогресивне вдосконалення набагато більше, ніж JavaScript, але з подальшим розвитком веб-розробки щороку, без сумніву, JavaScript відіграє значну роль.

Працюйте за припущення, що все вимкнено, і звідти розширюються. Це може включати проблеми з вбудованими віджетами, які не підлягають контролю