Комплексное продвижение сайта от $490

Работы рассчитаны на стратегию долгосрочных продаж, являются
приоритетным направлением специалистов Topodin

Разработка сайтов и систем от $290

Стратегии комплексного присутствия в сети. Интернет-маркетинг для
брендов и открытых товарно-продуктовых сегментов

Сопровождение проктов от $19/час

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

Комплексное продвижение
сайта от $490

Работы рассчитаны на стратегию долгосрочных продаж, являются приоритетным направлением специалистов Topodin

Разработка сайтов и систем
от $290

Стратегии комплексного присутствия в сети. Интернет-маркетинг для брендов и открытых товарно-продуктовых сегментов.

Сопровождение проктов
от $19/час

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

Кейсы по СНГ

Кейсы по продвижение сайтов в столице и по всей стране.

Посмотреть кейс

Кейсы за рубежом

Мультирегиональные кейсы по раскрутке в нескольких поисковых системах.

Посмотреть кейс

Смотреть план работ

Общий план работ по оптимизации и продвижению.

Посмотреть кейс

Кейсы по СНГ

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

Посмотреть кейс

Кейсы за рубежом

Мультирегиональные кейсы по раскрутке в нескольких поисковых системах. Ниши: страницы захвата, визитки, агрегаторы, стартапы и игровые тотализаторы.

Посмотреть кейс

Смотреть план работ

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

Посмотреть кейс

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

Вместе дешевле

Скидка на новый интернет-магазин - 50%, при заказе SEO.

Синергия продаж

При заказе на 50 000 р., рекламная компания в Яндекс Директ на 15 000 р.

Консультант и защита

Система онлайн-консультаций и защита сайта от внешних DDOS-атак.

ВМЕСТЕ ДЕШЕВЛЕ

При заказе продвижения скидка на новый интернет-магазин - 50%. Цена магазина $600/2=$300!

СИНЕРГИЯ ПРОДАЖ

Заказывай раскрутку за 35 000р и в подарок будет рекламная компания в Яндекс Директ на 15 000р.

КОНСУЛЬТАНТ И ЗАЩИТА

Для всех наших клиентов: система онлайн-консультаций и защита сайта от внешних DDOS-атак в подарок.

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

Для бизнеса

По тематике сайта

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

По типу сайта

Работы рассчитаны на стратегию долгосрочных продаж, являются приоритетным направлением специалистов компании Topodin

Блог Поисковая оптимизация

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

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

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

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

АВТОР:
Мобильные версии сайтов: ошибки верстки и их исправление
5.0 (2)
Содержание статьи

Закрыт доступ к файлам стилей  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, проверка осуществляется через Вебмастер.
  • Использование подсказок сервисов Гугл, а также общих рекомендаций для веб мастеров поможет быстрее решить проблемы.
  • Определение скорости страниц доступно в поисковой системе. Для этих целей разработано три свободных сервиса.
  • При анализе трафика с мобильных устройств надо помнить о количестве отказов, искать возможные технические ошибки, провоцирующие их.

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

УРОВЕНЬ ЧТЕНИЯ: ЭКСПЕРТ


Пока нет комментариев



Продвижение сайтов
в Яндекс и Google по России и СНГ

Комплексное продвижение:
1. Продвижение в поисковых системах 2. Продвижение в социальных сетях.
3. Региональное продвижение 4. Контекстная реклама в Yandex и Google.

Зарабатываем деньги. Экономим время
от $400 в Киеве
от 36.000р в Москве

Популярные услуги

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

Успешные кейсы

след. >
361,82
ПОСЕТИТЕЛЕЙ
762,35
ПЕРЕХОДОВ
1382,82
ПРОСМОТРОВ

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

Маркетинг в Cети
АКЦИЯ, ВСЕМ ПОДПИСАВШИМСЯ НА РАССЫЛКУ
Безвременная скидка на
услуги компании TOPODIN 10%

Получите предложение

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

О нас пишут

В прошлый раз вы начали заполнять форму заявки, но не закончили. Мы сохранили ваши данные, хотите продолжить оформление заявки?   Продолжить... X

Начало – половина дела

Наша анкета достаточно проста и не отнимет у вас много времени.
Нужно просто правильно и вдумчиво заполнить все поля.

Форма заполнена на 0%

Базовые данные

Ваш телефон или e-mail *

Адрес вашего сайта *

Выберите необходимую услугу *

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