Разработка сайтов

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

Чек-лист дизайн

Стребовать с заказчика бриф. Прочитать его.
Прежде чем делать макет в фотошопе — лучше набросать расположение элементов на бумаге и утвердить этот эскиз у заказчика
Не забыть указать на сайте: Кто, Что, Где: Название компании/+лого, что делают (коротко) контакты: тел, адрес, мыло, кнопка написать нам. Например: Студия Анатолия Тарасенко, разработка и продвижение сайтов, +79272366541, Уфа, Трамвайная 2/3, site@2666541.ru
Показать в макете как выглядят кнопки при наведении, при нажатии
Продумать внутреннюю страницу, где будут размещаться статьи
Продумать что будет на больших разрешениях по бокам
Продумать как будут выглядеть формы обратной связи.
1. Простая: имя + телефон + отправить;
2. Сложная: имя, мыло, телефон, сообщение, капча, прикрепить файл, отправить.
3. Подумать как будет выглядеть заполненная форма (названия полей должны быть видны при заполнении, а не только вписаны в сами поля)
Заполнять сайт реальными данными: контактная инфа, тексты, описания. Никакой “рыбы”. Стребовать с заказчика тексты.
Ссылки — подчеркнуты
Нарисовать страницу 404 в стиле сайта
Продумать как будет выглядеть постраничная навигация в новостях
Продумать как будет выглядеть сайт на мобиле
Предусмотреть максимальную и минимальную ширину макета
Что будет если макет растягивать бесконечно?
1. в стороны (пример — сайт открыли на мониторе с большим разрешением)
2. вниз (пример — заказчик добавил статью длинной с войну и мир)
Футер: Слева: адрес сайта. Подчёркнуто. Справа: Воплощение идей – Студия Анатолия Тарасенко (подчеркнуто только название студии) год
Продублировать контакты в футере: телефон, адрес

Передача макета верстальщику

После утверждения макета у заказчика, при передаче верстальщику — все элементы должны быть нарезаны в нужных размерах
Чтобы элементы назывались так, как называются слои в .psd (т.е. не «слой 1» в .psd и я значит должен выключать все по очереди их, Чтобы увидеть где же этот «конвертик», а назвать его «mail», например)
Размерность, структурированность и группировка (т.е. header — contacts — mail, phone и т.д.)
Прямо на слое с цветом — сам цвет в rgb и hex
Если градиент, то в комментах к слою — код в веб
favicon.ico

Идеи

QR код в контакты

Общие пожелания

Не меняйте тему в переписке по email
Скрины макета лучше делать в png весом не больше 1мб
Если макет — лендинг, не надо присылать файл гиганской длины. лучше отдельными экранами
Пожалуйста, присылайте промежуточные варианты работы, чтоб было видно, что работа идет и чтоб можно быть корректировать направление работы.
Пожалуйста, сообщайте обо всех форс-мажорах незамедлительно (невозможность продолжать работу, длительная пауза в работе, нехватка материала)
Скрины в скайпе лучше присылать ссылками, а не файлами, чтобы потом к ним можно было вернуться с любого устройства, а не только с того, на которое они скачаны и чтобы их можно было легко передавать дальше: программисту, заказчику
Пункт выполнен — ~~зачеркиваем~~ (формат — зачеркнутый или Alt+Shift+5)

Чек-лист программирование

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

Конкретно по сайту domain.ru

Здесь будут описаны особенности конкретного сайта: слайдеры, параллакс и тд

Общие пожелания

Создаем копию этого документа для отдельного сайта и проходимся по всем пунктам.
В новом документе убрать в заголовке слово “шаблон” и вместо domain.ru написать домен сайта, который делаем. Удалить раздел “общие пожелания”
Пункт выполнен — ~~зачеркиваем~~ (формат — зачеркнутый или Alt+Shift+5)
Если мы ведем переписку по имейл — не меняем тему письма
Когда пишем «все готово» или «такой-то пункт готов» — даем ссылку, чтобы сразу можно было перейти на сайт. Даже если эта ссылка фигурировала 100 раз в переписке
Присылаем промежуточные варианты работы, чтобы было видно, что работа идет
Сообщаем обо всех форс-мажорах незамедлительно (не можем продолжать работу, вынужденная длительная пауза в работе, не хватает материалов: PSD, вёрстки, страниц, чего угодно)

WordPress

НЕ пишем никаких изменений в модули и части сайта, т.к. все они сотрутся при обновлении движка/плагинов. Проверяется это раз в месяц путём обновления wordpress. (перед обновлением проверить, есть ли бекап)
Никогда не создаем пользователя admin, т.к. к нему чаще всего пытаются подобрать пароль. Вместо этого создаем пользователя с вашим именем/именем заказчика /wp-admin/users.php
Добавить админа tolik@at02.ru
Шаблон темы сайта называем так, как называется фирма. В авторах шаблона, напишите ваши имя и фамилию. Не нужно больше оставлять никаких своих ссылок и копирайтов на сайте
Ненужные шаблоны — удаляем. (каждый лишний плагин и шаблон — потенциальная уязвимость)
Для созданного нами шаблона — ставим скриншот.
Все файлы шаблона храним в папке с шаблоном. Не в uploads и не на внешних сайтах.
В файлах темы должны быть теги <?php wp_head(); ?> <?php wp_footer(); ?> чтобы работали плагины https://codex.wordpress.org/Создание_тем
Создать отдельную страницу typo где вставить этот текст http://pastebin.com/VSgy91H1 Стили back-end должны работать во front-end (нумерованные/маркированные списки, выравнивание текста и тп)
Добавить картинки в нужные места на страницу typo
Мы будем добавлять картинки почти к каждой статье. Нужно проверить как работает стандартная галерея (параметр “страница вложения” в настройках изображения wordpress). Поставить lightbox, чтоб картинки открывались поверх сайта, а не на отдельных страницах.
Добавить прямо в этот документ ссылку на страницу typo на новом сайте
Если на сайте есть страница “новости” или “блог” нужно добавить туда 40 тестовых новостей чтобы посмотреть как работает постраничная навигация (для генерации такого контента есть плагин)

Общее ТЗ

Все картинки, скрипты и файлы должны храниться на самом сайте
При наполнении сайта большие картинки нужно сжать. Картинки больше 1200*900 непрактичны. Для веба хорошо сжимает стандартный picture manager из пакета Microsoft Office (пункт изменить картинки — сжать — для документов)
Обычно заказчик присылает картинки, названные как попало. Если нужно заливать много картинок в галерею — лучше переименовать их sitename1, sitename2 и тп. С этим нормально справляется встроенный проводник win
Главная страница — site.ru/ НЕЛЬЗЯ: site.ru/index.php или index.html
Поставить плагин латинские ЧПУ (WP: Cyr to Lat enhanced)
Названия страниц site.ru/pagename/ без категорий, без длинных адресов
<title> главной страницы: название фирмы | чем занимается
<title> внутренних страниц: <h1> страницы | название фирмы http://anatolt.ru/pravila-postroeniya-zagolovkov-saytov/
Положить favicon.ico в корень сайта
Активный пункт меню — выделен. То есть если мы находимся на странице “контакты” это видно по главному меню
Хлебные крошки, где это предусмотрено в макете, или если есть страницы вложенностью больше двух
Ссылки визуально отличаются от текста. Реагируют на наведение мыши
Верстать шаблон так чтобы нормально смотрелось на мобиле, планшете, ноуте и на широком экране. Проверить можно по ссылке http://ami.responsivedesign.is/
Мелкие картинки сохранять в png. Если изображение много весит использовать технологию «прогрессивный jpeg» когда сначала загружается картинка низкого качества, потом высокого http://www.artlebedev.ru/kovodstvo/sections/167/
Если при наведении должна появляться другая картинка — ее нужно предзагрузить, чтобы не было загрузки картинки при наведении, иначе картинка будет “дергаться” при наведении
Код карты даю я. (показывается в разделе контакты)
Страница с картой открывается по нажатии на адрес предприятия в шапке
На странице с картой указано время работы фирмы, телефоны, адрес текстом. Ссылка «контакты» ведет туда же куда и адрес в шапке.
Адрес фирмы – кликабелен (ведет на карту), лого – кликабельно (ведет на гл страницу).
Телефон в шапке сайта и на странице контакты, должен нормально выделяться (чтобы можно было скопировать) не надо делать так, чтобы при попытке выделить телефон выделялась вся страница
Пейджинатор (номера страниц, когда выводится больше 10 материалов)
Если на сайте есть подкатегории и не оговорено обратное — должно быть выпадающее меню
Не забудьте нормально сделать страничку 404. Если набрать несуществующий адрес должна открываться страница 404 выполненная в дизайне сайта со ссылкой на главную и объяснением, что такой страницы не существует, а не тупая хромовская заглушка. Должен отдаваться соответствующий код страницы. Можно проверить по ссылке http://www.majento.ru/index.php?page=seo-analize/check-server-request
Футер: адрес сайта. ведет на гл. страницу Правый нижний угол: (кликабельно и подчеркнуто только слово название студии) – ведет на http://2666541.ru target=»_blank».

Воплощение идей – Студия Анатолия Тарасенко 2018

sitemap.xml
Кроссбраузерность: сафари, ие, фф, опера, яндекс, хром. Главное — чтобы сайт не перекашивало в несовременных браузерах, а будут ли там работать современные спецэффекты — не важно.
Проверить сайт на валидаторе. http://validator.w3.org
Проверить сайт на скорость http://gtmetrix.com сделать чтобы показывал не меньше B B
Разместить счетчик яндекс метрики. Код счётчика даю я

Форма ОС

В форме ОС – ФИО, телефон, мыло, форма для загрузки файла, капча
Если форм обратной связи несколько должно быть понятно какая именно была отправлена (например «акция» или «написать нам» или из поля «как мы работаем»)
Если на сайте несколько форм — должно быть понятно с какой формы, с какой страницы была отправлена форма (решается через lead tracking)
Письма с сайта должны приходить с темой «письмо с сайта domain.ru» с почты webmaster@domain.ru
Если владелец сайта захочет ответить на письмо — оно должно уходить отправителю, а не на webmaster@domain.ru
Проверить как работают форма ОС
При нажатии на кнопку “отправить” она должна блокироваться и показывать какой-то прелоадер, иначе пользователи отправляют ее по нескольку раз
Сделать страницу /success на которую перемещается пользователь после отправки формы. Страница должна открываться без задержки

По окончании работ

Удалить тестовые данные
Внимательно проверить правильно ли указаны контактные данные
Прощелкать все страницы, проверить нет ли пустых страниц/неработающих ссылок
Переписать все доступы на клиента
Сделать резервную копию

ЗАКАЗАТЬ ЗВОНОК

Студия Анатолия Тарасенко