Какие необходимы размеры макетов для резинового дизайна?

Доброго времени суток!
Мне давно перед вёрсткой поступают вопросы от дизайнеров из рубрики "на какие разрешения мне делать дизайн для резинового или адаптивного сайта", а иногда и вовсе "почему на макет не совпадает с дизайном хотя он для 1920 на 1080 и в браузере не так смотрится"
Проблема "горе дизайнеров" ну и теперь моя это размер холстов, а именно их высота, ведь высоты 1080 в браузерах по факту нет на разрешениях 1080, если не включить полноэранный режим в котором сидит редкий пользователь. И это со всеми разрешениями. Виной всему браузерный верхний бар и строка пуск (на венде), которая по дефолту внизу.
Так на какую же высоту рисовать дизайн?
Особенно колко стоит вопрос, когда речь идёт о постраничных сайтах, у которых высота основных блоков 100% высоты окна.
И второй вопрос, на какие разрешения рисуются резиновые сайты и как "предугадать" точки прерывания.
  • Вопрос задан
  • 2372 просмотра
Решения вопроса 1
@GreatRash
Если у вас стоит задача нарисовать дизайн так чтобы он помещался целиком без скролла (когда речь идёт о постраничных сайтах, у которых высота основных блоков 100% высоты окна). То у вас изначально подход неверный. В таком случае нужно не заморачиваться на высоту окна. а нужно заморачиваться на соотношение сторон. И вам нужно будет сделать как минимум два варианта дизайна: 16:9 и 4:3.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
IonDen
@IonDen
JavaScript developer. IonDen.com
Тут полно было вопросов на тему адаптивности, например: Адаптивная вёрстка — как побороть боль?
Поищите.

По поводу высоты. В 90% случаев сайты рисуются без ограничения в высоту, а заранее предусматривается возможность пролистывания вниз, так как это ожидаемое нормальное поведение.

Единственное что стоит учитывает дизайнеру - это так называемый первый экран, т.е. та часть сайта, которая доступна без прокрутки. Туда обычно пытаются запихнуть самую важную инфу. Чтобы потестировать это, дизайнеру лучше всего использовать готовые макеты с окнами браузеров, например: www.dejurka.ru/graphics/20-free-web-browser-frame-psd
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы