Хостинг от Макхост

Адаптивная верстка сайта — Что это такое и как ее сделать

Автор: Евгений Несмелов
Адаптивная верстка

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

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

к оглавлению ↑

Адаптивная верстка сайта

Кто еще до сих пор не знает, начиная с 21 апреля 2015 года Гугл вводит новые методы ранжирования сайтов, в основе которого лежит адаптивный дизайн сайта. Если ваш сайт не имеет адаптивного дизайна, ваш ресурс будет понижаться в выдаче поисковой системы. Вот оно чудо мобильных устройств.

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

Адаптивная верстка сайта

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

О чем вообще идет речь, адаптивная верстка что это такое. На вашем сайте должен быть ЕДИНЫЙ адаптивный дизайн, в котором используется ОДИН код с корректировкой по размеру экрана. Переключатель на мобильную версию уже не проходит, это не правильно. Можно открыть руководство от Гугла и прочитать информацию более детально.

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

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

к оглавлению ↑

Что такое адаптивная верстка

Конечно не каждый из нас имеет под рукой монитор, планшет и телефон. Чтоб проверить ваш сайт на адаптацию, иметь в наличии все виды устройств не обязательно. Если вы используете браузер Google Chrome, можете установить себе расширение, которое называется Window Resizer. С его помощью можно быстро проверить большинство вариантов вашего адаптивного дизайна.

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

Адаптивная верстка разрешения

Скажу еще раз, никакой горизонтальной линии прокрутки быть НЕ ДОЛЖНО. Все должно адаптироваться под любое разрешение экрана. Откройте главную страницу, ваши статьи, и еще несколько дополнительных страниц.

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

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

к оглавлению ↑

Примеры верстки

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

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

Адаптивная верстка - примеры

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

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

к оглавлению ↑

Уроки по изучению адаптивности сайта

Уроки по адаптивной верстке

Если вы не владеете особыми знаниями в верстке сайтов, я скажу вам сразу, у вас ничего не получится. Именно так, без знаний свойство и значений в CSS, вы ничего сами не сделаете. Для начала нужно пройти некоторые основные уроки, выучить свойства, которые используются при верстке страниц.

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

  1. Как самому сделать адаптивную верстку.
  2. Что такое медиа запросы.
  3. Как правильно использовать медиа запросы.
  4. Как сделать адаптивное меню.
  5. Как сделать адаптивную галерею.
  6. И многое другое.

Если вы надумали вникнуть в данную тему и хотите попробовать ее изучить, для начала вполне подойдут уроки из книги Бена Фрейна, которая называется Html5 и CSS3 Разработка сайтов для любых браузеров и устройств. В ней вы узнаете все про адаптивный дизайн, благодаря чему сайты будут показываться красиво на всех устройствах. Очень хорошая книга, в которой идет описание всего процесса от А до Я.

к оглавлению ↑

Что такое Media Queries ?

Media-queries адаптивная верстка

Media Queries — это медиа запросы, которые используются при адаптивной верстке сайта. Именно про них идет речь в книге Бена Фрейна. Если сказать простыми словами, это код, в который помещаются CSS стили для заданного разрешения экрана. Таким образом подгоняются все возможные варианты дизайна.

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

Сколько таких возможных вариантов можно сделать, зависит уже от вас. Не стоит так буквально воспринимать слова и пользоваться медиа запросами для всех возможных вариантов. Выберите несколько самых используемых.

@media (max-width: 1010px) and (min-width: 992px)

к оглавлению ↑

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

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

Создаем новый файл со стилями (подключаем его к главной странице) или добавляем в уже существующий файл медиа запросы. @media (max-width: 770px) — максимальная ширина экрана 770 пикселей. И добавляем в этот контейнер все необходимые изменения, которые нужны для данной ширины экрана.

Теперь идем дальше, максимум 770 пикселей прошли, переходим к более меньшей ширине. @media (max-width: 650px) — добавляем все изменения, которые нужны для расширения 650 пикселей. Все происходит так же само, только уже для максимальной ширины 650 пикелей. Все необходимые изменения добавляются в один общий контейнер по данному медиа запросу.

После этого переход к следующей ширине, например 500 пикселей. Вносим в этот контейнер все необходимые свойства, которые должны помещаться в экран под максимальную ширину 500 пикселей. @media (max-width: 500px).

В конце еще уменьшаем ширину в медиа запросе к 400 пикселям. В этом контейнере указываем все необходимые изменения по заданной ширине. @media (max-width: 400px). После каждого добавления проверяем, что получается. В любой момент можно изменить и внести свои корректировки в файл со стилями.

Даже если вы все сделали правильно, обязательно проверьте ваши результаты в специальном сервисе, проходит ваш сайт мобильную версию или нет. Проверка удобства просмотра на мобильных устройствах. Укажите адрес вашего сайта и посмотрите, что вам ответит Гугл. С большой вероятностью сервис может вам написать, что ваш ресурс не прошел проверку.

После обновления, Гугл рекомендует открывать доступ к css файлам, файлам плагинов, темы, скриптов и картинок для робота, только после этого вы сможете удачно пройти проверку.Для этого необходимо в файле robots.txt открыть все пути к необходимым файлам, чтоб робот их увидел. Вот пример с моего robots.txt:

Адаптивная верстка

Был интересный случай, когда я делал адаптивную верстку сайта в начале 2015 года. Заказчик воспринял все слова очень серьезно и захотел адаптивный дизайн под все разрешения экрана, которые я ему показал в дополнении Хрома. Я не стал спорить с желанием заказчика и подогнал ему полностью под все возможные варианты. Хозяин — Барин, заплатил правда в два раза больше.

к оглавлению ↑

Адаптивный дизайн psd файла

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

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

к оглавлению ↑

Требования к PSD макету

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

Конечно вы не понимаете ничего в отступах, границах...что и как должно быть по стандартам в макете ( вам это и не нужно ), но на некоторые вещи обязательно обратите внимание. Это поможет вам сориентироваться перед составлением ТЗ для дизайнера.

  1. Макет должен быть в формате PSD (само собой).
  2. Каждый элемент в дизайне должен быть в отдельном слое.
  3. Не нагружайте много фотографий.
  4. Не используйте много шрифтов.
  5. Используйте стандартные шрифты.
  6. Все только самое необходимое.
  7. Ничего лишнего.
  8. Сделайте себе выпадающее меню.

к оглавлению ↑

Самые частые разрешения экрана

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

  • Смартфоны портрет и ландшафт ( минимум 320 px — максимум 480 px );
  • Планшеты портрет и ландшафт ( минимум 768 px — максимум 1024 px );
  • Компьютеры и ноутбуки ( минимум 768 px — максимум 1024 px );
  • Компьютеры и ноутбуки ( минимум 1824 px );

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

Благодаря вставки некоторых частей кода, верстка будет отображаться нормально на всех браузерах, включая вечно проблемный IE. И не имеет никого значения какой у вас движок, джумла или вордпресс. Кстати, делать адаптивную версткусайта на движке WordPress для меня лично одно удовольствие.

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

Евгений Несмелов

Подпишись на обновления блога!Будь в курсе первым
10 комментариев

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

Такой e-mail уже зарегистрирован. Воспользуйтесь . формой входа или введите другой .

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

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

по хронологии
по рейтингу сначала новые по хронологии

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

Автор

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

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

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

Автор

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

Большое спасибо за статью. У меня на сайте были некоторые недоработки, добавил один медиа запрос и поправил свою ошибку. На трех сайтах так и не понял, как это нужно делать. У вас прочитал и сразу все стало понятно, оказывается нужно добавить нужный диапазон, с которым нужно работать и внести необходимые стили. Думал уже обращаться к фрилансерам, а тут сам справился по примерам.

Информативно, спасибо. Вам бы ещё правописание подтянуть, а то читать не очень приятно...

Советую вот это попробовать: junkstore.ru/adaptive-grid-constructor.
Все делается визуально. На выходе получаешь html и css, которые втыкаешь в свою верстку. Описание на кнопку 'i'.

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

Павлу: (Ну и для Евгения конечно) На самом деле в статье пример работы адаптивной структуры, Но делая так, сайт вы не построите. У вас все равно для приличного сайта найдется из 100 страниц 10-ок с уникальным дизайном. А там если каждый отсек верстать отдельно в разных размерах @media вы крякнитесь. Выход - Или Bootstrap и иже и с ним или сами сделаете набор адаптивных участков (стилей в стилях) и уже в них делаете свою верстку контента. А внутри них все widh:100% и минимум стилей кроме непосредственного оформления. Никаких размеров, ширин высот. И что важного, по моему мнению, не указано в статье при версте адапивности: размеры шрифтов указывать ТОЛЬКО в em или % от body. И тогда у вас в руках появится еще один мощный инструмент управления размером шрифта сразу всей верстки меняя только базовый в body.