Филин Лаки
212,90
рейтинг
11 декабря 2014 в 15:05

Разработка → Улучшаем мобильные сайты с Google Developers по-русски

Привет, Хабр!

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

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



Как сделать мобильную версию сайта лучше?

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

Руководство к действию

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

Что еще почитать



Современный WEB

Год назад около 66% взрослого и платёжеспособного населения глобальной сети использовали для доступа к ней и десктопы/ноутбуки, и мобильные устройства. Более 17% общего интернет-трафика генерируют только смартфоны и планшеты. Современные технологии сделали интернет ближе, упростили разработку сайтов, позволили носить восьмиядерные процессоры и QuadHD экраны в кармане, работать в дороге и принимать HD-видео на скорости 100 Км/Ч, но, к сожалению, они не могут исправить за нас те ошибки, которые мы допустили при создании сайтов в прошлом. Большинство рекомендаций и советов требуют минимум времени на внедрение и значительно облегчат жизнь пользователям смартфонов и планшетов. Давайте вместе сделаем мобильный браузинг лучше.

И напоследок опрос!
Что вас больше всего раздражает в мобильных сайтах?

Проголосовало 484 человека. Воздержалось 110 человек.

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

Автор: @Developers_Relations
Google
рейтинг 212,90
Филин Лаки

Комментарии (9)

  • 0
    Раздражает, что при заходе на habrahabr.ru/feed/all/ попадешь на страницу ошибки, а когда тыкаешь на кнопку «полная версия» — в этом момент подгружается реклама какой-нибудь очередной нокии. А ещё раздражает, что эти манипуляции по нескольку раз на день нужно делать, сайт не запоминает навсегда, что я с мобилки хочу полную версию.
  • +4
    Невозможность перейти на полную версию сайта — вот это бесит просто
    PS:
    Вы серьёзно?
    image
    • +1
      Так вам же написали «ПОИСКОВАЯ» оптимизация)
    • +1
      Мы очень серьёзно :) Спасибо, что сообщаете о недоработках. В частности, об этой мы уже знаем и чиним — скоро всё будет хорошо.

      Если будет обнаруживать ещё что-то, пожалуйста, пишите. Мы очень и очень признательны за все отзывы.
  • 0
    Как я понял, если мобильная версия закрыта от индексайии, то этот текст будет неудовлетворительным.
    • 0
      Да, это вы правильно поняли. но это, по-моему, логично. И не столько от индексации, сколько от сканирования.
  • 0
    Сайты, сделанные на Битриксе, у которых включен CDN (картинки и стили, получается, имеют внешний урл) — не проходят проверку тестом. Почему-то блочатся стили и картинки, соответственно, гугл-робот видит сайт без стилей и определяется его как mobile-unfriendly (хотя на самом деле сайт очень даже friendly — расстояния между ссылками нормальные, картинки большие и т.п.). Вот пример: joxi.ru/gV2V489Cx0Mzrv — можно посмотреть сайт на телефоне или в браузере с маленькой шириной окна и убедиться, что он выглядит хорошо.
  • 0
    Сделайте плавный transition и animation в css. На дно-фонах, типа 3gs всё летает, на нексусе пятом тормозит. Простейшая анимация экрана «назад».

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое Разработка