Что такое адаптивный сайт или как должен выглядеть сайт на разных разрешениях экрана?
Привет, читатели блога!
Каждый из вас слышал такое понятие как адаптивный сайт, адаптивный дизайн. Но многие не совсем правильно это себе представляют или заблуждаются. Сегодня я постараюсь рассказать об этом подробнее, чтобы у вас не осталось никаких вопросов. Если они все же возникнут, задавайте их в комментариях. С удовольствием отвечу!
Согласен, что любой сайт можно открыть с телефона, но не с каждым сайтом при этом удобно пользоваться.
Адаптивные сайты в отличие от других имеют следующие характеристики: крупный читабельный шрифт, большие удобные кнопки, возможность заменять какие-то элементы графики и блоков в зависимости от устройства, на котором его открыли.
Вы, наверное, уже слышали, что Google стал рассылать предупреждения web мастерам, чьи сайты не оптимизированы под мобильные устройства.
Так вот с ноября 2014 года, Google стал помечать сайты, оптимизированные под мобильные устройства ярлыком «mobile-friendly». Этот ярлык появился в сниппетах поисковой выдачи.
Конечно все это пока на стадии тестирования, но мне кажется, это хорошая идея и она точно приживется.
Google даже создал страничку, где можно проверить свой сайт на мобильность, она находиться по этому адресу — http://www.google.com/webmasters/tools/mobile-friendly/.
Бывает так, что у вас адаптивный шаблон и при проверке все равно пишет, что сайт не оптимизирован на мобильность. В этом случае вам будут показаны ошибки, на которые стоит обратить внимание. Обычно это маленькие кнопки или маленькое расстояние между кликабельными элементами.
Теперь обратимся к Яндексу. Он пока не рассылает сообщений в отличие от Google. Но, может замечали, все что появляется в Google, через какое-то время начинает использовать и Яндекс. Поэтому я уверен, что вскоре и самый знаменитый поисковик Рунета начнет придираться.
Пока же в Яндекс Вебмастере есть небольшая инструкция по использованию мобильной версии сайта. Но мобильный и адаптивный сайт это не совсем одно и то же.
Адаптивная, мобильная, резиновая и фиксированная верстка сайта
Я не буду сейчас вас учить делать верстку, просто потому, что я этого не умею. А просто расскажу что из себя представляет каждая из этих версий.
Адаптивный сайт. Про него я уже почти все сказал. Единственное, что хотелось бы добавить, это принцип работы такой верстки.
В верстке адаптивного сайта все значения размеров не в пикселях, а в процентах. При этом в CSS задается максимальный размер ширины и автоматический размер высоты. Соответственно, когда пользователь зашел с какого-либо устройства, сайт автоматически под него подстраивается.
Но это не единственное чудо. В адаптивном сайте могут исчезать и видоизменяться какие-то элементы, опять же в зависимости от разрешения экрана. Например, меню сайта:
Это разрешение компьютера:
А это разрешение телефона:
Пример адаптивного сайта:
Мобильный сайт. Это почти то же самое, что и адаптивный сайт, но в отличие от него он находится на другом домене или чаще на поддомене. При этом идет автоматическое перенаправление пользователя на мобильную версию, если он зашел с телефона.
Обычно такой поддомен выглядит так:
m.sait.ru
Вот пример всем известного мобильного сайта:
Резиновый сайт. У резинового шаблона меняется только размер сайта в целом. При этом все элементы остаются на своих местах. То есть сайт просто как резиновый растягивается и сужается в зависимости от разрешения экрана.
Признаться, такую верстку я не люблю. Очень неудобно просматривать на телефоне.
Вот пример резинового сайта:
Фиксированный сайт, это сайт в CSS которого прописаны фиксированные значения ширины и высоты. И неважно, с какого устройства вы бы не зашли, он таковым и останется. Например вы задали ширину 1 000 пикселей, он отлично смотрится с компьютера, но если зайти с телефона, то будет видна лиш одна восьмая страницы. Сейчас таких шаблонов почти никто не делает.
Как проверить сайт на разных разрешениях экрана
Самый простой способ, это вручную курсором мышки изменить размер окна браузера в котором открыт ваш сайт. Но у этого способа есть один небольшой минус. При этом браузером обрабатывается только CSS, а если у вас подключен к примеру плагин мобильной версии, то он в этом случае не сработает.
Взять, к примеру, мой блог. У меня подключен плагин WPtouch Mobile Plugin, который показывает мобильную версию блога, если зайти с телефона, блог выглядит так:
Поэтому гораздо лучшим вариантом я считаю проверку инструментом PageSpeed Insights, о котором я писал здесь.
Где скачать адаптивный шаблон сайта
Здесь все просто. Если ищете бесплатный адаптивный шаблон, просто набираете в поисковике запрос, например, «шаблоны WordPress». И в меню ищите «Адаптивные».
А если хотите что-то уникальное, то лучше закажите адаптивную верстку и дизайн с нуля. При этом получите не только адаптивную, но также кроссбраузерную и валидную верстку.
Надеюсь, что я раскрыл тему и вы поняли все преимущества адаптивного сайта. Ну и напоследок представляю вам небольшой видеоролик о важности адаптивного дизайна:
Привет Андрей! Ты говоришь, что пользуешся плагином WPtouch, но….я всегда захожу с мобильного телефона и сейчас тоже и…неа 🙂
Твой блог выглядит не совсем корректно и он абсолютно не адаптирован под мобильные устройства! Мне нужно пальцем расстягивать весь сайт, чтобы выглядел более или менее читабельным. Так что давай, исправляй!
Привет, Игорь. Странно, я захожу с телефона, все отлично, как на скриншоте в статье. А у тебя какое разрешение и операционная система?
У меня Samsung Galaxy Android. Может быть у тебя проблема с кешом? Как бы я вижу то что было раньше? Хотя…как такое может быть?
Только что специально ещё раз зашёл и тоже самое, весь сайт виден только с левой стороны экрана и нужно его растягивать, чтобы понять что да как
Вполне возможно что дело в кэше. Плагин кэширования у меня стоит, но кажется он не действует на мобильную версию.
Или проблема с кэшом браузера.
Ещё может быть один вариант. К меня внизу страницы есть возможность переключаться с компьютерной на мобильную версию. Попробуй переключиться на мобильную.
Привет!
Прикинь, оказывается мой блог не оптимизирован для Google. Если честно, я в шоке. Не понимаю, что ему не нравиться. Он показал, какие у меня ошибки, но если проверить блог на любых устройствах, то этих ошибок нет (про комментарии, я помню, сейчас не о них).
Ладно, спасибо тебе за статью! Скорей всего завтра, займусь этим вопросом серьезно.
Привет, Гугл вроде обьясняет что именно не оптимизированно. Чаще всего это маленькое расстояние между ссылками и кнопками. От себя могу добавить, мне очень мешает твой раздел «интересное». Когда захожу с телефона не могу открыть меню, т. к. его закрывает эта угловая картинка.
Я тебе уже говорил, что там есть крестик X, который закрывает раздел. Если раньше при нажатии на этот крестик перекидывало в начало страницы, то теперь раздел просто закрывается.
Да, про крестик я в курсе. Все закрывается, но у меня почему-то все равно меню не открывается, то есть не могу открыть страницы «Об авторе» и т. д. При нажатии на меню страница просто перемещается вправо, меню не открывается. Попробуй на всякий случай зайти с телефона и проверить.
Представляешь, Google, говорил, что мой блог не оптимизирован для телефонов, потому что в robots стояли правила dissalow. Скорей всего, это глюк в новом инструменте (пока не доработали), но все же я убрал. Типа эксперимент делаю, посмотрим что из этого получиться.
Странно, получается противоречат сами себе.
Надеюсь поделишься потом результатами эксперимента.
Привет…
А мне нужно мобильную версию сайта делать. Давно уже хотел, все руки и деньги не доходили. А тут еще и Гугл мягко намЯкнул о том, что нужно мобильную версию сделать 🙂
Привет.
Да уж, мобильная версия тебе не помешает.
С компании все отлично, и дизайн и контент, а с телефона не совсем удобно.
Я тоже глянул на блог, хороший и интересный шаблон!
Да, последнее время адаптивная верстка очень востребована из-за мобильных устройств и планшетов. Сам вот хочу свой блог переверстать с использованием Bootstrap, но все руки не доходят.
Привет, Pavel. У тебя блог с мобилы отлично смотрится.
Спасибо 🙂 не моя заслуга, т.к. использую дочерний шаблон от «twentytwelve»
Адаптивный дизайн это очень тонкая штука — он нужен в наше время для каждого сайта. Но верстка его правильно занимает много времени!
Возможно, но я неверстальщик 🙂 поэтому не могу судить о времени необходимом для создании адаптивной версии шаблона.
Да я с этим не спорю — я просто подвожу итог этого момента: гугл и другие ПС понимают все это — и создают условия чтобы мастера либо вкладывали бабки, либо изучали основы…
У меня с гугла трафик уж очень копеичный!
Может вам помочь с шаблоном, вот мой новый блог (для просмотра блога кликните по имени «отредактировано автором блога») извените за ссылку!
Александр, ваш комментарий изменил, согласитесь смахивает на спам.
За предложение помощи благодарю, но разберусь как-нибудь сам.
Простите за ссылку, больше такого не повториться!
Мне вот гугл прислал письмо что мне нужна мобильная версия!
Так не нужно затягивать — нужно делать мобильную версию, а то можно так и без трафика остаться.
Мне тоже присылал.
Уже начали делать мобильную версию или нет!?
У меня плагин выводит мобильную версию.
Уже года 2 использую такой вид шаблонов, так как аудитория, использующая мобильные устройства, велика.
Заходил на сайты конкурентов и даже не понимал, что они адаптированные. Посчитал сколько раз захожу в интернет с телефона в течении дня по различным запросам, когда нет под рукой ПК, установил Яндекс.Метрика, приложение показало, что посещаемость моего сайта с мобильных устройств составляет 17%. Потребность в адаптированной версии сайта стала наконец-то очевидной. Так как мой сайт имел много ссылок на поисковые формы других сайтов и у меня были «особые» пожелания по выполнению дизайна, я не стал связываться с первой попавшейся фирмой, а обратилась в уже проверенную конкурентами. Адаптация заняла три дня. В принципе, я стал чаще получать звонки от клиентов. Но, когда взялся проверять сайт на адаптацию, он прошёл только Гугл и Яндекс, как быть и кому верить?Или на остальные сайты для проверки не стоит ориентироваться?Делал адаптацию сайта у httр://www.mоbilе-vеrsiоn.ru/. Проверял в Responsinator, Mobile Phone Emulator, Mаttkеrslеy.Только Гугл и Яндекс говорят все ок, сайт подходит для мобильных устройств.