Содержание
- Статическое расположение жидкостей VS
- Фильтрация стандартных размеров экрана
- Мобильные экраны
- Золотая сетка
Сотовые телефоны, планшеты и компьютерные мониторы имеют различное использование, пользователей и размеры, что оставляет вопрос о том, какой наилучший размер макета для сайта определяется потребностями основных пользователей этого сайта. Если сайт предназначен для просмотра обычными пользователями на широкоэкранном дисплее с разрешением 1680x1040 пикселей, размер сайта должен соответствовать размеру основного экрана браузера. Если сайт предназначен для использования на мобильных устройствах, его следует сделать для экрана намного меньшего размера.
Статическое расположение жидкостей VS
Первое соображение заключается в том, требует ли сайт размерности, определенной в пикселях. Используя проценты, вы можете создать «плавный» макет, который динамически изменяет размеры областей в зависимости от размера окна браузера. При использовании в сочетании с текстом плавные макеты могут быть лучшим выбором при создании сайта для стандартного разрешения экрана, а также для мобильных браузеров. Жидкие макеты достигаются путем использования "width = 100%" в объявлении содержимого CSS, например, вместо "width = 960x".
Фильтрация стандартных размеров экрана
Чтобы создать «фиксированные» или текучие макеты, ширина разделов, оболочек или таблиц основного содержимого должна вписываться в окно браузера пользователя с учетом как полосы прокрутки, так и панели инструментов. Вы также должны рассмотреть возможность сделать для большинства. В настоящее время более 80% браузеров используют разрешение экрана более 1024x768 пикселей. Это означает, что вы можете сделать это для 1680x1024 пикселей, но это хорошая идея для проецирования на второй план. 960 или 980 пикселей в ширину - это две надежные меры, используемые для комфортного отображения контента в браузере, которым пользуются все пользователи с разрешением 1024x768 или выше. Система также хорошо подходит для мобильных устройств, способных отображать целые сайты. Если он слишком плотный, 1080 - следующая лучшая ширина. Запомните высоту стандартного браузера при любом разрешении, чтобы держать самую важную информацию над «сгибом», или точкой, где становится необходимой прокрутка.
Мобильные экраны
Если вы хотите, чтобы ваш сайт выглядел хорошо на различных мобильных устройствах, вам нужно будет либо сделать это специально для устройства, либо создать специальный стиль, который используется мобильными браузерами для показа «мобильной» версии вашего сайта. Разрешение 240x320 является текущим стандартом для большинства смартфонов и интернет-устройств, таких как iPhone. Рекомендуется использовать «плавные» проценты или макеты, поскольку многие устройства поддерживают как портретный, так и ландшафтный режимы. если вы создаете веб-сайт шириной 320 пикселей, он может показаться отключенным для пользователя при доступе к нему в портретном режиме.
Золотая сетка
Возможно, лучшая система для определения размеров макета - это использование системы сетки. Сетки рассчитывают идеально сбалансированные области в пределах заданной ширины, чтобы дать представление о том, как масштабировать элементы в основном макете или области содержимого. Эти элементы включают рекламные коробки, бары, рекламное пространство или абзацы. В качестве примера, макет, использующий общую ширину 1080 пикселей и разделенный с использованием золотой сетки, оставил бы область, оставленную для сообщений в блоге, шириной 739 пикселей и правой полосой шириной 780 пикселей, обе из которых использовали поле 10 пикселей. Конечным результатом является идеально выровненное и сбалансированное расположение. Вы можете поэкспериментировать с несколькими различными сетками, посетив систему генератора сеток (см. Ресурсы).