Проектирование страниц и блоков

Разработка отдельных страниц сайта, информационные элементы и отдельные блоки, содержание главной страницы

Как использовать на сайте широкие картинки без оглядки на разрешение 1024x768

23.08.2011

Наверное многим знакома ситуация, когда проектируя макет сайта, приходится излишне ограничивать ширину изображений в основной колонке из-за пользователей с рарешением экрана 1024x768 (сейчас их доля 17%). Особенно это ощутимо в трехколоночных макетах.

На dirty.ru ширина картинок ограничена 500 пикселями

Если ширина изображения больше, то обычно оно либо частично заслоняется правой колонкой, либо появляется горизонтальная прокрутка, либо боковая колонка сползает вниз.

Сейчас удачным решением мне кажется загрузка изображений с шириной, удовлетворяющей разрешению 1280x1024. А для меньших разрешений пусть картинки масштабирует браузер:

img {max-width: 100%; height: auto}

Max-width: 100% сжимает изображения, основываясь на ширине оборачивающего блока. Но если эта ширина больше ширины изображения, то масштаб не меняется. Height: auto сохраняет пропорции изображений. Вообще это значение по умолчанию, но иногда у картинок жестко указаны размеры, и тогда пропорции искажаются.

Пример есть здесь. Чтобы увидеть эффект, изменяйте ширину окна.

16 комментариев

Проектирование страниц и блоков, CSS, Верстка сайта, Иллюстрации на сайте

Дизайн списков ссылок

06.11.2009 / 9 комментариев

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

Приведу несколько приемов, используемых при дизайне списков.

Читать дальше →

Проектирование страниц и блоков, Дизайн сайта, Оформление текста, Юзабилити

Сплит-тестирование при помощи Google Website Optimizer

27.07.2009 / 7 комментариев

Попробовал Google Website Optimizer, инструмент для проведения сплит-тестов. При сплит-тестировании на сайте нужно создать несколько вариантов одной страницы, потом некоторое время собирать статистику посещений. В результате определяется самый удачный вариант страницы.

Красивые результаты тестирования от Авинаша Кошика

Читать дальше →

Проектирование страниц и блоков, Конверсия, Веб-аналитика, Создание дизайна сайта, Тестирование сайта, Юзабилити

Как подтолкнуть посетителя к регистрации?

09.11.2008 / 14 комментариев

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

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

Как подтолкнуть посетителя к регистрации?

Читать дальше →

Проектирование страниц и блоков, Конверсия, Пользователи, Развитие сайта, Регистрация на сайте, Юзабилити

А что сейчас делают другие посетители сайта?

29.10.2008 / 2 комментария

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

Читать дальше →

Проектирование страниц и блоков, Конверсия, Сообщество

Решение задачи про дизайн ленты материалов от ITTUM'а

09.10.2008 / 23 комментария

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

Дизайн ленты от ITTUM'а

Читать дальше →

Проектирование страниц и блоков, Дизайн интерфейсов, Проектирование интерфейсов, Теги, Юзабилити

Что можно сделать с профилем на сайте

07.09.2008 / 10 комментариев

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

Когда-то я играл в «Бойцовский клуб» и очень гордился соотношением побед и поражений два к одному. Да и вообще там были красивые профили: куклы с обвесом, списки друзей и врагов, принадлежность к клану, подарки, самовыражение посредствам ASCII-графики.

Профиль персонажа Бойкий Кот

Профиль в «Бойцовском клубе»

Читать дальше →

Проектирование страниц и блоков, Пользователи, Успешность интернет-проекта