Пам’ятаєте Інтернет зразка 1997? Сторінки проектувалися для моніторів з низькою роздільною здатністю та повільних модемів. Текст домінував у Інтернеті, а зображення, що зрідка зустрічаються, у форматах JPEG і GIF лише прикрашали сторінки. Найчастіше ми їх навіть не бачили, оскільки відключення завантаження зображень було одним із вірних способів трохи прискорити роботу dial-up модему. Більше десятиліття весь ландшафт Інтернету змінився. Широкосмуговий доступ через кабельні та DSL-підключення став стандартом у розвинених країнах, а веб-сторінки можуть використовувати складніші елементи – безліч зображень, ефекти прозорості та навіть відео – для доставки контенту. Ми можемо навіть транслювати цілі фільми з Інтернету на наші комп’ютери, не чекаючи на завантаження файлів!
Незважаючи на масштабний перехід до моніторів з високою роздільною здатністю, широкосмуговими швидкостями та витонченими графічними можливостями, другий тренд вплинув на Всесвітню павутину в її сучасному вигляді. У міру того, як технології телефонів ставали більш досконалими та доступними, смартфони перетворилися на невід’ємну частину інтернет-досвіду. Мобільні пристрої є ключовим шлюзом в Інтернет для мільйонів користувачів, що не мають персональних комп’ютерів. Наприклад, в Індії використання популярного веб-браузера Opera Mini зросло на 300 відсотків у період із березня 2010 по березень 2011 року. У багатьох регіонах світу вікном в Інтернеті є не 23-дюймовий монітор, а 3-дюймовий екран телефону. Навіть дешеві «тупі» телефони без сенсорних екранів або потужного обладнання можуть переглядати Інтернет.
На сцену виходять мобільні веб-сайти. Оскільки популярність мобільного Інтернету збіглася за часом з появою високошвидкісного інтернет-доступу та потужнішого комп’ютерного обладнання, розробники онлайн-контенту зіткнулися з унікальним завданням. Веб-сайти, створені для великих моніторів, швидких комп’ютерів та швидкого Інтернету, сильно спираються на графіку та передові програмні рішення, які не завжди працюють на невеликих екранах та повільних мережах мобільних пристроїв. Рішення полягає в мобільних веб-сайтах — сторінках, спеціально адаптованих для роботи на невеликих пристроях та доставці важливого контенту при скороченні графіки, що уповільнює завантаження сторінок. Хоча мобільні веб-сайти навмисно простіше повних версій, це не означає, що їх легко створювати. Мобільні веб-сайти, як і раніше, вимагають уваги до дизайну та технологій, а суворі обмеження мобільного обладнання не полегшують завдання.
Чому мобільним веб-сайтам потрібні особливі дизайнерські рішення
Перехід від настільного браузера до мобільного – це не просто зменшення екрану. Це рятування від зайвого шуму. Коли ви проектуєте мобільний веб-сайт, ви не просто робите менші елементи. Ви переосмислюєте те, що справді важливо.
Користувачі настільних комп’ютерів очікують на візуальну привабливість. Вони мають пропускну здатність і кількість пікселів, щоб це витримати. Мобільні користувачі? Чи не настільки. Користувач із підключенням 3G у сільській місцевості не чекатиме на завантаження головного банера. Йому потрібний текст. Йому потрібні дані. Якщо ви нав’язуєте мобільного пристрою досвід, що відповідає настільному рівню, ви не виявляєте інноваційність. Ви стаєте перешкодою.
Це створює специфічну проблему розробників. Як збалансувати потребу у насиченому контенті з реальністю обмежених ресурсів?
Основні обмеження мобільного веб-дизайну:
- Екранний простір обмежений. 3-дюймовий екран не може відображати ту саму компоновку, що й 23-дюймовий монітор. Навігація має бути інтуїтивно зрозумілою, а не розгонистою.
- Потужність обладнання сильно варіюється. Хоча смартфони стали потужними, базові телефони, як і раніше, існують. Код, який плавно працює на iPhone, може задушити пристрій Android початкового рівня або кнопковий телефон.
- Нестабільність мережі – це норма, а не виняток. На відміну від стабільного широкосмугового підключення будинку, мобільні мережі піддаються коливанням. Тяжкі ресурси вбивають час завантаження.
Це ходіння канатом. Якщо ви приберете занадто багато, сайт виглядатиме зламаним. Якщо залишите занадто багато, він завантажуватиметься так само повільно, як у 1998 році.
«Мобільні веб-сайти навмисно простіші за повні версії, але це не означає, що їх легко створювати».
Не йдеться про
Дизайн диктує доступний простір екрану
Все зводиться до квадратних дюймів. Або, точніше, до їхньої нестачі.
Навіть найбільші екрани смартфонів — ті, діагональ яких перевищує чотири дюйми (10,2 см), виглядають як поштові марки поряд із настільним монітором. Цифри дозволу можуть зростати, але закони фізики не обдуриш. Висока кількість пікселів на крихітному дисплеї все одно не дозволяє відобразити повноцінний веб-сайт розбірливо. У результаті ви щипаєте екран для масштабування, борючись з багатоколоночним макетами, які перетворюють навігацію в гру «бий по мухам, що вискочили».
Хороший мобільний веб-дизайн – це не зменшення настільного сайту. Це про початок з чистого листа та використання одноколонкових макетів.
Це означає зведення лише один вертикальний потік. Ви змінюєте посилання навігації. Ви прибираєте декоративне сміття. Ви звужуєте основну колонку, щоб вона відповідала реальній ширині телефону. Більшість моніторів – це широкі прямокутники. А телефони? Це високі смуги. Так, ви можете повернути пристрій до альбомної орієнтації, але за промовчанням використовується портретна орієнтація. Спочатку проектуйте для тонкої лінії.
Потім є проблема способу введення.
Настільні браузери покладаються на мишу. Наведіть курсор на меню, і з’явиться список, що випадає. Спробуйте це зробити великим пальцем. Чи не працює. Мобільний веб-дизайн вимагає переосмислення цих станів при наведенні. Меню потрібно натискати, а не наводити курсор. Кнопки мають бути досить великими для пальця, а чи не для точного курсора. Якщо ваш сайт покладається на ефекти під час наведення, він вже зламаний на мобільних пристроях.
Кошмар фрагментації пристроїв
Розробка для настільних комп’ютерів і така складна. У вас є Internet Explorer, який влаштовує істерики, Firefox, що робить свою справу, і Chrome, що пожирає всю оперативну пам’ять. Але мобільна технологія? Це зовсім інший звір.
Різноманітність апаратного забезпечення вражає. На одному кінці спектру знаходяться «тупі» телефони з крихітними екранами низької роздільної здатності та базовими браузерами. На іншому — смартфони з чіткими сенсорними дисплеями високої роздільної здатності та потужними процесорами.
Один розмір не підходить усім. Іноді потрібні окремі інтерфейси.
Подивіться на Facebook. Він не просто віддає той самий HTML-код усім підряд. Він визначає, який пристрій ви використовуєте. Якщо у вас є iPhone або Android, ви отримуєте адаптований досвід, оптимізований для конкретного екрана та можливостей браузера. Якщо у вас кнопковий телефон, ви отримуєте полегшену версію.
Одного мобільного сайту недостатньо. Потрібно проектувати з урахуванням пристрою, а не лише браузера.
Ця логіка визначення – міст між користувачем та правильним інтерфейсом. Це технологія, яка робить можливим дизайн.
Розумніше, а не простіше
Спрощення інтерфейсу значить спрощення досвіду. Насправді, для певних завдань мобільні пристрої можуть бути потужнішими за настільні.
У смартфонів є апаратні компоненти, яких немає у ПК. Камери. GPS. Акселерометри.
QR-коди – ідеальний приклад. Наведіть камеру на код, і він миттєво відкриє веб-сайт або завантажить програму. Не потрібно вводити URL-адресу. Не треба шукати. Просто відскануйте та дійте.
Карти використовують дані GPS, щоб надавати вам маршрути в реальному часі або рекомендації ресторанів на основі вашого точного розташування. Це не просто “менший сайт”. Це інший інструмент.
Створення ефективного мобільного сайту потребує розумного використання цих технологій на сервері. Це не тільки про CSS та HTML. Це про використання самого пристрою. Дизайн та технології — дві сторони однієї медалі. Не можна мати одне без іншого.
Давайте подивимося ближче, як відбувається це визначення. Як Facebook дізнається, що ви на iPhone, а не на старому Nokia?
Забезпечення мобільного досвіду: виявлення, піддомени та вибір користувача
Ви бачите чисті лінії та читаний текст. Це просто. Під капотом — хаос із хитрої інженерії. Сучасний веб-дизайн спирається на каскадні таблиці стилів або CSS. Цей код визначає шрифти, кольори, відступи та ширину сторінки. Контент зберігається в базі даних або HTML-файлах. CSS вирішує, як цей контент виглядатиме.
Кожна згадана раніше зміна дизайну відбувається тут. Щоб зробити мобільний сайт швидким, ви замінюєте фонове важке зображення суцільним кольором. Це заощаджує пропускну спроможність. Це змушує сторінку завантажуватись швидше.
Створення сайту – це перший крок. Залучення людей до його використання другий крок. Немає єдино правильного способу надання мобільного сайту. Існує кілька варіантів.
Найпростіший метод – це посилання. Ви розміщуєте її на повному сайті. Вона говорить: “Перегляд мобільного сайту”. Часто розробники використовують піддомен, наприклад m.website.com. Це легко розпізнати. ‘Website.com’ веде на десктопну версію. m.website.com веде на мобільну версію. Деякі сайти використовують i.website.com через iPhone. Код працює однаково.
Деяким користувачам доводиться вручну вводити m.website.com. Більшість сайтів автоматизують цей процес.
Як мобільні сайти визначають ваш пристрій
Інші техніки складніші. Багато веб-сайтів автоматично визначають тип вашого пристрою. Вони вирішують, який файл CSS надати на основі вашого обладнання.
Це відбувається шляхом запиту пристрою. Сервер перевіряє ідентифікуючі фактори, такі як ширина екрана в пікселях. Він зчитує рядок user agent. Цей рядок повідомляє, який браузер завантажує сторінку.
Медіа-запити — це рядки коду CSS. Вони посилаються на рядок user agent. Вони виділяють конкретні фактори, що ідентифікують. Якщо user agent ідентифікує себе як мобільний браузер із вузьким екраном, сервер завантажує мобільну сторінку.
Цей метод має недоліки. Деякі браузери дозволяють підробляти рядок user agent. Нові браузери постійно випускають нові рядки. Сервери зазвичай відправляють правильний сайт на правильний пристрій. Але це ідеально.
Ця система ідентифікації пов’язані з іншим варіантом. Дайте користувачеві вибір. Перейдіть на IMDB.com із телефону. Він автоматично завантажує мобільний веб-сайт. Він також пропонує вам завантажити мобільний додаток. Програма пропонує більше функцій.
Переваги та недоліки мобільних браузерів
Мобільні сайти зазвичай працюють краще за повні сайти на смартфонах. Вони спеціально створені для маленьких екранів. “Один розмір підходить всім” рідко працює.
Але “краще” – поняття відносне. Мобільні сайти пропонують обмежений досвід. Вони враховують обмеження пристроїв. Навігація часто зникає. На екрані недостатньо місця, щоб тримати меню видимим весь час.
Взаємодія з сайтом – найскладніша частина мобільного перегляду. Прокручування форми введення займає час. Вибір полів стомливий. Друк на телефоні повільніший, ніж на комп’ютері. Сенсорні екрани та програмні клавіатури посилюють це.
Браузери телефонів можуть зберігати файли cookie. Вони запам’ятовують паролі, як десктопні браузери. Це допомагає. Браузери з десктопними аналогами, такі як Firefox для Android та Opera Mobile, можуть синхронізувати дані. Ви переносите свої збережені дані з комп’ютера. Це полегшує перегляд на обох платформах.
У телефонів також є хитрощі. Щипок масштабування збільшує текст. Тап для масштабування налаштовує абзац під ширину екрана.
Чому Flash-відео не працює на мобільних пристроях
Flash-відео входить до кожного обговорення мобільного перегляду. Воно потребує багато ресурсів процесора. Воно розряджає батарею. Воно покращилося за роки. Воно працює на багатьох пристроях.
Воно не працює на жодному пристрої Apple.
Apple блокує Flash-відео в iOS. Натомість вони підтримують відео HTML5. YouTube використовує відео HTML5. Багато інших сайтів також.
Ви можете вбудовувати Flash-відео на мобільні веб-сторінки. Це суперечить принципам мобільного дизайну. Простота – найбільша сила мобільних сайтів. Вони швидко завантажуються, тому що використовують текст і маленькі зображення. Flash порушує це.
Розміщення Flash на вашому сайті обмежує користувачів iPhone. Вони не можуть взаємодіяти зі сторінкою. Ви втрачаєте більшу частину своєї аудиторії.
Мобільні покупки: чи дійсно вони безпечніші, ніж покупки з комп’ютера?
Ось несподіваний поворот. Ваш телефон може бути безпечнішим місцем для введення даних кредитної картки.
Більшість веб-вірусів орієнтовані на Windows. Вони не працюють на iOS або Android. Ви насправді невидимі для величезної частини шкідливого програмного забезпечення просто тому, що не користуєтеся ПК. Сучасні телефони підтримують HTTPS та шифрування SSL так само, як і ваш ноутбук.
Але не розслаблюйтесь.
Вам, як і раніше, потрібно стежити за адресним рядком. Шукайте значок замка. Використовуйте лише перевірені сайти. Якщо сайт виглядає підозріло на комп’ютері, він виглядатиме підозріло і на телефоні. Просто у меншому масштабі. Ландшафт загроз змінюється, але принцип залишається незмінним. Обережність краща за жаль.
Особливості дизайну мобільних сторінок
Що таке дизайн мобільних сторінок?
Це не просто зменшена копія веб-сайту. Це специфічна оптимізація для сенсорних екранів та вузьких областей перегляду. Думайте про менше. Простішим. Без зайвого галасу.
Сайти для настільних комп’ютерів покладаються на наведення курсору миші та точні кліки. Мобільні пристрої покладаються великі пальці рук. Це змінює все. Кнопки стають більшими. Меню ховаються. Контент розставляється за пріоритетами. Якщо ви намагаєтеся прочитати щільний абзац на екрані розміром 6 дюймів, ви боретеся з пристроєм. Хороший мобільний дизайн запобігає цій боротьбі ще до її початку.
Мобільні сайти проти традиційних сайтів
Люди постійно плутають ці терміни. Давайте розмежуємо їх.
Стандартний веб-сайт призначений для настільних комп’ютерів. Клавіатури. Миші. Великі монітори. Він припускає, що у вас є пропускна здатність та терпіння.
Мобільний сайт створений для смартфонів та планшетів. Він позбавляється зайвого. Функції, які не працюють на сенсорних екранах, видаляються. Зображення стискаються. Скрипти полегшуються.
Різниця має значення.
Чому? Тому що мобільні сайти завантажуються швидше. Вони споживають менше даних. Це не просто зручність для користувачів Apple у Манхеттені. Це необхідність для людей у країнах, де високошвидкісний інтернет — це розкіш, а не базова послуга. Якщо ваш сайт важкий, вони не зможуть завантажити його. Крапка.
Чому важливий мобільний дизайн
Все зводиться до тертя.
Огляд із настільного комп’ютера ефективний. Мобільний перегляд зручний. У вас є інтернет у кишені. Але друкувати на скляному екрані втомлює.
Хороший мобільний дизайн змушує цю стомлюваність зникнути. Він шанує ваш час. Він поважає Ваш тарифний план на дані. Він враховує той факт, що ви, ймовірно, ходите, поки користуєтесь пристроєм.
Тут також працює реклама. Але гігантські спливаючі вікна? Ні. Більшість мобільних браузерів їх все одно блокують. Google AdSense підходить ідеально. Невеликий. Чи не нав’язливий. Релевантний.
Мобільний веб – це не урізана версія веб-сайту для настільних комп’ютерів. Це інший звір. Ставтеся до нього відповідно.
