Нам же для этого нужна тьма личных консультантов и всплывающих окон
Сейчас расскажу
Могут и продают. Но на большинстве сайтов они не будут продавать никогда. Потому что сделаны через жопу и кричат нам, что они фальшивые.
…
Как сделать чтобы продавали? Погоди погоди, сейчас обсудим.
Недавно знакомый отравил оценить дизайн по теме кухонь. В целом стандартный дизайн лендинга, но дойдя до секции отзывов, у меня начался нервный тик.
Задумка секции была простой: фотка, текст, имя. А теперь задай себе вопрос: продаст тебе такой отзыв?
Еще и с фоткой какого-нибудь американца 🙂
Да нет конечно. Ты подумаешь: «Копирайтер наверное сидел писал, или знакомых попросили». Копируешь отзыв с кухонь, вставляешь на диваны — профит.
А на лендинге должна продавать каждая секция. Мы не можем надеяться на одну из секций.
Как же сделать так, чтобы отзывы продавали?
Возьмем пример с кухнями. Как мы можем донести до посетителя подлинность наших отзывов?
1. Ссылка на страницу клиента. Чтобы я мог спросить клиента, действительно ли он брал кухню. Я когда что-то масштабное брал, писал 10−20 людям из отзывов. И только потом покупал. 2. Видео-отзыв. Больше доверия всегда. Хоть и видео-отзывы тоже можно заказать. 3. Видео кухни. Если человек будет снимать себя на фронталку, потом переключит камеру и покажет кухню — планка доверия к этим отзывам взлетит под потолок 4. Стоимость кухни и перечень оказанных услуг. Это в очередной раз даст ощущение подлинности отзыва
…
Тут и у предпринимателя, и у фрилансера встанет вопрос. Как мотивировать людей оставлять такие отзывы?
Сделай небольшую фишку или подарок за отзыв. Чтобы это было что-то незначительное для вас, но существенное для клиента: закончил дизайн лендинга — сделай обложку для ВК за видео-отзыв.
————
Конечно, не везде бывает возможность сделать настолько подробные отзывы. У клиента возможно их нет.
Но нам как профессионалам, нужно донести это до клиента. Отзывы — важная часть на сайте. Она может генерировать заявки. Наша задача сделать ее максимально доверительной.
Недавно обратилась знакомая с просьбой оптимизировать 4 похожих сайта.
Время загрузки сайтов было долгим, показатели тестов скорости — 0/100.
Результаты:
Снизил размер сайта в 6 раз: с 3 до 0.5 мб. Уменьшил время загрузки: с 3.5 до 2 секунд.
Какие шаги были выполнены чтобы ускорения загрузки?
Разделение кода оформления. При переходе пользователя на сайт, код оформления будет грузиться не для всей страницы, а только для первой секции сайта. А спустя несколько секунд загрузится оформление и для остального сайта, это называют — критический css. Это позволяет отложить загрузку большого количества стилей при загрузке сайта.
Сжатие изображений. Вес изображений без оптимизации довольно большой, некоторые изображения сжимаются на 90% без потери качества, это делается за счет удаления системной информации из файлов изображений.
Объединение файлов скриптов и стилей. Чем больше файлов подключается к сайту, тем больше браузеру нужно сделать запросов для корректного отображения сайта, каждый запрос — время, поэтому нам надо упростить работу браузеру и объединить все скрипты в 1 файл и все стили в 1 файл. На каждом из 4 сайтов было по 12 файлов скриптов и по10 файлов стилей. Я сделал по одному.
Минификация кода. Код нужно сжимать, делается это с помощью удаления пробелов, сокращения имен переменных, программы для сжатия пытаются по максимуму сократить количество символов в коде. Минификация кода позволяет сжать файл на 10−40% от начального размера.
Включение надстройки сжатия и кэширования сайта. Сжатие сайта позволяет уменьшить размер сайта еще процентов на 70. Кэширование сайта сохраняет в своей памяти файлы, которые не изменились и которые не требуется загружать каждый раз. Обе эти настройки были выключены на сервере.
До оптимизации:
Размер сайта: 3 мб. Время загрузки: 3.5 секунды
показатели после небольшой оптимизации, начальное значение 0/100показатели после небольшой оптимизации, начальное значение 30/100
Моя девушка — мастер маникюра ногтевого сервиса и депиляции. Она постоянно покупает какие-то новые инструменты, расходники для своих клиентов, с каждым днем их становится все больше 🙂
Иногда появляется необходимость считать себестоимость оказания одной услуги в каждом из трех направлений. Каждый раз когда мы собирались делать это, мы брали листок, ручку и калькулятор, выписывали каждый материал на листок и считали в какой бутылке или пачке сколько всего, сколько используется и что в итоге получается.
Однажды программист во мне взял вверх и я решил немного автоматизировать это процесс.
В качестве практики я сделал для любимой мини-приложение для расчета себестоимости услуг, которым она конечно не пользуется. Я тут понимаете ли стараюсь, а она до сих пор с листом и ручкой 🙂
Я надеюсь кому-нибудь из вас оно пригодится. Сайт адаптирован и выглядит корректно на мобильных, планшетах, ноутбуках.
На практике часто бывает, что сайт, оптимизированный со временем начинал загружаться за пару минут, это — катастрофа. Рекомендуемое время загрузки сайта — 4 секунды. Если сайт загружается дольше — у вас проблемы. Вы теряете свою прибыть. Пользователь уйдет к тому, кто не транжирит его время.
Часто после того как владелец сайта понимает что у него медленный сайт, на горизонте появляются тучи, гром и молнии, которые конечно сыплются на головы разработчиков сайта. Есть ли в этом вина разработчиков? Не всегда.
Конечно, не все разработчики уделяют должное внимание оптимизации, но иногда случается что и администраторы сайта замедляют сайт.
Основная причина медленной загрузки сайтов — изображения. Перед загрузкой на сайт их нужно сжать с помощью специального сервиса под названием TinyPNG https://tinypng.com/.
Это — просто: картинки которые вы хотите сжать, выделяете и переносите на этот сайт в квадрат с пунктирной границей. Затем оттуда их можно скачать по одному или архивом. Изображения теряют в весе, но качество остается тем же. Изображение сжимается путем удаления всей служебной информации из файла.
В этой гифке я показал, как мы сэкономили целых 6 мб, и это всего лишь с 5 изображений! Что если мы сожмем все изображения на сайте? Лишь этот шаг может сильно увеличить скорость вашего сайта.
Если вы хотите узнать как обстоят дела вашего сайта — напишите мне и я проведу бесплатный аудит по оптимизации.
Landing Page — это одностраничный сайт, созданный с конкретной целью — привлечение целевой аудитории. Как правило, лендинги создаются под нужды контекстной рекламы, поэтому на страницах сайта информация дана таким образом, чтобы посетитель мог быть сфокусированным на ней, а также совершил нужное действие — подписался на рассылку, оформил заказ, оставил заявку, позвонил в компанию.
Благодаря этому конверсия лендинга способна вырасти от 30% и выше. Самая главная задача landing page — привлечь внимание к товару, компании и повысить интерес к получению еще большего количества информации, совершению нужного действия(подписка, заявка, звонок).
Лендинг — это не панацея для бизнеса, это инструмент, который имеет преимущества и недостатки.
Преимущества Landing Page:
Простота создания. Лендинг можно создать и запустить за один день, не тратя много времени и денег.
Высокая конверсия. Поскольку лендинг ориентируется на определенную аудиторию и чаще всего представляет один товар, его конверсия в разы больше чем обычного сайта.
Быстрая загрузка. Даже в условиях медленного интернета посадочные страницы загружаются быстро.
Низкая стоимость по сравнению с многостраничными сайтам. За счет того что лендинг — одна страница, её создание стоит гораздо дешевле чем создание многостраничного сайта.
Недостатки Landing Page:
Точечный инструмент. Лендинг способен привлечь новых клиентов. Но задача бизнеса состоит не только в постоянном притоке новых клиентов, но и в удержании уже имеющихся. А лендинг работает здесь и сейчас.
На фрилансе, недопонимание между заказчиком и клиентом — обычное дело.
Заказчик неправильно истолковал желание клиента. Клиент недосказал свои мысли по поводу сайта. В итоге все могут получить не то что ожидали, калиент — не понравившийся проект, исполнитель — недовольного заказчика. Все может начать идти не в ту сторону уже в процессе работы над проектом. Все эти разногласия портят отношения между людьми — это плохо.
Что делать в таком случае? Как разработчику обезопасить себя от постоянных переделок, а заказчику сделать так чтобы разработчик все понял и делал все по точному указанию?
Техническое задание(ТЗ).
Техническое задание — документ, созданный заказчиком или совместно с исполнителем, в котором изложены требования, параметры и основные характеристики проекта. Документ утверждается обеими сторонами. Обычно отклонение от технического задания приводит к увеличению бюджета проекта или штрафам для исполнителя.
Составляя техническое задание для проекта, вы описываете каким проект должен получиться в итоге и что должно использоваться для его реализации. По итогу проекта с исполнителя можно будет спросить за недочеты, а исполнителю напомнить об утвержденном варианте заказчику.
Сегодня мы разберем удобный scss-миксин для ускорения работы по адаптивности наших проектов.
Для использования этого плагина вам нужно подключить его к основному файлу scss. В scss вы можете вставить код в начале файла или подключить файл командой:
Когда прописываем директиву @include _1170 в теле селектора, директива находит содержимое миксина _1170 и выполняет его в нашем селекторе. В теге селектора создается @media правило, а при компиляции в css весь лишний код выносится за скобки, в том числе и наши медиа запросы.
Давайте попробуем подключить наш миксин в основном файле scss. Используем пару миксинов для адаптивности элемента на разрешениях 768px и 480px.
Вы можете спросить: «Тогда откуда в медиа-запросе взялся класс? Мы его нигде не указывали». Это хороший вопрос. Для того чтобы понять нужно посмотреть на поведение @content в разных ситуациях.
Давайте создадим обычный миксин который просто добавляет какие-то свойства.
// Создаем простой миксин и применим его в селекторе.
@mixin test() {
@content;
}
.header {
color: red;
@include test {
font-size: 10px;
}
}
// сss после компиляции
.header {
color: red;
font-size: 10px;
}
Никакого класса не было добавлено, @content состоял лишь из того, что мы ему передали в @include {}. Из этого можно сделать вывод: если в миксине есть какая-то внешняя обертка нашего кода, @content оборачивает наш код в селектор с текущим классом.
Мы написали стили в @include _768 {}, scss в свою очередь:
Увидел что у @content в теле миксина обернут в media
Обернул наш код в селектор с текущим классом. Потом обернул то что есть в media обертку
Передал написанные нами стили
Плюсы использования миксина:
Мы можем видеть как элемент изменяется на разных разрешениях экрана на месте.
Когда нужно будет добавить какие-то свойства к элементу на разных расширениях экрана, не будет необходимости искать селектор в разных местах.
Требуется меньше кода для написания. Да, мы каждый раз прописываем @include _. Для этого есть решение: создать сниппет для каждого разрешения или общий для миксина, как это сделал я для sublime. Пример работы:
//Код миксина для sublime
<snippet>
<content><![CDATA[
@include _${1} {
${2}
}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>_media</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.scss</scope>
</snippet>
Если слова Gulp и npm вам незнакомы, прочитайте это руководство и возвращайтесь обратно 🙂
Создаем окружение для проекта с gulp-сборкой. Выполняем команду npm init в консоли и заполняем данные проекта, я в данном случае заполнил только поле«author».
npm i gulp gulp-sass gulp-group-css-media-queries --save-dev
Теперь идем в gulpfile. js и инициализируем эти пакеты.
var gulp = require('gulp'),
sass = require('gulp-sass'),
gcmq = require('gulp-group-css-media-queries');
Теперь давайте напишем таск для компиляции scss.
gulp.task('css:build', function() {
return gulp.src(['!src/_*.scss','src/*.scss']) // Взяли файлы с расширением .scss, исключили из выборки файлы, которые начинаются с символа _
.pipe(sass()) // компилируем scss в css
.pipe(gcmq()) // в полученном css группируем множество медиа-выражений в общие.
.pipe(gulp.dest('src/')) // кладем наш css файл в ту же папку
});
Напишем пару строк scss кода используя наш миксин, его мы подключим вверху файла директивой @import.
Привет! Сегодня на работе была задача сделать всплывающее окно, которое сообщало бы пользователю что есть более простой способ оформить заказ на сайте.
Заказчик хотел сделать такое окно при закрытии вкладки. Вы видели такие, когда кликали не по тем ссылкам, и попадали на сайты казино, с которых не так просто уйти.
Эту идею я сразу забраковал, по одной простой причине: когда я хочу закрыть вкладку, это значит что я хочу закрыть вкладку, а не смотреть предложения от этой компании/продавца/сайта.
Если такие окна и должны быть, они должны быть видны, но не мешать просматривать сайт.
Сначала я сделал окно с белым фоном. Я решил сделать его похожим на окно подписки.
Окно подпискиПервый вариант окна уведомления о быстром заказе.
Оно мне показалось слишком незаметным. Весь сайт белый и наличие какого-то белого окна в углу и синей кнопки которая выглядит как кнопка подписки на что-то может сделать его невидимым для пользователя.
Цветовая схема сайта — зеленая, решил попробовать сделать его зеленым, вот что получилось.
Второй вариант оформления окна уведомления о быстром заказе.
Мне понравилась такое оформление, она выделяло окно среди других элементов на этой странице. Заказчик тоже понравилось.
Осталось совсем немного:
— Анимировать появление, для того чтобы пользователь обратил внимание — Добавить возможность скрывать окно — Добавить возможность вернуть окно для перехода к быстрому заказу.
Если пользователь передумает и захочет воспользоваться формой быстрого заказа, ему придется искать его где-то еще. Мы можем позаботиться о нем и оставить окно на виду, но чтобы оно не мешало оформлять заказ.
Я решил скрыть его вниз, как это сделать в онлайн-чатах. Если пользователь захочет его вернуть, он просто нажмет на него и оно выплывет снова.
В конце чуть поправили внешний вид по пожеланию заказчика.
Если вы ругаетесь на меня за внешний вид окна — напишите мне в комментариях или личном сообщении и я с радостью приму все замечания и предложения.