Текст книги "Создание сайтов"

«Рассылка SeoPult. Выпуск № 112: руководство по написанию эффективной статьи»: http://seopult.ru/subscribe.html?id=117

Интервью с Андреем Соловьевым, основателем Babyblog.ru, в программе «Рунетология»: http://runetologia.podfm.ru/371/

«Владельцам контента» («Яндекс. Помощь»): http://help.yandex.ru/webmaster/?id=1120755

«Google для авторов»: https://plus.google.com/authorship

«Защита уникального контента на сайте» (расшифровка передачи на SeoPult.TV): http://seopult.tv/programs/seo/zaschita_unikalnogo_kontenta_na_sayte/text/

«Как защитить интеллектуальную собственность в Рунете (расшифровка передачи на SeoPult.TV): http://seopult.tv/programs/other/shinkarenko_intell_prava_1/

«Семь способов определить хостера сайта»: http://habrahabr.ru/post/91278/

«Как контент, производимый пользователями, изменяет SEO»: http://lovim.net/2011/11/kak-kontent-polzovateley-izmenyaet-seo/

«Контент для сайта: у кого заказать и как проверить?» (Oborot.ru): http://oborot.ru/article/557/11

Глава 14. Контент, часть II: графика, фотографии

Современный Веб насквозь визуален. По той простой причине, что наконец-то при нынешнем уровне программных и аппаратных технологий… может позволить себе быть таковым: в Интернете зрительное восприятие – в безоговорочном приоритете. Несмотря на бум сенсорных дисплеев, по-настоящему пощупать созерцаемое на них нельзя, как бы ни стремились разработчики имитировать в интерфейсах реальные физические процессы; так, бегунок в Mac OS «пружинит», если с разгону прокрутить страницу в браузере до упора. Ну а видео и аудио на приличных сайтах без команды пользователя не открываются – дурной тон.

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

Графические образы помогают закрепить контакт пользователя с сайтом и развить его в полноценное взаимодействие. Большие массивы текста – «простыни», – особенно на коммерческих сайтах, пользователи имеют обыкновение игнорировать, максимум бегло проглядывают. Так что изображения наряду с остальными своими достоинствами элементарно помогают еще и разбавить «многабукаф»[18]18
  «Многабукаф» – искаж., пренебреж. от «много букв»: о длинных, часто нудных пространных текстах.


[Закрыть] и вообще достучаться до аудитории.

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

Немаловажны оригинальные добротные картинки и с точки зрения SEO: во-первых, поисковые машины учитывают качество графического контента на сайте (пока с точки зрения формальных характеристик, но все же), а во-вторых, пользователи, дольше задерживаясь на ваших страницах, забираясь «глубже» в недра сайта, волей-неволей улучшают так называемые поведенческие факторы ранжирования в поисковиках.

И наконец, на картинки стекается дополнительный трафик: разыскивая товар по изображениям в «Яндексе» или Google, клиент – если у вас и вправду хороший графический контент – увидит в выдаче ваши изображения и, желая знать подробности, перейдет на ваш сайт.

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

• Изображения должны иллюстрировать текст, а не быть дежурным довеском к нему. Как констатировал всемирно известный эксперт по юзабилити Якоб Нильсен, люди по преимуществу оставляют без внимания большие качественные картинки, которые вывешены на сайте «ради украшательства» и не релевантны его тематике. Им нужно зримое подтверждение того, что они узнают из текста. И кстати, избегайте чересчур ярких и пестрых фотографий: ваша задача – привлечь внимание к контенту в целом, а не отвлечь внимание на одну его единицу.

• Следите за качеством картинок и за их «весом». Люди в хорошем смысле слова избалованы контентом. Безотчетно они научились различать в Вебе изображения качественные и некачественные: картинки «пережатые», размытые, с искажениями, плохо обрезанные – жирный минус сайту. Примерно как прийти на заключение многомиллионной сделки с нестрижеными ногтями, обдавая окружающих запахом перегара. Вместе с тем графический контент не должен быть и слишком «тяжелым». Фотографии «весом» более 200–250 Кбайт нежелательны: такие «вериги» сайту нести ни к чему.

• Старайтесь использовать изображения, не диссонирующие с дизайном сайта. На сайте авторемонтной мастерской гротескные туманные пейзажи в духе Silent Hill будут выглядеть чужеродно. Разве только вы занимаетесь починкой винтажных машин или «бэтмобилей».

• Апеллируйте к эмоциям посетителей сайта. Показывайте им не просто товар, не просто предложение, но то, чего оно позволит им достигнуть. Продаете круглые батуты? Обыкновенная фотография любого из них, хоть четырех, хоть пяти метров в поперечнике, ничего не скажет ни уму, ни сердцу потенциального покупателя. Зато если показать, как на нем резвятся отец и маленький сын, причем запечатлеть их в высшей точке прыжка, сразу станет понятно: да, вот на столько метров над поверхностью можно взмыть (ого!); нет, защитная сетка достаточно высока и страхует тебя в любой ситуации; да, это семейное развлечение, и не то чтобы очень дорогое.

• Помните о SEO. В HTML-коде страницы, напомним, придавайте всем изображениям атрибуты alt и title. И конечно, всеми силами старайтесь использовать уникальные иллюстрации и снимки. Не пренебрегайте также простыми методами поискового продвижения картинок. Советуем прочесть 26-й выпуск рассылки SeoPult («Оптимизация сайта для “Яндекс. Картинок”», ссылка – в блоке «Полезно знать»): хотя материал был написан сравнительно давно, большая часть его рекомендаций по-прежнему актуальна.

Не стоит паниковать, если ваши уникальные снимки были скопированы конкурентами. Главное, что поисковые системы проиндексируют их впервые на вашем сайте и будут считать именно его источником фотографий. Впрочем, можете поставить на каждое фото свои фирменные «водяные знаки» (watermarks) – название компании, адрес сайта и т. д., хотя в четырех случаях из пяти они изрядно портят изображения.

Оптимальный вариант – ограничиться собственными иллюстрациями. Таким образом, у вас гарантированно будет уникальный графический контент – и вы предстанете перед публикой «весь в белом» морально и юридически. В отдельных случаях и выбора нет: было бы странно выкладывать на сайте ресторана фото чужих интерьеров.

«Собственные» не равнозначно «сделанные собственноручно». Ничто не мешает вам заказать предметную съемку фотостудии или фрилансеру, имеющему опыт подобной работы, либо обратиться за помощью к друзья-фотолюбителям.

Если вам нужны изображения не для интернет-представительства бизнеса, а, скажем, для личного блога, задача упрощается. В поиске Google по картинкам можно выбрать опцию «Искать изображения с лицензией на использование в некоммерческих целях» (в «Расширенном поиске по картинкам»). В конце концов, и известный в Рунете блог Bigpicture.ru с момента своего основания использовал фотографии из открытых источников, указывая авторство снимков. Хотя мы бы не рекомендовали вам идти кратчайшим путем.

Зачастую от головной боли, связанной с организацией съемок, избавляют фотобанки – своего рода магазины изображений, перво-наперво фотографий. Такого рода площадки с их плюсами и минусами дотошно разобраны в 33-м выпуске рассылки Setup.ru (см. блок «Полезно знать»). Среди самых известных в Рунете – Fotolia.com (рис. 28), iStockPhoto.com. Lori.ru, Depositphotos.com, Shutterstock.com и т. д. Что важно эти сервисы гарантируют определенный уровень качества материалов. А кроме того, здесь обычно вы вправе приобрести снимки конкретного полюбившегося вам автора, вернуть себе деньги, уплаченные за не понравившуюся вам в итоге фотографию, при желании найдете весьма необычные и прихотливые сюжеты по рубрикам и тегам, да и цены умеренны (единицы, реже – десятки долларов за снимок; зависит от типа лицензии, области применения и т. д.). В настоящее время веб-мастера и владельцы сайтов чаще имеют дело с таким подвидом фотобанков, как микростоки, которые продают право на использование иллюстраций и снимков за скромные деньги – и обычно по лицензии Royalty Free (покупка с единовременной оплатой; права на фотографию остаются у автора, притом она может быть продана не одиножды разным людям; использование изображения покупателем так или иначе ограничено – зачастую максимальным графическим разрешением или предельно допустимым количеством копий).

^{Рис. 28. Интерфейс поиска фотографий в фотостоке Fotolia по запросу «интернет-маркетинг»}

Кстати, при работе с фотобанками имейте в виду, что посетителей сайтов гораздо больше привлекают лица обычных людей («таких же, как они» или чуть лучше) в живой обстановке, чем постановочные снимки профессиональных моделей в неестественно вылизанных интерьерах.

Обратите внимание

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

По распространенному мнению, картинки из фотостоков воспринимаются поисковиками хуже, чем оригинальные снимки и рисунки. Смеем вас заверить, это заблуждение. Руководитель службы Google по борьбе с веб-спамом Мэтт Каттс в середине 2013 года заметил в одном из своих обучающих видеороликов, что на сегодняшний день эта поисковая система не понижает ранжирования сайта за использование изображений из фотобанков.

Обратите внимание

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

Фотографии товаров на площадках электронной коммерции – отдельная история. Заповедь первая и главная: показывайте те качества товара, которые критически важны для пользователя. Оптимально, чтобы по умолчанию выводилась одна крупная фотография и превью еще нескольких (если мы говорим о надетом на модель предмете гардероба, то, допустим, в профиль, в три четверти и т. д.) – в других ракурсах, в ином масштабе и т. д.

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

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

Многие виды продукции требуют функции увеличения изображения – «лупы», которая позволяет разглядеть фактуру предмета и его мельчайшие детали. Как, например, в интернет-магазине Wildberries.ru (рис. 29). Это без пяти минут стандарт де-факто, по крайней мере для онлайн-торговцев одеждой и обувью.

Другой способ «приблизить» товар к покупателям – задействовать на сайте трехмерную фотографию. Пока это удовольствие недешевое ($15–40 за единицу), однако с течением времени такие фото окупаются сторицей: потенциальный покупатель буквально крутит объект мышкой, разглядывая его то под одним, то под другим углом, а ведь давно известно, что чем дольше человек держит привлекающий его товар в руках, тем мучительнее с ним расстается. Услугу создания 3D-фотопанорам оказывает немало студий, например Photo3dsite.com.

^{Рис. 29. Разглядываем ботинки буквально под лупой на Wildberries.ru}

Обратите внимание

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

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

• Упрощать навигацию. Часто значки – это маркеры, графические подсказки, помогающие быстрее ориентироваться на сайте. Так, подавляющему большинству населения еще с 1990-х годов знакома иконка дискеты, означающая либо «Сохранить», либо «Скачать». И хотя флоппи-диски давным-давно устарели, они понятны всем и каждому, кроме разве что школьников, только-только начавших работать с компьютером и не заставших эпоху «гибких магнитных носителей».

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

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

^{Рис. 30. С сайта хостинг-провайдера Rackscape.com: иконками можно выразить даже нетривиальные понятия и упростить их восприятие аудиторией}

Применимы иконки и в маркированных списках: порой куда удачнее вместо стандартного буллета использовать зеленую галочку, например, когда перечисляются обстоятельства, при стечении которых следует выбрать описываемый продукт. Знаем, звучит глуповато, но это так: людям приятно видеть такой «заполненный чеклист», они невольно считывают его как отчет о выполненной за них работе.

• Обозначать действие. Если бы любая активность в веб-интерфейсах осуществлялась по нажатии на кнопки с пояснительными надписями, то сайты выглядели бы безобразными скопищами разноразмерных прямоугольников. В сервисе микроблогов Twitter пиктограмма с листом бумаги и гусиным пером архаична, зато недвусмысленно предлагает написать новый твит, а шестеренка явно приглашает заглянуть в «Настройки».

• Призывать к действию. Необязательно, чтобы иконка апеллировала к действию, которое выполняется на сайте. Зеленый значок трубки рядом с номером телефона на сайте онлайн-сервиса «МоеДело» прекрасно справляется со своей задачей: «Бери и звони, мы готовы ответить».

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

Подвид иконок – нетекстовые, графические смайлики, в том числе анимированные. Их применение оправданно там, где велика роль коммуникации между пользователями. Уникальные смайлики, отражающие специфику площадки (будь то грузоперевозки или гольф), ценятся участниками сообщества и, работая на постулат «у нас здесь своя атмосфера», повышают их лояльность к комьюнити.

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

• Выдерживайте единство стиля. Во-первых, недопустимо, чтобы иконки смотрелись чужеродно в дизайне сайта. Во-вторых, в самом наборе иконок должна прослеживаться общая линия. Хуже всего, когда в него было понадергано с миру по нитке. Отталкивайтесь от специфики своего веб-проекта. Какому-нибудь модному вебзину[19]19
  Вебзин (от англ. web magazine) – онлайн-журнал.


[Закрыть] подойдут ностальгические «псевдовосьмибитные» значки с крупными пикселями, соцсети для детей – трех-четырехцветные яркие иконки в трехмерной проекции, ну а строгому, но стильному онлайн-изданию – плоские, притом монохромные. Только не воспринимайте наш пример как аксиому и прямое руководство к действию: часто из сочетания условно несочетаемых компонентов и рождаются тренды.

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

Впрочем, как и в веб-дизайне вообще, в проектировании иконок наблюдаются две разнонаправленные тенденции. С одной стороны, благодаря техническому прогрессу стало возможным широкое использование детализированных реалистичных значков, чем славится (по крайней мере, до конца 2013 года) корпорация Apple, с другой – не менее популярны нарочито схематичные плоские пиктограммы, главные апологеты которых засели в Microsoft.

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

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

• Не гонитесь за оригинальностью. У наглядности в нашем случае приоритет перед креативностью. Часть иконок, отображающих широко распространенные в Интернете объекты, явления и действия, резонно сделать стандартными. Например, предложение напечатать документ нерационально иллюстрировать чем-либо, кроме значка с изображением принтера. Лупа – значит поиск. Тележка из супермаркета – значит «Корзина».

Небольшое отступление. Cлужба дорожной помощи Britannia Rescue выяснила, что 98 % водителей Великобритании не до конца понимают значение всех значков-индикаторов на приборной панели автомобиля. Нетрудно догадаться, что такое полузнание чревато дорожными происшествиями. В Вебе возможны менее трагичные, но нисколько не приятные ЧП, в том числе неслучившиеся продажи.

• Используйте иконки только там, где они упрощают жизнь посетителю сайта. Задайтесь вопросом, действительно ли значок служит опорой при навигации или при восприятии информации. От чрезмерного количества иконок пользователь, скорее всего, стушуется.

Упорство в мелочах (хотя внимание к ним похвально) способно сыграть злую шутку с дизайнером и плодами его труда. Так, в онлайн-издании TheNextWeb.com (TNW) есть развертывающееся меню All Channels, где предлагается выбрать рубрику (канал) и где название каждой из них сопровождается иконкой. Региональные новостные потоки на первый взгляд проиллюстрированы логично: контуры Африки и Австралии знакомы каждому мало-мальски грамотному человеку. Однако у TNW географическое разделение контента ведется не только по континентам, но и по странам, а также по группам государств. Вы распознаете «очертания Ближнего Востока», вырезанного из карты мира и поданного отдельно? Силуэт Канады навеки в вашем сердце? Между тем Канада и Ближний Восток находятся в правой части меню – там, куда в первую очередь смотрят девять из десяти посетителей. Смотрят – и дивятся.

• Учитывайте целевую аудиторию, на которую работаете. Использовать в качестве иконок дорожные знаки – забавный ход, но учтите, что эти самые знаки заметно разнятся от страны к стране. Если ваш сайт задуман в расчете на международную аудиторию, желательно сделать ставку на универсальные символы.

• Еще раз: иконка – вспомогательное средство. Она либо сопутствует тексту (например, названию раздела в меню), либо, как минимум, сопровождена подсказкой, которая возникает при наведении курсора на значок.

Нельзя, чтобы иконка давала посетителю сайта хоть малейший повод подумать, что она интерактивный элемент интерфейса. Если только она действительно не интерактивный элемент.

• По возможности придерживайтесь стандартных размеров иконок. Самые распространенные – 24 × 24, 32 × 32, 48 × 48 и 64 × 64 пикселей. Исторически сложилось так, что фавиконы (см. далее) ужимаются до 16 × 16.

• Заранее определите, иконки какого размера вам понадобятся. Обсудите это с дизайнером сайта. Как уменьшение, так и укрупнение готового значка чревато малоприятными графическими искажениями. Вдобавок – предупреждаем вас! – дизайнеры-профессионалы зачастую на просьбу бесплатно сделать еще две версии значка, «покрупнее и поменьше», реагируют нервным смехом: простым изменением размера в случае с иконками дело не обходится, необходима тонкая «доводка». За дополнительную плату.

Обратите внимание

Предпочтительно делать иконки с прозрачным фоном, чтобы в случае необходимости можно было разместить их где угодно.

Где брать иконки? С нашей точки зрения, если вы не стеснены в средствах, предпочтительно заказать их у дизайнера соответствующего профиля. Комплект иконок в веб-студии с крепкой репутацией обойдется вам, конечно, не дороже, чем все остальное хозяйство на сравнительно простом сайте, но на 60–90 тысяч рублей может потянуть. У фрилансера почти наверняка выйдет дешевле, но в таком случае вы должны быть вдвойне придирчивы в выборе исполнителя и тщательно изучать его портфолио. Зато, если иконки вам рисовал профи, они гарантированно будут вписываться в стиль сайта и работать на решение ваших бизнес-задач.

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

Есть сервисы, упрощающие поиск готовых иконок, включая www.iconsearch.ru и www.iconfinder.com: по крайней мере, у вас есть возможность предварительно изучить доступные варианты.

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