Те, кто открывают свои бизнес-страницы сразу в нескольких соцсетях, нередко начинают с кросспостинга — автоматического дублирования одного поста во всех аккаунтах. Как результат: в одной сети пользователи активно лайкают и расшаривают посты, в другой — контент остается практически без внимания. Как сделать так, чтобы во всех социальных сетях ваши публикации были востребованы и работали расскажет автор текстов для бизнеса Ольга Тонкушина.
Я не могу сказать, что считаю кросспостинг “абсолютным злом”. Это удобный инструмент, который экономит время и упрощает работу. Однако нужно учитывать, что в каждой соцсети присутствуют разные сегменты вашей целевой аудитории. И если вы пишете посты для одного сегмента с его индивидуальным менталитетом и характером, все остальные в это время “проходят мимо”.
Как все успеть? Если я буду писать разные посты для всех соцсетей, мне некогда будет заниматься бизнесом!
Верно, поэтому не распыляйтесь на множество площадок. Достаточно двух-трех, которые лучше других подойдут вам по демографии пользователей и характеру контента. Так вы сможете оперативно корректировать объем текста и вид визуального контента для разных сообществ.
Стратегия «Нельзяграм» в ВК: как адаптировать соцсети
Я расскажу, как адаптировать посты для ваших бизнес-страниц в Facebook, ВКонтакте и Instagram. Без учета Одноклассников? они являются тремя самыми популярными социальными сетями в России.
Всегда считалось, что в Фейсбуке большей популярностью пользуются длинные посты. На самом деле это не совсем так. Больше всего активностей собирают короткие посты, длина которых не превышает 160 символов (согласно исследованиям Popsters ). По другим данным посты, которые содержат всего 80 символов, получают на 86% больше перепостов и лайков. Следующими по популярности идут длинные посты — от 1000 символов. На тексты средней длины (160-1000 символов) реагируют меньше всего.
Пользователи Facebook предпочитают “умные” и эмоциональные тексты. Люди в Фейсбуке с удовольствием воспринимают интересные идеи и оригинальные мысли, но нетерпимо относятся к штампам, не боятся критиковать и высказывать свою личную точку зрения. Они любят читать чужие истории — так что смело делитесь своим опытом и кейсами, будьте искренними, вовлекайте ваших подписчиков в обсуждение. Это особенно важно, потому что алгоритм выдачи новостей Фейсбука отдает приоритет новостям с комментариями.
Если вы размещаете в ФБ длинные посты и хотите, чтобы их читали, придумайте цепляющий и даже немного провокационный текст для первого абзаца. А для последнего — вопрос или спорное суждение, вызывающее у пользователей желание высказать свою точку зрения.
Давайте как можно больше полезной ценной информации, решающей проблему вашей аудитории. И сопровождайте текст видеороликами.
- Во-первых, они увеличивают время просмотра поста, что тоже учитывается алгоритмом Фейсбука.
- Во-вторых, в ФБ посты с видео чаще комментируют, лайкают и расшаривают.
Хэштеги на Facebook востребованы гораздо меньше, чем в Instagram, так есть ли смысл засорять свое сообщение решетками с трудночитаемыми словесными конструкциями? Достаточно трех хэштегов, наиболее полно раскрывающих смысл вашего поста. Придумывайте забавные хэштеги — хорошее чувство юмора оценят по достоинству.
Учим CSS | Адаптация сайта под любые устройства
ВКонтакте
В ВК пользователи тоже активнее взаимодействуют с короткими постами. Сокращайте тексты до 160 символов, а если не получается, постарайтесь уложиться в 500-700 знаков. Полностью видны сообщения длиной до 300 символов, все остальное скрывается под кат.
Серьезная статья-исследование, заинтересовавшая пользователей Фейсбука, скорее всего, не зайдет в ВКонтакте. Здесь гораздо лучше работает развлекательный контент, вероятно, потому что здесь присутствует более молодая аудитория.
Откажитесь от скучных официальных сообщений, креативно подходите даже к написанию новостей вашей компании. Тон и стиль сообщений могут быть более свободными.
Кейсы и полезные материалы в ВК востребованы не меньше, чем в Фейсбуке. В ваших постах должна быть видна личность, так что авторский контент “рулит”!
Максимальный уровень вовлечения показывают фотографии, но ни в коем случае не безликие стоковые. Примелькавшиеся картинки и демотиваторы тоже просто пролистывают в поисках чего-нибудь более оригинального. Так не разочаровывайте вашу аудиторию, создавайте эксклюзивные изображения или хотя бы ищите не такие растиражированные. Они должны отвечать двум условиям: ассоциироваться с вашим бизнесом и являться продолжением истории, рассказанной в посте.
Аудитория ВК хорошо воспринимает хэштеги, но не переусердствуйте. Замечено, что пользователи намного реже забирают к себе на стену посты с метками. Есть данные, что при наличии больше десяти хэштегов поисковая система ВК не видит ни одного — то есть они становятся абсолютно бесполезными и только засоряют сообщение. Достаточно двух-трех ключей. Иногда можно и вовсе обойтись без них.
Брендируйте размещаемые картинки, оформляйте их по единому стандарту — это улучшит визуальное восприятие контента и повысит запоминаемость вашего бренда.
Обвинения Instagram в несерьезности давно уже не актуальны. Эта социальная платформа показывает высокий уровень вовлеченности пользователей. Причина — хорошо воспринимаемый визуальный контент, на знакомство с которым достаточно пары секунд. Некоторые магазины со своих аккаунтов в Instagram получают до 80% покупателей!
Вы удивитесь, но с гораздо большим удовольствием подписчики лайкают и комментируют фотографии с развернутыми комментариями — до 1000 символов и выше. Посты, состоящие из фото и одного короткого предложения, менее популярны.
Избегайте прямой агрессивной рекламы, она вызывает негатив. Когда вы размещаете отчеты о мероприятиях, новинки ассортимента, портреты довольных клиентов, поделитесь своими эмоциями, чтобы было видно вашу личную заинтересованность в том, что вы делаете.
Из нескольких фотографий, например, с выставки, можно сделать эффектный коллаж. Продаете одежду? Покажите, как юбка (брюки, жакет, куртка) будут смотреться в сочетании с другими предметами гардероба. Украшения на модели привлекают больше внимания, чем на витрине. Как правило, фото не может передать все возможности использования товара, вот здесь вам и пригодится правильно написанный текст.
Instagram, в отличие от Facebook и ВК, не предусматривает размещение ссылок в постах, поэтому уточняйте, что активная ссылка находится в профиле.
Для алгоритма выдачи постов Instagram важно количество лайков и комментариев, которые собрал ваш пост. Чем выше вовлеченность аудитории, тем больше пользователей увидит вашу публикацию.
Хэштеги в Инстаграме очень востребованы, нередко они занимают больше места, чем сам текст. Вы наверняка видели публикации без текста, где сложносконструированная колонка состоит из трех десятков нетематических хэштегов, собранных в надежде на привлечение чужой аудитории. Не надо так. Придумайте ваш личный уникальный тег, добавляйте его в каждый пост, а к нему — только те ключи, которые раскрывают смысл вашего поста.
А теперь подведем итоги
- Прежде всего соцсети созданы для общения, так общайтесь! Не публикуйте только продающие посты, разбавляйте их личными историями и необычными фактами.
- Не бойтесь писать в Фейсбуке короткие посты, а в Инстаграме — длинные. Главное, чтобы они были разнообразными, полезными и вызывающими эмоции.
- Чем больше хэштегов, тем хуже они работают. В ФБ не рекомендуется использовать больше трех хэштегов. В Инстаграме можете напечатать в десять раз больше, но уже через несколько часов они “сгорят”, то есть перестанут приводить посетителей в ваши посты.
- Для повышения интереса к вашим постам используйте видеоролики в ФБ, уникальные и цепляющие фотографии в ВКонтакте и Инстаграм. Брендируйте контент.
Пользователи, подписанные на ваши бизнес-страницы в разных соцсетях, оценят ваше отношение к делу и непритворный интерес к потребностям аудитории. При общении с подписчиками в различных сообществах пробуйте разные форматы, используйте неформальные подходы, варьируйте время размещения постов. Реакция аудитории позволит выстроить систему, оптимальную именно для вас.
«Удачная идея» знает, что
Ольга Тонкушина — фрилансер с 7-летним стажем и автор текстов для бизнеса
Источник: luckyidea.ru
Как адаптировать сайт под мобильные устройства: методы и примеры
Адаптация сайта для мобильных устройств позволяет охватить больше аудитории и увеличить доход от продаж товаров или услуг, поскольку в России мобильный трафик с 2016 по 2021 год вырос на 545% . В статье расскажем, как адаптировать сайт под мобильные устройства, поделимся онлайн-сервисами и плагинами.
Что такое адаптивный сайт
Пользователи просматривают полноформатные страницы не только на экранах персональных компьютеров, но и на смартфонах и планшетах. Разрешение на десктопе не соответствует формату, к которому привыкли на телефоне: изображение кажется мелким и для прочтения приходится увеличивать текст вручную. Все это создает неудобство для потенциального покупателя. Чтобы сайт было комфортно просматривать со смартфона, нужна адаптивность – функция интернет-страницы для корректного отображения на различных устройствах.
Для чего нужна адаптация
Адаптация сайта для мобильных устройств отвечает за решение следующих проблем: длинная полоса прокрутки, неудобство ссылок, неправильное расположение отдельных элементов, слишком мелкий шрифт. Адаптивность – это способ сохранить лояльность клиентов и привлечь новую аудиторию. Она облегчает использование сайта.
Поисковые системы и ранжирование
В Яндексе и Google адаптивность – один из факторов, влияющих на позицию сайта в поисковике. Системы оценивают, насколько быстро пользователь закрывает страницу. Если это происходит сразу после ее открытия, это значит, что человека не устроил формат отображения. Такие сайты теряют свои позиции в топе.
Влияние на конверсию
Конверсия в интернет-маркетинге – это соотношение числа пользователей страницы, выполнивших действия, к общему числу посетителей. Адаптивность страницы для мобильных устройств напрямую влияет на конверсию , потому что многие клиенты совершают операции через смартфоны. Удобное расположение кнопок, правильный размер шрифта и аккуратный дизайн увеличивают активность пользователя.
Рекламные кампании
Для продвижения продукта предприниматели часто используют рекламу на других сайтах. Но иногда при переходе с одного сайта на другой возникает проблема несоответствия форматов. В итоге пользователь закрывает страницу: рекламная кампания не приносит новых клиентов. Адаптивность под различные устройства позволит не упускать потенциальных покупателей.
Не терять заявки пользователей в нерабочее время поможет виджет обратный звонок Calltouch. Он свяжет вас с клиентом, когда начнется рабочий день. Адаптируйте форму колбэка под ваш сайт: загрузите логотип, подложку или поменяйте фон. Добавьте текст для увеличения конверсии. Распределяйте поступающие звонки по отделам, филиалам или городам.
Виджет бесплатный: вы оплачиваете только минуты разговоров. Всем новым клиентам – 50 минут в подарок.
Виджет обратного звонка для сайта
- Повысьте конверсию сайта на 30%
- Новым клиентам 50 минут в подарок
Источник: www.calltouch.ru
Адаптивная верстка сайта для всех разрешений экрана
Адаптивная верстка — это неотъемлемая часть современной web-разработки. В этом случае дизайн страницы делается так, чтобы подстраиваться под любой экран. 10 лет назад, когда mobile-friendly еще не был придуман, верстальщикам приходилось делать сразу несколько web-страниц, чтобы сайт правильно отображался на десктопе, телефонах и планшетах. К счастью, все это давно в прошлом.
Получи целый ПАК бонусов только за регистрацию в AFFSTAR!
Содержание скрыть
Разновидности верстки
Макеты бывают разными по типу отображения.
- Фиксированный или статический. Дизайн страницы создается под один размер. Все четко, конкретно и просто, но есть недостаток — сайт нормально откроется не на всех экранах, а только на мониторах с заранее известным скрином. К примеру, на смартфоне веб-страница не влезет в браузерное окно.
- Резиновый. Более сложный вариант для реализации, чем фиксированная верстка. Основные блоки макета сжимаются, пока не встанут под разрешение конкретного девайса. Если экран чересчур маленький, то блоки располагаются друг под другом — в виде ленты.
- Адаптивный. Самый передовой макет — страница подстраивается под каждого пользователя, независимо от используемого им устройства. Реализуется несколькими способами — смещением, перестройкой блоков, изменением дизайна элементов страницы и т. д.
Все типы версток, включая адаптивную, делаются с помощью таблиц или блоков.
- Табличная верстка устарела, хотя элемент table поддерживается HTML5. Поэтому некоторые программисты продолжают использовать табличные данные.
- Блочная верстка представляет собой каркас, на который через CSS накладывается тот или иной шаблон. Особое значение здесь имеют теги: , , , и др.
Как сделать адаптивную верстку сайта
Чтобы сделать адаптивную верстку, надо знать все применяемые типы. Это позволит сочетать их, если в этом появится необходимость. К примеру, совместить резиновый и адаптивный дизайн или таблицы с блоками.
Делается современная адаптивная верстка комбинированием двух технологий.
- HTML5. Нужна для разметки элементов на сайте.
- CSS3. Каскадные стили, предназначенные для декоративного оформления веб-страниц. При помощи CSS также задаются единицы измерения главных блоков сайта — хедера, боди, футера.
Адаптивная верстка CSS
Специалисты называют такую адаптивную верстку самой правильной с технической точки зрения. К тому же, через CSS сделать это проще. Вот, например, как создать шапку или любой другой элемент. В этом случае находим хорошее изображение и задаем ему свойство растягиваться по всему экрану. По правилам HTML5 — просто упаковываем картинку в div.
Далее задаем width img — чтобы картинка меняла свой размер при уменьшении или увеличении контейнера. Получается готовый блок, занимающий весь экран любого монитора по ширине.
Однако на этом верстка не заканчивается, ведь нужно задать предельную ширину для max/min разрешения. В противном случае при изменении типа экрана, изображение потеряет качество.
Добавляем в код автоматическое свойство margin для внешнего отступа на всех 4-х сторонах элемента. Задаем width в 1000px, максимальную ширину элемента max-width в 90% и минимальную ширину в 50px.
Тем самым грани контейнера вместе с изображением будут меняться только в пределах 500-1000px.
Усложняем задачу — сделаем мини-галерею. Принципы верстки остаются те же. Делаем такой же контейнер, упакованный в
В CSS прописываем то же, что и в первом случае.
Таким образом, каждое изображение будет работать по правилам контейнера, и изменять свой размер в зависимости от экрана пользователя. Для улучшения качества между картинками ставится отступ в 1%.
Остается немного доработать верстку. В частности, на экранах смартфонов изображения в галерее могут отображаться слишком мелко.
Верстаем адаптивный сайт
Используя такой подход, удастся сверстать сайт целиком. По сути, web-страница состоит из 3-х основных элементов — хедера, центрального блока с сайдбарами и подвала. Условно можно задать контрольные точки breakpoints для:
- скрывания шапки;
- помещения сайдбара под контейнер;
- оптимизации элементов верхней части страницы.
Должна получиться такая вот страничка.
Теперь нужно доработать раздел — добавить обязательные файлы (библиотеку джава, ссылки на применяемые шрифты). Чтобы не прописывать префиксы Chrome, Safari и т. д, добавляем плагин PrefixFree.
Для боковой колонки прописываем — размещаем рубрики и другие необходимые элементы. В футер можно поместить значок копирайта, социальные кнопки и контактные данные.
Также особое внимание в адаптивной верстке уделяется размеру шрифта и строк. Многочисленные исследования последних лет доказали, что большинство современных читателей не фокусируются на конкретном предложении или слове, а просматривают информацию на web-странице саккадами или вкруговую. Поэтому используем короткие строки, которые лучше воспринимаются посетителями. В интернете хорошо заходят строки, размером 40-50 символов.
Что касается размера шрифта, то здесь будет немного сложнее. Из-за того что контент в такой верстке применяется для всех экранов, символы могут отображаться слишком маленькими или большими, в зависимости от скрина устройства. Частично данная задача решается применением стандартных, а не пользовательских шрифтов. Правда, дизайн не будет смотреться изысканно, но и посетителям не придется ждать загрузки файла со шрифтами.
Что менять в HTML и CSS коде?
Первым делом нужно вставить между тегами следующий код.
А также прописать в CSS файле строку с правилом (медиа-запросом) для мобильных экранов (1440-1599px).
Вообще, в адаптивной верстке все завязано на единицах измерения. К примеру, ширина вашего сайта составляет 1000 пикселей. Если его откроют со смартфона, то появится горизонтальная прокрутка, так как по ширине страница не влезет. Указывая в коде width 100%, мы подстраиваем сайт под маленький экран. А чтобы текст не растянулся на широкоформатном мониторе (более 1000px) и оставался адаптивным, прописываем в CSS-код еще и максимальное значение.
Предельное значение можно установить и для мобильных экранов. Например, чтобы текст не сжимался, прописываем минимальную ширину — допустим, когда окно браузера достигнет 200px, оно не будет больше уменьшаться, и появится горизонтальная прокрутка.
Bootstrap
Если вы не очень дружите с кодом, и сверстать сайт в одиночку не сможете, то есть уникальное решение — использовать трехъязычный фреймворк Bootstrap. Здесь изначально прописаны все стили для адаптации различных элементов сайта — кнопок, таблиц и блоков. Ваша задача лишь правильно присвоить классы к элементам. Официальную и последнюю версию можно скачать отсюда.
Что включает Бутстрап:
- адаптивную сеточную систему;
- переменные и миксины Sass;
- готовые компоненты;
- собственную библиотеку иконок SVG;
- мощные плагины JS;
- премиальные темы и многое другое.
Bootstrap подходит для нескольких CMS — WP, Joomla и Opencart.
Проверка адаптивности сайта
На завершающем этапе, когда прописаны все media запросы, подключен bootstrap и задействованы нужные классы, остается проверить корректность работы сайта на всех популярных экранах. Сегодня это можно осуществить на различных сервисах. Например, в Screenfly.
- вводим название сайта в поисковую строку сервиса;
- нажимаем Enter;
- проверяем, как отображается ресурс на мобильных устройствах, планшетах, компьютерах всех известных фирм.
Сервис очень точный, а самое главное — целиком бесплатный.
Заключение
Адаптивная верстка позволяет сэкономить и не делать несколько дизайнов под каждый скрин — достаточно прописать правила для отдельных частей блоков. Сайты с таким дизайном получают одобрение и со стороны поисковиков. Например, Гугл официально заявил, что отдает предпочтение ресурсам, адаптированным под mobile-first.
Источник: protraffic.com