Steps to a google-friendly site

Что такое мобильные сайты?

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


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

Основные отличия от приложений:

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

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

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

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

Срок актуальности проблемы

Проблема считается актуальной с момента, когда она была впервые выявлена на вашем сайте, и вплоть до 90 дней после того, как последняя страница с нарушением была помечена как исправленная. Если в течение этого срока Search Console не обнаружит проблему снова, она будет удалена из истории отчетов.

Датой выявления проблемы считается момент, когда она первый раз была зарегистрирована в течение срока актуальности. Эта дата неизменна. Далее Search Console действует по следующему алгоритму:

  • Если проблема была исправлена на всех страницах, однако через 15 дней после этого она появилась вновь, мы будем по-прежнему считать ее актуальной, а дата выявления останется неизменной.
  • Если же это произойдет через 91 день, проблема уже будет удалена из истории. Мы зарегистрируем нарушение как новое и с другой датой выявления.

Конверсия

Единственная цель, ради которой имеет смысл оптимизировать свой сайт для мобильных, — увеличить конверсию среди аудитории пользователей смартфонов. В наших первых ecommerce-проектах после запуска мобильной версии мы наблюдали взрывной рост конверсии — на 50%. Западные кейсы эту тенденцию подтверждают.

Итак, вы согласны с тем, что корректная работа и отображение сайта на смарфтонах важны, но этой уверенности недостаточно. С этого момента вам нужно иначе смотреть на любой веб-проект — думать сначала о мобильных юзерах, а затем уже о десктопных. Такой подход называется mobile first. Подробнее об этом подходе вы можете прочитать в блоге Люка Врублевски или в его книге Mobile First.

После знакомства с подходом люди разделяются на три группы:

  1. Полностью согласны с подходом.
  2. Видят в нем смысл, но считают его технически невозможным.
  3. Не видят в нем смысла.

Первой и второй группе советую сразу перейти к разделу «», выбрав подходящий вариант для своего проекта.

Третья группа — это, как правило, либо разработчики, которые не изменяют своим устаревшим убеждениям, либо совершенно далекие от разработки менеджеры, также не готовые меняться. Слова mobile first и вправду звучат прикольно, но реализовать их на практике бывает гораздо сложнее. Основная сложность в том, что человек боится меняться, — в итоге новые технологии внедряются долго и мучительно. Рано или поздно такие люди незаметно для себя примут этот подход, как это произошло с отказом от технологии Flash пару лет назад.

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

Как сделать адаптивность сайта

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

Ниже приведём несколько инструментов, которые подойдут для разных пользователей:

  • Gator Website Builder: имеет более 100 шаблонов сайтов на выбор для адаптивного дизайна. Любой, кто подписывается на план Gator, имеет доступ к библиотеке шаблонов;
  • Bootstrap — это бесплатный инструмент с открытым исходным кодом для создания мобильных сайтов;
  • Если на вашем сайте есть видео, FitVids — это бесплатный полезный инструмент, позволяющий загружать видео на нужную ширину на разных устройствах;
  • FitText делает для шрифтов то, что FitVids и делает для визуальных элементов. Он автоматически изменяет размеры Ваших заголовков и отображает текст в зависимости от размера экрана, который имеют посетители.

Что такое адаптивность сайта

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

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


60% людей не останутся на Вашем сайте, если он не подходит для мобильных устройств. 67% людей с большей вероятностью купят продукт или воспользуются услугой курсов СЕО-продвижения, например, с веб-сайта, который удобен для мобильных устройств.

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

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

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

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

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

На данном сайте можно посмотреть любой сайт практически со всех устройств и разных операционных систем. Это и компьютеры и планшеты и мобильные устройства.

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

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

Более подробно о всех настройках и работе с сервисами показал в коротком видео.

Совет для увеличения продаж

Как Вы понимаете, чтобы увеличить количество продаж, как своих так и партнерских продуктов, нужно сделать мобильную версию для всех продающих и подписных страниц.

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

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


Кстати, не забывайте о конкурсе комментаторов. Немного усилий и Вы можете выиграть 1000, 2000 или 3000 рублей. Принимайте участие!

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

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

Преимущества в данном случае таковы: 

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

Недостатки:

  • Поддержка двух сайтов: приходится тратить дополнительные ресурсы на поддержку двух отдельных сайтов. Часто бывает ситуация, когда основной сайт постоянно претерпевает изменения, а на мобильную версию совсем не хватает времени, и в скором времени разница между сайтами становится значительной, вплоть до разной структуры и отсутствия ключевых разделов.
  • Полностью разные сайты для пользователя: так как это два разных сайта, то у них нередко встречается разная структура и навигация, а в результате пользователю приходится заново адаптироваться и держать в голове два разных способа обнаружения той или иной статьи или раздела.
  • Урезанная версия сайта: так как основная парадигма мобильной версии, в таком случае, дать только ключевую функциональность, она не закрывает все потребности пользователей. 
  • Дополнительный URL: каждая страница имеет два адреса (десктопный и мобильный), что затрудняет расшаривание страниц. Например, я часто натыкаюсь в ленте Facebook на ссылки подобного плана http://m.forbes.ru/article.php?id=268533 и при переходе вижу на ноутбуке «растянутую» страницу для мобильника. Правильно в таких случаях переадресовывать пользователя на десктопную версию. 
  • Скорость загрузки: автоматичекая переадресация на мобильную версию при входе со смартфона, также сказывается на времени загрузки страницы. 
  • Проблемы с SEO: два адреса у одной и той же статьи сказывается на ее эффективном отображении в поисковиках, а значит и на SEO. 
  • Разные мобильные версии для разных устройств: то есть, по-хорошему, кроме мобильной версии, вам еще нужно делать версию для планшета, retina-дисплеев и телевизора.

Что такое адаптивность сайта

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

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

60% людей не останутся на Вашем сайте, если он не подходит для мобильных устройств. 67% людей с большей вероятностью купят продукт или воспользуются услугой курсов СЕО-продвижения, например, с веб-сайта, который удобен для мобильных устройств.

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

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

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

Правильный выбор

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

Если не планируете в ближайшее время создавать новый сайт и вам важно быстро получить качественную полнофункциональную мобильную версию — изучите лучше подход «Динамический JS».

Будете работать с подрядчиком? Независимо от выбранной технологии перед началом сотрудничества убедитесь, что исполнитель хорош и способен решить вашу задачу:

Изучите портфолио мобильных сайтов (желательно не менее десяти). Именно сайтов, а не одностраничных лендингов. Обязательно посетите все сайты из портфолио Если какой-то из сайтов недоступен — вероятно, подрядчик вводит вас в заблуждение и преувеличивает свои заслуги. Обратите внимание на скорость работы и дизайн сайтов из портфолио. Много ли там практических ошибок? Попросите подрядчика рассказать о способах адаптации, которые ему известны Спросите, почему он использует тот или иной способ, какие может привести аргументы «за» и «против». Зафиксируйте в договоре сроки создания мобильного сайта и предусмотрите штрафные санкции в случае просрочки. При этом старайтесь всегда быстро предоставлять обратную связь, если она требуется исполнителю для продолжения работы. Оговорите формат и условия дальнейшей технической поддержки. Начало работы с мобильной аудиторией — ответственный и, вероятно, новый для вас шаг

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

Проверяем отображение мобильной версии в Chrome

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

Достаточно зайти в браузер Crome, открыть нужную нам страницу и нажать клавишу F12 в операционной системе Windows или Fn+F12, если это система iOS.

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

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

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

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

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


Если вы хотите сделать сайт дружественным к мобильным устройствам, вамобязательнонеобходимо учесть три основные составляющие:

  • оптимизацию CSS и настройку медиазапросов;
  • настройку области просмотра с помощью специальных метатегов;
  • оптимизацию используемых плагинов.

Оптимизация CSS и настройка медиазапросов

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

Происходит это, потому что верстальщики, получая макет, по умолчанию прописывают значения ширины или высоты различных элементов в абсолютных величинах (в пикселях) для самых распространенных разрешений обычных ПК, например:

.container {width:210px;height:200px;}

Избежать этого можно, если при обозначение размеров элементов на странице использовать вместо абсолютных величин относительные (например, в процентах):

.container {width: 21,75%;height: 20,408%;}

Это позволит элементам страницы подстраиваться под изменения масштаба всей страницы.

Настройка области просмотра

Большинство сайтов при просмотре с экрана небольшого размера показываются пользователю в точно таком же разрешении (обычно это около 980 пикселей), как и при просмотре с ПК, например:

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

Использование специализированного метатега “viewport” помогает настроить ширину экрана под любое устройство:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Атрибут “initial-scale=1” указывает браузеру пользователя соотношение пикселей CSS и устройства (равное 1:1 независимо от ориентации дисплея) для корректного отображения в альбомной ориентации.

Оптимизация используемых плагинов

Многие мобильные устройства и браузеры не поддерживают или поддерживают не все версии современных плагинов, поэтому рекомендуется пересмотреть необходимость наличия на странице плагинов Flash, Silverlight или Java. Многие элементы HTML5 на данный момент позволяют найти замену всем плагинам без потери качества отображения контента.

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

Дополнительные рекомендации

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

Правильно подходите к выбору контрольных точек при задании процентных величин элементов макета, на эту тему можно почитать гуру адаптивного веб-дизайна –Итана Маркотта.

Пример оптимизации текста под смартфон и ПК

  • По возможности максимально оптимизируйте JavaScript.
  • Используйте понятную навигацию по сайту в верхней части страниц. Особенно это актуально для сайтов с гибким дизайном. Помните, что при «серфинге» с мобильной платформы пользователю должно быть так же удобно пользоваться сайтом, как и с ПК. Понятное меню и удобная навигация позволят не потеряться на страницах ресурса. Хороший вариант верстки лендинга с адаптивным дизайном —http://www.theverge.com/a/virtual-reality.

Пример навигации по сайту с адаптивным дизайном на экране ПК и смартфона

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

С этим читают