Типичные ошибки Веб-мастера

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

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

Впрочем, одна из возможных причин может заключаться в том, что вебмастер готовил свои страницы, пользуясь каким-то одним браузером и одним разрешением экрана. Но как только сайт попадает в Сеть, он сталкивается практически со всеми возможными (и невозможными!) вариантами настроек компьютера пользователя! Ваш сайт могут смотреть из Internet Explorer'a или Мозиллы, из-под MacOS или UNIX, в разрешении 640х480 256 цветов или 2048х1536 True Color... О такой экзотике, как сотовый телефон или карманный компьютер, можно умолчать - таких пользователей не очень много и ходят они в основном по специализированным ресурсам.

Разумеется, создать сайт, который одинаково хорошо смотрелся бы при любых настройках пользователя, довольно сложно, а то и вообще невозможно, если вспомнить, что даже разные версии браузеров по-разному отображают одну и ту же страницу. Но, как минимум, надо проверить наиболее распространенные варианты! Для того чтобы избежать самых грубых ошибок, достаточно посмотреть созданную вами страницу в Internet Explorer, Mozilla и Opera, причем стоит еще и взглянуть на нее при разных разрешениях экрана. Это, правда, не гарантирует отсутствия ошибок - увы, все браузеры существуют в разных версиях, а пользователи не столь дружно их обновляют, как хотелось бы вебмастеру. Тут ничего не придумаешь - надо либо устанавливать у себя разные версии браузеров (что само по себе является не совсем тривиальной задачей), либо ждать, пока посетители сами не начнут жаловаться.

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

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

В большинстве случаев картинки с плавными переходами цветов (фотографии, например) лучше сохранять в jpeg; картинки с резкими границами и большими одноцветными областями (например, скриншоты) - в gif. Обращайте внимание на размерность картинки - слишком большая иллюстрация может сильно сбить дизайн. Не забывайте в теге IMG указывать размерность картинки (параметры width и height) - при этом страница не будет "прыгать" во время загрузки, поскольку браузер сразу отведет для нее соответствующее место. Для большинства "смысловых иллюстраций" (графики, диаграмы и тому подобное) стоит прописывать название (параметр alt в теге IMG) - это название будет видно в том случае, если пользователь отключил в браузере загрузку графики.

Следующий момент, в котором часто ошибаются начинающие разработчики сайтов - это увлечение "продвинутыми" технологиями. Флеш-ролики и Java-апплеты - это, конечно, хорошо и красиво, но у части пользователей они отключены. И если у вас, например, навигация сделана в виде апплета, то такой пользователь просто никуда не сможет попасть. Предусмотрите вариант сайта без подобных "излишеств" - пусть он будет значительно менее красивым, но, как минимум, посетитель сможет добраться до информации. Кроме того, не стоит увлекаться возможностями, которые предоставляет JavaScript и прочие "хитрые" технологии: новичка очень легко распознать по бегущему тексту в статусной строке браузера (очень раздражает!), надписи "текущее время xxx часов" (у меня и так часы есть), "ваш IP-адрес такой-то" и прочим подобным вещам. Понятно, что, когда вы начинаете изучать веб-програмирование, у вас начинает кружиться голова от открывающихся возможностей, но стоит задуматься и о том, насколько все эти "навороты" нужны...

С навигацией связана и еще одна очень типичная ошибка: отсутствие ссылки на главную страницу сайта. Дело в том, что далеко не все посетители начнут путешествие по вашему сайту с первой страницы: многие попадут сразу в середину (например, по ссылке из поисковика). В том числе, они могут попасть, скажем, во внутренний фрейм (а вот здесь-то вам и пригодится JavaScript!) или еще в какое-нибудь странное место - и если на этой странице не будет навигации и прочих стандартных элементов (подписи, логотипа, шапки), то такие посетители могут не найти остальную информацию, имеющуюся у вас на сайте.

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

И напоследок - еще две регулярно встречающиеся ошибки. Первая - это использование обратного слэша ( ) вместо прямого ( / ) в адресах. Эта ошибка часто остается незамеченной, поскольку многие (но не все!) браузеры, зная о ее популярности, автоматически корректируют адреса. И если вы подобную ошибку допустили, прописывая, например, картинки на странице, то вместо картинок посетитель увидит надпись, что такого файла нет.

Вторая распространенная ошибка связана с регистром в именах файлов и адресах. Дело в том, что в Windows регистр значения не имеет, а вот в UNIX'е file.zip, File.zip и FILE.zip - это три разных файла, которые вполне могут находиться в одной директории. И если ваш сервер работает под управлением UNIX (что встречается чаще всего), то неправильное использование заглавных букв приведет к сообщению о том, что файл не найден (причем, тестируя эту же страницу на своем компьютере под Windows, вы никакой ошибки не увидите)...

Статьи по теме

9 лучших бесплатных фотостоков

В этой подборке представлены 9 ресурсов, где можно бесплатно загрузить изображения «без ограничений авторского права»: живые фото...

2025-12-02

10 причин высокого показателя отказов на сайте

Понятие «идеального» показателя отказов относительно --- то, что считается высоким в одной нише, может быть нормой в другой. Разбер...

2025-11-26

Зачем запускать MVP и как сделать это грамотно?

Создание проекта без минимально жизнеспособного продукта (MVP) аналогично строительству здания без проверки несущей способности фу...

2025-11-26

Перенос сайта с большим количеством ссылок

Сложности переноса крупных проектов Перенос корпоративных сайтов с большим количеством URL требует решения не только техниче...

2025-11-20

Онлайн-формы: универсальный инструмент для сбора обратной связи

В современном бизнесе систематическое получение обратной связи стало необходимостью для компаний любого масштаба. Особую значи�...

2025-11-14

Авторизация на сайте: как выбрать решение для удержания клиентов и сохранения продаж

Оглавление Кому нужна авторизация на сайте? Когда и как лучше вводить авторизацию? Виды авторизации: что выбрать для удерж�...

2025-11-14

Внедрение DMARC для защиты корпоративного домена от спуфинга

Привет, Хабр! В этом посте мы снова поговорим о проблеме подделки отправителя (или так называемом спуфинге)...

2025-10-28

Цифровой детокс: необходимость, тренд или искусственная потребность?

Если десять лет назад смартфоны символизировали технологический прогресс, то сегодня каждый третий пользователь (35%) открыто призн...

2025-10-24

No-code/low-code: как создавать цифровые продукты в 2025 без программистов

Представьте: у вас родилась блестящая идея. Не просто очередная догадка, а по-настоящему инновационное решение, которое может изм�...

2025-09-26

Yandex Data Lens: как визуализировать данные для маркетинга и аналитики

Yandex DataLens — это сервис от Яндекса, с помощью которого маркетологи визуализируют результаты рекламных кампаний. Он подключается к разным ...

2025-09-10

Владельцам сайтов: изменения в законе о персональных данных

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

2025-07-04

11 нейросетей для генерации изображений в 2025 году

Генерация картинок нейросетью упрощает работу маркетологам, дизайнерам, контент-мейкерам, а теперь — и владельцам бизнеса. Для всех �...

2025-06-10

Год назад то, что занимало у меня несколько дней работы, сейчас я делаю за 1-2 часа. Без преувеличений. И это только начало

За этот год я нашел 7 способов применения ИИ, с которыми моя эффективность и качество взлетели минимум в пять раз. Расскажу честно — без п...

2025-05-30

Нейросети для написания текста: 7 сервисов в помощь копирайтеру

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

2025-05-25

Мы делали презентации 35 лет, а потом пришла нейросеть

*Отсчёт от создания PowerPoint в 1987 году Эту историю для блога рассказал Николай Букин, дизайнер и основатель брендингового ...

2025-05-05