Краткая история адаптивного веб-дизайна

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

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

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

Сегодня мы подробнее рассмотрим историю адаптивного веб-дизайна.

Содержание

С чего начинался веб-дизайн?
Варианты компоновки макетов
Макеты, зависящие от разрешения
Рост мобильных сайтов
Новая эра адаптивного веб-дизайна
Гибкие сетки
Гибкие изображения
Медиа-запросы
Расцвет мобильного дизайна
Резюме

С чего начинался веб-дизайн?

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

Даже когда началось более широкое внедрение технологии CSS, большинству разработчиков не приходилось сильно беспокоиться об адаптации контента к разным размерам экрана. Тем не менее они всё же нашли несколько способов работы с разными размерами монитора и браузера.

Варианты компоновки макетов

На первых порах разработчикам были доступны два основных варианта компоновки:

фиксированная ширина
гибкая компоновка

С макетами, с фиксированной шириной дизайн с большей вероятностью сломается, если ваш монитор не имеет точно такого же разрешения, как тот, на котором был разработан сайт.

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

Однако содержимое также могло переполняться, а текст часто ломался на небольших экранах.

Макеты, зависящие от разрешения

В 2004 году, был представлен новый метод использования JavaScript для замены таблиц стилей в зависимости от размера окна браузера. Этот метод стал известен как «макеты, зависящие от разрешения».

Несмотря на то что они требовали больше работы от разработчиков, макеты, зависящие от разрешения, позволяли более точно контролировать дизайн сайта.

Макет, зависящий от разрешения, в основном функционировал как ранняя версия CSS, прежде чем она стала особенной.

Недостатком было то, что разработчикам приходилось создавать разные таблицы стилей для каждого целевого разрешения и обеспечивать работу JavaScript во всех браузерах.

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

Рост мобильных сайтов

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

Компании создавали браузеры для своих смартфонов, и разработчикам внезапно пришлось учитывать и их. Хотя мобильные сайты были нацелены на то, чтобы предложить пользователям те же функции, что и на настольном сайте, они были совершенно отдельными приложениями.

Разработка мобильного сайта хотя и сложно, но он имел некоторые преимущества, например, позволял разработчикам специально нацеливать SEO на мобильные устройства и привлекать больше трафика к вариантам мобильных сайтов.

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

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

В конце 2000-х разработчики часто полагались на ряд уловок, чтобы сделать мобильные сайты более доступными. Например, даже простые макеты использовали трюк max-width: 100% для гибких изображений.

К счастью, всё начало меняться, когда Итан Маркотт ввёл термин «отзывчивый веб-дизайн».

Эта статья привлекла внимание к исследованию Джоном Оллсоппом архитектурных принципов веб-дизайна и проложила путь к веб-сайтам «всё в одном», способным одинаково хорошо работать на любом устройстве.

Новая эра адаптивного веб-дизайна

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

Гибкие сетки

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

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

Гибкие изображения

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

Как упоминалось выше, ранее разработчики использовали так называемый трюк «max-width», чтобы сделать это возможным. Если вы хранили изображение в контейнере, оно могло легко переполниться, особенно если контейнер был отзывчивым.

Однако, если вы установите «max-width» на 100%, размер изображения просто изменится вместе с его родительским контейнером.

Медиа-запросы

Идея «медиа-запросов» относилась к медиа-запросам CSS, представленным в 2010 году, но не получившим широкого распространения до официальной публикации в качестве рекомендации W3 2 года спустя.

Медиа-запросы — это, по сути, правила CSS, запускаемые на основе таких параметров, как тип мультимедиа (печать, экран и т. д.) и характеристики мультимедиа (высота, ширина и т. д.).

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

Точки остановки относятся к тому, когда веб-сайты меняют свой макет или стиль в зависимости от ширины окна браузера или устройства.

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

Расцвет мобильного дизайна

С тех пор как Маркотт представил адаптивный веб-дизайн, разработчики работали над новыми способами максимально эффективной реализации этой идеи.

Большинство разработчиков теперь делятся на две категории в зависимости от того, учитывают ли они в первую очередь потребности пользователя настольного устройства или потребности пользователя мобильного устройства. Тенденция всё более ускоряется в сторону последнего.

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

Мобильный дизайн часто намного проще и минималистичнее, что соответствует многим тенденциям современного веб-дизайна.

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

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

Резюме

Отзывчивый веб-дизайн всё ещё не идеален. Существует бесчисленное множество сайтов, которые по-прежнему не могут обеспечить одинаковый вид на всех устройствах.

Более того, постоянно возникают новые задачи, такие как выяснение того, как разрабатывать дизайн для новых устройств, таких как гарнитуры дополненной реальности и умные часы. Однако будет справедливо сказать, что мы прошли долгий путь с первых дней веб-дизайна.

На этом мы завершаем наш обзор, про историю адаптивного веб-дизайна. Также вы можете узнать, про дизайн-мышление это методика, которая помогает создавать и обновлять проекты!

Если статья вам понравилась, поделитесь с друзьями этой информацией, просто нажав на кнопки соцсетей!