В начале 90-х появилось понятие веб-дизайна, в первую очередь благодаря верстке и возможности размещать информацию на странице разными способами. Не так уж давно, правда? С тех пор методы и инструменты менялись стремительно, подстраиваясь под требования рынка и новейшие разработки. Сегодня рассмотрим только самые значимые вехи развития верстки.
Табличная верстка
Первые сайты были незамысловатыми и исключительно текстовыми. Но даже текст нужно было структурировать и упорядочивать на странице.
В 90-х использовался только один вид верстки – табличный. По сути структура сайта представляла собой огромную таблицу, куда и вписывались все данные. Этот подход продержался довольно долго и был популярным даже с наступлением 21 века.
Верстальщики того поколения начали отталкиваться от возможностей браузера Netscape, внедряя первые в истории нестандартные теги. Кстати, подробнее про теги и ошибки в их применении смотри в статье «Ошибки начинающих верстальщиков».
В середине 90-х появился Internet Explorer со своими особенностями, которые не позволяли использовать привычные методы. Разработчикам стало сложнее, особенно учитывая и растущие требования к виду и функционалу сайтов.
В это время компания W3C стала внедрять идею семантики языка HTML: добавления уникальных тегов, которые присваивали содержимому особые свойства. Благодаря такой фишке данные сайта правильно считывались поисковыми роботами – это заложило фундамент для системы современного браузерного поиска.
Вскоре возникают стандарты CSS (Cascading Style Sheets). Это система правил, которая описывает отображение элемента, написанного на HTML или XML. Стандартизация и приведение к общему знаменателю очень упростили задачу разработчикам.
Табличный метод вполне удобен, особенно если нет альтернатив. Но технический прогресс вмешался в программную составляющую – этот способ верстки не подходил для мобильных устройств, а они уже в 2010-х стали захватывать мир очень уверенно и настойчиво.
Со временем стали появляться более развитые спецификации CSS, благодаря чему появились возможности оформлять каждый блок сайта отдельным файлом, а позже и кэшировать их, ускоряя загрузку. Проще получалось управлять структурой и задавать оформление. Так верстка совершила новый эволюционный переход от таблиц к блокам.
Блочная верстка и фреймворки
Верстка блоками называется так, потому что подразумевает построение сайта из отдельных блоков. Блочные конструкции формируются в определенном порядке, но благодаря CSS можно менять и порядок, и сценарии отображения, и стили блоков.
Стандарты CSS очень гибкие и дают много возможностей для достижения одной и той же цели. В это время зародилось понятие “красивого кода”, потому что можно выполнить задачу просто и изящно, а можно сделать то же, но громоздко и непонятно.
Очередным прорывом в развитии верстки стал проект Bootstrap, запущенный компанией Twitter в 2011. Изначально это был внутренний продукт, предназначенный для упрощения процесса работы. Но вскоре он превратился в универсальный набор инструментов для адаптивной блочной верстки и вышел в мир.
Довольно быстро концепцию подхватило все интернет-сообщество, а компания стала совершенствовать проект и выпускать обновления. Подход стал первым в своей нише – технология получила общее название “фреймворк”. Теперь есть масса других инструментов того же толка: Semantic UI, Foundation, Pure by Yahoo!, Uikit, Symfony, Laravel, Django, React, Vue. Фреймворк позволяет быстро и легко создавать сайты, которые сразу выходят адаптированными под любые устройства. Ведь сегодня без адаптивного дизайна сайт практически бесполезен и не может считаться современным.
Верстка флексами
При всех достоинствах блочной верстки и она не идеальна. Для достижения идеального выравнивания и кроссбраузерности приходится попотеть – это достаточно трудоемкие задачи. И хорошо, что развитие верстки не стоит на месте и появилась спецификация Flexbox.
Нужно понимать, что это скорее не масштабный инструмент, а способ построения отдельных элементов сайта. Но сейчас верстка флексами – одно из самых удобных современных решений. Этот принцип появился еще в 2008, а получил поддержку всех популярных браузеров только в 2014.
По своей сути этот метод объединяет в себе лучшие черты табличной и блочной верстки. Главное достоинство – простота создания плавающей сетки, а вместе с ней и адаптивного дизайна без лишних заморочек. Это очень гибкое решение, позволяющее без проблем менять содержимое блоков, перемещать их, добавлять новые. Подробно тонкости и преимущества верстки флексами мы рассматривали в отдельном материале «Верстка на Flexbox – просто и понятно».
Flexbox стал настоящим прорывом в верстке, хотя все еще не является главенствующим методом. Наряду с флексами одним из новых и востребованных подходов стал CSS Grid Layout. Обе технологии основаны на спецификациях выравнивания Box Alignment, но по своей сути подходят для разных задач.
Тонкости практического применения разных подходов в верстке смотри в онлайн-премьере «Как сверстать сайт и выложить на хостинг. Реальная практика».
Заключение
За эти тридцать лет произошло так много прорывов и изменений, что сложно даже уследить. Да и сейчас развитие веб-дизайна и верстки настолько стремительно, что прогнозировать дальнейшее развитие отрасли тяжело.
Хорошему специалисту мало практики, ему стоит все время следить за трендами и новостями. Такие знания невозможно получить в вузах – программа устаревает быстрее, чем ее утвердит Министерство. Поэтому мы рекомендуем отслеживать выпуск наших онлайн-премьер и статей, а также черпать знания из современных образовательных программ WAYUP. Для новичков в этих вопросах есть даже совершенно бесплатный курс – «Веб-верстальщик: начало».
Научись создавать отзывчивую верстку для проектов базового и среднего уровней, пройди основы программирования на Java и получи бесценный практический опыт! Регистрируйся прямо сейчас.
