АДАПТИВНЫЙ ДИЗАЙН САЙТА С ТОЧКИ ЗРЕНИЯ ЮЗАБИЛИТИ И SEO.

15.04.2019

ПРОДВИГАЕМ МОБИЛЬНУЮ ВЕРСИЮ САЙТА.

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

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

НЕОБХОДИМОСТЬ СОЗДАНИЯ МОБИЛЬНОЙ ВЕРСИИ САЙТА

Последние статистические данные говорят нам о том, что около 5 миллиардов людей на земле используют мобильные телефоны, 80% из которых — смартфоны. Для жителей России, по данным Яндекс Метрики, этот показатель равен 43%.  

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

GOOGLE MOBILE-FIRST ИНДЕКС: НОВЫЙ СТАНДАРТ ИНДЕКСИРОВАНИЯ

Несомненную важность наличия мобильной версии сайта подтверждает новый проект от Гугл — Google mobile-first индекс, который был запущен 1го июля 2018 года. Ранее при запросе в гугл в первую очередь индексировались полные версии сайтов, предназначенные для больших экранов. Благодаря Google-mobile-first индекс, в первую очередь будут индексироваться мобильные версии. Проще говоря, первыми в Google будут показываться сайты, имеющие мобильную версию. Это вызывает ряд изменений в SEO-продвижении сайтов, то есть в «выводе» их на первые позиции в Google.  

ПОЧЕМУ НАМ УДОБНЕЕ ИСПОЛЬЗОВАТЬ МОБИЛЬНЫЙ ИНТЕРНЕТ

Данный ход со стороны Google объясняется массовым переходом на использование смартфонов для работы в интернете. С точки зрения психологии, человеку удобнее воспринимать информацию с небольшого экрана. При чтении оптимально удобная длина строки — 50-60 символов. Большинство десктопных версий сайтов не соблюдают это правило, тогда как на телефоне длина строки по очевидным причинам сокращается до необходимого размера. Это преимущество заставляет пользователей все чаще заходить в интернет с телефона, не говоря уже об их мобильности и простоте перемещения. 3G сети популярных операторов: МЕГАФОН, МТС, БИЛАЙН, ТЕЛЕ2, со скоростью передачи данных до 3 Мб/сек. Они покрывают почти всю территорию РФ. А значит пользоватеься мобильным интернетом можно повсеместно. В большинстве городов работают и 4G сети, где скорость многократно выше.  

ПРОВЕРКА САЙТА НА АДАПТИВНОСТЬ

ВСТРОЕННЫЕ ИНСТРУМЕНТЫ БРАУЗЕРА

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

  • Для перехода в режим разработки кликнете правой кнопкой мыши по экрану браузера, в появившемся меню выберете пункт «просмотреть код»;
  • Выполнить те же действия можно нажатием сочетания клавиш Ctrl+Shift+I;
  • Еще один вариант — нажатие клавиши F12;
  • Перейдите в меню браузера, выберете пункт «Дополнительные инструменты», затем — «Инструменты разработчика».

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

СЕРВИС GOOGLE ДЛЯ ПРОВЕРКИ АДАПТИВНОСТИ

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

ДРУГИЕ СПОСОБЫ ПРОВЕРКИ САЙТА НА АДАПТИВНОСТЬ

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

ОСНОВНЫЕ ПОДХОДЫ СОЗДАНИЯ МОБИЛЬНОЙ ВЕРСИИ САЙТА

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

ОТДЕЛЬНЫЙ САЙТ С МОБИЛЬНОЙ ВЕРСИЕЙ

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

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

ИСПОЛЬЗОВАНИЕ АДАПТИВНОГО ДИЗАЙНА

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

АДАПТИВНОСТЬ СРЕДСТВАМИ CSS: РЕЗИНОВЫЕ БЛОКИ И ОТНОСИТЕЛЬНЫЕ РАЗМЕРЫ ЭЛЕМЕНТОВ

Адаптивная стилизация сайта представляет собой набор медиа-запросов, реагирующих на размеры экрана браузера. Выглядят они так: @media(условие){ применяемый стиль } То есть если будет выполнено условие, то к определенным элементам будет применен описанный в фигурных скобках стиль. Пример медиа-запроса, выполняемого при ширине экрана не меньше 900px и не больше 2600px: @media screen and (min-width: 900px) and (max-width: 2600px) { .classForaMediumScreen { background: #cc0000; width: 30%; float: right; } } Помимо медиа-запросов средства css позволяют создавать «резиновые» блоки — элементы, свойства которых указываются не фиксированными значениями, а зависят от размеров окна браузера. При резиновой верстке значения свойств можно задавать в процентах (width: 34%) либо в vh — частях от высоты экрана (width: 50vh) или в vw — в частях от ширины экрана (width: 50vw). Это позволяет уменьшать или увеличивать размеры элементов соразмерно экрану устройства. Однако создание маленьких кнопок и текста считается плохим тоном, поэтому соразмерное уменьшение не подходит для этих элементов страницы.

СОЗДАНИЕ АДАПТИВНЫХ СТРАНИЦ ДОПОЛНИТЕЛЬНЫМИ ИНСТРУМЕНТАМИ

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

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

СКОРОСТЬ ЗАГРУЗКИ СТАНИЦЫ

Пользователи сети интернет при просмотре сайтов с телефонов обращают внимание не только на мобильную версию, но и на скорость загрузки страницы, ведь мобильный интернет может быть медленнее домашнего. Это сильно влияет на посещаемость тех или иных сайтов, ведь мало кому понравится ожидание загрузки страницы или изображений на ней длительностью в несколько минут. Для справки: по данным Kissmetrics, 40% пользователей покидают сайт, если он загружается больше 3 секунд, 16% пользователей ждут не больше секунды и 47% пользователей не дожидаются загрузки сайта больше 4 секунд. Исходя из этого очевидно, что при создании мобильной версии сайта нужно сделать его максимально «легким», ведь скорость работы интернета зависит от множества факторов. Интересно! Считается, что скорость интернета связана только с обслуживающим оператором связи или удаленностью устройства от вышек связи. На самом деле это связано с возможностями самого устройства, его аппаратной частью — чипами и модулями или программной частью — версии операционной системы. Для уменьшения «веса» сайта в первую очередь следует уменьшить количество картинок и объем этих картинок. Уменьшение числа влияет на количество запросов к серверу — каждая картинка загружается по отдельному запросу. Но это не значит, что нужно убирать картинки с сайтов, для уменьшения их количества используют следующие приемы:

СОЗДАНИЕ СПРАЙТОВ

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

SVG ГРАФИКА

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

ИЗМЕНЕНИЕ РАЗМЕРОВ

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

АДАПТИВНОСТЬ И SEO ПРОДВИЖЕНИЕ

Описанный выше алгоритм Google mobile-first индекс показывает, что позиция вашего сайта в Google напрямую зависит от наличия и качества мобильной версии, наряду с метатегами и ключевыми словами. Второе это трафик пользователей. Все большее число людей посещают интернет с телефона, а значит наличие мобильной версии увеличивает посещаемость вашего сайта. Для справки: Помимо наличия самой мобильной версии Google будет проверять сайты на mobile-friendly по следующем критериям:

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

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

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

Рекомендуем прочитать

27.02.2020

Сколько стоит продвижение группы ВКонтакте

Раскрутка группы ВК осуществляется с помощью платных...
25.01.2021

Самостоятельный SEO-аудит сайта

Оглавление Внутренние факторы (on-page) и факторы доменаВизуальный...

Закажите услуги

Заполните форму и получите
консультацию по нашим услугам

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

Ваша заявка отправляется