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

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

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

Читать позже

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

Обычно для управления индексацией сайта создают и наполняют документ Robots.txtRobots.txt (в русскоязычной транслитерации - "роботс") - файл, позволяющий регулировать индексацию веб-ресурса ведущими поисковиками. Этот текстовый документ…Перейти к словарю терминов . Посредством директив, из которых преимущественно состоит файл, задают порядок действий для поисковых ботов.

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

Созданные «User-agent:» содержат директивы, разрешающие доступ к форматам CSS и JS. Аналогично прописывают «Allow:» для изображений: jpg, jpeg,png, gif. Как для форматов текстовых файлов, CSS, JS и других рекомендуется оставлять разрешающие директивы, даже, если на текущий момент Robots.txtRobots.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 (4)
Следующая статья: Сервисы проверки мобильной версии сайта: скорость загрузки и оптимизация
Предыдущая статья: Мобильные версии сайтов: альтернативы и перспективы
Написать статью для вас?
Отправьте заявку на статью: если проблема окажется актуальной и массовой – мы опишем ее решение и разместим статью на сайте.
Хочу статью
При заказе
продвижения
Скидка на
разработку
сайта
Заказать
Приведи
друга
получи
скидку
Подробнее
Специальное
предложение
против
вируса
Получить кп
SEO на экспорт

Эта книга о том, для чего, кому и как именно нужно выходить за рамки Рунета. В книге мы рассмотрели практические аспекты продвижения сайта в Буржунете, раскрыли характерные отличия от «раскрутки» сайта в России.

SEO на экспорт
SEO на экспорт

Эта книга о том, для чего, кому и как именно нужно выходить за рамки Рунета. В книге мы рассмотрели практические аспекты продвижения сайта в Буржунете, раскрыли характерные отличия от «раскрутки» сайта в России.

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

Читать дальше
Последний SEO-чеклист

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

Последний SEO-чеклист
Последний SEO-чеклист

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

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

Читать дальше
Черная книга про белый PR

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

Черная книга про белый PR
Черная книга про белый PR

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

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

Читать дальше
Обучение основам копирайтинга

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

Обучение основам копирайтинга
Обучение основам копирайтинга

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

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

Читать дальше
Как подготовить сайт к эффективному продвижению

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

Как подготовить сайт к эффективному продвижению
Как подготовить сайт к эффективному продвижению

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

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

Читать дальше
Комментарии
Пока нет комментариев
Написать комментарий
captcha

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

2020-01-20 21:00:00

Колдунщики и специальные элементы: польза или «польза» для сайта

Главная задача оптимизации сайта – занять лучшее место на первой странице поиска из всех возможных. Причем в конкретном случае мы не имеем в виду ТОП-1 или ТОП-10.
Читать 64

2019-12-14 21:00:00

Google отбирает трафик у сайтов: подтверждения и как сохранить посещаемость

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

Читать 56
Больше исследований

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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