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

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

Условно процесс создания сайта (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.

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

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

• Пример сайта, использующего концепцию адаптивного веб-дизайна
• Статья, в которой разбирается данная концепция (eng.)
• Книга об отзывчивом веб-дизайне

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

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

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

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

Наиболее популярной системой является модульная сетка 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.

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

• Паттерны адаптивной сетки
• Создание прототипа на основе 960gs (eng.)
• Использование сетки 960gs как основы для дизайна (eng.)

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

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

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

  

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

  

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

  

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

• http://unmatchedstyle.com/gallery
• http://cssdrive.com
• http://foundation.zurb.com/templates.html
• http://zurb.com/patterntap

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

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 (http://www.sublimetext.com/3)
• Atom (https://atom.io/)
• Brackets (http://brackets.io/)

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

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

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

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

• Atom
• Sublime Text
• Brackets

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

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

Лучше всего отдельные категории файлов помещать в свои папки: картинки в папку 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
• Написание CSS
• Написание JS

Написание HTML

Сейчас при написании HTML кода уже смело можно использовать тэги и элементы разметки, которые появились вместе с стандартом HTML5, если вам необходимо поддерживать старые браузеры, то можно использовать, например, плагин html5shiv (https://github.com/afarkas/html5shiv), который обеспечивает поддержку новых стандартов в старых браузерах или библиотеку Modernizr (https://modernizr.com/) (html5shiv входит в сборку Modernizr), которая определяет возможности браузера, с помощью которого просматривается сайт.

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

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

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

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

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

БЭМ

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

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

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

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

SMACSS

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

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

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

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

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

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

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

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

Написание CSS

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

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

Reset.css

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

Normalize.css

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

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

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

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

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

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

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

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

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

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

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

• Книга Сначала мобильные
• Книга CSS. Рецепты программирования
• Книга Большая книга CSS3
• Книга CSS3. Руководство разработчика
• Небольшой курс по основам CSS: Смотреть

Написание 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 средства:

• Для проверки html: https://validator.w3.org/
• Для проверки CSS: http://jigsaw.w3.org/css-validator/
• Для проверки JS: http://www.jslint.com/

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

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

• 10 советов по написанию нативного JavaScript без jQuery
• Сайт-сборник рекомендаций по JS, HTML и CSS

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

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

960GS

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

<div class="container_12">
  <div class="grid_7 prefix_1">
      <div class="grid_2 alpha">
          ...
      </div>
      <div class="grid_3">
          ...
      </div>
      <div class="grid_2 omega">
          ...
      </div>
  </div>
  <div class="grid_3 suffix_1">
      ...
  </div>
</div>

Emmet

Emmet – это средство работы с html и css (http://emmet.io/). Плагин для работы с данным средством можно установить, например, в Sublime Text, тогда у вас появляется возможность не писать громоздкие куски кода на html и css, а записывать их в строчку, раскрывая затем в полноценную разметку. Например, строка .block>ul.list>li.list__item*3, может быть раскрыта в полноценный код:

<div class="block">
  <ul class="list">
    <li class="list__item"></li>
    <li class="list__item"></li>
    <li class="list__item"></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

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

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

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

• Bootstrap: http://getbootstrap.com/
• Foundation: http://foundation.zurb.com/
• Material Design Lite: http://www.getmdl.io/

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

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

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

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

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

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

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

Среди таких продвинутых и доступных решений можно выделить систему управления бизнесом А2Б. Перечислим пять наиболее востребованных из 12 модулей системы.

Модуль «Клиенты» – встроенная CRM-система управления клиентскими взаимоотношениями. Руководители подразделений и директор компании могут отслеживать активность работы отдела продаж и историю работы с каждым заказчиком. Модуль позволяет планировать встречи, назначать звонки и вести полноценную работу с любым количеством клиентов.

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

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

Модуль «Цели» позволяет отследить степень продвижения компании к намеченным перспективам.

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

Функционал в системе управления бизнесом А2Б подбирается непосредственно под запрос компании. Корпоративный портал также позволяет генерировать различного вида отчеты внутри системы по многим показателям.

Локальные и облачные корпоративные порталы

Современные корпоративные порталы доступны заказчику в двух вариантах: локальные и облачные. Каждый имеет свои особенности и преимущества.

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

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

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

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

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

Ценность корпоративного портала для современного руководителя

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

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

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

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

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

Пример практических решений

Кейс первый

Компания Х – территориально распределенная крупная производственная компания, занимающаяся разработкой и внедрением сложных технологических продуктов на заводах. На рынке компания работает более 8 лет. Количество сотрудников – около 700 по всей России. Значительная часть персонала получает задачи от своих руководителей удаленно (задачи на разработку продуктов, их техническое описание).

Результат после десяти месяцев использования корпоративного портала А2Б:

• на 34% сократилось время обсуждения деталей новых и существующих проектов;
• на 48% снизилось количество задач, выполненных с нарушением сроков;
• оптимизация рабочего план-графика выполнения проектов позволила высвободить 15% рабочего времени ключевого персонала.

Кейс второй

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

Результаты по итогам двух месяцев использования системы контроля выполнения поручений, CRM и системы управления проектами:

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

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

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

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

Протестировать корпоративный портал А2Б можно бесплатно в течение 30 дней.

Рекламный материал

Фото: pixabay.com

Обновила: Дарья Ракова

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

0. Постановка задачи

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

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

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

1. Формирование УТП

Неважно, какой сайт вы делаете, первое, что нужно при подготовке, – найти свою особенность. Это не значит, что у вас должны быть уникальные картинки и 80 % + по «Адвего» (сервис проверки уникальности текста).

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

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

Из УТП понятно, что уникального в бизнесе и чем он будет полезен клиенту

Еще один пример того, как уникальность помогает в продажах – SMM-продвижение тренажеров для реабилитации. Из-за специфики этой тематики конкуренты просто боятся заходить в соцсети, так как считают: «Раз здесь сложно достучаться до тех, кто принимает решение о покупке, зачем тратить время и нервы?» И это большая ошибка!

Сайт для реабилитационных тренажеров

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

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

Переписка с пользователем о реабилитационных тренажерах

Материалы, которые помогут найти и сформулировать особенность бизнеса:

• 19 вариантов отстройки от конкурентов для продуктов «как у всех» + еще 1 бонус;
• Как составить уникальное торговое предложение: исследование, работающие формулы и проверка УТП.

2. Подготовительные работы

Подготовка – самая важная часть разработки сайта. Даже опытные специалисты не сделают «Сайт Мечты», пока не составят четкое ТЗ, что возможно только после проведения всех подготовительных работ в полном объеме.

Анализ ниши и конкурентов

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

Вот на что нужно обратить внимание при конкурентном анализе:

• Как устроены сайты конкурентов – какая у них структура, дизайн, какие детали;
• Насколько качественен сайт с точки зрения пользователя, удобно ли ему на нем;
• Какое у сайта УТП.

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

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

• 5 причин, почему нельзя копировать сайт конкурента, и что делать, если сильно хочется;
• Анализ цен конкурентов: поэтапный план для чайников;
• Как анализировать конкурентов правильно: 4 основных направления.

SWOT-анализ бизнеса

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

Если по-русски, то это ССВУ-анализ: анализ Сильных сторон, Слабых сторон, Возможностей и Угроз продукта

К примеру, дружественные консультанты в магазине – это офлайн-УТП, которое будет побуждать клиентов пользоваться вашими услугами вне интернета. Каким будет УТП для тех, кто пользуется вашими услугами в интернете? Решайте сами, анализируя конкурентов. Это может быть мгновенная доставка «до двери», предоставление десятков тестеров / семплов по первому щелчку и т. д.

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

Продумывание посыла, ядра и приблизительного «скелета» сайта

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

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

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

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

Структура сайта может быть разной:

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

Где логика: разбираем самые популярные виды структур сайтов

Покупка хостинга и домена

Хостинг – услуга размещения информации на сервере, «домик» сайта. Домен – имя сайта, которое отображается в адресной строке.

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

Разобраться, что выбрать, помогут наши материалы:

• Хостинг: как выбрать и на какие технические возможности обратить внимание;
• Как выбрать доменное имя, если в 2022 году уже все занято.

3. Выбор стратегии продвижения + ключевые слова

Сформировали стратегию сайта и его карту? Можно собирать ключевые слова из сервисов WordStat и KeySo для дерева запросов. Необязательно сразу делать «большое дерево». Иногда, при работе с ключами вы будете замечать, что какие-то запросы неинтересны ЦА. При этом «деревянная» структура обязательна: не нужно продвигать на одной странице доставку суши в Москве и в Новосибирске.

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

Такие схемы удобно делать в виде интеллект-карт (mind maps)

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

Практическое руководство по подбору поисковых фраз

4. Выбор CMS

CMS (система управления контентом) – одна из важнейших вещей в сайтостроении. Верно подобранная «админка» поможет реализовать все задумки, быстро масштабироваться и работать без критических багов. Для текста идеально подойдет WordPress, хорошо будет работать Tilda. Магазинам лучше присматриваться к «Битриксу» и Shoptet.

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

• Какую CMS лучше выбрать для интернет-магазина;
• Какую CMS выбрать: руководство по выбору «движка» для сайта;
• Как сделать сайт на WordPress – очень полезный, полный гайд;
• У вас еще нет сайта? В этой статье сделаем сайт на Joomla! за час.

5. Подготовительная работа с Google и «Яндексом»

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

Создайте профили в «Google Бизнес» и «Яндекс.Бизнес». Это поможет клиентам находить вас, задавать вам вопросы, а вам – отвечать на них, видеть статистику и привлекать покупателей.

Добавьте предприятие на Google Maps и «Яндекс.Карты» (также не помешает Bing). Чем больше сервисов уже индексирует вас, тем лучше. У вас может еще не быть сайта, но страничка на карте обязательна! Иначе как люди узнают, что вы работаете рядом с ними?

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

Если у вас интернет-магазин, можете добавить товары на Яндекс.Маркет. Платить придется, но только за покупки – просмотры карточек бесплатны.

Товары в Яндекс.Маркет добавляются с помощью YML-файла – об этом мы писали в статье «YML-файл для Яндекс.Маркета: что это, зачем и как его сделать».

6. Работа с ядром и структурой сайта

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

Создание семантического ядра

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

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

• Что такое семантическое ядро и как его составлять;
• Составление семантического ядра: 5 типичных ошибок
• Главная проблема семантики, которая мешает поисковому продвижению;
• Как вывести сайт в топ при помощи скрытой семантики (LSI).

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

Запросы «средней частоты» универсальны – по ним довольно часто переходят, хотя конкуренция еще не такая большая.

Для нишевых сайтов подойдут низкочастотные запросы.

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

Удаление «мусорных» запросов

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

Такие запросы можно удалять без сожалений

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

Минимизация слов с высокими Keyword Difficulties

Keyword Difficulty – индекс, который показывает, насколько сложно будет обогнать конкурентов в поисковике Google. Всего оценки группируются по 3 большим блокам:

• 80 % – уровень джедая. Если возьмете поисковые слова с такой сложностью, готовьтесь к вливанию огромных сумм (зависящих от сферы деятельности). Новичкам без чемоданов денег лучше сюда и не заходить.
• 60–80 % – Квентин Тарантино в мире ключевиков. Да, вам не придется применять суперсилы, чтобы оказаться здесь в первых строках выдачи, но посоревноваться придется знатно.
• 60 % – на изи. Такие ключи имеют регулярный трафик, хорошо ранжируются, но здесь нет бешеной конкуренции. Идеальный выбор для новеньких.

7. Линкбилдинг-стратегия

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

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

Краткое руководство по линкбилдингу:

1. Создайте контент, достойный ссылок на него и цитирования.
2. Покажите его веб-сайтам, которым он мог бы быть интересен, чтобы они его процитировали или сослались на этот контент.
3. Добавляйтесь на сайты, где вы сами можете опубликовать ссылку: бизнес-каталоги, блоги (раздел «Комментарии»), форумы, соцсети.
4. Обменивайтесь ссылками с ресурсами, которые подходят вам по тематике.

Еще о грамотном продвижении ссылками:

• Эффект бабочки – как продвигать компанию на форумах и в отзовиках
• Фильтр «Пингвин»: как не попасть под ограничения, и что делать, если его уже наложили

8. Дизайн сайта

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

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

Трехмерность

Кажется, этот тренд выработал стабильные «качели»: объемность возвращается раз в 2-3 года, после чего исчезает в угоду 2D и снова возвращается. В 2023 году в тренде реалистичные 3D-элементы (главное, чтобы они были без эффекта «зловещей долины» (когда из-за мелких несоответствий реальности, но общего пугающего сходства с нею у человека возникает чувство неприязни и страха от изображения).

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

Святослав Грошев

Арт-директор TexTerra

Объемность

Пользователи MacOS Big Sur уже успели заценить «объемные иконки». Этот тренд постепенно заходит и в веб-дизайн, так что следует ожидать объемности и подумать, не внедрить ли ее у себя.

Слои, плавающие элементы

За несколько лет скролл-эффекты пользователям поднадоели. Современный юзер хочет видеть максимальную легкость.

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

Отличный пример такой «легкости» – сайт дизайн-студии LEVELLEN. Работа с пустым пространством дала ему нужную воздушность.

Студия делает стильные дизайны, поэтому и сайт у нее стильный и «легкий»

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

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

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

Так какие детали использовать можно?

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

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

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

Святослав Грошев

Арт-директор TexTerra

Микс графики и фото

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

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

Микс графики и фото выглядит свежо

Этот прием также использует языковая школа LEXXIS. Благодаря этому сайт смотрится более «живым» и современным.

А здесь такой микс выглядит ярко и смело

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

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

Так было и в проекте lexxis. Мы столкнулись с тем, что тематика весьма объемная по количеству контента. Убрать или сократить его нельзя. Остается разнообразить и добавить воздуха, для чего мы взяли фирменный красно-бордовый цвет, который бы частично разгружал страницу, немного перетягивая внимание на себя. Заключили его в форму круга с обводкой и различными способами обыграли в дизайне.

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

Александра Паршина

ex-заместитель руководителя отдела дизайна TexTerra

Векторная графика

Нужно подстраиваться под поведение аудитории, а она сегодня заходит на сайты со смартфонов. Но как это сделать, если один сидит с «тапка» с диагональю 3,5 дюйма, у второго – iPhone 13 Pro Max, а третий меняет телефоны на Android, как перчатки? Только через векторную графику! У нее нет привязки к пикселям, она легко масштабируется и адаптируется к любой диагонали, от умных часов до 4К-телевизора.

Именно так мы и сделали при создании сайта доставки «Имеретинская лавка». Основные элементы выполнены в КИвекторе, поэтому легко масштабируются для просмотра с любого девайса.

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

Цифры, данные и исследования

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

Например, общероссийский таможенный представитель TAISU-ТБ прямо на титульной странице сайта предоставил сертификаты качества и список довольных клиентов.

Цифры, статистика, исследования, инфографика и сертификаты вызывают доверие

Еще один пример – сайт для производителя напольных покрытий «КоронаПласт». В центре внимания – полезные факты о компании, сертификаты, именитые партнеры и подтверждения надежности.

Посетители сайта могут скачать pdf-файлы с каталогом и инструкциями по монтажу – это тоже про полезность

Темные цвета

Темный фон смотрится элегантно и не «выжигает глаз», как темный текст на белоснежном фоне. Более того, такие темы способствуют экономии энергии и увеличивают срок службы OLED-экранов.

Именно таким мы сделали сайт для видеостудии «Видеозаяц.РФ». Он умело сочетает темную тему, векторную графику и работу со слоями.

Темные цвета особенно хорошо выглядят в премиум-сегменте, в digital- и игровой сферах

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

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

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

Александра Паршина

ex-заместитель руководителя отдела дизайна TexTerra

Еще несколько трендов в дизайне, которые были актуальны в прошлом 2022 и остаются актуальны в 2023:

• Минимализм и максимум воздуха;
• «Легкие» шрифты с засечками:
• Симметричная верстка – баланс между текстом и изображением на сайте;
• Неоновые оттенки;
• Фотографии реальных людей вместо стоковых изображений;
• Градиенты и размытия;
• Интерактивные элементы в интерфейсах.

Тренды 2023 года:

1. Акцентная типографика

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

1. Яркие цвета

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

1. Коллажи

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

Святослав Грошев

Арт-директор TexTerra

9. Базовая SEO-оптимизация сайта

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

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

1. Нет ничего, работающего на Flash. Он устарел. Точка.
2. Семантическое ядро собрано конкретно под продвигаемые страницы, а структура сайта полностью ему соответствует.
3. У сайта корректная HTML-карта – страница, где расположены ссылки на полезные разделы сайта.
4. Прописаны meta-данные сайта.
5. Дубли и неуникальные Title и Description отсутствуют.
6. Настроен https-протокол. Если у сайта есть зеркала с www, они «склеены» с основной версией.
7. «Зеркала» на других доменах отсутствуют или склеены с основным сайтом через Redirect 301. В противном случае ждите санкций и блокировки всех сайтов.
8. Зомби-страницы удалены, а дубли склеены через Redirect. Это нужно, чтобы сконцентрировать продвижение на конкретной странице, а не распылять его на 10 разных.
9. Прорисован дизайн + придуманы тексты для страниц 3xx, 4xx, 5xx и для отсутствующих фото товаров в интернет-магазинах. Сбои в работе встречаются у всех, так поднимите же настроение клиентов проработкой таких мелочей.

Страница 404: самые креативные, смешные и лаконичные варианты

1. Файлы сжаты и почти не занимают места. Все они открыты для индексации.
2. На портале присутствуют Sitemap и Robots.txt, которые регулярно обновляются.
3. «Хлебные крошки» – навигационные цепочки, показывающие путь пользователя – настроены.
4. Критические ошибки HTML-кода по стандарту W3C отсутствуют.
5. Сайт уже есть в «Яндексе» и Google. Не помешают также Rambler и Bing. Смотрите на регион ресурса и подбирайте актуальные поисковики для работы.
6. Проработаны URL, где все слова прописаны латиницей. К примеру, если вы ссылаетесь на раздел с MacBook 2020, то URL должен выглядеть как pc / laptops / apple, а не pc / laptops / -3n4oi#4t. Конечно, там нет запрещенных или спам-слов по типу gun, sex, violence. Это нужно делать с любыми товарами в интернет-магазинах.
7. Работа в разных браузерах и системах настроена. Есть 3 варианта работы на «смартах»: мобильная версия (отдельная версия сайта), адаптивная верстка (когда сайт подстраивается под экран устройства, основываясь на user agent) и динамическая верстка (масштабируемый, «резиновый сайт»). Выберите ту, которая больше всего подходит вам (мобильную версию, так как это целый отдельный сайт, может быть дольше и дороже делать).
8. Отзывы. Разместите под каждым товаром раздел отзывов. Также добавляйтесь в «Google Бизнес» и «Яндекс.Бизнес», чтобы люди могли постить про вас отзывы. Реальные отзывы – дополнительный повод доверять компании.

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

Во-первых, их можно использовать для SEO. Например, сделав Н2-заголовком и подставлением туда информации из H1. Пример: страница «Акустика FENDER CD-60 DREAD V3 DS BLK WN» – «Мой отзыв о товаре Акустика FENDER CD-60 DREAD V3 DS BLK WN». Это позволит продвинуть запрос со словом «отзыв».

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

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

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

Кстати, отзывы размечайте с помощью микроразметки Schema.org.

Павел Антипов

ex-project-менеджер TexTerra

Пример оформления карточки товара – отзывы внизу

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

10. Скорость работы и загрузки сайта

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

• отрисовка самого крупного контента (LCP) – менее 2,5 сек с начала загрузки страницы;
• задержка после первого ввода (FID) – менее 100 мс;
• совокупное смещение макета (CLS) – менее 0,1.

Для ускорения сайта делается следующее.

1. Минимум редиректов.
2. Сжатая графика, видео и аудио. Держите файлы как в формате WEBP, так и в классических, но сжатых.
3. Подключенные AMP-страницы в Google и турбо-страницы в «Яндексе».
4. Включенный кэш. Если сервер будет кешировать данные юзера, при следующих посещениях сайт не будет загружаться «с нуля», что ускорит время загрузки.
5. Уменьшенное количество запросов к серверу до минимально допустимого значения. Объедините мелкие графические элементы, файлы JavaScript и другую «мелочь», чья прогрузка занимает много времени.

11. Работа с контентом

Приступаем к самому волнующему моменту – наполнению сайта информацией.

1. Проанализируйте контент-стратегию конкурентов. Найдите пробелы, которые они не перекрыли. Сравните эту стратегию со своей. Придумайте стратегию, которая закроет сразу несколько пробелов (скорее всего, какие-то мысли об этом у вас появятся еще на этапе анализа конкурентов).
2. Заведите блог. Так вы решите сразу две важных задачи: формирование имиджа эксперта и проработку всех возможных ключей в своей теме, не «мусоря» на основной части сайта. При этом узкая и сложная специализация бизнеса не приговор, а скорее дополнительный плюс.

Это доказывает блог на сайте по производству и продаже арболитовых блоков «Русский Арболит». Если даже они нашли, чем заинтересовать читателей в своем блоге, это сможете и вы.

Даже на сложную тему можно написать интересные статьи

«Русский Арболит» – очень интересный и особенный проект. Например, в дизайне мы используем белые и голубые тона. Они нехарактерны для этой ниши: конкуренты в основном используют коричневый и зеленый, ориентируясь на ассоциации с теплом и натуральностью. Мы сознательно выбрали необычную палитру.

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

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

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

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

Дарья Завьялова

выпускающий редактор TexTerra

1. Подстраивайтесь под голосовые запросы. Забудьте о «Москва кофе купить молотый». Сегодня время «Окей Гугл, где купить молотый кофе на Таганке?».
2. Максимально структурируйте текст. H1, H2 и т. д. обязательны. «1 абзац = 1 мысль». Добавьте в текст таблицы и списки, где это возможно. Так вы увеличите свои шансы попасть в сниппет выдачи (нулевой запрос).
3. Заполните все meta-данные, alt и title в картинках и видео.
4. Сделайте четкий контент-план. Необязательно, чтобы он был готов на год вперед: бывает так, что актуальное сегодня, уже никому не нужно завтра. Но на какой-то период он должен быть – пусть на неделю или месяц. При этом контент должен выходить регулярно и следовать одной цели – продвижению и продажам.
5. Делайте уникальные тексты. Показатель уникальности полностью зависит от сферы и задач. В некоторых случаях (юридические, медицинские тесты) допустимо и 60-70 %, а где-то нужно хотя бы 80-85 %.
6. Пишите тексты понятным человеческим языком. Конструкции из 2007 «окна москва недорого двери купить» забудьте, как страшный сон.
7. Добавьте на сайт политику конфиденциальности. Это нужно, если вы собираете данные пользователей. Если вы их собираете, а политику конфиденциальности не разместили, можете получить штраф.
8. Убедитесь, что контент быть доступен как в webm-формате, так и в классических форматах по типу jpeg, mp4, aac и т. д.
9. Не привязывайте текст ко времени. Иначе система «свяжет» текст с этим временным промежутком. В долгосрочной перспективе этот материал просто не будет выводиться в начале поиска. Исключения – новости, аналитика и другие вещи, которые актуальны лишь на определенный промежуток времени.

Как в 2 раза увеличить посещаемость вашего блога – работаем с оптимизацией текста

1. Ссылайтесь только на проверенные источники. Поисковые машины уже научились отличать fake news и понижают позиции тем, кто использует их как источники.
2. Убедитесь, что контактные данные актуальны, одинаковы и доступны на всех страницах сайта.
3. Убедитесь, что стили шрифтов, абзацев, междустрочные интервалы, цвета и навигация одинаковы на всех страницах.
4. Проверьте, что CSS, HTML и все сценарии оптимизированы и работают без багов.
5. Проверьте, что фавикон присутствует и отображается корректно.

Фавикон – значок вашего сайта на вкладке

12. Проверка на санкции поисковиков

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

Самые частые причины «фильтрации»:

1. неуникальный контент;
2. вирусы на сайте;
3. внешние ссылки с сайтов с низким доверием, fake news и порталов под «фильтрами»;
4. переоптимизация ключевыми словами;
5. бессистемный линкбилдинг (переспам ссылками);
6. накрутка поведенческих показателей;
7. слишком агрессивная реклама;
8. аффилиаты (в лучшем случае, поисковик выберет из «сети» 1 сайт, а все остальные заблокирует);
9. разные серые технологии по типу фишинга, клоакинга и т. д.

Это только вершина айсберга, который с каждым годом только растет. Самые актуальные списки того, за что сайт может попасть под фильтр, можно найти у самого «Яндекса» и Google.

13. Работа с локальностью

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

1. оптимизируются страницы в «Google Бизнес» и «Яндекс Бизнес»;
2. корректно настраиваются регионы в «Яндекс.Вебмастер» и Google Search Console;
3. правильно прорабатывается микроразметка в разделе «Контакты»;
4. компания добавляется в «Яндекс.Карты», Google Maps, 2ГИС и другие сервисы с картами;
5. с сайта убираются аффилиаты (или у них в контактах другой адрес и телефон);
6. сайт добавляется в тематические справочники: поисковики до сих пор индексируют подобные сайты. Чем больше порталов говорят о вас – тем лучше.

14. Проверка Usability

Предпоследний шаг. Вот что важно на этом этапе:

1. Навигация и сам сайт интуитивно понятны.
2. Карта кликов полностью готова. Все, что мешает, убрано.
3. Кроссбраузерность дополнительно проверена.
4. Все формы работают, письма благодарности написаны и «задевают» ЦА.
5. Все UI-тексты корректны («buy», а не «bye»).
6. Дополнительно проверены линки, перелинки, блоки навигации.
7. Отсутствуют назойливые поп-апы и пуши (как на сайтах с нелегальными онлайн-кинотеатрами).
8. Есть линки на основные social media, кнопки «Поделиться» для всех востребованных соцсетей.
9. В чат-боты загружены все основные вопросы, они понимают «человеческую речь», регулярно обновляются. Есть команды, переключающие сразу на техподдержку.
10. Основные метрики сайта в норме: LCP, FID и CLS.
11. Подключены метрики, отслеживающие посетителей: AOV (средний чек), LCV (жизненная ценность клиента), CPA (цена за целевое действие), CAC (стоимость приобретения клиента), ROI / ROMI (показатели окупаемости кампаний), конверсии, отказы, доля рекламных расходов, метрики аналитики соцсетей и рассылок, ключевые слова, приводящие клиентов.

15. Аналитика

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

1. PageSpeed Insights (отслеживание скорости загрузки сайта);
2. Google Search Console (общая аналитика сайта);
3. Google Analytics (общая аналитика сайта);
4. панель разработчика в Chrome (вкладка Lighthouse, для исправления ошибок);
5. «Яндекс.Вебмастер» (исправление ошибок с точки зрения SEO);
6. «Яндекс.Метрика» (общая аналитика сайта);
7. PR-CY (экспресс-анализ сайта);
8. Ahrefs (анализ обратных ссылок);
9. Popsters (аналитика соцсетей);
10. MozBar (тулбар для анализа ключевых SEO-параметров на открытых страницах);
11. Similarweb (поиск и анализ конкурентов);
12. UsabilityHub (тестирование сайта реальными посетителями).

Что еще проверить

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

1. Доменное имя и базовые данные (скелет сайта, ключи, дубли, meta-данные, перелинки и т. д.).
2. Весь текст, от карточек товара и блога до UI-текстов.
3. Мобильную версию. Сайт должен работать как на старом Android-смартфоне, так и на последнем iPad.
4. Коннект к соцсетям и ссылочную массу с них на свой сайт.
5. Наличие на сайте раздела отзывов, под каждым товаром / услугой должны быть свои отзывы. Также проверьте, что сайт подключен к «Google Бизнесу» / «Яндекс.Бизнесу» – и что там тоже можно оставить отзыв.
6. Готовый контент для сайта.

Удачи в продвижении сайта!

Как заказать хороший сайт: пошаговое руководство для чайников

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

Давным-давно, в далекой-далекой галактике…

Ладно, история началась не так уж и давно – в 2019 году. Конкретно – в марте, когда на планерке прозвучало «внутренний портал».

Компания росла, приходили новые люди, активно развивалась корпоративная культура, и встал вопрос: «Как лучше всего в едином ключе транслировать корпоративные миссию и ценности внутри коллектива?». Когда-то мы помещались в маленькой университетской аудитории, сейчас становилось тесно в просторном open space. И если раньше проблема могла решиться в формате «Это подскажет Катя», то потом наступил ключевой момент: «А кто из них Катя, и где её искать?».

Да, всех можно было найти в мессенджере, где были общие корпоративные чаты, но тут опять фейл: например, еще одна Катя – Java Middle Developer – вполне может быть записана как @krm_i_have_no_idea. Диктовать свои условия мы не могли, поскольку многие (все) использовали Telegram и как личное приложение, не только рабочее.

Преамбула

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

Отлично. Скелет есть. Дополнительные «хотелки» не заставили себя ждать:

Выход – создать внутренний корпоративный портал, свой, так сказать, интранет. В теории, это отвечало всем условиям:

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

Ясно. Понято. Принято.

Проба пера

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

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

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

Почему на Tilda?

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

В топку прежние идеи. Снова за стол обсуждений:

Инфоблок

Первое, основное и важнейшее, что видит сотрудник – главная страница. Мы решили сделать её лаконичной и отразить основные моменты:

В целом к информационному блоку относятся разделы:

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

Наша Катя из маркетинга разрешила поделиться своим профайлом.

Вопрос с рассадкой мы решили блоком «Кто где сидит». Мы немного «оживили» план офиса, отрисовав на нем план рассадки сотрудников. Особенно актуален раздел стал в момент переселения части людей на другой этаж.

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

Отдельная гордость – блок «Бессмертный полк». Многие из команды ежегодно принимают участие в этой акции. Конечно, 2020 и в этом плане стоит особняком. Мы попросили ребят поделиться историями и подвигами своих родственников, каждому посвящена отдельная страница. И это оказалось очень здорово.

Корпоративный блок

Задача блока – освещение более прикладных вопросов жизни компании. Основные разделы:

Коммуникационный блок

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

Раньше у нас была отдельная страница Доска объявлений. Чаще всего ребята писали туда о продаже тех или иных вещей. Среди предложений были MacBook, многофункциональный рюкзак, оперативная память и даже холодильник. Последнее объявление – «Котята в добрые руки». В августе прошлого года мы полностью перенесли страницу в наш корпоративный чат – RocketChat. Этот вариант предложили сами сотрудники, поскольку посчитали, что так общение и обмен информацией будет происходить быстрее. Тот же холодильник нашел хозяина спустя 4 минуты после публикации новости.

Библиотека – большая база по всем имеющимся книгам в офисе. Есть определенное разделение:

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

Итог

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

А есть в вашей компании внутренний корпоративный ресурс? Нравится вам он или нет? Поделитесь фишками и интересными идеями?

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

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

Ещё одно требование: адекватное отображение в большинстве браузеров. Абсолютную правильность отображения может гарантировать только текстовая школа веб-дизайна, в рамках которой все сайты пишутся только на HTML. Несмотря на многие свои преимущества, подобный сайт будет выглядеть весьма несовременно. Более эффективен дизайн в классическом стиле, предпочтение которому отдают более 70% пользователей. Проблема в том, что технологии, используемые при построении подобных сайтов, не гарантируют правильность отображения в устаревших версиях браузеров. Дизайн сайтов ориентирован на 95% пользователей: тех, уже перешел на современные версии ПО. К сожалению, где-то 5% аудитории – владельцы морально устаревшего ПО – неминуемо оказываются «за бортом».

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

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

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

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

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