x
 
Алексей Кучеров
24 мая 2011

Добрый день!

Интересует ваше мнение касательно довольно холиварного спора о том, какой должна быть вёрстка сайта — резиновой или фиксированной. Мнение Тёмы Лебедева я знаю — он однозначно за резиновую. Если вы придерживаетесь позиции «в зависимости от типа сайта», по приведите, пожалуйста, примеры сайтов где, на ваш взгляд, адекватно использовать фиксированную вёрстку, а где — резиновую.

Заранее спасибо.



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

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

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

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

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

Интерфейс и информация — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии

Никита Листратов
24 мая 2011

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

Посмотрите на западные сетевые издания: 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

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

Александр Дебкалюк
25 мая 2011

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

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


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

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

6 3 3 Стоит ли при проектировании интерфейса опираться на вариант, что в будущем размеры экранов будут продолжать расти? 4




Недавно всплыло

Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA? 3 Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5 Как написать хорошее резюме? 7 Без стоп-слов текст мне кажется сухим, чёрствым, грубым и резким 33