Примеры неудачного дизайна сайтов
Lame Web Design Examples

Ниже приведены примеры неудачного дизайна с объяснением некоторых недостатков, обнаруженных на каждой из страниц. Некоторые неудачные приёмы оформления широко распространены в Интернете, несмотря на деятельность Консорциума WWW и других организаций и частных лиц, главным образом благодаря студиям, привыкшим работать по устоявшимся шаблонам. Каждый из уменьшенных снимков страниц является гипертекстовой ссылкой, переход по которой позволяет загрузить снимок исходного размера и ознакомиться с внешним видом соответствующего сайта, загруженного в обычный браузер, в котором отключено отображение рисунков и графики Flash.

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

Снимки неудачно выполненных страниц и пояснения к ним

Пустое пространство (страница для фиксированной ширины экрана, декоративные изображения без подписей) Пустое пространство (страница для фиксированной ширины экрана, декоративные изображения без подписей).

Пустое пространство (страница для фиксированной ширины экрана, декоративные изображения без подписей) Пустое пространство (страница для фиксированной ширины экрана, декоративные изображения без подписей).

Почти пустая страница (если не считать картинок) Почти пустая страница (если не считать картинок).

Пустое пространство (страница для фиксированной ширины экрана), мелкие графические элементы меню Пустое пространство (страница для фиксированной ширины экрана), мелкие графические элементы меню.

Меню с нестандартным поведением, загораживающее (даже в свёрнутом виде) часть текста страницы Меню с нестандартным поведением, загораживающее (даже в свёрнутом виде) часть текста страницы.

Изображение без какого-либо текста Изображения без какого-либо текста. Изображения без какого-либо текста.

Горизонтальная полоса прокрутки. Грамматическая ошибка в абзаце о важности грамматики. Горизонтальная полоса прокрутки. Грамматическая ошибка в абзаце о важности грамматики.

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

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

Вот что из этого получается на сайтах, где основной акцент сделан на графику.

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

Навигация по сайту при таких условиях абсолютно невозможна.

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

Элементы меню в виде рисунков, самый крупный не подписан, много незанятого текстом пространства. Элементы меню в виде рисунков, самый крупный не подписан, много незанятого текстом пространства.

Распространённый браузер (и это ещё слабо сказано об Internet Explorer 6), корректный код HTML и CSS, но баннер (так называемый миниблок) выглядит ужасно. Вот пример ошибочности подхода, который можно выразить фразой: «Если созданное работает, значит всё сделано правильно». Распространённый браузер (и это ещё слабо сказано об Internet Explorer 6), корректный код HTML и CSS, но баннер (так называемый миниблок) выглядит ужасно. Для справки: миниблок добавляется на мои страницы хостинг-провайдером.

 

Пояснение моей позиции

Всё, сказанное выше, не следует воспринимать как попытку унизить авторов сайтов. Я отнюдь не желаю сказать, что сам не делаю ошибок. Однако я полон решимости избегать их по мере сил и возможностей. К сожалению, сайты, находящиеся на бесплатном сервисе Народ.ру, не подлежат проверке на действительность (при помощи программ-валидаторов), поскольку помимо моего желания сервер добавляет на каждую мою страницу чужеродные фрагменты кода HTML, не соответствующего никаким мыслимым спецификациям (это делается ради стабильности вывода на экран программами просмотра рекламного блока Яндекса). Кроме того, у меня не хватает времени переделать все свои сайты (действующих более 10), которые уже находятся в Сети. Данный сайт является своего рода эталоном для процесса реконструкции таких сайтов.


В разработке находятся ещё несколько десятков примеров

Эту страницу лучше просматривать в новых версиях визуальных программ просмотра, поддерживающих стили CSS. Вы можете узнать подробности об этих программах.

This page is best viewed in newer versions of visual browsers which have full support for CSS styles. You can obtain detailed explanation on this subject.

Редакция: 2006-05-26 (пятница) 20:20:02 (Московское время)

Hosted by uCoz