Как сделать мобильный сайт

 

Что такое адаптивный дизайн

Что такое динамическая верстка

Что такое мобильная версия сайта

Что лучше динамическая верстка или мобильная версия

 

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

Какие есть варианты адаптации сайта к мобильным устройствам?

Таких вариантов три:

  • адаптивный дизайн;
  • динамическая верстка;
  • мобильная версия.

Но что лучше? Что выбрать? Какие плюсы и минусы у каждого варианта?

 

Что такое адаптивный дизайн

Понятие "сайт с адаптивным дизайном" означает, что страницы сайта сами подстраиваются под размеры экрана любого устройства, т.е. код страницы, отправляемый сервером пользователю, всегда одинаковый. Соответственно, и URL у сайта тоже один. Чем это плохо?

В первую очередь тем, что разработчик такого сайта весьма ограничен в возможностях оформления страниц, в результате чего сайты получаются неинтересными, со слабым, мало привлекательным для пользователя дизайном. Почему так происходит? Вот простой пример: представьте себе, что у вас на сайте в качестве заголовка (header) установлено красиво оформленное изображение размером почти во весь экран (например, как на этом сайте!). Что с ним произойдёт, если такую страницу открыть на смартфоне? Это легко узнать при помощи инструментов разработчика Яндекс.Браузера:

 

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

 

Что такое динамическая верстка

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

 

Что такое мобильная версия сайта

Мобильная версия по своему основному принципу весьма похожа на динамическую вёрстку, но предполагает для мобильного варианта наличие поддомена типа "m." или "mobile.", что с точки зрения поисковых систем является разными сайтами, но при этом мобильная версия не считается дублем основного сайта.

Здесь важно правильно понимать: создание поддомена не обязывает вас создавать для него отдельный сайт! Конечно же можно потратить время и сделать два разных сайта, каждый из которых будет управляться своей CMS, но стоит ли результат затраченных усилий? Вряд ли! Как минимум, вы получите проблемы из-за общей базы данных и возможных других причин, поэтому такой вариант просто не имеет смысла.

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

 

Что лучше: динамическая верстка или мобильная версия

Теперь возникает вопрос: что же выбрать? На самом деле всё просто: разница в коде обоих вариантов абсолютно незначительна, поэтому основной вопрос заключается в  URL: либо использовать только один адрес, либо использовать два адреса. Что лучше? Для начала попробуем обратиться к поисковым системам, так как именно от них зависит сколько пользователей увидят ваш сайт.

Если вы внимательно изучите раздел Яндекс.Справки для вебмастеров, то вы не найдёте там прямого указания, что какой-либо из вариантов лучше индексируется или лучше представляется в поиске. Основное требование, предъявляемое к таким страницам - их мобилопригодность. Это как раз то, о чём было сказано в начале: страницы долны быть удобны в прочтении без прокрутки по горизонтали. Кроме того, адреса страниц для мобильной версии (на поддомене) должны полностью совпадать с адресами страниц десктопной версии (за исключением "m."). Так же в справочном разделе имеются рекомендации как правильно всё сделать, что бы избежать проблем с индексацией (рекомендуем прочитать!).

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

- - - - - - - - -

В следующей главе будет детально разобран общий принцип работы сайта, совмещающего в себе основную и мобильную версии.