Создание «резинового» сайта для разных разрешений экрана

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

rus-metric

Что такое разрешение экрана?

Видимая область экрана не зависит от различных экранных разрешений, поддерживаемых монитором. «Разрешение» — это количество информации (пикселов), которое может отобразить монитор. При большем разрешении отображается больше информации, чем при меньшем.

Основываясь на этой информации, сделаем следующий вывод:

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

Рисунки и текст размером х на у пикселов также уменьшаются при увеличении разрешения.

 Монитор А     Монитор B
 _ _ _ _ _ _   ___ ___ ___
|_|_|_|_|_|_| |   |   |   |
|_|_|_|_|_|_| |___|___|___|
|_|_|_|_|_|_| |   |   |   |
|_|_|_|_|_|_| |___|___|___|
|_|_|_|_|_|_| |   |   |   |
|_|_|_|_|_|_| |___|___|___|

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

Фиксированные таблицы против относительных

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

Чтобы это проиллюстрировать, рассмотрим такой пример. Если вы создаете таблицу из четырех ячеек, каждая шириной в 100 пикселов, эта таблица будет фиксированной, так как заданы точные размеры. Ширина таблицы всегда будет равна 400 пикселов (4×100). Напротив, если создать таблицу из четырех ячеек, ширина которых будет равна 25% от общей ширины экрана, ширига таблицы в пикселах будет зависить от текущего разрешения экрана.

Статья по теме:  Как делать адаптивный прототип в Axure 7

Например, если установлено разрешение 800×600, каждая ячейка таблицы будет иметь ширину 200 пикселов. Ширина всей таблицы будет равна 800 пикселам. Если ту же самую таблицу смотреть при разрешении 1024×768, то она будет шире. Каждая ячейка будет иметь ширину 256 пикселов, а ширина таблицы будет равна 1024 пиксела.

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

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

<table style="table-layout: fixed">

Главным недостатком использования фиксированных таблиц является неиспользование драгоценного пространства при высоких разрешениях экрана.

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

Текст: пикселы против пунктов

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

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

Статья по теме:  5 причин проектирования сайтов в Axure

На какое разрешение ориентироваться?

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

Сейчас вы возможно спросите: «На какое разрешение надо ориентироваться?» Ответ зависит от вашей аудитории.

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

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

Резюме

Фиксированный размер сайта против относительного: каждый способ имеет свои преимущества и недостатки.

Фиксированный проще разработать, так как не придется беспокоиться об изменении размеров при разных разрешениях экрана.

Главным недостатком использования фиксированных сайтов является неиспользование драгоценного пространства при высоких разрешениях экрана.

Какой сайт делать фиксированный или резиновый? Решение этого вопроса лучше возложить на профессионалов.


Понравилась статья? Поделиться с друзьями:
Комментариев: 2
  1. FORTRESS-DESIGN (автор)

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

    Сайт следует верстать с помощью дивов. Как верстать с помощью дивов, можете посмотреть на примере бесплатных CSS-шаблонов. Для ограничения ширины окна браузера применяется свойство min-width для IE.

  2. Servest

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Перейти к верхней панели
Adblock detector