Адаптировать сайт под мобильные устройства: Как Адаптировать Сайт под Мобильные Устройства: Руководство

Как Адаптировать Сайт под Мобильные Устройства: Руководство

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

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

Оптимизация Сайта под Мобильные Устройства — Почему это Важно?

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

Таким образом, наличие мобильного сайта автоматически открывает двери для большей аудитории. Фактически, 70% интернет-трафика сегодня (англ) приходит с мобильных телефонов.

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

Более того, 89% людей (англ), отметили, что готовы рекомендовать бренд, если их мобильный опыт будет положительным.

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

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

Преимущества Отзывчивого Сайта

Создание хорошего мобильного сайта начинается с отзывчивого дизайна.

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

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

1. Лучше для SEO

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

2. Не Нужно Создавать Новый Дизайн Сайта

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

Таким образом, вы сэкономите много времени и энергии. 

3. Легче в Управлении и Экономней

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

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

7 Советов, Как Адаптировать Сайт под Мобильные Устройства

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

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

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

1. Придерживайтесь Подхода Mobile First

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

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

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

2. Преобразование Десктопной Версии Сайта в Мобильную

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

К счастью, есть как минимум два очень хороших способа сделать: конвертировать ваш сайт с помощью онлайн-сервиса или плагинов CMS.

Преобразование Сайта с Помощью Конструктора Онлайн

Во-первых, вы можете использовать специальный онлайн-сервис. Два самых популярных сервиса для создания мобильной версии сайта — bMobilized и Duda Mobile.

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

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

Ещё один отличный сервис — Duda Mobile. Главная функция этого конструктора — создание полнофункциональных мобильных сайтов.

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

Кроме того, Duda Mobile предлагает набор расширенных функций для разработки отзывчивых сайтов электронной коммерции с поддержкой мультиязычности. Однако за такой функционал вам придётся заплатить от 22$ до 46$ в месяц.

Создание Мобильной Версии Сайта с Помощью Плагинов CMS

Второй вариант, как адаптировать сайт под мобильные устройства — использовать плагины CMS. Однако этот метод лучше подходит тем, у кого уже есть готовый сайт на CMS Joomla, Drupal или WordPress.

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

Что касается пользователей Joomla, то им доступны такие решения, как Responsivizer и JoomlaShine.

Если же вы используете Drupal, рекомендуем ThemeKey и MobileTheme.

Однако имейте в виду, что не все из этих плагинов доступны бесплатно. Например, премиум-план WPtouch pro Enterprise обойдётся вам до 359$ в год.

3. Установите Отзывчивую Тему

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

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

Avada — одна из самых быстрых и отзывчивых тем в WordPress. С этой темой скорость загрузки вашего сайта на мобильных устройствах не превысит секунды.

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

Pingdom — лучший инструмент для проверки производительности сайта, который предоставит исчерпывающие данные о скорости загрузки страниц. Всё, что вам нужно сделать, это скопировать ссылку вашего сайта, а затем вставить её в столбец URL. Выберите, где вы хотите начать тестирование, и нажмите кнопку «Начать тест» («Start Test»).

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

Инструмент также предложит некоторые советы, как улучшить скорость.

Вот результат теста живой демонстрационной версии темы Avada — сайта-портфолио.

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

4. Никогда не Используйте Flash

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

Кроме того, Flash может навредить SEO.

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

5. Поддерживайте Скорость Сайта

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

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

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

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

• Уменьшите количество публикаций на главной странице (ограничьтесь 5-10 постами).
• Удалить ненужные виджеты.
• Удалите неважные, неактивные или ненужные плагины.
• Поддерживайте чистоту и порядок на странице.

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

6. Следите за Внешним Видом Вашего Сайта

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

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

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

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

7. Включите Ускоренные Мобильные Страницы (AMP)

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

AMP широко используется ведущими компаниями, включая Twitter, New York Times и Adobe. Вот несколько причин, почему она так популярна.

Ускоряет Загрузку Сайта на Мобильных Устройствах

По данным Google, около 53% мобильных пользователей покидают сайт, загрузка которого занимает более 3 секунд (англ).

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

Делает Сайт Более Заметным в Поиске

Google обозначает AMP-сайты в мобильном поиске иконкой молнии. Её задача, обозначить для пользователей сайты с поддержкой AMP и без.

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

Google AMP Cache Повышает Производительность Сервера

Google AMP Cache — сеть доставки контента (CDN), основанная на прокси. Используется для ускорения процесса передачи данных с действительных документов AMP пользователю.

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

Вот некоторые функции Google AMP Cache, которые могут повысить производительность вашего сервера: 

• Может сохранять изображения и данные шрифтов
• Автоматически ограничивает максимальные размеры изображения
• Конвертация изображений в форматы для мобильных устройств
• Может снизить качество изображения, чтобы ускорить процесс загрузки
• Использует безопасные каналы (HTTPS) и последние версии веб-протоколов (SPDY, HTTP/2).

Выводы

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

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

• Придерживайтесь подхода Mobile first.
• Превратите свой десктопный сайт в мобильный с помощью онлайн-сервисов, таких как bMobilized и Duda Mobile, или воспользуйтесь плагином мобильной оптимизации для вашей CMS.
• Используйте отзывчивую тему и протестируйте её с помощью Pingdom.
• Не используйте Flash!
• Поддерживайте нормальную скорость вашего сайта, используя быстрый и надёжный хостинг.
• Убедитесь, что ваш сайт хорошо выглядит.
• Попробуйте использовать ускоренные мобильные страницы (AMP), чтобы повысить производительность веб-сайта на мобильных устройствах.

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

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

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

3 способа быстро адаптировать сайт под мобильные устройства | SiteClinic.ru

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

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

Оно мне надо?

Ответ на этот вопрос можно найти, проверив, как ваш сайт отображается в следующих сервисах тестирования Google:

Если вы видите подобное сообщение — статья для вас:

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

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

Как реализовать?

Можно смело брать один из CSS-фреймворков (bootstrap, responsivegridsystem, Sceleton и пр.) и адаптировать существующий дизайн. Либо используйте CSS3 Media Queries.

Например, если использовать фреймворк bootstrap, то вам понадобится, вкратце:

1. прописать view-port;
2. подключить файлы фреймворка;
3. добавить в разметку классы сетки bootstrap.

Или же в таблице стилей выделить через медиа-запросы (CSS3 Media Queries) несколько разрешений и задать оптимальные размеры элементов страницы, например:

@media screen and (max-width: 1280px) { div.contentblock {width: 1200px;} }
@media screen and (max-width: 1140px) { div.contentblock {width: 1024px;} }
@media screen and (max-width: 992px) { div. contentblock {width: 970px;} }

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

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

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

Что мы получим?

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

И рассмотрим пример. Меню для устройств с экраном более 768px выглядит так:

А для экранов менее 768px выглядит так (в свернутом виде):

И так, при клике на иконку в правом углу (в развернутом виде):

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

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

Как реализовать?

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

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

Среди них: WPTouch, WordPress Mobile Pack, WP Mobile Detector и т. д. Все эти плагины имеют несколько тем оформления и дополнительные полезные фишки вроде сбора статистики по мобильным пользователям.

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

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

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

Что мы получим?

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

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

Например, вот так сайт выглядит на ПК:

А вот так выглядит этот же сайт на мобильном:

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

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

Как реализовать?

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

Немного подробнее о реализации: создается поддомен, на нем такой же движок, как и на основном домене, но база данных используется одна на оба сайта (чтобы в случае внесения каких-либо изменений, не пришлось их добавлять дважды). При заходе с мобильного устройства происходит перенаправление пользователя на поддомен. В качестве имени поддомена обычно используют варианты: m.sitemane.com, mobile.sitename.com, pda.sitename.com и пр.

Примечание (спасибо читателям за вопрос): Чтобы обезопасить себя от проблем с дублированием контента, ознакомьтесь с рекомендациями Google и Яндекс.

И снова хорошая новость для владельцев сайтов на WordPress – есть плагины, которые создают мобильную версию вашего сайта на поддомене, например, WP Mobile Edition.

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

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

Что мы получим?

Дополнительный адрес сайта на поддомене ”m.” с отличным от основного домена дизайном, упрощенным. В сети примеров такой реализации полно, вот, например, известный всем сайт:

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

Подписаться на рассылку

Еще по теме:

Анна Себова

Web-разработчик

Пришла с небольшими знаниями в настройке, установке и принципах работы нескольких CMS. С тех пор «обросла» знаниями и опытом в разработке сайтов на следующих CMS, PHP и JS/CSS-фреймворках: WordPress, Joomla, Bitrix, MODx, Drupal, Codeigniter, Laravel, Bootstrap.

Разрабатывает, дорабатывает, перерабатывает и адаптирует сайты.

Девиз: если очень захотеть, можно в космос полететь

Оцените мою статью: 

Есть вопросы?

Задайте их прямо сейчас, и мы ответим в течение 8 рабочих часов.

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

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

Хьюстон, у нас проблема

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

Сайт или какие-то его части (картинки, таблицы) не помещаются целиком в экран:

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

Приходится прокручивать несколько экранов шапки (или фильтров), чтобы добраться до контента:

Всплывающие баннеры (более 50% экрана), либо слишком много рекламы:

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

1. Mobile Friendly от Google: https://search.google.com/test/mobile-friendly

Вбиваем адрес сайта, жмем «Проверить», видим результат:

2. Проверка мобильных страниц от Яндекса: https://webmaster.yandex.ru/site/tools/mobile-friendly/ (если ваш сайт уже добавлен в Яндекс.Вебмастер)

Выбираем адрес сайта, жмем «Проверить», видим результат:

3. Проверка в браузере в Инструментах разработчика

Открываем сайт в браузере и в меню (браузера) ищем пункт «Дополнительные инструменты» – «Инструменты разработчика». Либо жмем на клавиатуре F12. Если не сработало F12, жмем сочетание клавиш CTRL + Shift + I. Справа или внизу браузера нам откроется Панель разработчика, на ней жмем на иконку переключения на мобильные устройства и выбираем модель смартфона, на которой хотим проверить сайт:

Ключ на старт

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

Для разработки макета сайта для мобильных можно обратиться:

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

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

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

Поехали!

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

Шаг 1. Указываем тег Viewport

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

<meta name=»viewport» content=»width=device-width, initial-scale=1″>
<title>Автосервис Mr Red: ремонт и обслуживание автомобилей в Красноярске</title>

Здесь:
width=device-width – говорит браузеру, что ширина его окна должна быть равна ширине устройства,
initial-scale=1 – сайт нужно показать в обычном масштабе (без увеличения или уменьшения).

Если не указать тег viewport, то браузер будет по умолчанию считать ширину контента равной стандартной ширине для десктопа (1024 пикселя) – и на телефоне с шириной 340 пикселей ваш сайт будет уменьшен в 3 раза. Поэтому чтобы адаптивная верстка сработала, обязательно прописываем viewport с device-width.

Шаг 2. Обновляем стили сайта

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

/*
  … стандартные правила CSS …
  например, выводим карточки товаров по 4 в ряд
*/
@media (max-width:768px) {
  /*
    … правила для планшетов …
    выводим карточки товаров по 2 в ряд
  */
}
@media (max-width:320px) {
  /*
    … правила для смартфонов …
    выводим карточки товаров по 1 в ряд
  */
}

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

Что чаще всего делают дополнительные стили:

– Уменьшают число блоков в одном ряду. Например, на обычном компьютере выводится 4 блока в ряд (карточки товаров). Очевидно, что на экране телефона 4 карточки просто не поместятся в 1 ряд, так что здесь будем показывать по одной карточке.

– Скрывают какие-то блоки (совсем или под ссылку «Развернуть»). Например, у товара внушительное описание, которое на компьютере занимает почти целый экран. На телефоне такое описание может занять до 10 экранов. Их придется долго и нудно пролистывать, чтобы добраться до отзывов о товаре. Чтобы не нагружать пользователя, покажем на мобильных первый абзац описания, а остальной текст спрячем под ссылку «Показать все». Кто захочет прочитать полное описание, развернет его, в то время как все остальные будут избавлены от долгого пролистывания.

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

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

Шаг 3. Дорабатываем дизайн сайта

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

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

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

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

Шаг 4. Сокращаем количество рекламы и всплывающих окон

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

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

Шаг 5. Сокращаем количество контента

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

Пример: в статье на Хабре, открываемой с обычного компьютера, комментарии к статье загружаются сразу же в конце страницы – https://habr.com/company/mosigra/blog/427133/. А если открыть эту статью с мобильного, то страница будет содержать только текст статьи, без комментариев (и они не скрыты, они просто не выводятся для мобильных устройств). Под текстом статьи стоит кнопка «Комментарии», и по ней уже можно попасть на отдельную страницу с комментариями к статье. Конкретно для Хабра, где статьи часто и весьма охотно комментируют, это может экономить 3-5 секунд от загрузки страницы.

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

Шаг 6. Проверяем все страницы

Если на сайте до 200 страниц – лучше действительно отсмотреть их все. Потому что 20 карточек товаров могут отображаться нормально, а в описание 21-й кто-нибудь вставил видеоролик и прописал у него строго ширину в 900 пикселей – и вот этот ролик уже не помещается в экран мобильного.

Впрочем, если у вас тысячи страниц, то отсматривать каждую – не такая уж полезная трата времени. Тогда стоит проверить только важные страницы (продающие страницы, страницы с высоким трафиком и т.п.), и по 10-20 страниц в каждом разделе сайта (в каталоге товаров, в списке статей и т.д.).

Итог

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

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

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

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

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

По данным Statcounter, в мире более половины пользователей ищут что-то в интернете именно с мобильных. Google, в свою очередь, в руководстве для занятых руководителей The Mobile Playbook Google утверждает, что 40% пользователей уйдут на сайт конкурента, если у него есть хорошая мобильная версия. Неслучайно не оптимизированная мобильная версия или ее отсутствие снижает рейтинг интернет-ресурса в поисковой выдаче этого поисковика.

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

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

Если ваш сайт адаптирован под мобильные устройства, но вы не уверены правильно ли выполнена оптимизация, воспользуйтесь специальной проверкой от Google. Просто введите URL вашего сайта на сайте бесплатного сервиса Mobile-Friendly Test и нажмите кнопку “Проверить страницу”. Сервис оценить ваш сайт, а также предоставит полезные советы по его улучшению.

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

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

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

Быстрый адаптивный дизайн сайта

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

1. Знакомство с инструкциями Bootstrap — популярного фреймворка для разработки адаптивных сайтов. Собственно в них и расписаны все последующие шаги.
2. Подключение CSS, а если этого требуют компоненты JS и jQuery.
3. Проверка страниц на соответствие последним стандартами дизайна и разработки, например, используется ли HTML5 и метатег viewport, который отвечает за правильное отображение видимой части страницы на экранах разного размера.

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

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

• Не нужно создавать два отдельных макета. При адаптивном дизайне достаточно одного макета, который автоматически будет приспосабливаться к любым размерам экранов.
• Отсутствие лишней нагрузки на SEO-специалистов: не нужно создавать отдельные ссылки на страницы, так как мобильная версия всегда имеет приставку .m или .mobile; добавлять мета-теги rel=«alternative» и rel=«canonical», объясняющие поисковой системе, что контент в мобильной версии не был украден и продублирован; волноваться о правильно настроенных редиректах между версиями.
• Управление одним сайтом, а не двумя. Если нужно внести изменения, то они автоматически станут видны для пользователей, которые посещают ваш ресурс как с десктопа, так и с мобильных устройств.
• Google любит адаптивные сайты. И вот почему: адаптивные сайты быстрее сканируются роботом Googlebot, а страницы индексируются точнее. Единый URL также удобнее для пользователей. Таким сайтам не нужна переадресация, а это сокращает время загрузки. На адаптивных сайтах не возникает типичных ошибок, как на мобильных сайтах.

Шаблоны и плагины

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

Первый вариант — установить специальный плагин для существующей десктопной темы, который преобразует ее под мобильные устройства. Например, на сайтах Joomla с этой задачей справятся плагины Responsivizer и Mobile Joomla, на Drupal сайтах — ThemeKey и MobileTheme. Для WordPress подойдёт WPtouch. А еще не так давно, точнее до марта, 2020 года часто использовался плагин для мобильной оптимизации JetPack. Однако разработчики плагина удалили функцию mobile theme, которая собственно и отвечала за адаптацию сайта под мобильные устройства, объясняя это тем, что “большинство тем теперь по умолчанию включают мобильный дизайн, поэтому в этой функции больше нет необходимости”. Кроме того, они рекомендуют использовать адаптивные темы и не усложнять себе задачу.

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

Чтобы быстро найти и установить шаблон

• В WordPress предварительно найдите и загрузите тему на свой компьютер, перейдите в админпанель, Внешний вид & Темы & Добавить новую.
  Примечание: большой список платных и бесплатных тем можно найти на сайте WordPress.org. Перед скачиванием внимательно прочитайте описание и отзывы, обратите внимание на количество скачиваний.
• В Joomla, панель администратора & Расширения & Менеджер расширений & Загрузить файл пакета.
• В Drupal, предварительно скачайте тему из сайта drupal.org, панель администратора & Оформление & Установить новую тему.

А как быть с магазином на OpenCart?

C OpenCart все немного сложнее. Да, в интернете вы найдете множество адаптивных шаблонов, разработанных специально для этой CMS, однако их не всегда можно применить. Дело в том, что сайт OpenCart состоит из разных функциональных модулей. Как правило, модулей “из коробки” недостаточно для полноценного интернет-магазина. Для этого используются дополнительные кастомные модули, в большинстве случаев не поддерживаемые мобильной темой, в которой предусмотрен лишь стандартный ограниченный функционал. Чтобы OpenCart магазин корректно отображался и работал на разных устройствах можно:

• Разработать отдельный мобильный дизайн, то есть отдельную мобильную версию сайта и настроить на нее редирект, предварительно определяя с какого устройства заходит пользователей (контакта с кодом не избежать).
• Выполнить адаптивную Bootstrup верстку, не разрабатывая отдельный дизайн (макет) для мобильных.

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

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

Обратите внимание! Для того чтобы показать Google, что это не дублированный контент, а мобильная версия сайта нужно использовать специальные метатеги rel=«alternative» и rel=«canonical».

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

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

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

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

• Высокая скорость загрузки сайта. Так как лишний функционал и элементы с десктопной версии на мобильную не переносятся, это уменьшает нагрузку и повышается скорость загрузки. А последнее позитивно влияет на позиции SEO.
• Юзабилити и SEO. Так как в мобильной версии сайта нет ничего лишнего, что могло бы помешать или отвлечь пользователя (неудобные формы, второстепенные тексты и блоки, кнопки, запутанная навигация) улучшаются поведенческие факторы. Пользовательский опыт влияет на поведенческие метрики, а те, в свою очередь, на ранжирование сайта, то есть “высоту” его позиции в выдаче.
• Гибкость. Отдельная версия означает отдельный код. Вы можете быстро и легко вносить изменения в мобильный сайт, не рискуя что-то сломать в десктопе и наоборот.
• Выбор версии. При наличии мобильной версии сайта пользователь, в случае необходимости, всегда может перейти на полную версию.

ТОП-5 рекомендаций, как улучшить работу мобильного сайта

1. Не игнорируйте скорость загрузки

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

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

Обратите внимание! В идеале скорость ответа сервера не должна превышать 0.2 с. Проверить этот показатель можно в Google Analytics: Поведение & Скорость загрузки сайта & Обзор.

Также проверить скорость загрузки сайта можно в специальном бесплатном сервисе Google PageSpeed Insights или  Pingdom Tools.

2. Проверяйте отображение элементов

Не забывайте проверять, как отображаются элементы вашего сайта в мобильной версии, ведь согласно исследованию журналиста Тони Хейла издания Times пользователь, который впервые попал на ваш ресурс решает всего за 15 секунд — остаться или покинуть страницу.  Поэтому очень важно, чтобы мобильный сайт был интуитивно понятным и удобным в использовании.

Для этого не забудьте проверить страницу с помощью Mobile-Friendly Test. Не стоит игнорировать советы по оптимизации страницы от поискового гиганта Google, особенно учитывая, что они бесплатны!

3. Придерживайтесь принципов Mobile First

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

4. Используйте технологию AMP

Если загрузка сайта длится более 3 сек, половина пользователей покидают его, согласно статистике Google, наведенной Девидом Кикпатриком в статье на портале MarketingDive.

Существенно ускорить загрузку страниц можно с помощью технологии AMP, которая сжимает объем данных страниц, уменьшая его в 8 раз. Эта технология разработана Google с целью повышения скорости загрузки сайтов. В результатах поиска ресурсы, использующие эту технологию, обозначены специальной иконкой-молнией. А также имеют URL с приставкой /amp.

Однако такой метод ускорения страниц подойдет не всем. Дело в том, что пользователь, попадающий на сайт с AMP, автоматически переадресовывается на упрощенную версию, где, скорее всего, не будет ни виджетов, ни раздела комментариев, ни дополнительных блоков, например, “Рекомендованное”, утяжеляющих страницу. Собственно именно так и достигается молниеносная загрузка при AMP.

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

Также стоит обратить внимание на Google AMP Cache — метод, при котором данные сайта сохраняются (изображения, шрифты и т.д.), большие картинки автоматически конвертируются в форматы для мобильных устройств. Такие свойства помогают улучшить производительность сервера, а ваш сайт будет значительно лучше работать на мобильных устройствах.

Итоги

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

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

• Адаптивный дизайн. Если у вас есть навыки веб-разработки или разработчик в штате, вы можете адаптировать десктопную версию таким образом, что она будет автоматически подстраиваться под экраны разного расширения посредством CSS. “Заставить” сайт адаптироваться под мобильные можно с помощью специальных плагинов или адаптивной темы. Для этого не нужны технические навыки. Опция доступна владельцам сайтов на CMS WordPress, Joomla и Drupal.
• Мобильная версия сайта. Если речь идет о большом проекте, портале, крупном интернет-магазине, стоит задуматься о разработке самостоятельной отдельной мобильной версии. Здесь не обойтись без помощи команды разработчиков.  Если вы владелец небольшого или среднего e-commerce сайта, блога, сайта-визитки и т. д., можно попробовать преобразовать ваш сайт с помощью специальных конструкторов мобильных сайтов. Навыки программирования не понадобятся.

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

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

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

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

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

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

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

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

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

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

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

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

Домены в популярных национальных и международных зонах со скидкой — домены России в зоне .RU, и .РФ, международные домены .COM, .NET, .BIZ, .ORG, .ME.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Linux VPS SSD хостинг в Москве с KVM виртуализацией — полный доступ к виртуальному выделенному серверу, возможность установки необходимого ПО.

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

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

Cодержание:

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

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

Технологии прошлого, такие как например WAP, могли обеспечивать нормальную работу только сильно урезанных версий корпоративных ресурсов и практически не оставляли возможностей для реализации достойного дизайна, а также какой-либо функциональности, поэтому пользователи мобильных устройств не очень активно посещали их. Повышение посещаемости, кстати, стало одним из наиболее весомых факторов в пользу разработки мобильных версий сайтов. Если в 2015 году доля посетителей веб-ресурсов, заходивших с мобильного устройства (смартфона или планшета) в среднем составляла 35-40%, то к концу 2016 года она уже уверено подошла к отметке 55% и продолжает расти.

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

Наряду с удобством сайта для пользователей, которое повышает конверсию ресурса и лояльность со стороны покупателей, большое значение имеет приоритет таких ресурсов в поисковой выдаче. Google еще в 2015 году прямо заявил о своем намерении ранжировать адаптивные сайты в результатах поиска выше порталов, рассчитанных только на десктопную версию. Вывод же сайта в Топ-10 поисковой  выдачи является конечной целью любого SEO-продвижения и обеспечивает рост продаж. Инструменты поискового продвижения как в Google, так и Yandex, объединяются в консоли, позволяющие проанализировать степень оптимизации веб-страницы относительно возможностей мобильных устройств.

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

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

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

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

Мобильная версия сайта и специализированное приложение

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

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

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

• сложность и дороговизна разработки. Фактически речь идет о создании нового сайта с соответствующими затратами на дизайн и программирование;
• отличающийся URL мобильного сайта – как правило, мобильная версия имеет приставку m. к существующему адресу (например, m.facebook.com) и требует редиректа для мобильных устройств;
• необходимость двойной работы и двойного контроля за контентом сайтов. Мобильная версия должна обновляться одновременно с десктопной, иметь аналогичное наполнение и требует от контент-менеджера таких же трудозатрат.

Во втором случае речь идет о создании полноценного приложения-оболочки, разработанной под конкретную платформу устройства (Android, iOS, Windows Phone) или кросс-платформенное решение. Оно использует один и тот же программный интерфейс и средства работы с базой данных (прикладной программный интерфейс, Application Programming Interface, API), что и основной сайт, однако его дизайн органичнее смотрится, а и функционал лучше приспособлен для экранов смартфонов и планшетов. Плюсом такого решения являются все достоинства отдельной мобильной версии и единая точка управления контентом. Содержимое обновляется один раз в одном месте, а затем используется разными оболочками.

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

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

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

Использование медиа-запросов CSS

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

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

На сегодняшний день большинство новых сайтов разрабатывается и создается по принципу «mobile first». Это означает, что дизайн нового сайта отрисовывается в первую очередь так, как он выглядел бы на экране смартфона, затем планшетного ПК и уже после этого разрабатывается его десктопная версия. Затем по тому же принципу создается HTML-разметка страницы, что в силу определённых причин облегчает работу программисту. При помощи стилей CSS веб-странице придается вид в соответствие с разработанным дизайном и порядком создания веб-интерфейса (смартфон – планшет – десктоп).

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

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

Адаптация посредством языка Javascript

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

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

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

Динамически подгружаемая версия разметки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поделиться

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

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

Этот метатег вставляют в контейнер head вашего сайта.

<meta name="viewport" content="width=device-width">

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

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

Ширина сайта на экранах мобильных устройств

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

<meta name="viewport" content="width=device-width">

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

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

<meta name="viewport" content="width=600">

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

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

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

@media screen and (max-width: 600px) {
    …
}

Высота сайта на экранах мобильных устройств

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

Для исправления этой ошибки мы можем использовать правило

<meta name="viewport" content="height=device-height">

Масштабирование сайта на экранах мобильных устройств

С помощью этого правила мы можем разрешать либо запрещать мастабирование страницы сайта.

Разрешить масштабирование на смартфоне:

<meta name="viewport" content="user-scalable=yes">

Запретить масштабирование на мобильном телефоне:

<meta name="viewport" content="user-scalable=no">

Подитог

И так мы создали свой viewport и так же для него создали медиапзапрос

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

Viewport:

<meta name="viewport" content="height=device-height,width=600,user-scalable=yes">

Медиазапрос:

@media screen and (max-width: 600px) {
    body {
        font-size:1.5em;
    }
    …
    h3 {
        font-size:2.5em;
    }
}

Верный viewport

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

<meta name="viewport" content="width=device-width, user-scalable=yes">

Читайте также

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

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

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

В январе 2007 года Стив Джобс вышел на сцену Macworld Expo. В своем фирменном стиле соучредитель, генеральный директор и постоянный шоумен Apple пообещал миру три вещи: обновленный iPod, телефон и мини-компьютер.

Он перечислил атрибуты каждого предмета: «Широкоэкранный iPod с сенсорным управлением.Революционный мобильный телефон. И передовое устройство для интернет-коммуникаций ».

Но когда пришло время для большого открытия, он не представил три отдельных продукта. Он с триумфом протянул один гаджет: iPhone. «Вы понимаете?» — спросил Джобс у толпы. «Это не три отдельных устройства. Это одно устройство! И мы называем это iPhone ».

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

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

Мобильный дизайн: 14 лет спустя

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

Мобильный трафик растет из года в год, говорит Пит Полгар, директор по маркетингу Clikz Digital, агентства цифрового дизайна и маркетинга, базирующегося в Литл-Фоллс, штат Нью-Джерси, и готово превзойти настольный трафик.

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

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

Что вообще означает мобильный веб-дизайн?

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

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

Создать сайт с нуля? Think Mobile-First

Брайан Клейтон, генеральный директор GreenPal, девять месяцев создавал сайт своей компании с нуля.«Прямо за воротами возникли серьезные проблемы», — говорит он. «Мы предположили, что большинство наших пользователей будут покупать услуги по уходу за газонами со своего настольного компьютера или ноутбука. Но очень быстро стало ясно, что больше людей заходят на веб-сайт со своих мобильных телефонов и планшетов, чем с настольных или портативных компьютеров — 4 к 1 ».

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

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

Связано: DreamHost’s Ultimate Small Business Resource Guide

«До того, как наш веб-сайт был перестроен для работы с мобильными устройствами, конверсия в мобильном браузере составляла менее 4%», — говорит он. «Это означает, что люди, которые пытались зарегистрироваться, в 96% случаев отказывались от участия.”

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

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

Отточите свою аудиторию

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

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

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

Спросите отзывы клиентов

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

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

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

По теме: 30 лучших веб-приложений для малого бизнеса в 2020 году

Think Маленький экран

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

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

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

«Малым предприятиям придется пересмотреть свои текущие маркетинговые стратегии, поскольку площадь их экранов значительно уменьшилась», — говорит Полгар.

Виталий Виноградов, генеральный директор Modern Place Lighting, обнаружил, что переход на дизайн, ориентированный на мобильные устройства, привел к увеличению конверсий на 30% по сравнению с настольными компьютерами.«Одна важная вещь — удалить лишние плагины, всплывающие окна или любые другие ингибиторы экрана на мобильной версии сайта», — говорит он.

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

Усовершенствуйте свой эстетический дизайн

Рост популярности мобильных устройств стимулировал рост компаний, ориентированных на дизайн, таких как Apple и Google. «Сегодня потребители ожидают более изысканного дизайна», — говорит Фельтен.

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

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

Связано: как повысить коэффициент конверсии вашего веб-сайта с помощью правильного шрифта

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

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

Проблема?

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

Think Social

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

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

Связано: 10 простых советов по работе с социальными сетями для трудолюбивого малого бизнеса

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

Вам нужно приложение для этого?

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

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

Что дальше?

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

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

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

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

1. Проверьте свой сайт с помощью инструмента Google для мобильных устройств

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

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

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

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

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

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

Откроется страница, на которой вы сможете увидеть, какие именно ресурсы Google не смог загрузить.

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

2. Используйте адаптивную тему WordPress

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

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

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

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

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

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

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

Связано: Как выбрать правильную тему WordPress для вашего сайта

3.Выберите надежный веб-хостинг

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

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

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

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

Мы знаем, что у вас много вариантов VPS

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

4. Увеличьте время загрузки вашего сайта

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

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

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

Первое, что вам нужно сделать, это узнать, насколько хорошо ваш сайт работает в настоящее время. Еще раз, Google здесь, чтобы помочь вам со своим инструментом Mobile Speed ​​Test.

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

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

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

Оптимизация времени загрузки вашего сайта

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

• Реализовать кэширование . Когда вы используете кеширование, некоторые файлы вашего веб-сайта будут сохранены в более удобном месте (например, на локальном устройстве каждого посетителя), поэтому их не нужно загружать каждый раз, когда открывается новая страница. Доступно множество бесплатных плагинов кэширования, хотя некоторые планы хостинга, такие как DreamPress, включают эту функцию по умолчанию.
• Используйте сеть доставки контента (CDN) . Вместо того, чтобы доставлять ваши файлы с одного центрального сервера, CDN позволяет вам хранить их копии на нескольких серверах, расположенных географически.Это делает время загрузки более сбалансированным независимо от местоположения конкретного пользователя, а также снижает использование полосы пропускания.
• Сжимайте изображения . Большие файлы изображений часто являются виновниками медленной загрузки. Сжимая их, вы можете уменьшить их размер, не влияя на их качество. Есть ряд бесплатных и дополнительных решений, которые помогут вам в этом, включая плагин ShortPixel и инструмент TinyPNG.
• Сократите код . Оптимизируя код CSS, HTML и JavaScript своего сайта, вы можете сделать его более эффективным и сократить время загрузки на драгоценные секунды.
• Поддерживайте все аспекты вашего сайта в актуальном состоянии . Использование устаревшего программного обеспечения для запуска вашего веб-сайта не только делает вас уязвимыми для проблем безопасности, но также не позволяет ему работать с максимальной эффективностью. Постоянно обновляя свои плагины, темы и CMS, вы можете избежать этих проблем.

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

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

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

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

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

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

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

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

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

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

6. Включить ускоренные мобильные страницы (AMP)

В рамках миссии Google по обеспечению более плавного просмотра веб-страниц на мобильных устройствах компания недавно запустила проект ускоренных мобильных страниц (AMP). Проект значительно вырос с момента его открытия в 2015 году, и многие сайты теперь используют AMP, чтобы их мобильные версии работали с максимальной производительностью.

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

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

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

7. Создайте мобильное приложение

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

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

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

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

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

Приглашаем вас сердечно.

Присоединяйтесь к группе DreamHost в Facebook, чтобы общаться с единомышленниками-владельцами веб-сайтов и получать советы как от коллег, так и от экспертов!

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

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

У вас есть вопросы по созданию мобильного сайта? Присоединяйтесь к нашей группе в Facebook и давайте начнем разговор!

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

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

Тогда в мире было 7,2 миллиарда устройств, которые росли в пять раз быстрее, чем мы. С тех пор Mobilegeddon стал фактом, и Google изменил свой алгоритм в пользу мобильных сайтов .

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

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

Итак, приступим.

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

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

Веб-сайт

BiQ Cloud — хороший пример веб-сайта, который разработан с учетом потребностей мобильных пользователей.

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

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

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

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

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

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

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

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

Проверить, оптимизирован ли ваш вид для мобильных устройств, очень просто — у Google есть удобный для мобильных устройств тестер веб-сайтов под названием Webmaster Tool , чтобы делать именно это, и он доступен прямо здесь, .

Все, что вам нужно сделать, это вставить URL-адрес вашей веб-страницы и нажать кнопку АНАЛИЗ.

Затем тест Google проанализирует ваш веб-сайт и покажет результат.

Анализ вашей веб-страницы может занять некоторое время…

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

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

Удобство мобильных устройств стоит проблем?

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

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

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

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

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

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

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

1) Используйте медиа-запросы

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

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

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

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

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

2) Используйте фреймворки, такие как Bootstrap

Существует множество фреймворков, которые вы можете использовать бесплатно, например Foundation 3 или Skeleton.Одним из наиболее популярных фреймворков является Bootstrap от Twitter.

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

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

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

3) Не отключайте кнопку отправки

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

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

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

4) Используйте адаптивную тему на CMS

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

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

Современная тема от Somothemes

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

5) Использование процентов

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

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

6) Сосредоточьтесь на простом дизайне

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

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

7) Убедитесь, что вы не заблокировали JavaScript, CSS или файлы изображений

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

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

8) Оптимизировать размер изображения

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

Итак, если вам нужно, чтобы ваши пользователи загрузили файл jpeg размером 1 МБ, чтобы они могли видеть изображение размером с миниатюру, они будут разочарованы и покинут ваш сайт.

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

9) Не используйте Flash

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

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

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

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

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

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

Заключительный совет

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

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

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

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

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

Этот пост был первоначально написан Чжи Юань и опубликован 12 августа 2015 года. Последний раз он был обновлен 2 июня 2019 года.

Обновлено: 1 сентября 2021 г.

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

лучших способов оптимизировать ваш сайт для мобильных устройств в 2021 году | София Мартин | DataSeries

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

Итак:

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

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

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

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

Источник

1. Google предпочитает адаптивный дизайн.

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

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

2. Адаптивный дизайн эффективен и прост в управлении.

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

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

Источник

4. Адаптивный дизайн увеличивает конверсию.

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

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

5. Ваш призыв к действию будет четко виден пользователю.

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

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

6. Более низкая стоимость и обслуживание веб-сайта

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

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

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

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

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

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

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

1. Создайте мобильную версию вашего текущего сайта

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

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

2. Используйте мобильные плагины на популярных платформах CMS

WordPress Mobile Plugins.

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

Мобильные плагины Joomla.

JoomlaShine и Responsivizer — простые способы добавить на ваш сайт мобильные функции. Это может быть необходимо только в том случае, если вы используете более старую версию Joomla, например 2.5 или ниже. Joomla 3.x также обеспечивает поддержку мобильных сайтов.

Плагины Drupal.

Drupal предоставляет два модуля, MobileTheme и ThemeKey, которые определяют, находится ли конкретный пользователь на мобильном телефоне, и автоматически меняют тему веб-сайта на тему, более удобную для мобильных устройств.Оба предлагают простые в использовании и удобные интерфейсы после установки.

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

3. Используйте адаптивный дизайн, ориентированный на мобильные устройства

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

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

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

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

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

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

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

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

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

Знаете ли вы, что Google представил новую политику под названием Mobile-First?

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

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

Если вы хотите по-настоящему оптимизировать производительность, вам следует рассмотреть и другие альтернативы.

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

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

# 1: Дизайн с учетом потребностей мобильных устройств

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

Какие еще элементы дизайна вы должны внедрить в свой веб-дизайн, ориентированный на мобильные устройства, помимо здравого смысла?

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

Лучший способ проверить, правильно ли вы это делаете, — воспользоваться телефоном ( Я делаю это постоянно! ) и посетить ваш сайт. Тщательно изучите, как все ощущается и течет вместе.

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

# 2: Оптимизация ресурсов; изображения, значки и т. д.

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

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

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

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

Итак, как можно сократить лишние килобайты или даже мегабайты визуального контента?

• Измените размер изображений. Звучит просто, правда? Что ж, я не могу подсчитать, сколько раз я просматривал мобильный сайт только для того, чтобы загрузить изображений 1980 x 1200 в фоновом режиме. Вместо этого следует предоставлять полноразмерные фотографии в качестве альтернативных ссылок, когда это необходимо.Изменение размера может сократить до 80% от общего размера изображения, в зависимости от требуемых размеров. Однако для мобильных устройств нет причин выходить за пределы диапазона 600–700 пикселей максимум.
• Уменьшить размер файла с помощью сжатия. Сжатие / оптимизация изображения — это процесс использования стороннего программного обеспечения для уменьшения количества цветов, присутствующих в изображении. Это можно сделать до некоторой степени, чтобы ваши фотографии не потеряли своего естественного качества, но при этом размер файла можно было значительно уменьшить.Если вам нужна помощь со сжатием изображений, не ищите ничего, кроме нашего исчерпывающего обзора инструментов сжатия изображений.
• Изучите альтернативные форматы файлов. Все слышали о форматах файлов PNG и JPEG. В конце концов, они де-факто являются стандартами изображений в сети. Но не надолго. Последние и лучшие технологии в области доставки цифровых изображений вращаются вокруг форматов файлов WebP и SVG. SVG, например, может автоматически масштабироваться до размера экрана, уменьшая количество ресурсов, необходимых для загрузки определенных визуальных компонентов.

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

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

# 3: предварительная загрузка и отложенная загрузка

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

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

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

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

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

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

• Предварительная выборка. Этот тип предполагает, что конкретный URL-адрес, скорее всего, будет следующим вариантом навигации. И, если браузер удовлетворяет запрос, он автоматически кэширует важные ресурсы страницы, что, в свою очередь, значительно ускоряет загрузку следующей страницы.
• Prerender. В то время как указанный выше тип извлекает только определенные ресурсы, предварительная визуализация будет кэшировать всю страницу. Весь отображаемый контент хранится в памяти устройства пользователя.
• DNS-Prefetch. Предварительная выборка DNS разрешит указанный DNS и ничего больше. В результате, если пользователь делает определенный «поворот» на вашем сайте, вы существенно сокращаете время, необходимое для навигации.
• Предварительное подключение. То же, что и выше, но также устанавливает соединения и рукопожатия с соединениями TCP и TLS.

Какие примеры кода для прелоадеров?

Поскольку предварительные загрузчики используют динамические HTML-теги, вы можете предварительно загрузить контент, например Google Fonts, или создать собственный сценарий для предварительной загрузки ресурсов JavaScript в WordPress.

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

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

Что такое отложенная загрузка?

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

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

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

Я рекомендую использовать библиотеку Layzr.js — простую и эффективную отложенную загрузку изображений! Скрипт также активируется на главной странице проекта, поэтому вы можете видеть его работу в режиме реального времени.Пользователи WordPress могут найти десятки плагинов с отложенной загрузкой в ​​общедоступном репозитории плагинов.

# 4: Веб-кеширование

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

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

Некоторые из самых популярных имен в веб-кэшировании — Varnish, Squid и Memcached. Но будьте уверены, что на рынке есть множество других решений, особенно если вы пользователь WordPress.

Вы также можете рассмотреть возможность подписки на CDN.

Что такое CDN (сеть доставки контента)?

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

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

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

# 5: AMP (ускоренные мобильные страницы)

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

Хорошо, все эти модные словечки звучат здорово, но как работает AMP?

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

Например,

JavaScript не работает с AMP.Если, конечно, вы не используете библиотеку AMP JS, доступную на GitHub. Использование библиотеки JS действительно позволяет добиться определенных результатов, например, избегать блокировщиков рекламы, но если вам нужна настоящая производительность, то вам подойдет необработанный AMP.

AMP по примеру

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

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

Интересные примеры использования AMP:

# 6: Тест перед фиксацией

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

Что такое промежуточная среда?

Что ж, самый быстрый способ объяснить это — взглянуть на ваш текущий веб-сайт.

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

Я всегда вспоминаю сообщение Эшли Харпп: Не тратьте время зря — проверьте изменения перед тем, как коммитить .

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

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

Заключительный отчет

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

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

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

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

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

1. Если вы не знаете, оптимизирован ли ваш веб-сайт для мобильных устройств, воспользуйтесь
   Мобильный дружественный тест.
2. Если вы использовали программное обеспечение для управления контентом (CMS), такое как WordPress, для создания своего веб-сайта,
   ознакомьтесь с нашим руководством по настройке программного обеспечения вашего веб-сайта.
3. Если у вас достаточно технических знаний, чтобы сделать это самостоятельно, начните с выбора
   мобильная конфигурация.

Зачем делать сайт мобильным?

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

В США 94% людей со смартфонами ищут местную информацию на своих телефонах.
Интересно, что 77%
мобильных поисков происходит дома или на работе, в местах, где могут быть настольные компьютеры.

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

Как мне начать?

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

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

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

Различается. Например, вот некоторые из возможностей:

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

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

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

1. Упростите задачу для клиентов.

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

Обозначьте возможные шаги на пути ваших клиентов, чтобы их было легко
в комплекте на мобильном устройстве. Постарайтесь упростить работу и сократить количество пользователей
взаимодействия.В этом примере: (1) покупатель нажимает на сайт после поиска ламп для
купить; (2) просматривает выбор ламп; и (3) покупает желаемую лампу.

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

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

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

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

Адаптивный веб-дизайн означает, что на странице используются
один и тот же URL-адрес и один и тот же код вне зависимости от того, работает ли пользователь на настольном компьютере, планшете или мобильном устройстве.
телефон — только дисплей настраивается или реагирует в зависимости от размера экрана. Google рекомендует
использование адаптивного веб-дизайна по сравнению с другими шаблонами проектирования. Одно из преимуществ отзывчивого
веб-дизайн заключается в том, что вам нужно поддерживать только одну версию вашего сайта вместо двух. Ты
не нужно поддерживать сайт для ПК по адресу www.example.com и мобильный
версия на m.example.com — вы будете поддерживать только один сайт, например
www.example.com , для посетителей с компьютеров и мобильных устройств.

Адаптивный сайт подстраивает отображение под разные размеры экрана, используя один и тот же URL-адрес и
код. Все три устройства, указанные выше, используют www.example.com (а не страницу для мобильных устройств по адресу
m.example.com и страница для планшета t.example.com ).

«С использованием
адаптивный веб-дизайн позволил Baines & Ernst оптимизировать работу с сайтом
разные размеры экрана без создания нескольких веб-сайтов. Они заметили, что посетители посетили
На 11% больше страниц на их сайте за посещение, а мобильные конверсии выросли на 51% «.

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

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

Каких трех основных ошибок хотят избежать новички?

1. Забывая своего мобильного клиента. Помните, что хорошие мобильные сайты полезны — они
   помочь посетителям выполнить свои задачи, будь то чтение интересной статьи или проверка
   местонахождение вашего магазина.Не попадитесь в ловушку создания сайта только для мобильных устройств
   это не обеспечивает полную функциональность. Вместо этого не забудьте построить
   удобный для мобильных устройств сайт (действительно полезный для
   мобильных клиентов и оптимизирован для наиболее распространенных задач клиентов).
2. Реализация мобильного сайта в другом домене, субдомене или подкаталоге из
   настольный сайт. Хотя Google поддерживает несколько
   конфигурации мобильного сайта, создание отдельных мобильных URL-адресов значительно увеличивает количество
   работы, необходимой для обслуживания и обновления вашего сайта, и знакомит с возможными источниками
   технические проблемы.Часто можно значительно упростить задачу, используя
   адаптивный веб-дизайн и обслуживание рабочего стола и
   мобильный по тому же URL. Адаптивный веб-дизайн — это рекомендуемая конфигурация Google.
3. Работаем изолированно, а не ищем вдохновения. Посмотреть другие
   сайты в вашей сфере или ваших конкурентов для вдохновения и передового опыта. Хотя вы можете
   не будьте первым в своей отрасли с мобильным сайтом, вы можете
   учиться у тех, кто был до вас.

Мобильный, адаптивный, адаптивный или настольный сайт?

В сети не все веб-сайты одинаковы. На мобильном устройстве пользователи могут встретить один из следующих типов сайтов:

• Mobile — выделенные сайтов предназначены для мобильных телефонов.
• Веб-приложения — это особый тип мобильного сайта, который выглядит и ощущается как приложение.
• Сайты с адаптивным дизайном — это сайты, предназначенные для множества устройств с экранами разных размеров; они автоматически корректируют макет своего контента в соответствии с доступным размером экрана.
• Full (или для настольных ПК) сайтов предназначены для настольных компьютеров и не оптимизированы для мобильных устройств.

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

Мобильные сайты — это сайты, разработанные специально для мобильных телефонов. Часто они размещаются под отдельным URL-адресом (например, m.site.com) и полностью отличаются от всего сайта. Они содержат функции или контент, которые считаются подходящими для мобильных устройств; часто это лишь часть того, что доступно на рабочем столе.Их часто противопоставляют адаптивным сайтам, которые обычно содержат одинаковый контент и функции для мобильных устройств и настольных компьютеров, но изменяют эти функции на мобильных устройствах.

Веб-приложения

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

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

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

Транспорт для Лондона (tfl.gov.uk) — это адаптивный сайт. На рабочем столе контент был разделен на 3 столбца. В версиях tfl.gov.uk для планшетов (слева) и для мобильных устройств (справа) содержимое рабочего стола отображалось в двух и одном столбце соответственно.

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

На практике адаптивный дизайн часто является континуумом: многие адаптивные сайты не являются «полностью» адаптивными и не имеют 100% функций или паритета контента; вместо этого они удаляют функциональность, которая редко требуется на мобильных устройствах.

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

Выделенные мобильные и адаптивные сайты

Вот некоторые из относительных преимуществ и недостатков этих двух подходов.

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

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

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

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

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

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

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

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

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

Примечание о фаблетах

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

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

Заключение

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

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

10 способов оптимизации вашего сайта для мобильного поиска

Mobile — это не просто путь в будущее. Это путь настоящего.

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

SEO-специалиста вроде меня продвигают мобильные приложения уже почти пять лет.

Это уже не новая идея.

Исследование

показывает, что по данным на 2014 год мобильных пользователей опередили настольных компьютеров. Это было давно.

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

Фактически, на мобильные устройства приходится 71% общего времени онлайн в США

Это не только мобильные устройства, но и смартфоны.Мы любим наши смартфоны!

Их используют больше, чем настольные компьютеры, ноутбуки и планшеты.

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

Но как именно это сделать?

Мобильный поиск отличается от поиска на компьютере в нескольких отношениях.

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

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

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

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

Давайте приступим к делу.

1. Используйте разметку ускоренных мобильных страниц (AMP)

По состоянию на февраль 2016 года AMP был официально интегрирован в результаты мобильного поиска Google.

Это означает, что вы получите некоторые очень важные преимущества, добавив разметку AMP на свою веб-страницу.

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

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

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

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

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

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

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

Вы начинаете понимать, почему AMP так важен?

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

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

Есть три компонента для успешного внедрения AMP в структуру вашего веб-сайта.

• AMP HTML — этот переработанный HTML-код использует пользовательские команды, связанные с AMP, для более динамичного мобильного контента.
• AMP JS — Асинхронная загрузка является целью структуры AMP Javascript.
• AMP CDN — размещенная в Google сеть доставки контента с кэшированным контентом.

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

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

Убить двух зайцев одним выстрелом — мечта маркетологов.

AMP — не единственный способ получить больше визуального мобильного контента.

Google также сильно полагается на схему для мобильного поиска.

2. Реализовать разметку схемы

Вы уже знаете, что я фанат структурированных данных.

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

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

Для начала не требуется технический гений. Мне очень нравится плагин для WordPress под названием Schema App Structured Data .

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

Когда мы ищем термин «что такое контент-маркетинг?» например, нам предоставляется информационное окно с ответами на связанные вопросы.

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

Конечно, это только в том случае, если вы реализуете разметку схемы.

Но это не единственное преимущество.

Обратите внимание на этот поиск «коробки подписки на питание».

Схема

Buzzfeed позволяет ему превзойти все, кроме кампаний PPC для Blue Apron и HelloFresh (ни одна из которых не показана в предварительном просмотре статьи Buzzfeed).

По сути, Buzzfeed помещает список в список результатов поиска.

Это еще раз доказывает успех онлайн-рассылки (и мастерство Buzzfeed).

Даже кампания PPC для этого термина несколько высока — почти 6 долларов.

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

У нас еще есть еще кое-какие технические вопросы, поэтому я надеюсь, что вы все еще со мной.

Не волнуйтесь. Это не становится слишком шатким.

3. Выберите адаптивный веб-дизайн

Начиная с Mobilegeddon в 2015 году , адаптивный веб-дизайн был обязательным условием для поддержания рейтинга.

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

Отзывчивый HTML адаптируется в соответствии с размером экрана и ориентацией устройства, просматривающего контент.

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

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

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

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

На рабочем столе, прогноз погоды может быть альбомным.

Но на мобильных устройствах эту информацию нужно отображать вертикально.

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

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

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

Теперь нам нужно поговорить об изображениях.

4. Сжать изображения

Изображения необходимы для динамического веб-контента.

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

Это не случайно. Визуальный контент — главный приоритет для цифровых маркетологов.

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

Это означает, что на моих веб-серверах есть ТОННА изображений.

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

Хотя нам нужны изображения высокого качества, важно также не занимать много места.

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

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

PNG чаще всего рекомендуется из-за его способности сжимать до 95% в Photoshop с небольшой потерей качества.

Это потому, что веб-оптимизация сильно отличается от печати.

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

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

5. Удалить вспышку

Обычно я не люблю много отрицать, но Flash — одна из тех вещей, которые меня никогда не волновали.

Может быть, я просто недостаточно техничен, чтобы оценить это.

В первые годы Интернета Adobe Flash был в моде.

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

Преобладали гладкие, простые дизайны, такие как Google, Medium, Craigslist, Facebook и Amazon, в то время как кричащие (каламбурные) дизайны начали падать.

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

Уязвимости в Flash делают его еще менее привлекательным для веб-дизайна.

Это также запрещено в проекте Google AMP.

Flash отлично подходит для игр .

Его можно интегрировать в приложения с потрясающими результатами.

Однако

Flash не место на вашем сайте.

Снимите.

6. Посмотрите на свой мобильный сайт

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

Люди естественно видят веб-сайты на мобильных устройствах определенным образом.

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

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

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

Вы также сможете упростить структуру своей страницы.

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

Это идеальное место для CTA или кнопки покупки.

Это типы решений, которые вы можете принять, только просмотрев свой веб-сайт.

Вы не могли бы выпустить приложение без бета-тестирования его.

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

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

7. Воспользуйтесь бесплатными инструментами Google

Существует множество поисковых систем, но Google остается королем.

На его долю приходится 77,43% из 6 586 013 574 ежедневных поисков в Интернете!

Проиндексирование вашего сайта в Google — важный первый шаг для публикации любого веб-сайта или контента в Интернете.

Таким образом, имеет смысл использовать все бесплатные инструменты, которые Google предлагает нам.

И Google повсюду интегрирует ценные мобильные данные.

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

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

Вот как на нем выглядит мой сайт.

Это отличная отправная точка, чтобы понять, что вы делаете правильно, а что неправильно.

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

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

Эти полезные руководства — лишь часть экосистемы поддержки Google для веб-мастеров. Он также имеет форумы и поддержку в чате.

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

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

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

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

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

Пора обсудить скорость сайта!

8. Ускорить все и вся

Скорость важна.

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

Вот диаграмма , показывающая корреляцию.

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

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

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

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

Есть несколько основных способов сделать это, и сжатие изображений (о котором я говорил ранее) — лишь один из них.

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

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

Нам нужно сократить это до основ для мобильных устройств.

Это можно сделать на minifycode.com .

Вот еще несколько приемов, которые стоит попробовать:

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

Мой следующий совет кажется очевидным, но его часто упускают из виду.

9. Отмечать сообщения на основе поиска с мобильных устройств

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

При поиске на ходу вы, скорее всего, отвлечетесь, сделаете опечатки и введете слова не по порядку.

Это дает возможность опытным оптимизаторам поисковых систем.

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

Теги можно ввести в WordPress, выбрав «Сообщения — Теги» или введя теги в отдельные сообщения.

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

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

Это не только эквивалент трафика, но и половина стоимости кампании AdWords PPC.

Это открытие удваивает наш потенциальный охват!

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

Теги заголовков — еще одно отличие мобильных устройств от настольных компьютеров. В мае 2016 года Google увеличил ограничение на количество символов в теге заголовка до 78 для мобильных устройств (по сравнению с 70 на настольных компьютерах).

Это дает нам 8 дополнительных персонажей для игры.

Вот продукт Amazon , результат на компьютере.

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

Вот тот же результат поиска на мобильном телефоне.

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

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

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

Это особенно удобно с длинными ключевыми словами.

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

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

10. Удалите всплывающие окна с мобильного сайта

всплывающих окна находятся в поле зрения Google с августа 2016 года.

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

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

Вот три примера из Google, на что он нацелен.

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

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

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

Эти альтернативы помогут вам получить доход от рекламы и монетизировать свой сайт без каких-либо санкций со стороны Google.

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

Заключение

Mobile — это будущее онлайн-поиска.

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

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

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

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

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

• SEO — разблокируйте огромное количество SEO-трафика.