Lecaw

Учимся создавать Web-сайты

Совет: Не забывайте про стиль текста атрибута ALT

June 28, 2013
CSS
179hits

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

 

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

<img src="/images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />

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

Очевидно что текст атрибута ALT непривлекателен — особенно ссылки. Мы можем изменить его, чтобы он выглядел более симпатично, например как на сайте - услуги коллцентра.

Мы собираемся немного увеличить размер основного заголовка и поменяем его на темно-синий вместо черного. Для этого добавим стили к родительскому элементу (в нашем случае это ячейка таблицы). Эти стили затем будут применены и к атрибуту alt этой ячейки.

<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
 <img src="/images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
</td>

Также добавим некоторые стили для текста:

<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0; color: #153643; font-size: 28px; font-weight: bold; font-family: Arial, sans-serif;">
 <img src="/images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
</td>

И стили для ссылок, сделаем их белыми:

<table border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
   <a href="#" style="color: #ffffff;">
    <img src="/images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" />
   </a>
  </td>
  <td style="font-size: 0; line-height: 0;" width="20"> </td>
  <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
   <a href="#" style="color: #ffffff;">
    <img src="/images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
   </a>
  </td>
 </tr>
</table>

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

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

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