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

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

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

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

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

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

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

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

Вы, наверное, уже слышали, что 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». И в меню ищите «Адаптивные».

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

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

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

Запись опубликована в .
Как вам статья?
Полная ерундаНичего интересногоТак себеХорошоОтлично (1 голосов, оценка: 5,00 из 5)
Loading...Loading...

Понравилась статья? Поделись с другими, нажав на одну из кнопок.


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

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

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

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

      • У меня Samsung Galaxy Android. Может быть у тебя проблема с кешом? Как бы я вижу то что было раньше? Хотя...как такое может быть?

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

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

          Или проблема с кэшом браузера.

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

  2. Привет!

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

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

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

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

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

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

        • Странно, получается противоречат сами себе.

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

  3. Привет...

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

    • Привет.

      Да уж, мобильная версия тебе не помешает.

      С компании все отлично, и дизайн и контент, а с телефона не совсем удобно.

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

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

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

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

Добавить комментарий для aDvDk Отменить ответ

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

aDvDk