Статьи

@media 2007 Лондон — день 1

Я здесь на конференции @media в Лондоне — я надеялся вести блог во время конференции, но нехватка Wi-Fi на месте (моя единственная реальная жалоба на конференцию) и плохое подключение к интернету в отеле оплачивали!

В первый день было несколько презентаций, которые показались мне особенно интересными:

Nate Koechley — высокопроизводительные веб-сайты
Нейт рассказал о работе, которую они проделали в Yahoo! чтобы повысить производительность веб-сайта, завершив его списком из десятка простых и простых правил, которые, если их соблюдать, приведут к увеличению средней скорости на 20-50%.

  • Делайте меньше HTTP-запросов — это самое важное правило, используйте CSS-спрайты, комбинируйте скрипты и таблицы стилей
  • Используйте CDN (сеть распространения контента, например, Akamai). Раздайте свой статический контент в первую очередь.
  • Добавьте заголовок expires для всех ваших файлов, а не только для изображений
  • Gzip все компоненты, а не только HTML. Действительно сокращает время загрузки пользователей. 90% браузеров поддерживают сжатие. Gzip сжимает больше и лучше поддерживается, чем выкачивает
  • Поместите CSS вверху документа в ГОЛОВУ. Используйте ссылку, а не @import, для более быстрого восприятия времени загрузки (не фактического времени загрузки)
  • Переместите сценарии вниз — сценарии блокируют рендеринг всего, что находится под ними в файле, до тех пор, пока браузер не загрузит сценарий
  • Избегайте CSS-выражений
  • Сделайте JS и CSS внешними
  • Сократите поиск DNS — блокирует параллельную загрузку. Практика ставок состоит в том, чтобы использовать 2-4 хоста и использовать keep-alive
  • Сократите JavaScript как внешний, так и внутренний. Используйте минимизировать, а не запутывать
  • Избегайте перенаправлений
  • Отключить ETags

После этих шагов на Yahoo! Страница поиска улучшила производительность на 40-50%. Вы можете следить за их работой на YUIblog.

Марк Боултон — Пять простых шагов к лучшей типографии
Один из многих ораторов, использующих боевые искусства во время своих презентаций, Марк сравнил хороший типографский дизайн со стилем боевых искусств Брюса Ли. Отметьте пять простых шагов для улучшения вашей типографии в Интернете.

1. Быть подходящим и адаптируемым

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

2. Используйте Ритм
Используйте вертикальный ритм (статья 24ways от Rich Rutter — хороший справочник для этого)
Удалить настройки браузера по умолчанию
Используйте добавочное ведение на sidenotes

3. Баланс и контраст
Использование «Оптического серого» (прищурив глаза для размытия текста или использования фильтра размытия может помочь в этом) может помочь вам определить, насколько хорош ваш баланс — вы должны стремиться к среднему весу и минимизировать темный оптический серый. Вы можете сделать свой текст светлее, используя разные, более открытые шрифты, а также увеличивая начальные и высшие строки
Используйте шрифты без засечек и с засечками для обеспечения контраста.

4. Используйте правильные инструменты для правильной работы.
Дефисы не тире! Используйте em или en dashes.

5. Используйте систему
Используйте сетку. Основывайте размер вашего устройства (базовый показатель для сетки) исходя из размера шрифта. Выровняйте все по сетке.

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

Вот и все для первого дня!