Иллюстрации на сайте

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

Экраны с высокими разрешениями сейчас есть у заметной доли пользователей интернета: 1920x1080 — около 7%. При этом физически диагональ не всегда большая, окно браузера же часто развернуто на весь экран. В этом случае шрифт на многих сайтах очень мелкий, читать практически невозможно.

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

23.08.2011

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

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

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

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

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

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

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

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

12.09.2008 / 15 комментариев

Посетители приучены нажимать на ссылки и кнопки. А как быть со ссылками по картинкам? Как показать, что на картинку можно нажать и получить некоторый результат?

Если кликабельность картинки никак не обозначена, большинство посетителей не догадаются об этом. Не стоит рассчитывать, что люди будут наводить курсор на картинку и наблюдать, сменилась ли «стрелочка» на «пальчик». Недавно я собрал статистику по главной deadland.ru и убедился в этом.

По картиночкам кликают неохотно

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

09.07.2007 / 17 комментариев

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

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