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

Особняком стоит фавикон (favicon) (от англ. favorites icon) – значок для «Избранного». Это иконка, которая выводится в браузере слева от адресной строки при загрузке некоторых сайтов. Вернее, не абстрактных «некоторых», а тех, чьи веб-мастера озаботились созданием соответствующего файла.

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

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

Хотя постепенно браузеры учатся воспринимать фавиконы в разных графических форматах, лучше остановиться на старом добром. ico. Зато ограничение по размеру такой иконки (когда-то допускался единственный – 16 × 16 пикселей) снято; главное, чтобы значок был квадратным и, будучи ужатым до 16 × 16, оставался различимым.

Базовые требования к фавикону просты как тетрис: чем меньше цветов, тем лучше; даешь контрастность; категорическое нет мелким деталям.

Инфографика – это элегантный способ подачи информации, в котором сплавлены воедино графика и текст. Она выручает, когда необходимо емко и выразительно показать большие объемы данных или описать сложное предметное поле, не отпугнув читателя. Божья искра в инфографике способна разогреть тех, кто пока прохладно относится к предложениям на вашем сайте. Простейший пример – «Карта музыкальных предпочтений пользователей “Яндекс. Музыки”» (см. блок «Полезно знать»), которая была широко растиражирована в Рунете и попутно подхлестнула интерес к самому сервису.

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

Ценность инфографики и ее успех определяет сумма факторов.

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

• Полезность. В фундаменте такой работы должно лежать послание, поддающееся четкому формулированию. Пример дельной инфографики – схема, наглядно показывающая многообразие разъемов у современной техники. Да, это edutainment[20]20
  Edutainment (от англ. education и entertainment – «образование» и «развлечение» соответственно) – способ игровой подачи информации, в первую очередь обучающей.


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

Рассказываете о своем бизнесе? Будьте самокритичны: не факт, что статистика использования канцтоваров вашими региональными филиалами заставит ахнуть кого-нибудь, кроме вашего офис-менеджера. Как эти данные ни визуализируй.

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

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

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

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

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

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

• Расчет на верную аудиторию. Ориентируйтесь на те информационные потребности и когнитивные способности людей, которым адресуете инфографику. Или проще: чтобы их увлекало и чтобы им было понятно. Молодым матерям наверняка будет любопытно узнать, сколько времени ежегодно тратят на просмотр тех или иных мультфильмов дети в разных странах. А их мужьям – еще и сколько заработали на каждом мультбренде правообладатели.

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

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

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

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

Желаете затмить конкурентов и в случае удачи прогреметь на весь российский интернет? Вам прямая дорога в веб-студии, которые, помимо всего прочего, специализируются на создании инфографики, например «Турбомилк» (www.turbomilk.ru). Успела в Рунете сформироваться и когорта независимых профессионалов; их контакты вы найдете в тематических блогах и онлайн-изданиях. Будет дорого, но впечатляюще.

Немало существует и онлайн-сервисов для создания инфографики, значительная их доля – полностью или частично бесплатные. С ними, чуть «пристрелявшись», сладите и вы сами. В качестве примеров назовем Creately.com, Ease.ly, Infogr.am и Piktochart.com. Из десктопных продуктов можно выделить Tableau. Разумеется, такие решения по определению накладывают ограничения на креатив по части формы подачи материала, но по первому времени вам будет достаточно. А распробуете их и почувствуете отдачу от использования инфографики – впору будет взяться за дело всерьез и начать давать заказы «титулованным» инфографам.

«Рассылка SeoPult. Выпуск № 26: оптимизация сайта для “Яндекс. Картинок”»: http://seopult.ru/subscribe.html?id=26

«Рассылка Setup.ru. Выпуск № 33: фотобанки»: http://www.setup.ru/client/subscription/71

«Бизнес фотостоков: с миру по снимку»: http://seopult.tv/programs/moneymaking/terentieva_irina_photostocks/text/

О перспективе в иконках: http://ru.iconka.com/put-in-a-word-for-a-perspective/

«От дизайна иконок к созданию шедевров»: http://naikom.ru/blog/archives/5101

«21 пример иконок в веб-дизайне»: http://www.yellowdesign.ru/ikonki-v-veb-dizayne/

Как правильно делать фавиконы: http://netcoding.ru/articles/web-design/idealniye-ikonki-dlya-saita/

Карта музыкальных предпочтений пользователей «Яндекс. Музыки»: http://company.yandex.ru/researches/figures/2013/ya_music_13.xml

Портал об «инфографике по-русски»: http://5coins.ru

Журнал «Инфографика»: http://infographicsmag.ru

Инфографика «Втыкайте правильно»: http://infografics.ru/all/vtykayte-pravilno/

Data Visualization (один из самых авторитетных мировых сайтов об инфографике и визуализации данных): http://datavisualization.ch

«Десять советов по созданию качественной инфографики»: http://www.cmsmagazine.ru/library/items/graphical_design/jj_2011-10-25/

Подборка книг об инфографике: http://infographer.ru/category/library/

«Pixel art для начинающих»: http://gamin.ru/blog/art/4849

Глава 15. Виджеты: иностранцы у вас на службе

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

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

Виджет – по существу филиал стороннего, «иностранного» сервиса в ваших интернет-владениях. Отсюда вытекают как его достоинства, так и недостатки. Что приятно, вожделенную функциональность реализовали за вас, и при благоприятных обстоятельствах внедрить ее на сайт толковому веб-мастеру – дело на час-другой. Экономия на веб-разработке налицо. Сами виджеты в массе своей бесплатны или предполагают умеренную абонентскую плату. Ценно и то, что многие такие блоки привычны пользователям и вызывают у них доверие.

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

Внештатных ситуаций тоже никто не отменял. Подчас от добротности самого сайта ничто не зависит: возникает вопрос совместимости. Особенно часто встает задача «подружить» какой-нибудь хитрый виджет с CMS. А чтобы сообразить, как, например, «открыть глаза» движку LiveStreet на карты 2ГИС, если те не отображаются на сайте, нужно быть веб-мастером с прямыми руками и непраздным умом. И с опытом работы с LiveStreet. Так что вам нужно либо иметь такого специалиста в штате, либо быть на быстрой связи с пунктуальным и исполнительным фрилансером.

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

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

Если ваш сайт имеет хоть какой-то выход в офлайн, то вы наверняка сталкивались с необходимостью информировать пользователей о том, как добраться до вашего офиса или точки выдачи товаров. Раньше карты проезда, как правило, рисовал дизайнер, и за редким исключением они были статичными и не отображали маршрут (например, от метро до искомого здания). В наши дни большинство веб-мастеров, идущих в ногу со временем, отдают предпочтение готовым картам, которые предоставляются крупными интернет-компаниями. Конечно, вы вольны попробовать сделать креативную схему проезда, чтобы вызвать эмоциональный отклик у посетителя, но вообще так изощряться нужно разве что тем, кто в силу собственной специализации вынужден выпячивать эту самую креативность, в первую очередь студиям дизайна, архитектурным бюро и т. д. и т. п. А если путь к вашему офису изобилует препятствиями и лежит через труднопереходимые транспортные магистрали, притом что имиджевый аспект сайта крайне значим, не помешает разориться на интерактивную карту, на которой будут в деталях показаны особенности дорожного движения и продемонстрированы способы подъезда к зданию на автомобиле, равно как и пешие маршруты (см., например, http://www.aorb.ru/contacts/shema_proezda/).

И все-таки в девяти случаях из десяти разумнее использовать унифицированное готовое решение. Тем более когда у вас добрый десяток точек самовывоза заказов и три офиса. Обычно задействуются карты «Яндекса» (рис. 31) или Google, реже – 2ГИС. Сравнительный экспресс-анализ первых двух вариантов вы найдете в 23-м выпуске рассылки Setup.ru (см. блок «Полезно знать»). Непременно при создании карты в «Яндексе» или Google привяжите ее к своей организации в официальном порядке: эта нехитрая мера даст вам преимущества по сравнению с конкурентами в поисковой выдаче.

^{Рис. 31. Интерфейс конструктора карт «Яндекса»}

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

Обязательно проверьте, как отображаются карты на экранах мобильных устройств.

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

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

Если же посетитель по каким-либо причинам не ринулся оформлять заказ онлайн, а хочет без лишних манипуляций связаться с вашим менеджером и «поговорить голосом», то ему может быть полезна функция моментального, притом бесплатного для него звонка с сайта. Таких сервисов немало, среди самых известных – Zingaya (www.zingaya.ru) и MySiteCalls.me.

С одной стороны, люди в Сети любят давать оценку всему и вся. С другой – им, как правило, лень совершать лишние манипуляции, чтобы вынести свой вердикт. А те, кому не лень, к сожалению, чаще движимы отрицательной мотивацией и жаждут излить свое недовольство товаром или услугой. Дать голос людям с конструктивным настроем и унять раздражение «рассерженных покупателей» в зародыше помогают виджеты обратной связи.

В числе наиболее популярных в Рунете – бесплатный Reformal.ru. С его помощью легко наладить сбор откликов на ту или иную тему, внедрить голосование для пользователей и т. д. Вы вольны включить или отключить модерацию поступающих на ваш сайт сообщений, структурировать отзывы в удобном для себя виде, например объединив поданные двумя-тремя юзерами сходные идеи, показывать людям статус их запросов («Выполнено», «Делается», «Отклонено» и пр.). Возможна сегментация того, что вы получаете посредством обратной связи: благодарности, вопросы, идеи, проблемы – в разных рубриках.

Набирающий обороты сервис Copiny (http://copiny.com/) – строго платный. Решая по большому счету те же задачи, он предлагает дополнительные возможности, в частности аналитику по отзывам и работе с ними, что небесполезно для крупного бизнеса с бурным потоком сообщений от клиентов.

Кнопка такой продвинутой «книги жалоб и предложений» может располагаться внизу сайта. Другое распространенное воплощение виджета – выезжающая сбоку панель (сайдбар).

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

Чем проще и нагляднее вы подаете информацию, тем вероятнее, что люди не просто к вам потянутся, но и будут делать на сайте то, что вы от них хотите. Прекрасный способ заострить внимание потенциальных клиентов на вашем предложении – видео. Если у вас информагентство или онлайн-кинотеатр, то, понятное дело, вам разумнее использовать плеер собственной разработки. Тем же, кому видео служит лишь одним из инструментов привлечения аудитории, советуем остановиться на виджетах видеохостинга YouTube или, к примеру, пока чуть менее привычного российскому пользователю Vimeo. С помощью коротких роликов удобно показывать во всей красе сложные товары. Допустим, любителю охотничьих ножей важно понимать, как лежит в ладони рукоять той или иной модели, как смотрится клинок и т. д. Если вы предоставляете онлайн-сервис, продемонстрируйте в коротенькой обучающей записи, как правильно им пользоваться.

У вас на сайте запланировано много видео, встраивать в каждом углу коды YouTube по каким-то причинам не хочется, а на разработку плеера бюджета нет? Приемлемый выход – «арендовать» проигрыватель, предварительно собрав подходящий вам функционально и внешне блок в конструкторе. Такой сервис предлагает, наряду с другими достойными компаниями, Uppod.ru, чей плеер, в частности, использует онлайн-телевидение SeoPult.TV, на передачи которого мы многократно даем ссылки в нашей книге.

Развлекательным и медиапроектам, вполне возможно, подойдут циклические микроролики, сделанные с помощью Coub.com: в силу небольшой продолжительности они загружаются в мгновение ока, а поскольку изначально ассоциируются с приятным веселым контентом, способны «зацепить» посетителя; иногда ими в порядке эксперимента можно попробовать заменить 3D-фотографии (см. главу 14 «Контент, часть II: графика, фотографии»).

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

Во-первых, соцсети предоставляют веб-мастерам свои «родные» средства для того, чтобы посетители сторонних сайтов могли лайкать материалы или делиться ими собственно в соцсетях («шэрить»; от англ. share – «делиться»).

Во-вторых, существуют независимые сервисы «все в одном», которые предлагают к установке виджеты, объединяющие кнопки многих соцсетей сразу (их набор варьируется). Из массива сервисов такого рода мы выделим AddThis (www.addthis.com), Pluso.ru и Uptolike.ru, а также блок «Поделиться» от «Яндекса» (http://api.yandex.ru/share/).