Адаптивная вёрстка. Самые простые техники адаптивной верстки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как самому сделать адаптивную верстку.

Что такое медиа запросы.

Как правильно использовать медиа запросы.

Как сделать адаптивное меню.

Как сделать адаптивную галерею.

И многое другое.

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

Что такое Media Queries ?

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

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

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

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

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

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

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

@media (max-width: 770px) { body, html { overflow-x:hidden; min-height: 960px; background-size: 100%; } #mail_bg_horizontal div { left: 274px; position: relative; top: 40px; width: 340px; } #mail_bg_horizontal .module_subscribe figure { padding-top: 46px; } #footer_menu { display: none; } #header {background-size: 100%; padding-top: 48%;} #logo-site { top: -60px; font-size: 7vw; width:100%; margin: 10px;} #logo-site span{display:inline-block; padding-left:10px;} #slogan{ top: -77px; font-size: 3vw; margin: 10px;}

@ media (max - width : 770px ) { body , html { overflow - x : hidden ; min - height : 960px ; background - size : 100 % ; #mail_bg_horizontal div { left : 274px ; position : relative ; top : 40px ; width : 340px ; #mail_bg_horizontal .module_subscribe figure { padding - top : 46px ; #footer_menu { display : none ; #header {background-size: 100%; padding-top: 48%;} #logo-site span{display:inline-block; padding-left:10px;}

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

@media (max-width: 650px) { #related_posts { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding-top: 20px; width: 545px; } border: medium none; height: 28px; left: 93px; position: relative; top: -12px; width: 159px; } #header .wrapper { width: 100%;} #header .wrapper > nav ul > li { float: none; width: 100%; margin-left: 0; text-align: center; }}

@ media (max - width : 650px ) { #related_posts { padding - top : 20px ; width : 545px ; #mail_bg_horizontal .module_subscribe button { border : medium none ; height : 28px ; left : 93px ; position : relative ; top : - 12px ; width : 159px ; #header .wrapper { width: 100%;} #header .wrapper > nav ul > li { float : none ; width : 100 % ; margin - left : 0 ; text - align : center ;

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

@media (max-width: 500px) { body > #content > .wrapper .navigation > .next { background: rgba(0, 0, 0, 0) url("images/bow_right.png") no-repeat scroll 0 0; display: none; float: left; height: 30px; margin-left: 1px; margin-top: -4px; width: 34px; } #mail_bg_horizontal .module_subscribe button { border: medium none; height: 28px; left: 96px; position: relative; top: -12px; width: 159px;}}

@ media (max - width : 500px ) { body > #content > .wrapper .navigation > .next { background : rgba (0 , 0 , 0 , 0 ) url ("images/bow_right.png" ) no - repeat scroll 0 0 ; display : none ; float : left ; height : 30px ; margin - left : 1px ; margin - top : - 4px ; width : 34px ; #mail_bg_horizontal .module_subscribe button { border : medium none ; height : 28px ; left : 96px ; position : relative ; top : - 12px ; width : 159px ; } }

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

@media (max-width: 400px) { #header { padding-top: 61%;} #mail_bg_horizontal div { top: 11px; left: 37px; width: 174px; font-size: 13px;} #mail_bg_horizontal .module_subscribe { position:relative; top:-15px; left:-69px;} #mail_bg_horizontal .module_subscribe button { top: -10px; left: 18px;} #mail_bg_horizontal { height: 186px;} #related_posts { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding-top: 1px; width: 255px; }}

@ media (max - width : 400px ) { #header { padding-top: 61%;} #mail_bg_horizontal div { top: 11px; left: 37px; width: 174px; font-size: 13px;} #mail_bg_horizontal .module_subscribe { position:relative; top:-15px; left:-69px;} #mail_bg_horizontal .module_subscribe button { top: -10px; left: 18px;} #mail_bg_horizontal { height: 186px;} #related_posts { border - bottom : 1px solid #ccc; border - top : 1px solid #ccc; padding - top : 1px ; width : 255px ;

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

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

/ wp - content / themes / * . jpg

Allow : / wp - content / themes / * . png

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

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

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

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

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

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

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

Макет должен быть в формате PSD (само собой).

Каждый элемент в дизайне должен быть в отдельном слое.

Не нагружайте много фотографий.

Не используйте много шрифтов.

Используйте стандартные шрифты.

Все только самое необходимое.

Ничего лишнего.

Сделайте себе выпадающее меню.

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

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

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

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

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

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

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

Чтобы устранить эти недостатки стали разрабатывать отдельные мобильные версии сайтов. Но это долго, дорого и неудобно в поддержке.

Решение возникшей проблемы – адаптивная верстка , при которой CSS-стили меняются динамически для разной ширины окна браузера.

Пример

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

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

просто менять размер экрана браузера,

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

использовать адаптивный дизайн браузера, нажав Ctrl+Shift+M в Firefox или Google Chrome.

Что используют для оптимизации сайта под мобильные устройства? Метатег viewport

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

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

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

Пример Основные свойства метатега

width	Ширина видимой области. Рекомендуемое значение: device-width.
height	Высота видимой области. Рекомендуемое значение: device-height.
initial-scale	Первоначальный масштаб страницы. Принимает значение от 1 до 5. Рекомендуемое значение: 1.
minimum-scale	Минимальный масштаб страницы. Принимает значение, которое должно быть меньше или равным initial-scale. Значение 1 запрещает уменьшение масштаба страницы.
maximum-scale	Максимальный масштаб страницы. Принимает значение, которое должно быть больше или равным initial-scale. Значение 1 запрещает увеличение масштаба страницы.
user-scalable	Разрешает или запрещает возможность масштабирования страницы. Принимает значение true или false.

Контент шире экрана – часто возникающая проблема, как только задан viewport.

Это происходит, если каким-то элементам задана большая фиксированная ширина.

Чтобы не появлялась горизонтальная прокрутка, ширину страницы задают на весь экран, при необходимости ограничивая ее свойством max-width.

Пример .content { width: 100%; max-width: 1200px; } Медиа-запросы. CSS-стандарт Media Queries

Возможность применять различное оформление в зависимости от ширины окна дает CSS-стандарт Media Queries .

Медиа-запрос начинается с правила @media , после которого следует условие применения стилей, состоящее из типа носителя (в приведенном примере all ), логического оператора (and ) и медиа-функции (max-width: 360px ).

Типы носителей

all	Все типы.
print	Принтеры и другие печатающие устройства.
screen	Экран монитора.
speech	Речевые синтезаторы и программы для воспроизведения текста вслух. Например, речевые браузеры.
Устаревшие, хотя и корректные типы, которые не дают результата
braille	Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
embossed	Принтеры, использующие для печати систему Брайля.
handheld	Наладонники, смартфоны, устройства с малой шириной экрана.
projection	Проекторы.
tty	Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
tv	Телевизоры.

Логические операторы Основные медиа-функции Пример

Задан размер заголовка:

H1 { font-size: 72px; }

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

@media all and (max-width: 360px) { h1 { font-size: 42px; } }

Новые единицы размеров (vw, vh, rem)

vw	1% от ширины окна браузера (viewport).
vh	1% от высоты окна браузера (viewport).

Благодаря этим единицам теперь в CSS стало легко указать относительную высоту элемента.

Пример body { min-height: 100vh; }

Размер шрифта при адаптивной верстке удобно задавать в rem (root em). Эта единица измерения вычисляется на основе размера шрифта корневого элемента . По умолчанию 1rem = 16px. Для простоты вычислений размер шрифта корневого элемента можно задать равным 10px.

Пример html { font-size: 10px; } body { font-size: 1.6rem; } h1 { font-size: 7.2rem; } @media all and (max-width: 360px) { body { font-size: 1.4rem; } h1 { font-size: 4.2rem; } }

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

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

Flexbox определяет CSS свойства для flex-контейнера и его дочерних элементов (в приведенном примере соответственно ul.flex и li.flex).

Пример ul.flex { display: flex; /* flex-контейнер */ flex-wrap: wrap; /* многострочный режим */ justify-content: space-between; /* элементы распределяются равномерно (первый – в начале строки, последний – в конце) */ } li.flex { display: inline-block; flex-basis: 260px; /* базовая ширина элемента */ flex-grow: 1; /* все элементы одинаковой ширины */ max-width: 300px; padding: 8px; }

В результате: элементы списка растягиваются на всю доступную ширину (с ограничением в 300px):

На узком экране список станет вертикальным:

Используя Flexbox, можно менять порядок следования элементов и легко задавать вертикальное выравнивание.

Для тех кто еще не слышал о таком термине как адаптивная верстка могу сказать что такую верстку можно назвать человеческим языком послушной. Этот вид верстки подстраивается под все возможные экраны устройств с которых пришел ваш посетитель, а в последнее время их мягко говоря полно (нетбуки, планшеты, iphone, устройства на основе Android …). У всех этих устройств есть особенность, они работают с разными экранами, но некоторые и них даже перестраивают отдельные элементы, так например iphone очень не кстати, вашему дизайну делает свои кнопки и поля форм на вашем сайте.

Адаптивная верстка — с чего начать

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

Что использовать для верстки:

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

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

/* Для больших экранов */ @media (min-width: 1200px) { ... } /* Для некоторых нетбуков и планшетов (таблеток) */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Для планшетов и некоторых телефонов */ @media (max-width: 767px) { ... } /* Для телефонов и некоторых устройств у которых совсем маленький экран */ @media (max-width: 480px) { ... }

/* Для больших экранов */ @ media (min - width : 1200px ) { . . . } /* Для некоторых нетбуков и планшетов (таблеток) */ @ media (min - width : 768px ) and (max - width : 979px ) { . . . } /* Для планшетов и некоторых телефонов */ @ media (max - width : 767px ) { . . . } /* Для телефонов и некоторых устройств у которых совсем маленький экран */ @ media (max - width : 480px ) { . . . }

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

viewport - для мобильных устройств

< meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

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

Бонус в пользу адаптивных сайтов

Поисковые системы уже намного лучше распознают адаптивные сайты и меняют выдачу под них. То есть ваш сайт, сделанный по правилам адаптивной верстки, скорее всего, будет выше для тех, кто ищет информацию с мобильных устройств, чем простые и скучные сайты которые нужно уменьшать и увеличивать на экране, чтобы на них прочесть хоть что-то. Такой вывод пришел ко мне из опыта разработки сайта для юридической компании и анализа его статистики. Google и Yandex любят удобные сайты, но учитывая, что такие сайты стоят в 3 — 4 раза дороже , не каждый может себе позволить заказать адаптивный дизайн и разработку под этот дизайн. Стоимость обусловлена тем что нужно рисовать дизайн под 3-4 устройства и верстать также под разные устройства, а такие CSS фреймворки как Bootstrap далеко не всегда могут решить все поставленные задачи которые на придумывал клиент).

Поговорим немного о Bootstrap

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

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

Для того чтобы сайт смотрелся хорошо на всех экранах недостаточно только перестраивать блоки, изменять их размер и назначение при помощи css фреймворков и JavaScript , нужно еще и помнить как ведет себя текст на разных экранах. Если на маленьком экране телефона в 480 пикселей текст хорошо смотрится на 12 пикселях, то на большем экране этот текст нужно увеличивать, так как на больших мониторах никто не смотрит на текст впритык, а читают его издалека. Недолго покопавшись в Интернет, я нашел отличную отличный плагин написанный на jqery. Называется плагин FitText и находится . Все, что вам надо сделать, это подключить плагин и вызвать его для нужных элементов страницы.

Пример использования fittext

$("#fittext1").fitText(); $("#fittext2").fitText(1.5); $("#fittext3").fitText(1.1, { minFontSize: 50, maxFontSize: "75px" });

$ ("#fittext1" ) . fitText () ; $ ("#fittext2" ) . fitText (1.5 ) ; $ ("#fittext3" ) . fitText (1.1 , { minFontSize : 50 , maxFontSize : "75px" } ) ;

У плагина есть одна особенность, он работает только с блочными элементами (block, block-inline).

Проблемы при адаптивной верстке:

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

На iphone трансформация работает по другому, причем во всех устройствах по разному. Когда вы выставляете 3D поворот объекта в CSS3 = 0 градусов, то объект таинственным образом может повернуться под некоторым углом, вместо того чтобы исчезнуть.

Для адаптивной верстки веб-дизайнер должен быть обучен всем тонкостям и если вы знаете PhotoShop, советую запастись примерами качественных адаптивных дизайнов в формате PSD, для примеров как делать надо или не надо. Также вам понадобиться гора терпения и никаких отговорок (почему разработчику надо учить PhotoShop или SEO, которые я слышу все чаще). Мой вам совет из опыта , никогда не работайте с именитыми дизайнерами, которые к веб-дизайну не имеют никакого отношения. Был плохой опыт работы и мороз со стороны дизайнера.

Работая с Bootstrap вам надо будет дорабатывать фреймворк если клиенту нужен макет больше чем 1200 пикселей в ширину. Хотя там работы не так много, но на сложных проектах мороки много, плавали, знаем…

Тестировать адаптивный дизайн часто приходится в разных браузерах и даже в разных версиях, то же касается и разных устройств. Например, на iphone3 и iphone4 разница большая, меньше разница между iphone4 и iphone5. Устройства Android вам тоже понадобятся, так как там свои хитрости при выделении блока или написания в форму текста. Если денег на покупку кучи устройств нет, то можно использовать специальные сервисы как этот , но он только меняет размер экрана и не меняет отображение элементов, как это делают устройства.

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

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

Плавная трансформация блоков CSS3

*{ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }

Webkit - transition : all 0.3s ease ; Moz - transition : all 0.3s ease ; O - transition : all 0.3s ease ; Ms - transition : all 0.3s ease ; transition : all 0.3s ease ;

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

transition - отмена трансформации

Class-block, .class-block * { /*CSS transitions*/ -o-transition-property: none !important; -moz-transition-property: none !important; -ms-transition-property: none !important; -webkit-transition-property: none !important; transition-property: none !important; /*CSS transforms*/ -o-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -webkit-transform: none !important; transform: none !important; /*CSS animations*/ -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; }

Class - block , . class - block * { /*CSS transitions*/ O - transition - property : none ! important ; Moz - transition - property : none ! important ;

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

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

Адаптивная сайта сегодня создается при помощи языка разметки HTML5 и каскадных таблиц стилей CCS3. Но до того момента, как соответствующие технологии стали стандартом для всех популярных браузеров, для соответствующих целей использовался язык программирования JavaScript. Еще раньше (до 2010-го года) приходилось создавать несколько вариантов одних и тех же страниц, но с разной разметкой, чтобы разрабатываемый ими сайт правильно отображался на различных экранах.

Для чего нужна адаптивная верстка страницы

До относительно недавнего времени при заходе на многие сайты в нижней части браузера можно было увидеть ползунок, обеспечивающий скроллинг страницы по горизонтали. Такое происходило, например, если окно интернет-обозревателя не было развернуто на весь экран, а занимало сравнительно небольшую его площадь. Также это можно было почти всегда видеть, когда разрешение экрана, на который выводилось изображение, составляло 800 на 600 или, тем более, 640 на 480 пикселей.

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

Почему и когда появилася адаптивный дизайн?

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

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

Человеком, который первым создал , официально является веб-дизайнер Итан Маркотт. В середине 2010-го года им был опубликован материал, в котором он рассказывал о технологии, которая должна решить проблему нормального отображения веб-страниц в браузерах с разным разрешением рабочей области.

Спустя некоторое время другой и известный подкастер предложил дополнения к понятиям, о которых рассказывал его коллега.

При помощи чего и как создается адаптивная верстка?

Прежде чем приступить к рассмотрению вопроса, который касается того, как сделать адаптивную верстку, необходимо кратко рассмотреть основные применяемые технологии. Сейчас их две: HTML5 и CSS3. До недавнего времени применялись HTML4 и CSS2, но чтобы при помощи них можно было создать универсальный дизайн, приходилось использовать еще и JavaScript.

CSS3 – это новое поколение каскадных таблиц стилей. Данная технология предназначается для создания правил отображения элементов страницы в браузере пользователя. При помощи нее можно указать, например, какой размер должен иметь элемент при определенном разрешении экрана пользователя, либо установить правило, что тот всегда должен занимать определенный процент пространства (100% - заполнение всей рабочей области браузера).

Именно в третьего поколения появилось правило "media queries", используя которое верстальщик может создавать отдельные классы для каждого конкретного разрешения.

Очень важный момент!

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

Что касается HTML5, то при его помощи выполняется непосредственно разметка страницы, т.е указывается то, где должны размещаться определенные элементы. Чтобы объекты подстраивались под разрешение, в параметрах HTML-тегов указываются заранее созданные при помощи CSS3 классы.

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

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

Вначале при помощи HTML разместим на странице сам элемент:

Тег DIV – указывает, что все, что в нем заключено, является отдельным блоком. Когда на странице много таких блоков, указывается атрибут "class". Это необходимо, чтобы браузер понял, какое правило применять для конкретного блока.

Теперь необходимо создать непосредственно само правило, так называемый,

CSS-контейнер:

Div { width: 100%; text-align: center; } div img{ wight: 100%; height: auto; }

В этом коде как раз задаются разрешения для адаптивной верстки. В частности, здесь указано, что ширина (wight) должна всегда составлять 100% от ширины рабочей области веб-обозревателя, тогда как высота (height) подстраивается автоматически.

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

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

Можно сделать еще проще. Чтобы проверить, работает ли адаптивный дизайн, нужно зажать CTRL, а затем нажать на "+" или "-". После этого действия страница должна увеличиться или уменьшиться соответственно, но элемент, к которому применена адаптивная верстка, сохранит соотношение своих пропорций (или сделает что-то другое, то, что было указано в правилах).

Инструменты, упрощающие верстку адаптивного дизайна

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

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

Чтобы начать его использовать необходимо, во-первых, получить знания непосредственно о самих CSS3 и HTML5, а затем изучить особенности фреймворка. Однако, поняв большую часть тонкостей работы с ним, впоследствии можно многократно сократить время на разработку адаптивного дизайна веб-сайтов.

*Bootstrap – это ПО с открытым исходным кодом, разработанной корпорацией Twitter Inc. Распространяется на бесплатной основе и имеет широкое сообщество, у которого всегда можно попросить совета.

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

Адаптивная верстка сайта (иногда ее еще называют mobile-friendly) - ПОДРОБНО и по шагам как на уроке:

Обратите внимание: что у Яндекса и Google - есть свои инструменты, при помощи которых вы можете проверить сайт на адаптивность. У Яндекса в новой версии Вебмастера он находится так: инструменты - проверка мобильных страниц.

Если вы хотите знать как сделать адаптивный дизайн сайта - то об этом будет написано ниже и подробно в примерах, НО, если у вас нет навыков работы с css - то будет сложнее. Или это может сделать ваш программист или вебмастер.

Отзывчивый дизайн сайта - предполагает задание ширины окна страницы и ширину колонок и сайдбаров в %, в адаптиве - в px.

Обратите внимание: если у вас популярный движок вашего сайта, типа wordpress, то у них нет "головной боли" с адаптивным дизайном - все там делается парой кликов мыши - просто устанавливается и активируется плагин и ВСЕ). Например для WP - использовал WPtouch - очень хорош, но, если есть штатный программист - то лучше делать индивидуально этот момент.

Нужно понять, что в основном при адаптивной верстке часто манипулируют: шириной (width элемента: max-width и min-width), float (обтеканием, его убирают по мере уменьшения ширины окна), font-size (меняют высотку букв).

1) Вначале нужно прописать специальный метатег для разных типов девайсов:

2) Адаптив параметров страницы (ширины и высоты):

Container {
width: 800px
max-width: 90%;
}

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

3) Css адаптивна верстка для картинок всего сайта :

img { max-width: 100% ;
height: auto;
}

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

4) Адаптивная верстка текста сайта : в данном случае манипуляции происходят с высотой шрифта: font-size и другими параметрами.

Break-word { word-wrap: break-word; }

Этот CSS предназначен для расстановки переноса, если есть длинные не переносимые слова.

Есть много ошибок по размеру шрифта: Яндекс любит писать - Размер текста слишком мал для чтения на мобильных устройствах - для этого делаем так:

body {font-size: 16px} - это позволит избежать этой ошибки, а уже для тега p и для ссылок нужно отдельно проставить. Именно из-за того, что в теге body стоит font-size: 12 или 14 px - именно поэтому выходит эта ошибка! И выйдет вот такой вердикт:

5) Адаптация 3 колоночного дизайна или 2 колоночной верстки - в этом нет ничего сложного, если все сделано на div - ах то обычно нужно отменить обтекание, то есть выставить float в none и блоки опустятся вниз.

6) Адаптив CSS для видео (с Хабра):

Video {
position: relative;
padding-bottom: 56.25% ;
height: 0 ;
overflow: hidden;
} .video iframe ,
.video object ,
.video embed {
position: absolute;
top: 0 ;
left: 0 ;
width: 100% ;
height: 100% ;
}

Media Queries - медиа запросы

Для создания адаптивного диза часто используют media запросы (они задают правила исходя из размеров экрана по ширине - исходя из разрешения экрана).

Вот заготовочка media queries - под какие разрешения делать адаптивный дизайн:

@media only screen and (max-width: 1200px) {

@media only screen and (max-width: 992px) {

/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {

@media only screen and (max-width: 480px) {

/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) {
/**/
}

/*========== Mobile First Method ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) {
/**/
}

/* Extra Small Devices, Phones */
@media only screen and (min-width: 480px) {
/**/
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {
/**/
}

/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {
/**/
}

/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {
/**/
}

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

При медиа запросах начинаем сверху: все что сделали допустим для max-width: 768 будет срабатывать и при 480.

Какие бывают проблемы при адаптации сайтов для мобильных устройств

Например Яндекс может такое выдать - Есть горизонтальная прокрутка :

Это у вас что-то с padding или margin - обнулите их для родительских селекторов (блоков) и будет вам счастье.

И в конце Яндекс Вебмастер показывает такое:

Тоже делал 4 часа, в первый раз всегда сложно! Но далее, уже за пару часиков можно делать! И отправляем в вебмастер на перепроверку, чтобы побыстрее - важно для SEO .

А вообще, сегодня многие используют готовые заготовки - Бутстрап и мучений практически нет -