NEWSru.com :: Самые быстрые новости. Фото и видео дня. Лента новостей в России и в мире

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

  • Хостинг и домен;
  • Мета теги;
  • Элементы страницы сайта: хедер, меню, сайдбар, футер;
  • Виды страниц сайта.

Хостинг и домен

Простыми словами: Хостинг – это дом сайта, где живут статьи, новости, фотографии, видео и прочие файлы; Домен – это адрес этого дома. А теперь рассмотрим эти понятия с технической точки зрения.

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

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

Домен – это уникальное имя сайта. То есть это адрес, по которому располагается сайт.

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

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

Домены бывают нескольких уровней. Первый уровень (зоны) – это корневые домены ru, com, org и др. Домены второго уровня находятся внутри корневых и используются для большинства сайтов, например, site.ru. Таким образом, домен состоит из названия сайта и доменной зоны. Название можно выбрать любое, зону можно выбрать из предлагаемых вариантов (чаще всего это ru и com).  Чтобы зарегистрировать доменное имя, оно должно быть свободно. Проверить это можно на сайте https://www.reg.ru.

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

Мета-теги необходимы для индексации сайта и продвижения его в поисковых системах по определенным параметрам. Они определяют основы создания сайта со стороны поисковых систем. К ним относятся:

  • Description — описание страницы, которое учитывается поисковиками.
  • Keywords — слова или словосочетания, по которым можно найти нужную информацию. Если они правильно подобраны и применены на сайте, то способны обеспечить большой поток целевой аудитории.
  • Robots – файл, который регулирует взаимосвязь с поисковыми системами и при правильном заполнении продвигает нужную информацию сайта.

Контент и его уникальность

Контент – это информационное содержание страниц сайта (тексты, изображения, фотографии, видео и др.), а также его оформление.

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

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

Основные элементы страницы сайта и схема их размещения

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

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

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

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

Виды страниц сайтов

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

  • Главная — это первая страница сайта, на которую попадает посетитель. В ней размещена информация о коммерческом предложении компании, основной деятельности, конкурентных преимуществах и особенностях товаров и услуг.
  • О компании /О сайте, о себе — содержит информацию о компании: когда создана, цели и задачи, коллектив предприятия, достигнутые успехи.
  • Специалисты – данные о специалистах компании могут располагаться на отдельной странице или на странице о компании.
  • Описание продукции и/или направлений деятельности – содержит информацию об основных направлениях деятельности компании, предлагаемых товарах и услугах. Каждая категория может быть расположена в меню сайта (например, установка окон, установка дверей) или иметь в меню общее название (например, Продукция, Услуги) с выпадающим списком при выборе данной категории.
  • Каталог продукции /услуг – содержит информацию о продукции/услугах. Каталог может быть общим и/или для каждого раздела свой.
  • Прайс лист – лист с ценами на товары и услуги
  • Доставка и оплата содержит условия доставки, оплаты и дополнительные условия. 
  • Фотоальбом – содержит галерею фотографий с их заголовками и/или описанием (для галереи)
  • Новости компании — лента новостей с превью-картинками, каждая новость открывается на своей странице. Новости предоставляются Заказчиком (все новости вместе с лентой считаются как одна страница)
  • Статьи — лента статей с превью-картинками, каждая статья открывается на своей странице. Статьи предоставляются Заказчиком (все статьи вместе с лентой считаются как одна страница)
  • Контакты — содержит адрес, телефон, электронная почта, Skype и другие способы связи (возможно указание контактов менеджеров), график работы.
  • Форма обратной связи – форма для автоматической отправки письма пользователя на электронную почту, заданную владельцем сайта. Она может располагаться отдельно или на странице с контактами.
  • Карта проездаинтерактивная схема проезда Яндекс или Google-карты. Она может располагаться отдельно или на странице с контактами.
  • Карта сайта – все структура сайта, которую можно оформить отдельной страницей.

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

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

Задачи главной страницы сайта

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

  1. Главная страница должна продавать весь сайт.
  2. Главная страница должна вводить человека в нужное состояние.
  3. Наполнение главной страницы должно цеплять.
  4. Текст на главной странице должен рассказывать о проекте.
  5. Текст главной страницы должен затягивать читателя.
  6. Главная страница должна переводить человека в другие разделы и т.д.

Знаете, почему я выделил этот блок красным? Потому что это все эти рекомендации вырваны из контекста системы и толку от них не особо много.

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

Другими словами, задача главной страницы – это подзадача глобальной задачи сайта.

Глобальная задача сайта

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

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

С другой стороны, аудитория сайта может состоять из разных сегментов, например:

  1. Розничные покупатели
  2. Оптовые покупатели
  3. Партнеры

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

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

image

Главная страница ozon.ru (нажмите, чтобы увеличить)

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

Или еще один пример – текст на главной странице сайта 37signals.com (к слову, ребята из этой компании написали в свое время отличную книжку – «Rework: бизнес без предрассудков» — рекомендую).

Текст на главной странице сайта 37signals.com (нажмите, чтобы увеличить)

На этой странице Вы видите, что вначале идет миссия компании, а затем перенаправление на 3 основных продукта: Basecamp, Highrise и Campfire. После этого демонстрируется авторитетность, идет блок преимуществ и т.д.

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

Еще пример:

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

Текст на сайте-одностраничнике

Стратегия и воронка продаж

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

Наглядный расчет: допустим, задача сайта – продажа цифровой техники. На сайт пришли 100 человек. Из них в раздел с фотоаппаратами перешли 30 человек, из раздела на страницу с конкретной моделью – 15 человек. Покупку совершили 3 человека. Итого конверсия сайта: 3%, конверсия продающей страницы: 20%, конверсия главной страницы: 30%.

Следовательно, при таком раскладе главная страница теряет 70% аудитории, и нужно проводить тесты. Чтобы этот показатель был как можно меньше. И здесь появляется масса вариантов.

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

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

Вот пример сайта, на котором над реализацией стратегии работают и текст, и интерфейс.

Текст и интерфейс главной страницы сайта 100strahovok.by (нажмите, чтобы увеличить)

Существует много элементов, повышающих эффективность текста на главной странице. Главное – использовать их к месту. Вот некоторые из них:

  1. Выгоды и преимущества
  2. Кейсы
  3. Список крупных клиентов
  4. Миссия, убеждения
  5. Обработка возражений
  6. Ответы на основные вопросы
  7. Видео и презентации
  8. Гарантии
  9. Калькуляторы и другие интерактивные элементы

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

Типовые ошибки при написании текстов на главную страницу

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

Ошибка №1: текст «о компании» на главной

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

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

Ошибка №2: описание отрасли

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

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

Ошибка №3: шаблоны

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

  • Избитая «молодая и динамично развивающаяся компания»
  • Команда профессионалов, оказывающих высококачественные услуги
  • Фирма, нацеленная на плодотворное и взаимовыгодное сотрудничество и т.д.

Ошибка №4: «вода»

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

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

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

Если хотите текстом вызвать доверие – решите задачу посетителя. Так будет и проще, и быстрее.

Ошибка №5: «тупики»

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

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

Ошибка №6: излишнее «мыкание»

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

Ошибка №7: «простыни»

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

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

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

Как написать классный текст для главной страницы сайта

Ну вот мы и подошли к главному вопросу: «Как написать текст для главной страницы?». Чуть ниже я приготовил для Вас простой алгоритм.

1. Абстрагируйтесь от текста

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

Всегда помните о целях сайта. И отталкивайтесь от них.

2. Продумайте структуру

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

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

3. Пишите то, что действительно важно для аудитории

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

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

4. Призывайте

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

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

5. Тестируйте

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

Примеры текстов для главной страницы

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

Пример текста на главную №1

Посмотрите, сколько на главной Купонатора текста. Здесь нет ничего лишнего — только то, что актуально для пользователей.

Текст на главной странице сайта kuponator.ru (нажмите, чтобы увеличить)

Пример текста на главную №2

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

Текст на главной странице сайта aviasales.ru (нажмите, чтобы увеличить)

Пример текста на главную №3

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

Главная страница сайта markup-service.com (нажмите, чтобы увеличить)

Пример текста для главной №4

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

Главная страница сайта popupdomination.com (нажмите, чтобы увеличить)

Особенности главных страниц информационных ресурсов

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

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

Резюме

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

Искренне Ваш, Даниил Шардаков.

imageПриветствую вас, уважаемые читатели ?

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

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

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

СОДЕРЖАНИЕ

Структура страницы сайта — терминология

Для начала, как и при рассмотре основ создания сайтов, давайте разберёмся с терминами.

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

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

В то время как внешняя структура сайта предусматривает вид отдельных страниц в зависимости от размещаемой на них информации. То есть внешняя структура – это как раз и есть структура страницы сайта.

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

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

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

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

image

Даже если вы решили заказать сайт и читаете эти строки только в целях самообразования — ваше время не будет потрачено зря ?

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

А это кстати, немаловажно, т.к. благодаря чёткой постановке задачи можно сэкономить не только на времени, но и на стоимости дизайна страницы сайта, которая колеблется в пределах от 50 до 500$.

Необходимость разработки структуры страницы сайта

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

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

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

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

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

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

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

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

Структура страницы сайта – это что?

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

image

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

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

Структура страницы сайта у OZON.ru соответствует критерию единости. Именно поэтому мы не будем рассматривать каждую из них отдельно.

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

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

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

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

Прошу прощения за маленькое лирическое отступление ?

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

Условно её можно разделить на следующие блоки.

1. Шапка или хедер (область вверху)

image

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

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

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

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

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

2. Подвал или футер (область внизу)

image

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

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

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

Располагать их так же лучше в фиксированном месте. Именно поэтому на большинстве ресурсов они расположены в футере или хедере.

Помимо этого здесь также часто расположены ссылки на сайты партнёров, информация о годе основания ресурса с контактами его разработчиков и баннеры статистики (например, LiveInternet, HotLog, Яндекс.Метрика и др.)

3. Зона контента (информация, расположенная между хедером и футером)

image

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

К ним относятся списки подкатегорий, рубрик, параметры фильтров и сортировки (характерны для Интернет-магазинов). Также в них может быть поиск по сайту, сводки погоды и другие элементы управления.

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

Разработчики OZON.ru вновь продемонстрировали оригинальный подход при разработке дизайна данного блока сайта.

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

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

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

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

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

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

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

Иногда создатели веб-ресурсов наполняют сайдбары различным контентом, в зависимости от содержимого. Ярким подтверждением тому являются Интернет-магазины и, в частности, OZON.ru.

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

image

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

image

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

На этом наша статья, в которой нами была рассмотрена структура страницы сайта, объявляется закрытой ?

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

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

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

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

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

Жду ваших содержательных комментариев по поводу что понравилось/не понравилось и какую информацию вы бы ещё хотели увидеть на страницах данного блога.

Обещаю, что ваше мнение не останется незамеченным.

Следите за обновлениями! До встречи ?

P.S.: если вам нужен сайт либо необходимо внести правки на существующий, но для этого нет времени и желания, могу предложить свои услуги.

Более 5 лет опыта профессиональной разработки сайтов. Работа с PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular и другими технологиями web-разработки.

Опыт разработки проектов различного уровня: лендинги, корпоративные сайты, Интернет-магазины, CRM, порталы. В том числе поддержка и разработка HighLoad проектов. Присылайте ваши заявки на email cccpblogcom@gmail.com.

И с друзьями не забудьте поделиться ?

” . __( ‘Pages:’, ‘themonic’ ), ‘after’ => ” ) ); ?–>

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий