Знаете, что я ненавижу больше всего? Когда захожу на сайт со своего девайса, а меня перенаправляют на его мобильную версию. Конечно, ничего ужасного… однако сильно раздражает, когда оказывается, что контента, который мне нужен, на мобильном сайте как раз и нет. Однако технология разработчиков не позволяет мне зайти на стандартный сайт с мобильного устройства. Каждый раз, когда я пытаюсь зайти на главную страницу, меня перенаправляют на мобильную версию. Дайте же людям возможность зайти туда, куда им надо! Ну пожалуйста!
Вариации мобильных сайтов
Это самый первый, самый простой и…
наименее работоспособный подход. Вы можете создать единый сайт, который неплохо открывается и на настольных, и на мобильных устройствах. Но жертв не избежать, поэтому приходится выбирать, что пострадает – стационарный или мобильный сайт.Единственный рабочий сценарий для универсального сайта – когда он очень простой и с ограниченным функционалом: например, это сайт-одностраничник или лендинг[9]
с формой для регистрации.На самом деле, действуя так, мы чаще всего просто подстраиваем сайт, чтобы он хотя бы корректно функционировал на мобильном устройстве. Ясное дело, что это никакая не мобильная оптимизация, а просто временная мера.
Давайте с самого начала разберемся в том, каковы должны быть различия между стационарным и мобильным функционалом и чем это вызвано.
Специальная мобильная версия вашего сайта кажется самым очевидным решением. Тут у вас есть две версии сайта – мобильная и стационарная, и в зависимости от устройства, с которого посетитель заходит на сайт, он попадает на одну из них.
На самом деле вариантов может быть куда больше, чем просто стационарный или мобильный сайт: например, версии, рассчитанные на отдельные девайсы, а может, просто разные версии для ПК, смартфона и планшета.
Преимущество подобного подхода – возможность полной адаптации сайта под мобильную оптимизацию. Но есть и обратная сторона – вам придется управлять множеством сайтов, что не обходится без проблем.
Уровень осложнений в данной ситуации определяется вашим отношением к обновлению и управлению контентом. Статические сайты, то есть такие, которые можно обновлять и редактировать, меняя программный код (этим занимается программист или вы сами), просто дают дополнительную нагрузку по обновлению нескольких сайтов. Сложнее дело обстоит с сайтами на основе CMS, то есть систем управления контентом (их еще называют «движками»), у которых есть некая форма интерфейса, позволяющая обновлять ваш сайт.
Использовать CMS для управления мобильными сайтами можно по-разному:
– Сайт для десктопа и статичный мобильный сайт на CMS.
Это оптимизированный мобильный сайт, для редактирования которого нужен программист или ваши собственные знания по работе с кодом.– Сайт для десктопа на CMS и отдельная CMS для мобильного сайта.
В этом случае придется завести две отдельные CMS, чтобы обновлять разные версии ваших сайтов. Это усложняет движение контента между двумя сайтами, однако само решение простое и ясное.– Единая CMS для разных версий сайта.
Позволяет управлять контентом разных сайтов при помощи одной CMS, даже если есть отдельный сайт, оптимизированный под мобильные устройства. Это решение позволяет редактировать контент и «предназначать» для конкретной версии сайта – сложность в том, что CMS должна быть специально разработанной.Отзывчивый дизайн, который иногда называют адаптивным (хотя это разные вещи, о чем мы поговорим позже), – разработка такого сайта, который хорошо отображается на любом мобильном устройстве. Этот сайт везде будет выглядеть по-разному- и при этом наилучшим образом отвечать конкретным условиям.
Такой подход реализуется путем комбинирования таких интернет-технологий, как каскадные таблицы стилей (CSS)[10]
и JavaScript. На основе данных технологий браузер оценивает такие параметры, как устройство, на котором работает посетитель сайта, или ширина и высота дисплея, и в зависимости от этого выбирает отображение страницы. На рисунке 8.1 показан сайт Target Internet. Посмотрите, как можно эффективно использовать отзывчивый дизайн. Слева у нас полная версия, справа – тот же сайт с сокращенным окном браузера. Видите – здесь не просто сузили размеры, но и адаптировали под них функционал.Термины «отзывчивый дизайн» и «адаптивный дизайн» часто считают взаимозаменяемыми, хотя это разные вещи.
Отзывчивый дизайн предназначен для настройки в самом браузере, то есть страница отправляется в браузер, а он уже выполняет работу по отображению ее корректных элементов. Это называется «клиентская технология», где клиентом выступает браузер.