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

Секреты Современного Прибыльного Web-дизайна

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

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

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

←   Март 2013   →
 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
Автор
zolotojlebed.info

Статистика

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

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


Секреты web-дизайна

Выпуск N15

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


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


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

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

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

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


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

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

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

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

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


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

В случае использования жестко фиксированной ширины экрана возникает другая проблема – какую ширину выбрать? Минимальное разрешение экрана 640х480, но таких аквариумов с каждым днем становиться все меньше и сейчас это мизерные проценты от общего населения инета и ими можно пожертвовать. А если учесть, что для Windows XP минимумом является 800х600, то можно сказать, что 800 является сейчас стандартом. Еще не все обзавелись жидкими кристаллами или 17-ти дюймовыми трубами, чтобы комфортно работать более чем на 1024х768, но 800 пикселей в ширину есть почти у всех.

Читать далее...

Учебник HTML
В избранное