Была сделана ошибка в верстке

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

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

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

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

Состояния

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

Старт в Figma для верстальщика

Нет базовых состояний

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

Как исправить → если стилей нет у нескольких элементов, то повторите логику, которая уже есть в макете. Смена цветов, набор свойств, плавность — все это можно позаимствовать в отрисованных состояниях.

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

Нет более специфичных состояний

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

Как исправить → если нет фокуса для конкретного элемента, но есть для других — повторите этот фокус.

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

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

С неактивными элементами проще: они как правило бледнее и не реагируют на наведения и клики. Задайте им прозрачность или подберите бледный цвет.

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

Обратная связь

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

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

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

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

Нет индикаторов загрузки

Индикаторы можно поделить на лоадеры и скелетоны. Лоадеры (от англ. load — загрузка) отображают во время загрузки чего-нибудь и показываются как на элементе, инициировавшим загрузку, так и в области, где ожидаются данные. Кроме того, лоадер может отражать процесс загрузки в процентах или только графически.

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

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

Нет сообщений об ошибке загрузки или отправки

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

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

Недостаточно оформления для валидации

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

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

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

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

Технические страницы

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

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

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

Системность макета

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

Разные отступы идентичных элементов

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

Как исправить → попробуйте вычислить среднее значение. Возможно, лучше будет выглядеть не среднее, а чуть большее или меньшее: тогда смело берите его. Можно пойти и еще дальше, и сделать отступы на сайте более логичными. Это получится сделать, если не требуется pixel perfect верстки.

Конечно, соблюдать вертикальный ритм не нужно, но сделать кратные отступы будет и удобнее в работе, и придаст виду сайта больше порядка. Используйте отступы, кратные определенному числу. Чаще всего это число 4 (для совсем мелких отступов 2, а для крупных, наоборот, 8).

То есть, нужно будет отступы из макета превращать в ближайшее значение, кратное 4-м: 5 => 4, 7 => 8, 10 => 12.

Слишком много размеров похожих элементов

В некоторых макетах встречаются почти одинаковые элементы, но каждый чем-то отличается от остальных. Например, может быть 10 кнопок, при этом на 10 кнопок будет 8 вариантов их размеров, некоторые из которых отличаются заметно, а некоторые — на несколько пикселей.

---

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

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

Замена обычного текста статей интересными макетами и медиа-элементами — один из способов сделать контент более привлекательным. Улучшение читабельности и разборчивости с помощью более качественного набора текста — еще один способ привлечь внимание.

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

1. Отсутствие визуального контраста

Правильно подобранный цветовой и типографический контраст является жизненно важным для комфорта пользователей при чтении.

Цветовой контраст: разница в яркости между двумя соседними цветами текста и фона.

Типографический контраст: разница в размере между элементами текста, например, заголовком и текстом абзаца.

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

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

Чтобы создать визуальные подсказки и улучшить читабельность для пользователей, используйте контрастные цвета и дополнительные стили и размеры шрифтов. Google Type и Font Pair — полезные инструменты для подбора пар шрифтов.

2. Однообразный текст

Выделение основных элементов текста необходимо для привлечения внимания пользователя, особенно для таких элементов, как ключевые выводы или призыв к действию (CTA).

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

3. Неадекватные отступы

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

Оптимальный межстрочный интервал — 120-150% от размера кегля набранного текста. Можно воспользоваться плагином the good line-height в фигме для того, чтобы безошибочно выстраивать корректный интерлиньяж в каждом текстовом блоке 😎

4. Нет визуальной структуры

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

5. Плохая мобильная оптимизация

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

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

6. Отсутствие оптимизации графики

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

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

— Не перекрывает ли она текст?

— Как изображение отображается на разных экранах?

— Одинаково ли качество изображения на всех экранах, или оно становится размытым при масштабировании?

— Если в статье размещена галерея, прокручивается ли она соответствующим образом на мобильных устройствах?

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

Бонус: чек-лист для оценки читабельности

ОСОБЫЙ ШРИФТ ИЛИ ВЕС ШРИФТА, КОТОРЫЕ ВЫДЕЛЯЮТ АКЦЕНТНЫЙ ФРАГМЕНТ ОТ ОСНОВНОГО ТЕКСТА

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

РАЗМЕР ШРИФТА И ШИРИНА КОЛОНОК ОБНОВЛЯЮТСЯ ДЛЯ УДОБСТВА ЧТЕНИЯ НА РАЗНЫХ УСТРОЙСТВАХ

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

ГИПЕРССЫЛКИ, ВИЗУАЛЬНО ОТЛИЧАЮЩИЕСЯ ОТ ОКРУЖАЮЩЕГО ТЕКСТА

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

ТАБЛИЦЫ ПЕРЕФОРМАТИРОВАНЫ ДЛЯ УДОБСТВА ПРОСМОТРА

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

КОРРЕКТНЫЙ МЕЖСТРОЧНЫЙ ИНТЕРВАЛ

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

ГАЛЕРЕИ ИЗОБРАЖЕНИЙ ПОЗВОЛЯЮТ ОСУЩЕСТВЛЯТЬ НАВИГАЦИЮ ПРОЛИСТЫВАНИЕМ

— Не забывайте о пролистывании! Галерея изображений, размещенная внутри статьи, должна быть удобной для использования на мобильных устройствах, позволяя читателю без проблем пролистывать её.

ОТСТУПЫ МЕЖДУ СТРОКАМИ И АБЗАЦАМИ ДЛЯ ОПТИМИЗАЦИИ СТРУКТУРЫ ТЕКСТА

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

КОРРЕКТНАЯ ВИЗУАЛИЗАЦИЯ И ОТОБРАЖЕНИЕ ФОТОГРАФИЙ

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

РАВНОМЕРНОЕ РАССТОЯНИЕ МЕЖДУ АБЗАЦАМИ

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

АБЗАЦЫ, ДЛИНА КОТОРЫХ ОБЫЧНО ВАРЬИРУЕТСЯ В ПРЕДЕЛАХ 5-9 СТРОК

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

---

Оригинал статьи можно посмотреть по ссылке.

Всем классных статей! 🙌

Исправление ошибок верстки

Верстка сайта – это не просто создание технического каркаса будущего веб-ресурса и воплощение творческих идей в конкретной визуальной оболочке. Правильная верстка – одно из условий популярности будущего ресурса у пользователей сети и поисковых машин. Она определяет валидность сайта (соответствие ресурса общепринятым стандартам веб пространства), его корректное отображение в различных браузерах. Если проверка на валидность пройдена успешно, то есть документ является валидным, то с большой долей вероятности он одинаково будет отображаться во всех браузерах (кроссбраузерность).

Валидная верстка — это обычно «чистый», красивый код, который ко всему прочему «нравится» поисковым системам. Поэтому проверка кода на валидность — обязательный этап при верстке сайтов.

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

Что такое ошибки верстки, почему они возникают и как с ними бороться?

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

• фактические ошибки, допущенные человеком (пропуск закрывающих тегов или других элементов кода);
• синтаксические ошибки и опечатки;
• незнание особенностей конкретных браузеров.

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

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

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

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

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ‘Helvetica Neue’; color: #454545}

Программа обучения: «HTML-верстка: с нуля до первого макета»

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

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

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

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

Правильно:

.shopping-cart-block

.social-icon

Неправильно:

.korzina-block

.социальные-кнопки

.-3-block

.2-review

.shp-crt

2. Использование идентификатора #id для описания стилей блока

Стиль блока можно задать с помощью класса .class-name или идентификатора #id. Атрибут класса позволяет выбрать группу элементов, а #id — один элемент. Если на странице сайта будет задан один и тот же #id для нескольких элементов, то браузер проигнорирует оформление элемента или вообще не откроет CSS-файл.

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

Как избежать: использовать имена классов .class-name для описания стилей блока, а #id оставить для JavaScript.

3. Описание стилей для элементов внутри атрибута style

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

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

Как избежать: задавать стили для каждого элемента в СSS-файле.

4. Использование тега абзаца <p> для разметки

Браузер по умолчанию добавляет к <p> некоторые внешние отступы, чтобы параграф текста выглядел отдельным блоком. Чтобы облегчить работу и не добавлять отступы к изображению с помощью стилей, некоторые верстальщики оборачивают его тегом <p>…</p>.

Как избежать: для разметки страницы использовать специальные теги <div> и <span>, прописать нужные стили для этих тегов.

5. Много изображений в высоком разрешении на странице

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

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

6. Не сброшены изначальные настройки

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

Как избежать: сбросить отступы для всех элементов можно с помощью СSS-кода:

*{

margin:0;

padding:0;

}

Либо подключить специальный CSS-файл, внутри которого отступы уже изменены. Например, Normalize.css или CSSreset.css.

7. Использование блочного элемента внутри строчного

В HTML существует два типа элементов: блоки и строки.

С помощью блоковых элементов выстраивается структура страницы. Это <div>, <ul>, <h1>, <h3> и другие элементы. Их свойство по умолчанию — display:block.

Строчные элементы, к которым относятся <span>, <li>, <a>, <label>, используются внутри блоковых. По умолчанию их свойство задается как display:inline.

Неправильно:

<span>

<h1> Заголовок </h1>

<ul>

<li> Пункт 1</li>

<li> Пункт 2</li>

</ul>

</span>

Правильно:

<div>

<h1> Заголовок </h1>

<ul>

<li> Пункт 1</li>

<li> Пункт 2</li>

</ul>

</div>

Если все же нужно использовать блок внутри строчного элемента, то можно поменять свойство у строчного на display:block

8. Отступы между элементами сделаны с помощью тега переноса строки <br/>

Часто с помощью одного или нескольких тегов <br/> создают отступы между элементами, картинками, словами. Этого делать не стоит, потому что тег <br/> должен использоваться внутри тега с текстом <p>…</p>.

Чтобы не вставлять в разметку лишних тегов, просто пропишите нужные отступы в CSS.

9. Страница не проверялась валидатором

На сайте w3.org есть специальный валидатор html-файлов. Он проверяет код страницы и выдает незамеченные ошибки: незакрытый тег, пропущенную строку или свойство. Чем меньше ошибок нашел валидатор, тем лучше отобразится страница в браузере и быстрее будет работать сайт.

Чтобы сообщить браузеру, какая версия HTML-разметки используется на странице, нужно использовать тег DOCTYPE.

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

Как избежать: всегда вставлять тег в первую строку страницы. Например, если вы верстаете на HTML пятой версии, объявить тип документа можно так: < !DOCTYPE html >

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ‘Helvetica Neue’; color: #454545}

Читать ещё: «Подборка англоязычных ресурсов для начинающих верстальщиков»

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

Итак, ошибки, которые нужно избегать:

• Неправильные имена классов;
• Использование идентификатора #id для описания стилей блока;
• Описание стилей для элементов внутри атрибута style;
• Использование тега абзаца <p> для разметки;
• Много изображений в высоком разрешении на странице;
• Не сброшены начальные настройки;
• Использование блочного элемента внутри строчного;
• Отступы между элементами сделаны с помощью тега переноса строки <br/>;
• Страница не проверялась валидатором;
• Не указан тип страницы.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Цветовой профиль

Проблема с цветовыми профилями чаще всего возникает из-за отсутствия понимания у дизайнера, что же такое цветовой профиль и как его выбирать. Наиболее часто встречаются профили Adobe RGB (1998) и sRGB IEC61966-2.1 (далее просто sRGB), о которых можно почитать, например, здесь.

Для веба, как правило, используется профиль sRGB — он является профилем по умолчанию, например, в ОС Windows. Это значит, что мы видим изображение на экране в цветах, определенных стандартом sRGB IEC61966-2.1. Разница между Adode RGB и sRGB заключается в ширине цветового спектра.

В чем же проблема? Дизайнер, создавая в Photoshop новый проект, не указывает цветовой профиль, и, как следствие, Photoshop оставляет значение по умолчанию — Adode RGB. В свою очередь, верстальщик, получив макет, нарезает его, и в какой-то момент замечает, что цвета в макете и на свёрстанной странице отличаются на несколько тонов.

Что же произошло? Еще на стадии сохранения нарезанных изображений, верстальщик воспользовался замечательной функцией Save for Web & Devices, которая по умолчанию выполняет преобразование изображения в sRGB. В итоге мы видим одни цвета в рабочем пространстве Photoshop и совсем другие на готовом сайте.

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

Решение проблемы — всегда при начале работы убеждаться, что установлен правильный профиль.

2. Направляющие

Установка направляющих — казалось бы, простое дело. Но и тут возникают проблемы. Невнимательный верстальщик, используя установленные дизайнером направляющие, нарезает изображения и получает на выходе что-то подобное:

Почему так получилось? При близком рассмотрении видно, что направляющие сами не привязываются к границам пикселей, соответственно, когда дизайнер «на глаз» ставит направляющую, то, скорее всего, она не попадёт ровно между пикселями

Выделение, наоборот, привязывается к пикселям:

Даже если верстальщик был внимателен и заметил это, то все равно встаёт вопрос: куда всё таки дизайнер хотел поставить направляющую — левее или правее?

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

3. Группы, слои, маски

Верстальщику необходимо отдавать именно подготовленный к вёрстке макет, а не рабочий проект весом под 100 Мб.

Что значит «подготовленный к вёрстке макет»?

1. Группы и слои проименованы: основные элементы дизайна желательно именовать в соответствии с их назначением (лучше всего латиницей)
2. Если есть сгруппированные слои, то группировка выполнена в соответствии с логической структурой страницы:
   шапка, контент, баннер, кнопка, список и т. д., и вложенность не превышает разумных пределов, а лучше вообще избегать вложенности групп.
3. Скрытые, но не играющие никакой роли в дизайне слои, должны быть удалены
4. Обрезка фотографий (скругление углов и т.п.) должны производиться с сохранением исходных изображений — лучше всего делать это с помощью масок
5. Размер холста должен соответствовать максимально возможной ширине/высоте дизайна

4. Цвета

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

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

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

5. Трансформации, фигуры

Прошли времена вёрстки скругленных уголков картинками. Каждый уважающий себя браузер умеет скруглять углы с помощью CSS-свойства border-radius, чем и пользуются верстальщики.

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

Само собой, верстальщик не станет из-за этого нарезать блок картинками. Но это говорит о ненадлежащем отношении дизайнера к работе.

Решив вопрос скгругления углов, верстальщик вновь столкнулся с проблемой:

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

Для предотвращения нечеткости границ фигур в Photoshop 13 есть специальная опция «выровнять края».

6. Единицы измерения, символы, абзацы

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

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

Если Вы изменили размер текста с помощью Transform, то после этого кегль или другие свойства символа могут принять дробное значение (например, 14.5 px). При подготовке макета к вёрстке обязательно нужно привести все размеры к целым значениям. В противном случае перед верстальщиком вновь встанет дилемма: 14 или 15 пикселей?

Что касается выключки строк (выравнивания), то дизайнеру следует помнить: браузеры полноценно поддерживают лишь 3 варианта: по левому краю, по правому краю или по центру. Выключка по формату в браузере зачастую сильно отличается от того, что мы видим в Photoshop.

7. Параметры наложения, стили слоя

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

Посмотрим, какие стили слоя в Photoshop имеют полную или частичную возможность реализации с помощью CSS (без использования картинок):

• Тени и свечения (внутренние и внешние)
  text-shadow — тень для текста
  box-shadow — тень для блока
• Обводка
  border — обводка линией
  box-shadow — возможна обводка однопиксельной тенью
  outline — строго прямоугольная обводка
• Заливка
  background-color — заливка цветом (возможно полупрозрачным)
  background-image — заливка узором/картинкой
  background-image: linear-gradient() — линейный градиент
  background-image: radial-gradient() — радиальный градиент
• Прозрачность
  opacity — прозрачность элемента целиком
  [color:] rgba(r,g,b,a) — прозрачность rgb-цвета, где a — степень непрозрачности от 0 до 1
  [color:] hsla(h,s,l,a) — прозрачность hsl-цвета, где a — степень непрозрачности от 0 до 1

О поддержке браузерами того или иного свойства можно узнать здесь.

Стоит помнить: браузеры не поддерживают ни один из режимов наложения, такие как Overlay, Screen и др. Это необходимо обязательно учитывать и при необходимости обходиться нормальным режимом наложения в сочетании с прозрачностью и градиентами.

Подводя итог

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

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

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

Минимизированный css

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

Ссылки на сторонние ресурсы

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

Причин тут на самом деле несколько:

ALT and TITLE

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

Адаптивность и кроссбраузерность

Как же часто, проверяя в Яндекс браузере или Egge я нахожу косяки или нерабочие js, потому что тот или иной браузер их не воспринимает, либо не закрывает глаза на ошибки js, на которые закрывает google chrome. Не ленитесь — делайте качественно и перед сдачей обязательно проверяйте везде, на всех юраузерах и разных расширениях, не забывайте о маленьких телефонах или перевернутом экране.

Табы и слайдеры

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

Структурирование объектов

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

Дублирование объектов для адаптации

Оу, ну это самое интересное, что можно встретить у новичков. Мне попадалось дублирование много раз. Что же это такое? Дублирование — это когда верстальщик не смог реализовать перестроение на мобильную версию и просто сделал 2 варианта, которые он включает или отключает через @media через css. Выглядит все красиво, но пока не заглянул в код. Обращаюсь к тем, кто этим злоупотребляет — если вы думаете что это будет не замечено, поверьте, это 1000% будет видно! Чаще всего это делают на ПК меню и мобильном меню.

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

Ошибки в дизайне лендинга

1. Нет разделения на смысловые блоки

Информацию проще воспринимать, если она разделена на блоки по смыслу. Чтобы визуально отделить блоки друг от друга, используйте большие отступы (от 120 до 180 px) и отделяйте блоки с помощью разного цвета фона.

2. Разные отступы между элементами

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

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

Чтобы разные смысловые части не выглядели как единое целое, важно их разделять и использовать достаточно большое расстояние между ними (не менее 120 px).

4. Текст плохо читается на фотографии

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

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

7. Много текста в узких колонках

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

8. Много текста с выравниванием по центру

9. Текст накладывается на важную часть изображения

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

10. Несоблюдение визуальной иерархии

Чтобы на странице была видна смысловая иерархия информации, заголовок на обложке должен быть крупнее остальных заголовков на странице либо такого же размера (например, если в заголовке на обложке много слов).

11. Один смысловой блок визуально распадается на два

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

12. Слишком крупный длинный заголовок

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

13. Неуместное использование обводки в кнопках

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

Большое количество цветовых акцентов создает путаницу на странице: непонятно, что важнее. Достаточно использовать 1−2 цвета, чтобы выделить важные элементы.

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

1. Длинный сплошной текст

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

2. Заголовок стоит на равном расстоянии от предыдущего и следующего абзаца

Заголовок не должен «летать» между текстами предыдущей и следующей главы, потому что по смыслу он относится к последующему абзацу. Расстояние над заголовком должно быть раза в 2−3 больше, чем расстояние под ним. А расстояние под заголовком должно быть примерно равным расстоянию между абзацами или немного больше. Так заголовок будет визуально относиться к последующему тексту.

3. Смысловая иерархия не соблюдается

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

4. Разные отступы сверху и снизу одного смыслового блока

Равнозначные по смыслу блоки должны выглядеть соответственно и располагаться на равном расстоянии друг от друга.

5. Подпись расположена слишком близко к иллюстрации

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

6. Между подзаголовком и текстом мало места

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

7. Основной текст расположен близко к акценту

Акцент внутри основного текста (например, ключевая фраза или цитата) — самостоятельный объект. И чтобы он действительно выделялся и бросался в глаза, его нужно отделять от основного текста отступами от 75 до 120 px.

8. Слабый контраст элементов

Если вы решили сделать акцент на какой-то фразе — будьте смелее, сделайте ключевую фразу крупнее основного текста на 10-15 px, пусть важная мысль действительно выделяется из окружающего текста.

9. Цветной фон для узкого блока

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

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

10. Между двумя полноэкранными изображениями есть пустое пространство

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

11. Много выделений в тексте

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

12. Много стилей типографики

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

13. Выравнивание по центру в длинном тексте

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

14. Заголовок прилип к фотографии

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

15. Неуместное использование курсива

16. Смещение блоков относительно центра и друг друга

Этот досадный промах вы легко обнаружите сами, если после всех манипуляций с текстом (изменение размера шрифта, выравнивания, отступов) просто сделаете паузу и посмотрите на то, что получается.

Примеры ниже написаны с использованием соглашения по именованию селекторов БЭМ, препроцессора Sass и шаблонизатора Jade.

---

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

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

Ошибка 1: Не продумана структура проектной папки

Довольно часто верстальщикам ставят задачи постранично и макеты предоставляют тоже постранично. Это иногда порождает иллюзии, что работы мало и вся верстка будет прекрасно себя чувствовать в 2—3 папках, а если нет, то всегда найдется время поправить структуру. Но чем больше блоков и страниц сверстано, чем ближе к релизу и чем больше страниц / компонентов уже интегрировано, тем сложнее что-то изменить.

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

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

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

1. Вспомогательные документы, блоки и страницы живут отдельно

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

В scss общие стили типа reset, или подключения шрифтов, или лейаута верхнего уровня стоит также хранить отдельно от стилей для страниц и блоков. Также целесообразно импортировать все в один документ (например, main.scss) и только этот документ компилировать в css. По объективным причинам таких документов может быть несколько (например, из-за ограничения по количеству селекторов / весу css-документа в IE9 или для поставки специфических стилей для редко встречающихся устройств отдельно от основного документа), но, как и с Jade, не стоит компилировать все подряд.

2. Jade-блоки = БЭМ-блоки

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

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

Например:

extends ../0_base/_base.jade

block main
    .main.main--wide
        include ../1_blocks/banner.jade

3. Scss зеркалит Jade

Если в Jade-директории blocks есть какой-то документ, то стили для него должны находиться в Scss-директории blocks в документе с таким же названием.

Например, согласно структуре, указанной выше, стили для jade/1_blocks/header.jade должны лежать в scss/3_blocks/header.scss, а не где-то еще. Если следовать этому простому правилу, то вносить изменения будет удобно всем разработчикам на проекте, даже новым.

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

Добавить .gitkeep во все пустые папки можно с помощью этой команды:

find . -type d -empty -not -path '*/.*' -exec touch {}/.gitkeep ;

После заполнения папок не забудьте удалить ненужные .gitkeep.

Ошибка 2: копипаста есть, комментариев нет

С копипастой нужно быть особенно аккуратным: вдумчиво все перечитать, исправить «под проект» и удалить лишнее. Однажды мне встретилось:

<meta name="apple-mobile-web-app-title" content="AMC Walking Dead">

, при этом обычный <title> содержал совершенно другую строку :).

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

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

Например:

<!-- TODO: change content attribute  -->
<meta name="apple-mobile-web-app-title" content="AMC Walking Dead">
<!--  -->

Начинающие верстальщики иногда пренебрегают тем, чтобы потратить несколько минут и переработать найденное решение. Так в scss появляются вендорные префиксы, когда в сборку включен автопрефиксер, мусорные свойства и даже переопределения в рамках одного правила:

.block {
    font-size: 1.2 rem;
    …
    font-size: 18px;
}

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

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

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

Великая сила амперсанда в Sass позволяет писать стили по БЭМ и делать это еще нагляднее. Такой код:

.block {
    font-size: 1.2rem;
    &--dark {
        background: #000;
    }
    &__element {
        text-aling: center;
        &--big {
            width: 100%;
        }
        .ie9 & {
            &::before {
                content: 'hello ie'
            }
        }
    }
}

Будет скомпилирован в:

.block {
    font-size: 1.2rem;
}

.block--dark {
    background: #000;
}

.block__element {
    text-aling: center;
}

.block__element--big {
    width: 100%;
}

.ie9 .block__element::before {
    content: "hello ie";
}

Когда есть такой удобный инструмент, даже речи быть не может о повторе и переопределении стилей для одного блока. Если селектор .block уже написан в каком-то документе, то в другом документе его быть не должно. Встретиться снова этот селектор может только в медиазапросе (причем, за редким исключением, медиазапрос должен находиться в этом же документе), подробнее о медизапросах поговорим чуть позже.

Блок — это отдельный компонент, который не знает о других блоках и их расположении.

«Блок — логически и функционально независимый компонент страницы, аналог компонента в Web Components… Независимость блоков обеспечивает возможность их повторного использования, а также удобство в разработке и поддержке проекта.» (источник)

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

.block {
    &:hover .another-block__element {
        color: red;
    }
}

Если возникает необходимость так написать, значит, что-то пошло не так на этапе именования, нужно незамедлительно вернуться к Jade и исправить атрибуты class так, чтобы каждый блок был независимым. Если же заплатка нужна срочно и времени на изменения разметки нет, то оставьте комментарии TODO в обоих документах: в scss и в jade.

Говоря о том, что блок не знает о других блоках, хочется вкратце упомянуть об одном полезном псевдоклассе, о котором постоянно забывают новички. Представьте лейаут верхнего уровня: есть блок с основным контентом и блок aside. Для двух этих блоков указана ширина в %, но на одной странице aside нет и ширина блока с основным контентом должна быть 100%. Тут нам на помощь придет псевдокласс only-child:

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

В случаях, когда only-child не подходит, используйте модификаторы.

Ошибка 4: не использовать миксины, когда можно использовать миксины

Миксины очень помогают следовать принципу DRY (Don’t Repeat Yourself), их активно используют в scss для таких абстрактных задач, как сетка, но о них почему-то забывают, когда речь заходит о верстке компонент. Например, у вас есть кнопки разных цветов, у которых на ховере происходит инверсия цвета. Для инверсии можно написать миксин и сделать стили чуточку чище:

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

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

В Jade тоже следует активнее использовать миксины. Например, для svg-спрайтов:

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

Ошибка 5: беспорядок в медиазапросах

Частая ошибка — смешивать mobile-first и desktop-first подходы. Сейчас, когда IE8 перестал фигурировать в спеках, можно смело переходить на mobile-first. Если макеты готовы только для десктопа, попробуйте повлиять на дизайнера, ссылаясь, например, на эту книгу. В любом случае, будете вы использовать min-width или max-width,  используйте что-то одно. Иначе в какой-то момент станет тяжело отслеживать логику изменения стилей, а значит, проблематично поддерживать верстку.

Кроме того, не стоит писать медиазапросы по хардкоду, используйте как минимум переменные для брейкпоинтов. Т.е. вместо:

@media (min-width: 1024px)

должно получиться:

$laptop-landscape: 1024px;

@media (min-width: $laptop-landscape)

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

В scss есть возможность вкладывать медиазапросы в правила. Например:

.block {
    width: 100%;
    @media screen and (min-width: 768px) {
        width: 60%;
    }
}

Это будет скомпилировано в:

.block {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .block {
        width: 60%;
    }
}

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

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

Ошибка 6: не интересоваться UX-проектированием

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

Для начала предлагаю обратить внимание на типичную ошибку новичка: ссылки и кнопки маленького размера, между ними мало пространства. Это ок, если взаимодействие происходит мышкой, но совершенно не годится, когда речь идет о тач-устройствах. Многократные попытки попасть по ссылке, которые в результате приводят к попаданию по соседней ссылке, очень быстро выводят пользователей из себя. Наверняка каждый из нас бывал в такой ситуации, и первое, что хочется сделать, — покинуть неудобный сайт. Чтобы такого не происходило с вашими пользователями, советую почитать гайдлайны от Google или SmashingMagazine.

Ошибка 7: все в пикселях, даже font-size

Советую сделать (если вы еще нее сделали) переход с px на em и rem для таких значений, как:

• размер шрифта и высота строки,
• размеры иконок,
• размеры кнопок,
• вертикальный ритм.

В рамках БЭМ для блока: rem для размера шрифта блока, em — для остальных величин блока. Для элемента есть 2 стратегии:

1. em для размера шрифта, если структура html уже утвердилась и вряд ли добавится / убавится еще один уровень вложенности,
2. rem — если в рамках блока вероятны изменения (перемещение элементов, добавление или удаление оберток и т.п.).

Чтобы понять разницу между единицами изменения или выбрать между em и rem, предлагаю обратить внимание на канал DevTips, на котором в весьма непринужденной форме объясняются основы верстки.

Также с псевдоэлементами и em стоит быть осторожней:

«Если в IE9+для одного и того же псевдоэлемента задать размер шрифта через разные селекторы, то он просто перемножит все размеры шрифтов.» (источник)

Ошибка 8: не думать о переполнении и предельных значениях

Верстая по макету, мы имеем дело с идеальной ситуацией. Так новички довольно часто забывают про угрозу переполнения, т.е. когда контент не помещается в блок или элемент и выходит за его пределы. Эту ситуацию нужно срочно исправлять, ведь верстальщик — это еще и своего рода переводчик интерфейса с языка дизайнерского на язык, понятный программистам. Поэтому очень важно в процессе верстки выявить предельные значения объема текста для кнопок, заголовков и прочих элементов с ограниченной вместимостью. Об этих предельных значениях стоит сообщить разработчикам (как минимум написать комментарий в HTML) и по возможности ограничить переполнение в css:

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

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

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

Можно также с надеждой смотреть в сторону object-fit, однако у этого свойства пока довольно слабая поддержка.

Ошибка 9: уделять недостаточно внимания графике

Графику обычно делят на 3 части: иконки, изображения контента, фоновые изображения. С фоновыми изображениями у новичков обычно проблем не возникает,  а вот с иконками и контентными изображениями все не так хорошо.

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

Контентные изображения, например, фото товара, — главная причина большого веса сайтов. На десктопах (особенно на экранах с большой плотностью пикселя) нам нужны изображения в большом разрешении. Их вес обычно не вызывает проблем, т.к. в основном десктопы используют высокоскоростные подключения с неограниченным трафиком. Пользователи мобильных устройств же вынуждены выкачивать лишние мегабайты изображений. А если у них низкая скорость передачи данных, бывают обрывы? Получаем не очень довольных пользователей. Остается только надеяться, что они не в роуминге. Эту ситуацию легко исправить с помощью атрибута scrset у <img> или с помощью тега <picture>. Постепенно поддержка этих возможностей становится лучше, а для старых браузеров есть полифил. Для подробного ознакомления с техникой поставки разных контентных изображений для разных устройств советую бесплатный курс «Responsive images» от Udacity.

Ошибка 10: Pixel Perfect? Не, не слышал.

Не зря этот пункт последний в этой статье — о Pixel Perfect часто забывают (кстати, не только новички). С одной стороны, верстальщик почти всегда действует, опираясь на макет, с другой — немножко от этого макета отступает. В процессе работы над проектом какие-то компоненты могут меняться местами, от каких-то отказываются, появляются новые и т.п. Размеры элементов могут немного меняться в зависимости от контента (смотри переполнение и предельные значения). В конце концов, дизайнер может допустить ошибку при выравнивании элементов по сетке. Все это — адекватные причины, чтобы локально отказаться от pixel perfect и верстать «по ситуации». В идеале каждое отступление от макета должно быть задокументировано.

В случаях, когда нет причин отклоняться от макета, стоит четко ему следовать (помочь в этом может, например, расширение для Chrome — Pixel Perfect).

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

---

За материал выражаем благодарность международной IT-компании Noveo.

Исправление ошибок верстки

Верстка сайта – это не просто создание технического каркаса будущего веб-ресурса и воплощение творческих идей в конкретной визуальной оболочке. Правильная верстка – одно из условий популярности будущего ресурса у пользователей сети и поисковых машин. Она определяет валидность сайта (соответствие ресурса общепринятым стандартам веб пространства), его корректное отображение в различных браузерах. Если проверка на валидность пройдена успешно, то есть документ является валидным, то с большой долей вероятности он одинаково будет отображаться во всех браузерах (кроссбраузерность).

Валидная верстка — это обычно «чистый», красивый код, который ко всему прочему «нравится» поисковым системам. Поэтому проверка кода на валидность — обязательный этап при верстке сайтов.

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

Что такое ошибки верстки, почему они возникают и как с ними бороться?

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

• фактические ошибки, допущенные человеком (пропуск закрывающих тегов или других элементов кода);
• синтаксические ошибки и опечатки;
• незнание особенностей конкретных браузеров.

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

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

Copyright 2008-2021 © Виртуальная недвижимость – создание сайтов и их продвижение. Разработка и последующая раскрутка сайтов – наша специальность. Работаем с регионами. В нашем портфолио – более 400 проектов.

Источник

Правила верстки и типичные ошибки в оформлении

Правила верстки и типичные ошибки в оформлении

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

Единообразие – один из главных критериев качественной верстки. Это означает, что дизайнер должен составить определенные нормы верстки для данного издания и следовать им на протяжении всей работы.

Критерии единообразия верстки таковы:

• высота полос текста должна быть одинаковой (рис. 2.23), колонки газеты или страницы книги должны быть одинаковой высоты плюс-минус одна строка (для ликвидации висячих строк, о чем мы поговорим чуть позже); это правило не касается последней страницы главы или раздела книги, если следующая глава начинается с новой страницы;

Рис. 2.23. Типичная ошибка в единообразии верстки: различная высота полос текста

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

• отбивки и отступы различных элементов (таблиц, иллюстраций, подписей к ним) должны быть одинаковыми на протяжении всего текста;

• оформление таблиц, иллюстраций, цитат (при оформлении целыми абзацами), заголовков и всех прочих элементов оформления должно быть одинаковым на протяжении всего издания.

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

Рис. 2.24. Типичная ошибка в приводной верстке: разный интерлиньяж на соседних страницах

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

Примечание

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

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

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

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

Ниже мы приводим список наиболее часто встречающихся ошибок в оформлении текста.

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

Рис. 2.25. Типичная ошибка верстки: висячая строка (слева)

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

Примечание

Зарубежная типографика также различает первую и последнюю строки абзаца. При отрыве от абзаца первой строки она называется widow (вдова), а последняя строка – orphan (сирота). Adobe InDesign и другие программы верстки позволяют отдельно настраивать контроль первых и последних висячих строк. Такое различие не используется в русской типографике, и при работе мы будем указывать одинаковые параметры контроля для обоих видов висячих строк.

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

• за счет изменения ширины межбуквенных и межсловных пробелов, что позволяет увеличить или уменьшить объем абзаца, добавив или «сэкономив» строку;

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

• за счет переноса абзаца целиком на новую страницу (в случае «повисания» первой строки); следствие такого исправления – разное количество строк на соседних страницах, что может быть скорректировано отдельно;

• сократив или увеличив объем текста на странице (изменение каких-либо оборотов в тексте, введение сокращений и т. д.); этот способ не в компетенции дизайнера, такими изменениями ведает редактор, и производятся они только по согласованию с автором.

Грубыми ошибками также считаются отрыв заголовка от текста раздела или разрыв заголовка на две страницы (рис. 2.26). На рис. 2.27 приведен правильный вариант верстки, с переносом заголовка и следующих строк на другую страницу.

Рис. 2.26. Типичная ошибка верстки: отрыв заголовка от текста главы

Рис. 2.27. Правильно выполненный разрыв текста после заголовка

Отрыв заголовка от текста часто происходит при использовании заголовков в разрыв текста, и подобная ошибка настолько распространенная и в то же время грубая, что программы верстки могут ее контролировать автоматически, как и висячие строки. Большинство программ верстки (в том числе и Adobe InDesign) позволяют запретить разрывать строки какого-либо абзаца или отделять абзац от следующих за ним строк.

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

Красоту и профессиональность верстки можно оценить также по следующим признакам:

• отсутствие коридоров – совпадающих по горизонтали пробелов в соседних строках, которые отвлекают читателя при чтении и ухудшают читабельность текста (рис. 2.28);

Рис. 2.28. Коридор из пробелов

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

Рис. 2.29. Неправильное (слева) и правильное (справа) разнесение заголовка на разные строки

• правильность переносов слов (хотя большинство программ верстки позволяют устанавливать автоматические переносы, они могут неправильно переносить незнакомые слова) (рис. 2.30);

Рис. 2.30. Отрыв инициалов и сокращений

• количество переносов в соседних строках (считается, что подряд может быть не более трех строк с переносами);

• отсутствие разрыва слов на разные страницы при переносе (нежелательно, чтобы слово начиналось на одной странице, а заканчивалось на другой);

• отсутствие отрывов сокращения от цифр («1994» на одной строке, а «г.» на другой) и инициалов от фамилий (между инициалами и фамилией должны быть пробелы, но они не должны оказываться на разных строках).

Данный текст является ознакомительным фрагментом.

Продолжение на ЛитРес

Читайте также

Типичные ошибки при знакомстве

Типичные ошибки при знакомстве Человеку свойственно ошибаться… И ошибок этих мы делаем миллионы. Каждый – свои собственные, неповторимые. Но еще чаще все мы упорно наступаем на одни и те же, положенные еще сотни лет назад, грабли.Вот лишь несколько типовых «синдромов»,

1.1. Общие сведения об оформлении

1.1. Общие сведения об оформлении Объем работы обычно либо оговорен руководителем, либо задан соответствующими методическими указаниями. Чаще всего реферат не должен превышать 15–20 страниц, курсовая работа – 25–30, а дипломная – 90-100.Документ оформляют в текстовом

Модульная система верстки

Модульная система верстки При верстке газеты широко используется модульная система, которая получила здесь наибольшее распространение (рис. 3.7, слева). Хотя иногда можно встретить книги, сверстанные по модульной сетке (как правило, это справочники или энциклопедии с

1.1. Немного об оформлении

1.1. Немного об оформлении Объем работы обычно либо оговаривают с руководителем, либо задают соответствующими методическими указаниями. Чаще всего реферат не должен превышать 15–20 страниц, курсовая – 25–30, а дипломная работа – 90-100.Работу оформляют на компьютере с помощью

3. Типичные проблемы с программами

3. Типичные проблемы с программами Как известно, главная задача компьютера – выполнение команд пользователя, поступающих в результате работы с прикладными программами. Естественно, что качество выполнения команд зависит от качества написания соответствующей

1.2. Типичные конфигурации компьютера

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

Источник

10 ошибок начинающего верстальщика и как их избежать

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

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

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

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

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

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

2. Использование идентификатора #id для описания стилей блока

Стиль блока можно задать с помощью класса .class-name или идентификатора #id. Атрибут класса позволяет выбрать группу элементов, а #id — один элемент. Если на странице сайта будет задан один и тот же #id для нескольких элементов, то браузер проигнорирует оформление элемента или вообще не откроет CSS-файл.

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

Как избежать: использовать имена классов .class-name для описания стилей блока, а #id оставить для JavaScript.

3. Описание стилей для элементов внутри атрибута style

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

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

Как избежать: задавать стили для каждого элемента в СSS-файле.

4. Использование тега абзаца

Браузер по умолчанию добавляет к

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

Как избежать: для разметки страницы использовать специальные теги

5. Много изображений в высоком разрешении на странице

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

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

6. Не сброшены изначальные настройки

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

Как избежать: сбросить отступы для всех элементов можно с помощью СSS-кода:

Либо подключить специальный CSS-файл, внутри которого отступы уже изменены. Например, Normalize.css или CSSreset.css.

7. Использование блочного элемента внутри строчного

В HTML существует два типа элементов: блоки и строки.

С помощью блоковых элементов выстраивается структура страницы. Это

и другие элементы. Их свойство по умолчанию — display:block.

Заголовок

Заголовок

Если все же нужно использовать блок внутри строчного элемента, то можно поменять свойство у строчного на display:block

8. Отступы между элементами сделаны с помощью тега переноса строки

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

Чтобы не вставлять в разметку лишних тегов, просто пропишите нужные отступы в CSS.

9. Страница не проверялась валидатором

На сайте w3.org есть специальный валидатор html-файлов. Он проверяет код страницы и выдает незамеченные ошибки: незакрытый тег, пропущенную строку или свойство. Чем меньше ошибок нашел валидатор, тем лучше отобразится страница в браузере и быстрее будет работать сайт.

10. Не указан тип страницы

Чтобы сообщить браузеру, какая версия HTML-разметки используется на странице, нужно использовать тег DOCTYPE.

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

Как избежать: всегда вставлять тег в первую строку страницы. Например, если вы верстаете на HTML пятой версии, объявить тип документа можно так:

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

Итак, ошибки, которые нужно избегать:

• Неправильные имена классов;
• Использование идентификатора #id для описания стилей блока;
• Описание стилей для элементов внутри атрибута style;
• Использование тега абзаца

для разметки;

Много изображений в высоком разрешении на странице;

Не сброшены начальные настройки;

Использование блочного элемента внутри строчного;

Отступы между элементами сделаны с помощью тега переноса строки
;

Страница не проверялась валидатором;

Не указан тип страницы.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Источник