Веб-дизайн в сравнении

Я долго думал о несовершенстве мира и несправедливости по отношению к первопроходцам веба. И в конце концов родилась идея этой статьи об ошибках, которые чаще всего совершают при изготовлении собственной паги в Инете. Здесь я постараюсь наглядно показать, чего делать НЕ НАДО и как делать НЕ НАДО.

Самым трудным было найти самую кривую страничку :). Пришлось устроить мини конкурс кривых сайтов с наибольшим количеством ошибок на оном. Итак, я наткнулся вот на такое произведение искусства:

Пройдемся более детально по всем кривостям этой страницы.

Компоновка

На приведенном примере компоновка вообще отсутствует напрочь. Составляющие сайта раскиданы, как после подрыва на противопехотной мине :). Изначально любой сайт надо начинать с того, что решить, как скомпоновать свое детище. По-хорошему надо взять чистый лист бумаги и попробовать нарисовать примерный вид своей странички. Уже на этой стадии можно выбрать, как именно разместить элементы своей странички, что стоит поместить на нее, а что лучше убрать. Компоновка - основополагающая сайта, так как потом будет меняться только наполнение. Лучше один раз потратить немного своего драгоценного времени, чем потом нещадно его не убивать на переделывание каждый раз.

Разрешение

Почему-то самым важным автор посчитал то, что каждый входящий должен увидеть надпись "1024х758 Оптимальное разрешение". Для начала, такого разрешения нет в природе :), а есть 1024х768. А потом я не понял, что автор собирался показывать на любом разрешении :). Если же твоя страничка имеет особенную компоновку, не позволяющую смотреть ее на любом разрешении, иногда разумно предупредить посетителя о том, что для просмотра желательно иметь определенное разрешение. Укажи это где-то внизу мелким шрифтом и очень ненавязчиво. Ведь в принципе просматривающий сам допрет до этого, если страничка не будет влезать на его экране. Но хорошим тоном считается делать пагу под любое разрешение, которое может быть у посетителя. То есть страничка должна одинаково смотреться на разных разрешениях, и при этом не должно искажаться графическое наполнение. Обычно для этого либо центрируют страничку, либо делают одну область с возможностью изменения по ширине без искажения, а остальные области фиксируют по ширине.

Баннеры

Тут на самом видном месте воткнут баннер. Зачем? Баннеропоказ изначально нужен только сайтам с очень большой посещаемостью, чтобы в дальнейшем за счет показов своих баннеров привлекать новых посетителей. И это простая математика. Возьмем тот же RLE (Russian Link Exchange). В RLE (www.linkexchange.ru) стандартный обмен 1 к 2, то есть при показе на твоем сайте 10-ти баннеров твой покажут 5 раз. А если при этом учесть, что ткнут только 5-10 раз из 1000 показов, то не сложно уловить, что твой баннер просто не заметят :). Соответственно, выставлять баннеры при маленькой аудитории паги просто нецелесообразно. Допустим, все же хитов на твоем сайте прилично, и ты хочешь поставить баннеры. Тогда выбери ОДНОГО баннеропоказчика (советую все тот же RLE), а сам баннер всегда размещай в самом низу странички. Тогда он не будет мозолить глаза посетителям, а тебе будут капать баннеропоказы. Если же тебе важны клики, а не показы, то размести его выше, но при этом постарайся его замаскировать под дизайн странички и сделать так, чтобы он не выделялся, но при этом дополнял внешний вид. К тому же надо учесть, что он каждый раз будет новый.

Еще один недостаток этой паги в том, что автор в самый верх поставил голосование, да еще под убойным заголовком "ГОЛОСУЙ И(ИЛИ) УХОДИ!!!". Особенно мне понравился вариант "ГОЛОСУЙ И УХОДИ" :). И он еще спрашивает: "Ну что мы скажем об этой страничке?". Я лично больше 0,1 по 10 бальной не поставил бы, и те 0,1 только за вредность :). Обычно природа подобных голосований не в мании величия, а в желании добавить интерактивность на страничку. Но при этом стараются поместить форму голосования в ненавязчивом месте и периодически менять вопрос. А вопрос о том, нравится страница или нет, я считаю просто глупым. Другое дело, можно спросить, например, что можно добавить или изменить на страничке, и перечислить варианты: ничего, добавить анимацию, изменить графику и прочее. Тогда посетители сами скажут, что они хотели бы увидеть на твоей паге и что им не нравится.

Цветовая палитра

Автор использовал тут более 10 цветов! Обычно нужно всего 2-3 цвета. Почему? Во-первых, трудно смотреть, когда все разными цветами и тянет блевать порой, если честно. Позывы в крайнем случае есть :). А, во-вторых, при большом количестве цветов не каждая видюха способна отобразить все цвета и использует наиболее близкие по значению соседние цвета. То же можно сказать и о мониторах - не все мониторы способны передать одинаково все оттенки и их сочетание. В результате посетитель может увидеть все совершенно в других цветах, а не в тех, в которых она задумывалась. Да и цвета выбирать нужно не от балды, а желательно кратные 3-м, то есть состоящие из 0, 3, 6, 9, F и C. Но это в случае, если вся графика будет выполняться под выбранную палитру. В противном случае цвета выбирают исходя из имеющейся графики.

Счетчик

По поводу счетчика. Ну кто ж его лепит по центру и вверху? Такое впечатление, что посетителю только и нужно знать, сколько человек было на твоей страничке. Если ему это все же очень нужно, он найдет и сам без проблем, где бы счетчик не стоял. Счетчики, а чаще всего один, ставят в самый низ странички и как можно незаметнее. Цифры на счетчиках стоит показывать только на сайтах с десятками тысяч посещений в день для привлечения спонсоров. На обычных же страничках вполне подойдет счетчик рамблера (www.rambler.ru), который позволяет не показывать общее количество посетителей.

Моя любимая русский язык

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

Все предыдущие замечания я повторять не буду, расскажу подробно только о новых ошибках.

Фреймы

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

Таблицы

Видишь, как автор разместил текст в таблице и оставил стандартное обрамление? Вот никогда так не делай :). Обычно таблицы используют для компоновки, а не для обрамления. Обрамление рисуют сами и опять же компонуют с помощью таблицы. Связано это с тем, что стандартное обрамление (border = n) слишком примитивное, а главное - по-разному может быть отображено в разных броузерах. Если же рисовать обрамление самому, то все ограничения отпадают.

Я, конечно, ничего не имею против бисера :), но пару слов скажу.

Бекграунд и меню

После того как я увидел бекграунд меню, то сразу же схватился за сердце. А потом еще неделю пил валерьянку, дабы такое больше не повторялось :). Меню - это всегда то место, куда смотрят чаще всего. Соответственно, именно меню стоит продумать тщательнее всего. Оно должно быть и не очень броским и в то же самое время быть очень четким и легко читаемым. Меню должно занимать минимум полезного места и приносить максимум комфорта в навигацию по страничке. Бекграунд выбирается обычно монотонным, так как использование картинки в качестве бекграунда не всегда красиво смотрится и к тому же напрягает модем посетителя.

Андер констракшин

Больше всего бесит любое проявление недоделанности. Это всегда вызывает только одни мысли - неполноценность и ущербность. Так что никогда не спеши выставлять что-то типа under construction, тем более на главной страничке. Либо не выставляй свой агрегат, пока не будет все готово. Либо в недоделанные разделы поставь вежливое и разумное предложение о том, что в данный момент раздел верстается и в самом ближайшем будущем будет функционировать.

Больше всего не ожидал увидеть кривой сайт на хтмл про хтмл :).

Графика

На приведенном примере мало того что убого сделан градиент заливки в заголовках и не к месту, так как все заголовки лучше было сделать просто текстом. Так еще все это дело весит более 100 Кб! Иногда бывает, что нужно разместить качественное фото или логотип, тогда приходится выставлять файлы относительно больших размеров, но даже тогда стремятся оптимизировать размер файла по максимуму. Если же ты используешь графику, в которой использовано менее 256 цветов, то разумно будет выбрать монотонный бекграунд, а в графических изображениях поставить прозрачным цвет этого бекграунда. Тогда графика заметно "облегчится", а внешний вид не изменится. Как я писал выше, обычно используют на страничке 2-3 цвета и "тащут" их через весь сайт. При пестрой графике обычно режут картинку на отдельные части с монотонными цветами, а потом "склеивают" с помощью таблицы. В результате суммарный объем будет меньше, а качество выше, чем если выставлять целой. Графический формат gif, кроме прочего, позволяет делать еще изображение и чересстрочным (interlaced), что позволяет грузить очертания картинки до ее полной загрузки. Это очень удобно, если невозможно избежать большого количества графики. Тогда посетитель еще до конца загрузки сможет по очертаниям понять, что это, и перейти дальше по ссылкам. Те же, кому интересно будет увидеть графику во всей красе, просто дождутся конца загрузки.

Пы.Сы.

В данной статье рассматривались личные странички, а не профессиональные работы или сайты веб-студий. Соответственно, и в качестве примеров были взяты только личные странички обитателей Инета.