10 способов адаптации вашего сайта под мобильные устройства


Оглавление (нажмите, чтобы открыть):

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

Мы предлагаем:

Новые тарифы хостинга — «Минимальный» и «Безлимитный»

— Всего 60 рублей за ГОД;

— Идеально подойдет небольшим сайтам;

— Поддержка популярных CMS

190 рублей в месяц;

— Количество сайтов — не ограничено;

— Дисковое пространство — не ограничено;

— Базы данных — не ограничено;

Содержание

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

Поэтому для увеличения количества посещений уважающему себя сайту требуется подходящая адаптация.

Что нужно сделать для адаптации ресурса для мобильных устройств?

  1. Провести оптимизацию скорости загрузки страниц.
  2. Не использовать в структуре сайта многоступенчатое меню.
  3. Адаптировать шаблон под распространенные разрешения экранов.
  4. Исключить лишние Flash-элементы либо использовать скрипты Java.
  5. Удалить многоступенчатое меню, заменить на интуитивно понятное и облегченное.

Виртуальный хостинг сайтов для популярных CMS:

Изменить стили в шаблоне сайта

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

    стандартный для компьютера; для планшетов — 992 px * 768 px; для смартфонов — 480 px * 320 px.

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

Если на страницах насчитывается до 90% графики и медиа, не имеющих отношения к основному текстовому контенту, привалирующим выбором становится создание отдельной мобильной версии сайта на поддомене, начинающемся как, например, m.ваш_сайт.ru

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

Использовать адаптивный дизайн

Адаптивный дизайн веб-ресурса представляет собой дизайн, направленный на правильное отображение страниц ресурса вне зависимости от типа устройства. Для небольших сайтов такое направление приоритетно, поскольку экономит средства на разработку и увеличивает посещаемость в целом, не разделяя ее на два потока — с ПК и мобильных устройств.

Определяющие отличия от мобильной версии:

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

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

Процесс проводится одним из двух доступных способов:

    Самостоятельная обработка для «подгонки» под смартфоны и планшеты. Использование специализированного плагина.

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

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

Второй способ предлагает внедрение плагина в структуру интернет-сайта. Наиболее распространена платформа WordPress, для которой подойдет «WP Mobile Detect». Его активация самостоятельно оптимизирует контент и при необходимости поменяет тему.

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

Подведем итоги

Выбор способа адаптации определяется категорией и величиной сайта. Распределение решений идет примерно следующим образом:

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

�� 10 советов как адаптировать свой сайт под мобильные устройства

Ваш сайт должен быть оптимизирован под мобильные устройства. Зачем? На это довольно просто ответить: более 80% пользователей периодически заходят в интернет со смартфонов, лидирующие сайты давно уловили эту суть и подстроили свои ресурсы под таких посетителей.

Не кажется, что мир крутится вокруг смартфонов? Уверены, что даже те, кто не использует телефон прямо сейчас, все равно держит его под рукой – на столе, в кармане, в сумочке или где-то в поле зрения. Любовь к гаджетам облегчает доступ к любому сайту на планете. Если желание юзера зайти к вам на страницу – это 50% дела, то другие 50% – это предоставить удобную платформу.

Статистический портал Statista посчитал, что более половины мирового трафика поступает с мобильных устройств:

Наглядно видно, что процент растет из года в год. И нет никаких предпосылок, что тенденция не продолжится. В некоторых регионах – например, в Азии – интернет-трафик имеет существенное преимущество (более 65%).

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

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

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

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

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

Что такое mobile-friendly сайт

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

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

Есть два способа, чтобы проверить сайт на адаптив к мобильным экранам.

Первый – это проверка, которую предоставляет сам Google: просто вставьте ссылку и узнайте, оптимизирован ли сайт или нет:

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

Адаптивный дизайн – а это что?

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

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


10 советов, как сделать сайт мобильным

1. Установите адаптивную тему

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

Если вы используете WordPress, тогда сменить тему просто: зайдите во вкладку «Внешний вид», выберите «Темы», затем кнопка Добавить новую и в поиске напишите «responsive» – вам выпадут темы, которые сразу настроены под мобильные экраны.

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

2. Упростите меню

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

Отличный пример – то, как к этому подошли Domino’s Pizza:

Каждая вкладка помещается на экране и имеет четкое назначение. Согласитесь, посмотреть ассортимент и заказать «Диабло» с двойным сыром будет гораздо проще на варианте справа?

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

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

3. Не отпугивайте посетителей формами заполнения

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

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

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

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

4. Четко отобразите кнопку CTA

CTA – это call-to-action или кнопка призыва к действию, ее задача крайне очевидна и заключается в том, чтобы заставить пользователя сделать нужное действие.

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

По статистике, 53% сайтов, где на поиск кнопки уходит более 3-х секунд, теряют потенциальных клиентов. Это слишком долго. СТА должен обнаруживаться за 1-2 секунды.

5. Добавьте функцию поиска

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

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

6. Облегчите клиентам связь с поддержкой

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

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

7. Размер имеет значение

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

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

Проанализировав сотни гаджетов, аналитики опубликовали удобные границы для размещения интерактивных элементов на экране:

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

8. Исключите или минимизируйте всплывающие окна

Для тех, кто заходит на сайт с персонального компьютера, несколько всплывающих окон не будут трудностью (хотя они могут вызвать раздражение), но если к вам пришли со смартфона – здесь будут неприятности. Избавьтесь от всплывающих окон на мобильной версии сайта. Люди вообще недолюбливают их, но на мобильном устройстве постоянные окна вызывают настоящий гнев. Форма не только закрывает половину экрана, но еще ее довольно сложно закрыть. Такой себе триггер в триггере.

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

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

9. Подберите правильный шрифт

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

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

10. Скорость в приоритете

Независимо от вносимых изменений на сайт, помните о скорости: аналитики выяснили, что 53% пользователей откажутся от мобильной версии, загрузка которой занимает более 3 секунд (больше о влиянии скорости мы писали тут). Вот наглядная статистика соотношения отказов с увеличением времени загрузки страницы:

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

Вывод

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

© HostPro Украина 2020
Все права защищены

Nota bene: 9 способов улучшить мобильную версию сайта (перевод)

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

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

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

Вебинар состоится 28 августа 2020 года в 13.00 по московскому времени.

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

Ваш сайт адаптирован под мобильные устройства в том случае, если:

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

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

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

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

Как улучшить мобильную версию сайта

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

  • Убедиться в том, что у вашего сайта адаптивный дизайн.
  • Повысить скорость загрузки сайта.
  • Не блокировать JavaScript, HTML и CSS код.
  • Не использовать межстраничную рекламу и всплывающие окна.
  • Не делать слишком много редиректов.
  • Выбрать правильный видовой экран.
  • Проверить удобство использования мобильной версии.
  • Рассказать Google о своем сайте.

Сделайте адаптивный дизайн

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

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

Не забудьте проверить масштабирование веб-ресурса в Developer Tools Google Chrome. Если это он не масштабируется правильно, вам следует поговорить со своим веб-разработчиком о коррекции версии или обсудить выбор новой темы.

Увеличьте скорость загрузки сайта

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

Оптимизируйте изображения

Есть один способ ускорения сайта – оптимизация изображений. Не загружайте изображения HD-качества с размером 3000 х 2000. Масштабируйте их до нужного размера и делайте меньше с помощью специальных инструментов. Для этого можно использовать ImageOptim или плагины WordPress, такие как WP Smush.

Минимизируйте код

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

Работайте с кэшем

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

Сокращайте редиректы

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

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

Не блокируйте JavaScript, HTML и CSS

Блокировка затрудняет доступность сайта для Google, а это может привести к падению рейтинга. Проверить наличие блокировки можно в Google Search Console.

Повысьте удобство просмотра

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

Увеличьте размер целевых кнопок

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

Выберите правильный viewport

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

Уберите межстраничную рекламу и всплывающие окна

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

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

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

Настройте AMP

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

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

Вывод

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

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

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

  • текст отображается неправильно (виден только частично);


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

А что делать, если мобильного устройства под рукой нет? Можно воспользоваться специальными сервисами посредством ПК. Основные из них следующие:

  • Mobile Friendly (разработка Google). Всё, что нужно сделать, зайти на этот сервис и ввести в соответствующее поле адрес интернет-сайта. Затем нажимайте кнопку «Проверить» − и вам будет продемонстрирован результат.
  • Проверка мобильных страниц (продукт Яндекса). Сервис доступен тем, кто уже зарегистрирован в Яндекс.Вебмастере. Порядок действий такой же: введение адреса и нажатие на активную кнопку.
  • Инструменты разработчика (проверка в браузере). Вам нужно открыть свой сайт в браузере, найти пункт «Дополнительные инструменты» – «Инструменты разработчика». Альтернативные варианты − клавиша F12 или сочетание CTRL + Shift + I. После этого вы увидите Панель разработчика, в которой выполняется переключение на мобильные девайсы (нужно указать модель устройства).

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

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

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

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

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

Указание мета-тега Viewport

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

Если не внести указанный тег, браузер автоматически примет ширину наполнения равной стандарту десктопного устройства (1024 точки). Значит, на смартфоне с 340 пикселями интернет-ресурс уменьшится в три раза.

Обновление стилей сайта

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

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

Чаще всего использование специальных стилей даёт возможность:

  • Уменьшить количество блоков, расположенных в одном ряду. Если на мониторе ПК карточки товаров показываются по четыре блока, то на мобильном устройстве они не поместятся в один ряд. Демонстрация будет выполняться по одной карточке.
  • Скрыть часть блоков. Они могут не показываться вообще или открываться при нажатии на ссылку «Развернуть». Это может понадобиться в разных случаях. Например, тогда, когда товар снабжён длинным описанием, которое на телефоне займёт несколько экранов. Если гость заинтересован в информации, он сможет получить к ней доступ, а если нет, то не будет раздражён большим количеством текста.
  • Изменить линейные размеры определённых элементов. Чаще всего необходимо уменьшить расстояние между блоками или шрифт заголовков. Что касается текста, то он не должен быть слишком мелким, его нужно увеличить так, чтобы читать информацию с телефона было удобно. Также регулируются размеры активных кнопок, отступы между различными интерактивными элементами.
  • Добавить горизонтальную прокрутку для таблиц. Если на сайте есть таблица, а количество столбцов в ней велико, нужно обеспечить возможность их просмотра путём прокрутки вправо или влево.

Доработка дизайна сайта

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

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

Уменьшение объёма рекламы и всплывающих окон

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

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

Уменьшение количества контента

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

Выполнение проверки всех страниц

Если на вашем сайте относительно небольшое число страниц − до 200 − стоит пересмотреть их все, чтобы убедиться в правильности отображения сведений. Владельцам интернет-ресурсов, которые состоят из тысяч страниц, проводить такую проверку нет смысла: внимание нужно уделить только наиболее важным страницам (продающие, дающие трафик и т. д.).

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

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

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

Из этой статьи вы узнаете:

  1. Зачем необходима адаптация под мобильные устройства
  2. Что лучше – адаптивный дизайн или мобильная версия
  3. Что дает адаптация сайта под мобильные устройства
  4. Как её проверить
  5. Адаптация сайта для Google
  6. Самостоятельная адаптация сайта
  7. Лучший и бесплатный плагин для WordPress
  8. Адаптация таблиц сайта под мобильные устройства
  9. 6 лучших сервисов для адаптация сайта под мобильные устройства онлайн

Зачем необходима адаптация под мобильные устройства

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

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

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

Рекомендуемые статьи по данной теме:

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

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

В качестве примера возьмем данный показатель одного из российских сайтов:

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

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

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


  1. Выбрать меню «Обзор аудитории», применить опцию «Добавить сегмент».

Выбрать опции «Трафик с мобильных устройств», «Трафик с планшетных ПК», «Трафик смартфонов и планшетных ПК». Нажать кнопку «Применить».

В блоке «Обзор аудитории» вы сможете проверить процент мобильного трафика в целом, а также просмотреть трафик по типам устройств.

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

Помните, из-за этой ошибки немало пользователей покинет вас навсегда, о чем свидетельствует исследование фирмы «Equation Research». Ее специалисты выяснили: 46 % людей больше не заходят на тот сайт, где их не устроил уровень работы с мобильных гаджетов.

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

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

Что лучше – адаптивный дизайн или мобильная версия

Давайте для начала разберемся в разнице между этими двумя понятиями.

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

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

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

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

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

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

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

Мобильная версия обычно находится на поддомене основного: m.site.ru, mobile.site.ru. Эту особенность трудно отнести к положительным, если говорить с позиции SEO, так как в таком случае используется много условных редиректов с основной версии на мобильную. Ведь site.ru/page и m.site.ru/page с точки зрения поисковых систем остаются разными страницами.

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

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

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

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

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

  1. Быстрая загрузка сайта, благодаря отсутствию «тяжелых» фотографий, flash, дополнительных элементов дизайна.
  2. Понятная, удобная навигация. Используемые на мобильных устройствах ресурсы характеризуются вертикальной прокруткой, удобным модулем поиска, меню навигации Home, «Вверх», «Назад». В дополнение используется функция звонка, либо перед пользователем в шапке сайта отображается номер контактного телефона.
  3. Удобные меню, формы. Важно, чтобы человек мог без проблем активировать ссылку, пальцем нажав на другие элементы сайта.
  4. Читабельный контент. Гостю ресурса важно не испытывать затруднений при желании ознакомиться с текстом.
  5. Возможность перехода к полной версии сайта. Нельзя, чтобы портал автоматически направлял посетителей на главную страницу мобильной версии при их попытке увидеть полную версию с экрана гаджета.
  6. Функциональность, возможность конверсионных действий. Не допустимо, чтобы пользователь испытывал трудности при заказе, подписке на рассылку, скачивании документов при использовании мобильного устройства.

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

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

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

Дает возможность проверить внешний вид сайта на iPad, iPhone.

Всегда самым простым вариантом останется применение стандартного приема: нажмите F12, затем кликните по значку телефона.

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

Если вы хотите провести адаптацию сайта под мобильные устройства в Google, вам пригодится бесплатный инструмент Developers.Google:

Здесь необходимо ввести адрес ресурса и нажать кнопку «Анализировать». В использованном нами примере уровень удобства для мобильных пользователей составляет 49 % из 100 %.

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

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

Установите правильные атрибуты полей форм

Если на вашем сайте используется поля ввода для имени пользователя / адреса, откажитесь от autocorrect, включите autocapitalize:

Благодаря этому приему при адаптации сайта под мобильные устройства вы запретите системе автоматизированного ввода Т9 заменять имена, например, «Erwan» на «Erevan».

При помощи установки автоматического использования первых заглавных букв в типах words вы избавите гостей ресурса от необходимости постоянно включать капитализацию букв, иными словами в начале каждого слова будет ставиться большая буква (допустим, «Ken burns» превратится в «Ken Burns»):

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

Задайте подходящую для мобильных устройств ширину

Для этого откройте сайт в браузере своего компьютера, уменьшайте ширину окна программы, пока текст не перестанет быть читаемым. Так вы получите минимально допустимую ширину. Это текущее значение установите в свойство @viewport при помощи установки тега meta в заголовок страницы head:

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

На представленной ниже иллюстрации оставлено лишнее место по правому краю:

А здесь значение ширины выбрано правильно:

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

Установите ширину картинок в 100 %

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

Избежать такой неприятности вы сможете, установив максимальную ширину в 100 % для ваших изображений. Благодаря этому, если картинки будут слишком велики для экрана гаджета, они автоматически изменят размер. Не забудьте ввести представленный ниже код, в CSS-стили вашего сайта:

Если вы установили в качестве фоновой картинки какое-либо изображение не с помощью тега img, вам просто нужно установить CSS свойство background-size в значение contain. Так размер фона будет меняться, если разрешения экрана окажется недостаточным для передачи в 100 % масштабе:

Не стоит беспокоиться, что изображение потеряет четкость – современные мобильные устройства этого не допустят. Дело в том, что, когда гость сайта использует увеличение, браузер повышает четкость картинки. Правда, при этом стоит убедиться, что у вашего портала нет свойства user-scalable=no в теге meta, поскольку он не позволяет использовать зум:

Установите ширину полей ввода в 100 %

Когда вы установили ширину изображений при помощи свойства max-width, сделайте тоже самое с полями input. Для этого просто добавьте в файл CSS – файл вашего сайта:

Теперь поля input не выйдут за пределы экрана при использовании сайта с мобильного устройства.

Будьте аккуратны, когда используете Disable для кнопок подтверждения отправки форм

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

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


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

Если вы все-таки решили деактивировать кнопку submit, сделайте это на несколько секунд при адаптации сайта под мобильные устройства.

Топ-5 статей, которые будут полезны каждому руководителю:

В длинных строках используйте word-wrap

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

Справится с этим word-wrap, при помощи которого строка будет переноситься, достигнув края экрана. Так гость сайта сможет видеть сразу всю информацию, не прибегая к прокрутке:

Здесь вам потребуется пароль:

Будьте осторожны, используя пробелы

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

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

Чтобы облегчить пользователям жизнь, во время адаптации сайта под мобильные устройства замените пробелы отступами:

Как видите, между символами остаются пропуски, но с ними не нужно бороться при копировании. А это бережет время!

Преимущества медиа-запросов

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

Избегайте fixed позиционирования

Если заголовок или сайдбар позиционирован фиксировано, CSS свойство position установлено в значение fixed, советуем быть осторожными.

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

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

Пример показывает, как это работает на практике:

Используйте стандартные шрифты

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

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

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

Но вам придется написать два варианта CSS-правил: первый для шрифта по умолчанию, еще один – для скаченного.

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

Подчеркнем: селектор класса .wf-opensans-n4-active добавляется в код сайта динамически Font Loader’ом, но лишь, когда шрифт загружен.

Предложите пользователям читабельный контент

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

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

Для описания этого правила в английском есть довольно емкое слово «snackable» (от англ. «снэк» — закуска). Так вот, контент для таких пользователей должен быть именно snackable, то есть удобным для быстрого чтения, беглого просмотра в движении.

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

  1. Начинайте с краткого, емкого, привлекательного заголовка. Советуем составлять его в пределах 10 слов, причем использовать крупный шрифт.
  2. Разбивайте текст на блоки, каждый из них необходимо начинать коротким, информативным подзаголовком, выделяющимся на общем фоне.
  3. Вставляйте в текст нумерованные / маркированные списки, чтобы вашим мобильным пользователям было удобно быстро находить нужное.
  4. Применяйте визуальные вставки, дополнительно структурируя информацию и упрощая восприятие.

Адаптируйте электронные письма к чтению с маленького экрана

Провести адаптацию email к чтению с экранов мобильных устройств вам помогут такие инструменты для рассылки:

Замените ссылки на «тапабельные» кнопки

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

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

  • Apple считает, что оптимальный размер для кнопок, навигационных элементов начинается с соотношения 44 на 44 пикселя.
  • Nokia рекомендует минимальные габариты 48 на 48 пикселей или 0,7 на 0,7 см при создании подобных элементов.
  • Microsoft советует кнопки 34 на 34 пикселя.

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

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

Чтобы получить так называемые mobile-friendly кнопки, элементы навигации, вы можете выбрать два пути: заказать их с индивидуальным дизайном либо применить шаблонные инструменты. Если вы выбрали WordPress, советуем воспользоваться такими плагинами:

  • Standout Color Boxes and Buttons. С его помощью вы создадите удобные кнопки разного размера, цвета, а контекстное меню, адаптированное под мобильных пользователей.
  • Responsive Menu. Этот плагин позволит создать удобное меню «гамбургер».

Лучший и бесплатный плагин для адаптации сайта под мобильные устройства для WordPress

JetPack

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

И скорее всего, он уже установлен среди ваших базовых плагинов. Если так оно и есть, кликните по ссылке «JetPack» в меню администратора сайта, перейдите на страницу модулей. Здесь вам необходимо лишь активировать «Mobile Theme».

MobilePress

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

WPtouch

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

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

Wapple Architect Mobile Plugin

Данный плагин написан на языке разметки WAPL, специально созданном для настройки, рендеринга, доставки веб-контента на разного рода устройствах, платформах.

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


Mobile Detector

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

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

  1. Автоматическое распознавание гаджета при помощи базы, включающей более 5000 гаджетов.
  2. Способность выделять стандартные телефоны среди продвинутых устройств.
  3. Подготовка статистики по мобильным пользователям, в которую входят такие показатели, как число уникальных посещений, поисковый трафик, пр.

WP Mobile Edition

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

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

WordPress Mobile Pack

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

Помимо этого, в плагине вы найдете:

  • переключатель между мобильной, классической настольной темой;
  • набор поддерживаемых, распознаваемых устройств, включая темы для Nokia, браузеров на WebKit;
  • настройку цветовой палитры по темам с поддержкой твиков в CSS;
  • автоматическую адаптацию картинок, разбиение постов, страниц;
  • мобильную панель администратора;
  • виджет мобильной рекламы, поддерживающий такие платформы как AdMob или Google’s Mobile Adsense;
  • мобильную аналитику;
  • виджет для добавления бар-кодов на сайт, позволяющий быстро добавлять сайт в закладки на мобильном устройстве во время его просмотра на экране настольного компьютера.

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

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

Поговорим о двух вариантах верстки адаптивной таблицы.

В первую очередь давайте посмотрим на внешний вид таблицы:

Bootstrap-способ верстки адаптивной таблицы

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

Для применения на практике этого способа таблица обернута в div, которому задана максимальная ширина в 100 %, overflow: auto.

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

Верстка по-настоящему адаптивной таблицы

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

В первую очередь необходимо подключить плагин (скачать на GitHub / подключить с CDN), инициализировать его:

Но есть одна тонкость в адаптации сайта под мобильные устройства: скрипт считает ширину таблицы, а не ширину viewport-а. Поскольку нам необходимо эту ошибку устранить, важно чуть «модернизировать» скрипт:

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

Далее для ячеек в шапке таблицы, посредством data-атрибутов указываем на каких размерах какие колонки будут скрываться:

Что мы имеем в виду? На планшетах будут скрываться колонки «RAM», «Диагональ», «PPI», «Аккумулятор». При использовании на еще меньшем, телефонном экране, скроется также «Цена».

В инициализации можно установить контрольные точки:

Получается, в диапазоне 0-720 правилу подчиняются mobile, 720-1024 — tablet, а выше 1024 — desktop. При необходимости вы можете создать большее количество правил.

Еще у вас есть возможность раскрыть определенную колонку по умолчанию. В таком случае указываем data-атрибут data-expanded=«true»:

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

Адаптация сайта под мобильные устройства онлайн: 6 лучших сервисов

  1. mobiSiteGalore

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

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

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

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

Здесь удастся разработать мобильную версию веб-сайта, используя два подхода: сделать все самостоятельно с помощью mofuse либо провести адаптацию сайта под мобильные устройства, заказав ее у команды специалистов.

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

  1. Mobile App America

Этот вариант предоставляет улучшенный аспект SEO для вашего веб-сайта. Благодаря его возможностям, вы опередите конкурентов, чьи порталы пока даже не имеют мобильной версии. Пока готовился данный текст, приложение поддерживало устройства iPhone, Blackberry, Android.

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

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

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

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

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

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

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

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

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

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

Далее рассмотрим основные функции мобильного редактора.

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

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

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

Изменения, вносимые вами в мобильном редакторе — никак не отразятся на основном (десктопном) варианте сайта.

Количество колонок в ряду

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


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

До настройки количества колонок в ряду все колонки выстроены в одну строку, где каждая колонка сильно сжата по ширине и выглядит некрасиво.

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

Размер картинок

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

Вы можете регулировать размер изображений в блоке Картинка точно так же, как в обычном редакторе, потянув за «тянучки» вокруг картинки.

Изменение текста

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

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

— Размер текста (1)

— Выравнивание по горизонтали. Слева, по центру, справа. (2)

— Верхний и нижний отступы текста, потянув за «тянучки» сверху и снизу текста (3)

— Переписать сам текст в блоке (так же, как и в основном редакторе – просто прописывая в блоке нужный текст. Этот вариант не будет показываться в основном редакторе – изменения только для мобильного варианта).

Чтобы сохранить изменения в блоке обязательно нажмите кнопку сохранения изменений (4).

Регулирование отступов секций

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

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

Формы и кнопки

Пока в ограниченном режиме, но есть возможность настроить расположение кнопок и форм в мобильном редакторе.

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

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

Для изменения ширины кликните по форме и потяните мышью за тянучки слева и справа от формы.

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

Создать мобильную копию секции

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

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

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

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

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

Если говорить понятным языком, то сайты, которые будут иметь мобильные, адаптивные версии, которые будут правильно отображаться на мобильных устройствах (проверить как отображается сайт и соответствует ли всем требованиям можно в статье «Проверить сайт на мобильных устройствах. 5 лучших сервисов«), будут повышаться в выдаче и лучше ранжироваться, будет существовать отдельный мобильный поиск и десктопный. Всех нюансов алгоритма никто не знает, поэтому на 100% говорить и обещать ничего не буду.

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

Так как грядут большие изменения, я решил написать статью о 3-х способах адаптации сайта под мобильные устройства. Данные способы хорошо поддерживаются как поисковой системой Google так и Яндекс.

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

Давайте перечислим данные методы:

  1. Адаптивный дизайн. При данном способе, дизайн сайта и весь его функционал адаптируется под все виды разрешений экранов. Сайт подстраивается под экраны разных устройств (ПК, смартфоны, планшеты), при этом url — адреса остаются неизменными и сервер отправляет одинаковый html код всем устройствам, не зависимо от разрешения.
  2. Динамический показ или еще называют RESS (Responsive Design + Server S >Теперь давайте более подробно разберемся с каждым способов и определим преимущества и недостатки, а так же выберем вариант, который будет правильно использовать при различных типах сайта.

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

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

Как уже говорилось — это конфигурация сайта при которой сервер отправляет на все виды устройств одинаковый html код. Для адаптации сайта обычно используют CSS медиа запросы (Media Queries), которые прописываются для необходимых расширений экрана.

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

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

  • Используется один url для всех устройств. Один url хорош тем, что нам не нужно будет делать 301 редиректы с мобильной версии, так же наличие одного url хорошо скажется на самом продвижении вест вес будет хранится на одной странице.
  • Удобство и быстрота разработки. Если сайт не адаптирован под мобильные устройства — это не проблема. С помощь. медиа запросов можно быстро и удобно решить все данные проблемы. Так же в решении данной задачи хорошо могут помочь Фреймворки, которые уже содержат в своих библиотеках стили для адаптивного дизайна (к примеру Twitter Bootstrap).
  • Алгоритмы Google автоматически распознают данный способ, если все агенты пользователя Googlebot могут сканировать содержимое страницы (JavaScript, HTML, CSS).

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

  • Скорость загрузки страницы. Все тяжелые элементы ролики, графика, эффекты — должны быть заменены на более легкие. Так же необходимо сжимать html, css, JavaScript код и графические элементы, в противном случае, скорость загрузки страницы будет хромать и пользователь не сможет увидеть всей картины. Как проверить и увеличить скорость загрузки сайта, можно посмотреть в статье «Скорость загрузки сайта, проверить и увеличить ее«.
  • Одинаковый функционал на всех устройствах. Как правило гугл рекомендует при адаптивном дизайне оставлять все элементы и не скрывать их. Но задачи для пользователей на ПК и мобильных устройствах отличаются, поэтому пользователи мобильных устройств должны получать более упрощенную версию, но это противоречит рекомендациям Google.
  • Не возможно отключить адаптивный дизайн. Если мобильную версию сайта можно отключить или перейти на стандартную версию ПК, то адаптивный дизайн отключить не возможно и пользователь телефона будет видеть только версию для данного устройства.

Динамический показ или RESS (Responsive Design + Server S >Как уже было сказано выше, url адрес не меняется при данном способе, но сервер отдает разный код для устройств (ПК, планшеты, телефоны). Рекомендуется, что бы сайт посетил Googlebot для смартфонов и просканировал его.

Динамический показ — RESS

Преимущества RESS (Responsive Design + Server Side):

    Возможность использовать разную верстку для разных устройств на разных ОС (Andro >Недостатки RESS (Responsive Design + Server Side):

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

Разные url или отдельная мобильная версия сайта.

Как уже говорил, в этой конфигурации содержание для ПК содержится на одном url адресе (loleknbolek.com), а для планшетов и мобильных устройств на другом, как правило поддомене (m.loleknbolek.com).

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

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

  • Удобно для пользователя. Как правило мобильная версия намного проще чем версия для ПК, потому пользователям легче с ней работать.
  • Скорость загрузки. Так как мобильная версия весит на много меньше, то соответственно и скорость загрузки будет быстрой, что пользователю не нужно будет ждать некоторое время.
  • Возможность перехода на десктопную версию. В большинстве случаев с мобильной версии можно перейти на ПК версию.
  • Легкая поддержка. Мобильная версия — это отдельный сайт, поэтому при изменении кода не затрагивается основной сайт.

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

  • Разные url адреса. Мобильная и десктопная версия имеют разные url адреса, поэтому необходимо для ПК версии указывать альтернативный url, а для мобильной версии канонический адрес. И такую процедуру необходимо проводить со всеми страницами, а если их много, то соответственно и времени на данную работу будет затрачено не мало.
  • Ограниченность в функционале. Мобильная версия намного проще, чем десктопная, поэтому много фишек не используется.
  • Неудобство для пользователей. Необходимо запоминать два адреса как десктопной так и мобильной версии сайта.
  • Время на создание. Большие проекты тратят много времени на создание мобильной версии, особенно если текст отличается от того, что задан в версии для ПК.

К содержанию ↑

Какой способ выбрать?

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

  • Блоги, коммерческие сайты, сайты визитки, информационные сайты, не большие интернет — магазины (до 500 товары) — лучше всего использовать адаптивный способ.
  • Интернет — магазины, игровые порталы, кинотеатры, одним словом большие проекты — лучше всего использовать RESS или отдельную мобильную версию.

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

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


Здравствуйте уважаемый посетитель!

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

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

В связи с тем, что объем данного материала не позволяет рассмотреть его одной статье, эта тема разбита на 3 части:

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

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

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

  • Как имитировать просмотр сайта с мобильного устройства на обычном компьютере
  • Составляем адаптивный макет (прототип)
  • Определяем контрольные точки в медиа-запросах
  • Определяем способ адаптация
  • Изменяем масштабирование веб-страниц
  • Исходные файлы сайта

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

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

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

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

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

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

Для того, чтобы открыть панель разработчика возможно использовать кнопку F12, либо это можно сделать через меню браузера. Порядок открытия панели разработчика аналогичен, практически, для всех браузеров. Ниже приводится вариант открытия панели через меню браузера на примере Google Crome.

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

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

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

Составляем адаптивный макет (прототип)

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

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

К примеру, при ширине экрана в 320px на область контента у нашего сайта практически ничего не остается. В этом случае все место будет съедаться сайдбаром, который имеет фиксированную ширину 240px. Да, и Главное меню в шапке и в футере при такой ширине явно не поместится на странице.

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

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

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

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

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

Рис.3 Существующий вариант

Рис.4 Адаптивный вариант

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

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

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

Определяем контрольные точки в медиа-запросах

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

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

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

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

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

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

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

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

Определяем способ адаптация

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

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

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

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

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

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

Для этого будем использовать медиа-запросы «width» вместо «device-width». В дальнейшем, при непосредственном их формировании рассмотрим это более подробно.

Изменяем масштабирование веб-страниц

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

Как отмечалось ранее в обычном режиме страница масштабируется на всю ширину экрана (это наглядно видно из рис.2).

Для того, чтобы страница отображалась в соответствии с размером экрана устройства существует метатег «viewport», который сообщает браузеру, как следует обрабатывать размеры страницы и изменять ее масштаб. В этом случае для метатега устанавливается значение w >

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

Данный метатег необходимо добавлять в заголовок на всех страницах (в нашем случае в файлы «index.php», «article.php», «righting.php», «action.php» и «contacts.php»).

Ниже показано как будет выглядеть фрагмент файла «index.php» с добавленным метатегом «viewport» в заголовок .

name = «viewport» content» = w >>


name = «Description» content=» «Краткое описание содержания страницы» >

Ниже, на скриншоте можно увидеть, как теперь стала отображаться страница на смартфоне iphone 5 .

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

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

Исходные файлы сайта

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

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

Мобильное SEO: 6 шагов к адаптации сайта под мобильные устройства

Дата публикации: 2015-05-12

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

(Прим. пер.: От «только компьютерные фанаты будут пользоваться Интернетом» до «каждый пялится в свой смартфон весь день напролет» через 20 лет. Неплохо, команда .)

Телефон стал продаваться примерно с 1878 года, но потребовался 71 год, прежде чем он появился в каждом доме в США. Это позволило типичному владельцу бизнеса в 1907 году размышлять на протяжении 50 лет, нужен ли ему телефон в магазине или нет.

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

Почему мобильные устройства стали сейчас жизненно важными

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

1. Мобильные устройства стали основным трендом

В 2007 году компания Apple выпустила свой первый iPhone. За последующие 12 месяцев все остальные производители телефонов начали выпускать собственные новые продукты, чтобы быть конкурентоспособными. Сегодня около 75 процентов опрошенных подписчиков в США имеют смартфоны.

Это однозначный рост по сравнению с 65.2 процента в декабре 2013 года. И предполагается, что текущий показатель будет выше 80 процентов к концу года. Смартфоны стали основным трендом.

2. У владельцев мобильных устройств выше покупательское намерение. Потребители используют смартфоны для принятия решений о покупках

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

Фактически люди, пользующиеся для поиска мобильными устройствами, совершили 30 миллиардов входящих телефонных звонков владельцам бизнесов в США за 2013. И эта цифра продолжает расти. Согласно недавнему отчету эта цифра составит 73 миллиарда звонков к 2020 году. В отчете говорится следующее:

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

Около 78 процентов поисков местных товаров или услуг через мобильные устройства заканчиваются покупками.

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

3. Потребители, пользующиеся мобильными устройствами, быстрее принимают решение

Тоже самое исследование показало, что три четвертых (76 процентов) от всех покупок совершались в тот же день, а большинство из них (63 процента) – в течение нескольких часов.

4. Google делает акцент на мобильных устройствах

В прошлом ноябре — впервые за все время — трафик с мобильных устройств превысил визиты с настольных компьютеров у Google.

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

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

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

И «эксперимент» завершился. С 21 апреля Google официально начал использовать критерий «для мобильных» для ранжирования веб-сайтов в поисковой выдаче.

Красные метки «медленный»

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

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

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

Вот критерии, которые приводит Google:

Не используются технологии, которые не свойственны мобильным устройствам, например, Flash

Используется текст, который является читабельным без масштабирования

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

Ссылки располагаются на достаточном друг от друга расстоянии, чтобы на них можно было легко нажать

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

Вы не уверены, адаптирован ли ваш сайт под мобильные устройства или нет? Используйте для этого специальную тестовую страницу Google. Если ваш сайт не пройдет тест, то вы увидите следующее:

6 шагов для адаптации вашего сайта под мобильные устройства

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

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

Добавьте ваш сайт в «локальный» раздел на сайтах Google, Yahoo и Bing

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

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

Другие локальные перечни

Грубо говоря, половина поисковых запросов с мобильных устройств осуществляется с помощью приложений. И хотя приложение Google Maps является наиболее популярным, Yahoo, Mapquest, Bing, Yellowbook, Yelp, Superpages и Apple Maps занимают более половины рынка приложений. Поэтому также важно оказаться в списках данных приложений.

На самом деле существует более 250 локальных поисковых каталогов, «желтых страниц», сайтов с обзорами местных бизнесов, в которых вам будет полезно оказаться. Данные ресурсы получают информацию из четырех основных источников: Infogroup, Localeze, Acxiom и Factual. Первые три позволяют вам добавить информацию о вашем бизнесе в их базу данных – за плату, конечно. В итоге информация о вашем бизнесе появится на каждом ресурсе, для которого предоставляются данные.

Для получения более подробной информации прочтите статью [Локальное SEO: Основы] (http://www.sitepoint.com/basics-local-seo/).

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Реклама в Google

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

2. Выберите решение для создания сайта, адаптированного под мобильные устройства

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

Отзывчивый дизайн – это «гибкая» сетка, которая автоматически «отзывается» (т.е. масштабируется) на изменение размеров экрана.

Мобильная версия – это мобильная копия сайта, доступная по отдельному URL адресу. Вместо www.example.com посетители с мобильных устройств будут перенаправлены на m.example.com.

Динамический показ – это конфигурация, при которой сохраняется URL адрес, но сервер, в зависимости от устройства, отправляет разные варианты веб-страницы.

С точки зрения веб-разработки, каждый из методов имеет свои достоинства и недостатки. Для получения более подробной информации прочтите руководство для создания сайтов, адаптированных под мобильные устройства, от SEO PowerSuite.

Варианты адаптация сайтов на WordPress под мобильные устройства

Если у вас уже есть работающий сайт на WordPress, проверьте его с помощью тестовой страницы Google. Если тест на адаптацию под мобильные устройства не будет пройден, тогда у вас будет два варианта:

Много современных тем для WordPress являются адаптивными. Подумайте о замене своей старой темы.

Если смена темы вас не устраивает, то существует масса бесплатных и платных плагинов, которые вам помогут.

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

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

4. Сделайте так, чтобы сайт не загружался медленно

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

Уменьшение числа HTTP запросов

Каждое изображение, CSS и JavaScript файл создают отдельный HTTP запрос к серверу. Вот некоторые техники по уменьшению числа запросов:

Убедитесь в том, что у вас всего один внешний CSS файл и внешний JS файл.

Разместите внутренний JavaScript код внизу вашего html документа, перед закрывающим тегом body.

Минифицируйте CSS и JavaScript код.

CSS спрайты помогут объединить многочисленные запросы в всего лишь один.

Используйте data: URI.

Избегайте неправильных HTTP запросов, убирая «битые» ссылки.

Включите браузерное кеширование.

Оптимизация изображений

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

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

5. Избегайте типичных ошибок

Использование всплывающих окон. Всплывающие окна не работают на мобильных устройствах. Они закрывают весь экран, и найти на них крошечный «x», чтобы закрыть их, бывает почти невозможно.

Блокировка CSS, JavaScript файлов или изображений

Индексирующие системы Google раньше напоминали старые браузеры, которые отображали только текст, поэтому поисковикам не нужно было просматривать или индексировать подобные файлы. Чтобы этого не происходило, веб-мастера часто запрещали просмотр и индексирование подобных файлов в файле robots.txt. И системы управления контентом (например, Joomla, до июля 2014 года) часто блокировали такие файлы по умолчанию.

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

Неправильные редиректы

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

Если же ваш сайт перенаправляет пользователей каждый раз на главную страницу мобильной версии сайта (независимо от запрашиваемого URL адреса), то это проблема – и для поискового робота Googlebot и для ваших пользователей. Google в таком случае будет понижать позицию вашей мобильной версии сайта в поисковой выдаче, если редиректы работают неправильно.

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

Отслеживайте ваши позиции в поисковой выдаче. Инструмент Rank Tracker от SEO PowerSuite поможет отследить ранжирование вашего сайта в поисковой выдаче для мобильных устройств.

Узнайте, как обновление Google повлияет на позиции вашего сайта. Обеспокоены тем, что потеряете занимаемые позиции после добавления критерия «для мобильных» в Google? Ознакомьтесь с руководством на сайте Search Engine Land, чтобы оценить возможные потери трафика.

Используйте ключевые слова, характерные для осуществления поиска с мобильных устройств. У вас не хватает ключевых слов, которые используют ваши посетители для поиска с мобильных устройств, но не используют для поиска с настольных компьютеров? Инструмент Google Keyword Planner поможет вам решить эту проблему.

Заключение

Я начал данную статью с одной цитаты, а закончу другой:

Данные находки и результаты исследований … следует расценивать не иначе как «пинок под зад» тем маркетологам, которые «тянули резину» или вкладывали недостаточное количество средств в создание веб-сайтов, адаптированных под мобильные устройства. Сейчас самое время подойти к этому серьезно. Иначе вы рискуете потерять, возможно, половину ваших посетителей. – Грег Стерлинг (Greg Sterling), сайт Marketing Land

Автор: John Tabita

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

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

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

  • Онлайн инструмент от Google: «Проверка удобства просмотра на мобильных устройствах». Для проверки перейти по ссылке: www.google.ru/webmasters/tools/mobile-friendly/.Кроме этого, рекомендую проверить скорость загрузки сайта.
  • Яндекс также даёт советы. Для этого необходимо добавить свой сайт в Яндекс.Вебмастер и перейти в раздел «Инструменты» -> «Проверка мобильных страниц».

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

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

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

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

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

Расположить мобильную версию лучше на поддомене с понятным для пользователей названием. Например, m.amalbakov.ru. Яндекс сам поймёт, что это мобильная версия сайта и будет использовать её при ранжировании сайтов в мобильном поиске.

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

Плагины и бесплатные решения по мобильной версии

Найти готовое для своей CMS не сложно. Для wordpress например существуют готовые плагины:

  • WPTOUCH — мобильный плагин для вашего сайта на WP. Ссылка: wordpress.org/plugins/wptouch/
  • MobilePress — еще один бесплатный плагин. Ссылка: wordpress.org/plugins/mobilepress/

Аналогично можно найти решение для всех популярных систем управления сайтами: от opencart и prestashop до DLE и JOOMLA. Большинство современных конструкторов сайтов уже соответствуют трендам и имеют возможность подключения мобильной версии. Не отставайте и вы!

Почему удобство пользователей с мобильных устройств важно при продвижении сайта?

Доля пользователей интернета (соответственно Яндекса и Google) с мобильных устройств постоянно растёт. Пользователям удобней совершить действие с телефона или планшета, чем тянуться к ноутбуку или компьютеру.

Google впервые в истории сравнялся с Яндексом по количеству аудитории благодаря пользователям с мобильных устройств на андроиде. Это еще раз доказывает ценность аудитории с мобильных устройств, о удобстве которых необходимо задуматься. Кроме этого, удобство пользователей — это один из коммерческих факторов ранжирования.

Мастер Йода рекомендует:  Бесплатная «вечная» реклама любого товара раскрутка сайта.
Добавить комментарий