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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

m.sait.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рейтинг автора
Автор статьи
Назыров Андрей
Основатель блога и его главный редактор.
Написано статей
105
Поделись информацией:
Помогла статья? Оцените её
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Оценок: 1
Загрузка...

Подписка на рассылку

Комментарии
  1. Игорь Черноморец

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

    • Андрей Назыров

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

      • Игорь Черноморец

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

      • Андрей Назыров

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

      • Андрей Назыров

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

  2. aDvDk

    Привет!

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

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

    • Андрей Назыров

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

      • aDvDk

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

      • Андрей Назыров

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

      • aDvDk

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

      • Андрей Назыров

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

  3. Александр

    Привет…

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

    • Андрей Назыров

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

      • Aleksandr

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

  4. Pavel

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

    • Андрей Назыров

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

      • Pavel

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

  5. Юрий Йосифович

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

    • Андрей Назыров

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

      • Юрий Йосифович

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

      • Aleksandr

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

      • Aleksandr

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

      • Андрей Назыров

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

      • Aleksandr

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

  6. Aleksandr

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

    • Юрий Йосифович

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

    • Андрей Назыров

      Мне тоже присылал.

      • Aleksandr

        Уже начали делать мобильную версию или нет!?

      • Андрей Назыров

        У меня плагин выводит мобильную версию.

  7. Денис Скрипник

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

  8. Виктор

    Заходил на сайты конкурентов и даже не понимал, что они адаптированные. Посчитал сколько раз захожу в интернет с телефона в течении дня по различным запросам, когда нет под рукой ПК, установил Яндекс.Метрика, приложение показало, что посещаемость моего сайта с мобильных устройств составляет 17%. Потребность в адаптированной версии сайта стала наконец-то очевидной. Так как мой сайт имел много ссылок на поисковые формы других сайтов и у меня были «особые» пожелания по выполнению дизайна, я не стал связываться с первой попавшейся фирмой, а обратилась в уже проверенную конкурентами. Адаптация заняла три дня. В принципе, я стал чаще получать звонки от клиентов. Но, когда взялся проверять сайт на адаптацию, он прошёл только Гугл и Яндекс, как быть и кому верить?Или на остальные сайты для проверки не стоит ориентироваться?Делал адаптацию сайта у httр://www.mоbilе-vеrsiоn.ru/. Проверял в Responsinator, Mobile Phone Emulator, Mаttkеrslеy.Только Гугл и Яндекс говорят все ок, сайт подходит для мобильных устройств.

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