Первое, что думает большинство дизайнеров при построении своей веб-страницы, - это то, на что нужно разрешение. На самом деле это означает, насколько широка ваша конструкция. Больше нет такой вещи, как стандартная ширина сайта.
Зачем рассматривать разрешение
В 1995 году стандартными мониторами с разрешением 640x480 были самые большие и лучшие мониторы. Это означало, что веб-дизайнеры сосредоточились на том, чтобы страницы, которые выглядели хорошо в веб-браузерах, были увеличены на 12-дюймовом до 14-дюймового монитора с этим разрешением.
В эти дни разрешение 640x480 составляет менее 1 процента от всего трафика веб-сайта. Люди используют компьютеры с гораздо более высоким разрешением, включая 1366x768, 1600x900 и 5120x2880. Во многих случаях работает дизайн для экрана разрешения 1366x768.
Мы находимся в точке истории веб-дизайна, где нам не нужно много беспокоиться о разрешении. Большинство людей имеют большие широкоэкранные мониторы, и они не максимизируют свое окно браузера. Поэтому, если вы решите создать страницу шириной не более 1366 пикселей, ваша страница, вероятно, будет отлично смотреться в большинстве окон браузера даже на больших мониторах с более высоким разрешением.
Ширина браузера
Прежде чем вы уйдете, подумайте «хорошо, я сделаю свои страницы на 1366 пикселей в ширину», в этой истории больше. Одной из часто забываемых проблем при определении ширины веб-страницы является то, насколько ваши клиенты сохраняют свои браузеры. В частности, они максимизируют свои браузеры с полноэкранным размером или они сохраняют их меньше, чем весь экран?
В одном неофициальном опросе коллег, которые использовали стандартный ноутбук с разрешением 1024x768, два из них максимально расширили свои приложения. Остальные окна разного размера были открыты по разным причинам. Это иллюстрирует, что, если вы разрабатываете интрасеть этой компании с разрешением 1024 пикселя, 85 процентов пользователей должны прокручивать по горизонтали, чтобы просмотреть всю страницу.
После того, как вы учитываете клиентов, которые максимизируют или не делают этого, подумайте о границах браузера. Каждый веб-браузер имеет полосу прокрутки и граничит с боковыми сторонами, которые сокращают доступное пространство от 800 до 740 пикселей или менее при разрешении 800x600 и около 980 пикселей в максимальных окнах с разрешением 1024x768. Это называется браузером «хром», и это может забрать от используемого пространства для вашего дизайна страницы.
Страницы с фиксированной или жидкой шириной
Фактическая численная ширина - это не единственное, о чем вам нужно подумать при проектировании ширины вашего сайта. Вам также нужно решить, будете ли вы иметь фиксированную ширину или ширину жидкости. Другими словами, вы собираетесь установить ширину на определенное число (фиксированное) или процент (жидкость)?
Фиксированная ширина
Страницы с фиксированной шириной точно такие же, как они звучат. Ширина фиксируется с определенным номером и не изменяется независимо от того, насколько большой или малый браузер. Это может быть хорошо, если вам нужно, чтобы ваш дизайн выглядел точно так же, независимо от того, насколько широки или сужены браузеры ваших читателей, но этот метод не учитывает ваших читателей. Люди с браузерами, более узкими, чем ваш дизайн, должны будут прокручиваться по горизонтали, а люди с широкими браузерами будут иметь большое количество свободного места на экране.
Чтобы создать страницы фиксированной ширины, просто используйте конкретные пиксельные номера для ширины разделов страниц.
Ширина жидкости
Страницы ширины жидкости (иногда называемые гибкими страницами ширины) различаются по ширине в зависимости от ширины окна браузера. Это позволяет вам создавать страницы, которые больше ориентированы на ваших клиентов. Проблема с страницами ширины жидкости заключается в том, что их трудно читать. Если длина сканирования строки текста длиннее 10-12 слов или менее 4-5 слов, ее может быть трудно читать. Это означает, что у читателей с большими или маленькими окнами браузера есть проблемы.
Чтобы создать гибкие страницы ширины, просто используйте проценты или ems для ширины ваших разделов страниц. Вы также должны ознакомиться с свойством CSS max-width. Это свойство позволяет установить ширину в процентах, но затем ограничьте ее так, чтобы она не становилась настолько большой, что люди не могли ее прочитать.
И победитель: CSS Media Queries
Лучшее решение в наши дни - использовать CSS-запросы и гибкий дизайн для создания страницы, которая настраивается на ширину просмотра браузером. В ответном веб-дизайне используется один и тот же контент для создания веб-страницы, которая работает независимо от того, просматриваете ли вы ее ширину 5120 пикселей или 320 пикселей в ширину. Страницы разных размеров выглядят по-разному, но они содержат один и тот же контент. С помощью медиа-запроса в CSS3 каждое принимающее устройство отвечает на запрос с его размером, а таблица стилей настраивается на этот конкретный размер.
