Создание дизайна сайта под разные разрешения

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

Это очень важный момент. Поленившись сделать это сразу, вы рискуете в итоге потерять еще больше времени. Хорошо, если версталщик профессионал, он может еще на этапе приема работы и изучения ТЗ, сразу сообщить о выявленных проблемах. Представьте себе, какой может возникнуть конфликт с клиентом, если сайт будет сверстан, и только после этого заказчик увидит, что в один экран почти ничего не помещается. Он может сказать, чтобы переделывали. Но за чей счет?

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

Поэтому, позвольте дать совет. Лучше сразу сделать макет и утвердить с заказчиком как сайт будет выглядеть при минимальном разрешении 1024×768 пикселей и при оптимальном для ноутбуков разрешении: 1280×1024 и 1280×800 пикселей.

Но не забудьте учесть, что часть экрана еще занимает Панель задач Виндоус, адресная строка браузера, панель закладок и тому подобное. Просто все это сделует помнить и учитывать при разработке дизайна сайта.

Чтобы вычислить полезную область при каждом необходимом разрешении, можно воспользоваться плагином Web Developer (Подробную информацию можно прочесть в в соответствующих постах: «Расширения Google Chrome для веб-разработчиков» и «Плагины Firefox для веб-разработчика»).

Ниже, в скобках, привожу значения видимой части экрана (без полосы прокрутки) некоторых разрешений экрана.

1. Экран 10.1″ нетбука 1024х600 (видимой части, к сожалению не знаю, так как протестировать не на чем…)
2. 1024×768 (1014×662)
3. 1280×800  (1270×694)
4. 1280×1024 (1270×918)

В комментариях задали вопрос на счёт ширины скролла и рамок окна. Специально для этого сделал скриншот полосы прокрутки, на котором видно, что ширина равна равна 17 пикселям.