Множество компаний, предлагающих услуги веб-дизайна, будь то многоопытные профессионалы своего дела - известные дизайн-студии, или же фирмы-однодневки, использующие «шаблонный дизайн», пытаются позиционироваться как разработчики «качественного» веб-дизайна. Однако далеко не все из них понимают, что «качество» такого дизайна складывается не только из красоты страниц сайта, удобства «юзабилити» для пользователей или клиентов, но и из того, как «видят» дизайн сайта поисковые системы. То есть при разработке концепции дизайна будущего сайта следует учитывать и так называемые «требования» к сайту с точки зрения поисковых систем. С общими краткими советами по данному вопросу можно ознакомиться в разделе помощи у каждой поисковой системы. В данном мастер-классе попытаемся посмотреть на веб-дизайн с разных углов – с точки зрения, как пользователей, так и поисковых систем, опишем возможные ошибки, укажем пути их решения.
Веб-дизайн – деятельность творческая. Результаты этой деятельности в итоге оказываются представлены на всеобщее обозрение аудитории сети Интернет. Но дать реальную оценку завершенному дизайнерскому проекту и оценить трудозатраты на него могут только специалисты в области технологий веб-дизайна . Обычные пользователи Интернета оценивают только внешний вид сайта, картинки, цвета – то есть, образно говоря, «вершину айсберга». Высокую оценку, данную сайту специалистами дизайна, рядовому пользователю объяснить достаточно проблематично. Профессиональная терминология в данном случае будет сведена к понятию «качественный дизайн», которым повсеместно оперируют как разработчики сайтов, так и пользователи. Даже если попытаться задать запрос «качественный дизайн», например поисковой системе Яндекс, то на первой странице результатов поиска вряд ли будут ссылки на полезные материалы для дизайнеров; топовые места занимают разнообразные компании, предоставляющих услуги веб-дизайна, к слову, совсем не обязательно «качественного».
Дизайн служит для привлечения внимания пользователей – потенциальных клиентов (для коммерческих проектов). Он позволяет получать удовольствие от работы с сайтом, в результате чего с большой долей вероятности простые пользователи превратятся в покупателей. Для некоммерческих ресурсов, дизайн вполне может быть «шаблонным»; для них гораздо более важен контент, его смысловая нагрузка. Сайтам, ориентированным на увеличение продаж, клиентской базы компании-владельца сайта, нужны более весомые затраты на дизайн, который вполне может быть средством конкурентной борьбы между их владельцами. Зачастую компания-владелец более качественно созданного и прорисованного сайта выглядит более преуспевающей и перспективной.
Рассмотрим веб-дизайн с точки зрения пользователя. Можно выдвинуть некоторые важные требования к оформлению сайта, спрогнозировав ожидания среднего пользователя.
Размер страницы Данное требование ограничивает размер страниц сайта. Нормальным размером загружаемой страницы принято считать размер, не превышающий 70-80 Kb (килобайт). Страницы, размер которых превышает данное требование, загружаются очень долго у посетителей, использующих модемное Dial-Up соединение.
Для того, чтобы не превышать предельный размер страницы, дизайнерам необходимо использовать приемы минимизации графики.
«Общность» оформления
Правило «общности» оформления сайта можно озвучить следующим образом: оформление повторяющихся элементов верстки (графики, таблиц, фреймов, шрифтов и т.д.) должно быть одинаковым для всех страниц сайта.В качестве примера – просто попробуйте использовать в одном тексте на странице несколько вариантов шрифтов. Очевидно, что выглядеть это будет далеко не лучшим образом...
Масштабируемость Масштабируемая структура в большинстве случаев подразумевает «резиновый (тянущийся) дизайн». Дизайн должен быть настолько «резиновым» насколько это нужно: не следует растягивать картинку на весь экран, если при этом строки получаются длинными и мало удобными для чтения. Такой дизайн должен хорошо выглядеть на установленном пользовательском разрешении экрана даже 800х600 пикселей.
Соответствие цели Дизайнерское оформление сайта должно соответствовать поставленным перед ним целям.
К примеру, если сайт является презентационным (промо-сайт, PR бренда – небольшой по содержанию), то в данной ситуации дизайн должен быть наиболее привлекательным для пользователя. Несложная структура подобного сайта вполне позволяет это реализовать.
Другой пример – большой поисковый Интернет-портал по заказу и бронированию туристических путевок, авиа и ж/д билетов. В этом случае необходим простой, быстро загружающийся, максимально понятный, но профессионально выполненный дизайн. Ведь такие порталы используют огромную постоянно обновляющуюся базу данных, и запрос пользователя обрабатывается в течение некоторого времени, иногда, достаточно длительного. А если при этом еще и множество графики будет грузиться на странице, то пользователь и вообще может, не дождавшись загрузки закрыть сайт.
Поисковые системы используют ряд сложных алгоритмов, морфологический и лексический анализ – постоянно изменяющиеся критерии, направленные определение степени релевантности страницы соответствующему запросу. Главная цель любой поисковой системы – доставлять людям именно ту информацию, которую они ищут, то есть наиболее отвечающую его запросу. (Более подробно о работе поисковых систем можно прочитать в мастер-классе "Поисковые системы: состав, функции, принцип работы" от 20.03.2006).
Известно, что один из самых важных текстовых критериев, влияющий на ранжирование сайтов в поисковых системах - положение ключевых слов на странице и их плотность по отношению к остальным словам. Согласно этому критерию и нужно выстраивать концепцию дизайна сайта. При заходе на сайт, робот поисковой системы должен получить «нужную» информацию в верхней части страницы и плотность ключевых слов на странице должна быть достаточно высока (в пределах разумного). Поэтому при разработке дизайн-проекта сайта стоит задуматься об обязательном выделении места под нужное количество текстового наполнения страниц и расположении самого текста по отношению к другим элементам верстки.
Сформулируем одни из основных требований к веб-дизайну с точки зрения поисковых систем:
Данное требование отличается от описанного выше с точки зрения пользователей, тем, что роботы поисковых систем не скачивают графику, а только код страницы. При этом поисковые системы не индексируют часть кода страницы, превышающей некоторое определенное значение, различное для разных поисковых систем. Для «Рамблера», к примеру, эта цифра составляет 200 килобайт. Оптимальным для продвижения страницы в поиске можно назвать любое значение размера ее кода из диапазона 5-80 килобайт.
Наличие больших объемов JavaScript кода, таблиц стилей CSS на страницах сайта могут отрицательно сказаться на поисковом продвижении этого сайта, так как опять же увеличивают размер страницы и время ее загрузки. Схожая проблема возникает и при использовании различных генераторов страниц HTML, как-то Cold Fusion, Front Page и др. Они генерируют очень много «лишних» тегов, также сказывающихся на размере страницы. Поэтому, наиболее правильным будет использование стандартных HTML – редакторов и размещение скриптов и таблиц стилей в отдельных подключаемых к веб-странице файлах.
Использование фреймов в структуре сайта значительным образом затрудняет поисковое продвижение сайта и от их применения лучше отказаться, ведь существующие на данный момент времени технологии таковы, что использование фреймов совершенно необязательно. Разработчики поисковых систем советуют включать в документы с фреймами HTML-тег noframes с текстом документа и ссылками.
Роботы поисковых систем способны частично извлекать данные из объектов Macromedia Flash. Однако сами тексты и некоторые гиперссылки flash-объектов не индексируются. Для сайтов, целиком состоящих из flash-объектов, рекомендуется создать HTML-копию и зарегистрировать ее в поисковой машине. Также, при использовании навигации на сайте, реализованной flash-технологиями, необходимо предусматривать в разработке дизайн-проекта навигационное меню с «прямыми» гиперссылками на страницы сайта.
При создании дизайн-проекта веб-сайта обязательно нужно предусматривать места, для размещения текстовых блоков и избегать создания так называемых «входных страниц» - небольших страниц, «предлагающих» пользователю перейти наконец-то на главную страницу сайта.
Смысл данной ошибки в отсутствии контраста между текстовыми элементами и фоном веб-страницы, а также в возможном наличии слишком мелкого шрифта. Еще хуже, если какие-либо элементы контента будут полностью совпадать по цвету с общим фоном, что может привести к исключению сайта из индекса поисковых систем, и, соответственно, невозможности его дальнейшего поискового продвижения (до снятия с сайта санкций).
Наличие нерабочих ссылок, то есть ссылок, при переходе по которым пользователь получает 404 ответ, и ссылок на пустые страницы типа «under construction» отрицательно сказывается как на поисковом продвижении, так и на имидже сайта.
Использование Flash в реализации навигации по сайту значительно усложняет процесс его индексации роботами поисковых машин. Поэтому рекомендуется либо дублировать навигационное Flash - меню «прямыми» гиперссылками на страницы сайта, либо отказаться от применения элементов Flash для навигации по сайту. К тому же, большое количество Flash-объектов на странице значительно увеличивает время ее загрузки, вызывая недовольство пользователей.
Проблема в том, что многие вебмастера размещают на странице текст, который не укладывается даже в 5-10 «прокруток» экрана. При этом, основные ключевые слова растворяются в общей огромной массе других слов, и страница теряет релевантность по этим ключевым словам в поисковых системах. Следует также помнить, что сайт – это своего рода книга. А книга не состоит из одной страницы, на которой выложена вся информация. У книги, также как и у сайта, есть главы, разделы, подразделы, разбитые постранично.
Использование фреймов – одна из самых грубых ошибок дизайна предназначенного для поискового продвижения сайта, серьезно это продвижение затрудняющая. И пусть многие утверждают, что тег noframes с содержание ключевых слов и ссылками – решение проблем с раскруткой «фреймового» сайта, все равно, использовать фреймы при верстки сайта не стоит. Благо, существует множество способов обойти данную проблему.
Зачастую, дизайнеры, увлекшись созданием красот внешнего вида веб-страницы, напрочь забывают о том, что кроме множества изображений, страница должна также содержать грамотно размещенный и удобочитаемый текст, так необходимый для успешного продвижения сайта в поисковых системах.
Данная ошибка сказывается также на скорости загрузки страницы, особенно при неоптимизированной графике и наличии большого количества анимации.
Клоакинг – от английского cloaking – маскировка, сокрытие. CSS-клоакинг текстов – есть маскировка HTML-тегов, увеличивающих релевантность документа по ключевому слову, посредством CSS, – каскадных таблиц стилей. К примеру, весь текст на странице, даже не относящийся к заголовку помещен в тег < H1>, для которого при помощи CSS создан стиль, точно такой же, какой имеет и обычный текст. Как результат – весь текст на странице является для роботов поисковых систем заголовком, а для рядовых пользователей – вполне обычным текстом. Налицо обман поисковой системы, за который ее модераторы могут наложить санкции на сайт в виде запрета его к индексации.
В настоящее время поисковое продвижение сайта является очень важным процессом, как для коммерческих, так и некоммерческих проектов. В связи с этим, зная некоторые требования к сайтам со стороны поисковых машин, многие «оптимизаторы» жертвуют дизайном в угоду поискового продвижения. С одной стороны, это правильно, так как это приносит прибыль компании-владельцу сайта. Однако если задуматься, то в конечном итоге сайт делается исключительно для пользователей, потенциальных и уже имеющихся клиентов, а не для поисковых систем. Здесь важно найти «золотую середину» между дизайном и поисковым продвижением сайта. Один из путей стремления к ней – это, очевидно, учет требований к веб-сайту как пользователей, так и поисковых систем.Как найти «золотую середину» - вопрос, который совместно должны решать дизайнеры, разработчики и маркетологи. А данный мастер-класс, надеемся, поможет им в этом.
Теги:
