Особенности создания сайтов: мелочи имеют значение!

Эрин Киссане

Перевод с англ.: Мисник Е.Н., Таникс Групп — студия веб дизайна

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

Если вы уделяли внимание оформлению текстов, то наверняка уже знаете, что для этого нужен хорошо подобранный шрифт и важен CSS. Кроме этого, есть ещё один аспект текстового оформления сайтов, который, как правило, почти всегда игнорируется — правильное оформление пунктуации. Правильное не только грамматически (что, безусловно, должно быть в первую очередь), но и графически верное.

Заставить читателя читать

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

Полезные подсказки

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

«Загнутые» кавычки загнуты для того, чтобы сразу было понятно, читаете ли вы начало или конец фразы, а также отчасти потому, что они незаметно подсказывают глазу:

“Пропускайте ненужные слова”
«Пропускайте ненужные слова»

Правильное (длинное) тире также позволяет глазу беспрепятственно скользить от одной части предложения к другой, без визуального «трамплина», создаваемого неуклюжим двойным дефисом.

Примитивная пунктуация выглядит небрежно и непрофессионально -- так почему бы не выглядеть стильно?
Примитивная пунктуация выглядит небрежно и непрофессионально — так почему бы не выглядеть стильно?

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

Вопрос стиля

Кэрри Грант, самый стильный из Британских джентльменов, предупреждал: «Одно положительное впечатление создают пять сотен мелких деталей».

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

Пора взрослеть!

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

Чьих рук эта работа?

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

Статья опубликована: 27.03.2007

Последнее обновление: 27.03.2007

Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.

Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
Потренироваться в написании комментариев вы можете в песочнице.

Комментарии к статье

sus

28.03.2007

В примере про длинное тире наверно должно быть длинное тире... Или как ?

DELirium

28.03.2007

Там и есть длинное тире... Просто шрифт маленький.

Vedmak

02.04.2007

Зачем загнуты кавычки - это хорошо. Только совсем не сказано какая между ними разница.

В русском языке традиционно применяются французские <?лочки>, а для <кавычек "внутри" кавычек> и при письме от руки - немецкие "лапки".

http://ru.wikipedia.org/wiki/Кавычки

smiling_red

19.04.2007

Спасибо!
но хотелось бы побольше примеров, кроме тире и кавычек.

Николай Титков

23.04.2007

http://www.artlebedev.ru/kovodstvo/104/
http://www.artlebedev.ru/kovodstvo/62/

Юрий

23.04.2007

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

delfin

26.04.2007

Вопрос:
- мало кто задумывается?
Ответ:
- ya.ru -> типографика -> поиск
- или тоже в google
- ya.ru -> далее логотип Лебедева -> ководство
-- или сразу ->http://www.artlebedev.ru/kovodstvo/

Александр

26.04.2007

delfin, и что? ) лебедев задумывается, это что его много?

Bender

27.04.2007

Лебедев на типографике деньги делает. Надо же ему как-то обосновывать свои непомерные тарифы.

Анна

02.05.2007

Я бы предложила прочитать статью как раз на эту тему - http://groups.google.com/group/text_creating/web/тестовая%20страница?hl=en.
Не обращайте внимания на URL, это тестовая публикация, в которой сохранились описания основных типографских правил, которые были бы многим интересны.
Эта статья изначально было рецензией на книгу, но потом стала попыткой объяснить читателям, что текст на сайте имеет важное значение. Примеры многих сайтов оставляют эту тему актуальной.

Alex

04.05.2007

—А как жиш поместить тире в тексте?
—Дык, вот как:
http://xpoint.ru/forums/internet/html_css/markup/faq.xhtml#121

Просто лось

04.06.2007

Удерживай клавишу <ALT> и набирай на калькуляторной части клавиатуры 0151

Cool

29.07.2007

Офигенный сайт!!!!!

ARA

01.08.2007

Cool, а ты сомневался, нука бегом регистрироваться!!!

Регина Шайбакова

17.09.2007

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

Я заинтересовалась темой оформления текстов для web, когда посмотрела сайты http://www.csszengarden.com. Разные дизайнеры по-своему оформляют один и тот же текст - просто заглядение.

Ссылки на некоторые страницы есть у меня - www.shaybakova.com/articles/csszengarden.php. Вот на образцах, представленных на
http://www.csszengarden.com, и нужно учиться, по-моему мнению.

16.02.2008

Alex, Просто лось, какие-то сложные вы способы предлагаете.
Shift+Option+'-' ??вот и длинное тире.
Shift+Option+'+', Option+'+' ??вот и ?кавычки? нормальные.
А вообще стоит хотя бы просто пробежаться по клавиатуре при нажатой Option или Shift+Option ??там много интересных и правильных символов.

Евгений

08.05.2008

Ой как гламурно! Это проблема n+1 порядка. Хорошо, если эти мелочи есть, безусловно. А сколько стоит? хотелось бы статистику. Например - был сайт. Наняли человека - он вычистил весь контент за месяц. Получил 5000уе. Посещаемость увеличилась на 5 человек. Время нахождения на сайте - на 5 sec. Я сталкиваюсь с тем, что информация на сайтах не актуальна и это самое плохое, потому, что все остальное уже никакого значения не играет.

Михаил Червоненко

19.05.2008

Авторам статьи следовало упомянуть что применение нестандартной пунктуации может отрицательно сказаться на позиции сайта в поисковиках. Люди которые ищут информацию в строке поиска не будут набирать html спецсимволы, просто напишут обычные кавычки или тире. Потому подходящий текст - где стоят спецсимволы, возможно, будет иметь меньший рейтинг, в результатах поискового запроса, нежели аналогичный текст с простыми символами.

неизвестная

23.05.2008

ну, а почему нет примаров как у остальных. это плохо

NeoN

25.05.2008

Михаил Червоненко Насколько я знаю, знаки пунктуации поисковиками не учитываются!

07.06.2008

?вообще-то, вроде, вот ?такие лапки внутри? кавычек?

07.06.2008

Мдя, проблемы со спецсимволами.
Или это только у меня вопросительныезнаки вместо них?

Жека

08.06.2008

Так-же вопросительные знаки.. =\

Ank

24.06.2008

Спасибо за полезный сайт как для начинающего (то есть меня). Много полезного по тегам, до скриптов пока не дошел.
<b>Ш</b> А как бы то, что писались клавиатурные сокращения для Виндовса ? не важно? При чем тут ваш макинтош со своим Опшин? Все правильно написано:
Альт+0151 ? длинное тире(типографское);
Альт+0150 ? обычное тире;
Альт+0171 ? кавычки ("елочка" в типографском жаргоне);
Альт+0187 ? соответственно закрывающие кавычки.
Советую всем почитать основы полиграфической верстки, в частности устоявшиеся уже на протяжении веков правила и нормы. С учетом, конечно, нашей, кириличной. Потому как в британских традициях, например, употребление ?? и "" ? от нашего отличаются. И это для них очень принципиально. Как и для нас наше, впрочем.
Спасибо за полезный сайт еще раз.

Ank

24.06.2008

Вот ведь... нормально знаки пунктуации не отображаются... Неужто это сервер такое делает?

DeadMan

24.07.2008

NeoN, ты не прав! Попробуй поставь "-" вместо — или – в анкоре и увидишь.

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

kurijov

05.08.2008

Пойди албанцам это расскажи.