Як створити адаптивний дизайн сайту, що орієнтований на мобільні пристрої

Фото Roger Schultz’s

Дана стаття — переклад англомовної «How to Design a Mobile Responsive Website» автора Elaine Simpson.

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

Враховуючи прогнози, за якими в США до 2015 року користувачів мобільним інтернетом буде більше, ніж тих, хто використовує для доступу в Інтернет стаціонарні комп’ютери, а також зважаючи на велику популярність планшетів та навіть перегляду інтернету через телевізори, важливим постає питання розробки сайту таким чином, щоб у користувачів не виникало труднощів і незручностей в незалежності від того, яким пристроєм вони користуються для доступу в мережу. Отже, чи може в цьому випадку допомогти гнучкий дизайн? Так, адже саме він надає можливість створити єдине універсальне рішення для різної ширини екрану. Використовуючи відповідні методи, ви зможете надати мобільному користувачу той самий контент, але вже у відповідно пристосованому для перегляду на його пристрої вигляді.

Чому потрібно створювати саме гнучкий веб-сайт?

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

Коли ви починаєте «з нуля»

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

Ви не хочете витрачати багато коштів

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

Ви хочете, щоб веб-сайт працював добре навіть тоді, коли з’являться нові мобільні пристрої

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

Процес

Давайте розглянемо процес створення гнучкого веб-сайту на прикладі готельного Macdonald Hotels, що був представлений минулого вересня агенцією «Equator». Macdonald Hotels — Британська мережа, яка налічує 47 готелів. Для них було створено новий веб-сайт, який включав нову структуру, вичерпну інформацію про готель та нову можливість онлайн-бронювання. Нижче наводяться ключові кроки, які були здійснені в роботі над проектом:

1. Дослідження та приорітети. Розуміння того, яким додатковим вимогам повинен відповідати гнучкий веб-сайт;
2. Прототипування. Створення модульної структури сайту та його макетів у відповідності до різної ширини екрану;
3. Зовнішній вигляд. Вирішення стилістичних питань;
4. Верстка сайту. HTML та CSS.

Дослідження та пріоритети

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

Які цілі користувачів на різних пристроях?

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

Якими технічними інструкціяи потрібно керуватися, працюючи над функціональністю і контентом?

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

Прототипування

Логіка зміни стилів може спочатку здатися тяжкою для визначення і може трапитись так, що правильна відповідь прийде вже в момент написання сайту. Але починати з чогось треба, тому пропонуємо розглянути 3 базових ширини екрану: настільний комп’ютер, iPad та iPhone. У випадку з нашим веб-сайтом це задовольнило вимоги, але для когось цього може бути недостатньо і вам можуть знадобитись інші варіанти ширини.

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

Початок

Для початку визначіть модульну сітку для кожної ключової ширини. Ми створили три сторінки для наступної ширини екранів: 1024px (робочий стіл), 768px (портретний режим для iPad), 320px (портретний режим для iPhone). Далі потрібно визначити структуру сітки для кожної заданої ширини.

Дуже проста модульна сітка з однаковими по ширині колонками на кожному із прототипів допомагає нам планувати положення компонентів при зміні ширини екрану.

Створення головного шаблону

Одразу після створення прототипу необхідно подумати про колонки і про те, яким чином компоненти будуть адаптуватись до зміни ширини екрану. Що буде відбуватись, якщо у вас буде менше місця? Як наповнити чотири колонки? Що відбудеться, якщо на екрані буде лише три із них? При виконанні даного завдання повинен бути постійний зв’язок між дизайнером і розробником сайту, щоб проблеми та питання між зовнішнім виглядом та CSS могли бути оперативно вирішені.

Головна сторінка

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

Головне меню

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

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

«Підвал» сторінки

Продумати низ сторінки найпростіше — просто вирішіть, який контент вам потрібен і в якому порядку він повинен бути один під одним при зменшеній ширині екрану.

Інші компоненти

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

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

Тестуйте сайт відразу

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

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

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

Зовнішній вигляд

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

Стиль сторінки

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

Підбір шрифтів

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

Верстка сайту

Робота з HTML та CSS є окремим складним питанням, тому ми не будемо описувати тут всі деталі, а лише надамо декілька нюансів, які варто взяти до уваги:

1. Зменшення розміру малюнків. Сайту потрібно завантажувати малюнки в повному розмірі навіть тоді, коли CSS зменшує їх, тому намагайтесь зменшити розміри ваших малюнків настільки, наскільки це максимально можливо зробити. Ви також можете використовувати різноманітні JavaScript-прийоми, які призначені згладити роботу сайту. В нашому випадку ми завантажили малюнки невеликого розміру, але використали JavaScript для збільшення їх у випадку, коли це необхідно.
2. Використовуйте сучасний CSS. Важливо переконати клієнта у використанні сучасних CSS-стилів, надавши їм (стилям) можливість спрощуватись відповідно до можливостей браузера. Це допоможе вам зменшити час завантаження сайту.
3. Постійна комунікація між усіма членами команди — обов’язкова. Робота над проектом буде проходити значно продуктивніше, якщо між дизайнером та розробником буде триматись постійний зв’язок. Це дозволить вчасно і результативно вирішувати виникаючі питання.

Варто, також, переглянути відео Джемі Бойда, який і виконав вищеописану роботу із веб-сайтом Macdonald Hotels.

То що це все означає?

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

Переклала Irina Burt, спеціально для Продизайну.