23 Август 2017, 20:41
SEOPRAVDA.RU


Автор Тема: Как сделать сайт удобным для мобильных устройств  (Прочитано 1262 раз)

0 Пользователей и 1 Гость просматривают эту тему.

07 Июнь 2016, 22:43
Прочитано 1262 раз
Оффлайн

Сергей Нижегородцев

СОЗДАТЕЛЬ (форума)

Как сделать сайт действительно удобным для мобильных устройств

Под таким названием настоящий Платон Щукин из ТП Яндекса (не путать с клонами) опубликовал сегодня в своем блоге полезную статью - ссылка - читаем внимательно:

"Наверняка каждый не раз сталкивался с тем, как иногда важно быстро найти с мобильного телефона удобный и понятный сайт с нужной информацией. Именно поэтому некоторое время назад мы начали отмечать в мобильной выдаче страницы, оптимизированные для мобильных устройств, меткой «Мобильная версия», а также отдавать им предпочтение при ранжировании.

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


1. Какие бывают мобильные сайты

Обычно сайты представляют для мобильных устройств одним из трех способов:

-сайты с мобильной версией на поддомене (отдельная версия сайта, написанная специально для мобильных устройств, например: m.site.ru);
-сайты с адаптивной версткой (верстка, которая адаптируется под устройство, на котором открывается сайт);
-сайты с динамической версткой (сервер вашего сайта отдает для разных устройств разный размер страниц).

Поисковые роботы с одинаковым приоритетом воспринимают перечисленные выше типы адаптации, поэтому выбор полностью за вами. Но стоит обратить внимание на несколько нюансов.

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

-Во-вторых, если вы остановились на варианте с поддоменом, выбирайте простое и понятное для пользователей доменное имя с явным указанием на мобильный сайт. Например, m.site.com , а в случае наличия регионального поддомена - m.novosib.site.com. Такая прямая зависимость поможет пользователям и поисковым системам связать основную и мобильную версию вашего сайта.

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

2. Несколько слов о создании сайта.

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

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

3. Как проверить сайт на мобилопригодность

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

Самыми распространенными ошибками, которые позволяет выявить инструмент в Яндекс.Вебмастере, являются наличие горизонтальной прокрутки, много мелкого текста, отсутствие или неверное расположение мета-тега «viewport», а также наличие невоспроизводимого видео.

4. Что делать, если обнаружены ошибки

Хочу поподробнее остановиться на тех замечаниях, которые вы можете увидеть в сервисе Яндекс.Вебмастер:

Горизонтальная прокрутка

Если при проверке сайта в Яндекс.Вебмастере выявлена горизонтальная прокрутка, возможно, ширина его страниц больше среднего. Как правило, большинство пользователей использует смартфоны c разрешением 320 px, вы можете ориентироваться на эту величину. Заметьте, некоторые браузеры могут автоматически сжимать страницу под размеры мобильного устройства, поэтому вы можете и не обнаружить прокрутки при просмотре сайта, чего может не произойти у посетителя вашего сайта, и он увидит полосу прокрутки. Вместе с этим следует проверить отступы, встроенные картинки и логотипы – возможно, именно из-за них меняется итоговая ширина той или иной страницы.

Много мелкого текста

Если на сайте обнаружено много мелкого текста, то это также может быть следствием большой ширины страницы. Даже если шрифт на вашем сайте составляет 12 px, а ширина страницы равна, к примеру, 720 px, то браузер, сжимая страницу до среднего значения, скорее всего, уменьшит его почти в 2 раза.
В данной ситуации необходимо либо увеличивать размер шрифта таким образом, чтобы после масштабирования он оставался читаемым, либо менять ширину страницы, приводя её к рекомендуемой.

Отсутствие мета-тега «viewport»

Не меньшее внимание стоит уделять мета-тегу «viewport», который необходим для того, чтобы браузер мобильного устройства знал, что на сайте есть адаптивная верстка. Если выявлено, что на вашем сайте отсутствует данный мета-тег, проверьте, что он расположен именно в контейнере <head>, что соответствует стандарту HTML. Кроме того, мы советуем устанавливать динамическую область просмотра в зависимости от ширины экрана устройства:

<meta name="viewport" content="width=device-width, initial-scale=1">

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

Наличие Flash-элементов

Если на вашем сайте размещены видеоролики, убедитесь, что они корректно воспроизводятся с мобильных устройств и имеют формат HTML5. К сожалению, форматы Flash, Silverlight и Applet большинство мобильных браузеров не воспринимает, поэтому старайтесь не использовать их.

Мне бы также хотелось рассказать вам подробнее об индексировании мобильной версии сайта на поддомене, но это будет немного позже, ждите новой записи. Чтобы не пропустить пост, вы можете подписаться с помощью кнопки «Подписка» вверху страницы.
Надеюсь, я смог прояснить ситуацию по ряду вопросов о мобильной версии сайта. Создавайте и пользуйтесь с удовольствием!"



23 Август 2016, 21:40
Ответ #1
Оффлайн

rBo3guK


На самом деле тема очень интересная, у меня вот вопрос появился: "Неудобность сайта для мобильных устройств влияет только на мобильную выдачу?" (интересуют и Я и G)

Я занимаюсь продажами b2b оборудования, клиентов частников дай бог 5-10%, люди которые ищут и обращаются сидят в офисах (львиная часть работает на должностях связанных с закупками) и соответственно сидят с компьютеров. У нашей компании 2 сайта, согласно данным liveinternet доля Safari составляет 2.2% на одном сайте и 5.3% на втором сайте.

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

23 Август 2016, 22:53
Ответ #2
Оффлайн

Сергей Нижегородцев

СОЗДАТЕЛЬ (форума)
если конечно "мобильная неудобность" не сказывается на обычной десктопной выдаче
Приветствую нового форумчанина! Да, есть такое мнение, что Гугл уже понижает выдачу десктопную за это, а Яндекс собирается :)

09 Сентябрь 2016, 23:05
Ответ #3
Оффлайн

Crasnof


если конечно "мобильная неудобность" не сказывается на обычной десктопной выдаче
Приветствую нового форумчанина! Да, есть такое мнение, что Гугл уже понижает выдачу десктопную за это, а Яндекс собирается :)

Да никого не понижают в гугле, в Украинском гугле это 100%. За что понижать то ?
Другое дело, что мобильная версия для интернет-магазина это гораздо сложнее, чем для того же статейника, т.к. надо:
- кнопка купить была заметна
- информация о товаре
- служебная инфа
- фото

Уместить все это удобным образом на смартфоне в 5 дюймах не всегда представляется возможным. Планшет без проблем. Я и сам сейчас об этом думаю, т.к. для своего ИМ был использован бюджетный шаблон неадаптивный.

25 Октябрь 2016, 17:47
Ответ #4
Оффлайн

Вебмастер


Адаптивный дизайн решает все вопросы. Да, дороже. Да, сложнее. Но оно того стоит. Со временем выползают свои минусы, но тут пока не попробуешь - не узнаешь. 

25 Октябрь 2016, 18:22
Ответ #5
Оффлайн

Сергей Нижегородцев

СОЗДАТЕЛЬ (форума)
Адаптивный дизайн решает все вопросы. Да, дороже. Да, сложнее. Но оно того стоит
Согласен, мобильная версия - не выход, да и муторно это, если заморачиваться уникальностью вдобавок

25 Октябрь 2016, 19:45
Ответ #6
Оффлайн

Вебмастер


У адаптива есть один минус, который является отражением его достоинств:
1. он приводит на сайт больше посетителей с мобильных, как следствие:
2. Посетители с мобильных имеют худшие по сравнению с десктопами ПФ, как следствие:
3. Суммарные ПФ сайта проседают за счёт увеличения удельной доли посетителей с мобильных, как следствие:
4. Сайт просаживается в органической выдаче.

25 Октябрь 2016, 19:50
Ответ #7
Оффлайн

Вебмастер


Недавно ездил в другой город и в руках был только мобильный, по местным сайтам ходил только с мобильного, в результате возненавидел вебмастеров, которые не думают про мобильных клиентов!

25 Октябрь 2016, 21:12
Ответ #8
Оффлайн

Сергей Нижегородцев

СОЗДАТЕЛЬ (форума)
возненавидел вебмастеров, которые не думают про мобильных клиентов!

От любви до ненависти один шаг. Недавно для поездок и комфортной работы в поездках купил недорогой китайский планшет-трансформер (клава в комплекте, если понадобится) с 10-й Виндой - там все нормально открывается и оперативки 2 гига, и постоянной памяти 32 Гб  :smile:

Я вот думаю, а можно ли чисто технически на аппаратном уровне (любого смартфона) реализовать идею адаптивного просмотра любого сайта, а не на уровне адаптации сайта? Уверен, что можно!  :smile: