Чем адаптивный дизайн отличается от «резинового»

Одобрено экспертом
25

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

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

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

К недостаткам адаптивной вёрстки можно отнести сложность разработки.

Куда проще дела обстоят с резиновым (нефиксированным) макетом - в CSS-коде значения ширины прописаны в процентах, а, значит, страница тянется по ширине окна.

Если уменьшать мышкой размер окна браузера, можно наблюдать как все элементы "забéгают" от желания вместиться на странице. Гибкость резинового макета является плюсом, но имеется и серьёзный минус - потеря пропорций сайта при сильном сжатии/растяжении ширины. Это ведёт к смещению блоков и утрате читабельности.

Адаптивный и резиновый дизайны имеют право существовать в сети. Тянущиеся сайты подходят для сайтов-визиток, личных блогов, объявлений. Много “резиновых” дизайнерских решений имеется на сайтах www.artlebedev.ru или inbenefit.com.

Примерами адаптивной вёрстки являются www.theverge.com, а также www.latimes.com и др. К подобным макетам прибегают онлайн-журналы, соц. сети и другие сервисы, ориентированные на смартфоны.

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

Нашли ответ на свой вопрос?
2 839 просмотров
Обсудить
2 минуты на чтение
20.03.2017, 06:02
Поделиться в соц. сетях
Настя Чехова
Настя Чехова
Маркетолог
Написано 20 марта 2017 г. в 06:02
Настя Чехова
Настя Чехова
Маркетолог
Стаж 5 лет
2 839 просмотров
Обсудить
2 минуты на чтение
20.03.2017, 06:02
Поделиться в соц. сетях
Комьюнити теперь в Телеграм!
Подпишитесь, чтобы следить за новостями заработка в интернете
@livesurf
Редакция LIVEsurf
Редакция LIVEsurf

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

Читайте дальше
Определить стоимость сайта мобильного
Определить стоимость сайта мобильного

Учёные и многие видные деятели Сети утверждают, что эпоха смартфонов и планшетов вскоре закончится. На смену ей придут ф…

5 мая 2020 г.
8 минут на чтение
UX и UI мобильных приложений: что это такое?
UX и UI мобильных приложений: что это такое?

Понятия UX и UI существуют уже довольно давно, но многие их до сих пор путают. Это не удивительно, потому как эти термин…

25 ноября 2020 г.
7 минут на чтение
Преимущества адаптивного дизайна: что нужно знать вебмастерам с небольшим бюджетом?
Преимущества адаптивного дизайна: что нужно знать вебмастерам с небольшим бюджетом?

При проектировании дизайна любого портала в сети: от блога до интернет-магазина, крайне важно учитывать его кроссплатфор…

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

Автосерфинг на буксах интересует тех, кто хочет запустить автоматический просмотр сайтов и понять, где в этой схеме есть…

4 апреля 2026 г.
21 минута на чтение
Команда анализирует комплексное SEO-продвижение сайта
SEO-продвижение сайта: этапы и проверка подрядчика

Без понятного процесса SEO-продвижение сайта легко превращается в расход на подрядчика, тексты и ссылки без связи с заяв…

12 июня 2026 г.
23 минуты на чтение
Макет оформления сообщества ВКонтакте на экране
Оформление сообщества ВК: размеры и настройка

Хаотичное оформление сообщества ВК быстро съедает время: макет приходится переделывать, текст на обложке обрезается, вид…

12 июня 2026 г.
20 минут на чтение
Популярные статьи
Бесплатная накрутка посещаемости сайта легальным и нелегальным способом
Бесплатная накрутка посещаемости сайта легальным и нелегальным способом

Что это за способы? Трафик для своего сайта можно получать различными способами, в том числе и "не совсем белыми". Но эт…

22 января 2023 г.
8 минут на чтение
Эффективное продвижение приложений и игр для мобильных платформ - 36 шагов для хорошего результата
Эффективное продвижение приложений и игр для мобильных платформ - 36 шагов для хорошего результата

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

24 января 2021 г.
14 минут на чтение
Боты которые переходят по ссылкам, продвигая сайты - генерируя трафик и ПФ
Боты которые переходят по ссылкам, продвигая сайты - генерируя трафик и ПФ

Посещаемость сайта - его ключевая характеристика, от которой фактически зависит его жизнь, развитие. Чем больше людей за…

22 мая 2024 г.
9 минут на чтение
0 комментариев
Пользователи онлайн:
UserUserUserUser
и ещё 16 зарегистрированных и 609 гостей сейчас на LIVEsurf