Создать веб-сайт бесплатно – не только реально, но и очень просто!

Настоящая Политика конфиденциальности персональной информации (далее — Политика) действует в отношении всей информации, которую ООО «Сайтмаркет» (далее – Поставщик) может получить о пользователе во время использования им любого из сайтов Поставщика (далее — Сайты). Использование Сайтов означает безоговорочное согласие пользователя с настоящей Политикой и указанными в ней условиями обработки его персональной информации. В случае несогласия с этими условиями пользователь должен воздержаться от использования Сайтов.

1. В рамках настоящей Политики под «персональной информацией пользователя» понимается персональная информация, которую пользователь предоставляет о себе самостоятельно при регистрации (создании учётной записи) или в процессе использования Сайта, включая персональные данные пользователя.

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

3. Персональную информацию пользователя Поставщик может использовать в целях: идентификации стороны в рамках соглашений и договоров, предоставления пользователю персонализированных услуг, а также связи с пользователем, в том числе направление электронных писем, SMS и других уведомлений, запросов и информации, касающейся оказания услуг.

4. В отношении персональной информации пользователя сохраняется ее конфиденциальность. Поставщик вправе передать персональную информацию пользователя третьим лицам только для улучшения оказания услуг пользователю.

5. При обработке персональных данных пользователей Поставщик руководствуется Федеральным законом РФ «О персональных данных».

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

7. Для удаления своего аккаунта пользователь может воспользоваться функцией «Отписаться от рассылки», содержащейся в каждом электронном письме, направляемом Поставщиком пользователю, либо отправить запрос на электронную почту Поставщика [email protected] . Также пользователь должен очистить cookie и кэш браузера.

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

9. Поставщик имеет право вносить изменения в настоящую Политику. При внесении изменений в актуальной редакции указывается дата последнего обновления. Новая редакция Политики вступает в силу с момента ее размещения. Действующая редакция всегда находится на странице по адресу https://www.a5.ru/lp/1 в разделе «Политика конфиденциальности».

Начало работы с Вебом — Изучение веб-разработки

Начало работы с Вебом — это серия коротких уроков, которые познакомят вас с практическими аспектами веб-разработки. Вы настроите инструменты, необходимые для создания простой веб-страницы и публикации своего собственного кода.

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

Прорабатывая статьи, перечисленные ниже по порядку, вы пройдёте путь от нуля до создания своей первой веб-страницы. Ну что, давайте начнём!

Установка базового программного обеспечения

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

Каким должен быть ваш веб-сайт?

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

Работа с файлами

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

Основы HTML

Язык гипертекстовой разметки (Hypertext Markup Language, HTML) — это код, который вы используете для структурирования веб-содержимого и придания ему смысла и цели. Например, является ли моё содержимое набором абзацев, либо списком маркированных пунктов? Нужно ли вставить изображения на мою страницу? Есть ли у меня таблица данных? Не перегружая вас, статья Основы HTML предоставляет достаточно информации для вашего знакомства с HTML.

Основы CSS

Каскадные таблицы стилей (Cascading Stylesheets, CSS) — это код, который вы используете для стилизации своего веб-сайта. Например, хотите ли вы, чтобы текст был черным или красным? Где должно быть нарисовано содержимое на экране? Какие фоновые изображения и цвета должны быть использованы, чтобы украсить ваш веб-сайт? Основы CSS проведёт вас через то, что вам нужно знать, чтобы начать.

Основы JavaScript

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

Публикация вашего веб-сайта

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

Как работает Интернет

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

• Web Demystified(web обзор): большая серия видеороликов, объясняющая основы web, нацеленных на начинающих веб-разработчиков. Создано Жереми Патонье.
• The web and web standards (веб и веб стандарты): В этой статье приведена полезная информация о Вебе — как он появился, что такое технологии веб-стандартов, как они работают вместе, почему «веб-разработчик»  — это отличная карьера, и какие виды наилучшей практики вы узнаете в ходе курса.

Как писать слова, связанные с интернетом?

Правописание

Как писать слова, связанные с интернетом?

С какой буквы пишется слово интернет?

Интернет может употребляться как существительное (самостоятельная часть речи) или как первая часть сложных слов. От этого зависит написание.

При самостоятельном употреблении сейчас возможно написание с прописной и строчной буквы: доступ к Интернету и доступ к интернету, пользоваться Интернетом и пользоваться интернетом.  А вот Рунет – только с прописной: Премия Рунета.

При употреблении в качестве первой части сложных слов правильно только со строчной и через дефис: интернет-сайт, интернет-пользователь, интернет-олимпиада, интернет-зависимый

.

Такое написание установлено в 4-м издании «Русского орфографического словаря» РАН (М., 2012).

Как писали раньше?

В предыдущих изданиях «Русского орфографического словаря» проводилось четкое разделение: интернет- как первая часть сложных слов – только со строчной буквы, как и сейчас (интернет-сайт), а вот Интернет при самостоятельном употреблении – только с прописной буквы (доступ к Интернету), варианта написания этого слова со строчной буквы при самостоятельном употреблении не было.

Но в 4-м издании «Русского орфографического словаря» РАН «для слова

интернет, в соответствии с практикой письма и решением Орфографической комиссии РАН, предложены два варианта – с начальной прописной и со строчной буквой» (цитата из предисловия к 4-му изданию).

С какой буквы писать другие названия интернета – сеть, паутина, веб?

При употреблении в значении ‘интернет’ слова Сеть и Паутина пишутся с прописной буквы: доступ к Сети, найти информацию в Паутине. Но если этим словам предшествует прилагательное Всемирный, то именно оно пишется с прописной буквы, а слова сеть и паутина – со строчной. Правильно: Всемирная сеть, Всемирная паутина.

Написание веб / Веб аналогично написанию интернет / Интернет.  При самостоятельном употреблении возможно: Веб и веб (доступ к Вебу и доступ к вебу). Первая часть сложных слов веб— пишется строчными буквами и присоединяется дефисом: веб-сайт, веб-мастер, веб-дизайн, веб-адрес, веб-камера. Но слитно пишутся слова веблог и вебмейкер.

Как пишутся онлайн и офлайн?

Первые части сложных слов онлайн и офлайн пишутся строчными буквами (обратите внимание на одну букву ф в слове

офлайн) и присоединяются дефисом: онлайн-дискуссия, онлайн-справочник, офлайн-браузер. Написание строчными сохраняется и при самостоятельном употреблении этих слов: ты сейчас онлайн или офлайн?

Сколько букв г пишется в слове блог(г)ер?

В слове блогер пишется одна г. Вот как объясняет такое написание председатель Орфографической комиссии РАН В. В. Лопатин:

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

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

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

Как пишутся названия сайтов?

При написании названий сайтов действуют общие правила: названия пишутся с прописной буквы и заключаются в кавычки:  порталы «Яндекс», «Рамблер», «Культура письменной речи»; социальные сети «Фейсбук», «ВКонтакте» (официальное название этого ресурса именно такое, хотя оно противоречит нормам русского письма; должно быть: «В контакте», ср.: журнал «За рулем», не «ЗаРулем»

).

Компонент после точки (если он присутствует в названии) пишется строчными: «Грамота.ру» (см.: Лопатин В. В., Нечаева И. В., Чельцова Л. К. Прописная или строчная? Орфографический словарь. М., 2011).

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

Веб-адреса сайтов (написанные как латиницей, так и кириллицей) пишутся строчными: www.gramota.ru; президент.рф.

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

Доброго времени суток, уважаемые читатели блога //www.webformyself.com

С Вами Виктор. Сегодня я хочу предоставить Вашему вниманию еще один интересный перевод с сайта //net.tutsplus.com/ . Данная статья Вам покажет как можно нарисовать красивый сайт, имея практически нулевые знания в программе Photoshop.

Автором данной статьи является Marko Prljic.

Поехали…

Вам захотелось создать красивый сайт, но Вы даже не представляете, как это делается? Хотите узнать, как создать веб-сайт? Честно говоря, несколько лет назад это и со мной произошло. Путешествуя по сети, я встречал множество красивых сайтов, и мне самому всегда хотелось уметь разрабатывать такой дизайн для сайтов. Сейчас я уже это умею и готов научить и Вас, как это сделать! В сущности, для этого требуются некоторые навыки работы в Photoshop и внимание к деталям. В этом руководстве я буду обращать внимание на те незначительные на первый взгляд детали, из которых складывается красивый дизайн сайта. Запускайте Photoshop и приступим к делу!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Автор: Marko Prljic

Редакция: Рог Виктор

Привет, меня зовут Марко, я веб-дизайнер из чудесной страны Хорватии. Я разрабатываю амбициозные, классно выглядящие, современные сайты. Также я пишу статьи для Themeforest и Graphicriver, и люблю писать разные руководства. В свободное от создания сайтов время я просто общаюсь со своими детьми или обдумываю очередной Большой Проект. О, как и все остальные, я веду блог на Twitter.

Шаг 1 – Скачайте 960 Grid System Template

Почти все дизайны я разрабатываю на основе блочной системы 960 Grid System. Поэтому нам сначала нужно скачать эти блочные шаблоны для Photoshop, которые можно найти на официальном сайте 960.gs. Просто распакуйте zip-архив и найдите в нем PSD-шаблоны. Вы увидите шаблоны двух типов: один – 12_col, второй – 16_col. Как видно по названию, отличаются они тем, что один состоит из 12 колонок, а другой из 16. Чтобы пояснить чуть точнее, допустим, что Ваш дизайн будет состоять из трех вертикальных блоков, тогда Вам нужно взять шаблон 12_col, так как 12 кратно 3. А если Ваш дизайн будет состоять из четырех вертикальных блоков, тогда Вы может брать в качестве шаблона как 12_col, так и 16_col, потому что и 12, и 16 кратно 4. Далее в руководстве мы рассмотрим это на примере.

Шаг 2 – Определяем структуру

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

Шаг 3

После того, как мы определились со структурой сайта, можно двигаться дальше. Откройте Ваш шаблон 16_col.psd. Перейдите в меню «Изображение» > «Размер холста» (Image > Canvas size). Установите размер 1200px по ширине и 1700px по высоте. Установите цвет фона #ffffff.

Шаг 4

Далее выберите инструмент «Прямоугольник» (Rectangle) и нарисуйте прямоугольник по всей ширине холста и высотой примерно 80px. Залейте его цветом #dddddd.

Шаг 5

Создайте новый слой над прямоугольной областью и установите для этого слоя режим «Перекрытие» (Overlay). При нажатой клавише Ctrl щелкните мышью по слою с прямоугольником. Он будет выделен. Выберите мягкую кисть (soft brush) толщиной 600px, установите белый цвет и несколько раз щелкните, поместив край кисти чуть выше выделенной области, как показано на рисунке. Таким образом, Вы создадите красивый и легкий световой эффект. Кроме того, можно связать эти два слоя.

Шаг 6

Новый слой. Выберите снова инструмент «Прямоугольник» (Rectangle) и нарисуйте тонкий темно-серый прямоугольник, как показано на рисунке.

Шаг 7

Выбрав инструмент «Прямоугольник» (Rectangle), нарисуйте большой блок примерно на 500px ниже верхнего прямоугольника. Сделайте его высотой 575px и наложите на него линейный градиент в границах оттенков от #d2d2d0 до #ffffff, с углом -90° и масштабом 100%.

Шаг 8

Сейчас мы создадим такой же световой эффект, который описан в Шаге 5. Мы еще не раз будем использовать этот прием, поэтому в следующий раз я просто буду отсылать Вас к Шагу 5, где описан этот эффект.

Создайте новый слой над всеми текущими слоями. При нажатой клавише Ctrl щелкните мышью по большому прямоугольнику. Выберите мягкую кисть толщиной 600px, установите белый цвет и несколько раз щелкните, поместив край кисти чуть выше выделенной области, как показано на рисунке.

Шаг 9

Создайте новый слой и нарисуйте большой прямоугольник высотой 400px. Он будет использоваться для шапки нашего сайта. Наложите на него красивый голубой градиент от оттенка #2787b7 до #258fcd.

»Видите, какой нежный переход оттенков?

Шаг 10

Добавьте темно-синюю линию толщиной 1px вдоль нижней границы шапки, наложите эффект тени (Drop shadow). Для наложения тени используйте режим Умножение (Multiply), непрозрачность (Opacity) 65%, угол (Angle) -90°, смещение (Distance) 1px, размер (Size) 6px. Далее создайте поверх новый слой и нарисуйте под синей линей еще одну линию толщиной 1px белого цвета. Таким образом, мы создадим отчетливую границу для нашего блока с основным контентом. В принципе, этот прием оформления границ Вы можете применять для каждого блока Вашего проекта, только с другими оттенками.

Шаг 11

Создайте новый слой и с помощью инструмента «Прямоугольник» (Rectangle) нарисуйте в верхней части холста прямоугольную область высотой 50px, как показано на рисунке. Она будет служить для панели навигации.

Наложите тень, используя параметры, представленные на рисунке.

Шаг 12

Настало время заняться навигацией. Используйте инструмент «Прямоугольник с округленными углами» (Rounded Rectangle), установите радиус 5px. Нарисуйте прямоугольник, сделайте заливку цветом #f6a836 и наложите следующие эффекты:

— Внутренняя тень (Inner Shadow) – цвет: #ffffff, Режим: Перекрытие, Прозрачность: 60%, Угол: 120 °, Смещение: 7px, Размер: 6px.

— Внутреннее свечение (Inner glow) – Режим: Нормальный, цвет: #ffffff, Размер: 4px, остальные параметры оставьте по умолчанию.

— Обводка (Stroke) – Размер: 1px, Положение: Внутри, цвет: #ce7e01.

Теперь выделите этот прямоугольник с помощью Ctrl и щелчка мыши. Перейдите в меню «Выделение» > «Модификация» > «Сжать» (Select > Modify > Contract), и введите в появившемся окне 1px.

Создайте сверху новый слой, установите режим «Перекрытие» (Overlay) и наложите эффект, описанный в Шаге 5, только в этот раз используя кисть меньшего размера. Далее добавьте текст для навигации. Я использовал для ссылок навигации шрифт Arial, все буквы заглавные и без сглаживания.

Шаг 13

Теперь давайте создадим поле поиска. С помощью инструмента «Прямоугольник с округленными углами» (Rounded Rectangle) с радиусом 5px создайте поле для поиска по правой стороне размеченной сетки шаблона, в середине верхней серой полосы, созданной на Шаге 4. Добавьте к слою следующие стили:

— Внутренняя тень (Inner Shadow) – цвет: #000000, Режим: Умножение (Multiply), Непрозрачность (Opacity): 9%, Угол (Angle): 90°, Смещение (Distance): 0px, Размер (Size): 6px.

— Обводка (Stroke) – Размер (Size): 1px, Положение: Внутри (Position: inside), цвет: #dfdfdf.

Я добавил текст «Search» и светло-серую кнопку «Go». Выглядеть это должно так.

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

Шаг 14

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

Снова создаем эффект, описанный в Шаге 5.

Используйте мягкую кисть меньшего размера. Я в данном случае выставил размер 45px.

Шаг 15

После добавления логотипа и подзаголовка наш сайт должен выглядеть вот так.

Шаг 16

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

Создайте еще одну пустую папку слоев и назовите ее «header». В нее мы переместим графику из шапки нашего шаблона. Вот так это должно выглядеть.

Шаг 17

Наша шапка пока выглядит несколько простовато, поэтому добавим к ней тот же световой эффект, который мы применяли к другим элементам сайта. Выделите блок шапки (тот, что голубого цвета). Создайте сверху новый пустой слой и установите для него режим «Перекрытие» (Overlay).

Выберите большую мягкую кисть размером 600px, цвет #ffffff, и нажмите несколько раз в области под навигационной панелью. Кроме того, для получения более глубокого эффекта мы можем переключить на черный цвет и сделать то же самое в нижней части шапки. Попробуйте!

Шаг 18

На этом шаге я объясню Вам, как я сделал отражение для изображений в шапке. Найдите пару изображений на свой выбор, я использовал скриншоты браузера Safari с изображениями двух других моих шаблонов. Уменьшите один из них и поместите под вторым, который больше. Создайте дубликат обоих слоев и с помощью инструмента «Свободное трансформирование» (Free Transform) переверните сначала одно изображение, затем второе. Сдвиньте оба изображения на несколько пикселей вниз. Теперь сделайте выделение снизу с внешней стороны до середины первого перевернутого изображения с помощью инструмента «Прямоугольная область» (Rectangular Marquee). Перейдите в меню «Выделение» > «Модификация» > «Растушевка» (Select > Modify > Feather) и в появившемся окне введите 30px или больше. У Вас должно получиться такое же выделение, как показано на рисунке. Нажмите несколько раз кнопку Delete, чтобы получилось красивое затененное отражение оригинального изображения. Повторите этот же шаг для второго изображения.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Сейчас, чтобы сделать оба изображения немного выступающими, создайте новый слой и установите для него режим «Перекрытие» (Overlay). Наложите эффект, описанный в Шаге 5.

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

Шаг 19

Посмотрев на итоговое превью нашего дизайна, Вы заметите красивые вкладки в блоке с основным контентом. Для создания подобных вкладок нам необходимо будет выполнить еще несколько дополнительных шагов, но это определенно того стоит. Сперва с помощью инструмента «Прямоугольник с округленными углами» (Rounded Rectangle) нарисуйте большую прямоугольную фигуру высотой 70px и радиусом углов 10px или больше, если посчитаете нужным. Сейчас нам надо избавиться от нижних округленных углов и сделать их идеально прямыми. Выберите инструмент «Область (горизонтальная строка)» (Direct Selection) и установите его на границе фигуры. Щелкните по точке вертикальной оси и, удерживая клавишу Shift, оттяните ее вниз, пока она не достигнет уровня горизонтальной оси. Уже неплохо, но угол все еще деформированный. Заметен небольшой хвостик. Нажмите на него и сдвиньте вверх до уровня горизонтальной оси.

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

Шаг 20

Выберите инструмент «Линия» (Line) толщиной 1px.

Шаг 21

Начертите разделители серого цвета, удерживая клавишу Shift.

Шаг 22

Разместите какие-нибудь иконки, заголовки и описание для каждой вкладки. Я использовал иконки Рэя Ченга, которые можно скачать с сайта WebAppers.com. Как правило, одна вкладка всегда активна, в то время как другие остаются неактивными. Чтобы это четко было видно в нашем дизайне, нам нужно найти способ это показать. Я обесцветил остальные иконки и уменьшил непрозрачность для заголовков и текста, оставив первую активную вкладку цветной и яркой.

Шаг 23

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

Вот так должно выглядеть выделение.

С помощью маленькой мягкой кисти создайте белый фон.

Шаг 24

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

Добавьте векторную маску (vector mask), нажав на маленькую иконку внизу палитры слоев.

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

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

Вот так должны выглядеть наши вкладки.

Шаг 25

Пришло время заняться дизайном основного содержания нашей первой вкладки. Нам потребуются красиво оформленное изображение, симпатичный заголовок и какой-нибудь текст. Сначала займемся оформлением изображения. Мне показалось, что неплохо бы нарушить прямолинейность нашего дизайна созданием красивого эффекта сложенных в стопку фотографий. Чтобы этого добиться, нарисуйте белый прямоугольник с рамкой серого цвета и толщиной 1px, и наложите на него легкий эффект отбрасывания тени.

Далее сделайте дубликат слоя и поверните его на несколько градусов с помощью инструмента «Свободное трансформирование» (Free Transform). Повторите этот шаг еще раз.

Импортируйте подготовленное изображение и поместите его над белыми прямоугольниками. Не волнуйтесь, если изображение выходит за границы блока – мы это исправим. Выделите верхний прямоугольник, перейдите в меню «Выделение» > «Модификация» > «Сжать» (Select > Modify > Contract) и в появившемся окне введите 5px. Выделив слой с изображением, нажмите иконку «Быстрая маска» (Quick Mask) внизу палитры слоев. У Вас получится эффект красивой картинки с рамкой, как показано на рисунке выше.

Вот так у Вас должен выглядеть порядок слоев.

Шаг 26

Не забывайте следить за порядком. Создайте папки слоев и распределите по ним слои на своей палитре. У меня это сделано вот таким образом.

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

И еще немного организации слоев.

Шаг 27

Я решил, что этот блок должен быть большим, поэтому я разместил его в большом поле сразу после главного блока. Сначала рисуем большой светло-серый прямоугольник высотой примерно 220px с рамкой серого цвета толщиной 1px.

Далее рисуем еще один прямоугольник, светлее и меньше предыдущего на 10px с каждой стороны. У него также должна быть светло-серая рамка толщиной 1px.

Добавляем какой-нибудь текст, и все готово!

Шаг 28

Теперь займемся нижним колонтитулом. Нарисуйте большой темно-серый прямоугольник высотой 400px.

Шаг 29

Наложите световой эффект точно так же, как мы описывали в Шаге 5.

Шаг 30

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

Шаг 31

Создайте самый нижний блок, в котором будет продублирована навигация. Можно скопировать верхний прямоугольный блок с навигацией, поместить его внизу и установить для него высоту около 40px. Поместите его в самом низу Вашего холста. Пожалуйста, имейте в виду, что Вам возможно потребуется расширить холст для этой цели, чтобы на нем уместилась вся графика. В этом случае откройте в меню «Изображение» > «Размер холста» (Image > Canvas size) и установите высоту, при которой весь проект умещается на холсте.

Шаг 32

Снова уделим внимание мелким деталям. Добавим белую линию толщиной 1px вдоль верхней границы нижнего блока навигации, придав тем самым красивый эффект для его рамки.

Шаг 33

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

Шаг 34

Напоследок распределите все Ваши слои по папкам. У меня это сделано так.

Дизайн

Вот такой дизайн у нас получился в итоге, с парой изменений для разных страниц. Готовые PSD-дизайны, конечно же, можно приобрести на сайте ThemeForest.net.

Пара слов в заключение

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

Автор: Marko Prljic

Источник://net.tutsplus.com/

Редакция: Рог Виктор.

E-mail:[email protected]

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть

Просто! Создать! Веб-сайт!

Ведущим подкаста ShopTalk Крису Койер (Chris Coyier) и Дейву Руперт (Dave Rupert) часто задают вопрос, как научиться веб-разработке. Их мантра – «просто создавайте веб-сайты».

Что делать, если вы не знаете, какой именно сайт «просто создать»? Ниже приведён список различных идей для проектов, который даст вам нужную практику веб-дизайна и веб-разработки.

Идеи для веб-дизайна и веб-проектов

1. Помогите новому бизнесу / хобби / резюме / свадьбе ваших друзей.
2. Создайте фан-сайт или форум «старой школы» того, что вы любите.
3. Создайте галерею фотографий с вашего отпуска.
4. Попробуйте воссоздать страницу любимого сайта, не заглядывая в её код.
5. Создайте сайт некоммерческой организации вашего региона.
6. Найдите локальную проблему, которая важна для вас, и сделайте брошюру, в которой вы высказываете свою позицию.
7. Сделайте эту брошюру с использованием системы управления контентом (CMS) или языком программирования, который вы хотите изучить.
8. Создайте игру с использованием веб-технологий.
9. Попробуйте воссоздать эффект из реального мира на чистом CSS.
10. Выберите потребность вашей повседневной жизни и сделайте веб-приложение, которое будет её удовлетворять.
11. Создайте веб-сайт вымышленного персонажа.
12. Исследуйте все веб-возможности на сервисе Can I Use и создайте сайт с теми возможностями, о которых вы никогда не слышали или не использовали ранее.
13. Создайте сайт-витрину вашей коллекции или коллекции ваших друзей.
14. Исследуйте ваше генеалогическое древо.
15. Возьмите старый сайт и адаптируйте его для людей с ограниченными возможностями.
16. Создайте несколько бесплатных тем для популярного сервиса блогов.
17. Опубликуйте ваши стихи.
18. Изобретите велосипед: разработайте калькулятор, приложение для личных финансов, приложение для отслеживания времени в пути и так далее…
19. Произведите рефакторинг кода для существующего сайта.
20. Стилизуйте сайт с использованием трёх различных подходов к архитектуре CSS и определите, какая вам больше подходит.
21. Создайте сайт с использованием нескольких фреймворков и определите, какой вам больше подходит.
22. Сделайте фан-сайт вашего родного города.
23. Придумайте 25 способов изменить / оформить изображения.
24. Создайте веб-чат для ваших друзей.
25. Создайте коллекцию повторно используемых компонентов, функций и т.п.
26. Сделайте удобное приложение с доступом по регистрации для ваших друзей, где они могли бы найти инструкции для ухода за домом / отдыха / ухода за растениями.
27. Создайте путеводитель по вашему городу с различными фильтрами (уровень расходов, цель поездки, где что купить и т.д.).
28. Сделайте дизайн сайта, которых будет использоваться на устройствах с разрешением 100px.
29. Создайте список сайтов с причудливым дизайном.
30. Создайте сайт-справочник о какой-то новинке, которую вы хорошо знаете.
31. Соберите любимые цитаты и изречения в одном месте.
32. Создайте каталог вещей в шкафу / растений в саду / специй на кухне. Сайт должен запоминать набор фильтров пользователя.
33. Сделайте интерактивный сайт для вашего ребёнка, который научит его определять цвета, цифры, буквы и фигуры.
34. Выберите книгу, которая находится в свободном доступе, и сделайте сайт, где пользователь мог бы её прочитать, сделать заметки и т.д.
35. Создайте красивый дизайн сайта на основе двух цветов – белого и чёрного.

(Перевод статьи Just! Build! Websites! (в ред. автора)

Cайт на Python — Django уроки создания сайта на Питоне

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

Информация про Джанго

Язык Python универсальный и на его основе можно писать приложения для различных целей. Создать сайт на Python вполне возможно, но сайт на питоне гораздо проще создается при использовании Джанго Питон. При помощи дополнительных библиотек можно создавать как приложения, так и веб сайты. К примеру, для создания игр на Python понадобиться библиотека Pygame, а для создания сайтов – Django.

Зачем нужен Джанго?

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

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

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

Преимущества Джанго

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

В Джанго используется схема MVC. Это схема позволяет удобно разбить файлы на одну из трех категорий: HTML шаблоны, файлы модели для работы с базой данных и файлы контроллеры для связи моделей и HTML шаблонов между собой.

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

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

Сайты на Джанго

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

1. Google — крупнейший сайт на Django. Является поисковой системой;
2. YouTube — крупнейший видеохостинг;
3. Instagram — популярное приложения для обмена фото и видео;
4. Pinterest — крупнейший социальный интернет-сервис;
5. The Washington Times — популярная всемирная газета.

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

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

Какие знания нужны?

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

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

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

План курса

За Django курс мы изучим все основные положения фреймворка Django, а также создадим Python сайт. Для реализации стилей на сайте мы будем использовать библиотеку Bootstrap (уроки по ней можно посмотреть здесь), а для связи с базой данных мы будем использовать встроенную ORM систему, которая позволяет создавать таблицы в базе данных на основе классов в Python.

Программа обучения

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

Создание веб-сайта. Курс молодого бойца / Хабр

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

Условно процесс создания сайта (web-проекта) можно разделить на 3 этапа:

Данный этап можно разделить на несколько подэтапов:

• Создание идеи
• Разработка структуры проекта
• Проработка макета проекта

Создание идеи

На данном этапе нам необходимо определиться с тематикой проекта (сайта, сервиса). Далее, в соответствии с выбранной темой, необходимо собрать соответствующие материалы: текстовые, графические.

Разработка структуры проекта

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

Проработка макета проекта

После того, как мы определились со структурой проекта можно составить макет проекта (схематично).

Для отрисовки наброска можно использовать бумагу и ручку, Photoshop, любой другой редактор графики (раньше часто использовали Adobe Fireworks). Важно отметить, что данный этап – это не отрисовка готового дизайн-макета, а всего лишь схематичный набросок, выполненный для понимания того, как на сайте будут располагаться основные информационные блоки, графика и прочие элементы дизайна.

Основные элементы страницы

Зачастую основными элементами страницы являются:

содержащий блок (wrapper, container)

,

логотип

,

навигация

,

контент

,

футер (нижний колонтитул)

,

свободное пространство

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

Содержащий блок (контейнер)

Роль контейнера на странице может выполнять непосредственно элемент body или же div. Ширина содержащего блока может быть резиновой (fluid), а может быть фиксированной (fixed).

Логотип

Текстовая или графическая составляющая проекта и выделяющая его среди других. Логотип чаще всего располагается в верхнем левом углу страницы или же посередине (в зависимости от идеи, макета).

Навигация

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

Контент

Контент – это основная составляющая веб-страницы. Он занимает главенствующую роль в дизайне страницы, поэтому занимает большее пространство, подкреплён, помимо текста, графикой.

Нижний колонтитул (footer)

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

Резиновый и фиксированный макет

Фиксированный макет

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

Резиновый макет

«Резиновый» макет подразумевает, что страница сайта будет стараться занять всё доступное ей пространство на экране пользователя, подстраиваясь под разрешение.

В данном контексте стоит уяснить такие понятия, как отзывчивый веб-дизайн (Responsive Web Design aka. RWD) и адаптивный веб-дизайн (Adaptive Web Desing aka. AWD). Первое понятие укладывается в концепцию «резинового» и означает, что при изменении размера экрана ваш сайт подстраивается под него, второе понятие подразумевает, что при разработке вы определяете основные разрешения (размеры экрана), под которые будет подстраиваться (адаптироваться) ваш контент. В обоих случаях следует разрабатывать не один, а несколько макетов, которые будут соответствовать разным разрешениям экрана. Часто создаётся 3 макета под разрешения iPhone (Android Phone), iPad (Android Tablet) и Desktop.

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

Полезные ссылки по теме:

Почему при «резиновом» дизайне создаётся несколько макетов, а не используется один?

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

Модульная сетка

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

Наиболее популярной системой является модульная сетка 960 Grid System (http://960.gs), которая максимально делит страницу на 12, 16 и 24 колонки. Максимум в ширине сетка имеет 960 пикселей. Данное решение основано на том, что большинство современных мониторов, на момент создания сетки, имели разрешение не меньше 1024 на 768 пикселей. Создание макета на основе данной сетки, в дальнейшем, поможет ускорить процесс разработки (вёрстки).

Так же стоит отметить, что при разработке «резинового» макета страницы существует понятие максимальной ширины. Данное утверждение основывается на удобстве восприятия информации. Если предположить, что наш сайт не имеет максимального значения по ширине, то на больших мониторах информация будет сильно растягиваться и её неудобно будет читать. Чаще всего ограничиваются шириной в 1280 пикселей.

Модульная сетка 960GS отвечает концепции «фиксированного» дизайна, для «резинового» дизайна можно обратить внимание на адаптацию этой же сетки на сайте http://www.designinfluences.com/fluid960gs/ или воспользоваться сеткой, которую предлагает фрэймворк Bootstrap (http://getbootstrap.com/css/#grid).

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

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

Полезные ссылки и материалы:

Макеты веб-страниц

Среди всего многообразия составления макета веб-страницы можно выделить четыре наиболее распространённых:

• Навигация в левом столбце

• Навигация в правом столбце
  
  
• Навигация в трёх столбцах

• Горизонтальная навигация. На данном этапе сайты с таким типом навигации составляют большинство. Удобство такого подхода легко объяснить тем, что в данном случае у нас остаётся больше пространства для контента, составляющего наш сайт.

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

На первых двух сайтах можно посмотреть какие цвета использовались в дизайне.

Mobile First

С учётом тенденций последних лет данный подход плотно занимает свою нишу в разработке и дизайне сайтов. Тенденция такова, что практически около 60% пользователей интернета используют для доступа в сеть мобильные устройства, поэтому правилом хорошего тона становится разработка не только десктопной версии сайта, но и мобильной версии. При использовании данного подхода разработка макета сайта, дизайна и вёрстки начинается с мобильной версии, а затем уже прорабатываются макеты для других разрешений: добавляются блоки, баннеры, дополнительные элементы дизайна и пр.

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

Усвоив всё вышесказанное можно переходить к следующему этапу – Дизайн.

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

Один из способов определения основного цвета в проекте – это составление mood board. Для этого необходимо выписать себе все синонимы, связанные с темой проекта, а затем каждый синоним набрать в поиске по картинкам Google или Yandex. На основе найденных изображений выписать себе цвета, которые чаще всего встречаются на них (каких цветов больше). Найденные цвета будут составлять визуальное восприятие нашего проекта и вызывать у пользователя соответствующие чувства.

Для работы с выбранным цветом и составлением палитры цветов нашего сайта можно использовать следующие инструменты:

• Color Scheme Designer 3 (http://colorschemedesigner.com/csd-3.5/). Помимо выбора цветовой схемы данный сервис позволяет посмотреть пример того, как выбранные цвета будут смотреться на сайте

• Adobe Color CC (https://color.adobe.com/ru/). Данный ресурс, в отличие от Color Scheme Designer 3, позволяет создавать палитры ещё и на основе загруженных изображений (которые, например, могли появиться у нас на этапе составления mood board). Так же данный сервис обладает большим архивом палитр других пользователей.

• COLORlovers (http://www.colourlovers.com/). Обширное сообщество, где можно подобрать различные палитры.

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

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

Элементы Call to Action

Понятие призыва к действию относится к интерактивным элементам сайта: кнопки, баннеры и пр. Данные элементы оформляются таким образом, что пользователю должно хотеться непременно на них нажать. Например, это может быть кнопка с призывом к действию (Нажми, Купи, Сэкономь), яркий баннер с заманчивым предложением, яркой картинкой и пр.

Данное понятие хорошо вписывается в принцип AIDA (Attraction Interest Desire Action).

AIDA

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

• Привлечение внимания
• Интерес
• Желание
• Действие

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

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

Схема просмотра страницы

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

Визуальные направляющие

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

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

Тот же эффект продемонстрирован на втором изображении с наложенной тепловой картой: в первом случае нас привлекает в основном прямой взгляд ребенка (прямо в глаза), во втором случае направление взгляда ребенка и его поза невольно обращают взгляд пользователя на блок справа.

Фрэймворки

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

Bootstrap

,

Foundation

,

Material Design Lite

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

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

_{Готовые элементы дизайна из Bootstrap, Foundation и Material Design Lite (MDL)}

Трэнды

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

Во-первых, стоит упомянуть о так называемых лэндинговых страницах, которые подразумевают под собой длинную страницу, разделённую на соответствующие секции и знакомящие пользователя с основным контентом сайта. Часто лэндинг является единственной страницей, на которой сразу удаётся показать всю необходимую информацию, не заставляя пользователя переходить по страницам. Лэндингам обычно сопутствует хороший дизайн, выверенная и продуманная подача информации, элементы call-to-action, интерактивность (счётчики, анимация и пр.).

Стоит так же сказать о внешнем виде страниц и вспомнить такие понятия как скевоморфизм и плоский дизайн.

Скевоморфизм

Скевоморфизм уже продолжительное время уступает свои позиции плоскому дизайну. Данное понятие означает наделение интерактивных элементов качествами реальных. Например, оформление страницы с книгами в виде книжной полки, оформление кнопки на подобии настоящей с соответствующей имитацией нажатия, использование реальных текстур и пр. Данный принцип активно использовался при создании страниц буквально пару лет назад, но затем тенденции сменились и на первый план вышел плоский дизайн (Flat, Material).

Плоский дизайн

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

Не маловажную роль на тренды в веб-дизайне оказало развитие мобильных операционных систем. Чаще всего двигателем прогресса становятся решения от компании Apple, которая в своих дизайн-решениях iOS сначала использовала имитацию реальных объектов, а затем всё упростила до плоского дизайна (Flat UI). Сейчас в вебе главенствует Flat дизайн и Material дизайн, который активно развивает Google.

Неплохой сайт-сравнение двух концепций: http://www.flatvsrealism.com/

По основам веб-дизайна и прототипированию неплохим подспорьем может стать данная книга: Джейсон Берд: Веб-дизайн. Руководство разработчика.

Итак, процесс дизайна макета страницы плавно перетекает в процесс «оживления» сделанного на предыдущих этапах. Прежде чем сразу начинать писать HTML, CSS и JS стоит немного поговорить о редакторах кода и структуре проекта.

Редакторы кода

Из наиболее популярных редакторов кода на сегодня можно выделить три:

От части, все эти редакторы похожи по принципу работы, когда при установке мы получаем редактор, в который затем можем «доставить» необходимые модули и плагины, так сказать, «редакторы на стероидах». Разница лишь в технологиях, которые были использованы при написании редакторов, если Sublime Text написан при помощи C++ и Python, то 2 других используют JavaScript, HTML, CSS (Less). За счёт этой разницы Sublime Text может работать чуть быстрее своих коллег.

Существуют так же более продвинутые IDE (студии) такие, как Web Storm, PHP Storm и пр., но для вёрстки проекта вполне подойдёт редактор кода, а не целая студия (IDE).

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

Обзоры текстовых редакторов:

Структура проекта

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

Лучше всего отдельные категории файлов помещать в свои папки: картинки в папку images или img, css в папку css, javascript в папку js. В корне будет лежать только index.html и страницы сайта, либо только index.html, а страницы в отдельной папке pages. Соблюдая эти правила вы никогда не запутаетесь в проекте.

Так же стоит сказать и об именовании файлов проекта. Чаще всего применяются следующие имена: главная страница – это index.html, стили проекта styles.css, скрипты scripts.js или app.js, минимизированные версии файлов имеют префикс .min, картинки носят не пространные названия на русском языке или набора цифр, а отражают то, что на них изображено, например, button.png, download-icon.png, logo.png и т.д.

Работа над проектом

Итак, определившись с редактором кода, структурой мы можем приступать к разработке. Прежде всего стоит отметить, что вёрстка страницы делается поэтапно: сначала пишется HTML-структура (HTML-код), затем добавляются стили, а после, если необходимо, пишутся скрипты (JS), добавляются необходимые плагины и библиотеки.

Учитывая вышесказанное, мы можем условно разделить работу над проектом на следующие этапы:

Написание HTML

Сейчас при написании HTML кода уже смело можно использовать тэги и элементы разметки, которые появились вместе с стандартом HTML5, если вам необходимо поддерживать старые браузеры, то можно использовать, например, плагин html5shiv (

https://github.com/afarkas/html5shiv

), который обеспечивает поддержку новых стандартов в старых браузерах или библиотеку Modernizr (

https://modernizr.com/

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

При вёрстке сайтов в настоящее время, априори, используется блочный подход, никаких таблиц, iframe’ов и пр. Таблицы выполняют только свою прямую роль – представление информации в виде таблицы. В вёрстке таблицы используются лишь при работе с электронными письмами.

На этапе написания HTML мы, как бы, создаём скелет страницы, её абстрактную модель при помощи тэгов (языка разметки HTML). Стоит отметить, что структуру может быть проще написать, если у нас есть прототип, составленный на первом этапе или же, если мы сами, глядя на дизайн-макет, на бумаге схематично разрисовали себе все блоки страницы.

При написании разметки мы так же сразу можем прописывать элементам классы и идентификаторы.

Правила именования классов

В проекте во всём должен быть порядок: от структуры проекта до имен классов, разметки и написания кода. Если при разметке важно следить за типом информации и размещением её в соответствующих блоках (заголовок, список, ссылка, строчный элемент, параграф и пр.), то при именовании классов и идентификаторов важно соблюдать здравый смысл. Классы должны давать абстрактное понятие о блоке, к которому они относятся, чтобы код было легче читать, а затем и писать стили. В принципе здесь не должно быть ничего сложного, если мы размечаем меню, то логично содержащему блоку дать класс .nav или .navigation, если это блок с текстом, то можно дать ему класс .block-text и т.д.

БЭМ

На сегодняшний день есть один популярный подход, который касается принципов построения проекта в целом, но на данном этапе нас интересует именно именование классов. Подход называется

БЭМ

и расшифровывается, как

Блок Элемент Модификатор

.

Вкратце можно описать данный подход, как некое соглашение по именованию классов и представлению разметки страницы. Каждый элемент страницы являет собой сущность, которая может существовать независимо от контекста, тогда мы говорим о Блоке (.block) или же только в контексте другой сущности, тогда мы говорим об Элементе (.block__element). Каждый Блок или Элемент могут иметь различные модели представления: цвет, форму, прозрачность и пр. За подобные свойства будет отвечать Модификатор (.block__element_mod).

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

Более полная информация о методологии: https://ru.bem.info/

SMACSS

Так же существует подход

SMACSS

(расшифровывается данный акроним как Scalable and Modular Architecture for CSS – Масштабируемая и Модульная Архитерктура для CSS), который разделяет понятие о классах и разметке на несколько уровней: базовый, макет, модуль, состояние, тема.

• К базовому уровню будет относиться всё, что касается непосредственно тэгов html.
• К уровню макета мы будем относить всё, что касается основных составляющих страницы: секции.
• К уровню модуль мы будем относить всё, что касается переиспользуемых элементов страницы: баннеры, навигация, списки, блоки информации и пр.
• Уровень Состояние описывает как будут выглядеть модули и секции в том или ином состоянии: отображаются или не отображаются, сжатые или раскрытые, активны или неактивны и пр.
• Уровень темы чем-то схож с уровнем Состояния и отражает как модули или секции могут выглядеть.

В данном подходе используются следующие соглашения по именованию. Уровни определяются при помощи префиксов и соответствующего буквенного обозначения:

• Макет: .l- или .layout-
• Так как модули составляют основную часть проекта именовать их, используя префикс module- избыточно. Поэтому для них используются имена как есть, например: .example {}, .afisha {} и пр.
• Состояния имеют префикс .is-, например .is-hidden {}
• Уровень Темы именуется подобно модулям.

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

Информация о методологии и онлайн книга: https://smacss.com/
Русскоязычный перевод книги по SMACSS: https://github.com/andrew—r/smacss

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

Небольшой курс по основам HTML: Смотреть

Написание CSS

Правила именования классов подводят нас к следующему этапу. Когда написана html структура проекта, определены классы можно переходить к написанию CSS стилей и нарезке макета.

Стоит упомянуть о 2-х CSS файлах-дополнениях: normalize.css и reset.css.

Reset.css

Изначально в проектах повсеместно использовался

reset.css

, написанный Эриком Мейером. Цель данного свода правил – сбросить стили браузера, которые он по умолчанию использует для отображения элементов разметки. Таким образом при использовании reset.css нам не нужно переписывать стили браузера, по сути мы работаем с «чистым листом» и можем сосредоточиться на написании собственных стилей с нуля.

Normalize.css

Normalize.css

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

У обоих сводов правил есть свои плюсы и минусы, на данный момент популярен normalize.css. Популярность данного свода правил обусловлена ещё и тем, что вам не приходится при разработке заново прописывать основные свойства для базовых элементов страниц, а лишь модифицировать их по необходимости.

Так же стоит упомянуть о, так называемом, «быстром сбросе», когда мы абсолютно для всех элементов страницы с помощью селектора * прописываем свойства {margin: 0; padding: 0}. Таким образом мы сбрасываем все внутренние и внешние отступы для всех элементов страницы. Но данную технику не рекомендуется использовать, так как она замедляет процесс отрисовки страницы, да и по сути имеет мало смыла (на мой взгляд).

Так же стоит отметить, что все размеры и отступы берутся непосредственно из дизайн-макета. Для получения данных значений нам необходимо использовать инструмент «линейка» и направляющие (речь про инcтрументарий Adobe Photoshop), а затем переносить полученные значения в код. Если мы работаем с фиксированным макетом, то значения переносятся в пикселях как есть, если же у нас «резиновый», то значения нужно переводить в проценты. Основная формула – это ширина элемента, делённая на ширину контекста (ширина содержащего блока). Например, если блок, содержащий текст и картинку имеет на макете ширину 400px, а блок с текстом в нём должен иметь ширину 340px, то в процентном выражении это будет (340 / 400) * 100%, то есть 85% будет занимать блок с текстом.

Не стоит перегружать ваши стили чрезмерной специфичностью, например, если мы хотим, чтобы ссылка внутри списка имела красный цвет, то не обязательно записывать всю линейку классов и тэгов: .main –nav ul li a, достаточно просто указать .main-nav a. Слишком «специфичные» правила делают правила контекстно зависимым и заставляют вас писать лишний код, а так же влияют на скорость отрисовки страницы, так как при разборе правил CSS парсер читает их справа налево и ему сначала, если брать описанный выше пример, нужно взять все ссылки (a), затем отбросить все ссылки, которые не лежат в li и т.д. пока он не доберётся до содержащего класса.

Специфичность кода, так же означает чрезмерную привязку к базовым тэгам. Например, если мы хотим, чтобы элемент внутри .block был синим и при разметке использовали элемент span (в правилах мы написали .block span {background-color: blue}), то при замене его на div, например, нам нужно будет написать новое правило уже для div внутри .block. Таким образом наш код будет обрастать ненужными правилами, которые по сути дублируют друг друга. Гораздо проще определить всего лишь один класс (класс элемента), который при присвоении внутренним элементам будет приводить нас к желаемому результату.

Ещё один пример контекстной зависимости кода – это использование имен тэгов вместе с именами классов, например, div.block {display: block}. Если мы захотим тот же класс применить к span, то нам придётся написать опять span.block {display: block} или span.block, div.block {display: block}, что в любом случае приведёт к увеличению кода на лишнюю строчку.

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

Если, вы используете правила, относящиеся к спецификации CSS3, то не поленитесь проверить необходимость использования браузерных префиксов на сайте http://caniuse.com.

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

Полезные ссылки и материалы:

Написание JS

Итак, заключительным этапом является написание JS скриптов. При создании веб страниц стало, практически, стандартом использование библиотеки jQuery, которая позволяет с лёгкостью манипулировать элементами web-страницы (DOM узлами), навешивать прослушку событий, отправлять запросы на сервер, обрабатывать результат выполнения и пр. Но не стоит слепо доверять трендам, на сегодняшний день нативный JavaScript достиг такого уровня, что вам возможно уже не нужен jQuery. Поэтому, прежде чем слепо прикреплять jQuery, стоит задуматься, так ли он нужен для ваших задач и не достаточно ли встроенных возможностей языка JavaScript.

Есть неплохой ресурс, который приводит альтернативы одних и тех же манипуляций на языке JavaScript и с помощью библиотеки jQuery: http://youmightnotneedjquery.com/, так же неплохим подспорьем является сайт https://developer.mozilla.org/ru/, на котором, помимо описания методов и свойств JavaScript, можно найти полифиллы для тех или иных методов (библиотека или часть кода, которая добавляет в старые браузеры поддержку возможностей современных функций и методов JavaScript).

Важно отметить, что не рекомендуется использовать JavaScript для стилизации, то есть не стоит для того или иного объекта DOM (элемента страницы) добавлять портянку CSS свойств с помощью JavaScript, чтобы выделить его состояние и пр. Рекомендуется использовать классы, то есть заранее в CSS определить классы-состояния (активный, не активный, скрытый, использованный и пр.) и при манипуляции элементами просто добавлять или убирать соответствующие классы.

Например, у нас есть элемент списка с классом .list__item, для того, чтобы показать активный элемент в данный момент (выбран пользователем) или нет, можно просто добавить класс (.list__item—active), а не прописывать все стили, присущие этому классу в JS:

document.querySelector(‘.list__item’).style.color = ‘red’;

и т.д.

Небольшой пример с возможными способами присваивания класса (присвоение модификатора происходит при нажатии на зелёный квадрат):

http://jsbin.com/

.

Не рекомендуется решать задачи, которые явно относятся к уровню CSS с помощью JavaScript, пытаясь как-то выровнять объект или добавить ему стили при наведении и пр.

Опять-таки, возвращаясь к теме Mobile First, нельзя не упомянуть о 2-х концепциях, которые коррелируют с данной техникой. Progressive Enhacement и Graceful Degradation, что переводится как прогрессивное улучшение и последовательное ухудшение. Данные принципы описывают 2 разных подхода к разработке: в первом случае мы разрабатываем наш сайт, пишем скрипты с учётом старых браузеров и систем или же определяем поведение при невозможности запуска скриптов, а затем постепенно улучшаем скрипт, вводя современные функции и методы, таким образом мы получаем сайт, который будет одинаково хорошо работать в старых и новых браузерах и средах (то же касается и css).

При Graceful Degradation подход противоположный – мы разрабатываем для современных браузеров и, лишь, потом начинаем вносить доработки и изменения с учётом старых версий.

Подход Mobile First чем-то схож с Progressive Enhacement.

Проверка кода

После написания html, css и js для нашей страницы необходимо проверить всё ли сделано верно. Для этого можно использовать online средства:

Благодаря данным сервисам можно проверить не забыли ли вы где-то закрыть тэг, верно ли используете параметры и атрибуты, всё ли в порядке с вашими стилями и правилами в них, а так же проверить ваш код на правильность написания функций, методов и пр.

Статьи с рекомендациями по написанию JS, HTML и CSS:

Средства автоматизации

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

960GS

Мы уже говорили об этом средстве разработки в разделе про модульные сетки и дизайн. Нужно сказать, что 960GS предлагает не только макеты для создания дизайна, но и свою систему именования классов. Используя предлагаемые классы при вёрстке и при подключении css файла системы в проект, блоки сайта будут выстроены по этой сетке, что сэкономит время на написании практически того же самого самостоятельно.

<div>
  <div>
      <div>
          ...
      </div>
      <div>
          ...
      </div>
      <div>
          ...
      </div>
  </div>
  <div>
      ...
  </div>
</div>

Emmet

Emmet – это средство работы с html и css (

http://emmet.io/

). Плагин для работы с данным средством можно установить, например, в Sublime Text, тогда у вас появляется возможность не писать громоздкие куски кода на html и css, а записывать их в строчку, раскрывая затем в полноценную разметку. Например, строка

.block>ul.list>li.list__item*3

, может быть раскрыта в полноценный код:

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Затем вам просто необходимо вписать текстовые значения в элементы списка. То же касается и css: строка

w:100px+h:150px+bgc:#ff0

раскрывается в:

width: 100px;
height: 150px;
background-color: #ff0;

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

Jade

Далее стоит упомянуть и о таком языке работе с шаблонами, как jade (

http://jade-lang.com/

). Опять-таки, с помощью jade писать html становится быстрее и удобнее, а так же появляется возможность создания переиспользуемых блоков кода и миксинов, передавая которым на вход те или иные параметры мы будет получать нужную нам разметку. Благодаря jade в проекте, касательно разметки и написания страниц, может поддерживаться модульность, а часто используемые названия и блоки кода могут выноситься в качестве переменных (названия, имена страниц и пр.) или миксинов в отдельные файлы настроек и файлы, соответственно. Для работы с jade, а точнее для преобразования написанного кода из jade в html, необходимо использовать командную строку, а так же установить на ваш компьютер платформу nodejs (

https://nodejs.org/en/

,

http://nodejs.ru/

).

Командная строка

Работа в командной строке так же может ускорить некоторые этапы работы над проектом, например, создание папок и файлов. Запустив консоль в директории проекта и набрав в ней всего лишь одну строку:

mkdir project && cd project && mkdir css && touch css/styles.css && mkdir images && mkdir js && touch js/app.js && touch index.html

После нажатия enter мы получим папку project в которой будут находиться папки css, images, js, в папках css и js файлы styles.css и app.js, соответственно, а в корне project лежать файл index.html. Таким образом мы сэкономили время на создание папки, написание её названия, создание файлов и пр. Так же командная строка используется для работы с остальными средствами автоматизации.

Sass

Далее стоит поговорить о таком языке как Sass (

http://sass-lang.com

/). Данный язык упрощает работу с css. Благодаря Sass можно записывать вложенные классы, проводить математические вычисления прямо в коде, выносить переиспользуемые величины в качестве переменных в отдельные файлы или в начало файла, что в значительной степени упрощает дальнейшую работу со стилями и упрощает изменение тех или иных величин, так как они все будут храниться в одном месте и не нужно будет «ходить» по всему проекту и вносить соответствующие правки. Так же, благодаря Sass в проекте можно придерживаться принципа модульности, храня части разметки в соответствующих файлах и подключать их все в основной, затем с помощью консольной команды можно собрать весь код в один css файл, так же поддерживается сборка результирующего файла на лету по мере написания стилей. Опять-таки для работы с Sass потребуется командная строка. Процесс установки пакета можно изучить здесь:

http://sass-lang.com/install

.

HTML5Boilerplate

HTML5Boilerplate (

https://html5boilerplate.com/

) представляет собой заранее скомпонованный проект, в котором уже есть index.html, normalize.css и пр. В index.html, например, уже заранее прописаны основные куски кода, которые необходимы при написании html страницы. Проект позволяет скачать архив со всеми файлами как есть или же использовать кастомную сборку:

http://www.initializr.com/

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

Gulp и Grunt

Gulp (

http://gulpjs.com/

) и Grunt (

http://gruntjs.com/

) представляют собой сервисы запуска задач, которые описываются в основных файлах данных сервисов, выполняются с помощью совместимых модулей и запускаются на выполнение с помощью консоли.

Данные сервисы помогают использовать в разработке, например, вышеописанные средства Jade и Sass, автоматически преобразовывать их в соответствующие файлы html и css, сжимать их, если необходимо, а так же проверять, например css свойства, на необходимость использования браузерных префиксов и подставлять их в автоматическом режиме.

Оба сервиса используют различный подход в описании выполнения задач, но суть их работы одинакова. Полезным будет данное сравнение: http://frontender.info/gulp-grunt-whatever/

Так же многие сервисы вроде autoprefixer (автоматическая простановка браузерных префиксов), jshint (проверка JS кода на валидность) могут быть установлены как сторонние плагины в текстовом редакторе (Sumblime Text, Atom, Brackets) и инициализированы при нажатии определённого сочетания клавиш.

Bootrstrap, Foundation, Material Design Lite

Данные фрэймворки уже упоминались в разделе про дизайн. Но стоит опять вспомнить о них, так как они, в определённой степени, помогают автоматизировать процесс разметки веб-страницы и работы с ней.

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

Со всеми возможностями и примерами можно ознакомиться на соответствующих сайтах:

Данное описание не является исчерпывающим и представляет собой лишь поверхностный взгляд на некоторые технологии. Но прежде чем пускаться во все тяжкие, используя средства автоматизации, библиотеки, framework’и, готовый код и прочее, стоит, всё-таки, изучить основы работы с html, css и js.

Надеюсь, что все описанные вещи будут полезны вам в изучении темы веб-дизайна и фронтенд разработки.

11 золотых правил написания контента для вашего сайта

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

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

Некоторые советы по написанию применимы независимо от того, отображается ли ваш текст на экране, в печати или вырезан на стене пирамиды.Другая тактика особенно актуальна для веб-сайтов профессиональных писателей / авторов и интернет-магазинов. Следуйте этим 11 принципам, чтобы убедиться, что контент вашего веб-сайта получает должное внимание.

Узнайте, как запустить свой сайт сегодня!

1. Знайте свою аудиторию

Звучит просто, но многие писатели кладут перо на бумагу или палец на клавиатуру, прежде чем задумываться о том, кого они хотят достучаться. Прежде чем приступить к составлению контента, задайте себе следующие вопросы: Кто моя основная аудитория? А как насчет вторичной аудитории, которая может влиять на мою основную аудиторию и информировать ее? Как они найдут мой сайт в Интернете?

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

Аудитория находит веб-контент множеством разных путей — через социальные сети, ссылки с других веб-сайтов, через электронную почту и поисковые системы.Этот последний метод особенно важен, когда вы пишете для Интернета. Текст может быть очень хорошо написанным и информативным, но если он не оптимизирован для поисковых систем, скорее всего, мало кто его найдет. Подумайте еще раз о своей аудитории: какие поисковые запросы они будут вводить в Google? Если вы публикуете резюме в Интернете или создаете веб-сайт для своей внештатной работы, какую работу вы ищете? Обязательно включайте эти термины в заголовки и подзаголовки.

2. Следуйте модели «перевернутой пирамиды»

У

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

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

Развивайте свой бизнес в сети с Jimdo.

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

Эти два графика могут помочь вам составить представление о структуре вашего сайта.

3. Пишите короткие простые предложения

Длинные предложения предназначены для Чарльза Диккенса — при небольшом объеме внимания современного читателя требуются предложения из 35 слов или меньше. Таким образом, доступный и легкий для чтения контент веб-сайта, естественно, достигнет более широкой аудитории.

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

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

Можно ли легко понять ваш текст на уровне чтения с 7-го по 9-й класс? Чтобы узнать это, посмотрите, как он набирает баллы на уровне оценок Флеша-Кинкейда.

4. Придерживайтесь активного голоса

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

Active voice помогает создавать лаконичные, удобные для чтения предложения. Кроме того, он более прямой; когда вы говорите непосредственно с аудиторией («Вы можете это сделать»), это более увлекательно, чем сказать: «Это можно сделать». Это также важно на странице часто задаваемых вопросов на вашем веб-сайте.

5. Покажи, не скажи

Не ограничивайте свою прозу общими фразами и заявлениями высокого уровня. Конкретные примеры из реальной жизни помогают читателям лучше понять и визуализировать ваши сообщения. Рассмотрим эти два описания:

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

или

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

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

В качестве дополнительного бонуса более конкретная описательная информация о продукте помогает SEO вашего сайта и дает клиентам информацию, необходимую им для совершения этих покупок.

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

Нам нравятся описания продуктов на веб-сайте Зингермана — они с аппетитными подробностями объясняют, почему их деликатесы — лучший выбор.

6. Избавьтесь от жаргона

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

Рассмотрим это предложение:

Журналист схватил SOT из MOS, поехал обратно на станцию ​​и положил историю в консервную банку.

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

Журналистка взяла интервью у свидетеля об инциденте и записала свое заявление, чтобы включить его в историю.

Этот совет особенно важен, если вы работаете в технической сфере, но хотите, чтобы ваш веб-сайт привлекал неопытных клиентов.Помните, что вам нужно писать для своей аудитории (см. Пункт №1), а не для своих коллег. Доступный язык поможет вам выглядеть доступным и открытым — именно то, что вы хотите донести до будущих клиентов.

7. Смешайте свой выбор слов

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

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

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

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

Использование: накладная.

Не: счет

Использование: фотосессия

Not: фотосессия, фотосессия, съемка

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

8. Сделайте текст доступным для сканирования

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

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

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

Вот пример того, как использовать заголовки, чтобы разбить страницу и облегчить чтение.

• Также важно разделить контент на разделы с описательными подзаголовками. Например, веб-страница об изменении климата может содержать информацию под следующими заголовками:
  
  • Что такое изменение климата?
  • Драйверы изменения климата
  • Текущие и прогнозируемые воздействия изменения климата
  • Решения по сокращению выбросов
  • Узнать больше

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

9. Добавьте мультимедиа

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

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

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

10. Слой содержимого веб-сайта

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

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

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

11. Оставьте их желать большего

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

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

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

В общем, писать — это тяжелая работа, особенно — написание контента для вашего веб-сайта. Но помните, что вам не обязательно писать идеальные тексты с первого раза! Как только ваш контент будет опубликован, вы можете ежемесячно проверять веб-сайт, чтобы отслеживать и оптимизировать его производительность.С помощью этих советов вы будете готовы создавать эффективный контент, который найдет отклик даже у самых привередливых читателей в Интернете.

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

Развивайте свой бизнес в сети с Jimdo.

Как написать контент для веб-сайта за 9 шагов

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

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

Быстрые ссылки: как писать контент для веб-сайта?

Готовы начать? Вот так!

Шаг 1. Определите цель содержания веб-сайта

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

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

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

Шаг 2. Изучите аудиторию

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

• Уровень их знаний. Если вы планируете разговаривать с экспертами в тексте своего веб-сайта, вы будете использовать другой язык, чем если бы вы разговаривали с новичками.
• Что они действительно хотят знать. Это суть написания эффективного контента веб-сайта, потому что, если вы можете ответить на их вопросы лучше, чем кто-либо другой, у вас будет больше шансов получить их как клиента.
• Как они попадут на страницу. Понимание того, откуда приходят ваши пользователи или что они могут искать, попадая на вашу страницу, может помочь вам позиционировать свой контент.
• Их интересы. Знание того, что интересует вашу аудиторию помимо создаваемой целевой страницы, может помочь вам узнать, какие элементы нужно добавить в контент вашего сайта, чтобы они могли оставаться на вашем сайте.

Как вы исследуете свою аудиторию?

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

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

Изучение конкурентов также даст важные выводы.

Шаг 3. Исследование конкурирующих веб-сайтов

Хорошее написание контента для веб-сайта зависит от всестороннего видения конкурентной среды. Сравнение вашего сайта с сайтами конкурентов дает важную информацию, которая повлияет на текст, который вы пишете. Вот почему:

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

Эта исследовательская фаза поможет вам оценить ваши варианты, прежде чем писать.

Как вы исследуете конкурентов?

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

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

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

Теперь, когда вы изучили свою аудиторию и контент конкурентов, у вас есть представление о том, что вы хотите сказать.

Шаг 4. Спланируйте, как контент сочетается друг с другом на вашем веб-сайте

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

Если вы переделываете веб-сайт или создаете новый, вам может быть полезно создать каркас. Это может быть так же просто, как набросок списка страниц и тем, которые они будут освещать.

Продумайте:

• Какие страницы вам понадобятся и назначение каждой
• Как люди будут переходить на каждую страницу

Контент веб-сайта бывает разных форм и размеров. От развернутого контента и сообщений в блогах до объявлений на боковой панели и описаний продуктов — копии готовятся и отображаются различными способами для различных целей.

Связанный: 3 совета, которые помогут улучшить ваши практические статьи

Шаг 5: Напишите содержимое для каждой страницы

А теперь пора углубиться в пошаговые инструкции по написанию текста для ваших веб-страниц. Начните с понимания цели страницы, которую вы собираетесь написать.

Определите цель страницы.

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

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

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

• Переходы по ссылкам: страница, предназначенная для перехода пользователя на другую веб-страницу
• Генерация лидов: страница, предназначенная для того, чтобы побудить пользователя ввести свою информацию в форме согласия
• Покупка: страница, предназначенная для того, чтобы побудить пользователя совершить покупку

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

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

Найдите лучшее ключевое слово для страницы.

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

Как найти лучшее ключевое слово?

Чтобы определить лучшее ключевое слово для вашей страницы, используйте инструмент Alexa’s Keyword Difficulty.

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

Сложность ключевого слова Alexa фильтрует действие по ключевой фразе «календарь содержания».

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

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

Исследование популярных и конкурирующих страниц.

С какими страницами будет конкурировать ваша страница? Если вы это знаете, вы сможете найти возможности для создания более качественной страницы.

Один из способов сделать это — просто ввести целевое ключевое слово в Google и посмотреть, какие сайты в настоящее время отображаются на первой странице результатов. Просмотрите их один за другим и обратите внимание на:

• Длина содержимого страницы
• Темы, рассматриваемые на страницах
• Как они форматируют информацию (списками или абзацами?)

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

Самый популярный контент Twitter по запросу «ювелирные изделия с бриллиантами», обнаруженный с помощью инструмента Content Exploration от Alexa.

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

Напишите план и соберите ресурсы.

Чтобы написать хороший контент для веб-сайта, начните с наброска.

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

Затем создайте свой первый черновик копии веб-страницы.

Напишите копию страницы.

Погрузитесь в письменность. При написании контента для страниц своего веб-сайта помните об этих советах.

• Знайте свою цель, прежде чем начать. Ранее в этом посте мы говорили об определении цели вашей страницы.Помните об этой цели, когда пишете. Создавайте весь свой контент с намерением побудить вашу аудиторию совершить желаемое действие.
• Используйте перевернутую пирамиду. Это означает предоставление читателю наиболее важной информации в начале и менее важной информации в нижней части. Стиль перевернутой пирамиды соответствует тому, как люди читают в Интернете.
• Сосредоточьтесь на преимуществах перед функциями. По мере того, как вы выделяете продукты, услуги, стимулы или предложения, покажите читателю, что это для них значит.Вместо того, чтобы перечислять функции, объясните, какую пользу каждая функция приносит читателю. Например, не стоит говорить о системе передач велосипеда; поговорить о способности велосипеда обеспечивать плавность хода.
• Объясните преобразование. Дайте читателю представление о том, как продукт, услуга, поощрение или предложение изменят их ситуацию. Объясните, на что похожа жизнь до и после того, как они начнут действовать, и расскажите читателю, как их жизнь улучшится, когда они сделают следующий шаг.
• Будьте лаконичны и ясны. Используйте короткие предложения и фразы. Избегайте сложных формулировок, которые теряют читателей, и вырезайте любую ненужную или витиеватую информацию. Говорите только то, что читателю нужно знать.
• Избегайте модных словечек и жаргона. Не запутайте и не потеряйте читателей, используя терминологию высокого уровня, которую они не понимают. Пишите, используя тот же язык, на котором говорят ваши слушатели.
• Используйте маркеры и форматирование. Помогите читателям найти наиболее важные моменты в вашем тексте, разбив текст на части.Выделите основные моменты, используя маркеры, полужирный шрифт, курсив, а также варианты стилей и размеров шрифтов. Большинство читателей сканируют, поэтому убедитесь, что ключевые моменты выделяются.
• Говорите напрямую с читателем. Копия более эффективна, когда направлена ​​прямо на вашу аудиторию. Используйте тот же язык, на котором вы бы разговаривали со своим читателем лично. Используйте такие слова, как «вы» и «ваш», и, когда это уместно, включайте такие слова, как «нас» и «мы».
• Отойти от правил грамматики — если это звучит естественно. Хотя вы не хотите, чтобы ваш текст содержал явные грамматические ошибки, можно отклониться от строгих правил академического письма. Если вам кажется более естественным закончить предложение предлогом или использовать неполное предложение, нарушите правила. Но нарушайте правила только в том случае, если это добавляет ясности и естественности звучанию копии. Не раздвигайте границы настолько, чтобы ваша копия выглядела неотшлифованной и неряшливой.

Обратите особое внимание на то, как вы завершаете страницу.

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

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

Веб-сайты

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

• Приложите доказательство. Покажите читателям, почему они могут вам доверять. Сделайте резервную копию своих заявлений, включив в них отзывы, статистику, данные и упоминания в социальных сетях, которые предоставляют доказательства и поддержку.
• Преодолеть возражения. Поставьте себя на место своей аудитории и представьте, какие возражения удерживают их от принятия мер. Решите эти проблемы и предоставьте такие варианты, как бесплатные пробные версии и гарантии возврата денег, чтобы аудитория не могла сопротивляться вашему предложению.
• Используйте слова действия. Не позволяйте вашей аудитории ни капельки сбить с толку, когда они дойдут до конца вашей страницы. Включите призыв к действию, в котором используются слова действия (начните, щелкните здесь, зарегистрируйтесь, позвоните, заполните и т. Д.), Который точно сообщает им, что им нужно сделать, чтобы сделать следующий шаг.

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

Пересмотрите свой заголовок.

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

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

Заголовки для содержания веб-сайта должны быть:

• Ясно: Каракули или умные заголовки могут иногда работать для сообщений в блогах или социальных сетях, но избегайте их использования для заголовков целевой страницы.Всегда переходите сразу к сути и четко объясняйте, о чем эта страница.
• Релевантно: Заголовок должен соответствовать содержанию страницы, призыву к действию и ссылке, которая привела пользователя на страницу. Сопоставьте заголовки с языком призыва к действию, объявления или продвижения, которые привели аудиторию на страницу. Затем убедитесь, что остальная часть текста и призыв к действию соответствуют основному заголовку страницы.
• Ориентация на желания: Используйте заголовок как возможность представить действие, которое вы хотите, чтобы пользователи совершили, когда они получили от вашей страницы то, что им нужно.В заголовке укажите основное решение, пользу или результат, которые принесет действие.

Заголовки — отличное место для сосредоточения усилий, поскольку правильный заголовок может иметь большое значение для работы страницы. Узнайте больше здесь: 12 советов по написанию заголовков, которым не могут устоять читатели (и поисковые системы).

Шаг 6. Добавьте элементы страницы без копирования

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

Вы можете разбить страницу и привлечь внимание читателя к важной информации, используя:

• Изображений
• Пуговицы
• Текстовые вызовы
• Иконки
• Белое пространство
• Gif-анимации
• Диаграммы и графики
• Видео
• Разрывы строк
• Варианты цветов фона и изображений

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

Шаг 7. Внесите правки

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

На этом этапе вы, вероятно, найдете возможность:

• Правильные опечатки
• Улучшение выбора слабых слов
• Переписать непонятные разделы
• Усилить заголовок
• Ссылка на другой контент на вашем сайте

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

Шаг 8. Оптимизация страницы для SEO

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

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

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

Помимо использования ключевого слова в основной части текста, также используйте его в следующих элементах контента SEO:

• Заголовок страницы (заголовок, который виден на странице)
• По крайней мере, один подзаголовок (копия, отформатированная с h3, h4, h5 и т. Д.)
• Тег заголовка (заголовок страницы из 50-60 символов, встроенный в код страницы)
• Метаописание (сводка страницы из 150–160 символов, встроенная в код страницы)
• Альтернативные теги изображения (текст, который описывает изображение и появляется, если изображение не загружается должным образом)

Ссылка на новую страницу с других страниц вашего сайта.

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

Еще раз проверьте элементы SEO на странице.

Даже если вы оптимизируете свою страницу, можно легко упустить возможности или совершить ошибку. Чтобы проверить SEO на странице и убедиться, что вы правильно оптимизировали страницу, используйте встроенную SEO Checker от Alexa.Инструмент сканирует вашу страницу и предоставляет подробную информацию об ошибках и инструкции по их устранению.

Введите URL-адрес вашей страницы и основное ключевое слово в поисковую оптимизацию страницы.

Используйте инструкции отчета, чтобы внести изменения на свою страницу, которые улучшат ваше SEO.

Шаг 9. Планирование обновления содержимого позже

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

Рассмотрите возможность A / B-тестирования содержимого целевой страницы на своем веб-сайте.

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

Создавайте версии своей страницы с разными вариациями:

• Заголовки
• Подпозиции
• Призывы к действию
• Цвет пуговиц
• Изображения
• Макеты
• Характеристики

Затем выполните A / B-тестирование ваших страниц, чтобы увидеть, какие из них больше связаны с пользователями и дают наилучшие результаты.

Дополнительные советы о том, как писать контент для веб-сайта

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

Чтобы узнать еще больше о том, как писать контент для веб-сайта, просмотрите несколько других наших сообщений в блоге:

Блог Советы по SEO: Контрольный список для написания SEO-дружественных сообщений

Что такое контент-маркетинг?

Создавайте дополнительные материалы для совместного использования с помощью этого контрольного списка и 7 полезных инструментов

И, наконец, не забудьте подписаться на бесплатную 14-дневную пробную версию нашего Расширенного плана; он дает вам доступ ко всем упомянутым здесь и многим другим инструментам, которые помогут вам повысить эффективность ваших веб-страниц.

Эта статья была первоначально опубликована 17 мая 2017 г. и обновлена ​​8 октября 2019 г.

14 советов по написанию отличного содержания веб-сайта

Это первая строка, которой я должен привлечь ваше внимание и показать ценность статьи. У меня есть 15 секунд, как у вас, когда вы создаете контент для своей аудитории. У меня получилось?

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

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

Что такое веб-копия?

Под копией веб-сайта обычно понимается основная часть текста на вашем веб-сайте, предназначенная для продажи вашего продукта или услуги. Это слова, которые направляют ваших посетителей по сайту, объясняют концепцию вашего бренда и рассказывают людям о ваших услугах.Как правило, эти основные страницы включают в себя домашнюю страницу, «О нас», «Сервисную страницу» и «Часто задаваемые вопросы».

Так что же делает веб-сайт хорошим контентом?

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

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

• Как писать контент веб-сайта

Мы разделили наши рекомендации на три группы: советы перед написанием, советы по написанию и после Советы по написанию.

Советы перед написанием

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

Совет №1: Определите свою цель.

Самая важная вещь для любого автора копии — это понимать ее цель. Знание своей конечной цели с самого начала поможет вам создать идеальный контент и идеальный призыв к действию (я расскажу больше о CTA в Writing Tips).

Цель копии соответствует целям бизнеса.Итак, ответьте на вопросы по этому поводу:

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

Совет № 2: Определите свою целевую аудиторию.

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

Чтобы написать текст, который зацепит ваших потенциальных клиентов, вам нужно понять их образ мышления:

• Кто люди приходят на ваш сайт?

• Какие проблемы они хотят решить?

• Какие условия поиска они вводят в строку поиска?

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

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

Совет № 3: Знайте своих конкурентов.

Это также хороший ход для исследования веб-сайтов ваших конкурентов.

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

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

• Какую основную услугу они предлагают?

• Какой тип контента они используют на своих главных страницах — истории успеха, видео, статистику?

• На какую аудиторию они нацелены?

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

Определите, какие элементы контента привлекают внимание, будь то трафик (конечно), лайки, репосты и т. Д. Социальные сигналы ясно показывают, что ваша общая аудитория считает ценным и интересным. Используйте эти страницы и сравните заголовки страниц, метаописания и тип контента (длинная / краткая форма, видеоконтент и т. Д.).

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

Советы по написанию

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

Совет №4: Привлекайте читателей с первой строчки.

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

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

Совет № 5: сделайте вашу копию доступной для сканирования.

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

Совет № 6: Помогите читателям сориентироваться.

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

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

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

Совет № 7: разговаривайте с читателями, как с другом.

Создайте связь между вашим брендом и клиентом, используя такие методы, как:

• Активный голос: используйте структуру предложения, например «Вы можете заказать наши услуги» вместо «Наши услуги можно заказать». Пассивный залог уместен, когда вы хотите звучать более формально; в других случаях используйте активный голос, чтобы звучать более индивидуально.

• Прямая адресация: используйте «вы» для обращения к читателю, «мы», чтобы говорить с точки зрения компании, и «я» для индивидуального голоса.

Совет № 8: Говорите на языке непрофессионала.

Продолжая идею краткости вашей копии, сделайте ее простой. Исследование, проведенное The Literacy Project, показывает, что средний американец читает в 7-8-м классе. Если вы используете простой язык, ваши читатели с большей вероятностью поймут и запомнят больше.

Убедитесь, что вы:

• Используйте короткие предложения — они помогают четко передать ваше сообщение.

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

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

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

Совет № 9: Избегайте орфографических, грамматических и пунктуационных ошибок.

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

Совет № 10: Поощряйте читателей к действию.

Помните, как я говорил, что вы должны знать свою цель с самого начала? Пора применить эти знания.

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

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

Совет №11: Продемонстрируйте доказательство того, что CTA того стоит.

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

Совет №12: Добавьте наглядные материалы

Люди запоминают только 20% того, что они читают, но 80% того, что они видят и делают.Если вы добавите в свою копию инфографику, изображения, графики или видео, это поможет людям обрабатывать информацию и привлечь их внимание.

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

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

Советы по написанию текста

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

Совет № 13: Оптимизируйте для поисковых систем.

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

Тем не менее, важно избегать перенасыщения ключевыми словами, так как это может повредить вашему рейтингу в поисковых системах.Стремление к плотности ключевых слов 1-2% — это правильно.

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

• Включите ключевые слова в заголовки и подзаголовки. Добавьте основное ключевое слово к заголовку и h2 и 5-10 дополнительных к подзаголовкам и основному тексту.

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

• Сделайте ваши URL-адреса удобочитаемыми. Помогите читателям понять, что находится на странице.

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

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

Совет № 14: Держите свой веб-сайт свежим и актуальным.

Первое, что люди делают после того, как узнают о компании, — просматривают ее веб-сайт. Ваш веб-сайт — это ваша визитная карточка, поэтому убедитесь, что произведете хорошее первое впечатление.

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

• Обновите устаревшие баннеры или CTA. Замените их соответствующими предложениями, чтобы повторно активировать воронку контент-маркетинга и повысить коэффициент конверсии.

• Убедитесь, что копия работает нормально. Неэффективная копия может потребовать дополнительных примеров, советов и практических деталей.

• Измените свой контент. Вы можете попробовать другой формат для этого содержимого, например создать видео и добавить его на страницу.

• Оптимизация внутренних ссылок. Добавьте ссылки, указывающие на новые статьи, в сообщениях блогов по связанным темам.

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

Контент веб-сайта Killer из SEMrush

Мы рассмотрели несколько ключевых тактик для обеспечения высочайшего качества вашей веб-копии. Сохраняя простоту, сосредотачиваясь на клиенте, но при этом помня о важности SEO, вы сможете превратить посетителей в клиентов и помочь большему количеству потенциальных клиентов найти ваш сайт.

Создание веб-контента — сложная задача, и вам может казаться, что вам нужен профессиональный вклад. С помощью SEMrush Content Marketplace вы можете написать контент для вашего веб-сайта квалифицированными авторами контента, имеющими опыт работы в вашей отрасли, менее чем за 15 рабочих дней.

Вы платите за содержание своего веб-сайта в зависимости от его длины: 300, 500, 1000 или 1500 слов. Ознакомьтесь с тарифами на написание контента и сроками обработки нашего веб-сайта здесь.

Сделайте свой сайт выдающимся

С контентом, написанным профессионалами.

9 простых советов по написанию убедительного веб-контента

Это распространенная ошибка.

Это удается даже опытным веб-писателям.

О ком вы думаете, когда пишете свою веб-копию?

Вы представляете, как потенциальный покупатель читает ваш текст? И как вы думаете, что заставляет его — или ее — щелкать?

Это то, что делают большинство веб-авторов.

Они относятся к своим посетителям как к людям, которые любят читать.

Они относятся к своим посетителям в Интернете как к читателям печатного текста.

Но это неправильно. Совершенно неправильно. Потому что веб-копия полностью отличается от печатной копии.

Интернет-копия отсканирована. Или взглянул на. Не читать.

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

Итак, как вы можете убедить посетителей Интернета действовать, если они не читают ваш текст?

Позвольте мне объяснить…

Ниже приведены 9 советов по написанию убедительной копии для Интернета.

Готовы?

1. Относитесь к посетителям вашего веб-сайта как к диким животным

Посетители вашего веб-сайта ведут себя как дикие животные (источник: Alertbox Якоба Нильсена).

Они охотятся за информацией или продуктом для покупки — точно так же, как голодная пантера охотится за своей следующей едой.

Когда пантера нюхает след запаха, он быстро решает: приведет ли след запаха к хорошей еде? И будет ли это легким уловом?

Посетители вашего веб-сайта думают об одном и том же: предлагает ли ваш веб-сайт то, что они ищут? И легко ли им это найти?

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

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

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

Если посетители вашего сайта смотрят только на ваш сайт, как вы передаете свое сообщение?

2. Поместите в первую очередь самую важную информацию

Написание статей для Интернета полностью отличается от написания эссе или статьи.

Эссе может выглядеть так: сначала объясните, что вы собираетесь обсудить. Затем представьте обзор литературы. Затем обсудите; и напоследок сделайте свой вывод.Самый важный момент, который вы делаете, находится в заключении — в конце вашего эссе!

На веб-страницах вы должны делать наоборот: ваши самые важные моменты всегда на первом месте.

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

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

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

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

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

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

В Интернете читатель редко цепляется за каждое написанное вами слово.У него нет времени. Он торопится, потому что он мог бы проверить несколько других ароматических следов — веб-сайтов — вместо того, чтобы тратить время на то, чтобы понять, что вы делаете.

Часто лучше всего работают простые утверждения.

[W] Когда я смотрю на веб-страницу, это должно быть самоочевидным. Очевидный. Не требует пояснений. ~ Стив Круг.

Умная формулировка требует от людей мысли. И просить людей подумать не работает в Интернете, потому что посетители сети охотятся — у них нет времени думать.Так что делайте свою веб-копию как можно проще.

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

4. Пишите для сканеров

Сколько людей читают веб-страницы?

Вряд ли кто-нибудь!

[Что делают большинство посетителей Интернета] — это просматривают каждую новую страницу, просматривают часть текста и нажимают на первую ссылку, которая вызывает их интерес или отдаленно напоминает то, что они ищут.- Стив Круг

Исследования показывают, что только 16% людей читают веб-страницы слово в слово. Большинство людей сканируют. (источник: Alertbox Якоба Нильсена).

Как можно писать для сканеров? Контрольный список:

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

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

5. Используйте знакомые слова

Как читатели Интернета, мы снова охотники-собиратели — только на этот раз вместо того, чтобы сканировать горизонт в поисках добычи, мы просматриваем страницы на предмет слов-слов . Когда мы видим эти слова, мы щелкаем, мы действуем. ~ Джерри Макговерн

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

Никто не ищет рентабельные рейсы.Как показывает инструмент подсказки ключевых слов Google, люди ищут дешево:

Большинство людей ищут дешевые авиабилеты

Carewords — это слова, которые люди ищут. Нам часто нравится казаться лучше, чем мы есть на самом деле. Мы стараемся приукрашивать то, что делаем. Мы стараемся звучать научными, причудливыми или особенными. Но ваш посетитель в Интернете ищет знакомые слова — ключевые слова, потому что они представляют собой ароматный след, который подсказывает ему, что он оказался в нужном месте.

6. Пишите для ленивых

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

Сделайте вашу копию легко читаемой:

• Используйте короткие абзацы — максимум четыре предложения
• Используйте короткие предложения — в среднем двенадцать
• Пропускайте ненужные слова
• Избегайте жаргона и болтовни
• Избегайте пассивного времени
ненужных повторений
• Обращайтесь к своим посетителям напрямую — используйте слово, которое вы
• Сократите текст

Насколько коротким должен быть ваш текст? Стив Круг рекомендует избавиться от половины слов на каждой странице, а затем избавиться от половины того, что осталось.Это может быть слишком требовательная цель, но попробуйте. Задайте себе задачу и сделайте текст как можно короче.

7. Ожидайте, что люди появятся где-нибудь на вашем веб-сайте.

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

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

Вот что такое Интернет. Большинство посетителей не начнут читать с вашей домашней страницы. Они могут появиться на любой из ваших веб-страниц.

Если вы не знаете, откуда люди попадают на ваш сайт, перейдите в Google Analytics >> Контент сайта >> Целевые страницы. Вы можете точно увидеть, сколько посетителей пришло на каждую веб-страницу.

Если каждая веб-страница может быть страницей входа, что это значит?

• Каждая страница должна легко сканироваться
• Каждая страница должна разъяснять людям, где они находятся; и о чем ваш сайт
• На каждой странице должен быть призыв к действию, говорящий людям, куда идти дальше — прочитать еще одну запись в блоге, подписаться на рассылку новостей по электронной почте, просмотреть подробное описание продукта или отзыв, запросить цитату или добавить продукт в корзину

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

8. Сделайте так, чтобы охотникам было проще вас найти

Потенциальные клиенты охотятся за информацией или продуктами.

Как вы можете помочь им найти вас?

Привлекайте потенциальных клиентов на свой сайт, предоставляя полезную информацию. Вот как в основном работает письмо для SEO (поисковая оптимизация):

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

Прежде всего: Будьте полезны.

9. Произведите визуальное впечатление

Веб-копия и веб-дизайн должны работать вместе.

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

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

Как повысить визуальную привлекательность вашей веб-копии:

• Заменить текст фотографиями или видео
• Рассмотрите различные размеры шрифта — подумайте о людях, сначала сканирующих крупный текст
• Подчеркните цитаты клиентов (или экспертов), чтобы повысить доверие
• Поиграйте с выделением, полужирным шрифтом , CAPS или курсивом
• Разбейте длинный заголовок на заголовок с подзаголовком
• Измените абзацы на маркеры

Самое главное: уберите беспорядок.Уменьшите шум и добавьте пустое пространство. Это не только упростит чтение вашего сайта, но и повысит ваше воспринимаемое доверие (источник: социальные триггеры).

Правда о написании убедительной веб-копии

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

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

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

Вместо этого сделайте текст максимально простым.

Не пытайтесь быть всем для всех. Знайте, кто вы и чем занимаетесь.

Если ваше позиционирование ясно, гораздо проще выделиться в Интернете и быть найденным. Если ваше сообщение ясное, гораздо проще создать убедительную веб-копию.

Будьте ясны. Быть конкретным. Быть смелым.

Написание для Интернета | Usability.gov

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

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

Почему это важно

Люди читают в Интернете иначе, чем при чтении печатных материалов — пользователи Интернета обычно ищут информацию. В исследовании поведения чтения в Интернете Якоб Нильсен обнаружил, что «на средней веб-странице пользователи успевают прочитать не более 28% слов во время среднего посещения; 20% более вероятно ».

Определите основные задачи ваших пользователей

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

Знание основных задач пользователей может помочь вам определить:

• Контент для размещения на вашей домашней или целевых страницах
• Заголовки страниц и подзаголовки
• Логическая структура содержания каждой страницы

Как писать удобный контент

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

• Используйте слова, которые используют ваши пользователи. Используя ключевые слова, которые используют ваши пользователи, вы поможете им понять текст и поможете оптимизировать его для поисковых систем.
• Разбейте контент на части. Chunking делает ваш контент более поддающимся сканированию, разбивая его на управляемые разделы.
• Загрузите важную информацию в первую очередь . Используйте журналистскую модель «перевернутой пирамиды». Начните с контента, который наиболее важен для вашей аудитории, а затем предоставьте дополнительные сведения.
• Используйте местоимения . Пользователь — это «ты». Организация или государственное учреждение — это «мы». Это создает более четкую структуру предложений и более доступный контент.
• Использовать активный голос . «Правление предложило закон», а не «Правление было предложено правлением.”
• Используйте короткие предложения и абзацы . Идеальный стандарт — не более 20 слов в предложении, пять предложений в абзаце. Используйте тире вместо точки с запятой или, еще лучше, разбейте предложение на две части. Можно начинать предложение с «и», «но» или «или», если оно делает вещи ясными и краткими.
• Используйте маркированные и нумерованные списки . Не ограничивайтесь этим для длинных списков — одно предложение и два маркера легче читать, чем три предложения.
• Используйте четкие заголовки и подзаголовки . Вопросы, особенно с местоимениями, особенно эффективны.
• Используйте изображения, диаграммы или мультимедиа для визуального представления идей в содержании. Видео и изображения должны усиливать текст на вашей странице.
• Используйте пробел. Использование белого пространства позволяет уменьшить шум за счет визуального разделения информации.

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

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

Проверка читаемости вашего документа

Используйте статистику удобочитаемости Microsoft Word — часть проверки орфографии и грамматики — для измерения вашего прогресса при написании и редактировании текста.Постарайтесь, чтобы показатель легкости чтения повысился, а уровень вашего обучения понизился. Вы можете улучшить свою читаемость, используя активный голос и короткие слова, предложения и абзацы.

Список литературы

Как писать отличный веб-контент: ваше полное руководство

Факт: В Интернете слишком много плохого контента.

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

Как показал опрос Gallup, доверие людей к средствам массовой информации в значительной степени подорвано. Это недоверие не случайно — Интернет во многом помог посеять эти семена.

Итак, что происходит, когда вы набираете точный и ценный веб-контент?

Это свет в темноте.

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

Лучше всего то, что вы даете читателям именно то, что они хотят, в чем они нуждаются и чего жаждут.

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

Полное руководство: как писать отличный веб-контент

7 способов написать отличный веб-контент для блогов-блокбастеров

1. Сделайте заголовок понятным

1. Обращение к мозгу человека
2. Сохраняйте ясность, но не оскорбляйте их интеллект
3. Используйте лучшую формулировку

2.Расскажите о своей лучшей информации во вступлении

1. Начни с крючка
2. Скажите им, ПОЧЕМУ им это должно быть небезразлично

3. Организуйте свои точки

1. Объясняя концепцию? От простого к сложному
2. Написание памятки? Переходите от наиболее важного к менее важному
3. Написание руководства? Пошаговая инструкция

4. Ссылка и ссылка на высококачественные источники

5. Проверьте свое исследование

6.Напишите правильную длину сообщения в блоге

7. Проиллюстрируйте свою точку зрения изображениями

4 способа написания отличного веб-контента для целевых страниц и веб-страниц

1. Напишите активный заголовок

2. Сделайте копию основной части легко просматриваемой

3. Пребывание с упором на получение льгот

4. Напишите призыв к действию, кричащий читателю

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

5 примеров написания отличного веб-контента (хорошего, плохого и уродливого), Plus:

Вот как писать отличный веб-контент

Примеры некачественного веб-содержания — не делайте этих ошибок!

Создавая качественный веб-контент, вы помогаете установить стандарт публикации полезной и точной информации в Интернете.Подробнее в сегодняшнем руководстве от @JuliaEMcCoy Нажмите, чтобы твитнуть Узнайте, как создавать устойчивый и надежный веб-контент, из нашего полного руководства по этой теме через @JuliaEMcCoy. Нажмите, чтобы твитнуть.

Что такое анатомия отличного веб-контента?

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

Все они связаны с удовлетворением вашей аудитории. (Неудивительно, что там.)

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

• Мозг : Образовательный, информативный или практический?
• Скелет : Хорошо ли он организован? Имеет ли это смысл в целом?
• Мускулы : Это вас втягивает? Это заставляет вас хотеть / нужно , чтобы продолжить чтение?
• Сердце : Вас это развлекает? Это резонирует?

Чтобы ваш веб-контент попадал в цель, включите каждую из этих жизненно важных частей.

Вот как.

7 способов писать отличный веб-контент для блогов-блокбастеров

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

Найдите время, чтобы отметить каждый из этих полей, и вы будете на пути к величию веб-контента.

1. Заставьте заголовок петь

Отличный кусок веб-контента на вес золота начинается с потрясающего заголовка.

Мы много писали о том, как оптимизировать заголовок для SEO, но как создать заголовок, который понравится читателям? Как создать простой хороший ?

3 способа писать лучшие заголовки

1.Обращение к мозгу человека

Люди действительно предсказуемы.

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

Вот что мы знаем. Учтите эти моменты при написании заголовков. Попробуйте включить один (или несколько) в свою фразу / предложение:

• Человеческий мозг привлекают числа .Фактически, часть клеток нашего мозга предназначена исключительно для распознавания и интерпретации чисел. Когда вы включаете их в заголовки, вы подключаетесь к человеческому желанию количественно оценить ценность.
  • Примеры : «5 простых способов сэкономить деньги», «10 советов по приготовлению вкусного торта», «3 веские причины открыть сберегательный счет»
• Люди ненавидят чувство неуверенности . Скажем так: неуверенность = беспокойство = стресс. Если вы оставите заголовки слишком двусмысленными, вы вызовете нежелательную неуверенность и оттолкнете людей.Согласно хорошо известному исследованию Conductor, большинство людей предпочитают откровенные заголовки, которые помогают им понять, что их ждет, если они читают ваш блог или статью.

Часть клеток нашего мозга предназначена исключительно для распознавания и интерпретации чисел. Когда вы включаете их в заголовки, вы подключаетесь к человеческому желанию количественно оценить ценность. @JuliaEMcCoy Нажмите, чтобы твитнуть

• Люди задают вопросы в поиске. В частности, все больше и больше людей используют голосовой поиск для получения информации и задают вопросы полными предложениями. Отвечай им в заголовках! Обрамление заголовков в виде ответов также поможет вам ранжироваться по популярным запросам голосового поиска.
  • Примеры : «Как запустить автомобиль» «Как испечь именинный торт« Вот почему вам следует открыть сберегательный счет »

2. Сохраняйте ясность, но не оскорбляйте их интеллект

При написании заголовков многие люди забывают о ключевом ингредиенте: ясности.

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

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

Вместо того, чтобы констатировать очевидное, сосредоточьтесь на удобочитаемости.

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

Просто вставьте заголовок в текстовое поле, и инструмент автоматически присвоит ему буквенную оценку в зависимости от того, насколько легко его читать.

Буквенная оценка основана на множестве различных показателей и шкал, включая Flesch-Kinkaid.

Другой бесплатный инструмент, который работает аналогично, — это инструмент проверки читаемости WebpageFX. Просто вставьте заголовок в поле «Проверить прямым вводом» и нажмите «Рассчитать удобочитаемость».

Стремитесь к низкому уровню обучения — это означает, что это поймет практически любой, кто ее прочитает.

3.Используйте лучшую формулировку

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

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

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

Возьмем, к примеру, скромный заголовок:

« Как испечь торт »

В лучшем случае это скелет, и просто излагается то, что вы узнаете из статьи. Хорошо . Это нормально, но не дает повода читать дальше . В Google есть сотни миллионов статей на эту тему. Зачем мне читать , это ?

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

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

Вот несколько советов, которые сделают заголовки ярче:

• Будьте конкретны — У меня нет времени на общие слова; Интернет кричит на меня со всех сторон, и мое внимание ограничено. Скажи мне, что меня ждет. (То есть, какой торт я научу печь? Торт на день рождения? Шоколадный торт? Лимонный торт? Кекс кекс?)
• Используйте прилагательные, но не слишком много. — Прилагательные делают заголовок более привлекательным и подталкивают читателей к эмоциональной реакции.Например, добавление положительных слов, таких как «хорошо», «отлично», «лучший», «замечательный», «захватывающий» и т. Д., Поможет создать эту положительную ассоциацию / эмоцию. Включите хотя бы одно прилагательное , чтобы вызвать эмоции, которые вы хотите, чтобы читатели почувствовали, когда они прочитают настоящий пост.
  • Однако, , не попадайтесь в ловушку, набивая заголовок как можно большим количеством прилагательных. Согласно тому исследованию Conductor, на которое мы уже ссылались, большинству людей нравится видеть хотя бы один дескриптор или превосходную степень в заголовках, но не более того.

• Приправьте свои глаголы — Даже если глагол, который вы используете в заголовке, кажется наиболее логичным выбором, попробуйте найти лучший вариант. Например, в заголовке выше используется глагол «выпекать». Но мы также можем протестировать «делать», «создавать», «изобретать» или «создавать на скорую руку». (Не бойтесь обращаться к тезаурусу, чтобы найти альтернативы скучным глаголам.)

Когда я использую описанные выше методы для улучшения заголовка, он трансформируется:

« Как испечь торт » (* зевает *)

OR « Как приготовить самый лучший торт на день рождения »

Какой блог ВЫ бы хотели прочитать?

2.Расскажите о своей лучшей информации во вступлении

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

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

1. Начните с крючка

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

Вы не можете сделать это с помощью онлайн-письма.

Как вы пишете контент для веб-сайта?

Начать надо с крючка.

Верно.

Чтобы создать качественный веб-контент, с самого начала поделитесь своей основной мыслью, лучшей информацией. @JuliaEMcCoy Нажмите, чтобы твитнуть

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

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

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

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

2. Скажите им, ПОЧЕМУ им это должно быть небезразлично

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

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

Итак, РАССКАЖИ ИМ.

Начните с «почему». Дайте им повод остаться в вашем блоге — немедленно .

Конечно, есть и другие уловки онлайн-письма, чтобы ваши читатели оставались на вашей странице. Ознакомьтесь с моим руководством по написанию SEO.

3. Организуйте свои очки

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

Читать сообщения в блоге не должно быть трудом.

Огромная часть упрощения — это логическая организация ваших точек. Конечно, лучший подход к этой организации зависит от того, о чем вы пишете.

1. Объяснение концепции? Перейти от простого к сложному

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

С чего начать? Как вы им это раскладываете?

Начните с общего и основного, а затем переходите к более сложным аспектам.

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

Затем он углубляется в особенности теории струн, от самых простых до самых сложных:

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

2.Написать листок с подсказками? От самого важного к наименее важному

Если вы пишете серию советов, приемов или приемов, вам не нужно писать их в каком-либо определенном порядке — но сначала вы должны попытаться поделиться своими самыми важными и лучшими советами. @JuliaEMcCoy Нажмите, чтобы твитнуть

Подобно тому, как вы должны начать с «почему» во введении, этот метод помогает удерживать читателя на странице.

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

C) Написание руководства? Пошаговые инструкции

С точки зрения организации, написание руководства очень близко к объяснению концепции.

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

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

4. Ссылка и ссылка на высококачественные источники

Написание хорошего веб-контента — это не только о том, как вы систематизируете свои мысли или представляете информацию. Это также касается доказательства того, что ваши утверждения и утверждения точны и основаны на исследованиях / знаниях. .

Как вы это делаете? Убедитесь, что вы ссылаетесь и ссылаетесь на высококачественные источники.

Вот когда цитировать источник и давать ссылку:

• Каждый раз, когда вы указываете статистику , т.е.е. «8 из 10 человек прочитают заголовок вашего блога».
• Каждый раз, когда вы указываете факт, о котором никто не знает. , например: «Согласно Slate, большинство онлайн-читателей не дочитывают статью до конца»
• Каждый раз, когда вы ссылаетесь на другой веб-сайт, , т.е. «Hemingway Editor — отличный инструмент для самостоятельного редактирования».

Если вы не уверены, следует ли цитировать источник и давать ссылку на него, вот хорошее практическое правило: В случае сомнений цитируйте источник.

Как судить о качестве интернет-источника

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

Как узнать, качественный ли сайт? Быстрый способ узнать:

1. Загрузите расширение для браузера SEO, например SEOquake или MozBar.
2. Для каждого веб-сайта, на который вы хотите создать ссылку, сначала проверьте рейтинг авторитетности домена (DA). Чем выше оценка, тем авторитетнее сайт.
3. сайтов будут оценены по шкале от 1 до 100. В общем, любой сайт с рейтингом выше 50 является достаточно авторитетным, чтобы на него можно было ссылаться. Moz оценивает все объявления в результатах поиска, что упрощает поиск авторитетных источников:

4.Вы также можете проверить DA веб-сайта прямо на их странице. Он будет отображаться в MoBar так:

Помните: известные веб-сайты и бренды, вероятно, не нуждаются в проверке. (Вспомните The New York Times, Content Marketing Institute или Forbes.)

5. Проверьте свое исследование

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

Что я имею в виду?

Если вы цитируете статистические данные из исследования, дайте ссылку на исходное исследование, а не на резюме исследования с другого сайта или кого-то, кто просто цитирует исследование.

Например, есть много статистических обзоров, подобных этому:

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

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

В инфографике, полной статистики, обычно внизу мелким шрифтом:

Чтобы упростить поиск статистики, которую вы хотите процитировать, на исходной странице источника, используйте функцию поиска в браузере.(Для пользователей Chrome просто нажмите «Ctrl + F» на клавиатуре. Затем введите статистику или фразу, о которой идет речь, чтобы найти ее на странице.)

Вы также можете искать PDF-файлы следующим образом:

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

6. Напишите правильную длину сообщения в блоге

Отличное содержание веб-сайта — это до .

И, как правило, тщательный = исчерпывающий = полный .

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

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

Однако имейте в виду, что, по данным Buffer, 74% читаемых сообщений в блогах длится менее 3 минут.

Это составляет не менее 1600 слов.

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

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

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

7. Проиллюстрируйте свои мысли изображениями

Вот еще один фактор, присущий большинству видов мощного, вдохновляющего и отличного веб-контента:

Изображения перемежены текстом.

Лучшие примеры этого исходят от Нила Пателя — каждый пост наполнен примерами, скриншотами и инфографикой, которые расширяются по пунктам в тексте.

В этом есть смысл. Изображения добавляют визуальный интерес, ясность и даже юмор или азарт веб-контенту.

Изображения рядом с текстом также делают его более интересным для чтения.

Вы согласны?

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

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

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

Как написать отличный веб-контент для целевых страниц и веб-страниц

Целевые страницы отличаются от сообщений в блогах.

Этот тип веб-контента служит другой цели, поэтому требует другого подхода.

Целевые страницы

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

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

Вот пример одной из наших наиболее эффективных целевых страниц. Этот генерирует несколько подписчиков ежедневно. Эта конкретная страница позволяет вам загрузить наш Контрольный список стратегии содержания Easy ABC:

Весь контент на этой странице служит для того, чтобы вы научились делать одно дело :

Введите свои данные, чтобы получить бесплатную загрузку.

Как видите, целевые страницы невероятно ценны для конверсии трафика в потенциальных клиентов.

Хороший звук? Вот как можно написать качественный веб-контент для собственных сверхмощных целевых страниц.

1. Напишите действенный заголовок

Отличное веб-содержимое целевой страницы начинается и заканчивается призывом к действию. Начните с сильного и включите это в свой заголовок. Вот как:

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

Вот хороший пример от HubSpot:

Заголовок содержит мотивирующий глагол: « Get Started »

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

Через CoSchedule

• Не говорите слишком многословно — Важно, чтобы заголовки целевой страницы были краткими и точными.Если вы станете слишком многословным, читатели потеряют направление, в котором вы хотите двигаться.

Вот целевая страница с слишком длинным заголовком (не кем иным, как Adobe):

Он не только многословен, но и содержит глаголы с нулевым действием или мотивирующую лексику.

Еще хуже то, что CTA просто читает «Отправить».

Не хорошо.

• Используйте слово «вы». — Согласно исследованию HubSpot, призывы к действию, которые напрямую обращаются к читателю (с использованием слова «вы»), на 42% лучше конвертируют его.Таким образом, поговорите с читателем в заголовке веб-контента и сделайте его в 10 раз более мощным.

Вот отличный пример веб-контента от Copy Hackers, в котором используются все вышеперечисленные принципы:

2. Сделайте основной текст легко просматриваемым

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

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

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

Это означает несколько вещей:

• Короткие абзацы
• Множество разрывов строк
• Использование нумерованных и маркированных списков с логическими
• Использование h3s, h4s и даже h5s при необходимости

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

Изображение из Daily Egg

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

3. Сосредоточение внимания на преимуществах пребывания

При написании веб-контента оставаться ориентированным на преимущества также означает оставаться ориентированным на пользователя.

Это потому, что преимущества передают особенности вашего продукта / услуги, как они относятся к считывателю .

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

Вот пример веб-контента, ориентированного на преимущества, с целевой страницы программы членства Barnes & Noble. Льготы подчеркнуты красным:

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

4. Напишите призыв к действию, кричащий читателю

Веб-контент без призыва к действию неэффективен. Период. Когда пользователи попадают на страницу, они не будут знать, что им делать, если вы им не укажете.⏭️ @JuliaEMcCoy Нажмите, чтобы твитнуть

Так что направляйте их! Вот несколько простых способов сделать это.

1. Ориентируйтесь на заголовок

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

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

Вот пример сильного призыва к действию от CoSchedule.

Заголовок гласит: « Пора отказаться от импровизированного маркетинга». Обожаю!

Между тем, CTA отражает заголовок: « Удалите импровизированный маркетинг на обочину »

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

2. Поощряйте, вдохновляйте и мотивируйте читателя действовать

Отличный призыв к действию действительно мотивирует.

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

Рассмотрим приведенный выше CTA в качестве отличного примера: « Перенесите импровизированный маркетинг на обочину ».

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

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

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

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

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

Как писать отличный веб-контент: 5 хороших, плохих и уродливых примеров

Хотите узнать, как написать хороший контент для веб-сайта?

Учись на собственном примере.

Вот несколько хороших (и не очень).

Вот как написать отличный контент для вашего веб-сайта

Вдохновляйтесь этими блогами и веб-страницами:

1. CoSchedule

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

2. SmartBlogger

Примеры отличных сообщений в блогах, которые интересно читать и информативно, можно найти в SmartBlogger. Этот блог, в частности, хорошо организован и изобилует ценной информацией.

3. Аэродром

Хотите великолепные примеры целевых страниц и веб-страниц? Посетите веб-сайт Airstory — они разбираются во всех аспектах качественного веб-контента.

примеров непонятного веб-содержания — не делайте этих ошибок!

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

1. Сбивает с толку и отвлекает

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

Серьезно, что мне делать на этой странице?

2. Тонкий и тусклый

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

Эээ, что?

Кроме того, содержание отсутствует — нет информации о его вкусе, предложений по сервировке, советов по украшению или идей для вариаций. Мы просто получаем очень расплывчатые ингредиенты и инструкции.

Короче говоря, для меня здесь нет ничего ценного.

Последние шаги для написания хорошего веб-контента

Анатомия веб-контента, который выигрывает, включает мозг, мышцы, крепкие кости и сердце — много-много сердца .

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

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

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

Пишите осторожно, исследуйте подробно, а также редактируйте, редактируйте, редактируйте.

И помните…

Rome был построен не за один день, как и выдающийся веб-контент, который привлекает читателей.

23 Советы по написанию веб-контента для начинающих И профессионалов

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

Но вот в чем дело: если вы здесь, вы не просто хотите написать хорошую копию — вы хотите написать отличную копию.

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

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

Почему предприниматели должны учиться писать контент?

Хорошее написание контента — ваш лучший сотрудник. Исследование Salesforce / Pardot показало, что потребители считают, что доверие к контенту компании в 3 раза важнее, чем доверие к фактическим сотрудникам бренда.97% респондентов того же опроса также заявили, что плохой контент негативно влияет на их доверие к бренду.

97% потребителей, опрошенных @Pardot, заявили, что плохой контент негативно повлиял на их доверие к брендам. #marketing Нажмите, чтобы написать твит [/ raw]

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

23 Советы по написанию контента

1.Написание хорошего контента начинается с исследования ключевых слов.

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

Исследование ключевых слов расскажет, какие темы Google (и ваша целевая аудитория) считает релевантными.

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

Непревзойденная рентабельность инвестиций . Сайт TCF генерирует органический трафик на сумму более 400 000 долларов в год (например, нам пришлось бы потратить более 400 000 долларов на AdWords, чтобы получить такое же количество посещений). И все, что требуется, — это немного дополнительного времени на исследование и периодические корректировки для обновления контента и таргетинга по ключевым словам.

2. Заполнение ключевыми словами никогда не бывает нормальным

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

Веб-страница, заполненная ключевыми словами, выглядит сомнительной и ненадежной — как для Google, так и для читателей. Ваш коэффициент конверсии и рейтинг в поисковой выдаче снижаются вместе с количеством просмотров страниц. Читатели начинают видеть в ней некачественную страницу и быстро отказываются от нее, а со временем поисковые системы закрывают ваш домен.

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

3. Стремитесь к убедительным призывам к действию (CTA)

Что вы хотите, чтобы читатели делали с создаваемым вами контентом? Если ваш единственный ответ: «Ну, я думаю, прочтите», вам нужно вернуться к чертежной доске. Прежде чем вы даже начнете писать сообщение в блоге, вам нужно знать, каким будет ваш призыв к действию, и вы должны сделать его достаточно убедительным, чтобы читатели не могли не нажать. Так вы связываете написание контента с маркетинговыми целями и подтверждаете рентабельность инвестиций.

Какие призывы к действию следует использовать в своем контенте?

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

• Желаемое действие пользователя: загрузить ресурс. Загрузите наше бесплатное руководство, чтобы получить дополнительные советы экспертов по [теме].
• Желаемое действие пользователя: подписаться на рассылку новостей. Подпишитесь на эксклюзивные ресурсы в своем почтовом ящике каждую неделю.
• Желаемое действие пользователя: получить демоверсию. Запланируйте бесплатную демонстрацию [название программы / приложения], чтобы узнать, сколько часов вы можете сэкономить каждый день.
• Желаемое действие пользователя: поделиться контентом в социальных сетях. Знаете кого-нибудь, кто мог бы использовать эти советы? Поделитесь этой статьей и отметьте своего коллегу!
• Желаемое действие пользователя: совершить покупку. Щелкните здесь и используйте код предложения «СОДЕРЖАНИЕ», чтобы сэкономить 30% на покупке [продукта или услуги].

При написании призыва к действию поставьте себя на место читателя: что потребуется компании, о которой вы никогда не слышали, чтобы убедить вас сделать что-то, даже такое простое, как поделиться статьей с другом? Теперь свяжите это со своими целями: как создать призыв к действию и контент с учетом ключевых показателей эффективности маркетинга и продаж вашей компании, которые действительно побуждают читателей к действию?

4.Электронная почта против электронной почты, Интернет против Интернета и другие дискуссии о стиле

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

Точно так же «электронная почта» долгое время считалась правильным термином такими крупными авторитетами, как AP и The New York Times , но одна за другой они уступали.То же самое и со строчными буквами «интернет». Есть люди, которые до сих пор считают его именем собственным, но никто из них не работает редактором в The Guardian , The Economist или BBC.

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

Не рискуйте, следуя правилам AP или другому уважаемому руководству по стилю, или создавая свое собственное руководство по стилю дома, которое придерживается современных правил использования.Будьте последовательны и современны.

«Грамматические снобы, примите к сведению: каким бы ни был ваш язык, ваш онлайн-текст предназначен для вашей аудитории, а не для вас. #marketing »- The Content Factory

5. Всегда гиперссылка на свои источники

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

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

Часто сайты, на которые вы ссылаетесь, будут видеть ваши усилия и благодарить вас за них ответной ссылкой или цитатой.

Прочтите «14 способов получить обратные ссылки» для получения дополнительной информации об эффективной стратегии создания ссылок.

6. Заставьте читателя что-нибудь почувствовать.

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

Но почти все вирусные статьи объединяет одна общая черта: эмоциональное воздействие.

В недавней статье Hubspot опросил трех разных маркетологов о том, почему контент становится вирусным. Хотя каждый из них подчеркивал разные факторы, все три подчеркивали важность создания веб-контента, вызывающего эмоциональную реакцию у читателя. Меган Конли, стратег по контент-маркетингу в HubSpot, выразилась так:

У всех нас есть мнение о том, какие типы контента становятся вирусными: беззвучное социальное видео, объяснительный материал на основе данных, идеально синхронизированный информационный бюллетень.Но вне зависимости от формата, все сводится к эмоциям. Эта история вызывает у вас ярость, вдохновение, понимание? Со всем, что вы создаете, вы должны спросить: если это будет прокручиваться в моей ленте новостей, мне будет все равно? Если ответ отрицательный, оно того не стоит. Ваши привычки к онлайн-контенту — ваш лучший судья.

Итак, в следующий раз, когда вы будете создавать рекламный текст или писать в Интернете, спросите себя: «Что хорошего в этой истории? Как я могу сделать это более эмоционально? » Найдите его, и, возможно, у вас на руках будет вирусный контент.

«Хотите попробовать # вирус? Спросите себя: «Что хорошего в этой истории? Как я могу сделать это более эмоционально? » #marketing »- The Content Factory

7. Сохраняйте действие в своем контенте, написав

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

Например, возьмем обычный совет по письму: «не используйте пассивный залог».

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

Обратите внимание, что второе предложение почему-то менее захватывающее (даже если оно содержит льва-убийцу?) Это потому, что активный голос подчеркивает действие с «нападением льва». В пассивном тоне деревня — это субъект. Агент (лев, совершивший действие) упоминается только после этого с использованием предложной фразы «лев». Это почти что запоздалая мысль.

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

Наконец, не забудьте изменить стиль предложения.

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

Эти небольшие изменения не увеличат количество слов, но сделают написание контента более захватывающим и увлекательным.

«Content #writing PSA: откажитесь от пассивного голоса. «Пассивный голос должен быть отброшен # маркетологами» звучит ужасно «. — The Content Factory

8. Когда вы пишете для Интернета, рубите его.

Если вы пишете следующий Великий американский роман, можно заканчивать абзацы, когда паузы кажутся естественными. Однако писать для Интернета — это совсем другой мир.Охват внимания в Интернете НАМНОГО меньше, чем в Книжном клубе Опры, и ваши абзацы должны это отражать.

Проще говоря: кратко! Пятистрочный абзац — это хорошо, но трехстрочный абзац еще лучше. Короли контента, такие как Дерек Халперн, даже позволяют отдельным предложениям летать в одиночку.

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

9. Обновите ссылки

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

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

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

10. Купите хороший SEO-пакет

Вы можете провести SEO-анализ ключевых слов, используя только электронную таблицу Google и несколько бесплатных инструментов, но есть много данных, которые нужно обработать.А копаясь во всех ключевых словах и данных о трафике, легко потеряться в аналитике.

Не все SEO-пакеты решают эту проблему. Некоторые засыпают вас слишком большим объемом данных, не предоставляя инструментов, необходимых для их сортировки и настройки вашей контент-стратегии. Другие инструменты SEO разбивают все на свою собственную систему, не предоставляя вам достаточно данных, чтобы сделать собственные выводы. А когда они ошибаются, у вас не будет возможности узнать, пока ваш трафик не начнет падать.

SEMrush — один из инструментов SEO, который помогает найти правильный баланс. Фактически, мы такие фанаты, что даже стали партнером!

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

Серьезно, взгляните на этот снимок экрана:

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

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

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

Если вы хотите попробовать SEMrush, нажмите здесь, чтобы получить бесплатную 7-дневную пробную версию SEMrush Pro!

11. Не забывайте передовой опыт SEO

Повторить целевые ключевые слова пару раз недостаточно — вам нужно использовать свое ключевое слово (и связанные фразы) везде, где оно подходит: в URL-адресе, заголовках h3, мета-описании и даже в тегах alt ваших изображений.

Если вы используете WordPress, Yoast может помочь вам улучшить SEO.

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

Yoast не только решает большие проблемы, такие как отсутствие ключевых слов в мета-описании, но также может помочь вам увеличить детализированные проблемы, такие как низкая плотность ключевых слов, чтобы дать вашему сайту дополнительный прирост SEO:

12. Дайте вашим читателям повод для беспокойства с первого предложения

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

Но к этому моменту ваш читатель уже ушел.

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

«Совет по написанию контента: ваш веб-сайт — это не литература. Ваши читатели здесь, чтобы решить проблему, а не пускаться в разговоры о риторических приемах. #marketing »- The Content Factory

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

Наше вступление — хороший тому пример. Первое предложение — «ваш веб-сайт представляет вашу компанию». В пяти словах мы рассказали вам, почему эта статья важна. Остальная часть вступления расширяет это, говоря о том, как написание контента веб-сайта может помочь (или навредить) вашей компании.

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

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

13. Нарисуйте картину

Прочтите этот абзац:

«Это только мы, или некоторые люди говорят о свиданиях геев, как будто это тщательно продуманный фокус? Даже неопытные геи или квиры могут подойти к идее свиданий с таким жалким страхом, который испытываешь, открывая инструкции по приобретению нового предмета мебели IKEA. «Правильно ли я делаю это?» — могут спросить они себя спустя месяцы, годы и даже десятилетия своей карьеры в свидании.”

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

Дело в том, что написание контента сильно отличается от написания отчета по книге 7-го класса.

Ваша аудитория — не перегруженный работой и низкооплачиваемый учитель, и у вас нет другого выбора, кроме как прочесть ваши перефразированные «Заметки на утесе» на тему « Повелитель мух ».Ваша аудитория предпочитает читать ваш контент (или отправиться в другое место в Интернете). Изображения — отличный способ привлечь их внимание.

Ни на секунду не думайте, что скучная или техническая тема тоже отвлечет вас — инструкции по сборке IKEA не имеют ничего общего с гей-свиданиями (обычно), но мы использовали визуализацию, чтобы помочь читателю установить связь. Заставьте себя добавить немного творческой фантастики к написанию контента вашего веб-сайта и посмотрите, насколько увлекательнее читать (и писать!)

14.«Что можно и чего нельзя» или «Что можно и чего нельзя» — что правильно?

Последний! Ничто так не сводит нас с ума, как люди, вставляющие апострофы в слова во множественном числе.

Если сомневаетесь в правописании, написании заглавных букв или грамматике, погуглите! Что подводит нас к…

15. Если вы не уверены, посмотрите

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

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

Не останавливайтесь и на языковой механике. Изучите стратегию контент-маркетинга, читайте отраслевые блоги, изучайте успешные маркетинговые кампании в социальных сетях. Чем больше времени вы потратите на размышления и сбор новой информации, тем лучше у вас получится.

Скоро вы будете писать в блоге советы по написанию веб-контента!

16.Dictionary.com — ваш друг, поэтому заходите на сайт чаще.

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

Бонус: подпишитесь на Merriam-Webster в Twitter, чтобы повысить свой словарный запас и узнать лингвистическую сторону новостей.

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

17. Не называйте банан вытянутым желтым плодом

Не используйте слово в 3 доллара, если будет достаточно слова в 10 центов, если только вы не претендуете на награду «Самый претенциозный автор веб-контента».

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

В то же время вы должны писать для своей аудитории.

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

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

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

Хороший веб-контент со временем становится все более ценным. Аккаунты в социальных сетях делятся им, блоги ссылаются на него, а Google повышает свой рейтинг по мере поступления трафика.В то же время этот контент также стареет. Информация устаревает, меняется рынок и меняются интересы пользователей.

Это означает, что не существует такой вещи, как контент-стратегия «установил и забыл» (ну, если вы хорошо разбираетесь в том, что делаете).

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

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

Часто вы получаете отличные результаты с более длинным и информативным фрагментом, но более короткий фрагмент контента может вас удивить, стать вирусным и начать ранжирование по ключевым словам, на которые вы даже не нацеливались!

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

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

19. Веб-сайт против веб-сайта против веб-сайта

Какой это? Во имя любви ко всему удивительному, это веб-сайт (по крайней мере, так гласит AP Stylebook, что-то вроде библии для авторов веб-контента). Ни веб-сайт, ни веб-сайт, ни какой-либо другой вариант, о котором вы можете подумать.

Хотя термин «веб-сайт» когда-то был приемлемым, это все равно, что называть Blackberry «сотовым телефоном» — это заставляет вас выглядеть так же оторванным от технологий.

20. Сохраняйте низкий уровень показаний

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

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

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

21. Обеспечение добавленной стоимости

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

Это не должно вам ничего стоить. Это может быть ссылка на бесплатный веб-семинар (например, наш веб-семинар о бесплатном освещении в СМИ), шаблон Google Диска или даже рабочий лист. Поделитесь с читателями ценным опытом, и они не просто будут рассматривать ваш сайт как отличный ресурс — они также порекомендуют своих друзей!

22. Никогда не редактируйте свою работу самостоятельно (по крайней мере, не сразу)

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

Это только в том случае, если у вас по какой-либо причине нет другого человека, который мог бы редактировать вашу работу. Даже с хорошей проверкой орфографии вы многое пропустите. Убедитесь, что в вашей организации есть кто-то, кто отлично умеет писать и редактировать, и может дать вашей работе второй взгляд.Помните, что за каждым хорошим писателем — будь то автор бестселлеров, журналист Washington Post или копирайтер вирусной маркетинговой кампании — стоит отличный редактор.

Если Стивену Кингу нужен редактор, то и нам, простым смертным!

Чтобы понять, насколько трудным и необходимым может быть редактирование, попробуйте пройти тест The New York Times «Скопируйте, отредактируйте это»!

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

Вы бы правильно ответили на этот вопрос? Пройдите тест, чтобы узнать!

23. Повысьте свои навыки с помощью онлайн-курсов по написанию контента и SEO

При достаточной дисциплине хорошие навыки написания веб-контента станут доступны каждому. Наличие отличного текста на вашем веб-сайте — один из самых простых способов привлечь внимание новых посетителей (и заставить их возвращаться за новыми или, что еще лучше, поделиться своими ссылками).Хотите больше советов и приемов по созданию контента? Отправьте нам электронное письмо со своими вопросами, и мы ответим вам.

The Content Factory также предлагает онлайн-тренинги по SEO и написанию контента. Если вы хотите превратиться из новичка в профессионала всего за восемь часов самостоятельного цифрового обучения, подпишитесь на наш комплексный курс SEO. Вы можете посетить наш бесплатный веб-семинар, посвященный распространенным ошибкам SEO, чтобы увидеть, на что это похоже!

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

.

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт