Небольшой полезный трюк для тех, кто постоянно использует в своей работе шаблоны модульной сетки от 960.gs. Этот фреймворк довольно распространен и, в последнее время, находит все больше и больше поклонников среди дизайнеров и верстальщиков.

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

Размечать самостоятельно заготовки с помощью зебр-заливок и направляющих — не выход. Это лишняя трата рабочего времени, которое лучше потратить с большей пользой. Поэтому воспользуемся онлайн-генератором Modular Grid Pattern, чтобы доработать стандартные шаблоны 960.gs.

Задача: быстро получить из левой части картинки то, что изображено в правой:

Переходим по вышеприведённой ссылке, выставляем следующие параметры с картинок ниже и сохраняем полученные результаты в виде PNG или Photoshop-pattern.

Для 12-ти колоночного макета:

Для 16-ти колоночного макета:

Для 24-х колоночного макета:

Параметр Baseline (здесь используется для задания интерлиньяжа или line-height) я выставлял 18px в расчете, что размер основого шрифта 12px (font-size × 1,5 = line-height). У вас он может быть другим, в зависимости от личных убеждений и выбранного кегля для текста.

Высоту модулей (Module height) выставляйте по собственному вкусу, я оставил стандартные значения.

Полученные результаты в виде PNG-файлов также отлично подходят для наложения на макет в процессе HTML-верстки с помощью PixelPerfect (или подобных расширений для браузеров).

Особо внимательные могут обнаружить, что на сайте Modular Grid Pattern есть еще ссылка на расширение для Photoshop, но у меня с ним что-то не срослось. После n-ной попытки победить его недружественное автозаполнение параметров, я его удалил.

Ну и в конце, пара полезных ссылок в тему:

• Статьи Алексея Черенкевича о модульной сетке.
• Генератор вертикального ритма для сайтов.

Критикам и троллям — просьба обойти стороной тему достоинств и недостатков подобных фреймворков, суть поста не в этом.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. 96% или резиновая модульная сетка для Web
2. Спорное оформление вкладок и кнопок
3. Скрытые возможности text-shadow

Не удержался и решил перепостить сюда ссылку из своего твиттера (присоединяйтесь, иногда, делюсь полезностями) на интересный пример использования text-shadow. То, что нарисовано на картинке к посту в живую можно посмотреть здесь.

Помимо того, что здесь не используется никакой дополнительной разметки (типа :before и :after), особо внимательные дизайнеры могут заметить, что у текста есть не только «объём» (в коде, строки параметров 1-5), но и тень (остальные строки, с указанием цвета через RGBA, что позволяет делать слои-тени прозрачными) .

В принципе, весь код изложен на той же странице. Суть подхода — многократное повторение параметровtext-shadow через запятую. При этом первый параметр указывается для тени «первого слоя», второй — слоя ниже и т.д. (Для тех, кто вообще не в курсе, как работает text-shadow — читайте).

Выглядит потрясающе, реализуется просто. Можно использовать в меню, кнопках, заголовках и везде, где придумается.

Работает во всех современных браузерах, кроме IE (неожиданно, правда? :)

Кроме того, как пишут здесь, подобный многослойный подход можно использовать и в box-shadow.

Развитие

А вот что получилось у меня в манипуляциях с тенями, примерно, за полчаса потраченного времени. Уверен, что добавив градиенты и прочие продвинутые CSS3-штуки, можно добиться более впечатляющих результатов.

Слегка доработанный эффект вдавленного текста (за счёт добавления верхней тени выглядит естественнее, чем растиражированные в сети примеры):

Inset Text

.inset {
	font-size: 72px;
	color: #666;
	text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}

Наоборот, выдавленный текст:

Outset Text

.outset {
	font-size: 72px;
	font-weight: bold;
	color: #666;
	text-shadow: -2px -2px 2px #fff, -2px 0 2px #fff,
		0 -2px 2px #fff, 2px 2px 2px #000,
		0px 2px 2px #000, 2px 0 2px #000;
}

Радужная тень:

Rainbow

.rainbow {
	font-size: 72px;
	font-weight: bold;
	color: rgba(0, 0, 0, 0); /* сам текст невидим */
	text-shadow: 3px 0 0 #d91f26, 6px 0 0 #e25b0e,
		9px 0 0 #f5dd08, 12px 0 0 #059444,
		15px 0 0 #0287ce, 18px 0 0 #044d91,
		21px 0 0 #2a1571;
}

Текст с обводкой:

Stroke

.stroke {
	font-size: 72px;
	font-weight: bold;
	color: #999;
	text-shadow: 1px 1px 0 #e47e0f, -1px -1px 0 #e47e0f,
		1px -1px 0 #e47e0f, -1px 1px 0 #e47e0f;
}

Неоновый текст:

Neon Text

.neon {
	background: #000;
	font-size: 72px;
	font-weight: bold;
	color: #407ec4;
	text-shadow: 1px 1px 0 #4da2fc, -1px -1px 0 #4da2fc,
		1px -1px 0 #4da2fc, -1px 1px 0 #4da2fc,
		4px 4px 8px #2c5889, -4px 4px 8px #2c5889,
		4px -4px 8px #2c5889, -4px -4px 8px #2c5889;
}

Такой модный сейчас анаглиф:

3D Anaglyph

.ananglyph {
	font-size: 72px;
	color: #333;
	text-shadow: -4px 0 1px #1ef2f1, 4px 0 1px #f6050a;
}

Удачи в освоении!

* * *

Постовой:

Установите себе в подпись красивые юзербары.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Забытые возможности :first-letter
2. text-align: justify. Добро или зло?
3. 96% или резиновая модульная сетка для Web

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

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

Основными (самыми распространёнными) приёмами оформления основного текста в веб, конечно же, является выделение шрифта жирным и курсивным начертанием. Выделение с помощью <strong> и <em> (или font-weight: bold и italic в CSS) чрезвычайно полезные способы выделения, но удачно применимы далеко не ко всем стандартным веб-шрифтам.

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

Наклонный sans-serif

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

При разработке дизайна, Arial мне показался мелковатым, а Verdana слишком крупным и грубым, поэтому я остановился на Tahoma, как промежуточном значении между двумя крайностями. Но уже в процессе ведения блога понял, что ошибся с выбором шрифта: я практически с самого начала выделял курсивом отдельные слова, важные названия и цитаты, и сразу же стало заметно, что текст отмеченный «курсивом», становился большим препятствием и мучением для глаз, причём увеличение кегля не давало никаких положительных результатов — текст по-прежнему оставался косым и сплющенным.

Для примера, «рыба», выделенная курсивом (Tahoma, «курсив» (на самом деле Oblique)):

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

Теперь тот же текст, в более «мелком с виду» Arial:

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

Второй вариант читается, несомненно, легче и быстрее, поэтому основной шрифт на этом блоге, со временем, я поменял.

 «Почему?» и «Как?»

Когда мы ставим в коде <em> или пишем стили font-style: italic, мы заранее уверены, что увидим на экране курсивное начертание шрифта. Но это не так.

Умные браузеры, конечно, показывают нам то, что мы хотим видеть, но не всегда это то, что есть на самом деле. Те шрифты, которые не имеют курсива (!), мы видим в наклонном начертании — наклоненный вправо прямой шрифт (Oblique), а не специально разработанная для экранного чтения курсивная версия. Отсюда же и все визуальные последствия: изменение пропорций в штрихах, плохая читабельность и восприятие букв.

Из стандартных Windows-шрифтов не имеют курсива:

• Tahoma
• Comic Sans MS
• Impact
• Lucida Console
• Lucida Sans Unicode
• Microsoft Sans Serif

Кроме того, шрифты Arial Black (вполне понятно почему:), Impact, Lucida Console и Lucida Sans Unicode не имеют жирного начертания. Применив к ним font-style: bold или <strong> вы снова получите «математическую модель» жирного шрифта, а не реальный жирный.

Нет проблем у serif

К счастью, у Win-стандартной тройки Times New Roman, Georgia и Palatino Linotype, таких проблем не наблюдается. Единственное, что, в кегле до 18 px, Times заметно проигрывает в рендере своих курсивов — часто проявляется «эффект выпавшик пикселей» как в обычном, так и в жирном курсиве, а лучше всего сглаживается Palatino Linotype.

Злоключение

Чтобы избегать всех вышеперечисленных проблем, рекомендую сначала прочитать этот пост :) и почаще тестировать свои текстовые идеи/дизайны/сайты на сервисах вроде typetester, параллельно просматривая все доступные начертания выбранного шрифта в Photoshop или другом графическом редакторе.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Anti-aliasing для текста в браузерах и в Photoshop
2. 7 правил эффективного оформления заголовков на сайте
3. 12 вариантов сочетаний шрифтов, которые можно использовать на своих сайтах

Не важно, каким способом задания размера шрифта в CSS вы пользуетесь, но иногда бывает необходимо подсмотреть, какое значение соответствует текущему в другой системе единиц (например, какому размеру в px или %, будет соответствовать шрифт, размером 1.4 em) или быстро перевести одни размеры в другие.

Чтобы это было просто, предлагаю держать для таких случаев перед глазами (или в закладках) следующую таблицу соответствия размеров шрифтов.

Источник такой замечательной таблички — devirtuoso.com

Кроме того, еще один полезный совет от автора (давно известный, но, скорее всего, не всем): чтобы легко было конвертировать размеры шрифта из em в px и обратно, установите размер шрифта для body:

body { font-size: 62.5% }

Таким образом, 1em теперь будет равен 10px, что значительно упростит расчеты. Например, теперь font-size: 12px будет равнозначен font-size: 1.2em и т.д. Но не забывайте про наследование при относительных размерах.

Неудачное дополнение

Внимательные верстальщики заметили, что в таблице не хватает еще одного способа задания размеров — через ключевые слова (xx-small, x-small, small, medium, large, x-large и xx-large). В попытке дополнить авторскую таблицу этими значениями, я наткнулся на одну давнюю проблему — несоответствие значений (размеров) ключевых слов по умолчанию в разных браузерах.

Если не ошибаюсь, то проблема была подробно описана в старенькой (но актуальной по сей день и недавно переизданной) книге Джеффри Зельдмана «Веб-дизайн по стандартам» и заключается она в том, что за базовые размеры шрифта в браузерах принимаются разные значения (12 и 16px).

Вот что получилось у меня (для ознакомления любопытным):

Моё мнение, что самый полный контроль над размерами шрифтов на сайтах предоставляют, конечно же, пиксели, а для печати удобнее всего использовать pt. Хотя на практике очень часто используют комбинированный метод %/em, чтобы обеспечить масштабируемость и контроль над размерами шрифта у пользователей IE6.

А какие указания для размеров используете вы? Делитесь мыслями в комментариях.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Периодическая таблица шрифтов
2. FLIR — ещё одна возможность избавиться от стандартных шрифтов на сайте
3. 96% или резиновая модульная сетка для Web

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

Одним из лучших сайтов, пропагандирующих базовую сетку для Web, конечно же, является 960 grid system. Поэтому, насмотревшись на красивые примеры сайтов, спроектированных по этой сетке и опробовав их на личных проектах, я решил поделиться базовыми принципами и своими мыслями, применительно не только к фиксированной разметке (чаще всего описываемой для примеров), но и к резиновой и эластичной (адаптивной).

Монолит (px)

Итак, основання на пропорциях и золотом сечении, фиксированная модульная сетка выглядит примерно так. Запомните этот пример, он пригодится для понимания эластичного и резинового подхода.

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

Достаточно подробная разработка макета на такой сетке описана на nettuts.com. Вряд ли у меня есть чем дополнить данное руководство.

Эластик (em)

Самое главное при проектировании такой разметки помнить, что она зависит от базового значения шрифта, используемого на сайте. Это значит, что сайт с 1em Verdana и 1em Arial будут заметно отличаться друг от друга по масштабу, из-за заметной разницы в размерах этих гарнитур.

Чтобы проектировать эластичный макет по базовой сетке приведённой выше, лучше всего воспользоваться удобным калькулятором для перевода px в em. Да, и помните, что в большинстве браузеров, по умолчанию, 1em=16px.

Ещё можно скачать неплохой CSS-фреймворк, основанный на сетке 960 Grid, для проектированния подобных эластичных макетов.

Пример эластичной страницы вы можете увидеть в статье «Масштабируемые изображения».

Резина (%)

C резиновой вёрсткой по сетке 960 Grid наблюдается некоторая неоднородность в возможностях браузеров и ожиданиях верстальщиков и дизайнеров.

Если посмотреть неплохой фреймворк Fluid 960 Grid System для резиновой разметки в разных браузерах, то можно увидеть, что разметка блоков с правого края разваливается в Opera, Chrome и Safari, но отлично работает в Firefox и даже Internet Explorer 6 (!).

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

Результаты

Экспериментальным путём доказано:

• Браузеры Mozilla Firefox и Internet Explorer воспринимают процентные значения, указанные в десятичных дробях с точностью до двух цифр после запятой. Им можно указывать проценты, например, вот так: 12.15%, 50.42% и т.д.
• Браузеры Chrome и Safari понимают десятичные дроби с точностью до одной цифры после запятой. Они понимают вот так — 10.1%, 45.5%. Вторую цифру после запятой они игнорируют.
• Браузер Opera понимает только целые числа — 1, 2, 3, …

Отсюда и «поломанная» сетка в фреймворке.

И что теперь?

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

Если отталкиваться от того, что внешний div-контейнер страницы будет составлять 96% размера окна браузера (по аналогии с 960px), то легко считать, что остальные блоки будут высчитываться из расчёта 10px=1%. Например блок шириной 60px будет равен 6%, а блок шириной 860px=86%.

В итоге, просуммировав все значения отступов и ширины блоков в любой полосе модульной сетки, мы получим всё те же 96%.

Всё просто. И будет работать во всех браузерах.

По-моему, пропорции соотношений блоков и отступов в таком подходе останутся такими же, что и в фиксированной или эластичной модульных сетках. Хотя, можно оспорить очевидность такого подхода в комментариях к посту ;)

Warning!

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

Читать по теме:

• Модульная система вёрстки. Википедия, куда же без неё.
• Модульная сетка в веб. Пример вёрстки по семиколоночной сетке.
• Базовая сетка в веб дизайне. Выравниваем текст по сетке.
• Геометрия модульной сетки. Разница в понимании: дизайнер против кодера.
• Сетка. Немного истории и фоток из печатной типографики.

Удачных вам экспериментов с модульной сеткой и красивых макетов!

* * *

Сканер блогов:

Стоит ли публиковать свой лучший контент на сторонних ресурсах?

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Прокачиваем шаблоны от 960.gs
2. Скрытые возможности text-shadow
3. Таблица соответствия размеров шрифтов в CSS

Довольно занятная вещь, которую выловил на просторах сети, поэтому спешу поделиться. Подойдёт гикам для поднятия общего уровня познаний в типографике.

Для каждого шрифта указаны семейство, имя создателя и год разработки. Авторство, насколько я понял, принадлежит squidspot.com.

Периодическая таблица шрифтов (1,6 MB, картинка кликабельна).

Как думаете, можно найти практическое применение этой табличке?

* * *

Сканер блогов:

Акция «Социалки в обмен на постовые» от Bormaley. Отлично подойдёт для людей, которым некогда заниматься раскруткой своих проектов.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Таблица соответствия размеров шрифтов в CSS
2. FLIR — ещё одна возможность избавиться от стандартных шрифтов на сайте
3. Забытые возможности :first-letter

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

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

Скучные примеры использования :first-letter в CSS из сети.

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

Размер специально сделал большим, чтобы показать возможности использования фона в буквице. Не пинайте сильно в комментариях за это :)

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

Код можно посмотреть в исходниках живого примера. Никаких сверхъестественных приёмов там нет, просто активно используется background с изображениями.

Больше примеров для оформления буквицы, вы можете найти на сайте fromoldbooks.org (пункт Borders and Initials).

Несколько рекомендаций

• Всё должно быть к месту. По стилю, буквица должна соответствовать общему оформлению и тематике сайта.
• Фон должен быть достаточно контрастным. Иначе, может получиться шедевральное граффити, и читатели будут любоваться им часами, с вопросом «Ого, а чё это?»
• проверяйте, чтобы фон одинаково хорошо смотрелся и растягивался, как для широких символов (М), так и не очень (I).
• Не стоит стилизовать первые буквы всех параграфов, хватит самой первой буквы в статье (или первой буквы после заголовка/подзаголовка). Для этого в CSS пишем:

  h2+p:first-letter {	float:left;
  	padding: 10px;
  	margin: 4px 10px 4px 0;
  	background: #fff url(fl_bg.jpg) center bottom no-repeat;
  	color: #000;
  	font-size:160px;
  	line-height: 1em;
  	border: 1px solid #000;}

  Вместо h2 нужно подставить тот тег, в котором выводится ваш заголовок страницы. Естественно, такой пример не сработает в IE6 (буква так и останется нестилизованной), частично сработает в IE7 (у меня он упорно отказывался выводить фоновое изображение), и отлично стилизуется в IE8. Разве недоработки старых версий эксплорера, это большая проблема для прогрессивного человечества?

Логика действий расписана, думаю, дальше можно самостоятельно искать практическое применение для этого подхода.

* * *

Сканер блогов:

Увлекаетесь Twitter? Выводите последние сообщения из него в свой блог, получите ещё больше follow'еров. Резиновые колонки + эмуляция высоты. Готовый шаблон для верстальщиков.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Скрытые возможности text-shadow
2. Как добавить разные иконки к пунктам меню, используя только CSS
3. 96% или резиновая модульная сетка для Web

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

Как и любой пользователь, на чужом сайте я ожидаю, что мне будет удобно читать именно тем способом к которому я (как и большинство моих друзей и знакомых) привык. А привык я во время чтения скользить по тексту не только глазами, но и курсором, выделять прочитанные места, читать описания в title к ссылкам и выводить на печать понравившиеся мне моменты, а не всё целиком.

Но особо продвинутые вебмастера и в этом пытаются досадить читателям, используя дополнительный «умный» тюнинг сайтов. Вот эти способы сегодня и попали в чёрный список АнтиВебДизайна.

Отключение клавиш мыши с помощью JavaScript

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

Проще и демократичнее ставить копирайт на свои материалы. Хотя, если захотят украсть статью, всё равно украдут. Но борьба автора и пиратов не должна отражаться на читателях.

Отключение выделения текста, блокировка клавиш мыши — раздражитель и древность. Сейчас даже на flash-сайтах тексты стараются делать выделяемыми.

SnapShots в Livejournal

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

Поэтому приходится крутить такие страницы скроллбаром и читать авторов, которые не очень любят ставить ссылки :)

Ссылки-параграфы

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

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

Ещё хуже обстоит дело на странице отдельной новости (например, на этой). Тут вообще без комментариев с моей стороны. При отключенных стилях страница выглядит просто потрясающе, предлагаю вам оценить.

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

* * *

Тем, кому нравятся умные и замечания мысли на тему веб-разработки и юзабилити, советую обратить внимание на блог (и авторские статьи) Романа Настенко, найдёте много чего интересного, для осмысления и для практики.

* * *

Сканер блогов:

Обмен постовыми для блоггеров от CodeIsArt. Не упустите шанс! 5 Удобных CSS Reset Техник. Для тех, кто ещё не определился каким образом сбрасывать стандартные стили в браузерах. 30-ка качественных блогов по интернет-маркетингу.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Горизонтальное центрирование фиксированных сайтов
2. Usability Webinar: удачный коннект
3. Ежедневные юзабилити-тренировки

Возможно, вы ещё не знакомы с FLIR (Facelift Image Replacement), технологией замены стандартных шрифтов на сайте, которая может создать альтернативу технологии sIFR.

А примечательна эта технология тем, что работает на связке CSS, JavaScript, PHP и не использует Flash.

Как работает

При загрузке страницы, JavaScript, установленный на сайте находит теги, помеченные специальными CSS-классами и отсылает запрос на сервер, затем PHP-сценарий, подменяет текст в этих тегах автоматически сгенерированным картинками с нужным нестандартным шрифтом.

Примеры использования FLIR можно увидеть всё на том же сайте разработчика и протестировать собственные сайты (к сожалению, не работает для кириллических символов :( ).

Установка

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

Несмотря на английский, всё интуитивно понятно и ни у кого не должно вызвать затруднений.

Плюсы

• лёгкая настройка
• не требуется поддержка плагинов в браузере (единственное требование, поддержка PHP GD library (библиотека для работы с графикой) на сервере);
• заменённый текст доступен поисковикам через атрибут alt;
• при отключенном JavaScript, выводится стандартный шрифт, установленный в стилях;
• автоматическое подгонка изображения под размер подменяемого шрифта;
• возможность выбора формата генерируемого изображения (GIF, PNG);
• при выделении и копировании текста и изображений, атрибуты alt копируются как нормальный текст.

Ну и сюрприз для блоггеров: существует плагин для WordPress.

Минусы

• наблюдается некоторая «косячность» работы в Opera, в частности, при копировании текста вместе с изображениями, текст из атрибута alt не копируется. Эту проблему разработчик обещал исправить в последующих билдах;
• проблема при рендеринге некоторых шрифтов, поэтому предварительно отображение следует протестировать локально.

Где использовать

Для заголовков на сайтах. Отличный выход для имиджевых проектов, где стандартных платформенных шрифтов явно недостаточно или на сайтах, где явные проблемы при разговоре с заказчиком.

* * *

Сканер блогов:

Выравнивание изображений свойством vertical-align. Бесплатные инструменты для анализа и оценки сайтов

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.



Похожие статьи:

1. 7 правил эффективного оформления заголовков на сайте
2. Периодическая таблица шрифтов
3. Таблица соответствия размеров шрифтов в CSS
]]> http://rotorweb.ru/javascript/flir-eshhyo-odna-vozmozhnost-izbavitsya-ot-standartnyx-shriftov-na-sajte.html/feed 9 http://rotorweb.ru/dizajn/neudachnyj-brending.html http://rotorweb.ru/dizajn/neudachnyj-brending.html#comments Mon, 06 Oct 2008 10:31:56 +0000 rotor http://rotorweb.ru/?p=64

История реальная, поэтому имена действующих лиц подверглись цензуре, чтобы все совпадения казались случайными :)

Итак, ситуация: обратился клиент (довольно крупная региональная компания), которому нужен имиджевый сайт в соответствии с уже разработанным руководством по стилю (brandbook по-нашему; разрабатывала другая компания).

Что может быть проще, если за тебя уже всё придумали, осталось только открыть Photoshop и слегка подкорректировать внешний вид дизайна? Ага...

Отрезвление

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

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

Но дело не в клиенте, а в отношении.

Брендбук воспринимался им как Самый Главный Закон В Мире, от которого нельзя отступать ни на шаг. Ведь умные люди-маркетологи писали! Поэтому я получил чёткую установку делать всё в соответствии со стилем, проверяя и перепроверяя всё по десятку раз и под строгим контролем со стороны.

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

На фирменных бланках использовались нестандартные шрифты, которые «выражают современный стиль компании, её узнаваемость на рынке среди конкурентов и стремление к индивидуализации». Для особо любознательных — семейство Officina с засечками и без. Клиент твёрдо стоял на своём и требовал использовать только эти шрифты.

Использовать sIFR или подгружать нестандартные шрифты через @font-face? Первый не подходит потому, что наполнение контентом будет осуществляться клиентом самостоятельно, а второй — просто не практикуемый, да и не считаю его достойным способом в плане заботы о пользователях.

К счастью, моя история на этом практически заканчивается, так как из-за внутренних перестановок в компании клиента, разработка сайта была заморожена на неопределенный срок. Будем считать, выкрутился :)

Но проблема от этого не перестала быть проблемой. Что делать, если столкнёшься с ней снова? У вас были подобные случаи?

Креативщикам и прочим

Единственный вопрос, который напрашивается сам-собой: почему в толстенной книге, в которой нашлось место описанию нанесения логотипа на кепки, футболки, ручки, брелоки, подсветки для стенда, размерам баннеров-растяжек, не нашлось места для пары строк о сайте?

Даже если вы занимаетесь, разработкой ФС исключительно для оффлайна, предусмотреть, что следующим шагом в развитии рекламной компании, будет создание сайта, совсем не трудно. А пара строк типа: «при выборе шрифтов для сайта, следует использовать гарнитуру ***, как близкую по начертанию, или оставить выбор на усмотрение Web-дизайнера», позволила бы остудить особо фанатичных клиентов и нормально работать.

В общем, вопрос с нестандартными шрифтами оставляю открытым. Если у вас есть пути решения, пишите комменты. Интересно будет узнать различные мнения по этому вопросу.

* * *

Блоггеры, ещё не участвуете в акции? Не упускайте шанс получить ссылки!

Постовой

Валидная кроссбраузерная вставка Flash-анимации. Разные методы Image Replacement для разных браузеров. Световые кисти для Photoshop.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.



Похожие статьи:

1. Usability Webinar: удачный коннект
2. Новый пункт в ТЗ
3. Прокачиваем шаблоны от 960.gs
]]> http://rotorweb.ru/dizajn/neudachnyj-brending.html/feed 11