Когда веб только начал развиваться, верстка сайтов выглядела совсем иначе, чем сегодня. Таблицы и фреймы были основными инструментами для структурирования контента на веб-страницах, что в наше время кажется странным. Давайте разберёмся, как и почему эти подходы использовались и чем они были заменены.
Верстка с помощью таблиц: первый шаг к структуре
В конце 90-х и начале 2000-х таблицы были способом построения макетов страниц. Это был простой способ расположить элементы в виде строк и колонок, что позволяло дизайнеру контролировать их позицию и размер. В то время CSS либо не существовал, либо был в зачаточной стадии, поэтому таблицы стали логичным выбором. Этот подход позволял контролировать визуальные элементы, создавая страницы, которые выглядели довольно аккуратно.
Минусы таблиц
Главной проблемой таблиц была их жесткость: они плохо адаптировались под разные размеры экрана. Весь макет был “забетонирован” в определённых размерах, и, если экран пользователя был меньше ожидаемого, сайт становился неудобным. Более того, использование таблиц для макета было неэффективным: исходный HTML-код становился громоздким, что ухудшало загрузку страницы.
Фреймы: попытка облегчить навигацию
Фреймы были следующей попыткой упростить структуру сайтов. Они позволяли разделить экран на несколько независимых областей, каждая из которых загружала собственную страницу. Это было удобно для создания статичной навигации: меню оставалось на месте, пока пользователь переходил между страницами, загруженными в другом фрейме.
Недостатки фреймов
Фреймы также имели свои минусы. Их сложная структура усложняла навигацию и ухудшала взаимодействие с поисковыми системами. Пользователь не мог легко скопировать и поделиться ссылкой на определённый контент, а поисковые системы часто индексировали отдельные фреймы, что мешало полноценно понять структуру сайта. Постепенно стало очевидно, что фреймы ограничивали гибкость сайтов.
Переход к CSS: революция в веб-дизайне
CSS (Cascading Style Sheets) принёс новые возможности для дизайна сайтов, и, благодаря ему, табличная верстка и фреймы начали уходить в прошлое. Появились концепции блочной модели и стилизованных элементов, позволяющие управлять внешним видом и позиционированием элементов гораздо проще и гибче. Благодаря CSS появилась возможность разделить содержание и дизайн страницы.
CSS Flexbox и Grid
С появлением CSS Flexbox и CSS Grid, разработка адаптивных сайтов стала ещё проще. Эти технологии позволяют организовать элементы на странице, не прибегая к жёстким структурам таблиц. Flexbox и Grid поддерживают адаптивность и упрощают создание как простых, так и сложных макетов. Например, с помощью Flexbox можно выравнивать элементы по горизонтали или вертикали, а Grid позволяет создавать многоуровневые сетки, которые адаптируются под любые экраны.
JavaScript и SPA: сайты становятся приложениями
Сегодня сайты становятся полноценными веб-приложениями, и JavaScript играет здесь важнейшую роль. Фреймворки, такие как Vue, React и Angular, позволяют создавать SPA (Single Page Application) – одностраничные приложения, где весь контент загружается динамически. Это повышает удобство, так как пользователь может перемещаться по страницам без полной перезагрузки.
Современные подходы
Теперь разработчики могут гибко управлять состоянием и взаимодействием на сайте, используя компоненты и библиотеки для управления состоянием (например, Vuex, Redux). Эти подходы позволяют создавать более быстрые, удобные и интерактивные сайты, которые выглядят и работают одинаково хорошо на любых устройствах.
Таблицы и фреймы были важной частью эволюции веба, но современные CSS, JavaScript и новые фреймворки сделали их устаревшими. Сегодня веб-дизайн ориентирован на гибкость, адаптивность и пользовательский опыт, и это стало возможным благодаря новым подходам и технологиям.