Верстка сайта

Вывод сложного контента в несколько колонок средствами CSS: column-count, column-gap, page-break-inside

29.09.2011 / 3 комментария

Расскажу про использование CSS multi-column layout module. Допустим у нас есть многоуровневый список.

Для основного содержимого страницы он узковат, и возникает желание выводить его в несколько колонок. Для этого используем CSS-свойства column-count: 4 и column-gap: 10px. Первое задает на сколько колонок разбить контент, второе — какой между ними зазор.

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

CSS, Верстка сайта

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

23.08.2011

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

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

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

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

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

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

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

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

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

Фетиши веб-разработки

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

Веб-разработка и управление интернет-проектами связаны с множеством разноплановых дисциплин. Кажется, этих дисциплин становится всё больше, и специализация углубляется.

У людей, влияющих на развитие отрасли, разные интересы. Это не только интересы из сферы бизнеса, но и из сферы науки. Более того, бизнес в интернете сильно расслоен: кто-то верстает страницы, а кто-то ищет клиентов для офлайна.

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

Итак, с одной стороны есть разработчик, который должен выбирать, чему учиться и куда развиваться, о чем думать на досуге.

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

Фетиши верстальшиков — это семантика разметки и кроссплатформенность. Фетиши программистов — качество кода и производительность.

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

SEO, Верстка сайта, Проектирование интерфейсов, Юзабилити

Универсальность макета сайта

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

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

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

Проектирование страниц и блоков, Верстка сайта, Системы управления сайтом, Создание дизайна сайта, Создание макета сайта, Создание шаблона сайта, Шаблон для сайта

IE6 и 800х600

23.07.2007

W3Counter сегодня насчитал 9% пользователей с разрешением 800х600, Hotlog — 10%. По моим наблюдениям старые мониторы вымирают медленно. Людей с разрешением экрана больше 1280 пикселей по горизонтали меньше, чем с 800.

Однако, я сталкивался, например, с такими требованиями к шаблону: «Резина, от 1024 до 1600». И все вы наверняка видели шаблоны с фиксированной шириной на 1024.

Предположим, у вас сайт с посещаемостью 1000 человек в день. 10 % — это 100 человек. Если вы не предусматриваете 800х600 — 100 человек пользуются горизонтальной прокруткой.

Периодически я встречаю разработки, создатели которых говорят: «IE6 поддерживаться не будет». Я их понимаю. Но W3Counter говорит, что IE6 у 49%, а Hotlog — что у 71%. Сколько бы не врал нам чуть живой Hotlog, отрицать доминирование IE6 глупо.

К примеру, мой папа пользуется IE6 (2001?) и поигрывает в Heroes of Might & Magic 3 (1999). Осознайте эту стабильность. Доля IE6 будет значительной еще не один год.

В начале осени 2006 моим главным браузером была Opera 7. Рабочего AJAX я под нее не видел. Держался за семерку до последнего и достаточно долго отказывался от технологичных сайтов.

RSS не заменяет извещения по email по той простой причине, что IE6 с RSS не работает.

Мне кажется что разрыв между hi-end и low-end увеличивается и важно не потерять связь с простыми пользователями.

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

AJAX, Верстка сайта, Разрешение экрана, Создание корпоративного сайта, Создание сайта компании, Стоимость сайта, Цена сайта

Сколько стоит сайт (без воды)

26.06.2007 / 51 комментарий

Обычно, когда меня спрашивают, сколько будет стоить сайт, я ориентируюсь на месячную зарплату разработчика в районе $$ 1500—2000 ($ 1 = 30 руб.). При этом есть еще и минимальная планка где-то в $$ 1000—1200. Например, я говорю: «Сайт будет готов через пять недель, и будет стоить $ 1900». Заказчиков такой уровень детализации устраивает.

Недавно я попал в любопытную ситуацию.

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

Верстка сайта, Купить дизайн сайта, Системы управления сайтом, Стоимость сайта, Цена сайта

Как лучше размещать на сайте DOC, RTF, XLS, PPT, PDF

19.06.2007 / 29 комментариев

Когда на сайте нужно выложить документ Word, передо мной встает дилемма:
* заархивировать файл и поставить ссылку на архив,
* оставить файл в формате DOC и поставить на него ссылку,
* преобразовать документ в HTML и сделать его полноценной частью сайта.

И что же я выбираю?

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

Word, Верстка сайта