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

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

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

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

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

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

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

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

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

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

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

Нашли ответ на свой вопрос?
2 788 просмотров
Обсудить
2 минуты на чтение
20.03.2017, 06:02
Поделиться в соц. сетях
Настя Чехова
Настя Чехова
Маркетолог
Написано 20 марта 2017 г. в 06:02
Настя Чехова
Настя Чехова
Маркетолог
Стаж 5 лет
2 788 просмотров
Обсудить
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 минут на чтение
Больше на эту же тему
UX/UI и веб-дизайн. Дизайн, макеты, интерактивные прототипы, UX-исследования и проектирование удобных интерфейсов
UX/UI и веб-дизайн. Дизайн, макеты, интерактивные прототипы, UX-исследования и проектирование удобных интерфейсов

UX-дизайн взаимодействия с пользователем Аббревиатура UX расшифровывается как user experience, или «пользовательский опы…

29 апреля 2021 г.
9 минут на чтение
Как разработать мобильное приложение для iOS?
Как разработать мобильное приложение для iOS?

Смартфоны с операционной системой iOS набрали большую популярность, из-за чего пользователей большое количество. А вот р…

21 апреля 2021 г.
13 минут на чтение
Как делать приложения для Android и iOS самостоятельно
Как делать приложения для Android и iOS самостоятельно

Как делать приложения самому и реально ли это? С каждым годом информационные технологии все прочнее укореняются в нашей …

16 апреля 2021 г.
13 минут на чтение
Популярные статьи
полезность текста
Важность полезности текста в современной оптимизации с точки зрения пользователей и поисковых систем

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

30 сентября 2016 г.
4 минуты на чтение
как защитить контент от воровства
Как защитить уникальный контент на своем сайте от копирования: способы и секреты вебмастеров

Любой вебмастер знает, что качественный контент - залог популярности ресурса и высоких позиций в поисковой выдаче. Казал…

1 сентября 2016 г.
4 минуты на чтение
Бесплатная накрутка посещаемости сайта легальным и нелегальным способом
Бесплатная накрутка посещаемости сайта легальным и нелегальным способом

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

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