Мобильный дизайн — что это такое и почему это важно
Осень 2018 года была периодом испытаний для онлайн-маркетологов, блоггеров, цифровых агентств… в основном для всех, чей хлеб с маслом поступает из онлайн-сферы. Почему? Потому что именно тогда гигант поисковых систем Google начал внедрять индексацию для мобильных устройств. Это, конечно, не стало неожиданностью, поскольку «Mobilegeddon» в 2015 году уже ввел приоритет веб-сайтов, которые хорошо отображаются на мобильных устройствах. Дизайн, ориентированный на мобильные устройства, уже существовал, но Google все же удалось вызвать некоторую панику.
Но давайте сделаем шаг назад и посмотрим, что на самом деле означает «сначала мобильные».
Объяснение мобильного дизайна
Короче говоря, дизайн, ориентированный на мобильные устройства, — это дизайн, в котором приоритет отдается мобильным устройствам. Как правило, сюда входят смартфоны и планшеты или любые устройства с меньшим экраном. Чтобы правильно понять эту концепцию, нам сначала нужно поговорить об адаптивном веб-дизайне или RWB. В RWB мы в основном позволяем Интернету, всем его формам и содержимому умещаться на небольших экранах без потери качества. Это также должно быть сделано так, чтобы людям было удобно или комфортно. Когда все сделано правильно, адаптивный дизайн означает, что пользователю не нужно увеличивать масштаб, прокручивать или перемещать экран, чтобы просмотреть все содержимое сайта.
Очевидно, что учитывая степень, в которой мобильные поисковые запросы превзошли настольные, вполне естественно, что веб-сайт должен быть адаптивным. Это даже не вопрос выживания сильнейших. Это проще. Если ваш веб-сайт не отвечает, его также может не существовать. У людей нет ни времени, ни терпения для неотзывчивых веб-сайтов.
Но здесь есть нечто большее, чем просто отзывчивость. При разработке продукта дизайнеры брали за отправную точку десктопную версию. Затем, после окончательной доработки этой конкретной версии, они в основном убрали некоторые элементы, чтобы оптимизировать продукт для мобильных устройств.
Сегодня процесс другой. «Прогрессивное продвижение» — широко используемый принцип в дизайне, который берет за отправную точку мобильную версию. И это именно то, что означает «сначала мобильные». Дизайн начинается с мобильной части, а затем постепенно расширяется до более продвинутых версий.
Мобильное индексирование
Как мы упоминали ранее, в 2018 году Google внедрил совершенно новый способ индексации сайтов. Индексирование важно, потому что это один из механизмов, который Google использует для определения того, насколько высоко ваш сайт будет занимать место на страницах результатов поисковых систем.
Таким образом, по сути, индексация для мобильных устройств означает, что когда Google развертывает своих краулботов, они сначала будут искать мобильную версию вашего сайта, а затем — настольную. Обратите внимание, что мобильная версия — не единственная, которая индексируется и оценивается. Ваша десктопная версия тоже учитывается, но только после мобильной. Если у вашего сайта нет мобильной версии, это окажет значительное негативное влияние на рейтинг вашего сайта. Не только это. Качество мобильного опыта, предлагаемого вашим веб-сайтом, также является важным фактором.
И именно поэтому любой владелец веб-сайта должен очень серьезно относиться к Mobile-first.
Как оптимизировать для мобильных устройств
Итак, у вас есть крутая адаптивная тема? Хороший. Отзывчивость крайне важна. Но вам не кажется, что на этом ваша работа по оптимизации для мобильных устройств заканчивается. Это сложнее, чем это.
Независимо от того, проводите ли вы весеннюю чистку своего старого сайта WordPress или создаете совершенно новый, есть вещи, которые вы можете сделать, чтобы сделать его более привлекательным для поисковых роботов Google и мобильной индексации.
- Оптимизируйте скорость вашего сайта
Google ненавидит медленные сайты. Нет, правда. Он имеет особый уклон в сторону веб-сайтов, которые медленно загружаются. С лета 2018 года Google официально отдает приоритет быстрым веб-сайтам, так что об этом определенно стоит подумать.
Даже если ваш сайт немного тормозит, не волнуйтесь. Есть много вещей, которые вы можете сделать, чтобы ускорить его. Например, вы можете использовать один из отличных плагинов кэширования, которые создают HTML-версию вашего сайта, чтобы он загружался быстрее. Вы также можете сжимать все свои файлы, чтобы они загружались в наименьшем и легком размере. Наконец, найдите время, чтобы просмотреть свой веб-сайт и найти любые технические ошибки, такие как неработающие ссылки, чрезмерно насыщенные страницы и т. д.
Когда дело доходит до поисковой оптимизации (SEO), предполагая, что вы уже применяете все передовые методы в этой области, необходимо помнить о нескольких дополнительных вещах.
Во-первых, вам необходимо обеспечить паритет контента между версиями вашего сайта. Это особенно относится к внутренним ссылкам, структурированным данным, тегам и тому подобному. Кроме того, убедитесь, что ваши серверы могут поддерживать скорость сканирования. Раньше это было проблемой, когда индексирование для мобильных устройств только начиналось, но удивительное количество веб-сайтов до сих пор не адаптировалось к новой активности сканирования.
Наконец, регулярно следите за своим статусом индексации и убедитесь, что файл robots.txt проверен, а файлы журналов вашего сервера в порядке.
- Выбирайте адаптивный фреймворк
Да, мы уже говорили ранее, что использования адаптивной темы, построенной на адаптивной среде, недостаточно для правильной мобильной оптимизации. Но это остается одним из важнейших факторов, поэтому мы подумали, что должны повторить.
Bootstrap и Foundation в настоящее время являются самыми популярными и, возможно, лучшими адаптивными фреймворками, поэтому выбирайте тему, использующую одну из них. Они идеально подходят для переноса дизайна вашего веб-сайта на экраны меньшего размера с минимальным риском сбоев и ошибок. Кроме того, они делают это как на внешнем, так и на внутреннем уровне, поэтому значительно сокращают нагрузку на разработчиков.
- Оптимизируйте навигацию, контент и взаимодействие
Поиск идеального баланса между недостатком контента и избытком контента — общая болезнь всех мобильных веб-сайтов. Тем не менее, это битва, в которой нам просто нужно продолжать сражаться. Посетителям нужна информация, и им нужно, чтобы она была представлена в ясной и простой форме. Беспорядок недопустим. Организуйте свой контент так, чтобы вы могли сказать то, что хотите сказать, разработать стратегию своих призывов к действию и ничего больше.
Кроме того, подумайте о навигации по вашему сайту. Если это слишком сложно, это просто не подойдет для мобильных устройств.
Затем, если ваша панель навигации на рабочем столе длинная, вам нужно сделать ее короче в мобильной версии. Рассмотрите возможность увеличения текста и преобразования ссылок в кнопки, которые легко нажимать.
Наконец, проверьте, правильно ли оптимизированы ваши макеты для обычных действий с рук, таких как касание и смахивание.
Это вполне логичный шаг, но еще раз подчеркнуть его не помешает. Вам всегда нужно проверять и тестировать все на своем сайте. Даже если в последнее время вы не вносили никаких изменений, время от времени проверяйте, все ли работает нормально.
Большинство людей в наши дни используют современные браузеры или браузеры, оптимизированные для мобильных устройств. Тем не менее, поразительный процент интернет-пользователей по-прежнему использует старые версии браузеров, и о них тоже нужно подумать. Вы хотите, чтобы ваш веб-сайт выглядел так же хорошо на старом iPhone 4s, как и на новом Huawei P20.
Просто проверьте дизайн своего веб-сайта на отзывчивость и не забудьте о сплит-тестировании A/B, особенно для ваших целевых страниц. Конечно, прежде всего, настройте мобильную версию своего сайта и подготовьте ее для пользователей.
Mobile-first — это тенденция, которая сохранится еще какое-то время, и это реальность, которую мы все должны принять. Под «мы» мы подразумеваем всех, кто участвует в создании и управлении веб-сайтом. Дизайнеры, разработчики, администраторы, SEO-специалисты, редакторы, копирайтеры — все должны помнить о приоритетах мобильных устройств. Конечно, это не значит, что мы должны пренебрегать настольными версиями. Просто к дизайну, ориентированному на мобильные устройства, нужно относиться серьезно.
Мы надеемся, что эта статья оказалась для вас полезной. Если вам понравилось, пожалуйста, не стесняйтесь проверить некоторые из этих статей!