5 Web инструментов для улучшения доступности вашего сайта


Содержание

5 Web инструментов для улучшения доступности вашего сайта

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

Кроме людей, которым требуются вспомогательные технологии, существуют и другие люди, для которых это будет также справедливо. Например, технология Flash ещё недостаточно развита, чтобы она появилась на большенстве мобильных телефонах, даже такой мощный гаджет, как Apple iPhone не имеет и, скорей всего, никогда не будет её иметь. Всегда надо предусматривать альтернативные способы представления контента.

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

Актуальность web-доступности

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

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

Кому это надо?

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

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

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

Таким образом, ответом на вопрос «кому это надо?» является — «это надо всем, и в первую очередь это надо самим web-разработчикам, хотя они сами это часто не осознают».

Потенциальные рынки

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

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

Можно привести реальный пример из жизни:

В 2000 году британская сеть супермаркетов «Tesco» запустила проект по созданию отдельной версии своего сетевого продуктового магазина специально для людей с нарушениями зрения. После этого, по заявлениям официальных представителей «Tesco», годовая прибыль их сети выросла на 13 миллионов фунтов стерлингов. Таким образом, если бы компания «Tesco» не рассматривала людей с недостатками зрения, как потенциальных потребителей своей продукции, они бы упустили рынок стоимостью, как минимум, 13 миллионов фунтов стерлингов. К тому же следует учитывать и повышение статуса их бренда, так как демонстрация того, что вы реально заботитесь о каждом члене общества, может только улучшить имидж компании.

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

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

Поисковые системы

Поисковые системы не являются людьми. Часто, когда люди создают web-сайты, они делают это, не рассматривая, как их можно будет найти в Google, Yahoo, Яндекс и других аналогичных сервисах. Поисковые системы являются просто компьютерными программами, и они могут использовать для индексации сайта только ту информацию, которую смогут понять. Это делает их похожими на программы чтения экрана (screen readers), которые может использовать человек с недостатками зрения.

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

Юридический аспект

В ряде стран стандарты доступности web-ресурсов оформлены в виде конкретных законодательных норм. Например, в Великобритании, США, странах Европейского союза и других. Таким образом, разработчик сайта может столкнуться с реальными проблемами, если не позаботится о данном аспекте своего сайта. К тому же если всё это будет происходить в стране с судебной системой, где сильно развит институт морального ущерба, то иск по дискриминации инвалидов может составить несколько миллионов долларов США, что в любом случае обойдётся намного дороже, чем изначальное создание сайта в соответствии со всеми стандартами доступности, не говоря уже о возможном ущербе репутации компании после проигранного судебного дела.

Обзор стандартов web-доступности

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

Доступность Интернет-ресурсов достигается посредствам обычных технологий web-проектирования. Просто при их применении требуется следовать набору конкретных рекомендаций. Причём сразу стоит отметить, что сайт, созданный с учётом стандартов доступности, с дизайнерской точки зрения не будет иметь никаких отличий от сайта, разработанного без их применения. То есть вы ничего не теряете, а лишь приобретаете.

Ниже будет приведён краткий обзор основных стандартов доступности Интернет-ресурсов с указанием ссылок для их подробного изучения профессиональным web-программистом.

Рекомендации по доступности web-контента (WCAG), версия 1.0

Данный документ был разработан консорциумом «W3C» (http://w3.org), являющимся одним из основных органов стандартизации в Интернете. Его подразделение «Web Accessibility Initiative» (WAI) опубликовало первую версию своих рекомендаций по созданию доступных web-сайтов 5 мая 1999 года.

Рекомендации по доступности web-контента (англ. Web Content Accessibility Guidlines, сокращёно WCAG) являются наиболее широко используемым стандартом по обеспечению доступности в Интернете. Использование WCAG 1.0 было предложено рядом правительственных органов, включая Европейский союз и правительство Италии.

WCAG 1.0 является набором из четырнадцати рекомендаций, охватывающих цели, которые необходимо реализовать для получения максимально доступной страницы. В каждом пункте рекомендаций содержится ряд контрольных точек, которые составляют реальное содержание документа. В то время как рекомендации объясняют концепции, которые авторы имеют в виду, контрольные точки являются тем, что используется для проверки соответствия стандартам. Каждая из контрольных точек имеет приоритет от 1 до 3, чтобы указать на их важность. Чтобы соответствовать WCAG 1.0, необходимо удовлетворить всем контрольным точкам с приоритетом 1. Соблюдение всех контрольных точек с приоритетом 1 предоставляет рейтинг соответствия «A» (1A). Если вы удовлетворяете также контрольным точкам с приоритетом 2, то вы будете соответствовать рейтингу «AA» (2A). Если вы удовлетворяете всем контрольным точкам с приоритетами 1, 2 и 3, то вы будете соответствовать рейтингу «AAA» (3A), который является самым высоким.

Однако в современных условиях WCAG 1.0 несколько устарел, так как со времён 1999 года, стали активно применяться новые технологии, такие как JavaScript, ARIA Drag-and-Drop и другие. К тому же он изначально разрабатывался как часть пакета из трёх документов, где второй документ отводился для описания браузеров и вспомогательных программ доступности, например, screen reader-ов, а третий охватывал средства разработки, например, Dreamweaver, и CMS. Предполагалось, что большая часть работы по обеспечению доступности сайтов будет приходиться как раз на их долю. Однако общее признание из всех трёх получил лишь WCAG, описывающий только приёмы CSS. Таким образом, часто складывается ситуация, когда ожидания WCAG 1.0 в отношении агентов пользователей не удовлетворяются, поэтому даже полное соответствие WCAG 1.0 не гарантирует абсолютно доступности ресурса.

  • Официальная английская версия WCAG 1.0: http://www.w3.org/TR/WAI-WEBCONTENT/
  • Неофициальная русская версия «Руководство по созданию доступного веб-контента. Версия 1.0. Приемы CSS»: http://tiflocomp.ru/docs/wcag10_css.php

Рекомендации по доступности web-контента (WCAG) Samurai

26 февраля 2008 года группа разработчиков под руководством Джо Кларка (англ. Joe Clark), независимо от «W3C», опубликовала корректировки и расширения стандарта WCAG 1.0, получившие название WCAG Samurai. Данный документ предназначался для приведения WCAG 1.0 в соответствие современным реалиям web-технологий. Однако данный комплекс рекомендаций так и не получил широкого признания, так как не был поддержан консорциумом W3C, который в декабре того же года выпустил следующую версию WCAG.

Рекомендации по доступности web-контента (WCAG), версия 2.0

11 декабря 2008 года консорциум «W3C» опубликовал следующую версию рекомендаций — WCAG 2.0. Версия 2.0 отличается от 1.0 большей технологической независимостью, то есть данный комплекс рекомендаций в равной мере актуален для всех основных web-технологий: HTML, CSS, Flash и так далее.

В WCAG 2.0 используются те же три уровня соответствия, но общий подход к анализу ресурса несколько пересмотрен с целью получения большей универсальности стандарта. Он основывается на четырёх принципах доступности:

  1. Воспринимаемость:
    Люди должны получить доступ к контенту через ту среду, которая им доступна. Например, люди с нарушением зрения должны иметь возможность услышать контент.
  2. Взаимодействие:
    Люди должны иметь возможность взаимодействовать с приложением web или контентом в любых условиях.
  3. Понятность:
    Контент и интерфейс пользователя должны быть понятны всем людям, которые их используют.
  4. Надёжность:
    Любое предоставляемое решение должно быть широко доступно для использования на различных платформах или системах. Это должно остановить людей изобретать решения, которые большинство пользователей не смогут использовать, потому что оборудование/программное обеспечение ограничено или чрезмерно дорого.

Разумеется, не предполагается, что web-сайты будут удовлетворять абсолютно всем этим требованиям на 100%. Технология, которую имеет пользователь, также должна сделать часть работы. Например, ожидается, что screen reader будет читать страницы людям, которым это требуется, а не каждый web-сайт будет предоставлять аудио-версию своего контента. Однако в то же время ожидается, что web-сайт предоставит страницы, которые можно прочитать с помощью обычной программы чтения экрана.

WCAG 2.0 также отличается от WCAG 1.0 в техническом подходе. Так как стандарт более независим от технологии, и имеет дело с концепциями доступности, а не с конкретными техническими деталями, то важно уделить внимание сопровождающим стандарт документам.

Документ «стандарта» WCAG 2.0 (http://www.w3.org/TR/WCAG20/) даст понимание, а «технический» документ (http://www.w3.org/TR/WCAG20-TECHS/) предоставит разработчику надёжные реализуемые фрагменты информации. Всё это разбивается на «общие» методы (технологически неопределённые) и специфические для отдельных технологий «W3C».

Для перехода с WCAG 1.0 на 2.0 «Web Accessibility Initiative» разработало соответствующее руководство — «Comparison of WCAG 1.0 Checkpoints to WCAG 2.0, in Numerical Order» (http://www.w3.org/WAI/WCAG20/from10/comparison/).

Section 508

В 1998 году Конгресс США внёс поправки в закон «American Workforce Rehabilitation Act» от 1973 года. Данный нормативный акт обязывает все федеральные органы США обеспечивать доступность своих средств массовой информации. Раздел №508 был принят с целью устранения препятствий для людей с ограниченными физическими возможностями в области информационных технологий. Закон в обязательном порядке распространяется на все федеральные ведомства Соединённых Штатов и охватывает как доступность web, так и другие вопросы доступности, связанные с компьютерными системами и электронной коммуникацией.

Как уже было отмечено, закон распространяется только на правительственные агентства, но многие негосударственные учреждения также используют рекомендации Section 508 по собственной инициативе, в том числе и находящиеся за пределами Соединённых Штатов.

Частью Section 508, которая охватывает web-доступность, является «Subpart B §1194.22» (http://www.access-board.gov/sec508/standards.htm#Subpart_b). Статья 1194.22 состоит из шестнадцати требований, помеченных латинскими буквами от A до P.

Первые 11 требований (A-K) сформулированы как прямые эквиваленты частей WCAG 1.0. Эти требования и их эквиваленты в WCAG 1.0 перечислены в справочной таблице в документе Section 508. Все другие требования Section 508 должны удовлетворяться в WCAG 2.0 с одним исключением. Требование M относится к Section 508 Subpart B §1194.21. Это требование имеет частичный эквивалент в принципе «Надёжности» WCAG 2.0.

В настоящее время консультативный комитет телекоммуникаций и электронных и информационных технологий (англ. Telecommunications and Electronic and Information Technology Advisory Committee, сокращённо — TEITAC) продолжает работу над усовершенствованием Section 508. В частности в апреле 2008 года TEITAC представил свои предложения по модификации данного стандарта экспертному совету Section 508.

  • Английская версия Section 508: http://www.section508.gov
  • Нормативы Раздела 508 в отношении web-доступности — частичный перевод на русский язык параграфов Section 508, касающихся web-доступности.

WAI-ARIA, версия 1.0

Ещё одним важным стандартом, разработанным консорциумом W3C, в 2008-2009 годах является стандарт WAI-ARIA 1.0, что расшифровывается как «Web Accessibility Initiative — Accessible Rich Internet Applications (Инициатива доступности web — доступность высокотехнологичных Интернет-приложений). Это пакет документов, который определяет, как сделать доступными сложные динамические web-приложения, которые используют такие технологии, как HTML, JavaScript и AJAX. Этот стандарт официально поддерживается ведущими Интернет-браузерами: Firefox 3.x и выше, Internet Explorer 8 и выше, Opera 9.5 и выше, а также некоторыми другими.

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

ГОСТ Р 52872-2007 Интернет-ресурсы. Требования доступности для инвалидов по зрению

1 января 2009 года в Российской Федерации вступил в действие национальный стандарт ГОСТ Р 52872-2007 «Интернет-ресурсы. Требования доступности для инвалидов по зрению» (англ. The Internet resources. Requirements of accessibility for invalids on sight). Данный документ был разработан ФГУП «СТАНДАРТИНФОРМ» и НУ ИПРПП ВОС «Реакомп» по заказу Федерального агентства по здравоохранению и социальному развитию в рамках федеральной целевой программы «Социальная поддержка инвалидов на 2006-2010 годы», утверждённой постановлением правительства Российской Федерации от 29 декабря 2005 года. Данный документ стандартизует русскоязычные Интернет-ресурсы и призван установить общие требования их доступности для людей с нарушениями зрения.

В ГОСТе Р 52872-2007 требования доступности ресурса выражаются в виде набора из нескольких десятков рекомендаций, касающихся общего дизайна сайта, обязательного использования некоторых HTML-конструкций, структуры и особенностей вёрстки Интернет-страниц.

Однако данный документ не лишён ряда ощутимых недостатков и вызывает немало вопросов. Например, сайт, созданный с безусловным соблюдением пункта 5.2 «Графические файлы»:

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

может быть неудобным для посетителя ресурса, так как при этом на странице будет присутствовать информация не только о графических элементах, несущих конкретную смысловую нагрузку, например, «Картина К. Малевича — Чёрный квадрат» или «Логотип компании с изображением глобуса», но и простых элементов визуального дизайна, например, «Голубая волнистая линия» или «узор с цветочками», что будет только мешать работе незрячего пользователя.

Требование пункта 5.1 «Объем контента»:

Частопосещаемые страницы по своему объему должны быть не более 2-3 экранов текста. Число ссылок на странице должно быть не более 15

также вызывает вопросы, например, «Что делать сайтам, у которых только меню уже насчитывает более 15 гиперссылок или сайтам типа wiki?», а главное не ясны мотивы ограничения числа ссылок с точки зрения доступности для инвалидов по зрению.

Однако имеет смысл отметить тот факт, что Федеральным законом «О техническом регулировании» №184-ФЗ от 27 декабря 2002 года разделены понятия «технический регламент» и «стандарт», в связи с чем все ГОСТы утрачивают обязательный характер и применяются добровольно, за исключением некоторых категорий, к которым ГОСТ Р 52872-2007 не относится. То есть данный документ носит лишь рекомендательный характер и несоблюдение его норм не влечёт никаких последствий для Интернет-ресурсов, в том числе и государственных, что делает его по сути бесполезным. К тому же раде справедливости стоит заметить, что не сайт института «Реакомп», как разработчика, не сайт Федерального агентства по техническому регулированию и метрологии, как учреждения отвечающего за распространение этого документа, не соответствуют данному ГОСТу. Причём на сайте Федерального агентства по техническому регулированию и метрологии сам данный документ выложен с нарушением себя самого, так как представлен в графическом формате с низким разрешением без текстовой альтернативы (несоответствие пункту 4.2.1 данного ГОСТа).

Таким образом, ГОСТ Р 52872-2007 не несёт никакой практической пользы по улучшению доступности Интернет-ресурсов для инвалидов по зрению и по сути является очередной «потёмкинской деревней». В данном же обзоре он рассматривается отдельно только потому, что имеет непосредственное отношение к русскоязычной части Интернета. Однако для web-разработчиков, озабоченных вопросом доступности их ресурсов, намного более полезно обратить внимание на стандарты Section 508 и, главным образом, на WCAG 2.0.

Тестирование web-доступности

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

Сразу следует отметить тот факт, что начать тестирование вашего ресурса желательно с проверки его ключевых страниц общими валидаторами HTML и CSS. Так как даже если ваш сайт был создан с учётом основных стандартов доступности, вряд ли он может считаться качественным продуктом, если, при всём этом, не соответствует базовым спецификациям. К тому же валидный HTML- и CSS-код — это уже половина успеха на пути создания доступного ресурса. Для осуществления подобной проверки существуют инструменты, предоставляемые консорциумом «W3C»:

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

Автоматизированное тестирование

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

Если разработчик при создании своего сайта придерживался стандарта WCAG 1.0 или Section 508, то ему следует воспользоваться сервисом «Cynthia Says», доступным по адресу: http://www.cynthiasays.com. Здесь следует указать URL-адрес проверяемой страницы и задать стандарт, в соответствии с которым следует выполнять проверку. Причём для WCAG 1.0 можно выбрать один из трёх возможных уровней: 1A, 2A или 3A. При необходимости, можно задать дополнительные настройки. Например, для проверки доступности динамического контента имеет смысл провести тестирование несколько раз в режимах совместимости с разными браузерами, так как на разных Интернет-обозревателях он может выглядеть по-разному.

Если же разработчиком был использован стандарт WCAG 2.0, то «Cynthia Says» в данном случае будет бессилен. Для проверки соответствия стандарту WCAG версии 2.0 следует воспользоваться сервисом «ATRC Web Accessibility Checker», доступным по адресу: http://checker.atrc.utoronto.ca. Здесь также следует указать URL-адрес страницы и нажать на кнопку «Check It», но помимо проверки по URL сервис также предоставляет возможность загрузить файл напрямую. Это может быть полезно в том случае, если ваш сайт ещё не размещён в Интернете. «ATRC Web Accessibility Checker» также пригоден для проверки соответствия не только международному стандарту WCAG 2.0, но и некоторым региональным, например, уже упоминавшимся BITV 1.0 Level 2 или Stanca Act.

Однако всегда следует помнить, что современные системы искусственного интеллекта далеки от совершенства. Поэтому подобные методы тестирования доступности не являются абсолютно автоматизированными. Программист ресурса всё равно должен вручную просмотреть результат проверки и самостоятельно решить, является ли помеченное место проблемным в отношении доступности. Например, если система «Cynthia Says» встречает в коде страницы конструкцию типа , то она всегда выдаёт предупреждение, призывая проверить, что это изображение используется только для дизайнерских целей и не несёт конкретной смысловой нагрузки. Подробнее подобная ситуация уже рассматривалась в обзоре ГОСТа Р 52872-2007, разработчики которого не учли всех её нюансов.

Однако проблема доступности может заключаться не только в отдельных HTML-конструкциях или несовершенных полностью автоматизированных публичных тестах Тьюринга для различия компьютеров и людей (CAPTCHA), но и в не оптимальной цветовой схеме сайта. Например, его цветовая палитра может быть недостаточно контрастной. Помочь подобрать оптимальное сочетание цветов может сервис «Color Scheme Designer», доступный по адресу: http://colorschemedesigner.com. Если же требуется проверить уровень контрастности уже существующей страницы, то выполнить это можно при помощи сервиса «Contrast Analyser», доступного по адресу: http://www.paciellogroup.com/resources/contrast-analyser.html. Он определяет контраст между цветами фона и переднего плана.

Также в аспекте цветовой web-доступности имеет смысл затронуть такое понятие, как «безопасные цвета web», хотя данная тема и не имеет прямого отношения к автоматизированному тестированию доступности. Это наследие тех времён, когда компьютерные мониторы могли гарантировано выводить только 216 цветов (так называемая палитра 6×6×6). Эти 216 цветов должны были выглядеть одинаково на всех компьютерных платформах и браузерах, которые содержала 256-цветная (8-битная) компьютерная система, поэтому они были названы безопасными для использования на различных платформах, так как их применение при любых условиях не влекло никаких проблем совместимости. В системе RGB они кодируются в каждом из трёх потоков как 00, 33, 66, 99, CC и FF. Однако современные браузеры способны работать с 32-битным цветом, который создаёт палитру из 4294967296 различных цветов. Поэтому сейчас концепция безопасных цветов web не является особо актуальной, однако об этом не помешает знать любому web-разработчику.

Пользовательское тестирование

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

Тестеров можно найти среди своих знакомых или в соответствующих Интернет-сообществах, которые есть на всех языках, в том числе и на русском. Также можно обратиться в рекрутинговые агентства, но на постсоветском пространстве это вряд ли даст ощутимые результаты, так как на таком уровне данная сфера развита только в Западной Европе и отдельных странах Северной и Южной Америки. Для русскоязычного проекта оптимальным вариантом будет являться связь с представителями соответствующего сетевого сообщества.

Доступность является важным понятием, как по экономическим, так и по социальным причинам. Это не только функциональное свойство web-сайта, а ещё и показатель качества, с которым он был создан. Если учитывать аудиторию сайта со всеми её особенностями во время его создания, то вы создадите более доступные страницы со всеми преимуществами, которые это приносит.

20 полезных инструментов для веб-разработчиков

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

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

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

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

01. Firebug

Плагин Firebug для Firefox является обязательным инструментом для разработчиков.

Удивительно полезное дополнение Firebug от разработчиков Firefox позволяет оперативно производить отладку, редактирование и мониторинг HTML , JavaScript и CSS , и все это прямо в браузере.

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

02. HTML Entity Character Lookup

HTML Entity Character Lookup поможет вам проверить все символы на вашей странице.

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

Инструмент также доступен в качестве виджета на Mac Dashboard .

03. Adobe Edge Inspect

Adobe Edge Inspect это современная альтернатива Flash для разработчиков мобильных приложений.

Цукерберг рекомендует:  Делаем постоянные липкие заметки с использованием локального хранилища HTML5

Это относительно новая платформа от Adobe предоставляет разработчикам действенный способ создания интерактивных веб-сайтов в пост-флэш эпоху.

С помощью этого инструмента вы можете создавать мобильные и адаптивные приложения и контент, предназначенные для современных мобильных и ПК-браузеров. Используя при этом CSS и HTML .

04. -prefix-free

-prefix-free поможет вам вырваться из ада CSS-префиксов.

Это крутой инструмент от Леи Веру позволяет использовать CSS свойства без префиксов. По сути, он работает за кулисами, добавляя префикс текущего браузера в любой CSS-код, только когда это необходимо.

05. Cloud9 IDE

Cloud9 IDE позволяет разработчикам по всему миру вместе работать над тем же кодом и общаться.

Cloud9 IDE — это инструмент, задачей которого является помочь разработчикам во взаимодействии при работе над масштабными проектами создания кодов.

Он позволяет людям по всему миру редактировать один и тот же код и общаться вместе в режиме реального времени — он становится все более популярной средой разработки на базе браузера.

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

06. PixelDropr

PixelDropr — это инструмент, предназначенный, для быстрого создания графических элементов сайта.

Этот блестящий плагин Photoshop позволяет легко создавать различные иллюстрации, кнопки и иконки. Все эти элементы затем могут быть перенесены в PSD-файл.

07. Foundation3

Как говорят его создатели из ZURB — он «бешено быстро» составляет коды для адаптивных проектов.

Сделано разработчиками для разработчиков в ZURB . Этот инструмент работает, как план-схема для ваших проектов адаптивного дизайна.

Последняя версия Foundation3 имеет возможность простого построения макета на основе сетки, что делает работу со стилями еще более удобной и гибкой. Инструмент работает, как с SASS, так и с CSS.

08. Fontello

Fontello предлагает простой способ создания иконок в формате веб-шрифтов.

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

09. Cloud Comp

Делитесь с общественностью содержимым своего сайта и приложениями с помощью простого инструмента Cloud Comp.

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

Cloud Comp был создан специально, чтобы дать дизайнерам и разработчикам возможность предоставлять права доступа своим клиентам через оболочку различных устройств.

10. BLOKK

11. Basecamp

Basecamp является инструментом для управления проектами, который выбирают многие веб-разработчики.

Разработанный в 37signals, Basecamp является популярным онлайн-инструментом, который позволяет легко управлять проектами и координировать работу членов команды.

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

12. Browser Shots

Browser Shots создает скриншоты ваших сайтов в разных браузерах.


Browser Shots генерирует снимки того, как отображается сайт в шести самых популярных веб-браузерах с разрешением 800 на 600 и 1024 на 768.

Просто введите адрес сайта и Browser Shots откроет его с нескольких компьютеров, а затем загрузит вам скриншоты сайта.

13. FavIcon Generator

Favicon (« иконка избранное ») представляет собой небольшое, 16 на 16 пикселей изображение, которое показывается в панели вкладок или в закладках браузера, когда открывается ваш сайт.

Этот инструмент позволяет легко создавать Favicon для вашего сайта.

14. Web-developer toolbar

Расширение Web Developer добавляет в браузер панель удобных инструментов.

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

15. Load Impact

Load Impact симулирует ситуацию большой нагрузки на ваш сайт для тестирования его производительности.

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

Другими словами, Load Impact позволяет проверить, как ваш сайт, веб-приложение, мобильное приложение или API-интерфейс справится с потоком до 1,2 миллиона пользователей одновременно.

16. Lorem Ipsum Generator

Lorem Ipsum Generator делает именно то, что следует из названия.

Если вы не в восторге от BLOKK (см. пункт 10), но вам все же нужно заполнить макет каким-либо текстом (Lorem Ipsum), вы можете использовать этот инструмент, который, используя ссылку на сайт, добавит в текст информацию о нем.

Он также включает в себя генератор случайных текстов Lorem Ipsum.

17. W3c Markup Validation Service

W3c Markup Validation Service проверяет ваши документы на соответствие спецификациям.

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

Этот бесплатный сервис от W3C поможет вам проверить правильность разметки различных веб-документов на HTML, SMIL, XHTML и MathML и других языках.

18. Typetester

Проверьте шрифты через Typetester.

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

19. Pingdom

Pingdom — это отличный инструмент для оценки производительности вашего сайта.

Pingdom — это сервис, который отслеживает время работы, простоя и производительность веб-сайтов. Загрузите страницу в HTML, и он будет имитировать процесс загрузки всего сайта, включая разные элементы (JavaScript, RSS, CSS и изображения).

Это позволит вам отслеживать и контролировать производительность вашего сайта.

20. CSS Sprite Generator

CSS Sprite Generator может помочь улучшить производительность вашего сайта.

За счет уменьшения количества HTTP-запросов этот инструмент позволяет повысить скорость загрузки вашего сайта. Картинки объединяются в одно большое изображение, имеющее заданные размеры по векторам координат X и Y.

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

Данная публикация представляет собой перевод статьи « 20 useful tools for web developers » , подготовленной дружной командой проекта Интернет-технологии.ру

Доступность WordPress. Сделать ваш сайт доступным для всех

Главное меню » Блог-платформа wordpress » Доступность WordPress. Сделать ваш сайт доступным для всех

Когда вы просматриваете онлайн, вероятно, первое, что вы заметите на сайте, это его дизайн, за которым быстро следуют графика и элементы контента. Но вы, вероятно, не думаете о доступности WordPress.

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

Итак, что такое доступность в WordPress?

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

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

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

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

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

Почему вы должны заботиться о доступности WordPress

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

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

Сделать ваш сайт WordPress более доступным

В Руководстве по обеспечению доступности веб-материалов 2.0 (WCAG) представлен широкий спектр идей о доступности. Использование доступных тем WordPress может упростить процесс.

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

Установите плагин доступности WordPress

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

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

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

Цветовой контраст

В мире более 2,7 миллионов дальтоников. Эти люди имеют один из трех типов дальтонизма: полный дальтонизм, двухцветное зрение и плохое цветовое зрение. Чтобы быть уверенным в том, что дизайн вашего сайта работает с цветом или без него, учитывайте соотношение цветов и контрастность.

Используйте высококонтрастные варианты цвета, такие как черный и белый, чтобы сделать ваш сайт более читабельным. WCAG 2.0 рекомендует контрастность 4,5: 1 для основного текста. Если вашему веб-сайту все еще нужно немного больше стиля, вы можете использовать узоры или текстуры для дальнейшего увеличения контраста.

Изображение ALT-текста

Изображение ALT текста описывает внешний вид и функцию изображения на странице.

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

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

Заголовки содержимого

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

Альтернативный текст

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

Явные поля формы

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

Доступные ссылки и меню с клавиатуры

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

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

Тест на доступность WordPress

Если вы не уверены в качестве вашей доступности WordPress, вы можете проверить ее.

Хотя инициатива доступности веб-сайтов не поддерживает какой-либо конкретный инструмент, вы можете найти список инструментов доступности на их сайте: https://www.w3.org/WAI/ER/tools/. Возьмите пару из них попробовать и посмотрите, как ваш сайт показывается. Расширение Google Chrome, инструмент оценки доступности веб-сайтов (WAVE) – это еще один способ оценки доступности вашего веб-сайта.

Примеры сайтов, хорошо делающих доступность

Есть много сайтов, которые были разработаны с осторожностью и пониманием доступности. Веб-сайт для зимних Олимпийских игр 2020 года в Пхенчхане является примером такого веб-сайта с двумя ошибками и 264 правильно помеченными элементами. Apple делает доступность лучше, получая только одну ошибку WAVE.

Заключительные мысли: доступность WordPress: сделать ваш сайт доступным для всех

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

Однако не только для того, чтобы опередить возможные изменения в законодательстве, но и просто для того, чтобы обеспечить лучший пользовательский опыт для всех ваших потенциальных посетителей, важно разрабатывать или изменять свой веб-сайт с учетом доступности. В дополнение к тому, что вы откроете свои двери для этих людей, вы также сможете пожинать плоды лучшего SEO, следуя рекомендациям по доступности, предоставляемым Web Content Accessibility.

Как вы включаете доступность в свои дизайны сайтов на WordPress? Дайте нам знать об этом в комментариях!

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Как улучшить доступность веб-страниц

«The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect».

Tim Berners-Lee, создатель World Wide Web и директор W3C

8 советов, как сделать сайт доступным каждому человеку, включая тех, кто имеет ограниченные возможности

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

Что такое веб-доступность?

Согласно W3C, “web accessibility means that every person can perceive, understand, navigate, interact with, and contribute to the web”. Если переводить на русский, то веб-доступность означает, что каждый человек может воспринимать, понимать, перемещаться, взаимодействовать и вносить вклад в Интернет. Это значит, что вся информация на веб-сайте должна быть доступна даже людям с ограниченными возможностями. Как этого добиться? Читайте ниже.

Совет 1

Не делайте зависимость от цвета.

По статистике, один из видов дальтонизма есть приблизительно у 8% мужчин и 0,5% женщин – то есть примерно 300 млн человек страдают от цветовой слепоты. Если говорить о России, то в 2012 году число дальтоников составляло около 4 миллионов.

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

Кстати, Марк Цукерберг, создатель Facebook, является дейтеранопом, то есть плохо различает красный и зеленый. Поэтому основной цвет Facebook – синий. «Синий – самый многогранный цвет для меня, я могу различить все оттенки синего» (“Blue is the richest color for me — I can see all of blue”) – Марк Цукерберг.

Еще полезно придерживаться минималистичного дизайна . Использование небольшого количества цветов в дизайне – это не только мода, но и удобство, особенно для людей с цветовой слепотой. Поэтому лучше использовать на сайте палитру из 2-3 цветов.

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

  • Зелёный и красный
  • Зелёный и коричневый
  • Синий и фиолетовый
  • Зелёный и синий
  • Салатовый и желтый
  • Синий и серый
  • Зелёный и серый
  • Зелёный и чёрный

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

Кстати, проверить себя (нет ли у вас цветовой слепоты) можно по тесту Ишихары .

Почитать о дизайне для дальтоников глазами дальтоника можно в интересной переводной статье на Хабрахабре « Создание дизайна для дальтоников (и вместе с ними) ».

Совет 2

Оставьте возможность масштабирования в мобильной версии.

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

Поэтому не нужно устанавливать maximum-scale=1.0 – это лишит пользователей возможности делать страницу крупнее:

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

Совет 3

Используйте атрибут alt.

Несколько важных вещей об атрибуте alt:

  1. Этот атрибут обязателен для каждого тега изображения ( ), однако допускается оставлять его пустым. Поэтому если речь идет о какой-то декоративной картинке или изображении, которое не влияет на содержание страницы, можно просто использовать alt=””.
  2. Скринридеры (программы, зачитывающие информацию на экране) определяют, что тег это картинка, поэтому не нужно повторяться и написать в атрибуте alt «Это картинка, где показано…» – просто сразу переходите к значению, смыслу изображения.
  3. Важно учитывать не только значение изображения, но и функцию, которую оно несет. Например, если это логотип сайта, нажав на который можно перейти на домашнюю страницу, то в alt лучше написать «Домашняя страница», а не «Логотип».
  4. Прописывая alt, думайте не только о людях с ограниченными возможностями, но и о тех, кто отключает изображения из-за низкой скорости передачи данных.

А если у вас есть изображения в формате svg, то используйте теги и для короткой и длинной подписи.

Совет 4

Добавьте субтитры и описания к своим видеороликам.

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

  1. Если речь о YouTube, то субтитры можно включить при загрузке видео. Правда, это будут автоматически сгенерированные субтитры, которые наверняка будут содержать ошибки и неточности. Но если это англоязычное видео, то субтитры будут более-менее адекватно передавать сказанное в ролике.
  2. Если же вам нужны точные субтитры, то лучше сделать их самостоятельно (либо нанять какого-нибудь). YouTube понимает стандартные форматы субтитров (.srt, .sub, .sbv), а также дает возможность написать субтитры прямо в своем сервисе – и это очень удобно, особенно если у вас нет программ для создания субтитров.
  3. Если вы не используете YouTube для размещения своего видео, а загружаете его на свой сервер, то используйте тег, который позволяет указывать текстовую дорожку для видео и аудио файлов – то есть субтитры, заголовки, описания и так далее.

Более подробно про этот тег можно почитать на ресурсе htmlbook .

Совет 5

Используйте семантическую разметку.

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

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

или вы используете

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

И не забывайте, что важно не просто использовать семантические теги, а использовать их правильно .

Совет 6

Используйте правильные теги.

Вдогонку к предыдущему совету необходимо обсудить использование нескольких тегов, а именно:

Time и Datetime

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

Datetime – это необязательный атрибут, который устанавливает дату и время редактирования текста.

Del и Ins


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

Тег показывает, какие изменения были добавлены в текст документа:

Тег отвечает за удаленную информацию:

Совет 7

Следуйте веб-стандартам доступности.

Существует еще много информации, которая не упомянута в этой статье. Поэтому вам следует обратиться к двум документам:

Там вы можете найти варианты кода, о которых, может быть, раньше даже не слышали.

Совет 8

Проверьте доступность сайта.

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

  • ChromeVox – Chrome-расширение, доступное для пользователей Mac и Windows; используйте этот скринридер, чтобы протестировать сайт;
  • Accessibility Developer Tools for Chrome – еще одно полезное расширение для браузера, которое позволяет добавить в инструменты разработчика опцию проверки доступности;
  • Color Filter – сайт, где вы можете посмотреть, как видят ваш сайт дальтоники;
  • W3C Validator – официальный инструмент W3C, который проверит, соответствует ли разметка вашего сайта правилам веб-доступности.

Инструменты для самостоятельного анализа юзабилити сайта

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

Стандартный набор инструментов для анализа трафика и конверсии Яндекс.Метрики (кроме in-page аналитики) и Google Analytics

— получить исчерпывающую информацию по обоим этапам анализа юзабилити (при достаточном уровне знаний и навыков работы с различными инструментами);

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

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

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

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

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

ПЛЮСЫ:

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

МИНУСЫ:

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

Сервисы для анализа действия пользователей (Вебвизор Яндекс.Метрики, clicktale.com и другие)

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

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

ПЛЮСЫ:

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

МИНУСЫ:

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

Тестирование сайта с помощью фокус-групп (сервисы askusers.ru, usabilla.com, sitepolice.ru и др.)

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

Пример ответа респондента на один из поставленных вопросов в сервисе askusers.ru:

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

ПЛЮСЫ:

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

МИНУСЫ:

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

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

Аналитика форм Яндекс.Метрики

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

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

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

ПЛЮСЫ:

  • возможность оценить этапы заполнения формы, выяснить, какие поля вызвали трудности и пр.;
  • доступность инструмента для пользователей Яндекс.Метрики;
  • репрезентативная выборка: запись производится случайным образом равномерно в течение суток.

МИНУСЫ:

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

Стоит отметить, что получить подобную аналитику можно и в Google Analytics, однако данный сервис требует более длительной и сложной отладки (в частности, настройки событий на заполнение полей форм).

Тепловые карты («Карта кликов» Яндекс.Метрики, feng-gui.com, usabilitytools.com, статистика страниц Google Analytics и другие аналоги)

Подобные системы позволяют оценить поведение посетителей суммарно, для всего потока пользователей на сайт; увидеть, куда кликает большинство пользователей, а куда – нет. В зависимости от этого могут быть приняты решения о внесении корректировок для повышения удобства сайта.

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

ПЛЮСЫ:

  • возможность оценить кликабельность элементов страницы, в т. ч. для тех из них, которые не являются ссылками.

МИНУСЫ:

  • необходим опыт в интерпретации данных для получения корректных выводов;
  • риск ошибочных выводов при наличии на странице динамического контента.

Важно понимать, что анализ юзабилити бесполезен без внедрения корректировок и их тестирования. Необходимо измерять динамику основных параметров, оценивать достижение значимых для ресурса целей. Например, можно тестировать внесенные на сайт изменения (по сравнению с исходными решениями) посредством сервиса Эксперимент Google Analytics. Так, в примере отчета ниже, мы можем увидеть статистику по двум вариантам:

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

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

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

Григорий Загребельный, руководитель отдела web-аналитики Ingate Digital Agency

Повышение доступности сервисов из интернета?

Есть небольшой сайт и несколько онлайн сервисов.

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

А также с учетом региона есть проблемы на уровне провайдеров региона (не обеспечивают они 100% доступность).

Но в тоже время еще не было случаев что недоступны несколько провайдеров.

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

PS. На уровне сервиса такое реализовать не получится, т.к. менять его не можем.

PSS. У всех провайдеров имеем белый внешний IP адрес.

PSSS. Желательно решение с минимальными или нулевыми финансовыми затратами)

  • Вопрос задан более трёх лет назад
  • 3960 просмотров

так а зачем плодить кучу серверов с репликацией?

если я правильно понял, то есть сервис. и у этого сервиса несколько ip адресов.
тогда и нгинкс можно настроить на проксирование на один и тот же сервер, но указать в пуле все его адреса.

и да, днс роундробин- 0 затрат.

где у вас днс хостится?

зы. вдс берите любую. у того же селектела или таймвеба.

ДНС хостится на яндексе (вместе с почтой).

А как Вы смотрите на firstvds? Надежные?

А VPS не подойдет (всегда в них путался)))?
Или облака от того же селектела?

Цены:
firstvds — VDS-Старт — 149р/м — 8Гб — 384Мб — 400МГц — негарантированные 100Мбит/с + 60р/м за IP = 209р/м
selectel — 256 — 256р/м — 25,6Гб — 256Мб — 256МГц — гарантированные 10Мбит/с + 0р/м за IP = 256р/м
timeweb — 565р/м — 5Гб — 512Мб — ? МГц — 10Мбит/с + 80р/м за IP = 645р/м

timeweb можно отсечь сразу)

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

Предыдущее обсуждение свелось к VPS у хостинг провайдеров…

У Вас сервер дома(в офисе)? Все каналы провайдеров ведут к нему?

1. К примеру ставим микротик. Подключаем всех провайдеров и настраиваем переброс канала при его падении на рабочий. Не знаю как у других производителей, но у микротика это реализовано очень даже. Хоть все 5-10 портов делайте с разными провайдерами.
Если DNS round-robin не подойдет, можно тот же DDNS запилить. И при смене провайдера запускать скрипт смены активного ип.
2. Другой вариант это сторонний сервис (тот же пинг админ например или свой аналог сделать) который будет мониторить доступность вашего сервиса по ип. Если активный умер, переключаемся на другой ип. Но в таком случае отмониторить 1-2х минутный даунтайм будет сложновато…
3. Берем любой надежный хостинг/VPS и проксим через nginx
upstream backend <
server ip1;
server ip2;
server ip3;

>
Но в этом случае будут задержки в зависимости от того где этот VPS брать…

Ручной мониторинг доступности сайта (обзор простых инструментов)


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

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

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

Среди возможных критериев проверки можно выделить следующие проблемы:

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

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

Работа сайта в выходные/сезон отпусков

Есть задача: веб-сайт/сервер/сервис должен работать непрерывно несколько дней без человеческого вмешательства. Что может пойти не так?

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

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

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

Кроме обычных проблем, сайты во время длительного отсутствия бдительных стражей любят также подхватить и другие недуги. Например, может закончиться срок действия домена или сертификата. Или надумает растолстеть база данных. Или он может угодить в списки DNSBL или Роскомнадзора.

Черные списки DNSBL

Важной функцией является проверка доменов в черных списках DNSBL (DNS blacklist или DNS blocklist) — списки хостов, хранимые с использованием системы архитектуры DNS. Обычно используются для борьбы со спамом.

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

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

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

Онлайновые черные списки DNSBL, например, antispamsniper.com или syslab.ru , позволяют фильтровать спам, используя DNS для доступа к базам спамерских IP адресов.

Для проверки наличия заданного IP адреса в черных списках введите IP адрес (ваш текущий IP адрес указывается по умолчанию) и нажмите кнопку Проверить.

Защита от DDoS-атак

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

Для страховки рисков недоступности сайта можно воспользоваться услугой Защита от DDoS-атак, благодаря которой к клиенту поступает только очищенный входящий трафик, то есть трафик из Интернета направляется на защищенные адреса через оборудование для “очистки”, где нелегитимный трафик отбрасывается.

Подробнее об очистке трафика можно прочитать в нашей базе знаний.

Планирование технических работ

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

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

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

Мониторинг срока действия домена и SSL-сертификата

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

Проверка срока действия домена

Проверить домен бесплатно можно с помощью сервиса nic.ru .

Проверить время действия домена бесплатно можно с помощью сервиса Whois Service .

Проверка срока действия SSL-сертификата

Выполните следующую команду из командной строки в Linux, чтобы узнать срок действия SSL сертификата, с помощью openssl:

Помимо срока действия, SSL сертификат содержит много интересной информации. Каждый SSL сертификат содержит информацию о том, кем он был выдан, кому он выдан, его срок действия и прочее.

Все эти данные могут быть извлечены из SSL сертификата сайта с помощью программы openssl из командной строки в Linux.

Проверить кто выдал SSL сертификат:

Проверить кому выдан SSL сертификат:

Проверить срок годности SSL сертификата:

Показать всю перечисленную выше информацию об SSL сертификате одной командой:

Мониторинг доступности сайта

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

Вы легко можете проверить доступность сайта из командной строки в Linux и получить от сервера код со статусом HTTP, с помощью таких команд как TELNET или CURL.

Доступность сайта с помощью CURL

Выполните следующую команду для проверки доступности сайта и получения сообщения со статусом от сервера:

Статус код ‘200 OK’ означает что запрос был успешно выполнен и сайт доступен.

Вот еще один пример, который показывает как curl отображает разные ответы сервера:

Также с помощью curl можно проверить доступность отдельной страницы на сайте, например:

Доступность сайта с помощью TELNET

Вы также можете проверить доступность сайта и получить сообщения со статусом от сервера с помощью команды telnet:

Вывод, означающий, что сайт доступен, будет выглядеть следующим образом:

Доступность сайта из географически распределенных точек

Услуга мониторинга Selectel помогает проверять доступность сервисов и анализировать работу серверов и веб-сервисов из любой точки мира.

Подробнее о доступных типах проверок читайте в нашей базе знаний.

Заключение

Всегда есть вариант написать свой скрипт для проверки аптайма на PHP или Perl, или можно создать телеграм-бота для рассылки уведомлений, но подсчитав дневной доход с веб-сайтов и соотнеся его со стоимостью мониторинга, чаще дешевле использовать платные сервисы типа PagerDuty .

Полезные статьи со обзорами сервисов мониторинга:

100 идей для улучшения вашего сайта

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

Что можно сделать для улучшения своего сайта

Новые страницы и разделы

1. Добавить карту сайта
2. Добавить страницу “о нас”, “о компании”, “о проекте”
3. Добавить страницы “доставка” и “оплата”
4. Добавить страницу с гарантиями качества и условиями возврата
5. Добавить страницу с правилами использования сайта
6. Добавить страницу с отзывами о вас или вашей компании
7. Добавить сертификаты и грамоты
8. Добавить страницу с прайсами, которые в том числе можно скачать и распечатать
9. Добавить свои фотографии или фотографии сотрудников в специальный раздел
10. Добавить раздел помощи или FAQ
11. Добавить страницу со списком ваших вакансий
12. Добавить на сайт словарь терминов
13. Добавить на сайт новости сферы
14. Открыть блог
15. Открыть форум

Мета-теги и разметка

16. Прописать уникальные заголовки страниц
17. Прописать уникальные мета-описания
18. Добавить микроразметку Schema.org
19. Сделать запоминающуюся фавиконку
20. Добавить мета-теги Open Graph для соцсетей

Контент сайта

21. Добавить тексты на страницы, где их нет
22. Создать из портянок текста структурированный контент
23. Исправить в текстах опечатки, грамматические и орфографические ошибки
24. Оттипографировать текст
25. Описать товар подробней
26. Сфотографировать товар в хорошем качестве, выложить фотки на карточку
27. Прописать альты ко всем картинкам
28. Сделать открытие изображений плавным при клике
29. Сделать открытие исходящих ссылок на внешние ресурсы в новом окне
30. Добавить видео-обзор продукта

Объем страниц и скорость загрузки

31. Оптимизировать HTML -код, удалить лишнее
32. Проверить страницы сайта HTML -валидатором, исправить ошибки
33. Ускорить загрузку страницы, использовать кеширование
34. Оптимизировать изображения. Графику из дизайна вынести в CSS -спрайты
35. Переехать на более надежный и быстрый хостинг
36. Добавить мобильную или адаптивную версию сайта
37. Сравнить скорость загрузки своих страниц и сайтов конкурентов, найти и исправить у себя слабые места

Структура и функционал сайта

38. Сделать оптимальные и удобные ЧПУ адреса
39. Добавить рекомендательные блоки навигации
40. Добавить хлебные крошки
41. Использовать контекстные ссылки, если они уместны
42. Добавить форму поиска на сайт
43. Усовершенствовать поиск по сайту, чтобы он работал с морфологией
44. При пустом результате поиска выдавать пользователю советы по расширению условий поиска
45. Добавить кнопки “поделиться” (в соцсетях или с друзьями по почте)
46. Добавить сквозные блоки (виджеты) “мне нравится” от соцсетей
47. Если на сайте имеются статьи, добавить блок самых популярных статей или самых комментируемых
48. Добавить возможность комментировать (товары, статьи, новости)
49. Сделать комментарии древовидными, если они у вас сплошные
50. Добавить аватарку к комментариям через сервис Gravatar
51. Убрать капчу, если пользователю надо заполнить форму
52. Запоминать некоторую информацию пользователя, которую он вводит в форму, чтобы подставлять ему эту информацию автоматически
53. Убедиться, что вы не сохраняете конфиденциальную информацию, которая может “утечь”
54. Добавить сортировку товаров, представленных элементов
55. Добавить несколько валют
56. Добавить на сайт еще одну или несколько языковых версий
57. Добавить дату для статей/новостей, а также указать автора
58. Для статей сделать возможность отправки на печать
59. Сделать логотип кликабельным, и ведущим на главную страницу сайта
60. Сделать красивую и функциональную 404 страницу

Удобство использования

61. Сделать меню более удобным – чтобы было видно, где находишься и что еще можно выбрать, оставить только важные элементы
62. Проверить функции сайта, что они работают корректно
63. Добавить быструю прокрутку наверх, если страница очень длинная
64. Если что-то всплывает на сайте, убедиться в том, что оно не раздражает пользователя и не закрывает важные элементы
65. Сделать подробной страницу контактов
66. В качестве карты проезда использовать интерактивную карту от Яндекса или Google
67. Посмотреть, как улучшают сайт другие похожие ресурсы, взять у них идеи
68. Добавить онлайн-консультант
69. Зарегистрировать бесплатный телефонный номер 8 800 и разместить его на сайте
70. Провести а/б-тестирование, чтобы понять, что лучше воспримут пользователи
71. Проанализировать карту кликов и исправить найденные ошибки или оптимизировать навигацию
72. Проанализировать отчеты вебвизора, чтобы понять, с какими проблемами сталкиваются посетители сайта, разработать стратегию оптимизации
73. Проверить отображение сайта на разных устройствах и браузерах, убедиться, что он хорошо отображается и важная информация не закрывается такими элементами, как онлайн-консультантом или плавающим блоком “поделиться”.
74. Проконсультироваться с юзабилистом, попросить советов по улучшению удобства использования сайта
75. Посадить за компьютер свою маму и попросить, чтобы она выполнила какую-то задачу (купила товар, нашла и прочитала статью, и так далее), посмотреть, с какими трудностями она столкнется

Техническая оптимизация

76. Зарегистрировать сайт в панели для вебмастеров
77. Убедиться, что несуществующие страницы выдают 404 ошибку
78. Проверить сайт на битые ссылки и исправить их
79. Проверить, какие поддомены присутствуют в индексе, закрыть ненужные/тестовые от индексации
80. Убрать малоинформативные страницы
81. Создать sitemap.xml и указать важные для индексации документы
82. Создать robots.txt, где запретить доступ к ненужной роботу информации на сайте (тестовые поддомены, серверные логи)
83. Оформить ssl-сертификат для домена, настроить его
84. Проверить загрузку страницы с отключенным JavaScript
85. Проконсультироваться с оптимизатором, попросить советов по оптимизации сайта под поисковые системы

Пиар/раскрутка сайта

86. Добавить сайт в Яндекс.Каталог и DMOZ
87. Организовать ежемесячную рассылку полезных материалов и сделать форму подписки
88. Найти человека в сети, который нуждается в вашей помощи и помочь ему
89. Найти в сети, кто упоминает вас или ваш сайт, дать о себе знать для повышения репутации
90. Найти партнеров, с которыми будет полезно обмениваться аудиторией, предложить сотрудничество
91. Организовать конкурс, задействовать все каналы для анонса
92. Напишите гостевые статьи для других площадок
93. Организуйте мероприятие, дайте пресс-конференцию для СМИ
94. Повышайте авторитет и рейтинг не только вашего сайта, но и тех, где о вас или ваших услугах пишут (группы в социальных сетях, новости в СМИ , ветки на форумах)
95. Зарегистрируйте сайт в каталогах организаций и бизнес-справочниках
96. Добавьте компанию на карты Яндекса и Google
97. Разместите на сайт чат, где посетители могут знакомиться и общаться друг с другом
98. Отправьте журналиста на конференцию или семинар/встречу, чтобы он написал для вашего сайта интересный репортаж с фотографиями
99. Упоминайте в статьях лидеров мнений в вашей теме, а также блоггеров и их сайты
100. Напишите список из 100 полезных пунктов и поделитесь им с читателями

Дополняйте этот список по улучшению сайта в комментариях своими пунктами.

Ресурсный центр для интернет-магазинов: 50+ полезных инструментов

Время чтения: 43 минуты Нет времени читать? Нет времени?

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

Инструменты для создания интернет-магазинов

Выбор движка или конструктора — один из первых вопросов, с которыми сталкиваются e-коммерсанты при запуске проекта. Несколько ответов на этот вопрос ниже.

1. OpenCart

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

  • Масштабируемость. На OpenCart может работать как небольшой проект, так и крупный интернет-магазин.
  • Открытый исходный код. Движок можно использовать бесплатно.
  • Развитая инфраструктура: активное сообщество, большое количество готовых плагинов и шаблонов.
  • Встроенная система мониторинга продаж под капотом. Фактически речь идет о CRM с достаточной для нового проекта функциональностью.

У OpenCart есть недостатки. Движок относительно сложно настраивать. За хорошие плагины придется платить.

Пример интернет-магазина на OpenCart — EverBuild.

2. Magento

Это одна из самых популярных CMS для интернет-коммерции. Разработчики позиционируют движок как простой инструмент, с которым может разобраться даже не знакомый с администрированием сайтов человек.

  • Открытый код. Сборку для сообщества можно использовать бесплатно. На рынке есть платные сборки.
  • Простая и удобная административная консоль.
  • Возможность расширения функциональности с помощью платных и бесплатных модулей.

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

Пример интернет-магазина на Magento — Agent Provocateur.

3. «Эквид»

«Эквид» — программный модуль, с помощью которого можно развернуть интернет-магазин на сайте под управлением любой CMS. Также инструмент позволяет сделать магазин в сетях «Вконтакте» и Facebook.

  • Интеграция с любым движком. Для популярных CMS WordPress, Joomla! и Drupal есть готовые плагины.
  • Бесплатный тариф для начинающих коммерсантов. До 10 товаров на сайтах или в соцсетях можно продавать бесплатно.
  • Интеграция с популярными в рунете платежными системами.

Из недостатков нужно отметить платный доступ к полной функциональности инструмента.

Пример созданного с помощью «Эквид» интернет-магазина — «Ранчо Мяссури».

4. WooCommerce

WooCommerce — платформа для создания интернет-магазинов на сайтах, работающих под управлением CMS WordPress. Использовать движок и надстройку для электронной торговли можно бесплатно.

  • Интеграция с самой востребованной в мире CMS WordPress.
  • Простота установки, интеграции и управления. С WordPress и WooCommerce справится даже новичок в сфере создания и администрирования сайтов.
  • SEO-дружественность. Техническую оптимизацию сайта можно выполнить в течение получаса.

К недостаткам WooCommerce относится необходимость установки дополнительных плагинов для интеграции с популярными в рунете платежными системами.

Пример интернет-магазина, работающего на WooCommerce — Ceasar’s Ice Cream (UPD: уже не функционирует).

5. Товары «Вконтакте»

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

Преимущества сервиса «Товары»:

  • Онлайн-витрину в сети «Вконтакте» можно сделать быстро.
  • «Товары» интегрируются с существующими группами и страницами.
  • Достаточная для начала коммерческой деятельности функциональность.

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

Чтобы найти пример, выберите соответствующий раздел в меню «Вконтакте».

Разобраться с этим сервисом вам поможет наша подробная инструкция.

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

Инструменты исследования и аналитики

Чтобы интернет-магазин работал успешно, маркетологи должны изучать и анализировать рынок и аудиторию. Предложенные ниже инструменты помогут решать эти задачи.

6. Google Analytics

Это без преувеличения лучший на данный момент инструмент веб-аналитики. Сервис можно использовать бесплатно. Подробный обзор возможностей читайте в руководстве по Google Analytics для новичков.

Вот основные возможности сервиса, которые будут полезны владельцам интернет-магазинов:

  • Отслеживание метрик эффективности сайта, включая количество сеансов и посетителей, глубину и продолжительность сессии, популярные страницы входа и выхода и другие показатели.
  • Создание пользовательских или использование готовых сводок для анализа эффективности магазина. Например, воспользуйтесь сводками Enhanced Ecommerce Analytics или E-Commerce SEO Dashboard.
  • Мониторинг конверсий. В соответствующем разделе Google Analytics можно настраивать цели и отслеживать их достижение. Раздел «Электронная торговля» помогает следить за транзакциями, оценивать эффективность карточек товаров.

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

7. «Яндекс.Метрика»

«Метрика» — сервис веб-аналитики от «Яндекса». По сравнению с Analytics он более простой. Тем не менее в «Метрике» есть как минимум один уникальный инструмент, которого нет в сервисе от Google. Это «Вебвизор». Подробности читайте в руководстве по использованию.

Вот полезные для онлайн-торговцев функции:

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


«Яндекс.Метрика» — менее мощный по сравнению с Analytics инструмент. Но для начинающих специалистов это скорее преимущество, чем недостаток. С «Метрикой» меньше шансов потратить время на ненужные данные.

8. Google Search Console

Инструмент мониторинга и управления ресурсом. Доступен бесплатно, входит в число обязательных для использования сервисов. Подробно о Search Console рассказано в обзоре.

Вот важные возможности сервиса:

  • Мониторинг индексирования ресурса поисковой системой Google.
  • Отслеживание проблем с безопасностью и ручных санкций.
  • Возможность добавлять на страницы микроразметку.
  • Настройки основного домена.
  • Анализ поисковых запросов и внешних ссылок.

Важный момент: с помощью функции «Посмотреть как Googlebot» можно запросить срочную переиндексацию страниц сайта.

9. «Яндекс.Вебмастер»

«Вебмастер» — инструмент мониторинга и управления сайтом от «Яндекса». Его можно использовать бесплатно. О возможностях читайте в «Азбуке маркетолога».

Краткий список полезных функций:

  • Диагностика сайта, уведомления о проблемах и санкциях.
  • Отслеживание индексирования ресурса.
  • Управление зеркалами сайта.
  • Защита контента от воровства.
  • Анализ поисковых запросов и ссылок.

Функция «Переобход» позволяет запросить переиндексацию существующих или ускорить индексацию новых страниц.

10. BuzzSumo

Это незаменимый инструмент для контент-проектов и интернет-магазинов, которые занимаются контент-маркетингом. BuzzSumo — платный сервис. Есть бесплатные функции.

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

Основной недостаток сервиса — отсутствие анализа контента в популярных в рунете соцсетях «Вконтакте» и «Одноклассники».

11. Парсер «Яндекс.Маркета»

Сервис YM-Parser поможет собрать и проанализировать цены конкурентов. Стоимость мониторинга цен на один товар составляет 15 копеек за один отчет. Доступен бесплатный пробный период.

  • Сравнение цены товара в магазине с ценами на этот же товар на сайтах-конкурентах.
  • Возможность выбора конкретных магазинов для мониторинга цены.
  • Гибкие настройки сортировки данных в отчетах.

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

При необходимости воспользуйтесь альтернативными парсерами цен на «Яндекс.Маркете»:

12. Competera

С помощью сервиса Competera можно отслеживать цены на сайтах конкурирующих магазинов. Использование платное, стоимость от 124 долларов США в месяц. Доступен тестовый период 14 дней.

Вот основные возможности Competera:

  • Отслеживание цен конкурентов в режиме реального времени.
  • Автоматизированный анализ цен.
  • Автоматизированное динамическое ценообразование.
  • Бенчмарк-анализ и мониторинг продуктов бренда.

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

13. Popsters

Платный сервис социальной аналитики. В течение недели можно использовать бесплатно. С помощью Popsters вы сможете:

  • Анализировать эффективность публикаций в сообществах в социальных сетях.
  • Анализировать поведение пользователей пабликов.
  • Сравнивать эффективность сообществ.

Popsters позволяет анализировать свои и чужие группы, поэтому его можно рассматривать в качестве инструмента анализа конкурентов. Сервис работает с сетями «Вконтакте», Facebook, Instagram, «Одноклассники», Google+, Twitter и другими.

14. Woopra

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

Вот список основных возможностей Woopra:

  • Мониторинг метрик эффективности сайта.
  • Сбор данных о поведении конкретных пользователей.
  • Формирование профилей пользователей, к которым привязываются данные о взаимодействии с сайтом.
  • Сегментирование аудитории по выбранным критериям.
  • Интеграция с популярными CRM-системами, ecommerce-платформами и другими маркетинговыми инструментами.
  • Анализ воронок продаж.
  • Уведомления администратора о целевых действиях пользователя.

Woopra будет полезным инструментом для любого интернет-магазина. Главный риск использования сервиса — возможность с головой погрузиться в метрики в ущерб работе над сайтом.

Обратите внимание на аналогичные Woopra сервисы: Kissmetrics и Sisense.

Kissmetrics — платный сервис поведенческой аналитики. Стоимость использования составляет от 400 долларов США в месяц. Сервис позволяет анализировать поведение отдельных пользователей и клиентских сегментов, тестировать изменения на сайте, отслеживать эффективность воронок продаж. Kissmetrics можно интегрировать с популярными CMS и маркетинговыми инструментами, включая Magento, Shopify, MailChimp, WordPress/WooCommerce и другими.

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

Отдельного внимания заслуживает перспективная аналитическая платформа для ритейлеров 42 Technologies. Этот сервис аналитики создан специально для онлайн- и офлайн-ритейлеров. Платформа находится на стадии стартапа.

Инструменты для работы с рекламой

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

15. «Яндекс.Директ»

Среди важных для владельцев интернет-магазинов возможностей нужно отметить следующие:

  • Демонстрация рекламы заинтересованным пользователям. Реклама называется контекстной, так как показы происходят в контексте информационных потребностей аудитории.
  • Возможность оплачивать только переходы пользователей или показы объявлений. Первая стратегия более популярна благодаря высокому ROI. Вторая применяется, когда необходимо познакомить людей с новым брендом, продуктом, акцией.
  • Практически гарантированное привлечение трафика в любое время. Кампании в «Директ» можно запускать и приостанавливать нажатием кнопки. Это позволяет привлекать на сайт посетителей тогда, когда они вам нужны.

У «Яндекс.Директ» есть только один большой недостаток. Рекламодателям приходится платить за привлечение посетителей. Все остальные проблемы имеют рабочий характер.

16. Google AdWords

Это система контекстной рекламы Google. Об особенностях работы с AdWords читайте в руководстве. AdWords обеспечивает e-коммерсантам такие же возможности, как «Яндекс.Директ». У систем есть отличия, но они не принципиальные. На практике «Директ» и AdWords хорошо дополняют друг друга, поэтому работайте с двумя системами одновременно.

17. Elama

Агрегатор контекстной рекламы. Этот сервис позволяет управлять рекламными кампаниями в «Директе» и AdWords одновременно. Для рекламодателей использование бесплатное.

Кроме возможности управлять рекламой в системах «Яндекса» и Google через один интерфейс, Elama имеет такие особенности:

  • Автоматическое управление ставками. Функция позволяет экономить бюджет при снижении конкуренции и гарантированно получать показы и переходы при росте активности рекламодателей.
  • Возможность делегировать управление рекламной кампанией профессионалам. Эта опция доступна рекламодателям с бюджетом от 150 тыс. рублей в месяц.
  • Автоматические рекомендации по улучшению рекламных кампаний. Система анализирует настройки и находит типичные ошибки. Это повышает эффективность рекламы.

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

При необходимости вы можете воспользоваться другими агрегаторами, например, Aori и Marilyn от агентства «Блондинка.ру», Alytics, R-Broker.

18. Реклама «Вконтакте»

Интернет-магазины могут рекламировать товары в крупнейшей в рунете социальной сети «Вконтакте». Рекламодателям доступны следующие инструменты:

  • Таргетированная реклама. Показы можно нацеливать по географическим и демографическим признакам, интересам, образованию, месту работы, техническим характеристикам ПК пользователя.
  • Реклама в сообществах. На бирже можно выбрать подходящие группы из списка, а также подобрать площадки с помощью фильтра.
  • Ретаргетинг. Этот инструмент позволяет показывать объявления пользователям, которые уже посещали ваш сайт и просматривали определенные товары или категории товаров.
  • Создание похожих аудиторий. Функция позволяет найти пользователей, которые по разным признакам похожи на участников аудиторий, созданных с помощью ретаргетинга.

Управлять рекламой «Вконтакте» можно не только через кабинет рекламодателя в социальной сети. Некоторые агрегаторы поддерживают работу с рекламой в социальных сетях. Например, через агрегатор Aori можно вести рекламные кампании в «Директе», AdWords, «Вконтакте», Facebook, Instagram и «Одноклассники» одновременно.

У нас в блоге есть подробное руководство по таргетингу «Вконтакте». Читайте и применяйте.

19. Реклама в Facebook, Instagram, «Одноклассники»

Обратите внимание на инструмент платного привлечения трафика из крупнейшей социальной сети мира. Подробную информацию и инструкции по управлению рекламными кампаниями читайте в гайде: часть 1 и часть 2. Кстати, через Ads Manager можно управлять рекламой в Instagram. Подробности в инструкции. А таргетированной рекламой в «Одноклассниках» можно управлять через платформу MyTarget.

20. Pepper

Это инструмент поиска целевой аудитории в социальных сетях. Он повышает точность таргетинга и эффективность рекламы. Подробнее об инструменте читайте в гайде.

Pepper — платный сервис, но поиск сообществ доступен бесплатно. За символическую плату можно получить доступ к базовой функциональности на два дня. Этого достаточно, чтобы собрать целевую аудиторию и настроить рекламную кампанию.

Основные возможности Pepper:

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

Pepper также работает с Instagram, «Одноклассники» и Facebook.

Обратите внимание на «Церебро» — еще один мощный инструмент поиска аудитории «Вконтакте».

21. Relap

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

Эффективность нативных форматов объясняется тем, что пользователи пока не принимают их за рекламу. Также Relap учитывает поведение пользователя на сайте. Это повышает релевантность объявлений.

Инструменты для работы с контентом

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

22. Cappasity

Этот сервис создает интерактивные трехмерные фотографии товаров. По данным разработчиков Cappasity, 3D-фото товаров повышают конверсию на 30 %.

Чтобы создать трехмерное изображение для карточки товара, вам понадобятся:

  • Бесплатная программа Easy 3D Scan.
  • Вращающаяся платформа, на которую можно поставить продукт. Лучше выбрать платформу с автоматическим приводом, которая совершает оборот в течение минуты.
  • Любой фотоаппарат с режимом видеосъемки.
  • Осветительное оборудование.
  • Тканевой или бумажный фон для фотосъемки.

3D-фото, созданные с помощью Cappasity, легко загружаются на сайты под управлением популярных CMS для ecommerce, включая Prestashop, Magento, WooCommerce/WordPress и другие.

Cappasity — платный сервис. 30 трехмерных фото можно создать бесплатно.

23. 3D Model

Плагин для WordPress позволяет создавать трехмерные модели из фотографий товаров. Чтобы опубликовать 3D-фото, достаточно загрузить на сайт от 10 до 30 фото товара с разного ракурса. С помощью специального окна для загрузки серии снимков в редакторе записей можно добавить изображения, которые плагин преобразует в 3D-модель. Инструмент платный.

24. Canva

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

Сервис условно бесплатный, за хорошие фотографии и шаблоны необходимо платить.

25. PowToon

Инструмент для создания презентаций и анимированного видео. Сервис платный, но базовую функциональность можно попробовать бесплатно. Специальных навыков для работы с PowToon не требуется, редактор работает по принципу drag-and-drop.

Смотрите пример анимированного видео, созданного с помощью PowToon.

26. Stackla

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

Stackla — платный сервис. По запросу можно получить бесплатный доступ к демо-версии.

27. Инструменты для работы с текстами

Большим и средним магазинам удобнее организовать редакцию или делегировать создание текстов крупным агентствам. Штатные редакторы или сотрудники веб-студий знают десятки инструментов для работы с контентом.

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

Биржи, на которых можно заказать контент:

Проверка уникальности текста:

Не забудьте о «Типографе», который исправляет опечатки, удаляет лишние пробелы, ставит правильные кавычки. А вот «Главредом» пользуйтесь только в том случае, если вы профессионально работаете с текстами. Иногда этот инструмент дает побочные эффекты.

28. Виджет Google Review

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

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

В качестве альтернативы обратите внимание на бесплатную систему сбора отзывов Cackle Reviews.

Инструменты поискового маркетинга

В этом разделе вы найдете инструменты поисковой оптимизации интернет-магазинов.

29. Инструменты генерации XML-карты сайта

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

В CMS PrestaShop достаточно активировать предустановленный модуль Google Sitemap.

30. Инструменты для внедрения ускоренных мобильных страниц

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

Вам помогут следующие инструменты:

  • Для сайтов на WordPress отлично работает связка плагинов AMP и AMP for WordPress.
  • В OpenCart задача решается с помощью модулей AMP и AMP for Product Pages.
  • Для Magento есть модуль AMP.
  • Магазины на PrestaShop могут использовать соответствующий модуль.

В руководстве по внедрению AMP вы найдете мини-кейс по использованию этой технологии. Также в гайде есть инструкции по использованию ускоренных страниц на Joomla! и Drupal.

31. Инструменты для внедрения микроразметки

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

Внедрить микроразметку можно с помощью следующих инструментов:

Помните, Google считает оптимальным способом реализации микроразметки Schema.org через JSON-LD. «Яндекс» пока не использует данные, размеченные через JSON-LD, для формирования расширенных сниппетов в поисковой выдаче.

32. Инструменты для работы с семантическим ядром

Составить семантическое ядро можно с помощью следующих инструментов:


Подробнее о работе с семантическим ядром читайте в руководстве.

Инструменты для улучшения юзабилити сайта

Предложенные ниже сервисы помогут сделать ecommerce-сайт более удобным для пользователей.

33. AskUsers

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

Вот основные возможности сервиса:

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

С помощью AskUsers владельцы интернет-магазинов получают ценные рекомендации по улучшению сайта.

34. Сплит-тестирование

С помощью A/B-тестов вы можете постоянно улучшать сайт. Подробнее об этом виде исследования читайте в инструкции. Проводить сплит-тесты можно с помощью таких инструментов:

Воспользуйтесь идеями для A/B-тестов, с помощью которых можно улучшить сайт.

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

35. amoCRM

Простая и функциональная система управления отношениями с клиентом. Стоимость использования составляет от 5 000 рублей в год.

Вот основные возможности инструмента:

  • Фиксация обращений пользователей.
  • Управление перепиской с клиентами.
  • Обсуждение проектов с коллегами с помощью внутреннего чата.
  • Отслеживание сделок с клиентами.
  • Интеграция с IP-телефонией.

amoCRM считается одной из самых удобных систем на рынке.

36. retailCRM

Специализированная система для интернет-магазинов. Стоимость использования составляет от 900 рублей в месяц. Дополнительно оплачивается каждый заказ. Есть бесплатный тариф с ограниченной функциональностью.

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

В качестве альтернативы amoCRM и retailCRM обратите внимание на следующие инструменты:

Платежные агрегаторы

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

37. «Яндекс.Касса»

Популярный платежный сервис, с помощью которого оплату можно принимать с банковских карт и электронных кошельков. Комиссия за использование зависит от оборота магазина и платежного средства. Для платежей с банковских карт при обороте до 1 млн рублей в месяц комиссия составляет 3,5 %.

«Яндекс.Касса» обеспечивает следующие возможности:

  • Прием платежей с банковских карт «Мир», Visa, MasterCard/Maestro.
  • Прием платежей с электронных кошельков «Яндекс.Деньги», Webmoney, Qiwi.
  • Интеграция с системами онлайн-банкинга «Сбербан Online», «Альфа-банк», «Промсвязьбанк».
  • Платежи наличными через крупные ритейл-сети.
  • Платежи с баланса телефона.

«Яндекс.Касса» поддерживает функции онлайн-кредитования и безопасной сделки.

38. PayOnline

Международный платежный сервис. Комиссия за использование зависит от оборота и платежного средства. По картам при обороте до 500 тыс. рублей в месяц тариф составляет 2,9 %.

Главные возможности PayOnline:

  • Прием платежей по картам «Мир», Visa, MasterCard/Maestro.
  • Прием платежей через международные системы, включая American Express и Union Pay.
  • Платежи через электронные кошельки Webmoney, «Яндекс.Деньги», Qiwi.
  • Функции оплаты в один клик и автоматического платежа.
  • Защита платежей с помощью протокола 3D-Secure.

PayOnline в первую очередь подходит магазинам, которые обслуживают клиентов не только в России, но и в других странах. Система предлагает плагины для интеграции с популярными ecommerce-движками.

Вас могут заинтересовать альтернативные платежные агрегаторы:

Инструменты колл-трекинга

Call tracking — инструмент мониторинга и анализа телефонных звонков. Отслеживать звонки можно с помощью предложенных ниже сервисов.

39. Calltracking.ru

Calltracking.ru — популярный сервис, который помогает анализировать эффективность маркетинговых каналов. Абонентская плата составляет от 1500 рублей в месяц.

Основные возможности сервиса:

  • Статическое и динамическое отслеживание звонков.
  • Анализ источников звонков.
  • Анализ стоимости обращений в разрезе каналов.
  • Анализ эффективности ключевых фраз.
  • Оптимизация конверсии телефонных звонков.

Система формирует отчеты, с помощью которых можно оценивать менеджеров по продажам или операторов колл-центра.

В качестве альтернативы обратите внимание на следующие инструменты:

  • Calltouch — система колл-трекинга с антифрод-защитой.
  • Целевой звонок. Статический колл-трекинг от «Яндекса».
  • Comagic — комплексная система аналитики с функцией отслеживания звонков.

Инструменты обратной связи с посетителями

С помощью предложенных ниже сервисов вы сможете общаться с посетителями сайтов в режиме реального времени.

40. JivoSite

Популярный сервис для организации обратной связи. Базовая версия с ограниченной функциональностью доступна бесплатно. Полная функциональность стоит от 474 рублей в месяц.

  • Удобный и узнаваемый онлайн-чат на сайте.
  • Интеграция чата со страницами в Facebook и «Вконтакте».
  • Активные приглашения с активацией по заданным параметрам.
  • Обратные звонки.

Если ваш интернет-магазин работает на WordPress/WooCommerce, воспользуйтесь плагином для интеграции с JivoSite. А оценить эффективность активных приглашений с помощью JivoSite поможет наш кейс.

В качестве альтернативы обратите внимание на сервис Siteheart или виджет «Сообщения сообщества» «Вконтакте».

41. Pozvonim

Pozvonim.com — функциональный сервис для организации обратной связи с посетителями сайта. Потенциальные клиенты могут выбрать удобный способ общения, включая обратный звонок оператора. Стоимость использования составляет от 500 рублей в месяц. Доступна бесплатная версия с ограниченной функциональностью.

Главные возможности Pozvonim:

  • Удобный виджет обратной связи. С его помощью можно заказать обратный звонок или связаться с оператором через соцсети и мессенджеры.
  • Кастомизируемый онлайн-чат.
  • Мотивирующий пользователей виджет «Стадное чувство». Система показывает пользователям действия других посетителей сайта, мотивируя их действовать так же.

Альтернативные инструменты для обратных звонков:

Инструменты для показа рекомендованных товаров

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

42. Retail Rocket

Retail Rocket — сервис, с помощью которого интернет-магазины могут организовывать рассылки, а также демонстрировать блоки рекомендованных товаров. Рекомендации формируются по результатам программного анализа поведения посетителей сайта. Стоимость использования сервиса составляет 1700 рублей в месяц. Есть бесплатный тариф с базовой функциональностью.

Возможности Retail Rocket:

  • Демонстрация блоков рекомендаций на страницы товаров, категорий, оформления заказа, результатов поиска.
  • Email-рассылки, адаптированные для интернет-магазинов.
  • Триггерные рассылки.
  • Relap.io. Обычно сервис используют контент-проекты. Но разработчики утверждают, что инструмент подходит для ecommerce-сайтов.
  • Rich Relevance. Рекомендательная платформа, созданная при участии специалистов Amazon.
  • Early Birds. Сервис персонализации покупательского опыта. Платформа стала финалистом конкурса инноваций LVMH Innovation Award 2020 года.

Другие полезные инструменты

В этом разделе вы найдете идеи инструментов для Email-маркетинга, уведомлений в браузере, колл-центров, внешних сервисов доставки.

43. Инструменты Email-маркетинга

Организовать рассылки можно с помощью таких сервисов:

Выбрать подходящий сервис рассылок поможет сравнение самых популярных инструментов Email-маркетинга. Если вы остановитесь на MailChimp, читайте гайд по этому сервису.

44. Инструменты для push-уведомлений

Сообщить существующим и потенциальным клиентам о появлении новый товаров или акции можно с помощью таких инструментов:

Узнать о других сервисах push-уведомлений и выбрать конкретный инструмент поможет обзор.

45. Внешние контакт-центры

Предложенные ниже инструменты заинтересуют ecommerce-проекты, которые не хотят или не могут содержать свой колл-центр:

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

46. Службы доставки

Если ваш магазин пока не организовал собственную службу доставки, делегируйте эту функцию аутсорсерам. Вот список потенциальных партнеров:

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

47. Инструменты мониторинга доступности сайта

Отслеживать доступность сайта и получать уведомления о проблемах можно с помощью таких инструментов:

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

48. Сервисы отложенного постинга в соцсетях

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

Информацию о других инструментах отложенного постинга ищите в обзоре.

49. Генераторы купонов и промо-кодов

Купоны и промо-коды можно генерировать с помощью таких программ:

Также можно воспользоваться универсальными решениями, например, Woobox.

50. Сервисы всплывающих окон

Всплывающие окна можно сделать с помощью следующих модулей:

Также для создания поп-апов можно воспользоваться плагинами и модулями для популярных движков.

Андрей Кузьмичёв: используйте инструменты, чтобы решать конкретные задачи

Интернет-магазин Ozon.ru входит в число лидеров отрасли электронной коммерции рунета. Руководитель отдела поисковой оптимизации и контент-маркетинга «Озона» Андрей Кузьмичёв поделился с читателями блога «Текстерры» информацией об инструментах, которые использует один из крупнейших онлайн-ритейлеров.

Дмитрий Дементий: Андрей, добрый день! Вы занимаетесь поисковой оптимизацией и контент-маркетингом в Ozon.ru. Поделитесь, пожалуйста, с коллегами информацией об инструментах, которые использует один из крупнейших ритейлеров рунета. Возможно, вы поможете начинающим коммерсантам достичь масштабов «Озона».

Андрей Кузьмичев: Дмитрий, здравствуйте. С удовольствием отвечу на вопросы.

Д.Д.: Какую CMS вы бы порекомендовали использовать начинающим e-коммерсантам? Какой движок можно взять на старте для небольшого магазина, а потом масштабировать при необходимости? И кстати, на каком движке работает Ozon.ru? Видел разную информацию.

А.К.: Движок Ozon.ru самописный. Написан ещё давно, но мы постоянно его дорабатываем и пробуем также готовые решения. Внедряем их для некоторых задач по работе со структурой, с меню.

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

Ещё стоит учитывать наличие на рынке разработчиков под вашу CMS. Не порекомендовал бы Joomla! и самописные движки.

Д.Д.: Какие метрики нужно отслеживать, чтобы оценить эффективность продвижения? И какие инструменты вы используете в «Озоне» для мониторинга? «Метрику», GA, что-то еще?

А.К.: Что касается инструментов, то это «Яндекс.Метрика» и Google Analytics с настроенными целями, подключенной электронной коммерцией. Желательно использовать GTM для Google. Обязательно связанные аккаунты: «Яндекс.Директ» с «Метрикой», AdWords с Analytics соответственно. Для точной отчётности по каналам не стоит забывать про utm-метки.

Для каждого канала используйте свои метрики. Где-то важен CTR, а где-то глубина просмотров или Bounce Rate. Для CPC-каналов нужно отслеживать CPO, CLV и ROI.

В анализе конкурентов хорошо помогает SimilarWeb.

Все эти метрики и инструменты, как и некоторые другие, мы у себя в Ozon.ru пробуем и используем.

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

А.К.: Смотря какую цель преследуем. Если речь о брендовом упоминании, то мы стараемся мониторить и отвечать всем клиентам. Как на слова благодарности от наших клиентов, так и на их вопросы. Стараемся помочь максимально быстро. Подобного софта на сегодняшний день много. Можно попробовать несколько и выбрать тот, который вам больше подходит по цене и отчётности. Мы используем YouScan.

Д.Д.: Как бы вы порекомендовали управлять контекстной рекламой и рекламой в соцсетях начинающим и небольшим магазинам, а также крупным онлайн-торговцам? Удобно ли работать прямо в «Директе» и AdWords? Или лучше все же использовать агрегаторы? Как работает Ozon?

А.К.: Ozon работает напрямую с площадками. Да, Google любит часто менять свои интерфейсы, но к ним рано или поздно привыкаешь, в целом удобно и всегда можно найти все отчёты и настройки. Начинающим и небольшим магазинам я бы рекомендовал обязательно управлять рекламными кампаниями вручную на начальном этапе, чтобы на практике понять, как устроена контекстная реклама. А далее уже можно подключать агрегаторы, если они действительно ускорят работу или увеличат эффективность рекламных кампаний.

Д.Д.: Пользуетесь ли вы инструментами типа «Церебро» или Pepper для сбора аудитории в соцсетях? Насколько эффективны эти сервисы для ecommerce?

А.К.: Не пользуемся.

Д.Д.: Где интернет-магазинам брать контент? Статьи, обзоры, описания продуктов? Фото и видео товаров? Какой путь более эффективный: своя редакция, работа с подрядчиками (агентствами), работа с сайтами и биржами типа fl.ru? Где берет контент Ozon? (для «Ozone Гид», для разделов и карточек товаров).

А.К.: Мелким и начинающим магазинам стоит брать фото и всю информацию от поставщика или обращаться к агентствам и к фрилансерам, но при этом быть крайне аккуратными. У фрилансера должен быть расписан примерный график работы и объём. Также у вас должны быть все его контакты, включая номер телефона.

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

Д.Д.: Как вы относитесь к продвинутым форматам визуального контента? 3D изображения вместо обычных фото товаров имеют смысл или перспективу? Видео с девушками на главной странице Amazon и Ozon — насколько эффективная «фишка»?

А.К.: Продвинутые форматы визуального контента — это очень актуальные вещи, так как скорость подключения к интернету растет, в том числе и мобильного интернета. 3D фотографии товаров, конечно, имеют смысл, но не на всех категориях. Например, в некоторой одежде это необходимо, а в конфетах, крупах или товаров категории «Красота и здоровье» это не нужно.

«Фишка» видео с девушкой на главной странице Ozon.ru помогла увеличить средний чек и конверсию с главной страницы. Также с её помощью мы смогли нашим новым клиентам показать, что Ozon представляет огромное количество категорий товаров. А постоянным покупателям мы напомнили, что наш ассортимент постоянно увеличивается. На сегодняшний день это уже более 4 000 000 товаров.

Д.Д.: CRM — обязательная вещь для интернет-магазина? Или новички могут обойтись без нее? На каком этапе внедрять? И какой CRM пользуетесь в «Озоне»?

А.К.: В Ozon мы используем самописную CRM. Новички на первых этапа могут обойтись без неё, но начать собирать данные по клиентам лучше сразу, чтобы в дальнейшем можно было использовать Email-канал для привлечения трафика и продаж. Также с ростом трафика вы будете лучше знать свою аудиторию, и тут CRM вам поможет правильнее таргетировать рекламные кампании.

Д.Д.: Контент-маркетинг — эффективный маркетинговый инструмент для интернет-магазинов? «Ozon Гид» решает задачи привлечения клиентов? Как конвертируются в покупателей люди, которые приходят в «Гид» по информационным запросам?

А.К.: Да, конечно, контент-маркетинг — это эффективный маркетинговый инструмент для интернет-магазинов. Тут главное правильно выбрать каналы, по которым привлекать трафик на статьи и обзоры, которые вы создаёте, и тематику самих статей.

Информационных запросов огромное множество. Зная свою целевую аудиторию, с помощью информационных статей вы можете помочь вашим клиентам ответить на вопросы. Тем самым выступить экспертом и увеличить доверие к бренду или интернет-магазину. Аудитория «Ozon Гида» постоянно увеличивается, на сегодня это уже сотни тысяч посетителей в месяц. Лучше всего конвертируются подборки товаров для кухни и дома. Хорошим каналом для привлечения трафика тут являются социальные сети.

Д.Д.: На страницах товаров Ozon много рекомендаций: блоки «сопутствующие товары» и «рекомендуем также». Как формируются эти рекомендации? Это просто механическое предложение товаров из тех же или близких категорий? Стоит ли интернет-магазинам работать с «умными» системами рекомендации типа Relap.io? Relap чаще используют медиа, но разработчики рекомендуют его и для магазинов.

А.К.: Мы сами формируем эти рекомендации, на основе наших внутренних данных и математических исследований. Постоянно дорабатываем алгоритмы. Интернет-магазинам бы порекомендовал использовать сервис товарных рекомендация Retail Rocket.

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

А.К.: На сегодняшний день «Ozon Доставка» имеет около 1000 курьеров и более 2000 пунктов выдачи заказов (ПВЗ) в 360 городах России. Новому проекту, конечно же, лучше начать с курьерских служб. А далее уже стоит считать рентабельность и ресурсы полного цикла от заказа до доставки клиенту. И смотреть что выгоднее для каждого интернет-магазина.

Д.Д.: Возможно, есть какие-то сервисы или программы, которые вы можете порекомендовать начинающим и продолжающим владельцам или маркетологам интернет-магазинов?

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

Сервисов и программ для интернет-маркетологов очень много. Нужно использовать только те из них, которые решают конкретно ваши задачи, анализируют и делают отчёты именно те, на основе которых вы сможете сделать выводы и на основе них поставить новую бизнес-задачу. Не стоит забывать про самые основные инструменты статистики и аналитики, использовать их функционал на 100 %. Например, речь идет о «Яндекс.Вебмастер» и Google Search Console.

Д.Д.: Андрей, большое спасибо за информацию!

А.К.: Пожалуйста, всем читателям — удачи!

Инструментов много, но среди них нет волшебной кнопки

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

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

Советы и рекомендации по улучшению Вашего веб-сайта

Поделиться «Советы и рекомендации по улучшению Вашего веб-сайта»

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

Разделы, категории и страницы

  1. Создание путеводителя по ресурсу.
  2. Создание страницы, содержащей информацию об организации, команде ресурса, руководстве проекта.
  3. Создание страницы оплаты товара или оформления доставки.
  4. Создание страницы, описывающей предоставляемые гарантии, а также содержащей условия возврата товара.
  5. Создание страницы для размещения на ней регламента использования ресурса.
  6. Создание страницы, содержащей отзывы покупателей и пользователей сайта.
  7. Демонстрация на сайте наград, сертификатов и знаков качества, полученных компанией.
  8. Создание страницы под прайс-лист, который пользователи смогут загрузить и распечатать.
  9. Разработка фотогалереи, где будут размещены фото членов команды сайта, работников компании.
  10. Разработка FAQ сайта.
  11. Создание раздела вакантных мест в компании.
  12. Размещение на сайте глоссария, терминологического словарика.
  13. Создание новостного раздела с последними новостями отрасли.
  14. Создание форума компании.
  15. Разработка корпоративного блога.

Разметка ресурса, мета-теги

  1. Создание уникального заголовка для каждой страницы.
  2. Разработка уникальных мета-описаний страниц.
  3. Прикрепление микроразметки с использованием «Schema.org».
  4. Разработка цепляющих фавиконок.
  5. При использовании социальных сетей – прикрепление мета-тегов«OpenGraph».

Контент

  1. Вставка текста туда, где он отсутствует.
  2. Объединение разрозненных текстовых элементов в статьи.
  3. Проверка всех текстов на сайте на наличие опечаток, погрешностей и различных ошибок.
  4. Проведение типографизации текста.
  5. Создание более информативных описаний товаров.
  6. Замена фото товаров на более качественные, и прикрепление их к карточкам.
  7. Разработка альтов для всех картинок на сайте.
  8. Создание плавной визуализации открытия изображений по клику.
  9. Разработка механизма открытия ссылок на сторонние ресурсы в новом окне браузера.
  10. Прикрепление видеообзоров ко всем товарам на сайте.

Оперативность загрузки страниц и их размер

  1. Проведение оптимизации html-кода и удаление лишних фрагментов.
  2. Выполнение проверки всех страниц при помощи html-валидатора и устранение найденных ошибок.
  3. Включение кеширования страниц.
  4. Проведение оптимизации изображения и вынесение всех картинок в CSS-спрайты.
  5. Поиск более быстрого и надежного хостинга и перемещение на него ресурса.
  6. Разработка адаптивной версии сайта или создание версии для портативных устройств.
  7. Проведение сравнения оперативности загрузки своего ресурса и ресурсов-конкурентов, после чего следует выявить свои проблемные места и устранить их.

Работа над набором функций сайта и его структурой

  1. Создание удобных и оптимальных адресов ЧПУ.
  2. Разработка рекомендательных навигационных блоков.
  3. Прикрепление «хлебных крошек».
  4. Если контекстные линки уместны, следует прикрепить их.
  5. Прикрепление формы поиска по ресурсу.
  6. Внедрение в поиск механизма обработки морфологии.
  7. Прикрепление страницы рекомендаций по поиску на сайте, в случае выдачи пользователю пустой страницы.
  8. Прикрепление кнопок распространения контента в социальных сетях и по электронной почте.
  9. Прикрепление виджетов, на которых можно лайкнуть пост через социальную сеть.
  10. Разработка блока наиболее популярных товаров или публикаций и размещение его на главной странице.
  11. Разработка системы комментариев товаров или публикаций.
  12. Если комментарии расположены в виде «простыни», следует сделать древовидное расположение.
  13. Если используется сервис «Gravatar», нужно добавить к комментариям картину-аватар.
  14. Устранение необходимости введения капчи при заполнении форм.
  15. Внедрение функции запоминания введенных единократно данных.
  16. Проверить сайт на предмет сохранения конфиденциальных сведений, находящихся под угрозой утечки.
  17. Внедрение возможности сортировки содержимого страницы.
  18. Добавление нескольких валют на странице оплаты.
  19. Разработка дополнительных языковых версий сайта.
  20. Добавление даты публикации и имени автора к каждому посту или новости.
  21. Добавление кнопки «быстрая печать».
  22. Переработка лого сайта таким образом, чтобы он был кликабельным и вел на стартовую страницу ресурса.
  23. Создание функциональной и приятной на вид страницы с ошибкой 404.

Эргономичность

  1. Переработка меню сайта, удаление оттуда лишних компонентов и придание большего удобства.
  2. Тест функционала сайта.
  3. Внедрение возможности быстрого перемещения из одной части сайта в другую без необходимости длительного скролла.
  4. Убедиться в отсутствии раздражающего действия всплывающих элементов сайта.
  5. Переработка страницы с контактами с целью сделать ее более информативной.
  6. Прикрепление интерактивной карты от «Yandex» или «Google», чтобы покупатели смогли отыскать офис компании.
  7. Анализ идей других интернет-магазинов, заимствование некоторых из них.
  8. Прикрепление на сайт онлайн-консультанта.
  9. Регистрация бесплатного номера 8800 и размещение его на видном месте сайта.
  10. Проведение A/B-теста с целью определения удачных решений, реализованных на сайте.
  11. Анализ карты кликов и обработка найденных ошибок.
  12. Анализ отчетов, составленных вебвизором, определение наличествующих проблем и создание тактики оптимизации сайта.
  13. Просмотр сайта с разных устройств с целью выявления нарушений в отображении различных элементов сайта и наложении фрагментов страниц друг на друга.
  14. Консультация у юзабилиста и запрос рекомендаций по дальнейшей модернизации ресурса.
  15. Попросить кого-нибудь из близких воспользоваться ресурсом и поинтересоваться о возможных затруднениях во время осуществления каких-либо действий на сайте.

Работы технического плана

  1. Регистрация ресурса в вебмастере.
  2. Проверка наличия перенаправления с отсутствующих страниц на страницу 404.
  3. Исправление нерабочихлинков.
  4. Проверка поддоменов и закрытие от индексации ненужных и тестовых поддоменов.
  5. Удаление малополезных страниц.
  6. Указание приоритетных для индексации страниц в файле «sitemap.xml».
  7. Ограничение для робота доступа к ненужным ему сведениям в файле «robots.txt».
  8. Оформление и настройка сертификата «ssl».
  9. Тест загрузки сайта при отключенном «JavaScript».
  10. Консультации с квалифицированными оптимизаторами и разработка стратегий оптимизации под известные поисковики.

Раскрутка ресурса и пиар-кампании

  1. Внесение сайта в каталог «Яндекса».
  2. Создание почтовой рассылки.
  3. Определение людей, нуждающихся в помощи.
  4. Поиск упоминаний о ресурсе в сети и повышение репутации сайта.
  5. Поиск партнеров.
  6. Создание конкурса.
  7. Написание гостевых статей.
  8. Проведение пресс-конференции, интервью.
  9. Повышение авторитета ресурса во всех возможных местах.
  10. Регистрация сайта в каталогах и справочниках.
  11. Выставление отметки компании на картах «Google» и «Yandex».
  12. Разработка онлайн-чата.
  13. Организация репортажа.
  14. Упоминание авторитетных мнений в материалах.
  15. Создание списка из 100 пунктов, которые могут принести пользу читателям, и поделиться им на сайте.

Поделиться «Советы и рекомендации по улучшению Вашего веб-сайта»

Цукерберг рекомендует:  Сайт - Парсинг скриптов сайта
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих