30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. Workflow
Webdesign

Чеклист веб-дизайнера по запуску сайта (в разных портативных форматах)

by
Length:LongLanguages:

Russian (Pусский) translation by Григорий В (you can also view the original English article)

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

Здесь есть не все, но это краткий обзор того, что вы могли бы сделать сами, или добавить в свой контрольный список.

Чтобы еще больше упростить вашу задачу, мы создали несколько версий этого контрольного списка, включая HTML-версию, Markdown, PDF и Evernote. Загрузите их все из учетной записи Tuts+ на GitHub.

evernote

Успешный запуск

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

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


Содержание

Соберите небольшую команду и тщательно просмотрите содержимое сайта: убедитесь, что все правильно. Хороший контент - краеугольный камень отличного сайта.

  • Правописание: Проверьте все, а потом проверьте снова. Запустите проверку правописания. Еще лучше, вовлекайте других. Не бывает слишком много людей, чтобы убедиться, что текст написан верно.  Ищите грамматические ошибки, а также проверяйте пропущенные слова в важных абзацах.
  • Текст: Убедитесь, что везде вставлен нужный текст и не осталось заполнителей. Нет ничего хуже, чем увидеть "Lorem Ipsum" на месте миссии компании.
  • Контактная информация: Это покажется очевидным, но все же убедитесь, что она правильно указана. Как без этого людям связаться с вами?  Проверьте номера телефонов, проверьте адреса электронной почты и убедитесь, что они работают, позвоните или отправьте электронное письмо и убедитесь, что вы его получили.
  • Авторское право: Если вы планируете использовать дату в информации об авторских правах, убедитесь, что она настроена на автоматическое обновление в соответствии со временем на сервере, и что владелец авторских прав указан верно.
  • Условия: Если вы предоставляете услуги или участвуете в рекламных акциях, вам нужны определенные условия, которые будут видны посетителям.  Если вы не уверены в том, как их написать, обратитесь за советом к юристу. Помните: они должны быть как можно более ясными. Нет ничего хуже, чем запутаться в юридическом жаргоне.
  • Конфиденциальность: Если вы используете файлы cookie, собираете данные или распространяете данные, вам нужна политика конфиденциальности. Она должна быть простой и четко определять, какие данные вы собираете. Предоставьте подробную информацию о том, как с вами можно связаться для получения дополнительной информации.

Функциональность

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

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

  • Совместимость: Убедитесь, что сайт работает во всех браузерах и на разных платформах. В самом начале объясните клиенту, на каких платформах будет работать сайт, что вы будете тестировать, и придерживайтесь этого.  Используйте такие платформы, как Responsivator и BrowserStack, чтобы быстро протестировать сайт, а также проверьте, как он работает на физических браузерах и устройствах.
  • Фавикон: Еще одна очевидная вещь, которую можно случайно пропустить. Создайте также иконку для домашнего экрана на iOS.
  • Логотип: Есть ли у логотипа ссылка на домашнюю страницу?
  • Страницы 404: Убедитесь, что они у вас есть, убедитесь, что на них есть способы вернуть пользователя на сайт или направить его на интересные страницы по соответствующим ссылкам.
  • Перенаправления: Если вы перенаправляете какие-то страницы, используйте подходящие перенаправления 301, а не 302.
  • Формы: Убедитесь, что они не попадают в спам, и что после отправки не появляется ошибка, укажите слова благодарности после отправки формы посетителем, чтобы он знал, что она была отправлена. Прежде всего, перед запуском сайта убедитесь, что указан адрес электронной почты клиента.
  • Ссылки: Работают ли ссылки на внутренние страницы? Работают ли все внешние ссылки и открываются ли они в новой вкладке, если так предусмотрено?
  • RSS-каналы: Каналы могут быть полезны. Их не нужно ограничивать статьями, можно создать каналы для большинства страниц, например, на сайт можно добавлять новые работы или тематические исследования.

Стандарты и проверка

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

  • Доступность: Легко забыть о том, насколько сложно прочитать веб-страницу некоторым пользователям. Думали ли вы о том, чтобы использовать вспомогательные технологии, такие как программы чтения с экрана?  Встроили ли вы роли и состояния WIA-ARIA или, по крайней мере, подумали о порядке вкладок или элементов управления формой?
  • Контраст: Это продолжение прошлого пункта. Используя самые современные мониторы, легко заметить незначительные различия в цвете. Обязательно протестируйте свой сайт на нескольких устройствах и ноутбуках, чтобы убедиться, что дизайн четко отображается, а текст легко читается.
  • Размер текста: Сделать текст четким и легким для чтения, отрегулировать межстрочный интервал и оставить много свободного места. Больше может означать лучше, если речь идет о тексте в Интернете.
  • Дополнительные метки: Убедитесь, что у всех изображений есть четкие описательные метки для слабовидящих. Мало того, без них изображения нельзя будет найти через поисковые системы.
  • Согласованность: Убедитесь, что общие элементы сайта согласованы между собой, чтобы не запутать пользователей. Сделайте так, чтобы кнопки выглядели как кнопки, ссылки выглядели как ссылки, а заголовки и текст были везде одинакового размера и цвета.
  • Совместимость устройств: Подумайте, как сайт будет выглядеть на нескольких устройствах: он должен работать и на компьютере, и на мобильных устройствах.
  • Проверка: Всегда стремитесь все проверить на 100%. Если ваш сайт не прошел полную проверку, не расстраивайтесь, но обязательно определите все ошибки, чтобы устранить любые нежелательные проблемы.
  • JavaScript: У многих людей JavaScript отключен по соображениям безопасности. Убедитесь, что ваш сайт полностью работает, а формы по-прежнему выполняют проверки на стороне сервера без него.
  • Flash: Да, знаем, никто больше не пользуется Flash, верно? Если вам нужно использовать Flash, обязательно добавьте альтернативный образ резервной копии, если у пользователя не установлен Flash Player.

Sitemaps

Убедитесь, что вы включили файлы Sitemaps. Они помогают поисковым системам правильно проиндексировать ваш сайт в процессе сканирования.

  • HTML-Sitemaps: Несмотря на то, что такая форма файла Sitemaps не так распространена, как раньше, она может помочь посетителям увидеть сайт в целом. Ссылки на них обычно находятся в нижнем колонтитуле сайта.
  • XML-Sitemaps: Они используются только такими поисковыми системами, как Google, Bing и Yahoo. Создать XML-Sitemap легко, отправьте его с помощью инструментов веб-мастера. Они позже будут информировать поисковые системы о страницах, которые вы опубликовали.

Работа сайта

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

  • Проверка скорости сайта: Можно использовать такие службы, как Google Page Speed, чтобы проверить время загрузки страниц вашего сайта.
  • Размеры изображения: Ваши изображения должны быть как можно меньше. Несмотря на то, что сегодня скорость интернета выше, чем когда-либо, никто не хочет ждать загрузки страницы размером 10 МБ. Сжатие изображений снизит время загрузки страницы.

  • SEO

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

    Этот список ни в коем случае не охватывает все, и если вы хотите узнать больше, мы рекомендуем почитать недавние статьи "FAQ по поисковой оптимизации" и "Контрольный список SEO для веб-дизайнера".

    • Ключевые слова: Убедитесь, что вы ориентируетесь на нужную демографию и рынок. Важно подойти к этому правильно, чтобы привлечь нужный трафик на свой сайт.  Поищите в Google AdWords, у какого ключевого слова (или поискового запроса) самый высокий потенциал трафика и наименьшая конкуренция, и уравновесьте эти два фактора.
    • Заголовки и описания страниц: У всех ли шаблонов есть необходимые заголовки страниц и метаданные на основе ключевых слов? Возьмите конкретное ключевое слово и попробуйте поставить его в начало описания, в формах единственного и множественного числа.
    • Alt-теги для изображений: Есть ли у основных изображений на сайте соответствующие описания? Используйте короткие описания. И не забудьте выбрать для файлов изображений описательные названия, а не случайные слова и цифры.
    • Ключевые слова: Вставляйте их в заголовки, описания и текст.
    • Контент: Если контент качественный, он будет работать на оптимизацию и дополнять SEO. Нужна хорошая плотность ключевых слов в тексте, поэтому используйте как формы единственного, так и множественного числа.  Не перегружайте контент, он должен казаться естественным, добавляйте ключевые слова только тогда, когда это уместно. Поисковые системы также предпочитают более длинные страницы контента, поэтому обратите внимание на увеличение содержания до +300 слов, но больше внимания уделяйте качеству, а не количеству.
    • URL-адреса: Убедитесь, что у вас на сайте чистые URL-адреса. Использование описательного URL-адреса вместо адреса из случайных чисел или слов поможет SEO и посетителям найти страницу, на которую они захотят вернуться, и, если это подходит, попробуйте включить ключевое слово в URL.

    Аналитика

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

    • Мониторинг: Используйте хороший SEO и коды отслеживания для измерений. Такие инструменты, как Google Analytics (бесплатно), или сервисы Hubspot, GoSquared или KISSmetrics (платно) предоставят вам ценную обратную связь.

    Безопасность

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

    • Защита чувствительных страниц: Защитите любые конфиденциальные страницы или папки от индексации в поисковых системах, поместив файлы robots.txt и исключив их из Инструментов веб-мастера. Также подумайте, нужно ли вам использовать файл .htaccess, чтобы отключить просмотр папок в каталогах.
    • Сертификаты безопасности: При разработке веб-сайта электронной коммерции или сайта, который обрабатывает конфиденциальную информацию о посетителях, уровень безопасности будет иметь первостепенное значение.  Обязательно используйте такие протоколы, как SSL-шифрование, для защиты от кражи нежелательной информации. Также было доказано, что отображение таких печатей, как TRUSTe, может повысить доверие к сайту.

    Хостинг и резервные копии

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

    • Типы: Коллективный хостинг, реселлерский хостинг, облачный хостинг, VPS-хостинг и выделенные серверы. Не знаете, что это значит? Тогда прочитайте эти короткие советы.
    • Резервные копии: Убедитесь, что ваш поставщик предоставляет ежедневные и еженедельные резервные копии вашего сервера, а также делает локальные резервные копии.
    • Мониторинг: Настройте такие службы, как Pingdom, или другие инструменты для мониторинга состояния вашего сервера.

    Юридические вопросы

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

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

    Практические результаты

    В контракте по проекту четко опишите, что клиент физически получит после завершения проекта. Вот что мы рекомендуем.

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

    Когда запускать сайт?

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

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


    Текущее обслуживание

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

    • Резервные копии: Всегда, всегда резервные копии должны быть под рукой. Ежедневно выполняйте как минимум две резервные копии - одну утром и одну через 12 часов, минимизируя количество возможных потерянных данных.
    • Контроль версий: Попробуйте запустить проект через Git, это отличная система контроля версий для групп разработчиков, работающих вместе.  История исходного кода сохраняется, что означает, что вы можете обратиться или вернуться к предыдущим версиям, если или когда это необходимо. Чтобы ознакомиться с Git, прочитайте эту подробную статью: Easy Version Control with Git.
    • Аналитика: Чтобы улучшить сайт в будущем, попросите клиента настроить аналитику, чтобы вы могли отслеживать для него трафик и статистику сайта и предлагать улучшения в течение следующего месяца и года после запуска.

    Что еще?

    Если у вас есть какие-то дополнительные мысли, которые, по вашему мнению, следует добавить в список, озвучьте их в комментариях!

    Advertisement
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.