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

Содержание

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

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

Условно процесс создания сайта (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. Популярность данного свода правил обусловлена ещё и тем, что вам не приходится при разработке заново прописывать основные свойства для базовых элементов страниц, а лишь модифицировать их по необходимости.

Так же стоит упомянуть о, так называемом, «быстром сбросе», когда мы абсолютно для всех элементов страницы с помощью селектора * прописываем свойства {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.

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

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

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

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

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

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

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

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

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

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

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

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

логотип

навигация

контент

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

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

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

Логотип

Контент

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

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

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

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

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

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

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

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

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

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

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

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

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

Mobile First

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

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

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/). Обширное сообщество, где можно подобрать различные палитры.

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

Элементы Call to Action

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

AIDA

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

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

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

Фрэймворки

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

Bootstrap

Foundation

Material Design Lite

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

Трэнды

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

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

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

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

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

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

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

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

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

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

Написание HTML

https://github.com/afarkas/html5shiv

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

https://modernizr.com/

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

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

БЭМ

БЭМ

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

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

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

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

SMACSS

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

SMACSS

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

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

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

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

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

Написание CSS

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

Reset.css

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

reset.css

Normalize.css

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

Написание JS

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

и т.д.

http://jsbin.com/

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

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

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

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

960GS

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

Emmet

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

http://emmet.io/

.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;

Jade

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

http://jade-lang.com/

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

Sass

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

http://sass-lang.com

http://sass-lang.com/install

HTML5Boilerplate

HTML5Boilerplate (

https://html5boilerplate.com/

http://www.initializr.com/

Gulp и Grunt

Gulp (

http://gulpjs.com/

) и Grunt (

http://gruntjs.com/

Bootrstrap, Foundation, Material Design Lite

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

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

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

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

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

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

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

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

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

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

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

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

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

логотип

навигация

контент

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

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

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

Логотип

Контент

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

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

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

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

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

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

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

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

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

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

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

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

Mobile First

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

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

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/). Обширное сообщество, где можно подобрать различные палитры.

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

Элементы Call to Action

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

AIDA

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

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

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

Фрэймворки

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

Bootstrap

Foundation

Material Design Lite

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

Трэнды

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

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

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

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

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

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

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

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

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

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

Написание HTML

https://github.com/afarkas/html5shiv

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

https://modernizr.com/

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

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

БЭМ

БЭМ

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

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

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

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

SMACSS

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

SMACSS

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

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

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

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

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

Написание CSS

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

Reset.css

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

reset.css

Normalize.css

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

Написание JS

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

и т.д.

http://jsbin.com/

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

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

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

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

960GS

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

Emmet

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

http://emmet.io/

.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;

Jade

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

http://jade-lang.com/

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

Sass

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

http://sass-lang.com

http://sass-lang.com/install

HTML5Boilerplate

HTML5Boilerplate (

https://html5boilerplate.com/

http://www.initializr.com/

Gulp и Grunt

Gulp (

http://gulpjs.com/

) и Grunt (

http://gruntjs.com/

Bootrstrap, Foundation, Material Design Lite

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

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

Написание сайтов: стоимость, особенности

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

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

Сайты принято называть статическими, если они выполняется на «чистом» html. Если же сайт написан, к примеру, на php, то его называют динамическим, поскольку отображаемые на сайте страницы являются результатами работы php-скриптов (программных кодов).

В современном веб-дизайне написание сайтов подразумевает не только «ручное», но и автоматизированное создание. Различные программы для написания сайтов помогают в этом. Так, к примеру, существуют специальные HTML- и CSS-редакторы, программы для работы с PHP. Кроме того, разработку сайтов и их дальнейшую поддержку и развитие значительно облегчают специальные системы управления (CMS) — «движки».

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

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

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

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

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

Заказать написание сайтов Вы можете прямо сейчас!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

План курса

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

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

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

Как создать свой сайт | Статьи по HTML, CSS, JS, PHP, MySQL

Как создать свой сайт – этот вопрос задаёт себе огромное количество людей, недаром он вводится только в одном Yandex примерно 1000 раз в сутки. Не меньше сайтов пытаются ответить на этот вопрос. Я видел много страниц, посвящённых теме создания сайта, его регистрации и раскрутки. Но я за свою практику не встретил ни одного сайта, который объединил бы все эти неразделимые темы воедино. И для восполнения этого пробела и был создан данный сайт. На этом сайте Вы сможете найти массу информации по теме: как создать сайт, как раскрутить свой сайт.

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

1) Многие думают, что создать сайт – это очень просто и быстро. И самое интересное, что в чём-то они правы. Действительно, существует большое количество CMS (систем управления контентом), которые позволяют создать сайт буквально за считанные минуты. Но вынужден Вас огорчить: создать сайт – это дело часто быстрое, а вот наполнить его полезным содержимым – дело, порой, нескольких лет.

2) Многие думают, что создать сайт – это очень сложно. Опять же – всё относительно. Смотря, какой сайт. Создать сайт на какой-нибудь CMS – очень просто, а вот разработать огромный портал с нуля да ещё и с кучей PHP-скриптов – это дело весьма сложное.

И те, и другие в чём-то правы, а в чём-то нет. Но я хочу, чтобы Вы усвоили: создание сайта – это дело, которое способен освоить практически любой человек, даже школьник, но чтобы стать профессионалом — придётся много работать. И данный портал поможет Вам освоить данную науку, причём Вы узнаете о том, как создать сложный сайт с использованием PHP и MySQL и, быть может, с использованием XML, и как создать простой сайт с использованием CMS. А после создания Вы сможете разместить свой сайт в Интернете, а после уже узнаете, как раскрутить сайт и сможете вывести свой сайт в TOP Yandex.

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

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

2) CSS. Язык, без которого практически немыслим дизайн сайта.

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

4) PHP. Этот язык является самым популярным по программированию Web-серверов. В частности, можно писать скрипты авторизации и регистрации пользователей, принимать и обрабатывать данные из формы, реализовывать поиск по сайту, делать собственные движки, другими словами, примеров использования PHP – бесчисленное множество.

5) MySQL. Данное программное обеспечение позволяет работать с базами данных, используя язык запросов SQL. MySQL — необходимая вещь для создания серьёзных сайтов.

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

Собственно, всё. Освоив все разделы, Вы сможете создать свой сайт.Если Вы хотите создать сайт быстро, то Вам необходимо и достаточно освоить всего один раздел: Joomla.

Joomla — это одна из самых популярных систем управления контентом. В этом разделе Вы найдёте всю необходимую информацию для создания сайта на Joomla.

После создания сайта необходимо разместить его в Интернете. Для этого имеется раздел: Регистрация сайта. В этом разделе имеется вся информация о том, как разместить сайт в Интернете, где его разместить, как это сделать бесплатно и что лучше: разместить сайт бесплатно или за деньги?

Наконец, после размещения стоит задуматься над вопросом: как раскрутить сайт. Для этого имеется раздел: Раскрутка сайта, в котором Вы найдёте массу полезной информации по раскрутке сайта с нуля, узнаете, с чего начать раскрутку сайта. А также массу полезных и свежих статей, позволяющих постоянно поднимать свой сайт всё выше и выше в поисковых системах. Также в этом разделе можно узнать о том, как получать огромное количество посетителей на свой сайт.

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

Создание сайта (цена на фрилансе)

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

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

Сколько стоит разработка и сопровождение интернет-ресурса

Посмотрите в личных профилях профессионалов Юду или спросите через внутренний чат, сколько стоит сделать сайт для фирмы. В прейскуранте на странице Юду отображены ориентировочные расценки на написание кода, изготовление и наполнение содержанием, техническое сопровождение дизайнерского сайта, личного блога, интернет-ресурса компании. Точную стоимость создания сайта для любых учреждений на движке Builder или Oscommerce Web-специалист сможет рассчитать после оценки объема работ.

Благодаря специалистам Юду вы сможете дешево купить сайт – цена на разработку индивидуального блога или веб-ресурса для фирм зависит от ряда факторов:

тип сайта (персональный блог, портфолио для студии фотографии, веб-ресурс для учреждения, интернет-страница для объявлений предприятия и т.д.)
вид хостинга для сайта (платный или бесплатный)
срочность работы
тип движка (Builder, OsCommerce)
сложность дизайна сайта

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

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

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

Почему стоит выбрать опытных профессионалов Юду

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

Преимущества заказа сайтов у профессионалов Юду:

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

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

Writing for the Web — Руководство по веб-контенту — Web Team

Веб-сайты требуют уникального стиля письма. Писатели рисуют картину словами. Репортеры сообщают об этом с драматическим чутьем. Ученые объясняют сложные идеи в контексте цитат. Авторы веб-материалов делятся информацией максимально сжато.

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

Как сделать ваш веб-сайт простым для восприятия пользователями?

Будьте лаконичны

Не говорите в 150 словах то, что можно было бы сказать в 75. Не говорите в 75 словах, что можно было бы сказать в 30.

Напишите просто

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

Избегайте «маркетологов»

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

Используйте стиль письма «Перевернутая пирамида»

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

Используйте ключевые слова

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

Используйте заголовки

Разделите текст на короткие, но описательные заголовки и подзаголовки, чтобы пользователи могли быстрее находить информацию.

Разбейте разные идеи на разные параграфы

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

Сделайте текст более удобным для просмотра

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

Выделите только при необходимости

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

Используйте подходящий футляр

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

Упростите идентификацию ссылок

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

Writing for the Web | Usability.gov

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лили Рэй, @lilyraynyc:

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

Кайл Уигхэм, @Whigsy:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Совет № 8: Говорите в условиях непрофессионала

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

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

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

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

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

Совет № 10: Побуждайте читателей действовать

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

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

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

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

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

Совет №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 слов. Ознакомьтесь с тарифами на написание контента и сроками обработки нашего веб-сайта здесь.

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

с содержанием, написанным профессионалами.

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 »- Content Factory

5. Всегда гиперссылка на свои источники

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

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

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

Прочтите «14 способов получить обратные ссылки» для получения дополнительной информации об эффективной стратегии создания ссылок.

6. Заставьте читателя что-нибудь почувствовать.

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

Но почти все вирусные статьи объединяет одна общая черта: эмоциональное воздействие.

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

У всех нас есть мнения о том, какие типы контента становятся вирусными: беззвучное социальное видео, объяснительное видео на основе данных, идеально синхронизированная новостная лента.Но независимо от формата, все сводится к эмоциям. Эта история вызывает у вас ярость, вдохновение, понимание? Со всем, что вы создаете, вы должны спросить: если это будет прокручиваться в моей ленте новостей, мне будет все равно? Если ответ отрицательный, оно того не стоит. Ваши привычки к онлайн-контенту — ваш лучший судья.

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

«Хотите попробовать # вирус? Спросите себя: «Что хорошего в этой истории? Как я могу сделать это более эмоционально? » #marketing »- 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 »- 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. Держите уровень чтения на низком уровне

В целом, чем легче будет читать вашу статью, тем лучше.Сложного содержания нет Знаете ли вы, какова оценка Flesch Kincaid Reading Ease для вашего фрагмента содержания? Есть множество бесплатных инструментов, которые помогут вам его найти. Эти инструменты просматривают ваш контент, анализируют ваш словарный запас и оценивают вашу удобочитаемость по классу.

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

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

21. Обеспечьте дополнительную ценность

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

Это не должно вам ничего стоить. Это может быть ссылка на бесплатный веб-семинар (например, наш веб-семинар о бесплатном освещении в СМИ), шаблон Google Диска или даже рабочий лист. Поделитесь с читателями ценным опытом, и они не просто будут рассматривать ваш сайт как отличный ресурс — они также порекомендуют своих друзей!

22. Никогда не редактируйте свою работу самостоятельно (по крайней мере, не сразу)

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

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

Если Стивену Кингу нужен редактор, то и нам, простым смертным!

Чтобы понять, насколько сложным и необходимым может быть редактирование, попробуйте пройти тест The New York Times «Скопируйте и редактируйте это»!

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

Вы бы ответили правильно? Пройдите тест, чтобы узнать!

23. Повысьте свои навыки с помощью курсов по написанию онлайн-контента и SEO.

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

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

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

Фотография заголовка Дэна Консулла на Unsplash

Лучшие практики для веб-написания

Запись значимых заголовков

Заголовки

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

Заголовки должны:

Будьте короткими и прямыми
Уметь стоять самостоятельно и понимать вне контекста
Избегайте жаргона, сокращений, хитрости и технических терминов
Будьте дружелюбны к поисковым системам — см. «SEO Writing» ниже

Использовать общий язык

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

Тон

Читатели ожидают от веб-письма личного оптимистичного тона. Они считают бюрократические письма оскорбительными и неуместными и игнорируют сообщение, которое они пытаются передать.

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

Коротко

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

Помните

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

300-700 слов — это разумная средняя длина для любого веб-контента.

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

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

Подзаголовки, списки и сканирование

В среднем пользователи читают около 20 процентов вашего контента на странице.

Что делать? Будьте лаконичны. Будьте актуальны. Используйте короткие предложения и глаголы действия и сокращайте несущественный текст, не жертвуя своей индивидуальностью.

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

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

Эффективное использование ссылок

Ссылка, ссылка и ссылка на соответствующую информацию.

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

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

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

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

Да: Для получения дополнительной информации просмотрите Политику печати на UMB.
Нет: Чтобы узнать больше о политике печати в UMB, щелкните здесь.

Форматирование

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

Структурируйте свой контент как «перевернутую пирамиду» на страницах верхнего уровня

Что такое перевернутая пирамида? Это стиль письма, в котором вы ставите самую важную информацию на первое место.

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

Контент, требующий от пользователей вертикальной прокрутки, теряет до 80% читательской аудитории.

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

Цель — заинтересовать посетителей сайта. Сохраните более специализированные и длинные страницы для более глубоких уровней сайта.

Написание текстов, оптимизированных для поисковых систем (SEO)

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

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

То же самое верно, когда ни одна из ссылок на эту страницу не содержит слов, которые пользователь использовал в своем поиске.

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

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

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

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

Хорошо выглядеть

По возможности, работайте с дизайнером, когда требуются работы.

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

Редакционные стандарты

См. Руководство по редакционному стилю для Интернета

Авторы контента для веб-сайтов — Услуги по созданию веб-контента

Почему написание контента для веб-сайтов так важно?

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

Каковы ключевые элементы выдающегося содержания веб-сайта?

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

Как часто мне следует обновлять содержимое моего веб-сайта? Почему?

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

Почему контент важен для SEO?

Поисковая оптимизация (SEO) направлена на улучшение вашего контента для повышения рейтинга в поисковых системах Google.Без качественного содержания ваш сайт не будет отображаться в первых результатах поиска. В результате посетителям и потенциальным клиентам будет сложнее найти ваш сайт во время поиска. Хороший контент оптимизирован как для поисковых систем, так и для людей. Когда вы используете правильные ключевые фразы в нужном месте, ваш контент будет отображаться в результатах поиска, для которых он наиболее релевантен.

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

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

Как я могу определить голос и тон моего сайта?

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

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

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

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

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

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

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

Логотип

Навигация

Контент

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

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

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

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

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

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

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

Mobile First

Элементы Call to Action

AIDA

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

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

Фрэймворки

Трэнды

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

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

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

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

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

Написание HTML

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

БЭМ

SMACSS

Написание CSS

Reset.css

Normalize.css

Написание JS

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

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

960GS

Emmet

Jade

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

Sass

HTML5Boilerplate

Gulp и Grunt

Bootrstrap, Foundation, Material Design Lite

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

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

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

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

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

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

Логотип

Навигация

Контент

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

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

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

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

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

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

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

Mobile First

Элементы Call to Action

AIDA

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

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

Фрэймворки

Трэнды

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

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

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

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

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

Написание HTML

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

БЭМ

SMACSS

Написание CSS

Reset.css