На многих сайтах существует проблема, связанная с размещением широких рисунков и таблиц. Эти условно большие объекты попросту ломают шаблон: либо колонка с основным текстом неприятно растягивается, либо блоки расползаются.
Простое решение — выносить неформатные элементы на отдельные страницы. Так, например, поступают игровые сайты со скриншотами. Однако, в тех случаях, когда в основном тексте даются комментарии к картинке или таблице, лучше бы держать всё на одной странице.
Какую ширину может себе позволить сайт с точки зрения пользовательских ограничений? Что-то около 700 пикселей. А скоро, пожалуй, и все 900.
Что в действительности? Шаблон в три колонки обычно позволяет разместить картинку шириной в 400--450 пикселей. Та же история с блогами на Wordpress/Kubrick.
Вывод: страницы с объемными статьями, проиллюстрированные рисунками и таблицами, должны верстаться в одну колонку. Причем ширина больших объектов не должна влиять на длину строк — текст не должен растягиваться на весь экран.
Получается, шаблон проектируется и дизайнится с учетом будущего содержимого. А для этого нужны реальные образцы материалов.
Кстати, я на днях защитил диплом.
Дмитрий Сергеев, 26 лет, разрабатываю сайты на Drupal, управляю интернет-проектами
Комментарии
larin, 07.06.2007 10:40
А что если при вставки картинки в контентное поле проверять ее размер и если он больше определенной величины (ширины контентного поля на сайте) делать из картинки preview со ссылкой на полную версию. Preview, например, размером 400 - 450 px.
Жаль, что такой подход не спасет от огромных таблиц...
Что думаете по этому поводу?
Дмитрий Сергеев, 07.06.2007 12:30
Так делают Blogger, гугловский блогхостинг, и тот же Wordpress. Но это решает только половину проблем с широкими картинками. От превьюшек рисунков с надписями (схем, например) мало толку.
Гипотетически возможен такой вариант верстки, при котором широкий элемент заполняет пустые поля страницы и боковые колонки. Практически это возможно только если поставить во главу угла именно эту особенность страницы.
Широкие таблицы я спасаю уменьшением размера шрифта.
Пётр Вишняков, 07.06.2007 11:39
Поздравляю с защитой диплома. А с крупной графикой спасут лишь превьюшки. Как вариант (весьма популярный сейчас) - lightbox. С таблицами - сложнее. В некоторых случаях уместны такие же превьюшки и отдельное окно, причём иногда с горизонтальным скроллом.
Дмитрий Сергеев, 07.06.2007 12:35
Lightbox -- это вариант. Нужно приглядеться к нему с этой стороны. А вариант с iframe и горизонтальной прокруткой иногда и вправду лучше, чем таблица на новой странице. Спасибо за подсказки. И за поздравления :)
phoinix, 10.06.2007 17:30
айФрэйм тут давно не нужен - можно оборачивать таблицы любым блочным элементом и задавая для него стили добиваться скролов.
Кстати можно подумать над вариантом kайтбокса для таблиц. JS, который клонирует таблицу, увеличит шрифт и поместит ее в лайтбокс мне не кажется таким уж трудным, а выглядеть должно быть будет эффектно!
Спасибо за наводку на мысль - записал себе в "самтайм".
И поздравляю с защитой!
Дмитрий Сергеев, 10.06.2007 19:31
Подумал, в таблицах еще можно попробовать уменьшать letter-spacing.
А про скролы без iframe я как-то забыл. Конечно, можно :)
Спасибо за поздравления.
Дмитрий Сергеев, 10.06.2007 19:43
Вообще про lightbox есть пара мыслей:
* можно сделать предзагрузчик,
* можно показывать увеличенную версию не по клику, а по onMouseOver,
* можно попробовать не затенять основную страницу.
phoinix, 10.06.2007 20:49
*Насчет предзагрузчика не понял...
*Я бы сильно испугался, если бы таблица или картинка увеличивалась при наведении на нее (:
*А вот тут такая идея - обычно таблицы интересны в контексте описания, поэтому лучше наверное ее повесить в лайтбокс и дать пользователю возможность его перемещать. Сейчас это не проблема и при должно реализации будет выглядеть неплохо.
Дмитрий Сергеев, 11.06.2007 12:56
Когда лайтбокс показывает большую картинку, заметна пробуксовка. Подозреваю, что картинка начинает загружаться только по клику на эскизе. Между тем, ее можно загружать сразу вместе со страницой, и неприятной паузы не возникнет. Загрузил тайком и спрятал до поры. То же с таблицами: полноразмерные варианты должны не динамически подгружаться, а сразу.
Есть шанс, что эскизы так и не будут увеличены и пользователь потратит немного трафика, зато время отклика хорошее.
phoinix, 11.06.2007 19:39
Насчет картинок частично согласен, хотя опять же выбор тратить пользователю дополнительный трафик или нет должен делать он сам.
С таблицами совсем другое дело - это не отдельный элемент, который можно так вот просто грузить или нет. Обычно мы имеем дело с размеченным текстом и варианты решения нужно искать исходя из этого.
Дмитрий Сергеев, 11.06.2007 20:55
Не уверен, что пользователь должен о таких вещах даже догадываться. Но это ладно, спор об оптимальном количестве настроек относится к разряду религиозных :)
Дмитрий Сергеев, 11.06.2007 14:17
Вот что еще подумалось: можно обойтись без лайтбокса. При наведении мышки на таблицу размер шрифта в ней увеличивается. Пусть при этом ломается шаблон, зато все видно. Потом убрал мышку с таблицы -- всё на место вернулось.
Это наверняка напугает сначала, но потом, пожалуй, пользователи оценят.
phoinix, 11.06.2007 19:36
Все-таки думаю контроль приложением нужно отдать пользователю: хочет - увеличивает, не хочет - нет.
Думаю поведение приложения в таких случая должно максимально близко соответствовать тому опыту, которым пользователь уже обладает. Кроме того случайное срабатывание таких вот фишек на мой взгляд не есть хороший опыт. Я вообще резко отрицательно отношусь к любым элементам страницы наведение на которые способно полностью поменять ее вид.
Дмитрий Сергеев, 11.06.2007 20:51
Согласен. Но от реализации по-моему может очень многое зависеть. В общем, надо попробовать сделать, и посмотрим :)
Кстати, у лайтбокса на главной странице есть пара ссылок на похожие проекты для некартиночного содержания.
Олег Степура, 13.06.2007 14:29
Вспоминается Гадя Петрович Хренова из выступления КВН "Утомленных солнцем": Я бы тоже потерялся...
Олег Степура, 13.06.2007 11:32
Предзагрузчик в lightbox есть. Если его начинают пользовать, то следующая картинка в серии подгружается автоматически. Имхо лучшее решение.
Дмитрий Сергеев, 13.06.2007 14:10
Я догадывался :) Хорошее решение и для галерей, и для статьи с тремя иллюстрациями.
Олег Степура, 13.06.2007 14:27
Бесспорно
koniah, 07.06.2007 18:55
мои поздравления с отличной защитой!
у тебя хороший стиль. интересно даже мне:) хотя я мало что понимаю.
Дмитрий Сергеев, 07.06.2007 20:15
Спасибо
Олег, 08.06.2007 11:08
Вообще, с помощью jQuery-евского плагина - аналога lightbox можно отображать любой iframe, хоть страницу Google
Олег Степура, 13.06.2007 16:26
http://www.apple.com/macosx/leopard/features/desktop.html
Внизу в разделе gallery - гляньте, это интересно!
Дмитрий Сергеев, 13.06.2007 18:26
Даже лучше лайтбокса. Только в FF что-то у меня неважно работает.
Кстати, http://www.apple.com/macosx/leopard/features/desktop.html -- идеальный URL.
phoinix, 13.06.2007 18:56
Не без изъянов - отображается ужатая версия, причем ужатая криво браузером. Да притом нет явной возможности посмотреть нормальную.
Но идея хорошая - вроде у Лебедева что-то такое давно проскакивало.
ПС: Аппл неплохо свой сайт обновил после WWDC. Коверфлов у них неплохой получился. Только вот многие жалуются, что работает не везде как надо.
Дмитрий Сергеев, 13.06.2007 19:27
CoverFlow классный :) Причем идея подачи старая, реализована в разных адвенчурных играх лет сто назад.
phoinix, 13.06.2007 19:54
Только что заметил, что у них еще и текст затеняется, когда ползунок уходит от него!
Хотя работает он тоже не совсем правильно. По-моему для такого сайта нужно до ума доводить идеи...
Олег Степура, 14.06.2007 11:44
Все достаточно грамотно. Причем, пользуются они Prototype`ом.
phoinix, 14.06.2007 11:47
У меня ползунок двигается только за определенную точку. Если хватать его в другом месте он скачет.
Alexander(Afaf), 18.09.2007 03:10
Почитал я заценил. Вот лайтбок вроде ничего, но непонятна предзагрузка есть у него или нет, и не нравится в нем ослепляющий эффект, я правда не знаю, может, он убирается легко. А вот зацените эту галерею, пожалуй, лучшая из тех что я видел:
http://starcraft2.com/screenshot.xml?s=50
только вот не знаю как стырить). Не подскажете, какие есть в инете еще бесплантые аналоги этих галерей?
Дмитрий Сергеев, 18.09.2007 15:03
Вот подборка ссылок на самые популярные галереи.
Alexander(Afaf), 18.09.2007 17:43
спасибо