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

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

Известный интернет-маркетолог Эльдар Нагорный говорит, что если пользователь, зайдя на новый сайт, в течение 2–3 секунд не нашел для себя ничего интересного (важного, полезного), он тут же покидает его. Поэтому ваша задача 1 — на главной странице дать четко понять, о чем ваш ресурс, задача 2 — как можно дольше удержать посетителя на сайте с помощью разнообразной информации (советов, фото, видео и другого). Чем больше глубина просмотров (среднее число просмотров страниц пользователями за одно посещение), тем выше сайт поднимается в рейтинге поисковых машин. Для демонстрации того, какой может быть главная страница сайта и как на ней можно отобразить максимум контента, «Вести» с помощью директора интернет-проектов компании «Айкюжн» Светланы Шевченко и руководителя веб-студии Webus Яны Литвиновой создали сайт цветовода — любителя фиалок. Наш тренировочный сайт размещен по адресу www.kvit.in.ua.

1. ЛОГОТИП САЙТА

Изображение логотипа (в формате «*.png» или «*.jpeg») обычно размещают в левом верхнем углу сайта и привязывают к нему гиперссылку, ведущую на главную страницу. В этом случае можно обойтись без пункта меню «Домой» — логотип вполне его заменяет. В зависимости от дизайна сайта логотип может быть как горизонтальным (в нашем случае), так и вертикальным.

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

2. ПОИСК И КОНТАКТЫ

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

3. ПУНКТЫ МЕНЮ

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

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

4. БЛОК «О САЙТЕ»

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

5. СЛАЙДЕР И НОВОСТИ

Слайдер — модуль с меняющимися картинками, каждая из которых имеет сопроводительный текст (анонс) и кнопку перехода на полный текст материала — позволяет пользователю в несколько кликов ознакомиться с самыми важными материалами (или сервисами) вашего сайта. Желательно, чтобы анонс на слайдах сопровождался призывом, например, «Результаты новой селекции: таких цветов вы еще не видели! Кликните, чтобы приобрести со скидкой 10%». Оптимальное количество слайдов — от 2 до 4. В нашем случае слайдер мы дополнили модулем со свежими материалами, добавленными в категорию «Блог» (в нее мы включили и новости, и статьи с иллюстрациями на тему домашнего цветоводства).

6. МОДУЛЬ ВЫВОДА СОВЕТОВ

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

7. ФОТО И ВИДЕО

Цветы любят за их внешний вид, который точно словами передать невозможно — лучше показать. Для этого на главной странице нужен модуль с фото. Понятное дело, что вообще все многообразие фиалок на одной страничке не поместится, но несколько, привлекающих внимание, разместить можно. Желательно все фото разделить на категории (например, по названию селекции), и чтобы при клике пользователь переходил на фотокаталог со всеми фиалками, которые вы выращиваете. Дополнительным способом привлечения посетителей являются собственные видео, выложенные на YouTube-канале и транслирующиеся на вашем сайте. Ролики могут стать и источником заработка: за каждый просмотр Google начисляет автору деньги (около $20 за 1000 просмотров).

8. МОДУЛЬ СОЦСЕТЕЙ

Это важнейшая часть для любого современного сайта, так как приносит значительное количество посетителей. Откройте страницы в Facebook, «ВКонтакте», «Одноклассниках» и Google+ и разместите на всех страницах модули, призывающие лайкнуть сайт. Посетителей сейчас активно приносят также фотосервисы Flickr и Instagram. Но если вам неохота тратить время на ежедневное размещение контента в соцсетях и привлечение аудитории, можно отдать эту задачу SMM-агентству ($10–50 в месяц).

9. ВКЛАДКИ (ТАБЫ)

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

10. GOOGLE КАРТА

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

11. НИЖНЕЕ МЕНЮ

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

12. БАННЕРЫ

Так как в будущем мы планируем зарабатывать с помощью сайта, нужно заранее продумать где будут размещаться баннеры и какого они будут размера. Поэтому еще до заказа верстки зайдите на сайты баннерообменных сетей (banner.kiev.ua, abn-ad.com, adrock.com.ua и другие) и узнайте параметры. Если этого не сделать сразу, потребуется переверстка сайта ($300–400). На первых порах (пока коммерческой рекламы нет) в эти позиции можно поставить рекламу внутренних страниц сайта.

13. ХЛЕБНЫЕ КРОШКИ

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

MOZILLA: БРАУЗЕР ДЛЯ ВЕБ-РАЗРАБОТКИ И АНОНИМНОСТЬ

На днях известный разработчик браузеров отпраздновал 10-летие и в честь юбилея показал несколько новых бесплатных продуктов. Прежде всего, это новая версия Firefox, предназначенная для веб-разработчиков: от обычной она отличается инструментами для отладки страницы (можно менять цвета на сайте, переставлять местами блоки контента и многое другое). Вторая новинка — функция анонимности в Firefox. Добавили кнопку «Забыть»: после ее нажатия автоматически удаляются данные о просмотре страницы (история, куки, пароли).

ДОМЕНЫ ИЗ-ЗА ПАДЕНИЯ НАЦВАЛЮТЫ ПОДОРОЖАЛИ НА 30%

В связи с девальвацией нацвалюты украинские регистраторы доменных имен массово поднимают цены на имена сайтов. Так, «Хостмастер» подняла цены на 30 % на домены «.ua», «.com.ua», «.kiev.ua», «.pl.ua» и ряда других. По словам директора компании Олега Левченко, повышение цен — вынужденная мера, ведь расчеты с международными организациями и за обеспечение работы серверов обеспечиваются в валюте. Например, домен «.com.ua» теперь обойдется в 142,98 грн в год вместо 117,77 грн (цена в октябре), а kiev.ua — в 136,98 грн в год вместо 87,77 грн.