Помогите разобраться по размерам сайта и разрешениям экранов мониторов!

[ruslanos]

В интернете я встречал сайты 2 типов:

1. Широкие, где содержание страницы выводится на полный экран на всех экранах и устройствах;
   
   Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
   
   (При этом есть сайты, у которых приходиться прокручивать содержание страниц горизонтально, а есть сайты, которые идеально выглядят на любых мониторах без прокрутки).

В чем фишка, как им удается разместить контент без прокрутки?

1. Сайты с фиксированной шириной– слева и справа всегда есть отступ, они как бы в рамке.
   
   Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Какие оптимальные размеры рамки по ширине, чтобы корректно, без горизонтальной прокрутки отображались на любых экранах и устройствах?

 

[zek24]

чтобы было без горизонтальной прокурутки делаешь width: 100%
Для просмотра ссылки Войди или Зарегистрируйся
Если нужно точно в пикселях, то тут идеального варианта нет. Смотрим статистику браузеров и пляшем от нее.

 

[ArtyGrand]

ТС, учи @media запросы, что бы делать сайты по размерам.

и, кстати, первый пример не на весь экран на 1920px мониторе

 

[matiass]

Если сайт фиксированый то оптимальная ширина 990px (можно немнго меньше, несколько пикселей чтобы не прилипало к краям и ~15-25px на скролл).
Простая резина как в первом примере уже не актуальна. Почитай про адаптивную верстку, немного есть Для просмотра ссылки Войди или Зарегистрируйся, пару примеров Для просмотра ссылки Войди или Зарегистрируйся.
В зависимости от разрешения грузим разные стили, для ИЕ костыль на js, для остальных браузеров Media Queries (С чем едят погуглить, спецификация на w3.org. Для просмотра ссылки Войди или Зарегистрируйся немного информации для размышления, есть табличка с разрешениями)

 

[ruslanos]

matiass спасибо тебе большое, теперь мне все понятно )))
скажи пжл почему не актуально?

Простая резина как в первом примере уже не актуальна.

я много таких сайтов встречаю

 

[adminlinker]

Возможно немного не по теме, но поделюсь, есть отличный фрэймворк 960 grid system, с ним можно использовать скрипт adapt.js Для просмотра ссылки Войди или ЗарегистрируйсяПри загрузке страницы он будет подгружать необходимый css файл в зависимости от разрешения экрана, так же можно настроить какой файл будет подгружен если у пользователя отключен javascript.

 

[matiass]

matiass спасибо тебе большое, теперь мне все понятно )))
скажи пжл почему не актуально?

я много таких сайтов встречаю

Это мое субьективное мнение. Адаптивная верстка (или как говорит википедия - адаптивный дизайн) это по сути потомок резиновой, но на разных разрешениях она выглядит красиво. Плюс в том что не надо делать отдельные версии сайта для планшетов, смартфонов / наладонников. В итоге на разработку уходит меньше времени усилий. Но я не вижу смысла замарачиваться даже с простой резиной если кроме этого для доступности (web accessibility) на сайте ничего не сделано.

А простая резина часто встречается потому что не так давно про планшеты и наладонники думать не надо было.

 

[yhnyhn]

последние два года стараюсь делать только резиновые дизайны, причин много: разность устройств, платформ и их диагоналей
принцип предельно простой и осваивается прочтением приведенных выше ссылок, если в двух фразах

Для тела сайта:
width:100%;
min-width:960px;
max-width:1600px;

для блоков, колонок:
например 2 колонки - одна с текстом, вторая с меню

.one{
width:59%
}

.two{
width:40px
margin-right:1%
}

Примерно так

 

[HeadHunter]

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

 

[matiass]

Очень хороший ресурс по адаптивной верстке, правда на английском. Расписано все от а до я и коллекция готовых паттернов есть. Для просмотра ссылки Войди или Зарегистрируйся