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

FineGO / Статьи / Адаптивный дизайн

Причиной написания данной статьи стало желание ответить на часто задаваемый вопрос — что такое адаптивная вёрстка сайта или как ещё его называют адаптивный дизайн. Некоторые клиенты путают понятия «адаптивная вёрстка» и «кроссбраузерность». О последней мы поговорим немного позже.

Адаптивный дизайн - пример отображения контента

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

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

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

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

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

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

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

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

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

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

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

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

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

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