Адаптация сайта к мобильным устройствам. Отдельная мобильная версия сайта

Очередная статья из цикла «Адаптация сайта к мобильным устройствам» . Теперь будет рассмотрена мобильная версия сайта как стоящая отдельно , например на поддомене.

Необходимость в создании мобильных версий сайта началась с повсеместным распространением мобильных телефонов, где-то в середине 00-х годов. Тогда это было только для самых крупных порталов и развлекательных сайтов. Создавались так называемые WAP-версии сайтов. Хотя это в корне неверное определение,  так как технологи WAP не относится ни к одному языку разметки документов (WML, HTML, XHTML mobile), а является протоколом передачи данных. Но название прижилось тогда именно это. Жаль, что некоторые веб-мастера до сих пор находятся мысленно в те далёкие годы. Этим страдают даже очень популярные ресурсы рунета и уанета.

Главная страница популярного портала о курортах на черноморском побережье

Главная страница популярного портала о курортах на черноморском побережье

WAP-версия того же сайта

WAP-версия того же сайта

Немного погружает в 00-е, правда? Как-то на современном смартфоне на такое смотреть немного странно. Особенно если происходит безусловное перенаправление на мобильную версию.

Rozetka - мобильная версия

Rozetka — мобильная версия

Слава богам Олимпа, мобильный трафик сейчас сильно подешевел, многие операторы предлагают приличные безлимитные пакеты или около того. Значит уже можно не экономить так судорожно каждый байт мобильной версии сайта, хотя не стоит чересчур увлекаться. Трафик-то недорогой, но скорости мобильного соединения напоминают больше всего старый добрый dial-up.

Давайте вернёмся к началу и подумаем, а зачем, собственно нужна мобильная версия сайта? Для того, чтобы посетители имели возможность пользоваться услугами вашего сервиса с мобильных устройств. Вряд ли старые версии WAP-сайтов подразумевают комфортную работу и полноценный опыт использования. Нынешний рынок требует гораздо более гибких решений, поэтому давайте рассматривать то, что поможет нам сделать хороший мобильный сайт.

Техники для создания мобильной версии сайта можно использовать практически те же, что и для адаптивной вёрстки. Но большой плюс отдельной версии в том, что вы можете адаптировать функционал под более низкопроизводительные устройства, облегчить JavaScript-сценарии, например.

Первым делом нам необходимо будет задать ширину отображения. Проще и легче всего это сделать с помощью упоминавшегося в прошлой статье метатэга Viewport.

<meta name=»viewport» content=»width=device-width, initial-scale=1, maximum-scale=1″ />

Для примера можно взять используемый код на мобильной версии сайта habrahabr.ru

Habrahabr - мобильная версия

Habrahabr — мобильная версия

Мобильная версия habrahabr.ru - исходный код

Мобильная версия habrahabr.ru — исходный код

Как видно, ширина сайта подгоняется под размер текущего устройства, пользователю позволяют масштабировать сайт. Как это работает продемонстрировано на следующем видео:

Теперь посмотрим на поведение сайта с другими заданными параметрами Viewport. Для примера возьмём исходный код этого сайта. Напомню, у  меня используется адаптивная вёрстка.

seazo.net - мобильная версия

seazo.net — мобильная версия

seazo.net - исходный код

seazo.net — исходный код

У меня запрещено масштабирование, ширина также как и в предыдущем примере подгоняется под размер экрана. И снова пример работы этих параметров на коротком видео:

Основная разница между работой параметров заметна невооруженным взглядом.

Как бы это странно ни звучало, но в большинстве случаев такого дополнительного кода вполне может хватить для того, чтобы сделать мобильную версию какого-нибудь несложного сайта, чьего-либо блога, например.

В остальном создание мобильной версии сайта для современных мобильных устройств ничем не отличается от обычной вёрстки. Разве что ориентироваться нужно на маленький экран.

Небольшой список рекомендаций при мобильной вёрстке:

  • Использовать относительные значение величин (%, em)
  • Крупные и понятные элементы управления
  • Отказ от использования экспериментальных свойств CSS и методов JavaScript

Немного подробнее хотелось бы остановиться на последнем пункте. Многие приверженцы браузеров на основе Webkit грешат добавлением в мобильную версию свойств из черновиков CSS с префиксом -webkit и безусловной ориентацией на них. Почему не стоит уповать на черновые стандарты и к чему это может привести я уже неоднократно рассуждал. Ярким подтверждением моих мыслей служит факт существенного изменения синтаксиса градиентов в CSS. При очередном обновлении какого-либо браузера вся та «красота», которую хотел показать веб-мастер может перестать работать, а то и вовсе превратиться в что-то непотребное. Такой подход чреват постоянными потерями времени на адаптацию к изменениям и, как следствие, возможной потерей доверия заказчиков.

Иногда доходит до абсурда: некоторые делают несколько мобильных версий сайта для устройств на разной платформах, которые могут различаться довольно-таки существенно. Поддержкой таких решений, конечно, в дальнейшем никто не занимается. Обычно это начинается как проба пера для каких-либо новых устройств на сайтах энтузиастов, но так и бросается. Конечно, мы не будем принимать во внимание крупнейшие сайты, у которых есть средства на команду разработчиков, в прямые обязанности которых входит поддержка сайта по последнему слову в стандартах.

И вот, постепенно, мы пришли к вопросу использования фреймворков при создании мобильной версии сайта, но это уже тема следующей статьи.

Постоянный адрес статьи Пинги запрещены.

  • Виталий

    Спасибо, первый код очень помог))