Outlook 2007 <> CSS

Если вы ненавидите Microsoft за то, что они сделали IE… ха, вы ещё не верстали HTML-письма для Outlook 2007.

В этой чудо-программе HTML рендерит не кто иной, как Microsoft Word.

CSS support in email clients

Профессионалам и не только

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

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

Результаты голосования — «Как писать классы и идентификаторы из 2-ух и более слов»

В итоге недельного голосования победило тире «-». Этот символ становиться негласный стандартом, при разделении сложных имён классов и идентификаторов.

Сейчас стартовало 4 опроса, целью которых — выбрать наиболее предпочитаемые имена директорий для стилей, картинок, скриптов. Они выводятся в случайном порядке, в правой колонке.

Имена для фоновых изображений, каталоги

Во время создания макета через наши «фотошопы» проходит множество картинок, фоновых и не очень.

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

body.jpg(картинка для body), header.gif(#header), logo.gif(#logo), catalog-item.gif(.catalog-item)

Картинки складываю в директорию i, JavaScript лежит в директории js, рыбные картинки в temp_images, стили в папке css.

Вот и все премудрости. А, как у вас?

Этот пост затевался для того, чтобы определиться с этими 2-мя премудростями:

  1. Какие имена лучше всего давать фоновым картинкам?
  2. Какие имена для папок с ресурсами?

Стандарты именования html-layout

Хочется поднять с глубин обсуждений такую тему, как стандартизация именования элементов в html-вёрстке.

Потому-что:

  • чтобы было понятно не только автору, но, и всем, кто продолжит работу с сайтом после…
  • для облегчения самого процесса работы
  • css-файлы станут намного понятнее и проще
  • ещё много плюсов…

Все следующие публикации связанные с этой темой будут построены по простому принципу:

  1. Пишется пост с темой обсуждения, предлагается несколько вариантов для принятия его в стандарт
  2. В комментариях любой жалающий может их оспорить, предложить свой вариант и т.д.
  3. Через неделю открывается голосовалка, с наиболее приёмленными вариантами стандарта
  4. Ещё через неделю, вариант решения, собравший наиболее количество голосов, уходит в стандарт

Обсудждать можем начать с того, как писать классы и идентификаторы из 2-ух и более слов:

  1. через – (header-logo)
  2. через _ (header_logo)
  3. через Большие буквы (headerLogo)

xhtml грамотность

Некоторые люди, почему то очень недовольны написанием валидного, семантического кода.

В чём сложности? Уважаемые, если у вас это не получается, это не значит, что это плохо и не приносит никому пользы. Другие, например, по другому кодить не умеют, кроме как divно, разучились.

Неужели так сложно, написать xhtml грамотно? Никто кажется не спорит, что грамматика русского языка никому не нужна и приносит только сложности.

Цена вёрстки

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

Растёт резолюция(сейчас уже 800×600 уходит в прошлое, притопало 1024×768), растёт количество элементов на сайте, которых можно напхать, растёт количество кода, картинок…

Кто-то хочет со мной поспорить? :)

microsoft обновляет свою главную страничку

Главная страничка компании Microsoft попыталась перейти на валидную и семантическую вёрстку. Получилось лишь первое.

На сайте присуствуют таблицы, в качестве скелета разметки. Что, не мешает этому сайту быть добавленным на cssvault.com.

Философия в картинках

Моя философия(скорее не только моя), относительно тэга ‹img› заключается вот в чём:

«Картинки на сайте должны быть только там, где они есть на самом деле.»

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

Многим это с непривычки это кажется невозможным… отнюдь.

Я вспоминаю те времена, когда на одном сайте, который я «резал» у меня получилось 182 картинки. Триумф «табличной вёрстки». Только представте себе, 182 тэга ‹img› в коде, которых там быть не должно!

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

Когда в коде встречается 5-10 идущих подряд дивов, есть о чём задуматься. Теряется эстетика кода, логика, семантика. Иногда, приходится делать маленькие исключения. И мечтать о скорейшей поддержке CSS 3.

Валидный flash

По наводке Alex’а Mauzon’а наткнулся на симпатичные вставки flash, и главное — валидные, ничего лишнего.

Смотрите:

<object type="application/x-shockwave-flash" data="flash.swf" height="100" width="300">
<!--[if IE]><param name="movie" value="flash.swf"><![endif]-->
Test
</object>