8 мертвых веб-тенденций, без которых намного лучше

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

Хорошо помнить, почему они использовались, как и почему они умерли. Это дает нам представление о том, как родились лучшие практики и почему они являются «лучшими» практиками, которые у нас есть. Это дает нам контекст для построения будущего Интернета. И, кроме того, новичкам в индустрии тоже будет полезно знать кое-что из этого. Они не увидят то, что когда-то перенесли мы, но обязаны знать, от чего мы страдали, чтобы не повторять наших ошибок.

Кстати, статья написана не для того, чтобы оплакать эти тенденции и функции браузера, а чтобы похоронить их.

Мигание

Тссс… тссс… все в порядке. Оно мертво и больше не может причинить тебе вреда.

Для всех, кто немного не в теме: был такой тег <blink>, который заставлял элементы на странице делать именно это: мигать. Время от времени, там и не там. Неизвестно, для чего эта штука была разработана, догадка всего одна: чтобы повредить ваши глаза. Изобретенный в разгар ранних войн браузеров, этот тег был примером специфичных для браузера тегов и предназначался для того, чтобы дать Netscape Navigator преимущество над тогдашним Internet Explorer.

Неизвестно, «умер» ли браузер Netscape Navigator именно из-за этого, но все может быть…

(Скриншот не предоставлен по понятным причинам.)

Флэш-меню

Многие велись на красивую картинку и использовали этот тренд. Не каждый мог использовать анимированные навигационных меню (читай: меню с состоянием наведения), созданных с помощью JavaScript. Или DHTML, как его называли в Dreamweaver. Поэтому использовали Macromedia Flash для создания необычных меню с анимированными кнопками, и вставляли их в каждый созданный заголовок веб-сайта.

Некоторое время шаблоны меню на основе Flash были самостоятельной индустрией. Совет: никогда, НИКОГДА не создавайте меню веб-сайта, которое вы не сможете изменить, просто отредактировав текстовый файл. Одна только стоимость обслуживания была огромной головной болью, и поисковые системы так и не научились сканировать файлы Flash.

Сейчас эту технологию современные браузеры даже перестали поддерживать. И слава богу.

Frames

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

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

  • Кнопки «Назад» и «Вперед»;
  • История браузера в целом;
  • Сложнее было копировать и вставлять ссылки на определенные страницы сайта;
  • Перезагрузка веб-сайта, безусловно, была немного случайной и обычно просто возвращала вас на «Домашнюю страницу».

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

Изображения кнопок

Не так давно плоский дизайн захватил мир штурмом, побудив людей сказать что-то вроде: «Подождите… это кнопка? Могу ли я нажать на нее?». Это в первую очередь касается кнопок-призраков.

До этого все было занято 3D-кнопками. Потому что они были модными. Это началось в начале 90-х, и мы просто не ставим под сомнение все, что происходило между 1980 и 2005 годами. Это были просто разные времена.

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

Бегущая строка

Когда-то, прежде чем все начали ругать слайдеры, в HTML действительно был встроенный элемент, заставляющий вещи скользить по странице. Это тег <marquee>, создающий бегущую строку. Люди возненавидели его задолго до того, как он умер. Он был реализован в Internet Explorer в ответ на тег <blink> и тоже раздражал, напрягая глаза.

Он был заброшен и устарел за то, что слишком отвлекает пользователей.

Демоверсии доступны здесь:

Необычные разделители

Еще до того, как мы начали делать правильные макеты, людям нужен был способ разбивать длинные страницы текста, чтобы сделать их более удобными для чтения. Элемент <hr> показался кому-то слишком простым, и поэтому дизайнеры того времени прибегали — как они часто это делали — к .GIF. Так называемые разделители были просто горизонтальными полосами, картинками, настолько причудливыми, насколько хватало вашей фантазии.

Это была еще одна тенденция, которая упала на CSS / CSS3. Кроме того, когда разделитель визуально более интересен, чем текст, это может показаться конфликтом для пользователя.

Карта сайта

Карта сайта была основной и конечной точкой навигации. Прежде чем веб-сайты получили свои собственные функции поиска, вы использовали карту сайта, чтобы найти то, что вам нужно на любом сайте. Это было просто: весь контент был прямо здесь, и вам просто нужно было просто просмотреть ряд ссылок.

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

Табличный макет

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

Это умерло, потому что CSS получил свое развитие. И это хорошо. Мы использовали таблицы так долго, потому что браузеры ( особенно пресловутый IE) не спешили реализовывать поддержку CSS, но в конце концов достигли этого.

Странная вещь: CSS Grid похож на возврат таблиц обратно, но намного лучше.

А какие старые тенденции помните вы? Расскажите в комментариях!