Design For Masters

Служба сравнения в Google Analytics

Евгений — Fri, 09 May 2008 13:36:22 +0000

Служба сравнения в Google Analytics

Автор: Евгений

Часто изучая статистку сайта хочется сравнить ее с другими чтобы понять насколько плох показатель и каков потенциал улучшения, в самом деле, "Показатель отказов 60%" это плохо или нормально, трудно определиться не зная чему он равен на других сайтах из той же ниши. Сегодня прикидывая как бы экспортировать из Google Analytics данные экспорт которых там похоже не предусмотрен, обнаружил новый для себя раздел Посетители > Сравнение (бета-тестирование). Упоминаний о нем не в блоге не на странице с описанием обновлений Google Analytics не нашел, видимо это новая функция, хотя я достаточно редко заглядываю в аналитику и возможно она есть уже давно.

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

В качестве примера приведу графики Design For Masters, в сравнении с показателями подобных сайтов из категории "Веб-разработка и веб-дизайн".

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

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

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

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

Комментарии

Обзор №5, Март — Апрель 2008

Евгений — Tue, 06 May 2008 02:02:58 +0000

Обзор №5, Март — Апрель 2008

Автор: Евгений

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

Дизайн

Формы регистрации должны умереть
Форма регистрации одно из препятствий, отсеивающих часть пользователей сервиса или покупателей интернет-магазина. К сожалению, обойтись совсем без них не всегда возможно, но приложить все усилия, чтобы сделать процесс регистрации максимально удобным и незаметным для пользователя просто необходимо.
12 способов улучшить юзабилити сайта при помощи JavaScript и AJAX
В последние годы урожай на всевозможные JavaScript-штучки был богатым.Сайты с энтузиазмом обрастали «аяксовыми голосовалками , как на Дигге» и «галереями на базе LightBox». Но вот эйфория пошла на спад, разработчики наигрались. Самое время выдохнуть и оглянуться.
Про PNG. Часть третья
Про особенности сохранения полупрозрачных PNG в Photoshop.

Кодинг

Семантическая вёрстка. Часть 1
Семантическая вёрстка. Часть 2
Cемантическая верстка, что это такое, три уровня семантики, преимущества семантической верстки.
Изучаем наличие layout
Множество несоответствий (стандартам) Internet Explorer'а при визуализации веб-страниц может быть устранено путем присвоения конкретным элементам свойства layout. Layout обладает редкими и тяжело предсказуемыми эффектами при визуализации блоков, а также при отображении вложенных в них элементов. Следствием того, что у элемента есть или нет layout, может быть: распространенные ошибки IE при отображении «плавающих» блоков, различное поведение самих блоков при одинаковых базовых свойствах, «схлопывание» полей между родителем и его потомками, различные проблемы с созданием списков, разное позиционирование фоновых картинок, различия между браузерами при использовании скриптов.
Переключение режимов браузера с помощью Doctype
Чтобы работать как с современными страницами, написанными в соответствии с веб-стандартами, так и с тем, что осталось в наследство еще с конца 90-х, движки современных браузеров могут работать в разных режимах. Давайте еще раз посмотрим, что это за режимы и как их правильно переключать.
sup рвёт тексты
Почти все сайты использующие тег SUP никак не инструктируют браузер как его отображать. А ведь отображение по-умолчанию откровенно хромает — тег этот рвёт тексты, высота строки где присутствует SUP увеличивается и в результате нам предстают хаотично разбросанные строки, а не параграф. Сложно даже быстро понять, является ли такое экстра-пространство разбивкой между строками, или между параграфами.
Нативные события в браузерах
Наиболее компактные способы назначения обработчиков событий для элементов DOM-дерева. Только практические javascript решения, без всякой теории о всплытии и захвате.
Быстроредактируемые поля
Идея хороша, и несомненно найдет применение, только вот, ее внедрение в реальных проектах требует усложнения системы управления контентом.
Introducing xdebug
Debugging PHP applications with xdebug
Tracing PHP Applications with xdebug
Profiling PHP Applications With xdebug
Цикл статей по работе с xdebug, подробно и доступно описан каждый этап работы отладчиком.
Подборка шпаргалок с блога go4flash
ActionScript, AIR, Flex, CSS, HTML, HTML Character Entities, XML Path и XSLT, JavaScript, jQuery, Prototype, script.aculo.us, PHP, MySQL, CakePHP, Google, Blogger, Microformats, DJANGO, DOJO, Regular Expressions, Rewrite Engine (mod_rewrite), Ruby on Rails и Linux Quick Reference.
SVN auto-props, что это такое и как его готовить
Недавно возник интересный вопрос, как настроить автозамену специальных слов в SVN при коммитах и апдейтах. Поскольку обсуждение вопроса затянулось на 2 часа, решил написать подробную инструкцию, что и как. Однако, поскольку все специальные свойства представляют большой интерес, и могут принести большую пользу при их правильном использовании, то этой статье мы рассмотрим все специальные свойства, а не только свойства авто замены.
IETester — аналог MultipleIE
Сайт программы
IETester удобный аналог MultipleIE, просто незаменимый для пользователей Windows Vista под которой IE6 и IE5.5 не работают. Недавно вышла новая версия отличающаяся стабильностью и многоязычным интерфейсом.

ТОП 6 аддонов на IE для вебмастера
IE, как не крути, самый распространенный браузер в мире. И нет ничего удивительного в том, что есть веб-мастера, которые используют Internet Explorer не только в роли браузера, но и в роли рабочего инструмента. Ниже вы увидите шесть решений, с помощью которых вы сможете отладить свои скрипты, проанализировать заголовки или запросы и многое другое, что в конечном итоге максимально увеличивает скорость и качество разработки.
Оптимизация параллельных загрузок для минимизации издержек
Параллельная загрузка объектов, и ее влияение на производительность веб-страницы.
Цена банерной рекламы для клиентской производительности
Отображение рекламы для пользователей средней веб-страницы выливается в увеличении числа объектов примерно на 1/6 и общей задержки при загрузке на треть. На средней веб-странице находится 48Кб банеров в 8,1 объектах.
Исследование степени gzip-сжатия и загрузки процессора
Статья «Как gzip-сжатие влияет на производительность сервера» вызвала вполне понятную, но несколько неоднозначную реакцию, ибо было не понятно, насколько сильно издержки на gzip зависят от степени сжатия и как ее прогнозировать с учетом всех остальных параметров.

Типографика

Дизайн текста 3: Списки
Дизайн текста 3.5: Вложенные списки, графические маркеры
Пара содержательных постов о тонкостях оформлении списков в HTML.
На RMCreative обновлен список типографов.

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

Рабочая библиотека веб-типографа и контент-менеджера
Список книг о типографике и не только.
Оформление знака охраны авторского права
К сожалению, на сайтах этот элемент подвала страницы зачастую ставят «чтобы был», и оформляют кто во что горазд. Однако, на сей счёт есть не просто сложившиеся правила, а целый ГОСТ Р 7.0.1—2003 (PDF, 652 КБ).
Всё (или почти всё) о пробеле
Виды пробелов и их использование.
Оформление цитат на сайтах
Обычно при вёрстке текстов для веба на оформление цитат не обращают достаточного внимания. Автор статьи пытается исправить это досадное недоразумение.

Блоггинг

Коллеги
Проект Владимира Жилинского, место концентрации IT-блогов.
10 способов быстро увеличить посещаемость блога
Оптимизаторский хак от Кортни Таттла, который позволит увеличить посещаемость ваших нишевых блогов.
Копирайтерский ступор: 7 шагов по его беспроблемному искоренению
Копирайтерский ступор - состояние, когда абсолютно нет тем для написания статей. Как с ним бороться и реально ли побороть в сжатые сроки?
Плагины, которые должны быть обязательно установлены на каждом WordPress-сайте
Cписок плагинов, которые, в обязательном порядке должны быть установлены на любом сайте, работающем на движке WordPress. Большинство из указанных ниже плагинов касается безопасности сайта.

Комментарии

Clear для плавающих блоков

Peter-Paul Koch — Sat, 19 Apr 2008 23:28:35 +0000

Clear для плавающих блоков

Автор: Peter-Paul Koch

Самое сложное в этой заметке — придумать для нее название, не представляю как можно перевести clearing floats, не чистка же. А посвящена она до безобразия простому методу этого клиринга, хоть он и достаточно стар, возможно, кто-то еще не знает, к примеру, я не знал.

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

Проблема

При верстке часто встает задача, натянуть родительский блок на плавающий:

К примеру, у нас есть такой код:

div.container {
    border: 1px solid #000000;
}

div.left {
    width: 45%;
    float: left;
}

div.right {
    width: 45%;
    float: right;
}

И соответствующий ему результат:

Левая колонка.

Правая колонка.

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

Традиционное решение

Обычно для решения этой проблемы использовался дополнительный элемент, с установленным clear: both. Благодаря наличию не плавающего элемента родительский контейнер растягивался чтобы поглотить его.

Левая колонка.

Правая колонка.

div с включенным clear: both

Дополнительный элемент можно добавить как в самом коде так и с помощью псевдо-класса :after (поскольку IE не поддерживает :after этот вариант представляет только теоретический интерес).

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

Новое решение

Алекс Волкер, опубликовавший это решение впервые, упоминает, что идея принадлежит Паулю О`Брайну. Но, кто бы не придумал это решение, выглядит оно так:

div.container {
    border: 1px solid #000000;
    overflow: auto;
    width: 100%
}

Свойство width используется, чтобы включить hasLayout в IE Win (кроме IE7), работает это превосходно:

Левая колонка.

Правая колонка.

Теперь граница охватывает плавающие элементы.

Сложности

Некоторые моменты требуют особого внимания:

Трюк работает с тремя их четырех возможных значений overflow: auto, hidden, scroll. Но в последнем случае будут видны скроллбары.
Некоторые браузеры требуют, чтобы для контейнера было установлено свойство width или height.
Браузер может показывать скроллбар если контент выходит за пределы ширины контейнера.

Необходимость `width` или `height`

Чтобы прием сработал в Opera или IE Win нужно использовать width или height. В противном случае IE не будет растягивать блок, чтобы поглотить плавающие элементы, а Opera, того хуже, полностью скроет содержимое контейнера.

Чаще всего подойдет значение width: 100%, но для сложной разметки могут потребоваться другие значения.

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

Explorer Mac: `hidden`

Если для вас важна поддержка IE Mac, используйте overflow: hidden, при использовании overflow: auto этот браузер почему-то постоянно отображает скроллбары.

Нежелательные скроллбары

Dave Shea, обращает внимание на то, что если контент не вмещается в контейнер по ширине, появляются нежелательные скроллбары. Лично меня удивляет, то что это считается серьезной проблемой. Используйте overflow: hidden если хотите обезопасить себя от скроллбаров. Конечно, это может привести к тому, что, выходящая за пределы контейнера, часть контента будет скрыта, но если мы будем:

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

столкнуться с этой проблемой, скорее всего не придется.

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

Окончательное решение

Проанализировав проблемы, мы остановимся следующем коде:

div.container {
    border: 1px solid #000000;
    overflow: hidden;
    width: 100%;
}

div.left {
    width: 45%;
    float: left;
}

div.right {
    width: 45%;
    float: right;
}

Левая колонка.

Правая колонка.

Вот такое, предельно простое и красивое решение.

Еще более красивое решение

В предыдущем примере используется width: 100% (или другая подходящая ширина), понятное дело, что это не всегда удобно, да и не всегда возможно. Вадим Макеев подсказывает, что включить hasLayout для IE5.5-6 можно с помощью zoom: 1, тогда окончательно решение будет выглядеть так:

div.container {
    border: 1px solid #000000;
    overflow: hidden;
    zoom: 1;
}

div.left {
    width: 45%;
    float: left;
}

div.right {
    width: 45%;
    float: right;
}

Левая колонка.

Правая колонка.

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

zoom: 1 можно спрятать в условный коммент, или в отдельный файл для IE и ждать пока отомрет 6-я версия. Пока есть невалидный браузер, приходится использовать и невалидный код.

Вместо zoom: 1, можно попробовать:

div.container {
    overflow: hidden;
}

* html div.container {
    overflow: visible;
    height:1%;
}

Валидатор подвоха не заметит, но это все таки хак.

Можно попробовать:

div.container {
    overflow: hidden;
    display:inline-block;
}

div.container {
    display:block;
}

Визуализация данных посредством HTML и CSS

Wilson Miner — Thu, 10 Apr 2008 00:14:22 +0000

Визуализация данных посредством HTML и CSS

Автор: Wilson Miner

Даных в сети становиться больше и веб-разработчикам приходится все чаще сталкиваться с задачей их отображения. Вместе с тем растет и количество инструментов визуализации, хорошим примером может быть Google Charts API, но и кроме него, есть большое количество сервисов и инструментов для создания диаграмм и графиков в виде изображений или Flash. Есть и великолепные техники, основанные на веб-стандартах, к примеру, CSS bar graphs Эрика Мейера, использующая семантические таблицы. Все эти методы хороши когда нужно показать данные на первом плане, и все, что вам нужно это диаграмма. Но, что если вы хотите тесно интегрировать визуализацию и навигацию на сайте, к примеру как на EveryBlock?

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

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

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

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

Горизонтальная гистограмма

Реализуется достаточно просто, все, что требуется — это добавить бары под текстом (посмотрите на пример, чтобы понять о чем идет речь). Метод хорошо работает на списках любой длины, но слишком длинные списки стоит отсортировать, потому что относительные размеры баров лучше читаются если они упорядочены. Кроме размера бара, мы будем указывать абсолютные значения для всех элементов списка, но если для вас важны только относительные величины то их можно опустить.

Начнем с обычного неупорядоченного списка:


  
    Яблоки
  
  
     »
    Бананы
  
  
     »
    Вишня
  
  
    Финики

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


  
    Яблоки
    420
  
  
     »
    Бананы
    280
  
  
     »
    Вишня
    200
  
  
    Финики
    100

Создавая бары, мы должны задать элементам списка display: block, чтобы они заняли всю ширину, и position: relative, чтобы позиционировать бары относительно элемента списка.

.chartlist li {
  position: relative;
  display: block;
}

Для ускорения просмотра, с помощью абсолютного позиционирования, сместим количества вправо.

.chartlist .count {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0 0.3em;
  text-align: right;
  color: #999;
  font-weight: bold;
  font-size: 0.875em;
}

Добавим отступ к ссылкам, чтобы текст ссылки не перекрывался с количеством, а чтобы ссылка всегда была перед баром, задаем z-index больше нуля, не забыв при этом указать position: relative, чтобы свойство z-index сработало.

.chartlist li a {
  display: block;   
  padding: 0.4em 4.5em 0.4em 0.5em;  
  position: relative;   
  z-index: 2; 
}

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


  
    Яблоки
    420
    (42%)
  
  
     »
    Бананы
    280
    (28%)
  
  
     »
    Вишня
    200
    (20%)
  
  
    Финики
    100
    (10%)

Замечание о данных

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

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

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


  
    Яблоки
    420
    (42%)
  
  
     »
    Бананы
    280
    (28%)
  
  
     »
    Вишня
    200
    (20%)
  
  
    Финики
    100
    (10%)

Последний штрих

Последнее, что нам нужно сделать в этом графике, это добавить стили для баров. При этом мы скрываем текстовые значения в процентах (с помощью text-indent как и в технике image replacement Майка Рандла). Для нас важно не точное значение, а относительный размер, и бар прекрасно его отражает. Если нужно показать точный процент то для этого можно использовать как сами бары, так и отдельный элемент.

В стилях мы задаем высоту бара 100% и оставляем для width значение по умолчанию (0), чтобы бары не были видны пока точное значение width не указано. Цвет баров нужно подобрать так, чтобы они были достаточно заметны, при этом ссылки на их фоне должны остваться читабельными.

.chartlist .index {   
  display: block;   
  position: absolute;   
  top: 0;   
  left: 0;   
  height: 100%;   
  background: #B8E4F5;   
  text-indent: -9999px;   
  overflow: hidden; 
}

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

Гистограмма

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

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


  
    »
    title="1 Декабря, 2007: 40">
      1
      (40)
    
  
  
    »
    title="2 Декабря, 2007: 100">
      2
      (100)

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

Под барами диаграммы зарезервируем место для меток:

.timeline {
  font-size: 0.75em;
  height: 10em;
}

.timeline li {
  height: 8em;
}

Теперь установим position: relative для элементов списка, чтобы потом использовать абсолютное позиционирование баров внутри них, float: left, чтобы они размещались один за другим по горизонтали, подберем размеры не забывая, что нам нужно место для метки и зададим границы по краям элемента, чтобы бары не сливались, при этом все размеры как и везде задаем в em.

.timeline li {   
  height: 8em;  
  position: relative;  
  float: left;  
  width: 1.5em;   
  margin: 0 0.1em;
}

Сделать бар и метку кликабельными можно установив для ссылки display: block и height: 100%, чтобы она заполнила пространство внутри элемента списка.

.timeline li a {    
  display: block;   
  height: 100%;  
}

Чтобы метки были кликабельными, мы разместили их внутри ссылки, теперь вынесем их под график с помощь абсолютного позиционирования, используя отрицательное значение для свойства bottom. Поскольку высота баров 8em, а всего графика 10em у нас остается 2em для размещения меток.

.timeline li .label {   
  display: block;   
  position: absolute;   
  bottom: -2em;   
  line-height: 2em;  
  left: 0;  
  width: 100%;  
  text-align: center;
}

Числа нам не нужны, поэтому скроем их с помощью text-indent и overflow. Осталось задать фон баров и разместить их подходящим образом внутри элементов списка с помощью абсолютного позиционирования.

.timeline li a .count {   
  display: block;   
  position: absolute;
  bottom: 0;
  left: 0;
  text-indent: -9999px;   
  overflow: hidden;
  width: 100%;
  height: 0;  
  background: #AAA;
}

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

Спарклайн

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

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

Предполагается, что спарклайн можно размещать прямо в тексте, но пока не будет хорошей поддержки display: inline-block, придется ограничиться обычным float.

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

.sparkline {
  float: left;
  height: 1em;
  margin: 0 0.5em;
}

В этот раз бары содержит элемент span.index поэтому задаем для него position: relative и float:left, а ширину, равную ширине будущих баров 2px.

Примечание: Ширину баров автор почему-то указывает в px, мне кажется, стоит как и везде использовать em, масштабируемость спарклайнам не повредит.

.sparkline .index {
  position: relative;
  float: left;
  width: 2px;
  height: 1em;
}

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

.sparkline .index .count {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #AAA;
  overflow: hidden;
  text-indent: -9999px;
}

В окончательном варианте спарклайна я добавил немного отступов к списку содержащему график.

Не стоит недооценивать возможности этой техники

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

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

Translated with the permission of A List Apart Magazine and the author[s].

Комментарии

Оригинал на английском: Accessible Data Visualization with Web Standards

Элементы веб-типографики

Stuart Brown — Tue, 25 Mar 2008 16:23:44 +0000

Элементы веб-типографики

Автор: Stuart Brown

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

Совет 1: Не ограничивайте себя в выборе размера шрифта

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

Относительные размеры шрифтов позволяют пользователю адаптировать их размер в соответствии со своими потребностями, поэтому не забывайте проверить как выглядит сайт при различных размерах шрифта. «Em» называется так потому, что 1em равен ширине строчной буквы «m» (equal m), при установках по умолчанию 1em равен 12pt.

Размер не ограничен целыми числами, к примеру, 0.8em отлично подходит для основного текста, и обычно будет равно 10pt. CSS позволяет использовать шрифты любого размера, который требует дизайн, а не ограничиваться 24pt.

Совет 2: Работайте с межбуквенным расстоянием

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

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

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

Совет 3: Высота строк и расстояние между словами

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

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

Варьируя расстояние между словами и высоту строк можно точно контролировать плотность текста на странице. Обычно я указываю высоту строки в процентах, 120-140% будет достаточно в большинстве случаев. Читабельность длинных текстов можно улучшить немного увеличив высоту строки (но не более 200%). Малая высота строки (100% и меньше) помогает избавиться от больших разрывов между строками крупных заголовков.

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

Совет 4: Попробуйте использовать старого фаворита по новому

Я уже упоминал о том, что Times New Roman используется только на 5 из 100 лучших блогов. Когда-то он доминировал в веб, будучи основным шрифтом для большинства браузеров, возможно, именно это сделало его слишком скучным, но если подойти к его использованию творчески и инновационно, Times может быть очень эффектным.

Даже шрифты которые потеряли популярность из-за того, что когда-то были слишком распространенными, к примеру, Times New Roman, могут быть успешно использованы если подойти к этому творчески.

Попробуйте нестандартные размеры и плотность текста (или все прописные) и Times будет выглядеть интересно и свежо.

Совет 5: Не бойтесь экспериментировать

Крупные шрифты, плотный текст, разреженный текст, цвет, использование first-letter и first-line могут выделить ваши тексты, среди скучной и типичной веб-типографики. Эспериментируйте и пробуйте новое не только ради читабельности, но и ради создания своего запоминающегося стиля.

Обзор №4, Февраль 2008

Евгений — Mon, 17 Mar 2008 00:59:45 +0000

Обзор №4, Февраль 2008

Автор: Евгений

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

Веб-дизайн и юзабилити

Юзабилити Бюллетень
Анонсы событий, обзоры интересных публикаций, обзоры книг, статьи, интервью с интересными людьми. Всем интересующимся юзабилити подписаться строго рекомендуется.
10 принципов эффективного веб-дизайна
Юзабилити и практичность, а не визуальный дизайн, определяют успех или провал любого сайта. Статья посвящена главным принципам, эвристическим методам и подходам при создании эффективного веб-дизайна, приводящим к правильным дизайнерским решениям и упрощающим восприятие предлагаемой информации.
Обзор приемов проектирования. Достаточный интерфейс против всеохватывающего
Давно известна польза от меньшего количества кликов в интерфейсе. Хотите получить хороший интерфейс понятный большинству пользователей, упрощайте, упрощайте, упрощайте.
О мелочах в интерфейсе
Очевидно, что при разработке интерфейса (если таковая вообще выделяется в отдельный этап), за всем не уследишь, более того, всегда есть приоритеты; в первую очередь прорабатываются ключевые функции, затем второстепенные, а потом все шлифуется до воображаемого блеска. Как правило, сроки проекта поджимают уже на стадии реализации ключевого функционала, и шлифовка откладывается до второй версии, а потом и до третьей. Мелочи в данном случае – это тот блеск, который появляется при шлифовке, – блеск «настоящих» елочных игрушек, которые «радуют». А зачастую это и крючок для того, чтобы игрушку можно было повесить на елку, избавляющий от поисков канцелярской скрепки в предновогодней суете.

Типографика

Близорукий дальтоник следит за тобой
Несмотря на то что у меня нормально зрение, бывает попадаются сайты которые заставляют усомниться в этом, что уж и говорить о людях у которых есть проблемы со зрением. Надеюсь эта статья заставить задуматься хоть некоторых дизайнеров о размерах и цвете шрифтов которые они используют.
Чёрточки: только ли тире, минус и дефис?
На клавиатуре одна чёрточка, она обычно правее нуля и повыше букв «З» и «Х». Неосведомлённые люди называют её попеременно то дефисом, то минусом, то тире. Лебедев объясняет нам, что это четыре (учитывая две разновидности тире) различных символа. На самом деле их как минимум девять.
Контрасты в веб-типографике
Большинство пользователей интернета не читают строчку за строчкой, а «сканируют» текст, перемещаясь от одной точки к другой. Это заставляет дизайнеров искать способы привлечь внимание к важным элементам. Основной инструмент которым они пользуются в этих целях — это контраст. С помощью контрастов, вы можете направить внимание читателя на важные сообщения и в тоже время повысить привлекательность внешнего вида страницы.

Кодинг

Разгони свой сайт
Отличный сервис, определяет скорость загрузки сайта и дает рекомендации по ее увеличению. Отдельным плюсом идет большая подборка статей по ускорению всего, что только можно ускорить и внушительный список различных способов ускорить веб-приложение.
Таблица
Таблицами можно не только верстать, но и делать собственно таблички, иногда весьма привлекательные.
Асинхронная загрузка файлов
Загрузить на сервер файл с помощью AJAX нельзя. Тем не менее, можно организовать процесс загрузки так, что с точки зрения посетителя загрузка будет выглядеть асинхронной.
Оптимизация работы с MySQL
Ни для кого не секрет, что именно работа с БД чаще всего является узким местом веб-приложений. Основными источниками проблем при работе с БД являются: неиспользование или неправильное использование индексов, неправильная структура, неправильные или не оптимальные SQL запросы, автора данной статьи, уделяет внимание каждому из этих пунктов, жаль только, что очень кратко.
Прикрепляем футер к нижней границе браузера
Прибитый к низу страницы футер, вторая по популярности тема в контексте CSS после выпадающего меню. После этой реализации обсуждать уже нечего.
CSS-менеджмент: файлы
Ваши CSS-файлы беспорядочны и нечитаемы, а код пестрит множеством страшных хаков? Надеюсь, что нет, но всё же: перед вами некоторые советы по организации CSS, которые прозвучали на конференции РИТ-2007 в докладе «CSS-менеджмент».

SEO

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

Копирайтинг

Дорогой читатель, сейчас; я все скажу
Многим из нас необходимо писать статьи, для того чтобы сообщать информацию сразу многим людям (сотрудникам, ученикам, соратникам, друзьям). К сожалению, наше техническое образование слабо помогает в этой области. Замечательная статья Эмбер Симмонс, посвященная созданию хороших взаимоотношений между писателем и читателем, позволить вам хоть немного исправить положение.
Немного самых нужных правил…, или О том, как я чужие тексты правил…
Как то раз, мне пришлось столкнуться с тем, что копирайтер не желал нормально расставлять заголовки, аргументируя это тем, что он работает над текстом, а не над форматированием. Тогда я был абсолютно уверен, что заголовки это работа автора текста, потому что никто кроме него точно не знает, где какой уровень ставить (хотя в случае небольшой статьи для веб догадаться легко, но это не оправдание). И вот сейчас, в поисках литературы по типографике набрел на статейку, первый же совет касается этих злополучных заголовков.

Блоггинг

Для начала результаты опроса на Хабре «Какие RSS вы предпочитаете: полные или краткие?». Признаться я хотел полностью отказаться от краткой ленты, и ожидал большего количества голосов в пользу полных RSS, ожидания не оправдались и краткая лента остается.
7 эффективных приемов использования цепляющих внимание изображений
В Сети огромное количество интересных нишевых ресурсов и каждый веб-мастер хочет, чтобы его ресурс был популярнее ресурсов конкурентов. Есть множество способов выделиться из общей массы. Один из них, причем очень действенной — это использование цепляющих внимание изображений.
7 проблем непрофессиональных блоггеров
Материал для тех, кто ведёт блог и не видит типичных косяков в своей работе. Как оказалось мне свойственны почти все упомянутые в статье ошибки.
Что такое «Хороший Контент»? Рабочие определения и некоторые основные принципы
Каждый успешный блоггер рекомендует читателям одно и то же: писать качественные посты и изучать, как работает рынок. Но суть проблемы - не в создании, а в самом понимании «хорошего материала»: что это такое? И если это так важно, как это создавать?
10 вещей, о которых не должен забывать блоггер
В принципе, базовые вещи, но напомнить о них не лишне.
Готовимся к WordPress 2.5!
Ждем WordPress 2.5, а пока ждем, проверяем на совместимость плагины и темы.
Не работающий nofollow и как бороться со спам-линками в WordPress
Борьба со спамом или превращаем спамера в постоянного комментатора
3 полезных WordPress-плагина для борьбы со SMO-спамом
Про спам в блогах и его эволюцию
На смену ботам постоянно норовящим подсунуть в комментарии что нибудь про виагру, пришло новое поколении куда более опасных спамеров, биоботы. Биоботы не жалуют виагру, зато склонны к рекламе строительных материалов и пластиковых окон. Поскольку хорошие биоботы практически неотличимы от человека, автоматически отфильтровать их проблематично (хотя нет ничего невозможного). При ближайшем рассмотрении обнаружилось, что спама у меня выше крыши, впредь буду подходить к комментариям строже, но постараюсь, чтобы никто из настоящих комментаторов не пострадал.

Комментарии

Design For Masters

Служба сравнения в Google Analytics

Служба сравнения в Google Analytics

Автор: Евгений

Обзор №5, Март — Апрель 2008

Обзор №5, Март — Апрель 2008

Автор: Евгений

Дизайн

Кодинг

Типографика

Блоггинг

Clear для плавающих блоков

Clear для плавающих блоков

Автор: Peter-Paul Koch

Проблема

Традиционное решение

Новое решение

Сложности

Необходимость width или height

Explorer Mac: hidden

Нежелательные скроллбары

Окончательное решение

Еще более красивое решение

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

Визуализация данных посредством HTML и CSS

Визуализация данных посредством HTML и CSS

Автор: Wilson Miner

Горизонтальная гистограмма

Замечание о данных

Последний штрих

Гистограмма

Спарклайн

Не стоит недооценивать возможности этой техники

Элементы веб-типографики

Элементы веб-типографики

Автор: Stuart Brown

Совет 1: Не ограничивайте себя в выборе размера шрифта

Совет 2: Работайте с межбуквенным расстоянием

Совет 3: Высота строк и расстояние между словами

Совет 4: Попробуйте использовать старого фаворита по новому

Совет 5: Не бойтесь экспериментировать

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

Обзор №4, Февраль 2008

Обзор №4, Февраль 2008

Автор: Евгений

Веб-дизайн и юзабилити

Типографика

Кодинг

SEO

Копирайтинг

Блоггинг

Необходимость `width` или `height`

Explorer Mac: `hidden`