Резиновый дизайн, растягивающийся на всю ширину экрана – это круто и современно. Статичный дизайн фиксированной ширины – это признак криворукости дизайнера и ленивости верстальщика. Именно так думает «искушенный и опытный» заказчик. Всем известный Лебедев вообще называл сайты, которые не растягиваются на всю ширину экрана посетителя, «скриншотами» (инструкция, как их делать). Не будем спорить с гуру, которому нужно оправдывать свои сверхвысокие цены и придумывать все новые и новые слоганы, чтобы быть на слуху. Попробуем разобраться, так ли все однозначно с гибким и фиксированным стилем веб-дизайна.
Для хорошего сайта, выполняющего поставленные перед ним задачи, очень важен грамотно спроектированный и реализованный дизайн. При чем «грамотно» и «красиво» — это не всегда синонимы. Flash и Silverlight, часто применяемые при создании имиджевых сайтов, будут совершенно неуместные на информационном или корпоративном портале. Дизайн – лишь способ оформить информацию в наиболее понятном и удобном для посетителя виде. Одни и те же методы и приемы дизайна, как бы хороши они не были, не могут сделать разные сайты с разными целями создания одинаково эффективными.
Хорошее в резиновом дизайне:
1. На экран посетителя сайта попадает максимально возможное количество информации. Это замечательно, если информации на сайте много и она правильно структурирована.
2. Правильно спроектированный и реализованный растягивающийся дизайн не ущемляет права «нестандартных» посетителей, использующих смартфоны, нетбуки, устаревшие или, наоборот, самые новые мониторы или специальные устройства для просмотра сайта.
3. Нет полей и отступов от краев сайта на большем мониторе.
4. Растягиваясь на всю ширину экрана, резиновый дизайн сайта будет актуален и через несколько лет, когда мониторы станут еще больше. Правда, нет уверенности, что к тому времени не появятся совершенно новые технологии и приемы создания сайтов и сайт морально устареет по другим причинам.
Нехорошее в резиновом дизайне:
1. Если у сайта меньше 3-х колонок, есть риск, что на широком экране читать текст будет очень неудобно – слишком длинные строки текста сложно отслеживать от начала до конца. Особенно, если текст напечатан мелким шрифтом.
2. Ограничение в творчестве. При создании сложных коллажей для графического оформления нужно либо использовать повторяющиеся элементы и фон, чтобы заполнять им всю область экрана, либо делать небольшой коллаж, который точно поместится даже на маленьких мониторах. И при этом не будет смотреться «одиноко» на экранах с большим разрешением. Некоторые творческие замыслы просто невозможно реализовать в гибком дизайне.
3. Нельзя быть уверенным, что важные элементы контента сайта будут на нужных местах при любом размере и разрешения монитора пользователя. Особенно, если контент-менеджер вставит в текст тяжелые иллюстрации нестандартных размеров.
4. Сложный дизайн труднее сделать растягивающимся на весь экран. Нужно потратить больше времени и сил, а значит, конечная стоимость разрабатываемого сайта будет выше. А чем сложнее дизайн и применяемые при его верстке технологии и методы, тем больше вероятность, что какой-то браузер будет понимать сайт не так, как остальные.
5. Если на сайте мало текстом, графики или другого контента, то на большом экране такой сайт будет выглядеть полупустым. Такой сайт не стоит делать растягивающимся, лучше придумать оригинальный фиксированный дизайн и маленькой контентной областью.
Выводы: Универсальных методов не существует. Растягивающийся дизайн сайта – это не признак качества сайта, а метод реализации идей его разработчиков. Прежде чем выбирать тип дизайна для нового сайта, подумайте, будет ли резиновый дизайн наилучшим решением. Современный сайт не обязательно должен растягиваться на всю ширину экрана, чтобы быть качественным. Посмотрите на сайта Adobe, Apple, Yaho, если еще сомневаетесь.
Странно что вы верите в резиновые сайты!
На западе уже никто не делает резиновые сайты — их дольше верстать, они не всегда везде верно отражаются, часто требуют большого количества хаков, да к тому же сайт с о стандартной шириной 1024 и полями по бокам выглядит гармоничней и «компактнее»
Не вертие мне — просто посмотрите в инете подборки дизайнов сайтов западных дизайн-изданий
Во-первых, вы невнимательно читали мою статью.
Во-вторых традиции веб-дизайна в западных и русскоязычных странах сильно отличаются. Наши заказчики будут долго плеваться, если вы им попытаетесь продать дизайн в «американском» стиле. И наоборот.
Соглашусь с Александром.
В СНГ моду на резину ввел достопочтенный ведущий дизайнер А. Лебедев. Который любит плеваться на чужие вещи, но которому лень почитать о юзабилити. Резина не для всех сайтов.
Со стороны верстальщика скажу — фиксированные сайты лучше))
Приходилось верстать с буржуйских psd шаблонов, не припоминаю чтобы попадались резиновые.
Ещё веселее, когда заказчик просит сверстать блоками без единой таблицы резиновую вёрстку. Вот это весёлое занятие!
Для себя проекты верстаю всегда фиксированные ширинной в 980 px смешанной вёрсткой.
А на Лебедева нечего смотреть, у него тарифы другие.
Уважаемые коллеги! А почему вы не рассматриваете вопрос о резиновом сайте с ограничениями по ширине? Ну, например, информационный сайт с большим числом таблиц гораздо лучше выглядит (и удобнее!) на 1280, чем на 1024. Зачем мучать пользователей широких мониторов в данном случае? Вероятно, тут надо ограничить вёрстку по ширине на 970 <-> 1320 точек, тогда и информация по возможности не будет скукоживаться и сайт не будет вытягиваться в горизонтальную полосу.
На мой взгляд, очень важны умеренность и точное понимание требований эргономики каждого сайта в отдельности. Каждого! Ведь они все разные, и все дизайны разные, и вся информация на них тоже разная… ИМХО, только так…
О, контент-менеджеры, пихающие в контент здоровущие картинки — это поистине головная боль… При вёрстке немалая часть сил уходит на то, чтобы предусмотреть последний к.-м.-ской криворукости. А ведь они часто именуют себя гордым именем «администратор»…
Толковая статья)))
Izem, Вы абсолютно правы. Каждый проект требует индивидуального подхода.
Как дизайнер скажу, что резинка — реальная смерть художественной составляющей. Нужно пожертвовать столькими задумками, что печально становится))
зы. Последний скриншот — просто супер)
Спасибо автору за статью!:)
Резиновый дизайн сайта тем и хорош, что отображает максимально возможное количество информации. А по дизайну они, как правило, слабее фиксированных!
Полностью согласен с Izem’ом сайт не должен быть 100% резиной, но и статичным его делать так же не стои. Идеальный на мой взгляд вариант это создание сайта с несколькими файлами css под различные разрешения мониторов.
Впервые в жизни полностью согласен с Лебедевым. 🙂
Это действительно «скриншоты», причём иногда даже без кавычек скриншоты.
Перечисленные минусы я не считаю минусами, а список этих «минусов» я бы озаглавил как «нас ломает это делать потому что:».
Ну а касательно читабельности текста:
Можно совершенно спокойно расположить текст по блокам inline-block с фиксированной шириной и получить многоколоночную вёрстку при любом размере экрана.
Да, это невозможно в шаблонных CMS и на стандартных скриптах. Ну дык не называйте тогда себя специалистами. Так и говорите: «я юзер, взял чужой скрипт, стандартными шаблонами натянул слабопрофессиональный макет и нефиг меня тут искушать всякими сложностями. Я кушать хочу и некогда мне в тонкости влезать.»
Решений очень много, но они требует времени квалифицированных специалистов. Готовы ли заказчики за это время платить? Мой опыт в разработке сайтов говорит, что нет 🙂
Сторонникам фиксированной разметки хочу сказать, что они не видят дальше своих мониторов. Посмотрите свои сайты хотя бы на сервисе ipadpeek.com или меняя размер и масштаб для своего браузера. Есть ещё категория разработчиков, которые выбивают дополнительные деньги из заказчика для хорошего отображения сайта в каждом отдельном устройстве (например, мобильнике начальника).
Если рассматривать вопрос с позиции «цена:качество» с учётом огромного разнообразия пользовательских агентов, то резиновый дизайн окажется вне конкуренции. Грамотное использование CSS поможет решить многие перечисленные в статье проблемы (например, в CSS3 можно заставить текст расположиться в несколько колонок).
Ага, серьезные компании, законодатели мод, аля Apple лентяи и им просто лень сделать свой сайт резиновым или они не могут. Ну чего смеяться. Нельзя говорить однозначно про статичные сайты и резиновые — что они лучшие. Статичные для многих, очень многих дел — лучше резиновых. Так и наоборот. Есть варианты сайтов, где резиновые удобней и красивей статичных.