Когда мы приступаем к разработке прототипа или макета важно понимать, какой размер макета сайта нам необходим. На сегодняшний день существует огромное количество устройств, на которых можно просматривать сайты - стационарные компьютеры, ноутбуки, нетбуки, планшеты, смартфоны, а также телевизоры и часы.
Разрешение экрана (монитора) – это размеры получаемого на экране изображения в пикселях. Например, разрешение экрана 1920 x 1080 означает, что ширина изображения на мониторе равна 1920, а высота 1080 пикселей.
Популярные разрешения мониторов (стационарные компьютеры и ноутбуки):
1920 х 1080 (full HD)
1600 х 900
1440 х 900
1366 х 768
1280 х 1024
1280 х 960
1024 х 600
Когда мы разрабатываем прототип для десктопа, то нам важно понимать, что мы не должны рисовать варианты для всех существующих компьютеров, нам нужно выбрать оптимальный размер макета сайта, который позволит отображать будущий сайт корректно на всех десктопах.
Универсальной шириной для прототипа на компьютер и ноутбук является 1920 пкс, также может использоваться ширина 1440 или 1280 пкс. Универсальной высоты нет, т.к. у каждого проекта она своя и зависит от количества разделов.
Когда мы создаем макет сайта шириной 1440 пкс, но открываем его на мониторе 1920 пкс, то по бокам появляются белые или серые полосы, которые заполняют пустое пространство. Если же мы создаем прототип шириной 1920 пкс, а открываем его на мониторе шириной 1440 пкс, то прототип (или макет) “обрезается” по бокам, и мы видим содержимое сайта только в пределах 1440 пкс. В таком случае дизайнеру нужно учесть следующий момент - важный контент (тексты, кнопки и небольшие фотографии) не должны выходить за пределы контейнера определенной ширины. За такую ширину чаще всего принимается значение 1170 или 940. Таким образом, дизайнер создает прототип (или макет) шириной 1920 пкс, но весь важный контент умещает на ширине 1170 или 960 пкс.
Сегодня мы подробно рассмотрели размер макета сайта только для десктопов (компьютеров и ноутбуков), а разрешения портативных устройств (планшетов и смартфонов) мы рассмотрим в другой раз. Подписывайся на блог по веб-дизайну.
