Дизайн веб-сайту для мобільних пристроїв є складним, оскільки одна мобільна версія сайту може не бути сумісною з усіма пристроями. Дизайнери повинні бути в курсі найкращих практик дизайну, щоб зробити вашу мобільну присутність значущою та корисною.
Існує безперервна дискусія серед веб-розробників про те, який шлях створення мобільного оптимізованого сайту є найкращим. Існує три основні методи розробки мобільного веб-сайту.
Це:
- Чуйний веб-дизайн.
- Спеціальні мобільні веб-сайти.
- RESS: Програмування на сервері надає CSS і HTML, залежно від типу пристрою.
Кожен метод має свої плюси і мінуси. Веб-розробник повинен знати про кожну техніку для реалізації найкращого для ситуації.
3 способу розробки мобільного веб-сайту
Адаптивний веб-дизайн (RWD)
RWD спирається на запити засобів масової інформації CSS3 для вирівнювання компонування веб-сторінки з розміром області перегляду пристрою. Цей же код HTML використовується для представлення різних макетів веб-сторінок для планшетів, мобільних пристроїв, настільних комп'ютерів та інших гаджетів.
Переваги:
- Ваш веб-сайт матиме подібний вміст і розмітку HTML, тому відвідувачі з мобільних пристроїв матимуть такий же досвід, незалежно від того, який пристрій вони використовують.
- Одна URL-адреса полегшує користувачам посилання на вміст і надає доступ до нього. (Якщо веб-сторінка доступна за більш ніж однією URL-адресою, користувачі можуть заплутатися.)
Недоліки:
Неможливо окремо оптимізувати мобільний вміст. Тому дизайнер, який використовує RWD, не може пристосувати вміст окремо для мобільних користувачів.
Згідно з даними січня 2013 року з архіву HTTP, середня веб-сторінка становить близько 1,3 МБ. Однак більшість ділянок RWD є порівняно більшими. Цей більший розмір зменшує продуктивність мобільних сайтів, роблячи їх повільнішими.
Користувачі мобільних пристроїв більш налаштовані на шаблони дизайну інтерфейсу для мобільних пристроїв. Більш того, мобільні користувачі звикли до багатозадачності. Якщо структура навігації не налаштована для певних пристроїв, користувачі можуть зіткнутися з проблемами при одночасному виконанні декількох завдань.
Виділені мобільні сайти
Цей метод покращує досвід користувачів мобільних пристроїв, створюючи повністю окремий веб-сайт.
Переваги:
- Простота керування: Для мобільних і настільних сайтів потрібні окремі зміни. Внесені зміни обмежені кожною відповідною версією. Це означає, що зміни, призначені для мобільної платформи, не можна отримати з робочого столу.
- Під час розробки веб-сайту для мобільних пристроїв стає легше спростити та оптимізувати його спеціально для цієї аудиторії.
- Структуру вмісту та навігації можна налаштувати для мобільних користувачів.
Недоліки:
Обмін веб-сторінкою через соціальні медіа стає більш складним, оскільки для виділених мобільних сайтів існує кілька URL-адрес для сторінок. Коли користувачі настільних ПК натискають URL-адреси для мобільних пристроїв, які спільно використовуються на соціальних мережах, вони можуть випадково отримати мобільну версію сайту, а не версію настільного ПК.
Щоб уникнути дублювання контенту, веб-розробник повинен використовувати met = теги rel = ”alternative” та rel = ”canonical”. Якщо мобільний користувач здійснює пошук у Google і натискає URL-адресу робочого столу, користувач перегляне версію настільного ПК або буде перенаправлено до мобільної версії веб-сторінки. Якщо мобільна версія не існує, користувач отримає повідомлення про помилку.
Створення абсолютно іншого веб-сайту для користувачів мобільних пристроїв означає, що сайт буде спеціально розроблений для користувачів мобільних пристроїв. Однак для виконання цієї мети веб-розробникам доводиться вирізати функціональність і вміст, що для них виявляється кошмаром.
Чуйний веб-дизайн+ Компоненти на стороні сервера (RESS)
Цей метод залежить від програмного забезпечення на стороні сервера для забезпечення користувацьких HTML і CSS для різних пристроїв. Код для користувачів мобільних пристроїв буде відрізнятися від коду користувачів настільних ПК.
Основною метою цієї реалізації є поліпшення ефективності веб-сайту. Цей метод добре працює в поєднанні з адаптивним веб-дизайном. Тому цю реалізацію можна назвати Responsive Web Design + компонентами на стороні сервера (RESS).
Переваги:
- Структура навігації може бути налаштована для різних завдань, що виконуються настільними та мобільними користувачами.
- Розробники можуть видалити елементи сторінки з HTML і CSS для досягнення бажаного відображення.
- Можна видалити непотрібний JavaScript з HTML, який звільняє ресурси процесора, пам'ять і кеш мобільних пристроїв.
Недоліки:
- Динамічний HTML збільшує навантаження на сервер.
- На виявлення пристрою не можна покладатися.
- HTML та CSS оптимізовані для мобільних пристроїв. Версія для робочого столу використовує більше HTTP-запитів і Java-скриптів.
Який метод вибрати?
Рішення розробити оптимізований для мобільних пристроїв сайт залежить від продуктів, які ви продаєте, вашої цільової аудиторії, необхідних інвестицій, конкуренції, коефіцієнтів конверсій і т.д. Метод проектування, який найкраще працюватиме, багато в чому залежить від форматів екрану, операційних систем, браузерів і резолюцій.
Більшість сайтів, що реагують на веб-дизайн, не реалізуються оптимально і в результаті ці сайти потребують більше часу для завантаження. Оскільки конкуренція запекла, ви можете втратити клієнтів, якщо ваш сайт працює повільніше. Користувач просто перейде на інший веб-сайт, який відкриває менше часу. Незважаючи на те, що можна створювати веб-сайти з меншими термінами завантаження з виділеними мобільними сайтами, до цієї реалізації також притаманні різні недоліки.
RESS надає переваги RWD для подолання двох основних недоліків. Основним недоліком RESS є те, що виявлення пристрою є ненадійним. Необхідно часто перевіряти нові пристрої, щоб переконатися, що процес продовжує працювати належним чином.
Є такі служби, як DeviceAtlas, WURFL та інші, які можуть виявляти нові пристрої. Це допоможе оновити нові пристрої у вашій базі даних.
Мобільний веб-дизайн успішний лише тоді, коли веб-сайт відображається належним чином на мобільному пристрої. Незважаючи на те, що для дизайнерів це завдання складно представити всі найважливіші частини сайту на робочому столі в невеликому вікні мобільного пристрою, кожен день з'являються нові методи, які роблять веб-сайти для мобільних пристроїв кращими, швидшими та більш повнофункціональними.
Фото з мобільного веб-сайту через Shutterstock
15 Коментарі ▼
