Мобільний дизайн на Drupal підходи, технології, рішення, Микита Петров™, Створення сайтів на CMS
Очевидно, що необхідно змінювати дизайн сайту та його елементів, якщо його переглядають на якомусь іншому пристрої, відмінному від комп'ютера – це і інший розмір екрану, та інша взаємодія з користувачем (керування пальцями замість мишки). Існує два основні підходи до вирішення цієї проблеми.
Responsive Web Design Цей підхід є оптимізацією верстки сайту і створення гумового макета, який адекватно підлаштовується під різні розміри екранів. Основний прийом - поділ екрана на блоки певної ширини, які при зменшенні екрана спочатку пропорційно зменшуються, потім падають один під одного, коли місця стає мало. Так само є можливість додавати conditional css styles для різних розмірів екрану, завдяки чому можна приховувати деякі блоки або змінювати зовнішній вигляд елементів. Основний недолік: Одночасний розмір сайту, що завантажується, у мобільних пристроїв і десктопу. На даний момент більшість мобільних користувачів використовують 3G зв'язок, який значно повільніший за виділені оптичні лінії, до яких є доступ у десктопних користувачів. Через це існує необхідність мінімізувати розмір сайту, що завантажується, для мобільних пристроїв. При цьому підході це неможливо. Достоїнства: У Друпалі проведено суттєвий обсяг робіт у цьому напрямку. Існують спеціальні темароботи, заточені під відповідний дизайн, наприклад Adaptive theme, Omega and so on. Один і той самий контент як для мобільного сайту, так і для десктопного. Один і той же URL, необмежені можливості кешування. Недоліки: Неможливість повної оптимізації під мобільні пристрої - ваш контент буде той самий,що й для десктоп-користувачів.
Mobile Specific Site + серверні компоненти, Приклад:bbc.co.uk Це сайт з дизайном та розміткою, зроблений спеціально для мобільних пристроїв. У нього може бути окремий URL, наприклад m.example.com, на який відбувається редирект з основного сайту, використовуючи server-side бібліотеки. Server-side бібліотеки: існують php-скрипти, які за заголовком User agent запиту на сервер визначають різні типи пристроїв і видають відповідну версію сайту для них. На мобільному сайті може бути абсолютно не тільки інший дизайн, а й контент, заточений під mobile user expirience. Основний недолік: Немає 100% гарантії того, що мобільний пристрій визначиться коректно. Потрібно поновити список усіх мобільних пристроїв. Позитивні якості: Менший обсяг завантажуваного сайту для мобільних пристроїв. Підтримка кешування всіх рівнів. У друпал для вирішення проблеми адміністрування контенту на двох сайтах є рішення у вигляді мультисайтингу. Недоліки: При цьому все одно доводиться використовувати прийоми responsive дизайну, тому що всі мобільні пристрої мають різні розміри екранів; Перенаправлення між сайтами та поділ відвідувачів на два сайти може позначитися на SEO просуванні. Шаринг посилань користувачами - необхідно налаштувати коректне перенаправлення на мобільну версію та назад. Знову немає залізної гарантії, що це відбудеться коректно.
Існує варіант розміщення Mobile Specific Site і звичайного сайту на тому самому URL, вибір який елемент видавати теж лежить на основі серверних компонентів, Приклад: cnn.com Основний недолік: Кешування. у друпалі існують проблеми з кешуванням таких рішень. Саме, зараз у 7ке використовується кешування,засноване на url сторінці. При цьому мобільним користувачам може показуватись сторінки, закешовані під дексктоп і навпаки. Вже існують патчі, що вирішують цю проблему (вони підмінюють метод кешування, що надається ядром друпала на свій власний) але вони поки навіть не закоммічені навіть у dev-гілки модулів і не пройшли суттєвого тестування. Кешування зовнішніми засобами, такими як varnish або будь-яким іншим web accelerator'ом при такому підході неможливе в принципі, з тієї ж причини, що описано вище. (Web accelerator може бути включений на сервері, але ми будемо посилати http header з позначкою про те, що всі сторінки сайту кешувати не можна). Зручність навігації - сайт заточений саме під мобільний user expirience Для друпала розроблений ряд модулів для цього рішення, такі як наприклад browscap та mobile tools Недоліки: Необхідність постійного поповнення бази даних про нові мобільні пристрої. Немає 100% гарантії, що мобільний пристрій визначиться коректно Можливі проблеми з індексацією, якщо User Agent пошукового бота визначиться неправильно. Трудомісткість підтримки відразу двох сайтів (у друпалі є можливість це обійти за допомогою мультисайтингу)
Висновок: Все залежить від того, наскільки ідеальним хочеться зробити сайт замовнику. Якщо йому хочеться заощадити, він може пожертвувати часом завантаження сайту для мобільних пристроїв і зробити responsive design, я думаю це буде дешевше. Якщо йому все ж таки важливо донести спеціальний user expirience до мобільних відвідувачів його сайту та оптимізувати час завантаження на мобільних пристроях, то звичайно варто робити Mobile Specific Site (намультисайтинге друпала) Якщо йому важливо досягти ідеалу і бути the best у всьому, не шкода грошей - тоді треба робити і responsive і mobile specific дизайни/сайти.
Які модулі я збираюся використовувати зараз: Для створення responsive design, неважливо, для всього сайту або тільки для Mobile Specific версії, я вважаю за краще використовувати тему оформлення під друпал AdaptiveTheme framework. Вона досить швидка для будь-якого типу сайтів, що добре кешується. Має величезну кількість налаштувань під будь-які типи дозволів та девайсів. Має інтеграцію з багатьма модулями. Активно розвивається, вже готується до виходу версія під 8-ю версію Друпала. Є варіант використовувати найпростішу тему mobile для Mobile Specific сайту, але тут треба поглянути на варіанти дизайну, які розробить дизайнер та ui manager.