Считаю, что вёрстка на вебе бывает только резиновой.

Сказать, что у сайта будет ширина только ровно 1000 пикселей — такая же глупость, как решить, что каждая новость в блоке новостей будет ровно три строчки. Веб‑дизайн так не работает, он должен уметь подстраиваться под обстоятельства и не ломаться. Пользователь управляет браузером, и если он сделал его шириной в 1500 пикселей, мы должны уважать это.

Но многие из сказанного делают неправильный вывод о том, что все ширины должны быть заданы в процентах и всё должно тянуться до бесконечности. Это было бы слишком просто. На самом деле вопрос резиновой вёрстки как раз в том, какие элементы тянутся в каких пределах и по каким законам. Хороший дизайнер должен про это подумать, а хороший верстальщик ему сам задаст вопросы по неоднозначным местам.

Очевидно, что ширину текстовых блоков нужно ограничивать. Тогда ясно, что если на странице одна‑единственная текстовая колонка, то начиная с какой‑то ширины она перестанет тянуться, и нужно решить, будет ли она центрироваться или оставаться слева. Понятно, что если колонок две, то начиная с какой‑то ширины дальнейшее растягивание будет лишь приводить к увеличению дыры между колонками, и поэтому тоже нежелательно. Ну и так далее.

Отдельный жанр — страницы, которые не просто хорошо смотрятся при разной ширине, но у которых интересен и сам процесс изменения размера. Попробуйте, к примеру, потянуть нашу страничку про «Градироб» или страничку с музыкой у меня на сайте.

Резиновый дизайнНоситель: сайт
Отправить
Поделиться
Запинить

Комментарии

Я не понимаю одного — зачем создавать догматы? Зачем убеждать себя и/или окружающих что право на жизнь имеет только какой‑то один формат вёрстки? Для чего? Для холивара?

Посмотрите на западные сетевые издания: Techcrunch, Huffingtonpost, NYtimes, WSJ — у всех фиксированный дизайн. И что же получается, по Бирману, они не уважают пользователей?

Отнюдь. Просто, на мой взгляд, мы как то не можем свыкнуться с мыслью, что вот тут 200 пикселей пропадает за зря. Да почему нет‑то? Если вы смогли уместить всё в 1000 пикселей по ширине, то те 200 погоды вам не сделают, поверьте.

Подытожу: лично я склоняюсь к резиновой вёрстке там, где нет особой необходимости в структурированном контенте (промо, личные сайты) или его объём мал.

Там же, где требуется чёткая структура с большим количеством контента (блоги, новостные порталы), фиксированный дизайн, имхо, выигрывает.

Строго имхо, конечно.

24 мая 2011

Очень актуальная и важная тема.

Сейчас используется множество разнокалиберных устройств с соответствующими разрешениями экрана. И очень мало сайтов, которые адекватно отображаются во всем спектре разрешений без масштабирования. Лично мне хочется взять халтурщиков‑верстальщиков этих сайтов и заставить по тысяче раз переписывать несколько простых истин:

  1. Не мельчи кегль (болезнь 99% всех сайтов). HD‑мониторы уже перестали быть роскошью. Береги зрение своих посетителей.

  2. Не растягивай текст на всю ширину по той же самой причине. Комфортно читается колонка шириной 8‑12 русских слов (or 12‑15 english words, they are shorter). Сделай перенос по словам при увеличении масштаба.

  3. Не увлекайся шириной второстепенных колонок в ущерб основному тексту. Не забывай про армию владельцев нетбуков и планшетов.

  4. Если текст сопровождается картинками, приведи их размер в соответствие с кеглем. Позволь посетителю одновременно читать текст и рассматривать картинки.

Пример плохой резиновой верстки — lenta.ru. На HD текст слишком мелкий, на нетбуке — зажат второстепенными колонками.
Хорошая верстка — ia.com (кстати, там куча статей по теме)

24 мая 2011

Если сайт фиксированной ширины, то это не значит, что он ломается и не работает, скорее наоборот, понятно, как он будет выглядеть всегда — и не нужно сидеть кодить кучу всего: это тянется, это не тянется, а в ИЕ флоат не работает, и так далее. Если задачу решает фиксированная вёрстка, то это вполне круто, и лучше время потратить на что‑то другое.

24 мая 2011

Вот ещё один пример правильной «резиновой вёрстки», которая адаптируется даже к мобильным платформам (меняйте размер окна):
http://robot-or-not.com/.

В этой презентации на английском интересные идеи и для резиновой вёрстки в т. ч.:
http://www.slideshare.net/…/oooh‑thats‑clever‑unnatural‑experiments‑in‑web‑design (http://www.slideshare.net/…‑experiments‑in‑web‑design)

25 мая 2011

Рекомендуем другие советы