Совсем не много новостей

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

Читать далее «Совсем не много новостей»

Разработка квиз лендингов

Принимаю заказы на создание квизов различной тематики и видов. Работаю качественно в сжатые сроки. Есть протестированные конверсионные связки (шаблоны)

Один из вариантов готовой работы

Примеры моих квизов

Сайт на два экрана. Тематика одобрение ипотек.

Квиз-форма на сайте

Лендинг состоит из двух блоков и квиз-формы, которая всплывает по клику. Сама форма содержит различные типы вопросов.

Просмотреть: http://xn--90afeaaqbbrzhbgnj3b.xn--p1ai/

Тема кадастровые услуги, вынос границ участка.

Один из вопросов формы

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

Пример 1: Вынос границ.

Пример 2: Технический план.

Квиз по инвестированию (покупки) недвижимости.

Секция с квизом на лендинге

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

Просмотреть: Коста Наварино Квиз

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

Калькулятор по расчету стоимости кухни

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

Заказать разработку

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

  • Стоимость работ: 6 тыс. рублей.
  • Срок. 2 суток (возможно быстрее)

Так же, если у вас есть на примете определенный квиз — я могу сделать его копию. Цена и сроки такие же.

Для заказа достаточно написать мне в личку ВК))

ЗАКАЗАТЬ КВИЗ

Ответы на дополнительные вопросы

Можно ли создать квиз на WordPress?

Да, есть специальные плагины для этого, либо я могу внедрить его кодом (пример с недвижимостью выше)

Можно ли сделать квиз на тильде?

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

Подключаете ли вы: Метрику, аналитику, пиксели, CRM к квизу?

Да, подключаю. Вам нужно будет дать доступ к метрике-аналитике или прислать уже готовый код для установки. А я уже всё подключу и настрою. CRM — подключаю за отдельную доплату (1000 рублей).

Создание лендинга по Инвестированию в недвижимость

Разработка лендинга по инвестированию в элитную недвижимость Costa Navarino. Текст составлял копирайтер, я делал только дизайн и техническую начинку.

Задачи на проект

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

Обсудив все детали я приступил к проекту.

Разработка

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

Квиз-форму я сделал отдельно, чтобы не нагрузать сайт лишними плагинами. Разместил её на странице через блок «HTML». Квиз анимационный, блоки плавно меняются вместе с картинкой слева. Выглядит плавно и круто))

Квиз полностью стилизован под дизайн лендинга.

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

Примеры разного оформления блоков и секций

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

Сейчас проект на стадии предзапуска. Уточняются некоторые детали.

Ссылка на проект: Lekvi Costa Navarino

Создание квизов и их эффективность

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

Преимущество квизов

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

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

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

Поля квиза могут быть абсолютно разными.

Они гораздо дешевле и быстрее в создании чем обычный лендинг. Об этом и речь дальше.

На сколько быстро и дешево создать квиз?

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

Я делаю квиз (при наличии всех скромных данных в виде списка вопросов и контактов) в течении суток. Стоимость от 5 до 7 тыс. рублей в зависимости от сложности задачи. Если нужно, подключаю вашу CRM. Это квиз не на конструкторе, а пишется в ручную на заготовленных мною шаблонах. Примеры квизов, которые делал я:

В силу своей компактности и функционала квизы выигрывают по многим параметрам. Их ставят как в полноценные лендинги так и (чаще) делают квиз-лендинги. Пример коротких лендингов в списке выше (2 и 3 квизы).

Вывод

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

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

Если хотите обсудить создание квиза пишите в личку ВК (КЛИК)

Google Page Speed или 9 кругов ада оптимизации

Недавно завершил работы по оптимизации лендинга. Сделал его не много быстрее и компактнее, как того желал клиент.

Поставленная задача

  • Главное — добраться до зеленой зоны (90 баллов) в Google Pagespeed.
  • Сделать лендинг еще компактнее.
  • Скрыть левый блок с текстом на мобильной версии.
  • Сделать форму мельче, чтобы на мобильном она помещалась на первом экране.
Основные правки на странице. Сменить отступы, скрыть блок текста на мобильном и уменьшить форму, чтобы помещалась полностью на экране
Ключевые изменения внешнего вида страницы
Вид мобильной версии сайта до изменения

Нужно — значит сделаем.

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

Внесение изменений по дизайну

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

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

Дальше я оптимизировал изображения. Изначально фото менеджера было в формате PNG и имело большой размер. Особенность формата PNG в том, что можно сделать картинку без фона. НО! Этот подход лучше использовать для иконок маленького размера или отдельных небольших элементов. Так как у этого формата картинок есть огромный минус — вес файла. Это фото весило 415кб! Что по меркам сайтов критически много для одной картинки.

Я уменьшил фото до нужных размеров, перевел его в формат JPG. У картинки появился фон. Я подобрал его специально по цвету, чтобы он совпадал с фоном сайта (серым). Таким образом я:

  1. Уменьшил вес картинки с 415кб до 44,7кб (в 10 раз Карл! без потери в качестве!).
  2. Сохранил опрятный вид подобрав одинаковые цвета для фото и фона сайта.
Внизу под фото можно увидеть, что выбран один элент (фото) и его вес. Как видим, разница в 10 раз)
Разница в весе фотографий до обработки (слева) и после (справа)

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

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

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

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

После настройки порядка загрузки и отключения лишнего я начал сжатие скриптов и стилей.

Что дает сжатие (минификация по научному)? Дает снижение веса файла скриптов или стилей сайта, что ускоряет его загрузку.

Например, в данном случае у меня было 3 документа с стилями сайта. После минификации получился один документ с более низким весом. Из кода были удалены пробелы, комментарии разработчиков. Это всё уменьшило вес.

Точно так же поступил с скриптами. Вес некоторых файлов уменьшился в двое.

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

Оптимизированные скрипты без пробелов и строк заняли всего 3 строки кода и загрузятся быстрее, чем один файл до оптимизации на 10 308 строк
Пример оптимизации. Слева один из скриптов сайта, справа уже оптимизированная версия состоящая из 6 документов в одном.

Очень важно, при таком объединении, сохранять тот самый порядок загрузки. Если напутать и не правильно собрать этот «пирог» из файлов, то сайт перестанет отображаться правильно. Потому настоятельно советую делать копии файлов перед каким либо началом работ с ними!

Все эти изменения очень сильно уменьшают вес страницы и ускоряют её загрузку.

Гонимся за заветными 90 баллами в Google Page Speed

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

Перед нами простейший лендинг на одну страницу. Без тяжелых слайдеров, скриптов навигации, видео и прочего. Но влезть в те самые 90 баллов было довольно сложно. Гугл ругался на… на самого себя по сути. Он возникал, что загрузке страницы мешает Google Tag Manager (Тег менеджер от гугла, далее по тексту ГТМ).

А что в ГТМ было? Стандартный набор там: метрика, аналитика, пиксели.

Убираем метрику и оп — 86 баллов уже. Убираем пиксели — оп, 94 балла. Забавно, правда? То есть нужно иметь абсолютно голый сайт, чтобы войти в ту заветную зеленую зону.

Так же большую роль играло место подключения ГТМ на странице. Я настоятельно рекомендую ставить его буквально перех </head>, а не в самом его начале после <head>

Путем проб, оптимизаций и танцев с бубном) Я все же добился 89-90 баллов не удаляя ни каких метрик или пикселей. Это правда больше чудо))

Результаты работы

Страница стала помещаться на один экран, как на ПК, так и на смартфонах. Теперь всё очень компактно.

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

Сайт набирает нужные 90 баллов (до оптимизации было в районе 74 баллов). И работает оочень шустро. Клиент остался очень доволен результатами.

Обновленные компактные версии сайта для мобильных и ПК
Мобильная и ПК версия после всех работ

Самый лучший хостинг за 8 лет работы на фрилансе

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

Важные параметры при выборе хостинга

Выбирая хостинг я изучаю несколько параметров помимо цены, и это:

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

Дальше идут вещи, которые ты можешь узнать либо написав в ТП хостинга, либо уже только «пощупав» лично. Я обычно»щупаю» или сталкиваюсь просто с чем либо) в это входит:

  • объем памяти для PHP (да, есть такой параметр, который влияет на работу твоего сайта, правильное его название «PHP memory_limit»);
  • нагрузка на процессор;
  • работа тех. поддержки хостинга.

Если тебе не хватает этих «параметров», тебе придется переходить на тариф выше. Но момент еще вот в чем, у многих БАЗОВОЕ значение этой памяти ужасно маленькое. Например, 64Mb всего лишь, когда если ты делаешь мощный сайт нужно хотя бы 256Mb и расширить самому — нельзя, только иди на новый тариф. Но благо есть хостинги, которые на любом тарифе позволяют расширить этот объем)

О том как настроить хостинг я расскажу в отдельной статье

Какой хостинг использую я

Вот уже больше 3 лет я остановился на работе с хостингом fornex. От отлично соответствует всем параметрам, имеет множество гибких тарифов и у него идеальна тех поддержка. Сейчас подробнее.

Первая оплата хостинга в 2015 году

  • Сервера хостинга можно выбрать в: России, Европе, Украине. В соответствии с законом нужно разместить сайт на территории России.
  • Дешевые тарифные планы. Самый простой тариф (его хватит для небольшого блога!) стоит 1 евро (около 70-80 рублей, цены на некоторых страницах в евро, но расчет в рублях, я даже с Украины плачу через рубли)
  • У каждого тарифа можно поднять лимит памяти до 256Mb. Изначально стоит меньше, так как многим сайтам столько не нужно, зачем же в пустую использовать. Кому нужно — легко может подключить в админке.
  • Тех. поддержка — отвечает быстро (обычно в течении часа, может затянуться на несколько часов), ежедневно и 24 часа в сутки! А главный её плюс в том, что там работают адекватные специалисты.

Что-то сделалось на сайте, перестал работать? Они исправят ошибку. Да, если там у тебя плагин не работает — это уже твои проблемы. Но если сайт перестал быть доступен — они все быстро чинят.

А нашел я его чисто случайно. Я листал развлекательный сайт пикабу, и вижу в подвале сайта логотип хостинга. Думаю, если сайт с посещаемостью 780 тысяч людей в сутки (на то время) хостится у него, то почему бы и мне не попробовать! Попробовал и не пожалел) Как оказалось позже, этот хостер размещает у себя и другие крупные проекты из РУ-сегмента интернета.

Ссылка на хостинг — Форнекс

Всем хороших хостингов!

 

Где купить домен, чтобы потом не переплачивать

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

Основные отличия регистраторов доменов

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

Подводный камень намбер ван. Смотри цену продления домена. Зачастую первый год ты платишь (допустим) 600 рублей за домен, а на второй уже надо выбрать специальный тариф продления стоимостью от 1300 рублей и выше. Да, да. Привет рег ру. 

Покупай домен ру за 190 рублей, продлевай за 900)))

Прикольно, правда?

Казалось бы всё. Домен купил, переплатить никто не должен. Ага. Сейчас. Как только тебе понадобиться доменная почта типа post@moysayt.com ты бьешься лбом о второй камень.

Подводный камень намбер два. Заблокированные функции добавления MX записей к домену. Чтобы активировать эту опцию — дай денег. Ценник абсолютно разный то 300 руб. в месяц, есть и дешевле, а есть дороже. Но у многих это вообще бесплатная БАЗОВАЯ функция.

Что? 300 руб мало? Ну простите, это 3600 в год. У меня хостинг дешевле в ДВА раза, чем эта банальная опция за записи.

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

У кого почта платная?

  • godaddy — точно, около 300 рублей. (вообще не пойму, почему он популярен так, с его дизайном и функционалом)

За рег ру, точно сказать не могу, вроде как бесплатная.

Как избежать переплаты при покупке домена?

Легко. Пишите в тех. поддержку регистратора и уточняйте информацию по следующим вопросам:

  • «Сколько стоит продление *зона вашего домена*?»  (зона это .ru, .com, .рф и т.д.)
  • «Можно ли бесплатно добавлять DNS записи типа MX, TEXT для домена или это отдельная услуга?»

Либо же, можно детально изучить сайт регистратора и найти эту информацию.

Вот как-то так. Такие два небольших момента, а создают проблемы.

Что я могу посоветовать

Я зачастую беру домены у «reg.ru«. Я смотрю есть ли переплата за домен, если нет или она не большая — беру там. Либо, еще есть регистраторы: «nic.ru», «2domains.ru». Но сейчас, у моего хостинга начала появляться возможность купить домен, потому буду прекращать сотрудничество с рег.ру.

 

Создание блога про смартфоны

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

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

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

Одна из секций с дополнительными блоками

Такие блоки можно добавить двумя способами:

  1. Через плагины
  2. В шаблон страницы поставить код

Я выбрал вариант 2. Почему? Во первых, лучше не использовать плагины там, где можно обойтись без них. Это лишняя нагрузка на хостинг, а зачем оно нам? Блог должен быть шустрым и легким. Во-вторых, заказчик не много ориентируется в коде, ему не составит труда вставить рекламный код в заранее заготовленное место. Да, я вставил в шаблон специальные пометки, между которыми можно ставить свой код.

Вот так выглядело это в коде страницы. Сам скрин — пояснение куда вставлять код)

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

Так же были настроены SEO плагины, проделана оптимизация.

Подведя итоги

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

Просмотреть сайт можно тут: Про смартфон

Сайт для международных грузоперевозок

На сей раз делался сайт для компании, которая занимается международными грузоперевозками. Основными пожеланиями клиенты были  направленны на:

  1. Нестандартный дизайн
  2. Компактность сайта

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

Создание сайта

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

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

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

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

Просмотреть готовый сайт: Сантерин — международные грузоперевозки

Визитка для Владимира Гурова + тест

Разработка сайта визитки и теста с выдачей результата в зависимости от ответов по финансовой тематике.

Задача на проект и реализация

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

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

  • Благодаря обычной верстке лендинг получился очень легкий.
  • Весь дизайн сделан в строгом, выдержанном стиле и выглядит очень опрятно.
  • Тест разработан и выполняет свои функции на 100%
  • Все страницы адаптированны под мобильные устройства
  • Если нужно добавить текст или убрать что-то в содержании клиент очень легко может это сделать сам без «ковыряний» в коде.

Ссылка на визитку — Владимир Гуров

Ссылка на тест — Узнайте свой тип инвестора

 

Шапка страницы с тестом и оформление вопросов