• Ноябрь 21, 2018

Что такое адаптивный дизайн сайта?

Настало время разобраться

раз и навсегда

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

Для чего нужен адаптивный дизайн сайта?

Сегодня адаптивный дизайн сайта - из роскоши превратился в необходимость

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

Сегодня у пользователей есть не только мониторы с самым разным разрешением. 3,5 миллиарда человек заходят в интернет с мобильных устройств — нетбуков, планшетов, смартфонов и т.д.

Первое решение, которое пришло в голову многим веб-дизайнерам и разработчикам — создать просто отдельную «лёгкую» версию сайта для мобильных устройств.

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

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

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

I. Статический дизайн

Статический дизайн сайтов постепенно уходит в прошлое

Статическим называется сайт, который состоит из неизменяемых HTML-страниц.

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

Чтобы отобразить такой сайт по центру экрана, достаточно 1000 px. Контент всегда будет выравниваться строго по центру.

Преимущества статического дизайна:

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

Недостатки статического дизайна:

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

II. Динамический дизайн

«Адаптивный дизайн — одна из самых актуальных тенденций в разработке сайтов, пришедшая всерьез и надолго» — такими заголовками сейчас пестрит практически любой сайт, посвященный веб-разработке и веб-дизайну.

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

1. «Резиновый» дизайн

Немного растянем... А теперь - сожмем!

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

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

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

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

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

А не забыли ли мы какое-нибудь разрешение?

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

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

Для версий под экраны с маленьким разрешением использовались уменьшенные изображения, а некоторые элементы вообще убирались. Сама компоновка блоков также отличалась от «большой» версии.

Адаптивный дизайн оправдан при создании масштабных проектов: информационных порталов, интернет-магазинов, форумов, корпоративных сайтов и других подобных им ресурсов. Особенно эффектно он смотрится на мониторах с диагональю не менее 15,6’’.

Принцип адаптивности строится на создании одного URL, который подстраивает контент под различные форматы экранов.

3. «Отзывчивый» дизайн

Пусть сайт сам решает, как он должен выглядеть!

Последним методом, к которому пришли веб-дизайнеры, стал «отзывчивый» дизайн (англ. responsive design), который противопоставили обычному «адаптивному» дизайну (англ. adaptive design), хотя до настоящего времени эти термины часто путают и употребляют в похожем смысле.

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

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

Ещё более важный момент — места, из которых люди будут приходить на ваш сайт. Поэтому очень важно учитывать любую скорость интернета, ведь огромное количество людей живут в отдалённых районах, где скорость интернета не достигает даже 1 Мб/с.

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

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

Преимущества динамического дизайна:

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

Недостатки динамического дизайна:

И у динамического дизайна есть свои недостатки

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

А какие виды адаптивного дизайна Вы считаете наиболее удобными? Будет интересно почитать и взгляды пользователей, и точку зрения разработчиков и маркетологов — пишите комментарии!



Статьи в тему