Проваливший подготовку пусть готовится к провалу.

Бенджамин Франклин

Продолжаем публиковать в переводе небольшие рекомендации о том,  как избежать распространенных ошибок при создании сайта. Советы дает известный блоггер, ИКТ-консультант и знаток SEO-кошмаров Bart Dirks. В прошлом выпуске мы говорили о навигации сайта. Вторая  часть курса посвящена использованию графики.

 

Веб-дизайн, который грозит SEO-кошмаром

Ч. 2. Использование графики

Для продвинутых: в данной статье я не беру в расчет дизайнерские и концептуальные сайты. Для их создания и продвижения необходимы высокие навыки и развитое чувство прекрасного. Я же сосредоточусь на сайтах-работягах, которые должны выполнять конкретные задачи, поставленные их владельцами.

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

Поясню про проблемы ранжирования. Как правило, графика на таких сайтах (фотографии, картинки и прочие изображения) не проходит процесс подготовки к размещению в сети. Ее элементарно не уменьшают до допустимых размеров. В результате мы видим, например, что выкладываются фотографии размером до 3 Мб (а то и больше), в то время как их можно уменьшить до 50 Кб (а то и меньше), практически не потеряв в качестве. Это многократно сократит время загрузки страницы. И тут необходимо упомянуть, что время загрузки страниц – один из важнейших факторов при ранжировании сайтов поисковиками. Ни Google, ни Яндекс не допустят на высокие позиции сайты, которые загружаются дольше 2-3 секунд.

Воспользуйтесь любым редактором (можно хоть Paint, ведь это не мейнстрим, но обычно используют Photoshop) и уменьшите размер изображения, либо попробуйте просто сохранить его в формате gif вместо jpg (в этом случае можно слегка потерять в качестве картинки). Если нужно сохранить качество, используйте инструмент компрессии при сохранении изображения в jpg.

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

Вредные советы и полезные пояснения:

Чем больше картинок, тем лучше! Их все любят! И красочно так становится…

Не следует использовать слишком много графики на страницах (если, конечно, это не страница с фотоальбомом), особенно на главной странице. Это будет сильно отвлекать пользователя от усвоения информации. Помните, что больше – не обязательно лучше. Тут, скорее, работает правило: чем проще – тем лучше.

 

Вшивайте текст сразу в изображения! Меньше придется копаться в админке.

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

 

Заливайте изображения на сайт, не обрабатывая, как есть! Зачем париться.

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

 

Если ваши изображения являются авторской собственностью, накладывайте на них водяные знаки для защиты от копирования.

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

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

 

Продолжение:

Веб-дизайн, который грозит SEO-кошмаром Ч. 3. Цвета и шрифты

Веб-дизайн, который грозит SEO-кошмаром Ч. 4. Контент

 

Предыдущие материалы:

Веб-дизайн, который грозит SEO-кошмаром Ч. 1. Навигация сайта