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

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

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

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

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

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

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. Приоритет захватывают ресурсы, которые поработали над оптимизацией контента под гаджеты, поэтому вам нужно не отставать за тенденцией и уделить время именно этому. Если вы уже занялись этим вопросом — хорошо. Но в этой статье вы найдете множество советов, которые уж точно станут не лишними.