ГлавнаяОптимизацияПроверка оптимизации для мобильных

Анализ удобства просмотра сайта на мобильных устройствах при помощи инструментов Google. Проверка оптимизации для мобильных


Проверить мобильную версию сайта

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

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

Как проверить мобильную версию сайта.

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

Mobile-Friendly

Сервис под названием Mobile-Friendly покажет насколько сайт оптимизирован под мобильные устройства и какие есть ошибки в плане оптимизации:

Ссылка на сервис — google.com/webmasters/tools/mobile-friendl.

PageSpeed Insights

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

Сервис называется просто — PageSpeed Insights.

Ссылка на сервис — developers.google.com/speed/pagespeed/insights.

WebPage Test

Проверку загрузки сайта правильно бы проводить для разных устройств и с разных регионов. Сделать проверку можно используя WebPage Test.

Сервис абсолютно бесплатный.

Ссылка на сервис — webpagetest.org.

ScreenFly

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

Инструмент бесплатный.

Ссылка на сервис — quirktools.com/screenfly.

Adobe Edge Inspect

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

Если использовать специально созданное для открытия сайта на разных устройствах приложение под названием Adobe Edge Inspect, задача упрощается.

Инструмент бесплатный.

Ссылка на приложение — adobe.com/ru/products/edge-inspect.html.

Приложение кросс-платформенное.

BrowserStack

BrowserStack является известным сервисом среди разработчиков сайта. Сервис показывает совместимость сайта на реальных устройствах.

Инструмент платный.

Ссылка на сервис — browserstack.com.

Bing Mobile Test

Проверить бесплатно сайт на соответствие требованиям мобильных устройством можно посредством инструмента Mobile Test от поисковой системы Bing. Ссылка на сервис — bing.com/webmaster/tools/mobile-friendliness

www.megaindex.org

Анализ удобства просмотра сайта на мобильных устройствах при помощи инструментов Google

Апдейт алгоритмов ранжирования Google от 21 апреля стал сигналом для многих веб-мастеров к адаптации своих сайтов под мобильные устройства – это официально стало весомым фактором ранжирования сайта в поисковой выдаче. Теперь, по прошествии 5 месяцев можно сказать что этот тренд не только сохранился, но и продолжает развиваться. А это значит, что уже давно пора принять меры для того, чтобы ваш сайт был готов к просмотру на мобильных устройствах.

Вот несколько фактов, которые нужно знать об этом апдейте:

Если страница проходит проверку, то она отмечается значком в мобильной версии результатов поиска. Множество крупных западных сайтов, такие как Reddit, NBC Sports, Vogue, SongLyrics, и Business Week не успели внести изменения и существенно потеряли позиции.

Итак, что же нужно предпринять, чтобы не повторить их печальный опыт?

Как уже было упомянуто, Google запустил несколько инструментов для анализа работы сайта.

Отличный результат, что сказать

Принцип работы очень прост: копируете адрес странички, предназначенной для проверки, ждете и анализируете результат. Проверка происходит небыстро, как правило секунд 20-40. Результаты проверки довольно наглядны и позволяют быстро найти проблемные места. Чаще всего это: «Слишком мелкий шрифт», «Не задана область просмотра для мобильных устройств», «Контент шире экрана», «Ссылки слишком близко друг к другу». Сервис обязательно будет ругаться на использование Flash – в современном мире он поддерживается все хуже и хуже. Этот сервис стоит использовать в первую очередь, для проверки сайта.

Мда, как же так?

Замечательный, хоть и достаточно строгий сервис, который не раз и не два упоминался на Хабре, и которым в обязательном порядке должен проверяться любой сайт (по моему личному мнению). Принцип работы тот же – вводим ссылку, ждем, получаем ряд комментариев и оценку страницы. Чем выше – тем лучше, но редко кому удается достичь результата в 100 баллов, особенно если на сайте используется яндекс.метрика/google analytics и другие подключаемые скрипты.

Итак, чем же он полезен? Во-первых, он проводит схожую проверку страницы, что и предыдущий сервис (но немного быстрее). Во-вторых – PageSpeed, как видно из названия, предназначен для анализа и оптимизации скорости загрузки страницы. Это немаловажный фактор ранжирования, и он учитывается уже достаточно давно. Да и в любом случае, медленно загружающаяся страница всегда теряет посетителей. PageSpeed дает рекомендации не только по внешнему виду страницы на мобильных устройствах, но и напоминает о том что стоит включить кеширование, прописать gzip/deflate сжатие ресурсов, минифицировать css и js, а также убрать оные в конец кода, чтобы не блокировать загрузку. Но на практике, самый большой прирост скорости дает оптимизация картинок – именно этот ресурс обычно грузится дольше всех. Утилита под названием FileOptimizer позволяет решить эту проблему достаточно быстро, кроме нее есть ряд серверных утилит и аналогов – в общем, было бы желание.

Также, можно получить рекомендации по удобству просмотра в инструментах разработчика — www.google.com/webmasters/tools (если у вас уже есть аккаунт). Там вы можете получить все сообщения об ошибках по своему сайту, графики и другую ценную информацию. К сожалению, объем предоставляемой информации этим сервисом настолько велик, что его разбора хватит на несколько отдельных статей.

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

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

Вместо заключения

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

habr.com

Проверить сайт на мобильных устройствах. 5 бесплатных сервисов

Приветствую всех. Интернет развивается колоссально быстрыми темпами и сегодня увидеть посещения на сайт с мобильных устройств и планшетом уже не диковинка, как это было раньше. Рынок мобильного интернета набирает очень быстрые темпы и поэтому создатели сайтов должны адаптировать свои сайты под данные устройства. Если посмотреть последние новости интернет индустрии, то можно увидеть, что все идет к тому, что мобильные устройства в ближайшие 5-10 лет заберут большую половину рынка под себя.

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

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

То, что сайты будут помечаться информация 100%, остальная информация только предположения.

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

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

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

  1. Google Webmaster Tools (Mobile Friendly Test)
  2. Responsinator.
  3. Ipadpeek.
  4. Mobile Phone Emulator.
  5. Mattkersley.

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

1. Google Webmaster Tools (Mobile Friendly Test). Самый лучший сервис поскольку он разработан компанией Google. Хорош он тем, что можно посмотреть не только как отображается сайт на экране, а и получить все необходимые рекомендации для устранения ошибок и правильного отображения. Для того, что бы увидеть все ошибки необходимо перейти в Google Webmaster Tools, в пункте “Поисковый трафик” выбрать “Удобство просмотра на мобильных устройствах”. После перехода на страницу можно увидеть проблемы с удобством просмотра.

После просмотра ошибок можно перейти к тесту самого сайта. Переходим к тесту Mobile Friendly Test, вводим домен и получаем все рекомендации, которые необходимо выполнить. Для просмотра всех рекомендаций, справа нажимаем на кнопку «Далее» в пункте “Как сделать страницу удобной для мобильных”.

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

2. Теперь переходим к остальным сервисам  с помощью которых можно проверить сайт на мобильных устройствах.

Все они довольно просты в применении, достаточно ввести в строку адрес сайта и получите все результаты  сайта на различных устройствах. Давайте для примера рассмотрим сервис Responsinator. Переходим и вводим адрес и нажимаем «GO«, я ввожу loleknbolek. Результаты получены.

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

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

Всем спасибо! Все вопросы задавайте в комментариях.

loleknbolek.com

Проверяем отображение мобильной версии сайта с помощью Google Chrome

Мы уже обсуждали как сделать мобильную версию сайта, в текущей статье речь пойдет о том, как осуществляется проверка мобильной версии сайта, её удобство, читабельность и правильность отображения.

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

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

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

Проверяем качество мобильной вёрстки с помощью Google Chrome

Для разработчиков у Google есть отличный инструмент для имитации мобильных устройств. Этот инструмент встроен в браузер Google Chrome. Для доступа к нему нужно нажать F12 в браузере (перейти в режим разработчика) и нажать на значок смартфона:

Страница преобразуется в режим переключения устройства, где вы сможете выбрать одно из популярных мобильных устройств, тип сети (GPRS, 2G, 3G, 4G и т.д.), указать строгие параметры дисплея. Это позволяет имитировать работу сайта на конкретных мобильных девайсах. К числу доступных устройств относятся различные версии iPad, iPad Mini, iPhone, BlackBerry, Google Nexus, HTC, LG, Nokia, Samsung Galaxy и некоторых других популярных устройств.

Выбрав определенный девайс вы сможете проверить сайт на мобильном устройстве. Например, отображение главной страницы сайта "Нубекс" на iPad 3:

И на Samsung Galaxy S4:

Здесь вы сможете не только увидеть отображение сайта на том или ином девайсе, но и полноценно работать с сайтом, будто перед вами находится нужный гаджет. Несомненно, этот инструмент является просто незаменимым при разработке мобильной версии сайта, но как будет отображаться ваш сайт на реальных устройствах - нужно проверять на реальных устройствах. Особенно это важно, если нужно проверить отображение сайта в "родных" браузерах (Safari - для iPad/iPhone, IE - для Windows Phone и т.д.).

nubex.ru

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

Приветствую вас, дорогие друзья!

Мобильные гаджеты заполонили мир. Без телефона сегодня даже за хлебом не ходят.

В наше время Интернет стремительно развивается. Быстрый рост рынка мобильного Интернета заставляет создателей веб-ресурсов адаптировать свои сайты под данный тип устройств.

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

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

Все они работают практически по одному и тому же принципу:

  1. заходите на сайт разработчика того или иного сервиса
  2. скачиваете нужное ПО
  3. запускаете приложение
  4. и через некоторое время мобильная версия вашего веб-сайта перед вами!

Существуют сервисы, которые могут осуществить тестирование вашего сайта в режиме онлайн.

Выбор, как всегда, за вами!

Бесплатные

Mobile Friendly. Данное приложение создано компанией Гугл специально для того, чтобы проверить оптимизирован ли веб-ресурс под смартфоны и прочие гаджеты.

Responsinator. Благодаря данному приложению вы легко сможете увидеть, как выглядит сайт на Kindle, iPad, Android, iPhone.

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

Opera Mini Simulator. Эмулятор от компании Opera содержит весьма большую базу мобильных гаджетов. Единственным его недостатком можно считать отсутствие режима онлайн, то есть для тестирования вашего ресурса вам придется скачать и установить нужное ПО.

Gomez. Оценивает совместимость вашего ресурса с мобильными устройствами по 30 параметрам, что позволяет получить наиболее полную оценку. Для бесплатного использования следует ввести свои контактные данные.

MobiReady. Отличный инструмент для тестирования, который оценивает адаптивность дизайна. Проверка основана на лучших стандартах W3C (Консорциума Всемирной паутины).

Mobile Phone Emulator и Screenfly. Схожие сервисы, которые тоже дают возможность просматривать состояние веб-ресурса на экранах любых гаджетов.

Платные

CrossBrowserTesting. Проверяет на 130 различных браузерах и 25 операционках, включая: Blackberry, Android, iPad, iPhone. За его использование вам надо будет ежемесячно платить по 29.95$.

BrowserStack. Обеспечивает быстрый доступ к огромной базе браузеров. Стоит до 19$ за один месяц, но есть и бесплатная версия.

Browshot. Предназначен для снятия скриншотов с Android, iPad, iPhone. За пять скриншотов вам придётся заплатить 1 доллар.

Perfecto Mobile. Даёт доступ к базе планшетов и сотовых телефонов, что позволяет вам видеть, насколько качественна оптимизация на каждом типе устройств. За его использование нужно платить до 15 долларов за сутки.

Multi-Browser Viewer. Кросс-браузерное приложение, содержащее мобильные эмуляторы и браузеры для проведения тестирования в любом формате. Стоит до 140 долларов, есть и бесплатная демо-версия.

DeviceAnywhere. Прекрасный инструмент, дающий возможность точечно проверять веб-контент, тестируя ресурс в реальном времени. Может быть как платным (по 100 долларов в месяц), так и бесплатным.

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

Мобильная версия для поисковиков

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

Проверить адаптацию мобильной версии под гугл можно с помощью сервиса Mobile Friendly. Его я уже упоминал в списке бесплатных инструментов.

А для яндекса есть похожий инструмент в пока тестируемой версии кабинета для вебмастеров (https://beta.webmaster.yandex.ru/).

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

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

С уважением! Абдуллин Руслан

Понравился блог? Подпишись, чтобы получать новые статьи на почту и быть в курсе всех событий!

abdullinru.ru

Блог Михаила Ширма » 6 инструментов, для оптимизации сайта под mobile

В связи с этим нововведениями для вебмастеров была опубликована официальная информация и рекомендации по усовершенствованию ресурсов:

Ключевыми факторами, которые учитываются при анализе мобильной совместимости, стали: адаптация контента, размер шрифта, удобство пользования элементами навигации, скорость загрузки в 3G–4G сети.

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

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

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

Проверка мобильных страниц в Яндексе

Для проверки ресурса необходимо добавить сайт в Яндекс.Вебмастер.

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

Использует технологию всем известного WebPageTest.

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

Он доступен на многих языках, в том числе и на русском. Главным достоинством инструментом является то, что результаты проверки можно собрать в отчет и отправить на email.

Для начала проверки введите URL сайта в специальном поле. Тестирование ресурса может занять около минуты.

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

Результат сравнения скорости загрузки вашего сайта с ресурсами в схожих отраслях (хороший показатель и наоборот):

Что проверяет Mobile Website Speed Testing:

Пример отчета, который высылается на email:

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

Он оценивает несколько показателей:

Успешное прохождение теста является одним из SEO-факторов, учитываемых поисковой системой при ранжировании.

Пользоваться инструментом крайне просто – нужно лишь вставить URL-адрес и подождать несколько секунд до завершения тестирования.

Google Search Console

Для работы с инструментом потребуется аккаунт в Google, поэтому создайте его, если не сделали этого раньше. Чтобы использовать инструмент, зайдите в Search Console, выберите сайт, нажмите «Поисковый трафик» → «Удобство просмотра на мобильных устройствах».

В открывшемся окне отчета вы увидите ошибки и рекомендации по их исправлению.

Даже если ваш сайт оптимизирован для смартфонов, полезно посмотреть, как Google загружает мобильные страницы. Чтобы проанализировать это, войдите в Search Console → «Сканирование» → «Посмотреть как Googlebot». Далее выберите → Mobile: Smartphone.

После этого добавьте URL страницы и нажмите «Получить и отобразить».

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

Сервис запрашивает URL, отображает ответ HTTP и саму страницу в соответствии с заданной платформой (здесь потребуется выбрать «Мобильные устройства»). Благодаря такой операции можно увидеть различия между тем, как ресурс видят робот и пользователь.

«Анализ поисковых запросов» в Search Console

С помощью Google Analytics вы можете получить отличную мобильную поисковую аналитику. В сервисе можно настроить доступ к данным Search Console и проанализировать отчеты для своего сайта.

Чтобы просмотреть имеющуюся информацию, перейдите в Google Search Console → «Поисковый трафик» → «Анализ поисковых запросов».

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

Данные можно фильтровать по нескольким категориям. Например, если включена группировка по запросам, можно добавить фильтры «Страна = Россия» и «Тип устройства = Мобильные».

Отметим, что настройки фильтрации останутся неизменными.

Преимуществом инструмента можно назвать то, что он позволяет провести сравнение аналитики по ПК и смартфонам.

Чтобы узнать эту информацию, нажмите «Устройства» → «Мобильные» → «Сравнить устройства». Перед началом анализа убедитесь, что Вы сравниваете Мобильный тип устройств и ПК.

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

У этого инструмента есть версия только на английском языке. Речь идет о Mobile SEO Issues Tool от Varvy.

Основной целью сервиса является «проверка проблем мобильных сайтов». Mobile SEO Issues Tool прост в использовании, поэтому работа с ним у большинства пользователей не вызовет никаких затруднений.

Сервис помогает проанализировать ряд критериев:

Для создания отчета потребуется всего несколько секунд. В пустое поле введите URL и нажмите кнопку Test. После этого Вы получите сводку, в которой будут указаны основные проблемы с тестируемым веб-ресурсом.

Источник: https://m.seonews.ru/

mopassan.com

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

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

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

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

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

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

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

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

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

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

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

upread.ru

Prostoy-Site | Все права защищены © 2018 | Карта сайта