?

Log in

No account? Create an account

Беспристрастные рассуждения — первый шаг к резиновым сайтам

« previous entry | next entry »
15 фев 2010 | 01:16 am

Уже много лет среди веб-дизайнеров и сочувствующих не утихают споры насчет того, должен ли дизайн сайта подстраиваться под ширину окна браузера или нет. Все чаще в своей практике я натыкаюсь именно на утверждение о том, что дизайн должен быть фиксированным. Я с этим не согласен и пройти мимо просто не могу.

Одно из самых распространенных и одновременно ничем не подкрепленных высказываний выглядит следующим образом: «Большинство западных сайтов сделаны именно так и это правильно.» Есть множество причин, действительно оправдывающих такой подход. Но, как ни странно, основная причина, по которой на западе сплошь и рядом фиксированная верстка, кроется в их неумении верстать «резиново». Из шести западных книг о веб-дизайне в пяти будет написано, что сделать тянущийся сайт — это технически невыполнимая задача. На самом же деле такая задача выполнима, только придется потрудиться. Как дизайнеру, так и верстальщику.

Создавать сайты фиксированной ширины — значит идти по пути наименьшего сопротивления. Так на западе, похоже, когда-то повелось и в этом нет ничего плохого, я считаю. Однако, «резиновые» сайты, на мой взгляд, в большинстве случаев все же выигрывают у фиксированных.

Основная причина проста и известна всем, даже начинающим. Резиновый сайт занимает всю площадь окна браузера и пользователь в состоянии сам выбирать, при какой ширине ему удобно смотреть сайт, а при какой нет. Сайт фиксированной ширины как бы говорит нам: «Меня не волнует, что у тебя окно браузера 1280 пикселей в ширину. Вот тебе 800, ешь, что дают.» (800, а не 1000, из-за вездесущих нетбуков). Делая сайт фиксированной ширины, мы совершаем серьезную ошибку. А именно, идем на поводу у людей, которые разворачивают браузер во все 1680 пикселей ширины экрана, заботимся о них. Ведь мы не хотим, чтобы живому человеку пришлось читать строки текста длиной в полторы тысячи пикселей, это же не удобно. Забота о пользователях — это святая обязанность любого дизайнера и веб-мастера. Но нельзя, заботясь об одних, лишать выбора других. Надо проявлять заботу о пользователях, давая им возможность выбрать. Я хочу смотреть на большинство сайтов при ширине экрана в 1280 пикселей и очень не хочу, чтобы кто-нибудь запрещал мне это.

Кстати, насчет строк длиной в полторы тысячи пикселей. Я очень часто наталкиваюсь на фразы вроде этой: «В газетах используется колоночная верстка, потому что есть предельная длина строки, которую может воспринимать читатель. Если растянуть текстовую строку на 2000 пикселей, читать такую страницу будет невозможно». Это типичное утверждение из брошюр с названиями вроде «Юзабилити для чайников» или «101 совет, как сделать свой сайт удобным». И это утверждение... верно. Почти. В нем много правды, но еще больше заблуждений. Во-первых, надо различать форматы. Размер газеты у всех в руках одинаковый и его физически нельзя подстроить под себя, газета бумажная. Окно браузера, как известно, не бумажное и у всех различается. Обладатели больших экранов просто делают окно побольше и попросторнее, а владельцы нетбуков вынуждены довольствоваться жалким полумилионом пикселей. Во-вторых, не существует предельной длины строки, которую может воспринимать читатель. Проверьте сами — почитайте любую запись в ЖЖ. Уверен, вас нигде не замкнет, вы, как и все, прочитаете весь текст от начала и до конца. Правда в том, что чем длиннее строка, тем сложнее читать текст. Здесь-то и кроется задача для дизайнера: сделать так, чтобы при ширине окна от 800 до, предположим, 1300 пикселей строка не становилась экстремально длинной. Одно из решений задачи — верстка в несколько колонок.

Еще многие утверждают, будто сайты обязаны баннерам. Разумеется, говорят они об этом не так, а примерно следующим образом: «Веб-сайт — это инструмент продаж и надо выгодно позиционировать его рекламные площади» (по мнению многих менеждеров, подобная фраза должна вызывать у заказчика приступ безоговорочной уверенности в профессионализме исполнителя). Говоря проще, сайт не может быть тянущимся, потому что некоторые его элементы (баннеры) обладают фиксированной шириной. Это заблуждение соседствует с заблуждением о том, что нельзя сделать хороший баннер, ширина которого может динамически изменяться. В большинстве случаев можно, надо лишь задаться такой целью. Проблема в том, что большинство рекламодателей, присылающих вам баннеры для размещения, такой целью задаваться не станет. Но и тут, в зависимости от ситуации, есть множество решений. Возьмем стандартный размер 240х400. Во-первых, мы можем просто выравнять баннер по левому краю или отцентровать в тянущейся колонке, во-вторых, никто не мешает нам сделать одну из колонок шириной в 240 пикселей и не тянуть ее вовсе.

Многие, похоже просто не подумав, зачисляют в плюсы фиксированной верстки фиксированное же расположение элементов на странице. Мол, поиск как был в 100 пикселях от последнего пункта меню, так там и остался. Здесь достаточно сказать, что размер окна браузера вы, скорее всего, меняете один раз — при первом запуске. Поэтому для вас поиск всегда будет находиться в 100 пикселях от меню, для кого-то другого в 120, для кого-то третьего в 50, но для всех по отдельности — на одном и том же месте. И если уж об этом заговорили, то я почти уверен, что люди ориентируются на странице не по расстоянию в пикселях, а по якорям. Якорем может быть заметный элемент, угол окна браузера, все что угодно. Зайдя в первый раз на сайт, вы запомнили, что поиск находится в правом верхнем углу, а не в ста пикселях от последнего пункта меню.

Можно перечислить еще множество доводов в пользу «резиновых» сайтов, но я не вижу в этом особого смысла. Просто всем надо запомнить по правилу. Пользователям, что растягивать браузер во весь экран не нужно (разумеется, это относится к большим экранам, если у вас 11" ноутбук, тяните смело :-), а веб-мастерам и дизайнерам, что размер окна браузера у всех разный, а сайт везде должен смотреться одинаково хорошо.

И отдельным абзацем еще вот что. Многие считают, будто сайты надо «тянуть», потому что так велел Артемий Лебедев, а многие, что даже забавно, по той же самой причине абсолютно уверены в обратном. В разных формулировках в интернете можно встретить одну и ту же фразу: «Есть набор глупостей, в которые в России принято свято верить, потому что так думает „сам” А. Лебедев...». Вместо имени известного дизайнера, в конец предложения можно вставить имя любого авторитетного специалиста в любой из областей. После этого сразу станет понятно, что проблема кроется в стремлении людей воспринимать авторитетное мнение, как нечто непоколебимое. Это, опять же, путь наименьшего сопротивления. Так вот: мне почему-то кажется, что сайты надо делать тянущимися не потому, что кто-то так сказал, а потому что это удобно.

Ссылка | комментировать |

Comments {12}

Иван Семенов

from: isemus
date: 15 фев 2010 08:56 am (UTC)
Ссылка

Ну с тянущимися сайтами давно уже все ясно. А вот что делать с увеличивающимся на глазах диапазоном разрешений — не всегда понятно. Сейчас появилось много пользователей с разрешением 1900 пикселей по ширине и больше. В тоже самое время самым распространенным разрешением остается пока 1024. Разница в два (иногда и больше) раза убивает всю структуру и замыслы дизайнера. Та же Студия в большинстве случаев просто ограничивает сайт на 1300-1400 пикселей. Но это же по сути противоречит всем доводам против фиксированных сайтов.
Ответ — javascript. Пора уже делать сайты умными, чтобы они смотрелись адекватно на любом разрешении.

Ответить | Ветвь дискуссии

Batur

from: batur
date: 15 фев 2010 09:44 pm (UTC)
Ссылка

Несмотря на то, что все вроде бы ясно, многие до сих пор самозабвенно делают сайты шириной исключительно 800—1000 пикселей и стараются всех убедить, будто это единственно верное решение.

Max-width является, по сути, компромиссом, позволяющим угодить всем. Пользователи с горизонтальным размером окна в диапазоне 800—1300 пикселей радуются возможности смотреть на сайт, как им удобно, а пользователи, распирающие своим браузером 24-дюймовый экран, видят нормальную картинку, но с пустыми полями по бокам (для них это не страшно, они привыкли).

Делать умные сайты, которые джаваскриптом распознают размер окна браузера и в реальном времени перестраивают сетку (ты ведь об этом, я правильно понял?) — это нереально круто и правильно. Но есть и нюансы. Причем, весьма существенные:
Во-первых, часто такой подход очень трудозатратен, ведь надо по сути делать два дизайна.
Во-вторых, он не всегда возможен. Бывают случаи, когда информации на сайте недостаточно для заполнения большого экрана.
В третьих, у меня нет уверенности, что пользователи, пересевшие с большого рабочего монитора за маленький домашний (или наоборот), нормально отнесутся к изменению сетки сайта.
В четвертых, это тема для отдельного поста :-). Надо все обдумать, попробовать и красиво оформить, с иллюстрациями для наглядности. У меня сейчас как раз в работе проект, на котором можно поизучать этот прием.

Ответить | Уровень выше | Ветвь дискуссии

Sun-я

from: sun_ka
date: 15 фев 2010 12:16 pm (UTC)
Ссылка

насчет того, что резиновый сайт лучше - тут я согласна) а даже отношусь к счастливому меньшинству, которое так учили делать =)

а вот насчет того, что не надо браузер на весь монитор разворачивать - тут я не согласна) ибо мне удобней чтобы все было на полный экран на каком либо из мониторов (как минимум чтобы все что не свернуто под активным окном не мешалось))

да, и насчет Темы... Ну как бы он много правильных вещей говорит) а уж следовать или нет - тут дело личное каждого) Я следую обычно =)

Ответить | Ветвь дискуссии

Batur

from: batur
date: 15 фев 2010 09:58 pm (UTC)
Ссылка

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

К тому же есть и плюсы. Когда у тебя видна часть рабочего стола, ты всегда можешь за полсекунды перетянуть на него какую-нибудь картинку с сайта, открыть важный документ или кликом по иконке запустить приложение. В конце концов, одно из преимуществ оконного интерфейса именно в том, что можно обращаться к другим объектам не нажимая на кнопку «Свернуть». Разворачивая окна на весь экран, ты лишаешь себя этой замечательной фичи.

Ответить | Уровень выше | Ветвь дискуссии

Sun-я

from: sun_ka
date: 15 фев 2010 10:23 pm (UTC)
Ссылка

именно поэтому у меня два монитора) на одном все иконки и куча свободного места для перетаскивания туда чего-либо, иногда там окна всяких программных сред, а на втором все остальное - учебники, браузер и тп =)

Ответить | Уровень выше | Ветвь дискуссии

ris_s

from: ris_s
date: 15 фев 2010 02:43 pm (UTC)
Ссылка

К стати! Насчет ЖЖ.
Читать строчки шириной во все мои 1900пик. нереально без нескольких ctrl +
В идеале, хорошо чтобы сайт не просто тянулся на ширину экрана, а ещё пропорционально масштабировался! :D
т. е. чтобы в зависимости от разрешения увеличивались/уменьшались все элементы на сайте.

Но в реальности приходится делать сайты тянущиеся до определённого разрешения, а далее ограничивать. такой вот своеобразный синтез "резины" и "статики".

Ответить | Ветвь дискуссии

Batur

from: batur
date: 15 фев 2010 10:36 pm (UTC)
Ссылка

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

К тому же появится определенная неразбериха с размерами шрифтов. Сейчас на большинстве сайтов, в операционной системе и в большинстве приложений используют в основном 12—14 кегль. Если каждый сайт станет пропорционально увеличиваться, как ему велел веб-мастер, то шрифт «поплывет» и везде, на каждой сайте будет разный.

Так что функция пропорциоонального увеличения должна быть заложена скорее в операционной системе, а не в каждом сайте по-отдельности. Мне так кажется.

Ответить | Уровень выше | Ветвь дискуссии

Вячеслав Александрович

from: uncurrent
date: 13 апр 2010 06:53 am (UTC)
Ссылка

хабрахабр — пропорционально маштабуемый.

Ответить | Уровень выше | Ветвь дискуссии

Вячеслав Александрович

from: uncurrent
date: 13 апр 2010 06:54 am (UTC)
Ссылка

damn. раньше был.

Ответить | Уровень выше | Ветвь дискуссии

Вячеслав Александрович

from: uncurrent
date: 13 апр 2010 06:51 am (UTC)
Ссылка

Как насчет резиновых сайтов с ограничением тенучести, есть же простенькие параметры в цсс, которые не дают таблицам расширяться дальше определенного значения. Смело делаем резиновые сайты с ограничением тенучести 1900-2000 пикселей.

Ответить | Ветвь дискуссии

Batur

from: batur
date: 13 апр 2010 08:04 am (UTC)
Ссылка

Я в ответе на первый комментарий об этом рассказал.

Ответить | Уровень выше | Ветвь дискуссии

Вячеслав Александрович

from: uncurrent
date: 13 апр 2010 08:45 am (UTC)
Ссылка

невнимателен :)

Ответить | Уровень выше | Ветвь дискуссии