01.06.2012

О проблеме «прозрачности» контента для пользователя, скрывающегося под ссылкой, говорят много и разного. Хочу поделиться довольно простым решением проблемы, которое сделает Ваш сайт немного удобнее.

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

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

Активные ссылки всегда должны быть синего цвета (как исключение — черные или темно-серые). Посещенные ссылки должны быть сиреневого цвета. Ссылки других цветов гарантированно сбивают с толка читателя.

Хорошо и правильно подсвечивать ссылку красным или оранжевым при подведении к ней курсора. Как вариант — подсвечивать фон или рамку вокруг.

цитата из § 171. Правила оформления ссылок, Ководство

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

Абзац текста, в котором по каким-то причинам автору понадобилось присутствие ссылки на файл pdf-формата, ссылки на zip-архив и ссылки на файл в doc-формате.

<p>Абзац текста, в котором по каким-то причинам автору понадобилось присутствие <i class="fa fa-file-pdf-o"></i> <a href="file.pdf">ссылки</a> на файл pdf-формата, <i class="fa fa-file-archive-o"></i> <a href="file.zip">ссылки</a> на zip-архив и <i class="fa fa-file-word-o"></i> <a href="file.doc">ссылки</a> на файл в doc-формате.</p>

Теперь, чтобы не пришлось проставлять <i class="icon-file …"></i> в ручную перед каждой ссылкой на файл и тратить нервы умоляя контент-менеджеров сайта не забывать делать тоже самое, создадим простенький скрипт, используя jQuery, прекрасно справляющийся с этим автоматически.

$(document).ready(
    function() {
        $('#content a').each(
            function() {
                if(/.*\.pdf/.test($(this).attr('href'))) {
                    $(this).before('<i class="icon-file pdf"></i> ');
                }
                if(/.*\.zip/.test($(this).attr('href'))) {
                    $(this).before('<i class="icon-file zip"></i> ');
                }
                if(/.*\.rtf/.test($(this).attr('href'))) {
                    $(this).before('<i class="icon-file rtf"></i> ');
                }
            }
        );
    }
);

Не забываем создать css-свойства для каждого типа иконки, например вот так:

.icon-file {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
}

.icon-file.pdf {
    background: url(images/pdf.png);
}

.icon-file.zip {
    background: url(images/zip.png);
}

.icon-file.rtf {
    background: url(images/rtf.png);
}

Далее css-свойства и скрипт запихиваем в отдельные файлы и подключаем их вместе с jQuery в <head>…</head>.

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="/path/style.css" />
        <script type="text/javascript" src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="/path/script.js"></script>
    </head>
    <body>
        <div id="content">
            …
        </div>
    </body>
</html>

Напоследок поделюсь архивом (Яндекс.Диск) с заготовками и несколькими примерами иконок.