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

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

Разработка адаптивного дизайна сайта Адаптивный дизайн для мобильных устройств

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

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

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

Решение этой проблемы шло в двух направлениях:

  • упрощение верстки страниц (появились различные способы верстки)
  • выделение дизайнерской составляющей в отдельный файл, который был написан на языке CSS. Данный файл определял дизайн всей страниц сайта, что упрощало работу с ним.
Таким образом появляется понятие шаблона сайта не как однотипного и однообразного, в отличии от индивидуального, а в понимании единой оболочки.

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

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

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

Адаптация шаблона при адаптивном дизайне сайта Адаптация шаблона сайта

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

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

Перестроение модулей в адаптивном дизайне сайта Перестроение модулей

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

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

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

Наши услуги

Полезное о сайтах

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

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

Техническая поддержка сайта

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

Самостоятельная покупка хостинга

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

Разработка дизайна сайта

Дизайн сайта или как сделать привлекательный сайт, сэкономив средства Нужен ли оригинальный дизайн? «По одежке встречают …». Все мы знаем это выражение. От части оно относится и ...

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

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

Scroll to top