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

Создание дизайна сайта

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

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

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

Создание дизайна сайта
Tiramisu Studio / Shutterstock.com

Поэтому, позвольте дать совет. Лучше сразу сделать макет и утвердить с заказчиком как сайт будет выглядеть при минимальном разрешении 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 пикселям.

Рекомендуем прочесть  Как сделать хороший макет

Вертикальная полоса прокрутки в Гугл Хром равна 16 пикселям

Понравилась статья? Поделиться с друзьями:
Комментариев: 4
  1. Шалимуня

    1280×1024 (1270×918) это, как я понимаю, основной вариант?

    1. FORTRESS-DESIGN (автор)

      Ну как бы да — самый основной. Но лучше начинать делать дизайн с наименьшего разрешения.

      1. Антон

        то есть Вы думаете что боковая полоса прокрутки вместе с бордюрами экрана 10 px?

        1. FORTRESS-DESIGN (автор)

          Антон, спасибо за внимательность. Я добавил уточнение, что размер видимой части экрана указан без полосы прокрутки. То есть когда контент помещается на всю страницу :)

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

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

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