Який варіант розробки сайту для мобільних пристроїв кращий?
Бажаєте дізнатися найкращий варіант представлення свого проєкту на мобільному пристрої? Знати переваги та недоліки використання адаптивної верстки чи окремої мобільної версії? Вам неодмінно буде корисно переглянути цю статтю.
На даний момент мобільні пристрої становлять половину всього трафіку на українських та російських сайтах. Планшети та смартфони часто використовуються для читання інтернет-статей, завантаження зображень і фото, спілкування та купівлі різноманітних товарів. В Україні вже багато компаній обзаводяться адаптивними версіями сайтів або окремими мобільними версіями, що допомагають у рази збільшити трафік. Незважаючи на те, що різні верстки мають безліч переваг, багато власників ресурсів не зацікавлені в розробці мобільної версії.
Щоб сайт добре відображався на всіх відомих пристроях, необхідно провести його розширення, яке вимагає створення адаптивної версії або окремого мобільного сайту.
У цій статті представлена інформація з спеціальних тематичних джерел, а також особистий досвід проєктування, що дозволить внести ясність у цю проблему та остаточно розставити крапки при виборі підходу в реалізації завдань адаптивності.
Трохи вступної «води»
Мобільний сайт являє собою розробку самостійної версії для роботи на мобільних пристроях. Такий сайт має незначні або кардинальні відмінності в контенті від своєї десктопної версії. Водночас використання адаптивної версії дозволяє підлаштовувати контент сторінки для кожного пристрою, при цьому змінюється положення блоків і контенту, а також взаємодія з функціональними блоками (при сенсорному управлінні).
Розробкою мобільних сервісів люди займаються протягом багатьох років. Серед перших таких був сервіс pda.yandex.ru, що містив список готових сайтів для мобільних пристроїв. Також були й «просунуті» сайти, які мали одразу десктопну версію з повним функціоналом і мобільну (зменшену), для мобільних телефонів з операційною системою Simbian, Windows Mobile та іншими. Тоді це рішення цілком задовольняло всі користувацькі вимоги.
Через деякий час популярність смартфонів досягла піку, також зросла швидкість мобільного інтернету. Усе це сприяло розвитку адаптивних версій сайтів у період з 2012 по 2013 роки. Чесно зізнаюся, спочатку я скептично сприйняв нововведення, оскільки не бачив у них особливого потенціалу. Причиною тому було широке використання в 2000-х роках так званої «гумової верстки», яка працювала за принципом зміни розміру блоків, масштабу текстів і зображень. Її актуальність була викликана наявністю широкого парку моніторів, починаючи від застарілих 640-піксельних ЕПТ, закінчуючи першими рідкокристалічними моніторами на 1280 і 1600 пікселів.
Можна сказати, що гумова верстка з часом трансформувалася в адаптивний сайт. Однак можливості адаптивного дизайну характеризуються більшою гнучкістю та складністю. Це проявляється в суттєвій зміні сайту при використанні різних пристроїв. Зміна сторінки полягає в перетворенні всіх функціональних елементів. Також можлива зміна наповнення сайту на «полегшені» елементи. Прикладом є перехід фонового відео в статичне зображення через відсутність у браузерах мобільних пристроїв автопрогравача відео. Крім того, взаємодія з сайтом також змінюється завдяки підлаштуванню меню для сенсорного управління.
Тим не менш, і сьогодні зустрічаються багато прихильників Mobile First, які проєктують сайти з пріоритетом на користь мобільної версії, де десктопна версія є лише її продовженням. «Q-SEO» більш лояльно ставиться до
розстановки пріоритетів. Враховуючи завдання та цілі кожного проєкту окремо, ми також звертаємо увагу на відмінності користувацьких сценаріїв при використанні різних пристроїв. Так, домашній комп’ютер виконує функції головного робочого інструменту, здійснюючи складні функції у вигляді передачі даних, проведення переказів і оплат. Водночас використання мобільних пристроїв є вторинним і передбачає пошук та отримання певної інформації, збереження даних тощо. Ці відмінності найчастіше впливають на розстановку пріоритетів і проєктування всіх проміжних версій сайту.
Окрема мобільна версія
Це рішення найбільш актуальне тоді, коли проєкт має хороший відвідуваний сайт, який невигідно піддавати редизайну, а потреба в мобільному сайті зростає. Окрема мобільна версія допомагає вирішувати багато завдань, задовольняючи всі потреби мобільної аудиторії. При цьому підтримка та модерація цього сайту здійснюється паралельно з основним.
Позитивні сторони дизайну:
1. Автономність. Це рішення дозволяє розробникам доповнювати та коригувати кожен сайт окремо.
2. Збільшення швидкості. Такий сайт можна легко оптимізувати під потреби мобільної аудиторії, виключаючи використання «важких» елементів, фішок і різноманітної складної анімації.
3. Практична навігація. При розробці сайту враховуються всі потреби мобільної аудиторії.
Мінуси:
1. Одночасне підтримання двох сайтів. Паралельна підтримка кількох сайтів вимагає додаткових часових витрат і фінансових ресурсів. До того ж, на спільне редагування мобільної та основної версії не завжди вистачить часу одного модератора. Пріоритет часто залишається за основним сайтом, внаслідок чого наповнення та головні розділи мобільної версії з часом дуже відрізнятимуться від десктопної.
2. Складнощі для користувачів. Окрема мобільна версія є самостійним сайтом, її наповнення та навігація можуть мати відмінності з десктопною версією. Це вимагає від користувача окремої адаптації до кожного сайту та запам’ятовування кількох варіантів пошуку інформації.
3. Зменшена версія. Головна мета мобільного сайту полягає в забезпеченні лише ключового функціоналу, що не дозволяє задовольнити всі вимоги користувача, як на десктопному сайті.
4. Додатковий адрес. У кожної сторінки є два URL: десктопний і мобільний. Як приклад наведу випадок: часто в стрічках соцмереж можна зустріти посилання на кшталт m.site.ua/article.php?id=268533. Після переходу на моніторі комп’ютера з’являється «розтягнута» версія для смартфона. Тут доцільніше було б здійснювати переадресацію користувачів на десктопний сайт.
5. Час завантаження. При відвідуванні сайту зі смартфона виконується автоматична переадресація на версію для мобільних пристроїв, що знижує швидкість завантаження.
6. Труднощі з SEO. За наявності у статті одразу двох адресів значно погіршується її пошук і SEO.
7. Кожному пристрою своя мобільна версія. Це означає, що якісне відображення сайту за наявності однієї мобільної версії буде недостатнім, і доведеться створювати додаткові версії для планшетних ПК, ТБ і retina-дисплеїв.
Адаптивний дизайн
Унікальні особливості цієї версії дозволяють перебудовувати сайт під усі можливі розширення екрана, змінюючи розташування та величину блоків, масштаб текстів, а також змінюючи сам контент і блоки. Варто згадати той факт, що спеціалізовані джерела оперують кількома
термінами дизайну. Щоб не заплутатися, необхідно чітко розібратися в термінології. Загальним для всіх є твердження, що сайт здатен підлаштуватися під будь-яке розширення екрана. Яким шляхом це буде здійснюватися, напряму залежить від професійних навичок розробника та його вподобань.
Адаптивний або adaptive design. Цей дизайн створює готові версії для кожного розширення екрана, перебудовуючи розміщення інформаційних блоків.
Відгуковий або responsive design. Являє собою об’єднання «адаптивного» з «гумовим» дизайном. Підлаштування здійснюється за методом «гумової» верстки зі зміною положення інформаційних блоків. Яскравим прикладом такого дизайну є «liquidapsive.com». Наглядно роз’яснити методи перебудови сайту допоможе вибір необхідного типу дизайну (правий верхній кут) з паралельною зміною масштабу вікна браузера.
Плюси цього підходу:
1. Зберігається вміст На сайті повністю зберігається контент і HTML-розмітка десктопної версії, і це не залежить від пристрою, на якому переглядається сайт. Цей підхід можна використовувати в наш час все частіше, оскільки все більше користувачів використовують свої планшети та мобільні телефони як основний метод доступу до інтернету.
2. Один URL для обох версій. Тут власник і розробники позбуваються дублювання контенту та непотрібних редиректів сторінок, щоб мати найкращий вигляд подачі сторінок під різні пристрої (на відміну від підходу з окремою мобільною версією сайту).
Мінуси:
1. Контент не завжди буде повністю оптимізований під усі мобільні пристрої Це відрізняє цей підхід від окремої мобільної версії, де в пріоритеті проєктуються сторінки саме під мобільні пристрої, і весь контент із самого початку підлаштований під них, а не скоригований від початкової десктопної версії.
2. Повільне завантаження. Якщо для десктопної версії сайту швидкість завантаження з якісним відображенням графіки є досить прийнятною, то відображення з такою ж якісною графікою на мобільних буде дещо надмірним, коли швидкість завантаження сайту буде повільною
3. Може бути важко пересуватися сайтом. Завдання та бажання користувачів мобільних пристроїв, як правило, відрізняються від користувачів на звичайних десктопних пристроях. Крім цього, ці завдання найчастіше є вже звичними у використанні мобільних інтерфейсів, і в разі, коли структура навігації продумана неналежним чином для кожного пристрою, часто виникають проблеми у користувача з юзабіліті.
RESS
Цей метод використовує програмування з боку сервера і необхідний для створення CSS і HTML. При цьому, використовуючи смартфон або десктопний комп’ютер, користувач отримає різний набір програмного коду для кожного пристрою. Оптимізація коду здійснюється з урахуванням використовуваного пристрою і призводить до прискорення підвантаження інтернет-сторінок.
Звісно, існують й інші способи реалізації, але я виділив найголовніші. Працюючи над реальними проєктами, ми віддаємо перевагу вибору найкращого, поєднуючи гнучкі можливості responsive design і оптимізацію RESS.
Плюси цього методу:
1. Сторінка з однією адресою. Наявність одного URL позитивно впливає на шеринг сторінки.
2. Збереження навігації. Незалежно від того, який пристрій ви використовуєте, структура контенту залишається практично незмінною.
3. Зручна підтримка сайту. Виключення наявності додаткових версій спрощує та покращує подальшу підтримку сайту.
4. Автоматичне підлаштування. Якісний адаптивний дизайн дозволяє підлаштовувати сайти не тільки для смартфонів, але
і для телевізорів, планшетних ПК та ігрових приставок PSP.
5. Покращена SEO оптимізація та робота пошуковиків. Наявність сайту в єдиному екземплярі без складної структури та копій гарантує якісну SEO оптимізацію.
Мінуси:
1. Збільшення ваги сторінки. Причиною цього недоліку найчастіше є неуважність розробників, які забувають підвантажувати зображення з малим розширенням і залишають увімкненим підвантаження скриптів, що не відображаються на смартфоні.
2. Неадаптований контент. Якщо цілі на десктопному сайті мають певні відмінності, це може підвищити кількість невирішених користувацьких сценаріїв при роботі на мобільних пристроях.
Резюме
Актуальність окремої мобільної версії сайту зростає тільки тоді, коли в ній є нагальна потреба. Однак у подальшому від розробників і власника проєкту знадобиться збільшення ресурсів, щоб одночасно підтримувати обидві версії сайту. Через деякий час версії стануть сильно відрізнятися одна від одної, де пріоритетна десктопна версія буде більш функціональною, ніж мобільна. Тому створювати мобільні версії краще для сайтів, контент яких зазнає найменших змін. Як правило, це промосторінки та корпоративні представництва. Для інших сайтів доцільніше буде використання адаптивного дизайну, враховуючи, що інтернет миттєво реагує на появу нововведень і змін функціоналу. Будь-який сайт вважається ефективним, якщо він здатен швидко перебудовуватися під зміну ситуації. В іншому випадку він представлятиме собою не більше ніж непотрібний громіздкий набір JPEG і CSS.
Найкраще адаптивний дизайн проявляє себе при створенні веб-сервісів і сайтів онлайн-новин, де постійна зміна структури сайту є нормою. Розробляючи адаптивну версію, необхідно також доопрацювати десктопний сайт або провести його повний редизайн. Недоліки адаптивної версії можуть проявитися тільки при неякісному проєктуванні. Саме тому хороша реалізація можлива лише при професійному підході, з наявністю спеціальних навичок і врахуванням великої кількості нюансів.
Професійне проєктування здійснюється з урахуванням типу пристрою, роботи користувача з пристроєм, розмірів і швидкості підвантаження сторінок, наявності або відсутності сенсорного управління, анімації тощо. У цьому розмаїтті нюансів важливо також не забути передати звичний інтерфейс. Крім того, якісна технічна реалізація неможлива без знань способів оптимізації коду, а також обережного та ретельного тестування на всіляких пристроях і браузерах. Тому до вибору виконавця для розробки свого проєкту необхідно ставитися дуже серйозно та відповідально.
