Если вы уже слышали о Итана Маркотт и респонсивный дизайн, вы пришли по адресу. Если же нет — то тем более, эта статья для вас необходимо. Давайте рассмотрим короткую историю респонсивного дизайна.

Пример респонсивного сайта «Акватехника»Пример респонсивного сайта «Акватехника»

Как появился респонсивный дизайн

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

«Так дальше продолжаться не может», — решил Итан однажды и начал писать статью.

Статья называлась «A List Apart». Она увидела свет в мае 2010 года и включала термин «респонсивный дизайн», после чего Итана стали считать отцом нового направления веб-разработки. Основная его идея была адаптировать сайты в различных экранах.

Однако настойчивый парень Итан Маркотт решил не останавливаться и даже напечатал книгу через год — в 2011 Работа «Респонсивный веб-дизайн (Краткая книга для людей, которые делают веб-сайты)» стала завещанием для тех, кто разделял принципы Итана.

О чем в ней идет речь?

Основная идея респонсивного дизайна — это один сайт с одним URL и контентом, который изменяет размеры и организацию в соответствии с расширением экранов.

Это работает благодаря трем основным компонентам: гибкие макеты, Media Queries и адаптивные медиа-файлы.

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

Media Queries — это свойство, которое меняет элементы сайта по ширине и высоте, разрешением и тому подобное. В частности, наиболее распространены такие решения экранов: 1920, 768 и 460 пикселей, поэтому страница сайта существует в четырех или трех вариантах, которые по-разному отражаются в зависимости от типа устройство.

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

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

Нововведение быстро переняли веб-разработчики всего мира, и хотя его имя легендой не стало, респонсивный дизайн сегодня — догма.

Почему сейчас респонсивный дизайн обязателен?

51% американцев заходят в интернет через мобильные телефоны, тогда как 42% используют настольные компьютеры.

25% для интернета используют только мобильные устройства.

69% пользователей делают покупки через планшеты.

Поэтому оставим Итана в покое — пусть продолжает развиваться как веб-дизайнер и спикер (ведь он также опытный тренер) и давайте осваивать веб-дизайн. Прямо сейчас тысячи разработчиков в мире кодируют респонсивные сайты, и вы можете оказаться среди них.

Заказать сайт