Мобильные версии сайтов: ошибки верстки и их исправление

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

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

проверка
Читать позже

Закрыт доступ к файлам стилей  JS/CSS и изображениям

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

Есть ряд документов со специальными расширениями (txt, doc,pdf,xls,ppt), которые закрывают от индексации из следующих соображений. Файлы дают весомую долю релевантности странице, одновременно с этим поисковики не смогут отдавать предпочтение столь важным, но все-таки не главным документам.

Созданные «User-agent:» содержат директивы, разрешающие доступ к форматам CSS и JS. Аналогично прописывают «Allow:» для изображений: jpg, jpeg,png, gif. Как для форматов текстовых файлов, CSS, JS и других рекомендуется оставлять разрешающие директивы, даже, если на текущий момент robots.txt не содержит таковых. Это делается для подстраховки, на случай добавления картинок или иных документов разными лицами (например, при смене ведущих специалистов). Дополнительно следует учитывать правильность синтаксиса: для каждого формата создается отдельная директива.

Нельзя писать так:

Disallow: /CSS/ jpg/ pdf/

Но можно так:

Disallow: /CSS/

Disallow: /jpg/

Disallow: /pdf/

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

 

Массовый отказ от Flash

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

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

Если сайт все еще использует Flash, стоит пересмотреть свои позиции и перейти на более современные технологии.

 

Метатега viewport: какова его роль в работе мобильной версии?

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

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

 

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

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

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

 

Следует обратить внимание на фрагмент метатега, задающий ширину отображаемой области: «initial-scale=1.0». Приведенное значение параметра соответствует согласно максимальному разрешению мобильного гаджета. В некотором смысле – это универсальное решение.

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

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

 

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

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

 

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

 

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

 

Как понять, когда надо использовать методику контрольных точек? Разработчики отталкиваются от следующих данных: для мобильных устройств лучший стандарт – 70 символов без пробелов. Величина соответствует 7-10 словам. Поэтому для текстовых блоков, содержащих больше символов, рекомендуют применять методику контрольных точек. Способ реализуется путем задания нужной ширины.

 

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

Текст или изображение не «упирается» в границы корпуса.

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

@media (min-width 600px){

  article {

      width: 575px;

      margin-left: auto;

      margin-right: auto;

  }

}

 

Расстояние между интерактивными элементами

Часто при сложной верстке специалисты забывают о масштабировании мобильных устройств. В результате интерактивные элементы страницы оказываются слишком близко. Рекомендуется объекты, предназначенные для нажатия, делать около 9 миллиметров. Такое значение соответствует приблизительно 48 пикселям. Тогда, как расстояние между двумя «кнопками» следует сохранять равным минимальному значению – 8 пикселей.

 

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

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

 

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

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

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

 

Памятка для владельцев проектов

  • Адаптивная верстка – один из простейших и малозатратных способов для получения мобильной версии.
  • Системы управления контентом (CMS) периодически устаревают, требуют обновлений.
  • Технология Flash не поддерживается большинством гаджетов и браузеров.
  • Меньшее число скрытых фрагментов текста от пользователя повышает шансы на успешное продвижение проекта.
  • Отказ от некоторых хитростей SEO, например, клоакинга позволит избежать санкций со стороны поисковых систем.
  • Метатег viewport нужен для обеспечения работоспособности мобильных версий.
  • Корректно задавайте параметры ширины страниц/строк. Оптимальное значение символов – 70-80.
  • Отступы между интерактивными элементами повышают юзабилити проекта.
  • Мобильная версия сайта должна попадать в индекс Google, проверка осуществляется через Вебмастер.
  • Использование подсказок сервисов Гугл, а также общих рекомендаций для веб мастеров поможет быстрее решить проблемы.
  • Определение скорости страниц доступно в поисковой системе. Для этих целей разработано три свободных сервиса.
  • При анализе трафика с мобильных устройств надо помнить о количестве отказов, искать возможные технические ошибки, провоцирующие их.

Возможно, мы о чем-то еще не подумали. Будем рады вашим комментариям.

Оцените статью: 5.0 (6)
Следующая статья: Поисковая оптимизация сайта: что делают seo-специалисты?
Предыдущая статья: Продвижение сайта еще на этапе разработки: секреты оптимизаторов
Написать статью для вас?
Отправьте заявку на статью: если проблема окажется актуальной и массовой – мы опишем ее решение и разместим статью на сайте.
Хочу статью
При заказе
продвижения
Скидка на
разработку
сайта
Заказать
Приведи
друга
получи
скидку
Подробнее
Специальное
предложение
против
вируса
Получить кп
Комментарии
Пока нет комментариев
Написать комментарий
captcha

Новые исследования

2021-03-03 00:00:00

Повышение продаж применяя данные из отчетов Google Search Console

Google Search Console - это бесплатный  SEO-инструмент, обозначенной в самом названии системы. Способы взаимодействия и примеры практического применения рассматриваются далее.
Читать 54

2021-02-28 00:00:00

Гугл Новости и SEO - все, что нужно знать владельцам сайтов, которые хотят больше трафика из Google News

Владельцы новостных сайтов и медиа-холдинги стремятся занимать первые места в поисковой выдаче среди наиболее популярных сайтов, предоставляющих доступ к контенту разного типа. Как опытные SEO-специалисты, работающие в том числе с публикациями, мы хотим поделиться некоторыми идеями и советами по ранжированию в Google. Речь пойдет исключительно о новостных проектах, имеющих шанс попасть в индекс приложения “Новости Google”. Мы определили ряд практик и методов по оптимизации контента, которые применимы к поисковому продвижению новостных сайтов (страниц, приложений и прочих форматов сети).
Читать 51
Больше исследований

Интервью и мнения SEO-гуру

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

Евгений Аралов: главные прогнозы на 2020 (сервисы и методы)

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

Анализ SEO для СМИ: ведущий эксперт отрасли Галина Бакушева

Для одних Галина Бакушева ассоциируется с каналом Телеграм «Сеошница», для других, она создатель собственного ТВ на фейсбук. Однако такая популярность не г...

Ксения Пескова: качественный продукт приятно рассматривать даже краулерам

Всего два года потребовалось, чтобы стажер SiteClinic, Ксения Пескова, стала не просто тимлидом компании, но и трастовым экспертом в области SEO. Все началось почти ср...

Кирилл Рамирас: лучшие рекомендации по ведению блога для ИМ

Кирилл Рамирас интересен владельцам бизнеса в сети своими успешными проектами, опытом работы в SEO с 2007 года. Регулярное обновление публикаций на Altblog.ru &nd...

Алексей Алексеич: рост и боль в продвижении 2020 - какие прогнозы сбылись?

Сам о себе говорит, что он точно не Андрей, любит котов и смотрит «Битву Престолов». Если серьезно, эксперту 25 лет и с 2011 года основательно занимается с...

Андрей Буйлов: проблемы seo клиента не волнуют!

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

Все интервью
Нам доверяют крупные международные компании