История одного блога: Смена шаблона и составление ТЗ


Как составить ТЗ для заказа шаблона wordpress

Приветствую вас друзья!

Если вы уже бывали на страницах сайта nikolayyakimenko.com, наверняка заметили, как изменился внешний вид, дизайн или шаблон сайта.

Сегодня поделюсь своим опытом  по смене шаблона  wordpress или вернее замена старого  шаблона wordpress и составление тех. задания.

В самом начале существования этого блога, дизайн имел вот такой вид:

шаблон вордпресс

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

Ниже скан следующего шаблона.

шаблон вордпресс

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

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

Почему я решил сменить свой шаблон на  wordpress?

1. Шаблон который был до этого устарел морально и технически

2. Позиции в поисковой выдаче значительно упали. Примерно в 5 раз, а если брать максимальные показания, то будет  и все 10 раз

3. Небыло мобильной версии сайта

4. Также я захотел переехать на другой хостинг.

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

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

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

Я решил, что пора обратиться к специалистам, заплатить денег и перестать делать все самостоятельно.

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

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

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

Но сейчас не об этом.

Каким-то чудом попал на сайт trandinvest.ru называется блог инвестора Александра. Заинтересовала некоторая информация этого сайта, также мне понравилось оформление этого сайта и зашел к Саше на страницу Услуги . Скрин сайта ниже.

блог инвестора Александра

Поинтересовался услугами  и нашел — создание шаблонов и сайтов.

Ух ты! — подумал я.

Связался с Сашей обговорили нюансы по шаблону. Здесь контакты. Обговорили вопрос оплаты и стоимость этой услуги.

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

В общем, таким образом я вышел на ребят из студии WEB DISCOVERY и началась работа с вебмастером Юрием.

Кто захочет обратиться к этим ребятам, держите связь с Сашей — Контакты 

веб студия Web Discovery

Теперь немного расскажу свои ощущения по работе с ребятами вебстудии, а потом дам рекомендации для всех владельцев блогов  у кого остро стоит вопрос по смене своего шаблона вордпресс.

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

Я составил техническое задание (ТЗ). Прошлись по нему. Уточнил некоторые моменты и пошел процесс.

В конце статьи вы найдете пример ТЗ, что учитывать и как его составить.

Первый этап: Составление ТЗ

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

Составление ТЗ это первое, что необходимо сделать еще до того, как вы будете обращаться к специалистам.

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

Я все составил и процесс пошел. Затем, начался второй этап.

Второй этап: Согласование дизайна

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

шапка сайта

Но в скайпе Юра все поправил, как я хотел все это видеть. Получилось так, как сейчас есть. Кто сейчас находится в мобильной версии сайта, смотрите фото ниже.

шапка сайта nikolayyakimenko.com

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

Я долго не мог понять, что там сделать.

Юра показал свое видение, но что-то мне не очень нравилось. И я начал поиски подходящего варианта.

Бинго!

Тут я нашел подходящие картинки  в виде разложенных вещей: ноутбук, ручка, тетрадка и т.д. Атрибуты любого интернет предпринимателя ;)

Юра понял задачу и быстро справился с этим вопросом. Пошли некоторые мелочи: проработка форм подписки и т.д. И получилось так.

фотоаппарат, макбук, apple

Все .

Дизайн шаблона был готов. Совместными усилиями мы с Юрой одолели и этот этап создания нового шаблона для вордпресс.

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

Мое участие в этом процессе не нужна, поэтому я занялся подготовкой «перезда» с хостинга на хостинг, так как я уже давно хотел перейти на другой хостинг.

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

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

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

Третий этап: Тестирование шаблона

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

Фух! Большая часть работы выполнена.

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

Четвертый этап: Переход на другой хостинг и «натягивание» шаблона на свой блог

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

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

На этом закончился и этот шаг.

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

Но и эта задача была удачно решена. Ниже показываю скан проверки с помощью сервиса PageSpeed Insights.

Проверка скорости сайта и ошибок для компьютеров

Фото 1. Проверка скорости сайта и ошибок для компьютеров

Проверка скорости сайта и ошибок мобильной версии

Фото 2. Проверка скорости сайта и ошибок мобильной версии

В конечном итоге все переехало и «стало» как надо. Ура!

Пятый этап: Доработка мелочей

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

Слова благодарности

Хочу выразить свою признательность Юрию-вебмастеру за выполненную работу и добросовестный труд.

Огромный респект и низкий поклон!

Что я получил на выходе?

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

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

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

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

Но необходимо смотреть в будущее, поэтому собственно, я и затеял все это мероприятие.

А теперь немного практических советов по составлению ТЗ и как составить ТЗ

Техническое задание для нового шаблона wordpress

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

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

Как составить ТЗ?

Для себя, я условно разбил ТЗ на несколько частей

Первая часть ТЗ — Дизайн или внешний вид

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

дизайн блога nikolayyakimenko.com

Рис.1 Наброски блога -Предпринимательство как образ жизни

Есть еще такое:

дизайн сайта

Рис.2 Наброски блога -Предпринимательство как образ жизни

Ничего не приходит в голову?

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

Все это описываю в ТЗ.

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

Дальше техническая сторона этого дела.

Вторая часть ТЗ — Техническая сторона

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

Третья часть ТЗ — Свои особенности

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

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

Пример ТЗ

Можете взять за основу и составить его под себя ;)

I. Внешний вид

1. Шапку необходимо сделать в виде коллажа из фоток. Основное фото

2. Аккуратно

3. Хорошее юзабилити (удобство использования)

4. Шрифт хорошо читаемый

5. Шапка блога — умеренной высоты, чтобы на ноутбуке 1366×768 кроме рисунка было видно верхнее меню и заголовок статьи

6. Название блога — Авторский блог Николая Якименко

7. Слоган должен быть указан в шапке — «Предпринимательство как образ жизни»

8. Логотип — как вариант денежные крылья из фото

9. Сайт-бар только справа, причём шириной для вставки баннеров 240×400 и 250×250, 250×440

10. Нижнее и верхнее меню блога страниц . Некоторые страницы вынести над шапкой

11. Кнопка возврата наверх страницы (кодом)

12. Футер блога (изображение которое я скинул), copyright, место размещения счётчика Liveinternet и возможность установки скрытого кода от метрики и аналитикс

13. Изюминка для блока (не знаю что) 😆

14. Форма поиска по сайту

15. Форма подписки на обновление блога справа в сайд баре обыграть фотку с крыльями от smartresponder.ru

16. Кнопки социальных сетей автора «Фейсбук» «ВКонтакте», «Google+», «Instagramm» (кодом)

17. Форма подписки на Youtube канал

18. Рубрики сайта, топ комментаторов за месяц, популярные статьи

19. Оформление комментариев (многоуровневые ответы до 10 уровней)

20. Выделение цитат на блоге

21. Шорткоды для оформления статьи

21. Место для вставки рекламной строчки Nolix или ЛайнБро

22. Favicon

23. Наличие мобильной версии

24. Скорость загрузки (в зелёной зоне google)

25. Место вставки баннеров  перед статьей сверху 2 шт 468х60 или 480х100 , в конце статьи 486х60 или 480х100 и в конце комментариев 468х60 или 480х100 + ссылки и тизерная реклама

26. С главной страницы закрыть все внешние ссылки

27. В конце статьи вывести похожие статьи, аналог на сайте http://trandinvest.ru/

28. Путь статьи указать вверху под шапкой

II. По возможности вывести кодом:

1. Защита от спама в комментариях через невидимое поле (аналог Invisible Captcha)

2. Карта блога «Все статьи» (аналог Google XML Sitemaps)

3. Постраничная навигация

4. Смайлики

5. Поздравление с первым комментарием (у меня есть страница)

6. ТОП комментаторов (в сайд баре справа)

7. Код увеличения картинок Simplebox (нужен ли ?)

III. Одна техническая вещь

Необходимо переехать на другой хостинг с Хвостинга на Мирохост. И перенести БД не только блога, а и БД скрипта приема платежей ОрдерМастер

Вот такая история.

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

С наилучшими пожеланиями Николай Якименко.


Понравилась статья? Поделись с друзьями!


Подпишитесь на новые статьи ! Я вышлю интересную и ценную информацию на Ваш e-mail, который оставите ниже. После того, как подтвердите свои данные Вы получите ПОДАРОК.

С уважением Н.Я.