Home / SEO / Что такое адаптивный сайт или как должен выглядеть сайт на разных разрешениях экрана?
Бесплатная накрутка ВКонтакте

Что такое адаптивный сайт или как должен выглядеть сайт на разных разрешениях экрана?

Привет, читатели блога!

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

адаптивный дизайн сайта

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

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

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

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

Так вот с ноября 2014 года, Google стал помечать сайты, оптимизированные под мобильные устройства ярлыком «mobile-friendly». Этот ярлык появился в сниппетах поисковой выдачи.

сниппет мобильной адаптивности

Конечно все это пока на стадии тестирования, но мне кажется, это хорошая идея и она точно приживется.

Google даже создал страничку, где можно проверить свой сайт на мобильность, она находиться по этому адресу — https://www.google.com/webmasters/tools/mobile-friendly/.

проверка на мобильность в Google

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

Теперь обратимся к Яндексу. Он пока не рассылает сообщений в отличие от Google. Но, может замечали, все что появляется в Google, через какое-то время начинает использовать и Яндекс. Поэтому я уверен, что вскоре и самый знаменитый поисковик Рунета начнет придираться.

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

Адаптивная, мобильная, резиновая и фиксированная верстка сайта.

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

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

Возможно вас заинтересует:  Фильтр АГС Яндекса.

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

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

Это разрешение компьютера:

меню блога с компьютера

А это разрешение телефона:

меню с мобильного

Пример адаптивного сайта:

пример адаптивного сайта

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

Обычно такой поддомен выглядит так:

m.sait.ru

Вот пример всем известного мобильного сайта:

мобильная версия сайта

Резиновый сайт. У резинового шаблона меняется только размер сайта в целом. При этом все элементы остаются на своих местах. То есть сайт просто как резиновый растягивается и сужается в зависимости от разрешения экрана.

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

Вот пример резинового сайта:

резиновый сайт

Фиксированный сайт, это сайт в CSS которого прописаны фиксированные значения ширины и высоты. И неважно, с какого устройства вы бы не зашли, он таковым и останется. Например вы задали ширину 1 000 пикселей, он отлично смотрится с компьютера, но если зайти с телефона, то будет видна лиш одна восьмая страницы. Сейчас таких шаблонов почти никто не делает.

Как проверить сайт на разных разрешениях экрана?

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

Взять, к примеру, мой блог. У меня подключен плагин WPtouch Mobile Plugin, который показывает мобильную версию блога, если зайти с телефона, блог выглядит так:

мобильная версия сайта

Поэтому гораздо лучшим вариантом я считаю проверку инструментом PageSpeed Insights, о котором я писал здесь.

Где скачать адаптивный шаблон сайта?

Здесь все просто. Если ищете бесплатный адаптивный шаблон, просто набираете в поисковике запрос, например, «шаблоны WordPress». И в меню ищите «Адаптивные».

адаптивные шаблоны

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

Возможно вас заинтересует:  Что такое 301 редирект, зачем он нужен и как его правильно использовать.

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

Об авторе: Андрей Назыров

Приветствую Вас на своем блоге! Здесь Вы найдете всю необходимую информацию по созданию своего блога (сайта), его SEO оптимизации и последующего заработка.

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

  1. Привет Андрей! Ты говоришь, что пользуешся плагином WPtouch, но….я всегда захожу с мобильного телефона и сейчас тоже и…неа 🙂
    Твой блог выглядит не совсем корректно и он абсолютно не адаптирован под мобильные устройства! Мне нужно пальцем расстягивать весь сайт, чтобы выглядел более или менее читабельным. Так что давай, исправляй!

    Ответить
    • Привет, Игорь. Странно, я захожу с телефона, все отлично, как на скриншоте в статье. А у тебя какое разрешение и операционная система?

      Ответить
      • У меня Samsung Galaxy Android. Может быть у тебя проблема с кешом? Как бы я вижу то что было раньше? Хотя…как такое может быть?
        Только что специально ещё раз зашёл и тоже самое, весь сайт виден только с левой стороны экрана и нужно его растягивать, чтобы понять что да как

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

      • Ещё может быть один вариант. К меня внизу страницы есть возможность переключаться с компьютерной на мобильную версию. Попробуй переключиться на мобильную.

  2. Привет!

    Прикинь, оказывается мой блог не оптимизирован для Google. Если честно, я в шоке. Не понимаю, что ему не нравиться. Он показал, какие у меня ошибки, но если проверить блог на любых устройствах, то этих ошибок нет (про комментарии, я помню, сейчас не о них).

    Ладно, спасибо тебе за статью! Скорей всего завтра, займусь этим вопросом серьезно.

    Ответить
    • Привет, Гугл вроде обьясняет что именно не оптимизированно. Чаще всего это маленькое расстояние между ссылками и кнопками. От себя могу добавить, мне очень мешает твой раздел «интересное». Когда захожу с телефона не могу открыть меню, т. к. его закрывает эта угловая картинка.

      Ответить
      • Я тебе уже говорил, что там есть крестик X, который закрывает раздел. Если раньше при нажатии на этот крестик перекидывало в начало страницы, то теперь раздел просто закрывается.

      • Да, про крестик я в курсе. Все закрывается, но у меня почему-то все равно меню не открывается, то есть не могу открыть страницы «Об авторе» и т. д. При нажатии на меню страница просто перемещается вправо, меню не открывается. Попробуй на всякий случай зайти с телефона и проверить.

      • Представляешь, Google, говорил, что мой блог не оптимизирован для телефонов, потому что в robots стояли правила dissalow. Скорей всего, это глюк в новом инструменте (пока не доработали), но все же я убрал. Типа эксперимент делаю, посмотрим что из этого получиться.

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

  3. Привет…

    А мне нужно мобильную версию сайта делать. Давно уже хотел, все руки и деньги не доходили. А тут еще и Гугл мягко намЯкнул о том, что нужно мобильную версию сделать 🙂

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

      Ответить
      • Я тоже глянул на блог, хороший и интересный шаблон!

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

    Ответить
    • Привет, Pavel. У тебя блог с мобилы отлично смотрится.

      Ответить
      • Спасибо 🙂 не моя заслуга, т.к. использую дочерний шаблон от «twentytwelve»

  5. Адаптивный дизайн это очень тонкая штука — он нужен в наше время для каждого сайта. Но верстка его правильно занимает много времени!

    Ответить
    • Возможно, но я неверстальщик 🙂 поэтому не могу судить о времени необходимом для создании адаптивной версии шаблона.

      Ответить
      • Да я с этим не спорю — я просто подвожу итог этого момента: гугл и другие ПС понимают все это — и создают условия чтобы мастера либо вкладывали бабки, либо изучали основы…

      • У меня с гугла трафик уж очень копеичный!

      • Может вам помочь с шаблоном, вот мой новый блог (для просмотра блога кликните по имени «отредактировано автором блога») извените за ссылку!

      • Александр, ваш комментарий изменил, согласитесь смахивает на спам.
        За предложение помощи благодарю, но разберусь как-нибудь сам.

      • Простите за ссылку, больше такого не повториться!

  6. Мне вот гугл прислал письмо что мне нужна мобильная версия!

    Ответить
  7. Уже года 2 использую такой вид шаблонов, так как аудитория, использующая мобильные устройства, велика.

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *