Главная / Адаптивные сайты / Приёмы адаптивной верстки сайта

САЙТЫ, которые ПРОДАЮТ!
(965) 368 - 44 - 43
info@imho-design.ru

Адаптивная верстка сайта: приёмы и примеры

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

1. Media адаптивная вёрстка сайтов с изменением размера шрифта.

 
 

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

2. Сокрытие/отображение фрагментов текста.

 
 

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

3. Верстка адаптивного сайта с изменением размера выводимой картинки (без изменения самого выводимого изображения).

 
 

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

4. Пример адаптивной верстки сайта с выведением различных версий картинки (фактически изменяется выводимое изображение).

 
 

При использовании этого способа при различных разрешениях загружаются совершенно различные версии изображения. Это решение экономит трафик, но требует подготовки отдельных версий картинки для разных вариантов вывода. Зато можно не масштабировать картинку, как обычно, а изменять её пропорции, по возможности сохраняя размер основного элемента. Нечего и говорить, что в современной адаптивной верстке надо использовать именно этот способ, по крайней мере до выхода специализированного тега «picture».

5. Сокрытие/отображение различных элементов в вёрстке адаптивного сайта.

 
 

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

6. Верстка адаптивного сайта с выстраиванием блоков в ряд и переносом элементов по одному.

 
 

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

7. Адаптивная верстка с переносом элементов группами по нескольку штук.

 
 

Иногда требуется, чтобы инфоблоки переносились в адаптивной вёрстке на другую строку не по одному, а группами по 2-3 штуки. Это удобно, если ваш сайт свёрстан в несколько колонок и вы зрительно не хотите менять структуру документа. Также этот приём применяют, если не хотят, чтобы элементы сайта слишком часто «прыгали» при изменении ширины окна.

8. Пример адаптивной вёрстки с переносом правого блока под левый.

 
 

Наиболее употребимый приём адаптивной вёрстки сайта, сокращающий количество горизонтальных элементов при уменьшении ширины экрана. Именно таким образом организуется модификация элементов в большинстве макетов. Такой порядок является естественным с технической точки зрения, такую вёрстку легче всего создать, поэтому при изначальном проектировании сайта лучше всего ориентироваться именно на этот порядок перемещения блоков (правый под левый). Это гарантирует корректное поведение элементов сайта в разных браузерах и минимальное количество ошибок при тестировании на разных разрешениях.

9. Адаптивная верстка с переносом левого блока под правый.

 
 

Сложный приём адаптивной вёрстки сайта, позволяющий расположить инфоблоки сайта в обратном порядке. Этот приём требует точного знания размеров (высоты) блоков, но позволяет, например, вынести наверх наиболее важные элементы сайта на экранах, на которых вторым рядом они будут мало заметны. Этот способ применяется достаточно редко и, как правило, в тех случаях, когда недостаточно профессиональный дизайнер спроектировал сайт, забыв о правиле «справа налево» и попросту перепутал блоки :-)

10. Media адаптивная верстка с выстраиванием блоков в ряд при уменьшении размера экрана.

 
 

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

11. Адаптивная вёрстка с поочерёдным изменением последовательности блоков.

 
 

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

12. Верстка адаптивного дизайна с изменением содержимого в зависимости от высоты окна.

 
 

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

 

В рамках разработки адаптивных сайтов мы делаем весь комплекс работ: дизайн, вёрстку, всё необходимое программирование. Читайте подробнее материалы по теме:

Адаптивный дизайн сайта
(как меняется сайт в зависимовти от ширины экрана и чем этот подход отличается от обычного дизайна)

Устройства и разрешения для верстки адаптивного сайта
(какие устройства и разрешения экрана мы учитываем в своей работе)

Адаптивное меню для сайта
(как может изменяться меню для адаптивного сайта, примеры)

Фиксированная вёрстка сайта

Резиновая вёрстка сайта

Стоимость адаптивного сайта

 

Другие материалы:

 

Как заказать создание сайта?Web студия IMHO DESIGN оказывает услуги по созданию и продвижению сайтов, делая основной упор на интернет-маркетинг и финансовую эффективность производимых ресурсов.

подробнее>>>

Тестирование сайтаТестирование ресурса необходимо разделить на три крупные части: это «тестирование вёрстки» (о котором мы уже говорили в отдельном разделе), «технологическое тестирование» и «пользовательское тестирование».

подробнее>>>

Верстка сайта с нуляМы выполняем полный цикл верстки сайта: от html-разметки и css-оформления до скриптов интерфейса и адаптивного дизайна.

подробнее>>>

Цены на создание сайтов в МосквеТаблица стоимости различных сайтов в зависимости от их вида и типа дизайна.

подробнее>>>

Кто делает сайты? Словарик профессий.Какие люди причастны к созданию web-сайтов? Кто может мне понадобиться в моём интернет-проекте? Почему Вася не может того, что легко делал Коля, они же оба программисты? Чем они там вообще занимаются?

подробнее>>>

Заказать сайтЗдесь вы можете заказать сайт в веб-студии IMHO design (Москва). Заполните и отправьте форму чуть ниже на странице. Мы свяжемся с вами в ближайшее время. Помните: вы всегда сможете в любой момент отменить свой заказ, если передумаете.

подробнее>>>