На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Хитрости прохождения проверки оптимизации для мобильных


Мобильная или адаптивная версия сайта сегодня – это жизненная необходимость для каждого вебмастера. Есть разные сервисы по проверке удобства просмотра на мобильных устройствах, я предпочитаю пользоваться от двух ведущих поисковиков в рунете – это гугл и яндекс. Интересно, что они немного отличаются, то есть один и тот же сайт может получить разные оценки. Чисто субъективно (на мой взгляд) у яндекса проверка оптимизации для мобильных строже.



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

Итак, вы уже наверняка указали тег viewport, убрали flash-элементы, java-апплеты и silverlight-плагины со старницы и теперь осталось только убрать горизонтальную прокрутку и сделать побольше размер текста (шрифта). Первый совет: не трогайте шрифт. Как правило, сам размер шрифтов не надо увеличивать – лучше позаботьтесь о том, чтобы ссылки не были близко расположены друг к другу – увеличьте расстояние между ними с помощью параметра margin на 10-20px – этого вполне хватит.

Следующий момент – сервисы проверки от яндекса и гугла понимают JavaScript и jQuery – так что вполне можете использовать скрипты для правки верстки, если нет возможности сделать адаптацию некоторых элементов статичными стилями.

Теперь переходим к горизонтальной прокрутке. Очень часто причиной наличия её является строго указанная ширина изображений. Замените width:200px; на max-width:200px; - и эта проблема уйдет.

У других элементов тоже не стоит задавать фиксированную ширину для мобильной версии – лучше так:

@media screen and (max-width: ширина) {
Элемент {
width:100%;
}
}
Интересно, что данное правило может сработать не во всех случаях. Иногда элементу надо присвоить display:block;, чтобы можно было управлять его шириной. Таких хитростей и тонкостей в адаптации еще хватает – часто приходится с головой залезть в исходный код ,чтоб понять, что же все таки создает горизонтальную прокрутку.

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





тегизаметки, сайтостроение, адаптация, оптимизация сайта





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




Идеальная компьютерная безопасность – миф. Но это все равно важно
600 человек в день


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.