Правила верстки основные ошибки - Не ошибается лишь тот, кто ничего не делает!

Время на прочтение
11 мин

Количество просмотров 75K

Вступление

Меня зовут Николай и я Frontend-разработчик в логистическом стартапе Relog. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.

Дело в том, что лишь малая часть современных фронтендеров обращает внимание на работу с HTML и CSS, предпочитая готовые решения, вроде UI-библиотек и систем сеток. Но эти решения неидеальные и приходится дописывать обёртки вокруг них, видоизменять код, переписывать стили и совершать прочие действия для соответствия требованиям проекта. Тут-то и начинаются проблемы: вёрстка местами становится избыточной, стили переназначются через important и с каждым релизом проект всё сложней поддерживать. Я уже не говорю об удобстве использования и доступности. Об этом думают вообще в последнюю очередь.

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

Содержание

Используйте правильные теги.

Как правильно вкладывать теги друг в друга.

Работа с медиаконтентом.

Пишем таблицы на HTML правильно.

a или button? Работа с интерактивными элементами и как выбрать правильный тег.

Различный теги для медиа-контента.

Прекратите писать велосипеды! Как мы можем стилизовать дефолтные HTML-элементы.

Пишем доступные формы.

Избыточная вёрстка. Как облегчить разметку.

Современные фишки HTML и CSS способные облегчить нам жизнь.

Экспериментальные технологии, входящие в стандарт.

Используйте правильные теги

Исторически так сложилось, что HTML служит для описания документов. То есть язык гипертекстовой разметки был придуман для обмена документами (в основном научного характера) и не предназначался для построения сложных веб-приложений и сайтов. Благодаря развитию стандарта стало полегче, но большинство современных разработчиков всё ещё предпочитают <div> в качестве главного тега и засовывают в него любой контент, вплоть до изображений (через background-image). И я прекрасно их понимаю, <div> — очень удобный тег: у него нет встроенных стилей, его можно вкладывать в другие дивы. Чем не кандидат на лучший тег. Но при таком использовании тегов мы теряем главные преимущества HTML:

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

Про какие теги нам следует стоит помнить?

Структурные теги документа

Почти любой сайт или приложение можно разбить на 3 большие части: <header>, <main> и <footer>. Сейчас это стало неким стандартом в дизайне. Некоторые части приложения повторяются от страницы к странице, и мы можем выделить их в отдельные части (шапку и подвал).

Шапка — это контент вверху страницы. Там обычно размещается логотип, навигационное меню и другие элементы, которые должны быть доступны пользователю с любой страницы. Тег <header> не обязательно один на странице, он может озаглавливать любую независимую часть (например, быть частью модального окна).

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

Тег <main> обычно обозначает место для основного контента, который не повторяется от страницы к странице.

Плохо

<body>
	<div class="header">
		...
	</div>
	<div class="main">
		...
	</div>
	<div class="footer">
		...
	</div>
</body>

Хорошо

<body>
	<header>
		...
	</header>
	<main>
		...
	</main>
	<footer>
		...
	</footer>
</body>

Помимо трёх базовых семантических тегов существует ряд других. Разберём их ниже.

<article>

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

<section>

Неотделяемая от основного контента секция на странице. Например, это может быть блок на лендинге. Чаще всего имеет заголовок.

<aside>

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

<nav>

Блок навигации с ссылками на другие страницы или разделы текущей страницы. Может использоваться только для основной навигации, а не для каждой группы ссылок. Например навигацию в <footer> не имеет смысла упаковывать в <nav>, так как подвал сам по себе предполагает присутствие навигационных элементов. И этот тег не обязательно должен включать в себя список ссылок. Туда может входить навигация любого типа, главное, чтобы она считалась основной.

<address>

В этот тег нужно вкладывать контактные данные. У него по-особенному работает «область видимости» — контактные данные в <address> относятся к ближайшему родительскому блоку <article>, либо к <body>, если он находится вне <article>.

Заголовки

Как и в любом документе на HTML-странице могут содержаться заголовки. По стандарту мы обязаны всегда указывать заголовок первого уровня <h1>. Остальные уровни опциональны, но они должны быть в иерархической последовательности! Это значит, что мы не можем <h3> поставить после <h1>. Чтобы лучше это понять, посмотрим код ниже:

<body>
	<header>
		...
	</header>
	<main>
		<h1> Наша кондитерская самая кондитерская из всех кондитерских </h1>
		...
		<section>
			<h2> Почему наши булочки лучшие? </h2>
			...
				<h3> Мука высочайшего сорта </h3>
				...
				<h3> Много корицы </h3>
				...
					<h4> Корица со Шри-Ланки</h4>
					...
				<h3> Минимум сахара </h3>
				...
			<h4>
		</section>
	</main>
	<footer>
		...
	</footer>
</body>

Как вы видите, заголовки выстраиваются в иерархию и идут один за одним, формируя логичную структуру.

По поводу использования нескольких заголовков <h1>: вы МОЖЕТЕ использовать несколько заголовков первого уровня, если это требуется на странице. Когда-то давно некоторые злые SEO-специалисты настоятельно не рекомендовали так делать, хотя спецификация ничего не говорит на этот счёт. Сейчас мы, конечно, не узнаем действительно ли поисковики снижали сайт в выдаче за использование двух и более заголовков первого уровня, но уже даже многие SEOшники признали, что этот фактор малозначителен при ранжировании сайтов.

Блочные теги

<p>

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

<figure> и <figcaption>

Это иллюстрация с необязательной подписью. Во многих книгах изображения подписываются как «Рис. 1 — такой-то объект». Вот это и есть <figure>. Но в рамках HTML назначение этого тега гораздо шире. Мы можем разместить внутри цитату (см. ниже), фрагмент кода, какую-нибудь диаграмму. В общем <figure> — это любой объект с подписью. Подпись размещается внутри тега <figcaption>, который, в свою очередь, вкладывается в <figure>.

<figure>
	<img src="https://example.com/cat.jpg" alt="Сердитый кот">
	<figcaption>Кот, который зол на своего хозяина</figcaption>
</figure>

<blockquote>

Тег для вставки длинных цитат. Может иметь аттрибут cite, в котором указывается URL на источник цитаты, а также хорошо совместим с тегом <figure>, где в <figcaption> можно указать автора и название источника.

<figure>
	<blockquoute cite="https://www.youtube.com/watch?v=ZXsQAXx_ao0">
		Just Do It!
	</blockquote>
	<figcaption>
		Shia LaBeouf, <cite>Motivational Speech</cite>
	</figcaption>
</figure>

<hr>

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

<pre>

Тег для вывода предварительно отформатированного текста. Имеет ограниченную область использования — ASCII-арт, вывод программного кода. Не рекомендую использовать для других задач, так как тег довольно ненадёжен и непредсказуем. Например, мы потеряем всё форматирование, если сборщик проекта минифицирует HTML.

Списки

Списки в вебе просто везде! Но очень редко их верстают как списки. Например, преимущества компании на лендинге это что? Правильно, список. Они бывают двух видов: упорядоченные и неупорядоченные. Я в этот раздел также добавил список описаний Description list.

<ul>

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

cписок ингредиентов для рецепта;
преимущества компании;
партнёры компании.

<ul>
	<li>Удобная оплата</li>
	<li>Быстрая доставка</li>
	<li>Гарантия в 1 год</li>
</ul>

<ol>

Упорядоченный список применяется тогда, когда нам важен порядок элементов. Например:

пошаговая инструкция;
этапы работы.

<ol>
	<li>Оформляете заявку</li>
	<li>С вами связывается менеджер для уточнения деталей</li>
	<li>Совершаете оплату</li>
	<li>Ожидаете доставку</li>
</ol>

<dl>, <dd>, <dt>

Списки описаний применяются для формирования списков терминов.

<dl>
	<dt>HTML</dt>
	<dd>Язык разметки гипертекста, с помощью которого формируют контент веб-страницы</dd>

	<dt>CSS</dt>
	<dd>Язык для описания стилей веб-страницы</dd>

	<dt>JS</dt>
	<dd>Язык программирования, часто применяемый для написания веб-приложений</dd>
</dl>

Строчные теги

<b>, <i>, <u>, <s>

Чудесные теги, которые чаще всего используют не по назначению. Они несут исключительно визуальное выделение текста. Если вы сбросите их стили, то они ничем не будут отличаться от обычного текста. В данный момент их можно использовать как теги для дополнительного выделения текста, которое вы оформите с помощью CSS. И да, тег <i> НЕ предназначен для иконок.

<em>

Как и <i> выделяет текст курсивом. Но зачем нам два тега для одного и того же? В том то и дело, что они разные. <i>, как говорилось выше, не несёт никакого семантического смысла, это просто визуальное выделение, а <em> делает акцент на обёрнутом им тексте, который меняет смысл всего предложения. Например:

Я <em>просто обожаю </em>, когда верстальщики используют только дивы.

<strong>

Браузер выделяет текст обёрнутый тегом <strong> полужирным. Но помимо визуального выделения, текст обретает семантический смысл — большую важность по сравнению с остальным текстом вокруг.

<cite> и <q>

Оба тега связаны с цитирований, но применяются в разных случаях. <cite> — тег, в который мы оборачиваем текст, который отсылается к другому документу/произведению/etc.

Больше информации вы сможете найти в стандарте <cite>[ISO-0000]</cite>

<q> похож на <blockquote>, разница лишь в том, что <q> применяется для строчных цитат.

<q cite="https://russian.rt.com/business/news/966657-rubl-dollar-evro">
	Рубль растёт к доллару и евро
</q> — сообщает RT со ссылкой на ФАН.

<code>

Применяется для оформления программного кода внутри текста. Если требуется вывести многострочный блок кода, то лучше использовать <code> в связке с тегом <pre>.

<time>

Тег для обозначения даты и времени. У него может быть атрибут datetime, куда необходимо передать дату и время в формате ISO.

<time datetime="1995-11-24">24 ноября 1995 года</time>

<sub> и <sup>

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

x<sub>1</sub> + x<sub>2</sub> = y<sup>2</sup>
<!-- Икс первый плюс икс второй равно игрек в квадрате -->

<del> и <ins>

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

Вася пришёл домой в
<del><time>19:00</time></del>
<ins><time>23:00</time></ins>

<br>

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

Интерактивные элементы

<details>

Нативный дропдаун прямо в HTML! На самом деле не совсем так. <details> применяется, чтобы скрыть часть информации, которую можно получить, кликнув по кнопке, описанной во внутреннем теге <summary>.

Рубль растет на фоне заявлений Запада о введении санкций против России
<details>
    <summary>Подробнее</summary>
    Согласно данным валютных торгов на Московской бирже, по состоянию
    на 22.40 мск курс доллара находился на уровне 78,7 рубля (-1,6%),
    курс евро снижался до 89,3 рубля (-0,9%).
</details>

Внимание! Данный тег не поддерживается IE и старыми версиями основных браузеров.

Другие интересные теги

<abbr>

Тег для аббревиатур.

<abbr title="HyperText Markup Language">HTML</abbr> — основной язык разметки веб-приложений

<dfn>

Тег для выделения термина. Элемент<p>, пара <dt>/<dd> или <section>, который является ближайшим предком <dfn> считается определением термина.

<p>
	<dfn>JavaScript</dfn> — язык программирования,
	используемый в основных веб-браузерах.
</p>

<kbd>

Используется для выделения названия клавиш в клавиатурных сочетаниях.

Чтобы открыть диспечер задач, нажмите сочетание клавиш
<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Esc</kbd>.

<samp>

Тег для обозначения вывода компьютерной программы. По-умолчанию выводится моноширинным шрифтом.

<p>
Приложение упало с ошибкой:<br>
<samp>404 Неизвестный ресурс</samp>

<var>

Элемент для вывода математических переменных

Для рассчёта расстояния <var>S</var>, необходимо
перемножить скорость <var>V</var> на время <var>t</var>.

<bdi> и <bdo>

Теги, связанные с направлением текста ltr и rtl. Необходимы, когда мы встраиваем в текст, написанный языком в одном направлении, фразу или предложение написанное в другом.

<bdi> изолирует от окружающего текста фрагмент, который может поменять направление (но не обязательно поменяет).

<bdo> в свою очередь, переопределяет направление текста так, что текст внутри тега отображается в другом направлении, нежели чем окружающий.

<p dir="ltr">
	Это <bdi>арабское слово</bdi> будет перевёрнуто.
</p>
<!--
	Это оволс еоксбара будет перевёрнуто.
-->

<mark>

Элемент, выделенный по причине его актуальности в определённом контексте. Чаще всего используется для выделения ключевых фраз, введенных пользователем, в результатах поиска. По умолчанию, на текст внутри этого тега применяется жёлтый фон.

<meter>

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

Имеет следующие аттрибуты:

min — минимальное значение шкалы;
max — максимальное значение шкалы;
low — предел, при достижении которого, значение считается низким;
optimum — предел, при достижении которого, значение считается оптимальным;
high — предел, при достижении которого, значение считается высоким;
value — собственно само значение.

<p>Температура воды</p>
<meter value="0" max="100" low="10" high="60">Низкая</meter>
<meter value="30" max="100" low="10" high="60">Нормальная</meter>
<meter value="80" max="100" low="10" high="60">Горячая</meter>
<meter value="100" max="100">Кипяток</meter>

Текст внутри является фолбэком для браузеров, которые не поддерживают этот тег.

<progress>

Тег для отображения индикатора, показывающего ход выполнения задачи. По простому — прогресс-бар.

<progress max="100" value="70">70%</progress>

<wbr>

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

<ruby>, <rt>, <rp>

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

<big>, <small>, <tt> и прочая эзотерика

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

Заключение части 1

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

Также, я ничего не сказал по <div> и <span>, которые являются базовыми элементами для вёрстки. Их стоит использовать только в том случае, когда ничто из вышеперечисленного не подошло.

Источник

Верстка – процесс весьма кропотливый. Пусть HTML/CSS и не являются языками программирования, освоить CSS – в разы сложнее, чем освоить тот же Python. Причина – в том, что если Питон развивался логично и постепенно, то CSS развивался в условиях непримиримой войны между браузерами, каждый из которых пытался пропихнуть свои стандарты. Добавьте сюда кодировки, изменения HTML от W3C и позднее «накручивание» DOM для высокоуровневых языков – получите ад, бардак и хаос. Из него растут типичные ошибки начинающего верстальщика, не успевшего в этом хаосе сориентироваться – неправильное использование id, использование style, попытка решения проблем через !important, invisible text для отступов и так далее.

1. Неправильные имена классов

2. Описание стилей внутри < style >

3. Символы, не предназначенные для верстки

4. Использование ID для идентификации

5. Очень большие картинки

6. Использование HTML для верстки в целом

7. Неправильное использование заголовков

8. Использование !important

9. Не прописаны альты в < img >

Ниже мы все эти ошибки рассмотрим и расскажем, почему не стоит так делать.

1. Неправильные имена классов

Правильная верстка в CSS организуется через классы – вы указываете классы для элементов, и когда вы меняете что-то в классе, изменения применяются ко всем элементам этого класса. Идея пришла из объектно-ориентированного подхода к программированию, и самое прекрасное, что классы дают – это принцип DRY, Don’t Repeat Yourself, «Не повторяй себя». Если у вас на сайте 50 одинаковых кнопок, без классов вам пришлось бы менять цвет кнопки 50 раз, когда заказчик захочет кислотно-зеленую кнопку «КУПИТЬ» вместо красной. С классами вам нужно поменять всего одно значение.

С классами связано множество ошибок начинающих верстальщиков, но самая распространенная – это бессмысленные (и беспощадные) имена классов: .knopka, .vtoraya-knopka-sleva, .vyrovnyat, .ne-trogat – вы и сами можете придумать/найти множество таких примеров. Конкретно эти плохи по двум причинам:

Ничего не понятно (но очень интересно).
Транслит.

Транслит – это всегда плохо, потому что он вырвиглазный и его невозможно читать. Но если мы подберем адекватные имена на английском (.button, .second-button-on-the-left, .align, .do-not-touch), то хорошо все еще не станет, потому что назначение классов не прояснилось. В основном эта проблема бьет по программистам, которые затем будут писать js-код, но если вы расплодите кучу бессмысленных названий, то вам потом самим будет сложно понять, что вам нужно подправить: .button3, .button12 или .button-on-top-final-red-v2.

Давайте понятные имена: .shopping-cart-buy-button, .header-logo, .search-page-backgr. И по возможности группируйте классы в .css-файле, чтобы их было проще искать.

2. Описание стилей внутри < style >

Забудьте про прописывание стиля в этом тэге. Функция была добавлена еще до появления CSS и оставлена в HTML для обратной совместимости – чтобы очень старые сайты не сломались. Описывать разметку в < style > нельзя, потому что ломаются приоритеты и при отладке сложно найти ошибку – особенно если искать ее будете не вы. Вся верстка должна быть исключительно в .css-файле – этот принцип в программировании называется инкапсуляцией, и за его применение другие верстальщики (которые будут разбираться с вашей разметкой) скажут вам огромное спасибо.

3. Символы, не предназначенные для верстки

Unicode/UTF обладает множеством интересных символов для отображения, сюда входят пиктограммы, смайлики и invisible text. Будьте с ними очень аккуратны – разные шрифты могут по-разному «относиться» к отображению этих символов, некоторые браузеры тоже воспринимают их некорректно. Если прямо совсем хочется их использовать – хотя бы сбросьте стандартную верстку браузера через * {} и протестируйте верстку на нескольких устройствах.

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

4. Использование ID для идентификации

Использование ID для «точечного» задания стиля – это удобно, но делать так тоже не стоит. JS активно взаимодействует с ID и может менять идентификаторы элементов для своих внутренних целей. Если js-код поменяет ID, которому вы прописали стиль – верстка слетит. Лучше напишите пару лишних строчек кода для класса.

5. Очень большие картинки

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

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

6. Использование HTML для верстки в целом

Самая частая проблема – использование /br для верстки, сюда же относится прописывание стиля в < class > и < p > для создания отступов или пустого пространства. HTML – язык разметки, он показывает браузеру, где и какие элементы должны находиться. Как эти элементы выглядят и как делят между собой пространство – вопрос к языку стилей CSS. Вот им вы и должны пользоваться для решения этих проблем. А если у вас половина разметки будет в CSS, а половина в HTML, то при достижении определенного порога сложности проекта вы вдруг обнаружите, что при любом внесенном изменении все ломается.

7. Неправильное использование заголовков

Заголовки показывают и браузеру, и поисковым роботам, где находится основной контент. H1 должен быть в единичном экземпляре, h2 должны быть вложены в h1, h3 должны быть вложены в h2 и так далее.

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

8. Использование !important

!important – вселенское зло. !important переопределяет естественные приоритеты CSS, и это выстрелит вам в ногу, когда вы будете искать ошибку в верстке. Хуже того, поведение нескольких !important при их пересечении не очень хорошо задекларировано, и ошибка может стать плавающей – в одном браузере она есть, в другом его нет. Плавающие ошибки – самое плохое, что может случиться в коде, потому что при наличии такой ошибки бывает проще все снести и переписать заново, чем отлавливать такую ошибку.

Еще один важный момент – если вам нужно использовать более одного !important в разметке, это почти всегда означает, что вы плохо эту самую разметку продумали. Сядьте и задайте себе вопрос: «Почему мне приходится использовать !important здесь?» Ответом на вопрос почти всегда будет плохо продуманная система классов, то есть плохая архитектура. С самых первых шагов в верстке приучайте себя продумывать архитектуру классов и селекторов – это сэкономит вам кучу времени в дальнейшем.

9. Не прописаны альты в < img >

Вам alt в <img> может быть и не нужен, но он очень нужен SEO-специалистам и js-программистам.

Пропишите хотя бы пустой alt.

10. Злоупотребление div

Если вам нужно создать контейнер – используйте div, который для этого и предназначен. Если вам нужно вывести текст – используйте span, который для этого предназначен. Не нужно мудрить и использовать div для текста и span для блоков – когда верстка станет более сложной, будет больше шансов, что что-то сломается. Если вам прямо очень сильно нужно использовать span для блока – пропишите для него display:block.

Правильное ревью верстки

Провести самостоятельное ревью верстки довольно сложно – глаз «замыливается», и вы можете пропустить очевидную ошибку. Есть один инструмент, который может вам помочь – валидатор от W3-консорциума, расположен тут: https://validator.w3.org/. Он показывает основные ошибки в HTML, хотя для CSS code-review подходит так себе. Лучший способ сделать ревью – найти другого верстальщика и отдать страницу на ревью ему.

Если такого верстальщика нет – возьмите 10 советов выше и 10 раз пройдитесь по коду, с каждой итерацией проверяйте, выполнили ли вы все рекомендации.

FAQ

Что такое DOM? Document Object Model – это модель, описывающая взаимодействие элементов на странице. На основе всех элементов строится дерево, с помощью которого js-программист может быстро получить доступ к нужному элементу. DOM строится на ID, классах и тэгах, и чем более логично они будут прописаны на странице, тем проще будет писать код для скриптов.

Можно ли взломать сайт через ошибки в HTML/CSS? Как ни странно, можно – через cross-site scripting. О том, как от этого защититься, можно почитать здесь: https://www.w3.org/TR/CSP2/.

Подведем итоги

Тезисно:

выбирайте содержательные имена классов;
не описывайте стили внутри < style >;
с осторожностью используйте invisible text и другие редкие символы Unicode;
старайтесь избегать использования id для идентификации;
сжимайте картинки;
не используйте HTML для верстки;
расставляйте заголовки логично, более низкие вложены в более высокие;
избегайте !important, продумывайте структуру верстки заранее;
прописывайте альты в < img >, даже пустые;
используйте < div > для блоков и < span > для текста.

Источник

Ошибки дизайна и верстки

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

Чтобы исправить положение, надо либо уменьшить размер букв, либо увеличить ширину колонки. Можно поправить и то и другое. Можно расставить «мягкие» переносы в длинных словах — они отображаются только тогда, когда попадают на конец строки и слово переносится. (Ни в коем случае нельзя ставить просто знак дефиса! При дальнейшем редактировании текста эти знаки могут оказаться в тексте лишними и не на месте.)


Рис. 24.4. «Белые пятна» в тексте

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

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

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

Оторвавшиеся заголовки. Всегда надо проверять расположение заголовков по отношению к тексту: они должны быть ближе к тому тексту, к которому относятся, и дальше от предшествующего текста (рис.24.5.).

Рис.
24.5.
Расположение заголовков в тексте

Похожие шрифты. Если вы используете больше одного шрифта в публикации, они должны заметно отличаться один от другого. Поищите контрастные в написании шрифты. Обычно берутся шрифты рубленые для заголовков и с засечками (serif) для текста либо декоративные для заголовков и с засечками или рубленые для основного текста. Слишком похожие шрифты создадут ощущение неопрятности или «недоделки» работы.

Но и другая крайность вредит. Переизбыток шрифтов. Это одна из наиболее распространенных ошибок дизайна печатных изданий. Документ выглядит путаным и непрофессиональным. Оставьте два контрастных по начертанию шрифта и творите.

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

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

И еще несколько советов для тех, кто хочет быть профессионалом в верстке.

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

Рис.
24.6.
Варианты висячих строк

Примерные вопросы для контроля

Что такое модульная сетка?
Какие элементы макета задаются с помощью модульной сетки?
Как отобразить линии модульной сетки в программах?
Как при создании макета используются колонки?
Зачем нужны стили?
Назовите частые ошибки при верстке текста и способы их исправления.

Источник

Выравнивание правого края

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

Проблема ручного выравнивания в размере мониторов: на разных устройствах текст будет отображаться по-разному, и все переносы «поедут». Выравнивание текста по ширине тоже не решает проблему. Этот способ выравнивает правый край за счет разной длины пробелов между словами. В итоге текст выглядит уродливо, усложняет чтение и выдает некачественную верстку.

В блоге медиахаба «Rockin’Robin» делают правый край текста ровным с помощью автоматического выравнивания по ширине. Из-за этого между словами образуются дыры:

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

Совет: Выравнивайте текст по левому краю. Рваный правый край выглядит лучше, чем разная длина пробелов между словами.

Продвинем ваш бизнес

В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров

Подробнее

Цвет текста не контрастен к фону

Чем меньше соотношение цвета текста и фона, тем сложнее его читать. Если мы напишем белым цветом на белом фоне, то соотношение цветов будет 1:1. Такой текст невозможно прочитать. Светло-серый текст на белом фоне будет иметь соотношение 1:6.

Текст различим, но читабельность все еще низкая. Чтобы текст хорошо читался, соотношение цветов должно быть 5:1 или больше.

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

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

Совет: Пишите черным по белому.

Незаметный подзаголовок

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

В блоге «Madcats» подзаголовки выделяют только крупным кеглем, жирность и цвет не используют. Поэтому при сканировании мимо них легко проскочить:

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

Совет: Подзаголовки должны выделяться.

Неправильное соотношение верхнего и нижнего отступа в подзаголовке

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

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

Сделаем отступ сверху больше, чем снизу, и иерархия станет понятной:

Совет: у читателя не должно возникать сомнений, к какому абзацу относится подзаголовок.

Сложная структура

Подзаголовки создают структуру статьи. Хорошая структура помогает читателю ориентироваться в статье. Но если структура многоуровневая, то читатель может запутаться. Принцип многоуровневой структуры — каждый следующий подзаголовок вкладывается в предыдущий и создает новый уровень вложенности.

Если подзаголовок включает в себя еще один подзаголовок — структура получается с трехуровневой вложенностью:

Заголовок (Первый уровень)

Подзаголовок (Второй уровень)

Подзаголовок (Третий уровень)
Подзаголовок (Третий уровень)

Подзаголовок (Второй уровень)
Подзаголовок (Второй уровень)

Такая структура воспринимается нормально, но если добавить еще один уровень, то читатель может потеряться в статье:

Заголовок (Первый уровень)

Подзаголовок (Второй уровень)

Подзаголовок (Третий уровень)

Подзаголовок (Четвертый уровень)
Подзаголовок (Четвертый уровень)

Подзаголовок (Третий уровень)

Подзаголовок (Второй уровень)
Подзаголовок (Второй уровень)

Многоуровневая структура хорошо подходит для справочников: с ее помощью легко находить информацию. Но читать статью с такой структурой сложно. Читателю приходится запоминать, в каком разделе он находится, что приводит к лишнему напряжению и путанице. Поэтому в статьях лучше использовать простую структуру:

Заголовок

Подзаголовок
Подзаголовок
Подзаголовок

Совет: Делайте структуру статьи проще. Многоуровневую структуру оставьте для тех, кто верстает справочники.

Неподходящий размер интерлиньяжа

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

Текст стал читабельнее. Но нужно чувствовать меру:

Слишком большой интерлиньяж мешает чтению не меньше, чем маленький:

Совет: Подбирая размер интерлиньяжа, ориентируйтесь на размер кегля, ширину текстового поля и расстояние между словами.

Слишком широкое текстовое поле

От размера текстового поля зависит скорость и удобство чтения. Слишком длинное текстовое поле затрудняет чтение: дочитав одну строку, сложно перескочить на следующую. Поэтому читатель может перепрыгнуть не на ту строку.

Сделаем наборную строку чуть уже, и читать станет легче:

Чтобы определить подходящую длину строки, можно использовать формулу Роберта Брингхарста: размер кегля умножить на 30.

Мелкий размер кегля

Мелкий размер кегля — это неуважение к читателю. Размер кегля должен быть таким, чтобы его можно было читать без усилий.

Увеличим кегль с 12 до 16 px, и текст можно спокойно читать:

Совет: Основной текст на веб-странице лучше не набирать кеглем меньше 14 px.

Отсутствие абзацев

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

Разделим это полотно на абзацы:

Совет: Делите текст на абзацы размером не более 8 строк.

Подведем итог

Выравнивайте текст по левому краю;
Подбирайте цвет шрифта, который наиболее контрастен к фону;
Выделяйте подзаголовки четче;
Расстояние сверху подзаголовка должно быть больше, чем снизу;
Не используйте сложную структуру в статье;
Межстрочный интервал должен быть заметно больше расстояния между словами;
Текстовое поле не должно быть слишком широким;
Набирать статью кеглем меньше 14 px — неуважение к читателю;
Делите текст на абзацы.

Источник

30 Июн 2014

13715

Памятка верстальщика. Основные ошибки при выключке текста по левому краю, по центру и по формату

Игорь Штанг, автор курса «Типографика и вёрстка» опубликовал у себя в ЖЖ эту памятку. С любезного разрешения автора публикую памятку тут.

Выключка по левому краю

Главная проблема флагового набора — эстетичный правый край. Важно найти баланс, при котором край не казался бы ни слишком ровным, ни слишком рваным. Английские тексты можно верстать без переносов (потому что английские слова короче), русские лучше переносить.
Самые частые ошибки:

Выключка по центру

Здесь важнее всего общая форма блока. Центрируют обычно небольшие отрывки текста: заголовки, выноски, цитаты, — поэтому важно, какую форму примут строчки, как они будут смотреться вместе. Те же подводные камни, что и при левом флаге, только следить нужно уже за обоими краями.

Выключка по формату

Основная задача — однородный, ровный тон текста, так называемое «серебро набора». Достигается оно за счет одинаковых пробелов между буквами и словами. Самый сложный вид выключки, требующий определенной сноровки и опыта. О том, как настроить панели Justification и Hyphenation в Индизайне для верстки по формату, читайте здесь.

Записи по теме:
Выключка по формату
Выключка по левому краю
Выключка по центру

Отправить

Твитнуть

Запинить

Источник