Почти всегда, перед тем как создавать новый дизайн для сайта, долго думаю, что выбрать: статичную ширину макета и соответственно статичную вёрстку или резиновый макет, который будет подстраиваться под ширину экрана пользователя?

В случае, если сайт клиентский и этот самый заказчик более-менее разбирается в Интернет технологиях, решить вопрос достаточно просто: просто спрашиваем. Другое дело – когда сайт или блог свой личный. Попытаемся разобраться в минусах и плюсах двух вариантов.

Статичная вёрстка страницы

Статичный макет – дизайн сайта, при котором ширина выставляется определённой в пикселях, то есть в CSS коде строго указывается ширина 1000px или плюс – минус несколько пикселей. Вариантов несколько.

Достаточно опытные верстальщики (без стыда причисляю себя к таким) советуют выставлять минимальную ширину страницы от 980px до 1020px. Но стоит понимать, что такой любимый в России браузер Opera имеет «неприятную» особенность слева выдвигать боковую панель с элементами управления. Данная панель хоть невелика, но свои 15-20px занимает, поэтому стоит учитывать эту «фишку» и выставлять для страницы всё-таки 1000px. В противном случае либо страница и её элементы «поедет», либо внизу браузера появится неприятная горизонтальная прокрутка.

Многие отметят, что есть часть пользователей, которые до сих пор вынуждены пользоваться небольшими мониторами с разрешением экрана 800px – статистика показывает, что таких пользователей в настоящее время не более 0,5%. То есть каждый двухсотый увидит эту «злосчастную» полоску внизу экрана. Ничего страшного, как мне кажется. Другое проблема – это мода использовать небольшие нетбуки для сёрфинга по сети. Здесь опять же возникает спорный момент, но ведь пользователи небольших ноутбуков при покупке гаджетов должны понимать, на что идут и с чем могут столкнуться.

Экраны мобильных устройств очень часто сжимают всю иерархию страницы, выставляя элементы друг под другом. Да, такие страницы оказываются в большей степени без прекрасного дизайна, но читать их удобнее. Говорю это из собственного 5-летнего использования Opera Mini. Если волнуетесь за данный трафик, стоит подумать о создании отдельной мобильной версии сайта. Тогда и проблем не будет.

• Пример сайта со статичным дизайном – уроки создания сайтов.

Резиновая вёрстка страницы

Резиновая вёрстка – в данном случае ширина «полезной» площади сайта указывается в относительных показателях для монитора. Проще говоря, в процентах. Таким образом, пользователя даже с минимальной шириной монитора (нетбук или доисторический монитор – что-то порядка 800 пикселей в ширину) будут получать суженные, но корректные элементы страницы. В это же время пользователи с широкоформатными современными мониторами увидят такой же сайт, только растянутый под свой экран (у моего друга ширина монитора составляет более 1900 пикселей!).

Лично мне нравится, когда сайт растягивается не на все 100%, а по немного отступает по ширине по бокам. В таком случае необходимо выставлять ширину слоя равной 95-98%.

Вроде бы всё просто – выставляем ширину сайта и страницы будут автоматически подстраиваться и под 1024px, и под самые огромные мониторы. Но в тоже самое время невероятно сложно сверстать страницу так, что бы основном слое элементы страницы (основная часть, сайдбар, другие части) выстраивались без «наезда» друг на друга или смещения соседних элементов. В таком случае необходимо указать для страницы минимально возможную ширину страницы и максимальный размер, на который страница может «разъехаться».

• min-width: 1000px;
• max-width: 1700px;

Получается, что страница будет подстраиваться под ширину только в промежутке между 1000 и 1700 пикселей, а при небольших и очень больших мониторах ширина страницы будет статичной. Так называемое объединение резиновой и статичной вёрстки.

Типы сайтов и выбор типа вёрстки

Удивительно, но каждый тип сайта требует своего варианта вёрстки. Так крупные информационные ресурсы: часто обновляемые блоги, новостные сайты или даже фото – ресурсы чаще всего создаются с резиновой html вёрсткой, в то время как блоги часто статичные и центрованы на странице. Кстати, популярные бесплатные WordPress шаблоны очень часто имеют ширину 980px. Можно сказать, что это американский стандарт, откуда все эти «фри темлейтосы» и пришли.

• Пример сайта с динамичным дизайном и ограничением – новости Смоленска.

Что выбирать для вашего сайта? Мне кажется, вариант с соединением резиновой вёрстки и ограничением на минимальную и максимальную ширину.

-

Мне кажется, что если вы планируете создать новый ресурс, на котором будет доступен вид Москвы со спутника от сервисов Яндекса или Google, стоит выбрать резиновый вариант вёрстки. Да и вообще отнестись к этому очень внимательно.

Опубликовано в разделе: Интернет Метки: html