Список: краткая история веб-дизайна в GIF

«Тёмные века» веб-дизайна (1989). «С самого момента возникновения веб-дизайн был довольно тёмным — все экраны в нём были буквально чёрными и с небольшим количеством монохромных пикселей. Дизайн состоял из символов и табуляций. Поэтому давайте сразу перенесёмся во время, когда графический интерфейс стал основным способом работы в интернете — это Дикий Запад, эпоха таблиц».

Таблицы — начало (1995). «Появление браузеров, которые могут отображать изображения стало первым шагом того веб-дизайна, который мы знаем сейчас. Самым доступным вариантом для структурирования информации была концепция таблиц, которые уже существовали в HTML. Это — таблица внутри таблицы, совмещение статических и гибких ячеек — берёт начало в книге Дэвида Сигеля Creating Killer Sites. Хотя это не совсем правильно (основная роль таблицы — структурирование чисел), на некоторое время именно этот метод стал основным при создании сайтов. Ещё одной проблемой были сложности при поддержке этих структур. В это время стал популярным термин slicing design. Дизайнеры придумывали интересные макеты, а разработчики разбивали их на мелкие кусочки и фигуры, чтобы заставить этот дизайн работать».

JavaScript приходит на помощь (1995). JavaScript стал ответом на ограничения HTML. Например, нужно всплывающее окно? Хочется динамически изменить порядок какой-то структуры? Ответ — JavaScript. Однако основной проблемой было то, что JavaScript накладывается поверх сайта и загружается отдельно. Очень часто ленивые разработчики использовали его как какой-то патч. Хотя это очень мощный инструмент, если использовать его разумно. Сейчас мы предпочитаем избегать JavaScript, если функцию можно реализовать через CSS. Тем не менее, JavaScript имеет вес как на стороне фронт-энд (jQuery), так и на стороне бэк-энд (Node.js)».

Золотая эра свободы — Flash (1996). «Чтобы сломать существующие в веб-дизайне ограниченния, появилась технология, которая обещала невозможную ранее свободу. Дизайнер мог работать с любыми формами, макетами, анимацией, интерактивом, шрифтами, и всё это в одном инструменте — Flash. В конце концов, всё упаковывается в один файл и отправляется в браузер для просмотра. Пока пользователь обновляет Flash до последней версии и ждёт, пока загрузится файл, Flash работал словно по волшебству. Это был золотой век для сплэш-страниц, анимационных заставок и всех видов интерактивных эффектов. К сожалению, Flash был не слишком открытым, дружелюбным к поиску и потреблял много вычислительной мощности. Когда Apple решила отказаться от него в первом iPhone в 2007 году, Flash пришёл в упадок. По крайней мере для веб-дизайна».

CSS (1998). «Примерно в то же время появился лучший подход к структурированию данных с технической точки зрения — каскадные таблицы стилей (CSS). Основной идеей в них стало отделение контента от отображения: внешний вид и форматирование в CSS, контент — в HTML. Хотя первые версии CSS не были гибкими, основной проблемой всё равно оставалось распознавание браузерами. Прошло несколько лет, прежде чем браузеры начали поддерживать их, и то с большим количеством ошибок. Это то время, когда один браузер имел новейшие функции, а другой — нет. Кошмар разработчика. Чтобы стало понятнее, CSS — не язык программирования, это декларативный язык. Должны ли веб-дизайнеры уметь писать на нём код? Может быть. Должны ли они понимать принцип работы CSS? Совершенно точно!».

Мобильное восстание — сетки и фреймворки (2007). Интернет на мобильных уже сам по себе был вызовом. Помимо создания разных макетов, существовала контентная проблема: нужно ли повторять макет сайта на крошечном экране или сделать его вертикальным? Куда на этом экране поставить красивую и мигающую рекламу? Скорость также была проблемой, поскольку большое количество контента очень быстро „съест“ деньги на счету. Первым шагом к изменениям к лучшему стала модульная сетка. После некоторых вариаций сетка 960gs победила, а 12-колоночное разделение стало тем, что дизайнеры используют по сей день. Следующим шагом стала стандартизация часто используемых элементов: кнопки навигации, формы и другие. Чаще всего для этого делали библиотеку визуальных элементов. Победителями в этом смысле являются пакеты Bootstrap и Foundation, которые сильно повлияли на исчезновение границ между сайтом и приложением. Оборотной стороной этого решения стало то, что все сайты выглядят одинаково, а дизайнеры не могут получить доступ к библиотекам, если не знают, как работает код».

Отзывчивый веб-дизайн (2010). «Блестящий молодой человек по имени Итан Маркотт решил изменить существующий подход: использовать тот же контент, но разные макеты. Он придумал термин отзывчивый веб-дизайн. Технически мы по-прежнему используем CSS и HTML, поэтому это скорее концептуальное развитие. Тем не менее, здесь могут быть заблуждения. Для дизайнеров отзывчивость это просто несколько макетов. Для клиентов это когда сайт работает на мобильном. Для разработчиков это то, как работают изображения, какая скорость загрузки, семантика, mobile-first или desktop-first и прочее. Но основным преимуществом тут является паритет контента и то, что сайт работает вообще везде».

Времена «плоского дизайна» (2010). «Проектирование большего количества макетов занимает больше времени. Поэтому мы, к счастью, решили упростить процесс вынужденным отказом от причудливых теней и возвращению к принципам приоритета за контентом. Хорошие фотографии, типографика, чёткие иллюстрации и продуманные макеты — вот то, что мы сейчас делаем. Упрощение визуальных элементов или так называемый плоский дизайн тоже является частью этого процесса. Основным преимуществом тут является то, что гораздо больше внимания уделяется макету, иерархии и контенту. Глянцевые кнопки заменили иконками, что позволяет использовать векторные изображения и основные шрифты».

Яркое будущее (2014). «Святой Грааль веб-дизайна это полностью визуальный редактор внутри браузера. Представьте: дизайнеры просто перемещают блоки по экрану, а на выходе получают чистый код. Я не имею ввиду изменения сути этих блоков, а только гибкость и контроль. Представьте, что разработчикам не придётся думать о совместимости с браузером, поэтому они смогут сосредоточиться на решении настоящих проблем.

Технически существуют несколько новых концепций, которые развивают это направление. Новые команды в CSS vh, vw (высота и ширина просмотра) дают большую гибкость для позиционирования элементов. Это также позволит решить проблему для многих дизайнеров: почему центрирование чего-то по вертикали в CSS это такая боль. Flexbox — ещё одна хорошая концепция в рамках CSS. Она позволяет создавать макеты и изменять их свойства, вместо того, чтобы писать код. И наконец веб-компоненты. Это набор сгруппированных вместе элементов, которые облегчают рабочий процесс, поскольку элементы становятся строительными блоками, которые можно обновлять и использовать повторно».