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

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

 

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

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

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

 

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

 

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

 

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

 

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

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



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







С этой статьей также читают:
Виды макетов адаптивного дизайнаПринципы адаптивного дизайнаЧем объясняется популярность адаптивного дизайна
Популярные статьи
Создание мобильного сайта
Создание мобильного сайта

Выбор сервиса всплывающих окон
Выбор сервиса всплывающих окон

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

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

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

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

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

Преимущества социальной сети Linkedin
Преимущества социальной сети Linkedin

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

Как делать правильно отложенный постинг
Как делать правильно отложенный постинг

Влияние времени загрузки сайта на его продвижение: способы с помощью которых можно повысить скорость загрузки сайта
Влияние времени загрузки сайта на его продвижение: способы с помощью которых можно повысить скорость загрузки сайта

Какой длины должна быть статья
Какой длины должна быть статья

Почему важно мониторить упоминание сайта в интернете
Почему важно мониторить упоминание сайта в интернете

Главные аспекты проверки индексации сайтов в поисковых системах
Главные аспекты проверки индексации сайтов в поисковых системах

Способы увеличения базы подписчиков
Способы увеличения базы подписчиков

Правильная защита от спам-ботов
Правильная защита от спам-ботов

Как оптимизировать конверсию
Как оптимизировать конверсию

Как проводить SEO аналитику
Как проводить SEO аналитику

Учимся использовать видео в twitter
Учимся использовать видео в twitter

Секреты заработка на создании мобильных приложений
Секреты заработка на создании мобильных приложений

Показать еще


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

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