60 катастрофических ошибок в веб-дизайне
Илья Провоторов
03.02.2016 00:00
На примере худшего сайта Интернета www.theworldsworstwebsiteever.com.
- Пикселизированный header – заголовок должен быть текстовым, а не графическим. Только в этом случае он будет проиндексирован поисковыми системами.
- Рекомендуется избегать прозрачности букв (чтобы сквозь них был виден фон).
- Запрещены разные цвета букв в хэдлайне.
- Анимированные звезды, как и другие анимационные картинки - это не самая лучшая идея для современного веб-сайта.
- На действующем сайте категорически запрещено размещать сообщение «В процессе разработки», даже если он дорабатывается. Это можно делать только на моностранице, где кроме этого сообщения больше ничего нет.
- Более того, рекомендуется не использовать саму формулировку "Сайт находится в разработке". Лучше что-то типа «Скоро открытие».
- "<--" и другие текстовые маркеры - это настоящая дизайнерская бестактность.
- Лучше избегать примитивных url, в данном случае - new_page_1.htm.
- Избегайте очевидных пояснений, например, "Главное меню" (main menu). Если пользователь не знаком с понятием главного меню, то мировая паутина не для него.
- Лучше не использовать контент, написанный в подростковой манере.
- Старайтесь избегать графических и любых других смайлов.
- Анимированная иконка "e-mail" очень раздражает, особенно если расположить ее в середине страницы без привязки к функционалу (после нажатия ничего не происходит).
- Повторяющийся фон, состоящий из паттернов - это не самый лучший вариант в большинстве случаев.
- Фон с элементами флоры и фауны почти никогда не выглядят органично.
- Изображения с рамкой всегда выглядят непрофессионально.
- В верхней части рамка из фиолетового пунктира образует пустое пространство под ней, что заставляет пользователей применять горизонтальную прокрутку.
- Табличная верстка прекрасно работает, если все сделано правильно. Представленный сайт, в свою очередь, является отличным примером того, как НЕ надо оформлять таблицы.
- Избегайте нелепого Javascript. Ведь если технология существует, совсем не обязательно ее использовать. Это же относится к ядерной бомбе.
- Выделение ссылок можно оформить качественно - без использования курсивного и жирного шрифта.
- Все ссылки в главном меню должны вести пользователя к соответствующему разделу.
- Грубая и слишком толстая граница для ячеек таблицы.
- Ссылка "Погода" нерабочая.
- Блестящие иконки "NEW" и "Updated" подойдут только в качестве стикеров для переписки с друзьями.
- Опция главного меню "Карты Google" содержит некорректную гиперссылку.
- На одной странице представлено недопустимое разнообразие шрифтов, включая неподходящие для веб-дизайна варианты.
- Раздел "What's New" опечалил многочисленными орфографическими ошибками в тексте.
- Заменять "1" словом "one" или "U" использовать вместо "You" - это недопустимая ошибка для дилетантского сайта. Ни одни клиент не воспримет всерьез веб-ресурс с подобным текстом.
- Бегущая строка может быть эффективным инструментом позиционирования, если использовать ее редко и ненавязчиво. Но это не про наш пример.
- Пункт меню "About TWWWE" опять-таки без ссылки.
- На сайте используются объекты Microsoft Word Art, которые подойдут только для школьных рефератов.
- Анимированная разделительная полоса назойливо дезориентирует на странице.
- Синий на красном - это плохая идея.
- Красный на синем - это плохая идея.
- Синий и красный на черном - это плохая идея.
- Другие примеры "плохой идеи" можно посмотреть в разделе "Fantastic Colours".
- Рукописный шрифт "brush script", который используется в данном случае для выделения "The" и "Ever" в шапке сайта и для наименования раздела "Fantastic Colours". Здесь можно увидеть наглядный пример неуместного злоупотребления рукописным написанием.
- Англоязычные пользователи моментально заметят множество "детских" орфографических ошибок, например, в слове "COLOURS".
- Открытый счетчик на странице - это дурной тон в веб-дизайне.
- Ссылка "Shocking Pictures" ведет к разделу "Shocking Photos". Опять-таки очевидное несоответствие наименования ссылки и раздела сайта.
- Представленные на странице таблицы отличаются по ширине и расположению.
- В бонус к многочисленным орфографическим ошибкам идут грамматические неточности. Отмечу фразу "Эти фотографии ОТВРАТИТЕЛЬНО отформатированы УЖАСНО" или "These photos are SHOCKINGLY formatted HORRIFICLY".
- Бла-бла-бла. Нам просто не хватает еще одной ошибки до 60 J
- Первое фото неправильно отформатировано. На самом деле это достаточно большая фотография, уменьшенная с помощью HTML. Такой способ масштабирования не приемлем, так как здесь страдает не только исходное качество фото, но скорость загрузки всего сайта.
- Вторая фотография слева также неверно отформатирована. Здесь имеет место скошенная рамка и искаженные цвета.
- Третье изображение уже сложнее оценить. Но если внимательнее присмотреться к закату, можно увидеть значительную зернистость. Этот дефект был получен в ходе конвертации фото из JPG в GIF.
- Четвертая картинка является отличным примером того, чтобы бывает, если взять фотографию малого размера и попытаться ее увеличить.
- Немного тонкого юмора в виде надписи "Тройной" для четвертого фото.
- При расположении фотографий слева направо необходимо убедиться в том, что они были одинакового размера.
- Доменное имя www.theworldsworstwebsiteever.com очень длинное (вот почему мы используем www.twwwe.com).
- Я действительно считаю, что четыре бегущие строки - это забавное зрелище, но только не для профессионального сайта.
- Повсеместно встречаются "битые" ссылки на изображения.
- Текстовое поле "Could we possibly do any more, said the cat" несет в себе тройной дефект. Во-первых, фраза не имеет смысла. Во-вторых, она никак не перекликается с тематикой сайта. В-третьих, надпись выполнена в качестве графического блока, хотя здесь нужно использовать простой HTML-текст.
- Информация о последних обновлениях сайта уместна только для блогов и новостных ресурсов.
- Слово "Sight" использовано вместо "site" - это действительно очень распространенная ошибка.
- Никакой музыки в фоновом режиме, ни при каких обстоятельствах! Практически все встроенные звуки жутко раздражают.
- В данном случае встроенный звук зациклен и его невозможно отключить. А пользователю всегда нужно дать выбор, пусть даже вы и фанатичный меломан.
- Только для вернувшихся в 90-е веб-мастеров считается нормальным размещение информации о требованиях к браузеру в подвале сайта. Я никогда не видел ничего подобного на профессиональных платформах, за исключением некоторых флеш-сайтов.
- Информация о количестве переходов на сайт была актуальна в 1996 году, но не сейчас.
- Раздел "What's New" отлично впишется в газетную сводку, но почему-то совсем не подходит для Интернета.
- Не менее "древним" считается объединение текстовых блоков и изображений табличной рамкой.
На этом все, хотя список можно продолжать еще долго.
Возврат к списку
