Поступил заказ на создание блога о смартфонах. Новости, анонсы моделей, характеристики, тесты и т.д. Стандартный статейный блог. Все должно было быть в минималистичном стиле + необходимы особые доработки.
Разработка сайта
Заказчик дал схему расположения блоков и основные пожелания по сайту. Особыми пожеланиями было размещение дополнительных секций до текста статьи и после, для рекламных блоков. Вот пример одной из секций, где есть один большой блок и 3 небольших.
Одна из секций с дополнительными блоками
Такие блоки можно добавить двумя способами:
Через плагины
В шаблон страницы поставить код
Я выбрал вариант 2. Почему? Во первых, лучше не использовать плагины там, где можно обойтись без них. Это лишняя нагрузка на хостинг, а зачем оно нам? Блог должен быть шустрым и легким. Во-вторых, заказчик не много ориентируется в коде, ему не составит труда вставить рекламный код в заранее заготовленное место. Да, я вставил в шаблон специальные пометки, между которыми можно ставить свой код.
Вот так выглядело это в коде страницы. Сам скрин — пояснение куда вставлять код)
Так же было пожелание сделать виджет с кнопками соц сетей и яндекс дзеном. Опять же, я просто написал небольшой HML код, дабы избежать лишней нагрузки. Выглядит очень здоровски.
Так же были настроены SEO плагины, проделана оптимизация.
Подведя итоги
Получился добротный классический блог. Отлично работает на всех устройствах. Сайт содержит все необходимые функции и легко администрируется. Выданы все инструкции по работе со всеми функциями.
На сей раз делался сайт для компании, которая занимается международными грузоперевозками. Основными пожеланиями клиенты были направленны на:
Нестандартный дизайн
Компактность сайта
До этого я не делал сайтов по грузоперевозкам. Поэтому пошел за советом к своему товарищу директологу. Создать сайт это одно, а создать сайт, который будет продавать это совершенно другое. А о конверсии может легко подсказать директолог с большим опытом работы. Выписав у него основные факторы сайта я начал работу.
Создание сайта
Как обычно всё началось с дизайна. Я перепробовал различные виды, изучал сайты-примеры клиента. Путем проб и подбора мы пришли к готовому варианту. Все картинки, которые я использовал на сайте, тщательно обработаны, дабы сайт не выглядел шаблонно (как у всех). Вдобавок, я не беру картинки с первых страниц гугла, а ищу глубже и именно те, которые нужны. И так на всех сайтах одинаковые картинки)
Дальше пошла разработка сайта. Сайт создан на WordPress, настроен хостинг, установлены плагины SEO оптимизации. Дополнительно была создана доменная почта.
Сайт очень легко администрируется. Разработка велась при помощи очень удобного конструктора, потому работа с сайтом для клиента очень проста. Клиент может легко добавить информацию или скрыть. Есть заготовки шаблонов страниц (если нужно добавить новую). Тем более, вместе с готовым сайтом я выслал ряд подробных видео инструкций по работе с сайтом, где рассказал о всех функциях и показал как с ними работать.
Получился очень компактный проект. Все страницы на виду, вся информация расположена компактно. Зайдя на сайт, человек сразу видит перечень услуг и может их легко изучить.
Разработка сайта визитки и теста с выдачей результата в зависимости от ответов по финансовой тематике.
Задача на проект и реализация
Заказчик поставил задачу разработать тест, который бы выдавал варианты ответа в зависимости от набранных балов. Дополнительно нужна была визитка в строгом стиле для финансового советника.
Так как это статичный сайты, которые не будут наполняться в дальнейшем я решил сделать их обычной версткой. И затем добавил админку для лендингов — textolite.
Благодаря обычной верстке лендинг получился очень легкий.
Весь дизайн сделан в строгом, выдержанном стиле и выглядит очень опрятно.
Тест разработан и выполняет свои функции на 100%
Все страницы адаптированны под мобильные устройства
Если нужно добавить текст или убрать что-то в содержании клиент очень легко может это сделать сам без «ковыряний» в коде.
В этот раз делал сайт для студии креативного дизайна «Made Whith Mood». Делают любые элементы декора. Основное направление — медальницы (они же холдеры или подставки для медалей). Потому было решено сделать сайт, а страницу с медальницами оформить как лендинг для отдельной рекламы.
Задачи на проект
Нужно было наладить продажу медальниц на заказ. Это основное направление, но есть еще другие услуги. Поэтому решили делать полноценный сайт, а страницу с медальницами оформить как лендинг.
Дополнительно оформлены сообщества в ВК и инстаграм.
Разработка сайта
Сайт нужен многостраничный, потому разрабатывать стал на WordPress. Установил движок сайта, добавил плагины для SEO, плагины для составления лендингов.
Основные страницы сайта было решено сделать не сильно яркими, в шапке сайта расположил контакты для быстрой связи
Общий вид шапки сайта
Дальше на главной пошла информация о компании, их продукции. Форма заказа и 3 основные категории изделий
3 основные категории изделий
Чуть позже, мы добавили еще блок с статьями. Да, для сайта клиент написал не большое количество статей, чтобы сайт добавить в поисковые системы.
Лендинг для продажи медальниц
Медальницы это подарок для спортсменов, чемпионов. Потому он выполнен в насыщенных тонах.
В шапке у нас получился заголовок страницы, слайдер с примерами работ (не просто готовое изделие, а уже фото клиента). Со временем над заголовком мы прикрепили видео презентацию медальницы для увеличения конверсий. Переходы между блоками не делал ровными, чтобы сайт не выглядел «скучно» и уныло.
Дальше пошли блоки «как мы работаем», фото галерея готовых работ, блок «вопрос-ответ» и формы заказа.
Блок «Наши работы»
В целом страница лендинга получилась не слишком длинная, но при этом она содержит всю полезную информацию, примеры работ и не выглядит тускло.
Подведя итоги
Проделал большой объем работ:
Настроил хостинг для максимальной продуктивности сайта
Создал сайт: разработан дизайн с учетом пожеланий клиента, перенес его на WordPress, сделал мобильную адаптацию
Создал продающий лендинг с отдельной услугой. Лендинг очень удобен в администрировании, можно легко добавлять и убирать блоки, создавать копии страниц под другие услуги
Нарисовал шапку для сообщества ВК и инстаграм
Настроил Google Adwords и оптимизировал её
Наполнил сайт информацией
Добавил метрику и пиксели (ВК и FB) на сайт.
Добавил сайт в поисковые системы.
Помимо этого обучил работе с сайтом клиента. Как добавлять информацию, редактировать или убирать. Показал как публиковать статьи и что нужно добавлять в них. Рассказал и показал как работает рекламная сеть Google.
Необходимо было создать сайт для производителя мебели. У них уже был сайт, который разработан лет 10 назад. Имел популярный на то время дизайн и установлен на OpenCart тогдашней версии. Так как у компании за это время изменились направления работы, с серийной мебели они перешли на мебель по индивидуальным заказам было решено и обновить сайт и продвигаться через интернет.
И так, задачи по проекту
Разработать новый сайт-каталог с легким дизайном и хорошей подачей информации.
Наполнить контентом
Сайт должен легко администрироваться
Установить пиксели и аналитику
Страницы решено было сильно не растягивать. Сделать короткими но с хорошей подачей материала.
Отдельным плюсом было наличие фотографий готовой мебели, которая уже используется у клиентов заказчика.
Разработка сайта
Сайт разрабатывал на WordPress. Создана брендированная тема для сайта при помощи современного конструктора страниц. Почему он?
Сайт состоит из нескольких «страниц-лендингов», на которых располагается вся информация. Если бы я сделал страниц через код, то клиенту при правках пришлось бы каждый раз обращаться ко мне, ждать внесения правок или нового контента. А так, он сам или его помощники могут внести любые правки и добавить информацию в течении 10 минут играясь с конструктором. Как с ним работать я показал, записав подробную инструкцию.
При этом, это не те старые конструкторы, которые ужасно работают на мобильных устройствах и создают множество лишнего кода. Это адекватный, современный конструктор, который работает четко и не создает особых доп. нагрузок. Еще один достойный плюс, шапка и подвал сайта редактируются в одном месте, а не на каждой странице отдельно.
Установил SEO плагины для работы с продвижением сайта. Так же добавили карту с пометкой физического расположения офиса компании Круиз через гугл карты.
Все страницы наполнили контентом, добавил формы захвата. Проработал мобильную версию сайта, доработал все мелочи. В итоге получился компактный, стильный сайт-каталог.
Квизы сейчас очень популярны. Они удобные, просты для пользователей, хорошо конвертят и не требуют больших трудозатрат в разработке.
Задача на сайт
Мне поступила задача создать квиз на основе определенного сайта, только совершенно другой тематики. Задача есть — нужно делать.
Оригинальный сайт был в 1 экран. А нам нужно было разместить больше информации. Потому я увеличил лендинг, добавил второй экран.
Получив список вопросов для «теста» я переработал базу самого квиза под нужные задачи. Обновил дизайн, доработал хромающую мобильную версию оригинала.
В итоге
Проведены работы по созданию сайта по примеру определенного проекта.
Разработан новый дизайн полностью. Ни какого плагиата
Добавил новые блоки на сайт. Вместо одного экрана получилось 2 с половиной.
Часть квиза (теста, формы заявок) — переделана под вопросы клиента.
Подключил цели, метрику, аналитику
Сделал «мобильную» версию сайта.
Добавил страницу «Спасибо» для отслеживания конверсий.
Добавил «политику конфиденциальности»
Вместе с готовым квизом заказчик получил удобную админ панель, благодаря которой он в два клика меняет любой текст на сайте. Либо вставляет нужный, дополнительный код (виджеты чата, пиксели) самостоятельно БЕЗ ковыряния в хостинге и файлах. Для этого использовал админку для лендингов — textolite.
Полная переработка старого сайта на новый лад. Переработан дизайн и добавлена админпанель.
Задача:
Обновить старый дизайн сайта
Добавить админ панель, в которой можно легко вносить правки по сайту
Сделать сайт «мультиязынчым». Добавить русский язык и украинский.
Компания работает на протяжении многих лет, дизайн сайта уже явно знаком многим людям и представителям других организаций (компания Банзай работает с гос. учреждениями и другими крупными компаниями).
Изначально я подобрал несколько вариантов дизайна. То, что сейчас более популярно. Клиенту не захотелось отходить от основного дизайна и тогда было принято решение просто «освежить» дизайн старого сайта оставив основные признаки.
Сохранить основные цвета
Сохранить анимацию в шапке сайта
Сохранить компактность дизайна
Изначальный дизайн сайта компании БанзайВид содержимого одной из страниц
Еще раз изучив сайт, я набросал еще раз план, как можно его обновить. Сложность состояла в двух вещах:
Компактность. Сейчас этот стиль очень редко используется с таким небольшим количеством данных. Обычно, компактное расположение объектов отлично смотрится в новостных сайтах или крупных порталах, форумах. А тут минимум контента. Не большая картинка, да два абзаца текста (в лучшем случае).
Анимация в шапке. Клиент еще давно заказал красивую анимацию. Смотрится восхитительно. НО. Анимация выполнена на «флеше» (расширение файла .swf). Сейчас этот формат не поддерживается браузерами. Он либо не работает, либо вместо него появляется отвратительное серое окно с просьбой «Кликните, чтобы активировать флеш плеер», согласитесь, так себе ситуация.
Решение проблем и разработка
Я работаю с движком сайтов WordPress, потому и этот сайт я на него установил. При работе я использовал современный профессиональный конструктор страниц, который позволяет создавать отдельно: шапку сайта, подвал сайта, основное наполнение. По сути, создал брендированый шаблон компании.
Нет, этот конструктор не нагружает хостинг и не создает много дополнительных кодов. Он работает с современной версии создания страниц, потому нагрузка минимальна. Помимо этого, он работает на версии PHP 7.0, она сама по себе работает в два раза быстрее предыдущей версии (5,6).
Что мне это дало? Мне, толком ничего. А вот клиент теперь легко, в пару кликов может менять любые блоки на сайте, добавлять новую информацию и редактировать старую. Не залезая в коды, а просто «играясь» с конструктором. Чтобы не возникало трудностей я записал четкую видео инструкцию по работе с сайтом, как редактировать каждый блок, как работать с страницами.
Для мультиязычности я использовал достаточно популярный и мощный плагин WMPL. Он отлично справился с своей задачей.
Как и говорил выше, для быстрой работы сайта я настроил хостинг. Перевел программную часть на версию PHP 7, она в два раза быстрее популярной PHP 5.6. Добавил оперативной памяти в настройках, вместо 64мб стало 256мб.
На хостинге, который я использую в работе это разрешено. Изначально они дают минимальный объем, но если ваша задача требует большего, вы можете самостоятельно добавить себе мощностей на максимально доступный уровень по тарифу. Думаю это очень разумно, нет лишней нагрузки на сервера, каждый берет столько, сколько нужно. На многих это ограничено или доступно за дополнительные деньги.
Теперь вернемся к задачам. Совместить старый дизайн, компактность и современность оказалось достаточно сложной задачей. Сложной, но выполнимой. Уже испробовав несколько вариантов «Современного дизайна» я перешел к созданию «обновленного». Путем проб получился отличный дизайн, который очень похож на старый, но при этом смотрится лучше, свежее.
Анимация. Я скачал редактор флеш анимаций и «разобрал» готовую анимацию на множество файлов. После этого, я сохранил её как обычную гифку, которые мы часто видим в интернете. Но столкнулся с её весом)) Весила анимация почти 20Мб! Это губительно для сайта. Тогда, я решил преобразовать анимацию в видео. Это было верным решением. Видео весит всего 160кб. Я установил его в шапку сайта, поставил автовоспроизведение и зациклил, чтобы оно работало по кругу. Получилось отлично)
Что в итоге?
В итоге у меня получился хороший, компактный сайт с удобной навигацией. Старые клиенты сразу узнают сайт компании и не будут испытывать дискомфорта. Клиент же доволен получившимся результатом. Самое важное, сохранили анимацию и добавили второй язык на сайт, это было не менее важными задачами.
Разработан новый сайт на движке WordPress
Я сохранил стилистику старого дизайна, сохранив узнаваемость.
Восстановили анимацию и переработал её в современный формат
Добавлена удобная админ панель
Добавлена мобильная версия сайта
Добавлен второй язык для удобства пользователей
Обновлены фото на сайте, добавлены новые страницы и свежие сертификаты
Подключили новый хостинг с более высокой мощностью (до этого сайт находился на хостинге разработчика первой версии сайта)
Сейчас работа с клиентом продолжается. Мне постепенно присылают перевод страниц и я занимаюсь поддержкой сайта и его наполнением.
