Зміст
- Проектування для невідомого
- Прагматичний підхід до дизайну
- Ставши макетом агностиком
- Кодування поступово
- Занурення в націнку
Здається, сьогодні всі говорять про адаптивний веб-дизайн, і з поважною причиною; оскільки кількість пристроїв з підтримкою Інтернету продовжує зростати - кожен з різними можливостями та функціями - створювати веб-сайти фіксованої ширини більше не доцільно.
Правда в тому, що цього ніколи не було. Проте до цього часу вважалося найкращою практикою розробляти досвід, який робив ряд припущень, будь то роздільна здатність екрана, пропускна здатність або метод введення. Якщо ви коли-небудь розробляли веб-сайт шириною 960 пікселів, лише для того, щоб переглянути його на нетбуці маленького екрана друга (і так, я пишу з болючого досвіду тут), ви зрозумієте, чому це не був особливо розумний підхід. Тепер, коли смартфони та планшети потрапляють у суміш, стає зрозуміло, що наші традиційні методи більше не підходять для певної мети.
На щастя, поява медіа-запитів CSS та зростаюче визнання того, що Інтернет є власним носієм, означає, що ми починаємо сприймати справжню природу платформи, визнаючи, що її універсальність є силою, а не слабкістю.
Протягом наступних п’яти днів я проведу вас через методику, яка визнає цей факт: адаптивний веб-дизайн. Розроблений Ітаном Маркоттом, він поєднує макети рідини, гнучкі зображення та медіа-запити, щоб допомогти нам створювати сайти, які витончено адаптуються до будь-якого середовища, з яким вони стикаються.
Я продемонструю цей підхід, показавши вам, як створити просту галерею медіа. У своїх прикладах я буду створювати невеликий веб-сайт, щоб задокументувати недавню поїздку, яку я здійснив по Сполучених Штатах, але сміливо налаштовуйте код та дизайн відповідно до своїх потреб.
Проектування для невідомого
Значна частина цього посібника буде зосереджена навколо аспекту розвитку адаптивного дизайну. Але перед тим, як заглибитися в будь-який код, спробуймо трохи подумати, як ми можемо створити веб-сайт, який міг би мати безмежні макети.
Зараз мені пощастило, що я можу розробляти інтерфейси і розробити інтерфейсний код, який робить їх реальними. Звичайно, це не унікальна майстерність - якщо ви працюєте для себе, то ви, мабуть, однакові. Але, безумовно, вигідно розуміти, як вміст може адаптуватися та перероблятися при розробці рідинних конструкцій.
Я також працюю у складі більшої команди, де моя роль є більш спеціалізованою. У такому середовищі візуальний дизайнер може зосередитись виключно на перетворенні каркасів у привабливі, привабливі (підписані, ідеально підходящі для пікселів) компи. І це незвично для розробників, які розташовуються окремо, перекладаючи ці макети в чітку та ефективну розмітку та CSS.
Однак такі лінійні та сегреговані робочі процеси швидко руйнуються, як тільки ми починаємо оцінювати, як конструкції будуть адаптуватися до різних середовищ. Як і будь-який новий інструмент або технологія, ми також повинні розглядати більш спільні та спритні способи роботи. Багато найскладніших проблем, що виникають при розробці адаптивних веб-сайтів, можна вирішити просто за допомогою бесіди, експериментів та ітерацій.
Прагматичний підхід до дизайну
Це не означає, що у дизайнерів немає можливості думати про те, як дизайн може працювати поза межами будь-якого конкретного пристрою.
У Clearleft ми ініціюємо візуальний дизайн з точки зору робочого столу. Ми починаємо з визначення загальної мови дизайну та візуальної естетики, часто грунтуючись на початкових дослідженнях навколо основного змісту. Наприклад, якщо ми розробляємо сайт з продуктами харчування, ми почнемо зі сторінки рецептів; для сайту новин, сторінки історії.
Це не тільки важлива сторінка на сайті, але ймовірно, вона включає достатньо структурованого вмісту, щоб ми могли створити типографську палітру. Ми також подумаємо над тим, як може адаптуватися макет - навіть якщо це нам просто на думці на цьому етапі.
Одним з корисних способів стрес-тестування дизайну є взяти таку сторінку та адаптувати її для більш вузького (~ 320 пікселів у ширину) екрана. Ви, швидше за все, виявите, що деякі аспекти дизайну потребують переосмислення, щоб вони працювали на такій ширині. Ось кілька прикладів:
- Типографіка: Великі заголовки можуть добре працювати на ширших макетах, але на менших екранах вони можуть займати багато вертикального простору і тому вимагають додаткової прокрутки. Оскільки довжина ліній змінюється, ви також повинні враховувати висоту ліній та інші друкарські обробки.
- Посилання: Як ваш дизайн працюватиме на сенсорних пристроях? Хоча ми ще не маємо простого способу виявити їх (тобто ми повинні враховувати всі аспекти нашого дизайну), проектування вужчого екрану може дати нам можливість подумати про цільові області для посилань та інших інтерактивних елементів . Рекомендації iOS рекомендують, щоб вони мали розмір не менше 44 пікселів / точки, що є гарним показником.
- Навігація: Це, мабуть, буде найбільш незручним компонентом будь-якого адаптивного дизайну, особливо якщо ваш сайт має багато розділів і глибоку ієрархію. Бред Фрост написав короткий виклад деяких різних підходів до навігації, які зараз розглядаються.
- Зайвий вміст: Якийсь вміст не потрібен? Чи потрібно лише для певного сценарію показувати інший вміст? Я не виступаю за приховування вмісту на основі того, яким пристроєм користувач користується, але такі методи, як умовне завантаження (яке ми розглянемо пізніше цього тижня), можуть допомогти нам обслуговувати менші сторінки, які лише завантажують додатковий вміст, коли це потрібно.
Розробка двох контрастних макетів підкріплює ідею про те, що дизайн адаптується, одночасно випрасуючи потенційні проблеми. Хоча це звучить як подвоєння роботи, майте на увазі, що ми не розробляємо кожну сторінку з точністю до пікселів. Натомість ми зосереджуємося на створенні масштабованої мови дизайну - такої, яка буде розвиватися, коли ми почнемо впроваджувати її в коді, і такої, яка базується на окремих модулях та компонентах.
Ставши макетом агностиком
Не дивно, що для галузі, яка історично ставилася до Інтернету як до друку, макети з фіксованою шириною пронизували багато результатів, які ми виробляємо. Починаючи розробку адаптивного середовища, розглядаються нові підходи, які дозволяють нам вирішувати проблеми та обмінюватися ідеями, визнаючи плавну природу середовища. Ось кілька моїх улюблених:
- Схеми опису сторінки: Хоча дротові кадри часто можуть передбачати макет (і, таким чином, припускати певний тип пристрою), схеми опису сторінок видаляють це припущення і замість цього описують окремі компоненти, розташовані в документі з точки зору пріоритету.
- Стиль плитки: Спілкуючись із дизайнерськими ідеями з клієнтами, ми можемо виявити, що представляємо «картини веб-сайтів». Якщо ми не будемо обережні, клієнти справедливо попросять побачити концепції, які демонструють, як дизайн буде виглядати на інших пристроях. Це може привести нас до нестабільної ситуації створення кількох сторінок для декількох пристроїв. Саманта Уоррен задумалася над цією проблемою і придумала стиль плитки. Вони розташовуються десь між дошкою настрою (але менш розмитою) та повністю реалізованими компіляторами (але менш точними) і допомагають нам обмінюватися типографікою, стилями кнопок та обробкою верхівки. Вони також заохочують більш зрілий рівень обговорення з нашими клієнтами.
- Гра дизайну Mobilify: Ця вправа може працювати дуже добре під час спільних майстер-класів з дизайну. У цій вправі кожен записує на Post-it відзначає елементи, які можуть з’являтися на певній сторінці. Потім вони приклеюються до стіни в порядку важливості, ніби вони здаються лінеаризованими на мобільному телефоні. Результат обговорення може дати деякі дивовижні висновки. Наприклад, ви можете усвідомити, що навігація - не найважливіший компонент на сторінці. Це може слідувати до дизайну, де пропущене посилання у верхній частині сторінки посилається на навігацію в нижньому колонтитулі.
Звичайно, є ще місце для інструментів, якими ми вже користуємось, але, розробляючи веб-сайт у загальних рисах, ми повинні пам’ятати, що макет вже не відомий.
Кодування поступово
На щастя, нам не потрібно турбуватися про візуальний дизайн у тому прикладі, над яким ми працюємо, оскільки важка робота була виконана для нас! Натомість ми можемо зосередитись на кодуванні нашого дизайну на повністю адаптивному веб-сайті.
Ще одна річ, перш ніж ми почнемо. Важливо пам’ятати основний принцип середовища, з яким ми працюємо: універсальність. Це означає не лише створення сучасних пристроїв із підтримкою Інтернету, але і забезпечення сумісності з пристроями вчора та завтра. Джон Олсопп описав, чому цей принцип важливий у своєму дописі «Наступні 6 мільярдів»:
"Ці наступні шість мільярдів - це діти в сільській Індії, Африці, Китаї, де доступ до електромереж та мереж може бути переривчастим. Це хтось на Суматрі в десятилітній коробці Вінтел. Це люди, які говорять на сотнях різних мов, з десятками різних системи письма. Це люди, які першими у своїй родині вміють читати та писати. Це 20 відсотків людей у всьому світі, які не вміють читати та писати.’
Ми можемо простежити наше розуміння Інтернету, дивлячись на різні моди (для кращого слова), які закріпились у нашій професії: веб-стандарти, доступність, ненав’язливий JavaScript ... все це варіанти на одну тему: прогресивне вдосконалення. Те саме стосується адаптивного веб-дизайну. Для побудови по-справжньому адаптивний веб-сайт - це створити веб-сайт, який не тільки є сумісним із зворотною стороною, але й зручним для майбутнього.
Занурення в націнку
Гаразд, досить преамбули, настав час відкрити текстовий редактор.Наш дизайнер запропонував нам дизайн, орієнтований на настільний комп'ютер, і був люб'язним, щоб навести приклади того, як це може виглядати також у вужчому вікні перегляду.
Можливо, спокусливо кодувати їх окремо, але я пропоную інший підхід. Розмістивши окремі компоненти - або візерунки - з яких складається дизайн, на одній сторінці, ми можемо створити портфоліо зразків. Це дозволяє нам розробляти компоненти поза межами будь-якого макета сторінки, і дасть нам дещо, на що можна буде звернутися згодом для будь-якого регресійного тестування. Давайте розглянемо початкову розмітку на кількох різних пристроях:
Перегляньте наш портфель розмічених візерунків
Ну, я буду проклятий - ми вже маємо адаптивний веб-сайт! Наш вміст адаптується до обмежень кожного пристрою, будь то вигадливий новий iPad або відмовлений функціональний телефон. Він навіть працює в текстовому браузері, як Lynx.
Завдяки основним принципам універсальності веб є реагує за замовчуванням. Це чудово, але це також означає, що все, що ми робимо з кодом відтепер, може скомпрометувати цю власну адаптованість.
Завтра: Ми ступимо обережно і почнемо застосовувати перший аспект адаптивного дизайну: типографіку та текучі сітки.
