Фиксированные и «резиновые» макеты в веб дизайне
Ну чтож, сегодня детально рассмотрим фиксированные и «резиновые» макеты в веб дизайне. Прежде чем начать работу над созданием страницы, дизайнер должен ответить на три вопроса:
- Как много места я могу выделить для сообщений сайта?
- Какое пространство будет отображать браузер типичного посетителя сайта?
- Необходимо ли пользователю, чтобы я задействовал все пространство?
Эти же вопросы с некоторыми отличиями стоит задать себе и при создании отдельных компонентов сайта: Сколько места я могу выделить для х и по каким причинам?
Абсолютно верного ответа на эти вопросы не существует, поскольку ответы меняются в зависимости от требований проектов, а также мастерства, опыта и взглядов дизайнеров. Тем не менее существует некоторое количество элементов дизайна, способных повлиять на горизонтальное построение макета.
Размеры шрифтов
Поскольку определено оптимальное количество слов в строке, а также известны самые распространенные слова данного языка, то из этого следует, что для более узких макетов предпочтительнее использовать более мелкие шрифты, а для более широких — более крупные.
Размер изображений
Если значительную часть контента занимают фотографии или иллюстрации (графика), то их разрешение и размеры окажут существенное влияние на дизайн сайта, например потому, что их размеры нельзя изменить пропорционально, поскольку ни имеют фиксированный размер.
Негативное пространство и контраст
Кроме свободного пространства, которое образуется в окне браузера, отображающего пропорционально узкую страницу, иногда бывает необходимо создавать свободное пространство (например, для полей параграфа) в различных областях макета. Области с сильной контрастностью также выигрывают от генерируемых вокруг контента полей свободного пространства.
Ограничения браузера
Неопытные дизайнеры могут при внедрении пропорциональных и резиновых макетов столкнуться с ошибками рендеринга.
Нa практике наибольшее влияние на выбор типа макета и его ширины оказывает ожидаемый тип браузера и расширение экрана у типичного посетителя страницы.
Наименьшим общим знаменателем является разрешение 1024 х 768, при этом границы браузера составляют примерно 1000 х 600. Большинство макетов страниц рассчитано на пользователей с большим окном браузера на мониторе с большим разрешением, например окно 1280 х 800 я запускаю на дисплее с расширением 1680 х 1050. Если у вас и у вашего сайта большие амбиции или большая аудитория, то следует обратить внимание на разрешение дисплея 800 х 600.
Для адаптации вашего сайта под это разрешение можно применить два способа:
- Сократить ширину своего макета, чтобы соответствовать дисплею 800 х 600, при этом не забывая об идеальной длине линии;
- Установить 1024 х 768 в качестве наименьшего общего знаменателя для окна браузера, при этом установите размер колонок для основного содержимого таким образом, чтобы его можно было без проблем просматривать при расширении 800 х 600.
Инструментальная панель веб-дизайнера для браузера Firefox позволяет проверить совместимость вашего макета с различными размерами окна. Она поддерживает диалог, который поможет вам выбрать несколько размеров окон и создать для каждого из этих типов пункты меню, которые будут изменяться в зависимости от размеров окна.
Однако опытные пользователи и эксперты рекомендуют при тестировании разрешений пользоваться не специальными приложениями, а мониторами с требуемым разрешением экрана, поскольку разные дисплеи могут иметь разное зерно экрана.
- ↑ Веб-дизайн
- ← HTML5: Атрибут required и его возможности
- → H1 — H6: Заголовки и их правильное использование