Правила, которые мы используем для создания страницы с контактной информации на сайтах.

Правила написания адреса

Правила в Ководстве Лебедева — http://www.artlebedev.ru/kovodstvo/sections/163/

Разберём на примерах:

Индекс работает не по миру, а по России, поэтому сначала индекс, потом страна.

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

Станцию метро выделяем цветом линии:
Ближайшие станции метро — Шоссе Энтузиастов и Семёновская.

Желательно написать запрос, по которому вас точно найдёт Яндекс-навигатор. Это быстрее, чем вбивать сложный адрес с корпусом или строением.

Правила написания телефона

Краткая история телефонных номеров — http://www.artlebedev.ru/kovodstvo/sections/91/

Пример:
Телефон: +7 495 123-45-67

Если номер один и обычный, то и так понятно, что это телефон. Можно не писать слово телефон:
+ 7 495 123-45-67

Если номеров несколько, то нужно указать какой для чего:
Приём заказов: +7 495 123-45-67
Мобильный директора: +7 926 123-45-67

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

Правила написания адреса электронной почты

Если ящиков несколько — пишите по какому поводу писать на каждый. Пример:
Сервис: service@alukin.ru
Кузовной цех: kuzov@alukin.ru

Сокращенно: Эл. почта, емейл или email.

Адреса должны быть кликабельными. О спаме должны думать спам-фильтры. На клик по адресу эл. почты нужно вешать цель в метриках.

Режим работы

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

Вёрстка

Используйте микроформаты для контактной информации.

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

Самые тяжёлые элементы на сайте — картинки. Перед публикацией их нужно подготавливать:

1. Уменьшайте картинку до размера, в котором она будет использоваться на сайте.
2. Используйте функцию «Сохранить для веб» в редакторах Фотошоп или Пиксельматор.
3. Правильно выбирайте формат сохранения. Фотографии — это jpeg, картинки с небольшим количеством цветов и графики, однотонные или прозрачные  — gif, полупрозрачные — png.
4. Максимальное качество в формате jpg не нужно. Я использую параметр от 60 до 80 и выбираю наиболее оптимальный на глаз. Для формата gif уменьшаю количество используемых цветов и оставляю минимальное без потери качества.
5. После сохранения в фоторедакторе уменьшайте вес файла с помощью бесплатной программы ImageOptim. Поддерживается пакетный режим, программа очень простая и удобная.
6. Используйте строчные буквы в названии и разрешении файлов. Qwert.JPG и qwert.jpg — это два разных файла, из-за чего картинка не будет грузиться.
7. При вёрстке задавайте атрибуты alt=Название картинки width=600 height=320.
8. Прописывайте разные атрибуты alt для картинок.
9. Для каждой картинки давайте нормальное название. И поисковой системе, и вам в исходном коде страницы будет понятно, что изображено на картинке по её названию. Бессмысленный набор qw-1-334-qqq.jpg этой информации не даст.

Жертвовать качеством картинки ради скорости нельзя. Но если не видно разницы, зачем грузить больше?

50 Кб	12 Кб

Дизайнерам и технологам стоит освежить в памяти Ководство про картинки

1. http://www.artlebedev.ru/kovodstvo/sections/101/ — перспектива и вертикальные линии
2. http://www.artlebedev.ru/kovodstvo/sections/134/ — способ определения предела масштабирования
3. http://www.artlebedev.ru/kovodstvo/sections/169/ — подписи на фотографиях

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