Отправляет email-рассылки с помощью сервиса Sendsay

Создание сайта. Уроки для начинающих и не только

Рассылка закрыта

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

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Декабрь 2012   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Левитас

Статистика

7.175 подписчиков
+3 за неделю
←   Все выпуски   →

Правильный дизайн сайта и правильный макет сайта


Создание сайта. Уроки для начинающих и не только

Выпуск N19

Правильный дизайн сайта и правильный макет сайта


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

Основы макетирования

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

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

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

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

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

Сайты можно делать двух типов – «резиновые» и с фиксированной шириной. Резиновые макеты подстраиваются под ширину окна браузера и не выходят за его пределы. Такие сайты хорошо выглядят при любом разрешении, но имеют ограничения – нельзя выравнивать картинки по краю и в шапке нельзя вставлять жесткую картинку, потому что она не сможет растягиваться. Посмотрим на рисунок 1. С такой шириной экрана все выглядит нормально. А теперь посмотрим, что произойдет, если у пользователя установлено большее разрешение и ширина экрана больше (см. рисунок 2). Уродство, неправда ли!!!

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

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

Дизайн должен быть проще
В избранное