Робота з мобільними пристроями який спосіб розробки сайту краще
Зважившись на такий серйозний крок, як розширення сайту для відображення на всіх пристроях, розробники стикаються зі складним вибором: робити адаптивний сайт або окрему мобільну версію.
Мета цієї статті - спираючись на матеріали тематичних джерел і особистий досвід розробки, поставити крапку в цьому питанні.
Мобільна версія сайту pda.yandex.ru
Звичайно, іноді бувають випадки, коли мобільна версія більш пріоритетна. Наприклад, коли ми створювали сайт-фотоконкурс для «Білайн» з інтеграцією Instagram, майже 90% трафіку приходило з мобільних пристроїв. Так що вибір рішення виходить з самого завдання.
Окремий мобільний сайт
Створення окремого мобільного сайту є хорошим рішенням в тому випадку, коли у проекту вже є великий високовідвідуваний інтернет-сайт, і великого бажання робити глобальний редизайн немає, але потреба в мобільній версії стає високою. В такому випадку, варто просто розробити окрему мобільну версію сайту, яка вирішує всі завдання мобільного аудиторії. Надалі обидва сайти підтримуються паралельно.
Переваги в даному випадку такі:
- Автономність. розробники можуть вносити зміни окремо в десктопну і мобільну версію;
- Швидкий час завантаження. в разі створення мобільного сайту необов'язково використовувати складну анімацію і фішки, розробники можуть оптимізувати сайт для мобільного аудиторії;
- Зручна навігації я: сайт спроектований з урахуванням завдань аудиторії з мобільних пристроїв.
Адаптивний веб-дизайн
Адаптивний сайт буквально підлаштовується під будь-який розмір сторінки, перебудовуючи положення блоків, змінюючи розміри шрифтів, іноді замінюючи контент або функціональні блоки.
Якщо говорити про адаптивної верстці сайтів, то слід згадати, що в спеціалізованих джерелах часто використовують різні назви або типи дизайну. І це кілька вводить в глухий кут, тому треба чітко визначитися з термінами. Загальне, що їх об'єднує, - сайт підлаштовується під будь-який розмір екрану, а вже яким методом це виконується, залежить від особистих переваг і кваліфікації виконавця.
Adaptive design (адаптивний)
Характеризується створенням готових версій під кожний дозвіл екрана, досягається за рахунок перебудови тематичних блоків.
Responsive design (чуйний)
Об'єднує в собі риси «адаптивного» і «гумового» дизайну. Він підлаштовується під будь-який дозвіл екрана, як при «гумовою» верстці, але також перебудовує і порядок тематичних блоків. Це наочно показано на сайті liquidapsive.com. Зрозуміти суть цього принципу можна, вибравши тип дизайну (статичний, гумовий, адаптивний і чуйний) в правому верхньому кутку і змінивши розмір вікна браузера.
Цей метод, іспольщуєт програмування на стороні сервера, щоб створити CSS і HTML для різних пристроїв: мобільні користувачі отримують один набір коду, а користувачі десктопних комп'ютерів - інший. Таким чином, відбувається оптимізація коду в залежності від пристрою, що значно збільшує швидкість завантаження контенту.
Є й інші способи реалізації, я виділив лише основні. Безпосередньо на реальних проектах ми вважаємо за краще використовувати з кожного методу краще, комбінуючи оптимізацію коду RESS і гнучкість Resposive design.
- Велика вага сторінок: розробники часто забувають робити подгрузку картинок з меншим дозволом для мобільних пристроїв або відключати подгрузку непотрібних скриптів, які не відображаються, що позначається на швидкості завантаження сторінки.
- Контент не адаптований: іноді сайт не вирішує завдань для користувача сценаріїв для мобільних пристроїв, тому що цілі на робочому столі дещо відрізняються, і це треба враховувати при проектуванні.
Окремі мобільні версії сайтів добре підходять для ситуації, коли треба зробити її зараз, але в подальшому розробникам доведеться витрачати ресурси на підтримку двох сайтів, що часто призводить до того що версії значно відрізняються, і десктопна версія значно обганяє по функціональності мобільний. Таке рішення підійде для сайтів, які рідко змінюються - наприклад, корпоративні представництва або промостраніци. В інших же випадках рекомендується використовувати адаптивний дизайн, так як інтернет передбачає під собою швидке реагування на актуальні події та зміну функціоналу. Ефективний сайт - це гнучкий інструмент, швидко підлаштовується під будь-яку ситуацію. У зворотному випадку, це всього лише громіздкий набір CSS і «джіпег».
Адаптивний дизайн добре підходить для онлайн-ЗМІ або веб-сервісів, де відбуваються часті структурні зміни (додавання / редагування нових розділів або блоків). Розробка адаптивної версії сайту вимагає серйозного доопрацювання деськтопной версії або повного редизайну. Можливі недоліки адаптивної верстки проявляються тільки при поганому проектуванні. Що цілком логічно, так як хороша реалізація вимагає професійного підходу, відповідних навичок, і знання багатьох нюансів.
При проектуванні необхідно враховувати різні пристрої, поведінку користувачів з ними, а так само безліч нюансів, такі як тач-управління, розміри, швидкість завантаження, анімацію елементів і т.д. а також не загубитися в цьому різноманітті деталей і зберегти спадкоємність інтерфейсу, щоб не відлякати користувача. Технічна реалізація вимагає знань способів оптимізації коду, граничну акуратність і ретельне тестування не тільки на різних браузерах, але і пристроях (чого тільки варта парк Android-пристроїв). Тому необхідно ретельно вибирати виконавців.
А наостанок цікавий і наочний приклад адаптивного дизайну:
Alex Bilozir Yan MecrazyJunkie Evgeny Kuzmin Ренат Абясов Dmitry Kaigorodov
Теж довго думали про те, яку версію сайту краще робити. Зупинилися на адаптивному. redroid.ru/
Вийшло красиво, але з невеликими гальмами, бо ще не все так гладко. Flexbox, наприклад, гальмує в хромиум :( Чекаємо фікса, а поки сподіваємося, що Новомосковсктелі терплять. Так що перед тим, як робити адаптівку, потрібно ще подбати і про технології, які будуть там застосовуватися :)
В цілому все по справі, але хочу висловитися на захист stand alone версії.
На жаль, це практично єдиний спосіб почати працювати з мобільного аудиторією для малого бізнесу. Такий бізнес по визначенню грошей має мало і додаткові 10-15% продажів для них часто порятунок. Наприклад, візьмемо регіональний інтернет-магазин, який обробляє 10 замовивши в день - грошей заробляють на з / п засновнику і одному помічнику. Як думаєте у них є 150+ тис. Рублів на переробку сайту під адаптуюся?
Другий момент. Ок, ми готові відразу робити сайт адаптивним (на старті бізнесу), але не безкоштовно ж. Ну ви розумієте, про що далі піде мова.
І це не торкаючись того, уявлення розробника може бути помилковим і розроблений сайт буде гірше конвертуватися. У мене був досвід, коли простий Лендінгем приносив 30% реєстрацій, а новий, гарний і технологічний - 20%. Такі експерименти бізнес може і не пережити.
А тепер давайте подивимося на "проблеми" самостійних версій сайту:
Підтримка двох сайтів - все залежить від типу сайту, якщо ми говоримо про корпоративний сайт на 10 сторінок, то проблеми немає. Якщо про інтернет-магазин або містечковий новинний портал, то у нас є всякі json, yml, xlm. З Новомосковськ, що треба прагнути виключити ручну роботу з мобільною версією.
Повністю різні сайти для користувача - структура мобільного сайту може бути дуже близька до великої версії, а велика частина візитів тих самих сайтів буде від "одноразових" користувачів. Плюс потрібно управляти трафіком так, щоб користувач здійснював цільове дію дуже швидко.
Додатковий URL - це проста технічна задача, досить в автоматичному режимі визначати відповідність між сторінками деськтопной і мобільного версій. Той же Форбс може це спокійно робити за ідентифікатором в урле, а для інших випадків можна зіставляти заголовки сторінок і дати оновлення контенту.
Швидкість завантаження - дійсно, якщо для визначення типу пристрою ми використовуємо js, то перша (!) Завантаження буде трохи довше. Але знову таки, можна все робити на рівні запитів ще до відвантаження сайту. Але це вже не про бюджетні рішення.
Проблеми з SEO - ви ж чули про robots.txt?
Різні мобільні версії для різних пристроїв - ось це дійсно цікаве завдання, але бюджет розробки в даному випадку буде визначальним фактором. За великим рахунком нам ніхто не заважає зробити злегка даптівную мобільну версію.
Так що хлопці, не ховайте самостійні мобільні версії. Я впевнений, що їх час ще настане і ми побачимо розширення їх частки.