Адаптивная верстка и мобильная версия. Вконтакте — мобильная версия ВК: вход. Предпочтения поисковых систем

Оптимизация сайта для мобильных устройств. Правила .

Прирост аудитории десктопного Интернета в 2015 остановился

По данным, выложенным на сайте «Интернет в России и в мире», в 2015 году прирост аудитории десктопного Интернета, то есть количества людей, выходящих в сеть со стационарных компьютеров, полностью остановился.

В тоже время, число людей, которые бороздят просторы интернета при помощи мобильных телефонов и планшетов, с каждым годом неуклонно растет. Например, в 2013 году эта цифра составила 56%, в 2014 – 61%, а за пять месяцев 2015 количество пользователей, заходящих на сайты с мобильных устройств, снова увеличилось и составило около 86%.

Кроме того, выросло и число заказов различных услуг, а также покупок в интернет-магазинахчерез мобильные сайты – эта цифра изменилась почти на 70% по сравнению с аналогичным показателем предыдущего года.

Эти факты не могли быть проигнорированы такими крупнейшими поисковыми платформами как Google и Яндекс.

Новый алгоритм «Mobile-Friendly» от Google

Уже с ноября 2014 года Google помечает в мобильной поисковой выдаче «дружелюбные к мобильным устройствам» сайты.

А с 21 апреля 2015 года поисковая система начала понижать в выдаче сайты, неадаптированные под мобильные устройства ресурсы.

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

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

Позиция Яндекса по вопросу о необходимости создания мобильной версии сайта на данный момент более лояльна. Но девиз компании «Хороший сайт – это сайт, сделанный для людей» предполагает, что наличие адаптированной версии поможет успешному продвижению.

На это косвенно указывает и появление раздела в сервисе Яндекс.Вебмастер «Мобильная версия сайта» . В разделе рассматриваются способы предупреждения Яндекса об ориентированности сайта на мобильную интернет-аудиторию.

Существуют определённые различия в требованиях Яндекса и Google к «мобильно-ориентированному сайту». В частности, заокеанский поисковик настаивает на едином URL для всех версий сайта. Яндекс же сам использует (например, мобильная версия Яндекса для поиска картинок ; Яндекс.Словари) и всем активно рекомендует разделять мобильную и стандартную версию на разные поддомены (седьмой пункт раздела «Индексирование сайта»). Аргумент: так системе будет проще показывать в запросах с различных устройств необходимую версию Вашего сайта.

Зачем вообще нужна мобильная версия сайта?

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

Вот её основные отличия:

Особенности разных типов мобильных устройств

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

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

Проверка удобства просмотра на мобильных устройствах - ссылка ;
Эмулятор для просмотра отображения сайта с IPad или iPhone - ссылка ;
Сервис, позволяющий просмотреть сайт с разных устройств и экранов - ссылка ;
Сервис для получения информации о том, как ваш сайт будет выглядеть на самых популярных устройствах: iPhone, iPad, Android - ссылка ;
Инструмент тестирования сайтов на готовность к отображению на экранах мобильных - ссылка ;
Отображение сайта сразу на нескольких мобильных устройствах – ссылка ;
Еще один функциональный сервис - ссылка .

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

Если акцентировать внимание поисковика на том, что ваш ресурс является мобильно ориентированным, то это позволит ему безошибочно направить пользователя, выполняющего поиск с мобильного, на вашу страницу.

В Яндексе для этого можно воспользоваться одним из способов, указанных в разделе «Мобильная версия сайта» .

В Google предполагается, что система сама разберётся, является версия страницы мобильной или нет. Чтобы поисковик признал её «мобильно-дружественной», необходимо выполнять ряд рекомендаций, которые дал в своём специальном интервью руководитель отдела по борьбе с поисковым спамом Google Мэтт Каттс, а именно:

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

Мобильная, адаптивная и отзывчивая версия сайта: в чём разница?

В просторечии часто употребляют понятия «мобильная версия сайта» и «адаптивная версия сайта» как полные синонимы. Иногда к этому ряду также добавляют понятие «отзывчивый сайт». Однако такое использование понятий является неправильным. Разберём почему.

Мобильная версия сайта

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

Преимущества:

лёгкость изменений, т.к. мобильная версия сайта не привязана к основной;
возможность выбора для пользователя: если не нравится, мобильную версию можно отключить и перейти на обычный домен.

Недостатки:

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

Адаптивная версия сайта

Адаптивный сайт или сайт с адаптивным веб-дизайном (adaptivedesign) – это шаблон, благодаря которому вёрстка автоматически подстраивается (адаптируется) подразмер и особенности экрана устройства, с которого зашли на сайт.

В отличие от так называемого «резинового сайта» (flexible layout), в котором контент просто растягивается по ширине экрана, на сайтес адаптивным веб-дизайном не искривляются изображения и не возникают «дыры» пустого пространства. Кроме того, резиновая вёрстка разрабатывается для десктопов, а адаптивная изначально делается для мобильных устройств, то есть разрабатывается минимальный макет для мобильных устройств и потом происходит наращивание функционала для более высоких разрешений.

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

Преимущества:

Недостатки:

проблемы с юзабилити, т.к. второстепенные разделы, важные для одной из групп целевой аудитории, могут создать неудобства для мобильных пользователей;
медленная загрузка даже при использовании сжатия кода страницы (что тоже не всегда удобно). Ведь «вес» сайта практически остаётся прежним.

Следует отметить, что, конечно, проще, быстрее и дешевле создать единую адаптивную версию, чем создавать несколько вариантов сайта (отдельно для стационарных компьютеров и для мобильных устройств) одного содержания. Однако это действительно будет работать только при качественном осуществлении адаптивного дизайна, иначе сайт будет формировать негативное впечатление у пользователей.

Хорошая адаптация сайта подразумевает сокращение количества HTTP-запросов, минимизацию CSS и JavaScript, а также работу над увеличением скорости загрузки.

Также ресурс должен оставаться доступным для сканирования. Для этого не блокируйте в файле robots.txt доступ к ключевым файлам на сайте (включая объявления), которые непосредственно влияют на отображение страницы. Если Googlebot не получит доступ к CSS и JavaScript изображениям, то ему не удастся определить, как будет выглядеть страница в мобильном браузере.

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

Отзывчивая версия сайта

Иногда между понятиями «отзывчивый веб-дизайн» и «резиновый» макет сайта ставят знак равенства. Действительно, отзывчивая версия сайта базируется на «резиновых» макетах и медиа-элементах на них, что достигается использованием только средств HTML и CSS.

Именно поэтому отзывчивый дизайн сайта представляет собой в определённом смысле часть адаптивного дизайна, так как подразумевает работу только с макетом страницы (медиазапросы, гибкие изображения).

Иначе говоря, адаптивный веб-дизайн - это стратегия создания сайтов и приложений для различных устройств. В то время как отзывчивый веб-дизайн представляет собой лишь технику адаптации макета, которая производится с помощью запроса CSS3 mediaquery, поддерживаемого всеми популярными браузерами (Google Chrome, Mozilla FireFox, Opera).

Сайт с отзывчивым дизайном (responsive design) иногда называют ресурсом с динамическим показом. В этом случае URL используется один и тот же, а вот HTML в разных вариантах. Система, руководствуясь доступной информацией о браузере пользователя, выбирает нужный вариант.

В рамках понятия «отзывчивый дизайн сайта» выделяют также такое понятие как «RESS» (Responsive Design + Server Side). Эта система используется во многих продуктах Google и включает в себя позитивные моменты как отдельной мобильной, так и адаптивной версии сайтов.

Преимущества:

единый адрес (как и в случае с адаптивным дизайном);
минимизация траффика за счёт специальной оптимизации html и css, а также удаления ненужных JavaScript;
возможность таргетирования (например, для гаджетов с установленным Android предлагается скачать приложение с GooglePlay, а для Apple – с iTunes);
возможность сделать свою вёрсткудля каждого типа устройства.

Недостатки:

значительные трудозатраты (необходимо создать несколько вариантов вёрстки), соответственно, дороговизна проекта;
подгонка для каждого устройства иногда приводит к тому, что пользователи видят разный контент в зависимости от того, на какой версии они находятся, что может сформировать негативное впечатление;
несовершенный механизм определения устройств входа в интернет;
проблемы с расположением контента (порядок информационных блоков, виджетов, медиа);
рост затрат ресурсов и трафика при уменьшении изображений браузером.

Помощь Google в оптимизации Вашего сайта под мобильные устройства

Сотрудники Google разработали систему подсказок, выполняя которые, можно будет решить проблему адаптации сайта к мобильным устройствам.

Прежде всего, на главной странице Google.Вебмастер, напротив вашего ресурса будет указано, что сайт не оптимизирован для мобильных устройств.

Функционал рядом с первым пунктом основных рекомендаций позволяет просмотреть отчет об ошибках, с указанием количества страниц, на которых они обнаружены, а при нажатии на соответствующую кнопку − и их адресом.

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

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

С началом эры бума мобильных устройств разработчики оказались перед выбором: оставлять ли мобильные версии своих сайтов наряду с «полноценными», или сайты должны стать адаптивными и самостоятельно подстраиваться под разные размеры экранов?

На текущий момент при построении мобильных версий сайтов существуют 3 основных способа их построения:

Адаптивный дизайн;
Отдельная мобильная версия сайта;
RESS (Responsive Design + Server Side).

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

Адаптивный дизайн

Для реализации адаптивного дизайна обычно используются CSS3 Media Queries. В зависимости от размера экрана, пользователь будет видеть разную картинку:

@media screen and (max-width: 1600px) { div.for-example {width: 1500px;} } @media screen and (max-width: 1280px) { div.for-example {width: 1100px;} } @media screen and (max-width: 1024px) { div.for-example {width: 980px;} }

Преимущества адаптивного дизайна

Удобство разработки - при адаптивной верстке вся структура сайта автоматически подстраивается под различную ширину экрана. Для того, что бы получить рабочий продукт не нужно писать все с нуля - достаточно лишь подправить CSS и HTML… С учетом наличия фреймворков, подобных Bootstrap подобная разработка не является очень сложной при стандартной реализации. К тому же, поддержка такого продукта будет относительно простой задачей.
Один URL - избавляет нас от ненужных редиректов, и надобности пользователю запоминать адрес мобильной версии (пусть даже это просто приставка m.). Так же наличие единого адреса позитивно скажется на продвижении сайта, поскольку поисковикам будет «удобнее» работать.

Недостатки адаптивного дизайна

Разные задачи - типовые задачи «мобильных» пользователей крупных сайтов обычно отличаются от задач пользователей ПК. Если вы являетесь клиентом банка, то, скорее всего, в мобильной версии сайта вас будет интересовать очень ограниченный спектр информации - адреса ближайших отделений, банкоматов и т.д.
В целом, при адаптивной верстке самый распространенный подход - делать копию обычного сайта, реализовать в верстке под телефоны потребности всех групп целевой аудитории. Но тогда о юзабилити можно забыть. Нужные пяти процентам посетителей второстепенные разделы создадут неудобства для основной массы клиентов.
Безысходность - Одно из неоспоримых преимуществ мобильной версии: если не нравится, ее можно отключить, перейти на обычный домен. Сайты с адаптивным дизайном не дают этого простого, но важного выбора. Если адаптированная верстка неудобна, забагована или если она скрывает важный элемент навигации, пишите пропало: вы ничего не можете сделать, чтобы увидеть его снова. Придется бежать искать десктоп или сайт конкурента. Можно придумать «костыли» для обхода этого ограничения (использовать cookie и подключать разные таблицы стилей). Но такой подход усложняет разработку.

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

Отдельная мобильная версия сайта

Чтобы сделать сайт удобным для мобильных пользователей часто создают так же отдельные версии сайтов - специально ориентированные на пользователя со смартфоном/планшетом. Наиболее распространена практика - перенаправление мобильных пользователей на специальный поддомен (m.example.com, mobile.example.com и т.д.). Наверное, в 99% случаев, мобильная версия представляет собой урезанную основную версию - лишь с тем функционалом, который, по мнению разработчиков, будет необходим и полезен пользователям мобильных устройств и планшетов.

Преимущества мобильной версии

Легкость в изменениях - поскольку сайт существует, де-факто, отдельно от основной версии, вносить в него правки, связанные только с мобильной версией значительно проще, поскольку мобильная версия чаще всего не предоставляет избыточного, ненужного функционала.
Удобство для пользователя - мобильная версия обычно сильно упрощена по сравнению с десктопной версией, поэтому пользователю не нужно будет далеко ходить за нужной ему информацией.
Быстрота - из-за того же упрощения сайта, мобильная версия грузится быстрее. Это существенно для пользователей, которые все ещё ходят через GPRS или слабый 3G.
Выбор- чаще всего, в мобильной версии есть возможность перейти на основную версию сайта.

Недостатки мобильной версии

Несколько адресов -
Неудобство для пользователя - для десктопной и мобильной версии разные адреса. Для одних это может оказаться плюсов, для других же - крайне раздражительным фактором, когда для того, что бы удобно посмотреть сайт, нужно запоминать ещё один адрес. Так же есть проблемы и с поисковиками: во избежание дублированного контента SEO-специалистам нужно использовать мета-теги rel=«alternative» и rel=«canonical». Кроме того, когда пользователь мобильного поиска Google кликнет по ссылке в результатах, он попадет на десктопную версию или перенаправлен на мобильную. Но если мобильная версия этой страницы не существует, он получит сообщение об ошибке.
Ограниченность - создание отдельного мобильного сайта означает избавление от части содержания и функциональности. Кроме того, у вас может быть два различных набора контента, который может негативно сказаться на общей информационной картине.

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

RESS

Сам Google, хоть и поддерживает использование веб-мастерами адаптивного дизайна, однако в своих продуктах использует иную систему. Если зайти, к примеру, на главную страницу под разными User-Agent-ами, то можно увидеть различный HTML для различных устройств. RESS - Responsive Design + Server Side. Пример реализации, набросанный «на коленке»:

$DS = DIRECTORY_SEPARATOR; require_once(dirname(__FILE__) . $DS . "libraries" . $DS . "browser.php"); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE){ $tmpl = "template.m.php"; } else if($device == DEVICE_TYPE_TABLET){ $tmpl = "template.t.php";} else{ $tmpl = "template.php"; } include(dirname(__FILE__) . $DS . "templates" . $DS . $tmpl);

Плюсы RESS

Фактически, метод может включать в себя преимущества как и отдельной мобильной, так и адаптивной версии сайтов, в зависимости от реализации. Из того, что будет новым:

Минимизация трафика - Ненужные JavaScript могут быть удалены из HTML, который освобождает CPU, память и кэш на мобильном устройстве. Так же может быть специально оптимизирована html и css.
Возможно использовать таргетирование - например, для Android-устройств предлагать скачать приложение с GooglePlay, а для Apple – с iTunes. Для каждого устройства можно сделать свою вёрстку.

Минусы RESS

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

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

Резюме

На мой личный взгляд - идеального варианта, который бы стоило использовать всем, нет. Лучший вариант для меня - это RESS. Однако, это один из редких вариантов, поскольку требует больших усилий для реализации. В целом же все 3 варианта имеют свои плюсы и минусы, причем в зависимости от сути и направленности сайта. Стоимость разработки мобильной версии сайта – от 15 000 рублей

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

Таким образом наблюдается тенденция к росту мобильной аудитории интернета, а значит, ваш сайт, то есть представительство вашей компании на просторах Всемирной сети, необходимо модифицировать.

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

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

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

В некоторых случаях содержимое сайта сокращают, оставляя только самое важное. Так же изменяются структура и функционал, неизменным остаются лишь стилистическое оформление, некоторые элементы и содержание.

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

Как интернет-аудитория предпочла смартфоны персональным компьютерам

Таблоиды с завидной регулярностью выстреливают заголовками из разряда «Интернет-пользователи массово эмигрируют на смартфоны», «Российские юзеры уходят в мобильный интернет». Надо сказать, оснований у таких заявлений предостаточно.

По данным исследовательской компании Mediascope, к 2017 году аудитория мобильных пользователей интернета в России достигла 66 млн. человек, что составляет 54% населения. Более того, 16% пользуются исключительно мобильным Интернетом.

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

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

Почему мобильная версия сайта важна для продвижения вашего бизнеса

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

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

Эффективность раскрутки сайта. По сообщению представителей Google, сайты, не имеющие мобильной версии, будут априори ранжироваться ниже, в сравнении с веб-ресурсами, адаптированными к экранам смартфонов. Таким образом, мобильная версия сайта сегодня - это не только возможность для привлечения большего трафика, но и обязательное условие для успешного продвижения сайта в интернете.
Удобство для пользователей. 40% интернет-юзеров честно признаются, что перейдут на другой сайт, если у интересующего их сайта нет мобильной версии. С точки зрения бизнеса вы упускаете колоссальное количество потенциальных клиентов, если сайт вашей компании не адаптирован для мобильных телефонов и планшетов.
Блестящая репутация. Некорректное отображение вашего сайта на экране современного гаджета - существенный минус и гарантированно укоризненный взгляд интернет-пользователя. С другой стороны, наличие мобильной версии - своеобразный «плюс к карме» и поддержание правильного имиджа компании.
Конкурентное преимущество. Узнали, что сайт ваших конкурентов не имеет мобильной версии? Самое время воспользоваться данной осечкой и заручиться мощным конкурентным преимуществом, а именно - получить клиентов, покидающих не адаптивные сайты ваших бизнес-противников.

Как «подружить» сайт с мобильными устройствами

Решить проблему правильного отображения вашего сайта на смартфонах можно двумя методами:

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

Если сайт вашей компании уже существует и у вас нет желания выполнять редизайн, но при этом хочется повысить лояльность сайта к мобильным устройствам, выгоднее заказать разработку мобильной версии . В данном случае возможно сохранить лишь тот контент, который будет полезен для владельцев смартфонов.

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

Мобильная версия сайта от веб-студии «Аспект»: стоимость разработки

На сегодняшний день лишь часть сайтов приспособлена для работы с мобильными устройствами, а значит, у вас еще есть шанс отвоевать свою долю трафика. Разработку мобильной версии сайта вам предлагает веб-студия «Аспект».

Стоимость такой услуги - от 15 000 рублей . Мы создаем мобильную версию на основе имеющегося сайта и привлекаем к выполнению данной задачи только лучших специалистов.

В стоимость работ входит:

Прототипирование новых страниц.
Разработка дизайна мобильной версии.
Верстка.
Программирование мобильной версии сайта и ее привязка к основной.

Сколько времени занимает создание мобильной версии?

В среднем, разработка мобильной версии сайта занимает от 10 рабочих дней . Конкретные сроки зависят от объема работ, то есть количества страниц на сайте, типа представленной на них информации.

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

Как происходит разработка мобильной версии в нашей веб-студией

Алгоритм нашей работы можно представить в следующем виде:

Ваша заявка на разработку мобильной версии (по телефону, e-mail).
Встреча и обсуждение проекта с менеджером.
Оценка объема работ и расчет точной стоимости услуги.
Составление и подписание договора.
Оплата и начало работ.
Разработка дизайна мобильной версии сайта.
Согласование и подписание акта приема макета дизайна.
Верстка мобильной версии.
Перенос контента.
Сдача проекта.

Убедились в необходимости мобильной версии и желаете заказать ее разработку? Веб-студия «Аспект» всегда ориентируется на последние тенденции и готова оказать вам профессиональную помощь в «мобилизации» вашего сайта.

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

Наша компания постоянно совершенствуется и приобретает новый опыт. В этой статье мы расскажем об одном из них.

В конце статьи вас ждет приятный бонус:)

Мобильная версия

Мобильная версия сайта — это отдельная его версия, предназначенная для смартфонов и планшетов. Как правило, имеет дизайн оптимизированный под мобильные устройства, в итоге чего контент подается в удобочитаемом виде и загрузка происходит почти мгновенно. Обычно выносится на поддомен в виде m.site.ru или mobile.site.ru.

Преимущества

Удобство

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

Скорость загрузки

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

Правки по сайту

Мобильная версия по факту является отдельным сайтом, а значит внести правки не представляет труда. Не надо заботиться и переживать, как сделать, чтобы изменения коснулись только мобильной версии и не затронули десктопную.

Переход на основную версию

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

Недостатки

Дублирование

Дублирование контента на разных поддоменах негативно сказывается на поисковом продвижении. Как правило, созданием мобильной версии занимаются программисты, а продвижением - SEO-специалисты. И даже если на тестовом варианте учтены все пожелания SEO-специалистов, не факт, что на боевой вариант они перекочуют в исходном виде. Часто при переносе что-то меняется, что-то добавляется. В итоге можем получить проблемы с ранжированием из-за дублей в мобильной версии.

Обновление

Весь контент, добавленный на основной сайт, придется дублировать и на мобильной версии. А если сайт, например, является новостным порталом и обновляется ежедневно, это может стать вполне затратным процессом.

Ограничение функционала

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

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

Адаптивная верстка

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

Преимущества

Удобство реализации

Как правило, при адаптивной верстке ширина экрана подгоняется под нужный размер дисплея. Все это можно реализовать посредством HTML и CSS. А современные CMS и фреймворки позволяют сделать это буквально в пару кликов. Да и современные шаблоны уже сразу предоставляют адаптивный дизайн. Остается только его установить? и за пару минут у вас адаптивный дизайн, который удобен для любой аудитории.

SEO

Если в мобильной версии мы сталкиваемся с дублированием контента на разных поддоменах, то здесь подобной проблемы нет. У страницы будет один адрес (URL)? и при изменении разрешения экрана либо устройства у нас не будет ломаться дизайн или нас не будут перенаправлять на мобильную версию. Этот вариант лучше решает проблему дублирования контента, нежели атрибуты rel="canonical" или запреты в robots.txt на мобильной версии.

Недостатки

Тяжеловесность

Обычно при адаптивности оставляют весь функционал, доступный пользователям. А значит мобильные посетители могут столкнуться с нагромождением скриптов и большим количеством информации, которую будет сложно сразу охватить на небольшом дисплее смартфона. Если для десктопа нормально иметь размер в 200-250 Кб, то мобильная обычно занимает менее 50 Кб.

Цели посещения

Зачастую пользователи заходят на сайт, чтобы узнать контактные данные, схему проезда, наличие филиалов и т.д. И на некоторых сайтах им придется перейти по нескольким тяжелым страницам, чтобы достичь своей цели.

Нет выбора

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

Итог: адаптивная верстка или мобильная версия?

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

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

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

Ну, а если у вас еще нет сайта, и вы только задумываетесь над его созданием, то лучше сразу закладывать адаптивный дизайн в разработку.