5 золотих правил «адаптивного» веб-дизайну

Дизайн, орієнтований на контент

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

При наявності контенту вже можна експериментувати з тим, як все буде виглядати - будувати каркас для контенту. Цей термін був запропонований Стівеном Хеєм в книзі Responsive Design Workflow, що має на увазі використання базових прямокутних блоків для створення макета для контенту.

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

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

Обмеживши дизайн до однієї колонки, можна вже думати про ієрархію контенту на сторінці. Яка ж найбільш важлива інформаційна складова сторінки? Де має розташовуватися головний заклик до дії? Чи є сенс в прочитанні сторінки від початку до кінця?

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

А після підкоригувати розкладку сторінки, щоб вона відповідала новій ширині, додавши колонку, наприклад, для бічній панелі.

Дизайн «в браузері»

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

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

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

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

Не турбуйтеся про те, що ви, можливо, не є чарівником зовнішніх інтерфейсів, адже існують інструменти, що дозволяють робити прототипи (Macaw, Webflow і Adobe Edge Reflow). Ви також можете скористатися порадою якогось розробника, але є думка, що спочатку краще освоїти ази - це допоможе скласти уявлення про процес побудови адаптивного веб-дизайну.

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

Припустимо, що в наявності є 20 макетів Photoshop (або Fireworks), кожен з яких в трьох варіантах (для десктопа, планшета і мобільного пристрою), а завдання в тому, щоб оновити стиль кнопок для сайту, або елементи навігації. Це означає, що необхідно обробити 60 сторінок для зміни стилю, коротше кажучи, робота дуже трудомістка.

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

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

Розробка бібліотеки патернів

Одна з ключових особливостей практично всіх RWD-проектів - гід по стилю. Він, як правило, включає основні стилі для проекту і інтерактивні положення всіх модулів.

На даному етапі необхідно визначити кожен з патернів досвіду взаємодії.

В Fireworks застосовуються символи і стилі для загальних компонентів і модулів. Для гарного дизайну необхідно проілюструвати, яким чином кожен з модулів буде адаптований до обраними контрольним точкам.

Розробник Бред Фрост запропонував концепцію Atomic Web Design, для її опису він використовує частково наукоподібну термінологію. Основні стилі бренду він називає атомами, складовими фундамент дизайну. Такі речі, як колір, шрифт і іконки співвідносяться з базовими елементами HTML для формулювання «молекул». Молекули використовуються для створення «організмів». Взяти, приміром, кнопку пошуку. В даному випадку до кнопки може бути додана форма введення і лейбл.

Потім відбувається змішання з іншими організмами для створення «шаблонів», наприклад, заголовків. У свою чергу, шаблони дозволяють вже сформувати сторінки - і вуаля! У вас є Atomic Web Design.

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

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

універсальність

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

Дизайн повинен адаптуватися до будь-якого оточення. Нижче перераховані моменти, які можуть виявитися корисними.

перевірений метод

Більшість сучасних мобільних девайсів оснащені тачскріном, тому необхідно враховувати розмір інтерактивних елементів інтерфейсу. Немає єдиної думки про ідеальну площі смартфона для натискання. Інженери Apple вибирають 44px, люди з Microsoft стверджують, що 34px краще.

Можливо, використання 48px видається більш практичним при розробці інтерактивних елементів. Для кожної області залишаються як мінімум 6px, і зазвичай 12px - для базового рівня. В епоху загального проектування і великих розмірів багато сьогоднішніх сайти залишають трохи більше місця для десктопів. Ці збільшені в обсязі елементи повинні також використовуватися в формах - для простоти і відповідності мобільним девайсам. Деякі вважають за краще проектувати власні розширені поля форм для відповідності зі стилем сайту.

Але стосовно до мобільних пристроїв рекомендується по можливості використовувати «рідні» засоби управління. Клавіатури і меню, що випадає повинні бути оптимізовані для конкретного девайса. І ще один момент: приберіть виділення посилання при наведенні курсору для мобільних пристроїв.

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

Навігація

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

Jump links

Одна з найпростіших і найбільш універсальних технік для мобільного навігації - jump link menu. Це по суті посилання-анкор, яка надає користувачеві меню в нижній частині сторінки.

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

Випадаючий список

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

У деяких елементах навігації для такої мети може використовуватися графічний елемент «Гармошка», це дозволяє переглянути рівні навігації, без завантаження кожної зі сторінок.

без канви

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

На таких сайтах, як Teehan + Lax і Squarespace, описана техніка використовується як єдиний метод навігації. Є думка, що незабаром вона стане трендом в RWD.

Мобільні версії сайтів, орієнтовані на виконання завдань

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

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

З тієї причини, що користувачі мобільних пристроїв, як правило, знаходяться в русі і мають у своєму розпорядженні обмеженим часом і пропускною спроможністю, важливо щоб поверхня будь-якого елементу з розряду «заклик до дії» (банери та інше) завжди розташовувалася у верхній частині екрану, а додатковий контент - нижче.

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

Досягнення цього можливе за рахунок неухильного дотримання тематичної стратегії і ретельного обмірковування того, як буде виглядати верх сайту в додатку.

продуктивність

Неможливо передбачити, який пристрій виявиться в руках у користувача, і які можливості підключення він буде мати у своєму розпорядженні. Тому і необхідно створювати дизайн «адаптивного» сайту, тримаючи в розумі продуктивність. Ніхто не хоче витрачати час і чекати, особливо в інтернеті. Якщо сайт не завантажується в протягом декількох секунд, користувач може піти.

Якщо у сайту хороший дизайн і всі інші складові також в порядку, користувачі неодмінно зайдуть на нього знову. Основне, на що слід звернути увагу, - робити сторінки якомога більше легковагими. Більше 60% «ваги» більшості сайтів - це тільки зображення. Решта: скрипти, таблиці стилів і інші медійні елементи.

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

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

«Адаптивні» зображення

Крім зменшення розміру картинок, часом важливо, щоб різні знімки підходили для різних пристроїв. Адже величезні зображення (на сотні кілобайт) не призначені для мобільних пристроїв, у яких наявні обмеження за даними і погані можливості зв'язку 3G.

Існує безліч скриптів, які допоможуть цього досягти (Picturefill Скота Джелфі і Adaptive Images) в залежності від потреб сайту і можливостей сервера. Але не варто про це турбуватися. Веб-дизайнери зазвичай передбачають, як зображення будуть адаптовані під різні контрольні точки і девайси і вносять відповідні корективи. В ідеалі в гіді по стилям або лабораторії патернів.

усічення скрипта

Великий розмір сайту може залежати ще і від різних скриптів, таких як Javascript і додаткових CSS таблиць стилів.

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

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

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

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

Подача контенту невеликими порціями

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

Існує безліч прогресивних технік, наприклад, «load on scroll» - її використовують багато соціальні мережі щодо новинних стрічок - таким чином користувачі можуть завантажувати більше контенту, виходячи з необхідності, (замість випадкової завантаження більшого обсягу контенту при натисканні на нижню частину сторінки).

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

І на закінчення ...

Ті часи, коли веб-дизайнерам доводилося піклуватися тільки про суміщення контенту з кольором, типографськими стилями веб-сторінок і іншим, безповоротно пішли. Дизайнерський світ зазнав кардинальних змін: тепер веб-розробників не наймають, щоб лише розфарбувати деталізований каркас в типовому проекті типу «водоспад».

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

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

У цій замітці були представлені п'ять особливостей адаптивного веб-дизайну, але їх, звичайно ж, набагато більше. І до моменту, коли читач подужає цей текст, список всіляких нюансів поповниться чимось новим.

Висловлюємо подяку rusability за прекрасний матеріал.