10 советов, как адаптировать свой сайт под мобильные устройства
Люди тратят больше трех часов в день на серфинг в интернете со смартфонов. Именно мобильные устройства стали основным гаджетом, который люди используют для чтения новостей, просмотра видео и совершения покупок. Сегодня недостаточно сделать сайт, который быстро загружается и красиво выглядит на ПК. Большинство посетителей заходят на сайты со смартфонов, поэтому разработчики все чаще используют стратегию «mobile first» при создании сайтов.
Существует несколько способов адаптировать сайт под мобильные устройства. Адаптивная верстка или установка адаптивной темы — наиболее простой и современный способ «подружить» сайт со смартфонами и планшетами.
Что такое mobile-friendly сайт?
Мобильные устройства — горячая тема в веб-дизайне, потому что сейчас трафик со смартфонов и планшетов превышает количество посещений с ПК. Сайт mobile-friendly оптимизирован под мобильные устройства и правильно отображается на каждом из них.
Существует несколько способов «подружить» сайт с мобильными устройствами:
- Адаптивный дизайн. Это наиболее простой способ, подразумевающий установку адаптивного шаблона (или создание его с нуля). Такой шаблон подстраивается под размер экрана, меняя размещение и размер элементов, или вовсе скрывая их. Если ваш сайт работает на CMS, например, WordPress или Joomla!, выберите одну из адаптивных тем, чтобы сделать сайт mobile-friendly.
- Мобильная версия на субдомене. Это более трудоемкий путь, подразумевающий создание отдельной версии сайта. По факту, это отдельный домен с полноценным функционалом, скриптами, корзиной заказов, отдельным каталогом товаров. Для такого сайта потребуется мультидоменный сертификат SAN, чтобы не покупать несколько SSL для каждого субдомена.
Для большинства сайтов создание адаптивного дизайна более целесообразно. Отдельная мобильная версия подойдет крупным порталам, социальным сетям, доскам объявлений.
Что такое адаптивный дизайн?
Адаптивные сайты могут адаптироваться под размер экрана пользователя. При масштабировании страницы содержимое будет менять расположение и размеры, чтобы все элементы были представлены наилучшим образом. Адаптивные сайты одинаково хорошо выглядят на ПК, ноутбуке, планшете или смартфоне. Однако для этого веб-сайту нужна оптимизация.
Типичный веб-сайт состоит из набора страниц. Каждая страница содержит HTML-код и контент (текст и изображения), скрипты. Дизайн веб-страницы оформляется с помощью файлов, называемых каскадными таблицами стилей (CSS). Для простоты объяснения предположим, что неадаптивный веб-сайт имеет один файл CSS, который управляет дизайном. Адаптивный сайт применяет дополнительный файл CSS в зависимости от устройства, с которого пользователь заходит на сайт. Дизайн будет отображаться по-разному в зависимости от устройства.
Адаптивный дизайн не требует отдельного макета для каждого устройства. Достаточно установить одну адаптивную тему или заказать разработку одного макета. Это также избавляет от необходимости настраивать редиректы для направления пользователя на нужную версию сайта. А если вы управляете несколькими доменами и хотите передать эту работу на аутсорс, TutHost предлагает управление DNS-записями недорого.
10 советов, как сделать сайт mobile-friendly
Следующие советы помогут адаптировать ваш ресурс под мобильные устройства. Это не только увеличит трафик со смартфонов, но и станет положительным сигналом для Google.
1. Установите адаптивную тему
Это первый и самый важный шаг. Сегодня каждый ведущий конструктор веб-сайтов предлагает адаптивные шаблоны. Squarespace идеально адаптируется к мобильным устройствам и будет лучшим выбором, если вы создаете сайт с нуля. Все шаблоны Wix адаптированы для мобильных устройств, но обязательно проверяйте размещение элементов при разработке дизайна.
Если вы создаете сайт с помощью CMS, такой как WordPress, убедитесь, что тема, которую вы выбрали, адаптирована для мобильных устройств. Просто введите «responsive» в библиотеке тем WordPress или найдите шаблон на стороннем сайте, таком как Themeforest. Обязательно читайте отзывы и, если возможно, загляните на любые сайты, использующие эту тему, со своего мобильного телефона, чтобы оценить ее.
Если ваш веб-сайт был создан с использованием старого, неадаптивного шаблона, и вы по каким-либо причинам не можете изменить его, добавьте следующую строку кода в секцию <head> каждой страницы:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Это означает, что ваши страницы должны автоматически переформатироваться, чтобы соответствовать ширине экрана посетителя.
2. Упростите меню
Один из лучших советов по созданию mobile-friendly сайтов включает разработку удобной навигации. Всякий раз, когда посетители попадают на ресурс, они должны легко понять структуру вашего веб-сайта и перейти в интересующие разделы без какой-либо путаницы.
Предположим, посетитель приходит на ваш сайт, чтобы купить определенный товар. Не перегружайте его статьями о продукте, подпиской на рассылку новостей и предложениями подписаться на вас в соцсетях. Вам нужно только обеспечить максимально легкий процесс покупки, чтобы посетители могли выбрать продукт и заказать его за считанные секунды.
В разработке ПО и веб-приложений модель KISS (Keep it simple stupid) используется для создания приложения с удобным интерфейсом, понятными функциями навигации и минимальным количеством задач. Согласно этому принципу любой пользователь должен перейти на сайт, выполнить нужные действия, никуда не отвлекаясь, и в итоге получить желаемое настолько просто, насколько это возможно.
3. Не отпугивайте посетителей формами заполнения
Еще одна важная вещь, которую следует учитывать при создании мобильной версии, — это формы. Они часто бывают длинными и сложными, и их не всегда просто заполнить на мобильном устройстве. Слишком долгое заполнение форм является распространенной причиной отказа от целевого действия.
Чтобы сделать формы проще и удобнее для использования на мобильных устройствах, отключите функцию автозамены. Это не позволит клавиатуре изменить то, что вы печатаете, и упростит заполнение формы. Убедитесь, что все поля формы достаточно велики, чтобы их можно было легко нажимать на смартфонах с маленьким экраном.
Если форма более длинная, сократите количество полей или разбейте ее на несколько страниц, чтобы пользователям не приходилось прокручивать длинный список полей.
4. Четко отобразите кнопку CTA
При создании адаптивной или мобильной версии сайта помните, что у вас ограниченные возможности привлечь внимание посетителей. Мобильные пользователи рассчитывают быстро найти нужную информацию. Если вы не предложите им выполнить целевое действие в течение нескольких секунд, то снизите вероятность конверсии. В идеале кнопка СТА должна быть заметна сразу, в течение 1-3 секунд.
Разместите CTA на видном месте. Чем более визуально отчетливым и явным вы сделаете CTA на своем сайте, тем быстрее добьетесь конечной цели. 49% мобильных пользователей используют большие пальцы для навигации и нажатия на элементы, которые находятся в пределах досягаемости. Это означает, что любой элемент, размещенный в углах веб-сайта, будет труднодоступным для большинства пользователей. Убедитесь, что все кнопки СТА большие и расположены в центре экрана, где до них легко добраться.
5. Добавьте функцию поиска
Функция поиска необходима практически любому крупному сайту. Неважно, продаете вы товары или публикуете статьи, посетителям будет значительно проще найти нужную информацию в строке поиска. Сделайте строку поиска заметной, чтобы пользователям не пришлось долго искать ее. Так вы поможете им найти нужную категорию или товар, тем самым повысив коэффициент конверсии.
6. Облегчите клиентам связь с поддержкой
Посетители могут захотеть связаться с вами. Причины самые разные: вопрос по товару, сложности с оформлением заказа, замечания по работе сайта, выражение благодарности. Сделайте так, чтобы ваши клиенты могли легко связаться с поддержкой. Популярные варианты включают онлайн-чат, форму обратной связи или просто номер телефона, указанный на видном месте.
Позаботьтесь о том, чтобы найти контакты или кнопку вызова онлайн-чата не составило труда даже ребенку.
7. Размер имеет значение
Это утверждение подходит ко всем элементам сайта, когда речь идет о мобильной версии. Пользователям неудобно нажимать слишком маленькие кнопки, выбирать мелкие пункты меню, читать мелкий или, наоборот, очень крупный шрифт.
Сделайте кнопки достаточно большими, разделите пункты меню, чтобы избежать случайных нажатий, выберите крупный шрифт. Не располагайте интерактивные элементы в углах — это самое неудобное место размещения для пользователей смартфонов.
8. Исключите или минимизируйте всплывающие окна
Пользователи не очень любят всплывающие окна, но при осторожном использовании они могут очень хорошо работать на десктопной версии сайта. Когда дело доходит до мобильных устройств, лучше избегать всплывающих окон. На маленьком экране они вызывают у пользователей лишь раздражение. Такое окно мешает просмотру контента, а закрыть его может быть сложно — нужно попасть пальцем в маленький крестик в углу экрана.
9. Подберите правильный шрифт
Размер шрифта важен при просмотре сайта с мобильного телефона. Никто не хочет присматриваться к мелким буквам, но и огромные символы отпугнут посетителей. Рекомендуется использовать шрифт размером не менее 14 пикселей, но проверьте, как он выглядит на мобильной версии — скорее всего, вы обнаружите, что он маловат, и вы захотите немного увеличить его.
Проверьте читабельность шрифта. Можно попробовать экспериментальный шрифт на десктопе, но вряд ли этот шаг уместен на мобильных устройствах.
При работе над мобильным представлением сайта у вас гораздо меньше пространства для внедрения оригинального дизайна. В десктопной версии вы можете отделять текст разрывами, пустым пространством или изображениями. На мобильных устройствах попробуйте вместо этого выделять линиями или жирным шрифтом разные фрагменты текста, чтобы они не сливались друг с другом.
10. Скорость в приоритете
Скорость — один из самых важных факторов в работе сайта. По статистике, 47% посетителей покидают сайт, если он загружается более 3 секунд. Если речь о мобильной версии, их количество увеличивается до 53%.
Чтобы увеличить скорость загрузки, необходимо сжать файлы, такие как изображения, CSS и скрипты. Чем легче эти файлы, чем быстрее будут загружаться страницы. Чтобы увеличить скорость, старайтесь, чтобы интерфейс был чистым и простым, не перегруженным изображениями и видео. Это поможет пользователям быстрее увидеть контент и остаться на вашем сайте.
Безопасность сайта также важна. Установите SSL-сертификат от Comodo, чтобы повысить ее. Мы также предлагаем удобные SSL утилиты.
Регулярно тестируйте и оптимизируйте сайт на разных устройствах и размерах экрана, даже после разработки. Гаджеты постоянно меняются и развиваются, поэтому оптимизация крайне важна для сохранения трафика и продвижения в поисковых системах.Используя упомянутые методы, вы можете регулярно улучшать свой веб-сайт на протяжении всего его жизненного цикла. Эти советы помогут определить и устранить потенциальные проблемы, которые могут возникнуть у пользователей мобильных устройств на вашем ресурсе. А если вы хотите зарабатывать вместе с TutHost, предлагаем выгодный реселлинг SSL-сертификатов, пользующихся высоким спросом в Украине и за ее пределами.
