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

Ваш сайт хорошо смотрится? Проверьте, будет ли он также хорошо смотреться на маленьких и больших экранах!

Посетители просматривают сайты с разными разрешениями экрана. По статистике основные разрешения — 1024x768 (~40% — "старые" ЭЛТ-мониторы) и 1280x1024 (~30% — "новые" плоские ЖК).

У вас "крутой новый монитор"? Переключите его в разрешение 1024x768 — таким увидят ваш сайт больше половины посетителей. Все поместилось на экране? Не налезают ли одни блоки на другие? Не появилась ли горизонтальная полоса прокрутки? Вся важная информация поместилась?

У вас "старый ЭЛТ"? Сходите в интернет-кафе и посмотрите, каким увидят ваш сайт посетители с новыми мониторами и с ноутбуками! Не появились безобразные белые дыры? Сохранилась разметка страницы? Текст остался читабельным?

Не получается ли, что часть посетителей видит ваш сайт в неприглядном виде?

Решить проблему разных разрешений экрана позволит т.н. "резиновая верстка" — для примера мы взяли титульную страницу сайта "Дизель-Ремонт".

Разрешение 1280x1024

Это "главное" разрешение, на которое рассчитан сайт — по статистике почти половина посетителей уже работает с таким разрешением и их доля будет со временем увеличиваться.

Сейчас мы видим страницу такой, какой ее задумал дизайнер.

Резиновая верстка - Разрешение 1280x1024


Обратите внимание на величину границы и ширину баннера.

Разрешение 1024x768

Уменьшим разрешение до 1024x768 — с таким разрешением работают около 40% посетителей, и хотя их доля постепенно будет уменьшаться, сейчас они составляют существенную часть.
Резиновая верстка - Разрешение 1024x768

Страница "сжалась"без потери функциональности —
1. уменьшились поля информационных блоков и расстояние между колонками
2. сжалась панель навигации
3. уменьшился размер баннера (это, кстати, необычно — попробуйте найти подобное на других сайтах)

Разрешение 800x600

Самое экстремальное разрешение — хотя доля посетителей, работающих с таким разрешением, не превышает 5%, но даже в нем страница остается работоспособной — она "сжалась" насколько было можно (еще уменьшились поля), и на экране видны без прокрутки левая колонки и центральная часть (основные информационные блоки).
Резиновая верстка - Разрешение 800x600

Даже в таком разрешении с сайтом работать достаточно удобно — теряется "бонус" в виде правой колонки (чтобы просмотреть ее придется прокручивать страницу), но дизайнер постарался и разместил гланую информацию так, чтобы она была видна сразу.

Итого

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


А ваш сайт сверстан профессионально? ;)