Структура сайта, разметка шаблона

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

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

Существует два определения структуры сайта:

  • Внешняя структура: то, как выглядит сайт, расположение блоков и панелей;
  • Внутренняя структура: то, из каких страниц и разделов состоит сайт, их взаимное расположение – иерархия;

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

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

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

Теперь рассмотрим типовой вариант размещения блоков сайта или разметку шаблона:

 Типовая разметка шаблона сайта

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

 Стандартное размещение блоков шаблона сайта

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

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

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

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

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

Существуют три разновидности шаблонов:

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

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

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

Взгляните на статистику от mail.ru:

статистика разрешений мониторов 

Это статистика всех сайтов рунета, с установленными счетчиками от mail.ru. Помимо технического сбоя в сборе статистики, датируемого декабрём 2014 года, на себя обращает внимание стремительный рост устройств с разрешением 360 на 640 точек, с последнего места в феврале 2013, до более чем 13% в июне 2015, это второе место. Распространение смартфонов даёт о себе знать и не учитывать эти устройства уже нельзя.

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

Поэтому, я считаю, что имеет смысл делать сайты под ширину в 1280, а может быть даже и 1366 пикселей (точек), а для устройств поменьше предусмотреть масштабируемость. Сайт шириной в 1024 точки смотрится очень плохо на мониторах больших размеров, например 1920 на 1080, а они занимают уже третью строчку по популярности и их процент плавно увеличивается.

Кстати, шаблон сайта, рассчитанный, например, под разрешение в 1024 точки никогда не делают шириной ровной ширине экрана, всегда учитывают рамки браузеров и полосу прокрутки, поэтому ширина сайта обычно бывает меньше( часто используемые размеры 960, 980, 1000 пикселей). 

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

У молодёжной аудитории больше планшетов и смартфонов (адаптивный дизайн очень желателен). У людей постарше чаще встречаются ноутбуки и компьютеры с большим разрешением (лучше делать сайт достаточно широкий от 1280 точек, адаптивность возможна). Ну а у пожилых, частенько встречается раритетная техника (лучше делать фиксированный размер сайта под ширину в 1024 точки, ну и шрифты покрупнее).

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

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

 Я в google+

Добавить комментарий


Защитный код
Обновить

Группа Вконтакте

Copyright © 2014-2015. Все права защищены.

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