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

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

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

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

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

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

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

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

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

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

С уважением, Настя Чехова

Маркетолог




ПОСМОТРИТЕ ВИДЕО (ЭТО ВАЖНО):



С этой статьей также читают:
Виды макетов адаптивного дизайна


Популярные статьи
Выбор сервиса всплывающих окон
Выбор сервиса всплывающих окон

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

Как эффективно продвигать сайт в Яндексе
Как эффективно продвигать сайт в Яндексе

Учимся писать без ошибок
Учимся писать без ошибок

Чем опасно черное сео
Чем опасно черное сео

Особенности продвижения лендинг пейдж в ТОП
Особенности продвижения лендинг пейдж в ТОП

Как создавать сайты на Joomla!
Как создавать сайты на Joomla!

Процесс проектирования UX интерфейсов — пошаговая инструкция
Процесс проектирования UX интерфейсов — пошаговая инструкция

Показать еще




 (голосов: 1)


Комментарии:

Нашли ошибку в тексте?

Выделите фрагмент с ошибкой.
Нажмите