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

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

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

• Морально устарел. Интернет – ультрадинамичная среда, и без чуткого креативного вмешательства сайты в ней с течением времени закономерно теряют актуальность. Во-первых, беспрерывно сменяют друг друга и мутируют тенденции веб-дизайна – отчасти ввиду технического прогресса (открыт стандарт HTML5, начат выпуск ноутбуков с Retina-дисплеями, благодаря внедрению широкополосного доступа упростилась загрузка «тяжелого» контента и т. д.), не без влияния успехов или неуспехов отдельных топовых веб-проектов, но большей частью из-за суммы других факторов, разобраться в которых не проще, чем в подводных течениях мировой моды. А обычные пользователи, не будучи экспертами по юзабилити, удивительным образом интуитивно схватывают на лету, что современно, а что отживает свой век: «дряхлость» видят за версту.

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

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

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

• Перестал соответствовать реалиям вашего бизнеса. Звучит как приговор, но обычно дело обстоит с точностью до наоборот. Вы провели ребрендинг и у вас новый фирменный стиль? Вы сменили сферу деятельности? Значит, раньше или позже редизайну быть.

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

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

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


[Закрыть] неудобная, сайт медленно грузится, двухуровневое меню сделано на JavaScript, рубрик в нем слишком много, и в нужный пункт трудно попасть мышкой; зато с посадочных страниц высокая конверсия, больше трети посетителей дочитывает наши длинные статьи до конца, и средняя глубина просмотра – пять страниц, очень убедительна страница с отзывами (многие пролистывают ее на все три экрана вниз, и с нее часто кликают на «Оформить заказ»). Исходите из совокупности факторов.

В обязательном порядке пользуйтесь системами веб-аналитики: LiveInternet, «Яндекс. Метрикой», Google Analytics. Они покажут вам картину поведения аудитории сайта на макро– и микроуровне: общую посещаемость, длительность визита, глубину просмотра, данные конверсии, показатель отказов и т. д. Динамика статистических метрик помогает сформулировать большую часть проблем на сайте. Подробнее о них написано в главе 17 «Веб-аналитика: иди и смотри, смотри и иди».

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

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

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

Сайт до и после редизайна – все равно что новая книга маститого беллетриста на фоне остального его литературного багажа: найдутся не только те, кто будет восторгаться эволюцией авторских взглядов, но и беспощадные критики. Щекотливость ситуации в том, что на изменения в дизайне и навигации наиболее остро реагируют самые лояльные и активные пользователи интернет-ресурса. Причина тому психологический феномен импринтинг – глубочайшее закрепление набора эмоциональных реакций на объект при первом столкновении с ним. Даже если в силу обстоятельств объект был выбран вопреки естественному порядку вещей, поведенческий автоматизм сохраняет устойчивость. Как показал опыт Конрада Лоренца, птенцы серого гуся, если им показать в первые минуты жизни вместо матери катящийся мячик, по зову инстинкта начинают считать его своей родительницей и следовать за ним. Отсюда другое, народное название явления – «синдром утенка». Такого рода искажение восприятия возникает и у тех, кто давно работает с вашим сайтом и настолько свыкся даже с его слабыми местами, что готов отстаивать их как «не баг, но фичу». В первую голову это касается сервисов.

Вы в ответе за тех, кого приручили, так что игнорировать их противоречивые чувства не выход. Скорее кивок в сторону надписи «Выход». Во-первых, делайте все, чтобы сайт модифицировался плавно, с сохранением преемственности в стиле и интерфейсах. Версии 2003 и 2013 годов могут радикально отличаться одна от другой, однако любые две «соседние» (допустим, сделанные в 2006 и 2008 годах) должны иллюстрировать поступательный прогресс (рис. 20 и 21). Приблизительно как фотоснимки человека с годовым интервалом – до и после похудения. А не как положенные рядом кадры «Лешенька в яслях» и «Алексей Никифорович празднует серебряную свадьбу». Вспомним, как выход операционной системы iOS 7 породил раскол в стане верных поклонников гаджетов Apple или как «плиточный» интерфейс Windows 8 поставил в тупик даже продвинутых пользователей. Как в спортивной ходьбе: слишком резкий и длинный шаг – и не дай бог дисквалификация.

Во-вторых, ради «староверов» рационально будет поставить на новом сайте ссылку на старую версию, например разместив ее на поддомене вида old.site.ru. На www.site.ru четко укажите, когда произойдет окончательный переход на новый дизайн, а на old.site.ru разместите яркую, хорошо заметную ссылку с призывом перейти на более актуальную версию сайта.

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

^{Рис. 20. Портал Banki.ru до редизайна…}

^{Рис. 21.…и после редизайна. Изменения заметны, но в общем стиле и интерфейсах сохранена преемственность. И, как полагается, для консерваторов есть ссылка на старую версию}

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

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

• Учитывайте новые веяния в веб-дизайне. Не нужно слепо копировать популярные приемы и гнаться за модой. Изучите перво-наперво сайты в вашей отрасли как российские, так и зарубежные. Мониторинг конкурентов – это увлекательно и полезно: обращайте внимание на их логотипы, графические ходы, структуру страниц, тексты. Следите за общими и нишевыми трендами дизайна (см. главу 9 «Дизайн сайта: рационализм в каждом “вау!”»), чтобы не остаться за бортом. Однозначные директивы по части оформления сайтов немыслимы: задача придать современный облик веб-проекту, каким бы тот ни был, допускает великое множество решений. С одной стороны, мы наблюдаем глобальный крен в сторону минимализма, с другой – также в обиходе «излишества» наподобие «вдавленного» текста, необычных геометрических форм, глубоко детализированных иллюстраций, зубчатых кромок и т. д. По одну руку – нарочито плоские и аскетичные интерфейсы Google, по другую – имитация реальных поверхностей и текстур у Apple (по крайней мере, до конца 2013 года).

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

Делайте скидку на региональные особенности. Так, в ряде стран Юго-Восточной Азии тщательно выверенная «старообразность», наоборот, способна повысить доверие к массовому сайту, поскольку косвенно свидетельствует о его длительной истории.

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

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

• Не злоупотребляйте технологическими инновациями. Хрестоматийный пример: если сделать меню исключительно на JavaScript, то пользователи, у которых нет соответствующего плагина или он отключен, получат от ворот поворот, а у поисковых роботов возникнут проблемы с индексацией. Старайтесь обходиться тем, что есть. Flash, JavaScript и AJAX – в тех дозах, которые необходимы для жизнедеятельности проекта.

И конечно, не делайте сайт полностью на JavaScript или Flash. Нужна анимация? Встраивайте фрагменты на том же Flash (файлы формата *.swf) в HTML-код с помощью тегов object или embed.

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

А если перевести сайт на некую систему управления контентом все-таки нужно, непременно уточните, насколько та приспособлена к поисковой оптимизации.

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

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

Если ваш сайт сделан по старинке на HTML-таблицах, воспользуйтесь случаем и перейдите при редизайне на каскады (CSS).

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

Итак, ситуация: вся структура – иерархия каталогов, расширения файлов и т. д. – перелопачена, и большая часть страниц получила новые адреса. Однако именно старые URL проиндексированы в поисковых системах, на них, возможно, ведут ссылки с других сайтов (так называемые бэклинки). Сохранить обе страницы, старую и новую, неприемлемо: во-первых, возникнет путаница, во-вторых, у поисковых роботов такое же отношение к дублям, как у Нео к агентам Смитам. Лекарство существует, и называется оно постоянным редиректом, или редиректом 301, или переадресацией 301. Через настройки в файле-конфигураторе. htaccess, находящемся на веб-сервере, мы дает понять роботу, что страница перемещена в иное место, а посетитель, открывший старый URL, автоматически переправляется на актуальный. Имейте в виду, при правильном редиректе «вес» старой страницы (тИЦ в трактовке «Яндекса») постепенно передается новой. Поэтому постоянная переадресация пригодна для страниц, которые приводят на сайт трафик (например, используются в рекламе), обеспечивают конверсию, имеют обратные ссылки.

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

В случае когда требуется масштабная замена интернет-адресов (например, при переходе с одного движка на другой), на веб-сервере можно задействовать модуль mod_rewrite, который обеспечивает гибкое преобразование адресов, в том числе по сложным шаблонам. Например, сноровистому веб-мастеру ничего не стоит сделать, чтобы любой URL вида www.site.ru/product.php?id=226 превращался в приятный глазу и легко запоминаемый www.site.ru/product/226, а при обращении к файлу формата. html в адресной строке загружалась страница с расширением. htm. Собственно, такую подмену резонно использовать и когда некий URL на старой версии продвигался, служа точкой входа на сайт, но после редизайна требуется выдавать посетителю посадочную страницу с новой версии.

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

Не вешайте редирект со всех страниц старой версии сайта на одну нового.

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

• Следите за «SEO-здоровьем» сайта. Старайтесь, чтобы существующие наработки по части оптимизации при малейшей возможности были предельно бережно перенесены в новую версию сайта. Более подробную информацию вы найдете в главах 8 и 25 «SEO-friendly: дай себя найти» и «Ссылочное продвижение: масса с изюмом», а также в блоке «Полезно знать» в конце этой главы.

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

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

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

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

Тонкую подстройку на финальной стадии редизайна удобно выполнять с помощью A/B-тестирования (см. главу 2 «Создание прототипа: анатомия сайта»). Показывая первой половине посетителей одну страницу, второй половине – другую страницу с единственным отличием от первой (допустим, разница заключается в расположении какого-то блока), вы оцениваете реакцию «испытуемых» и выбираете оптимальный применительно к вашему сайту вариант.

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

Контролировать состояние интернет-ресурса нужно постоянно, проводя капитальную ревизию каждые полгода-год. Ну а облик и устройство сайта, как мы уже говорили, меняют в среднем раз в полтора – три года.

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