Зал славы хакеров веб-дизайна

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

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

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

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

Макеты: HTML-таблицы и CSS-поплавки

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

HTML-таблицы

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

Конечно, HTML-таблицы предназначались для хранения табличных данных, а не макетов страниц. Но на самом деле они были эффективным способом выполнения работы, пока не появился CSS.

Плавающие CSS

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

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

Однако поплавки не доставили нас до земли обетованной. Если вы хотите, чтобы столбцы были одинаковой высоты, вам нужно было реализовать дополнительный хак clearfix.

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

Расстояние между элементами: неразрывные пробелы (   ) и Spacer.gif

Ориентированные на детали веб-дизайнеры часто искали способы разместить элементы с точностью до пикселя. Опять же, в те времена это было не так просто. Таким образом, неразрывный пробел ( ) и spacer.gif использовались для большего контроля над интервалами.

Неразрывный пробел (   )

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

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

Spacer.gif

Этот более точный способ расстановки интервалов появился благодаря созданию прозрачного изображения .GIF (часто называемого spacer.gif ) и размещению его на странице. Изящным аспектом было то, что, поскольку это прозрачное изображение, дизайнеры могли установить высоту и ширину на любое количество пикселей без негативного влияния на внешний вид или производительность.

CSS сделал оба этих хака устаревшими. Но разве вы не знаете, что в редакторе WordPress Gutenberg есть блок Spacer, который делает почти то же самое? Это просто говорит о том, что потребность все еще существует.

Типографика: текст на основе изображения

Потребность в этом была довольно проста. Ранний Интернет был по существу ограничен шрифтами, установленными в системе пользователя. Конечно, у дизайнеров не было возможности знать все шрифты, к которым имели доступ пользователи, кроме базовых, таких как Times New Roman, Georgia, Arial и Helvetica.

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

Липкие заголовки и навигация: фреймы

HTML-фреймы, возможно, опередили свое время, так как многие задачи, для которых мы когда-то их использовали, теперь выполняются с помощью CSS и JavaScript.

Концепция была довольно проста. Каждый отдельный «фрейм» в макете на самом деле был отдельной страницей. Это был простой способ отделить верхний и нижний колонтитулы или навигацию от остального контента сайта. Например, внесение изменений в навигацию означало одно изменение в одном файле. Это похоже на то, что было сделано на стороне сервера, только с некоторыми другими преимуществами дизайна.

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

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

Оптимизация изображения: нарезанные изображения

До того, как широкополосная связь стала широко доступной, оптимизация изображения была жизненно важна. Даже изображение размером 50 КБ может утяжелить страницу из-за медленного соединения.

Софтверный гигант Adobe предложил интересное решение. С их программным обеспечением ImageReady дизайнеры могли разрезать одно изображение на любое количество более мелких частей. Затем каждый отдельный фрагмент может быть оптимизирован, что теоретически ускорит их загрузку.

Но это не все. Затем программное обеспечение может экспортировать фрагменты в таблицу HTML. Оттуда вы можете скопировать и вставить этот HTML-код на свою страницу.

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

Хотя оптимизация изображения по-прежнему важна, широкополосный доступ, к счастью, дает нам немного больше свободы действий при работе с большими файлами. Несмотря на это, современные версии Photoshop по-прежнему предлагают нарезку изображений и экспорт HTML.

Размещение Internet Explorer: <!--[if IE]>

По сей день все еще нередко можно услышать, как веб-дизайнеры (включая меня) проклинают упорное существование Internet Explorer. Его наследие живет, отчасти потому, что некоторые пользователи просто не откажутся от него.

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

Он был несколько универсальным, поскольку вы могли применять стили ко всем версиям IE <!--[if IE]> или ориентироваться на те, которые используют более старые версии <!--[if lt IE 11]> . Вы также можете использовать его в обратном порядке, ища версии выше или равные определенной версии <!--[if gte IE 10]> .

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

Лайфхаки веб-дизайна, которые стоит запомнить

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

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

Еще лучше то, что они помогли проложить путь к тому, чем Интернет является сегодня. Большинство элементов в этом списке были заменены стандартами HTML и CSS, которые приносят пользу всем.