Пропишите алгоритм вёрстки реферата, коротко

Что такое вёрстка сайта

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

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

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

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

В контексте создания сайтов есть два вида разработки:

• Back-end — программирование функционала сайта;

• Front-end — программирование внешнего отображения и интерактивных элементов сайта.

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

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

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

К вёрстке предъявляются особые требования и она бывает нескольких видов.

Терминология. основные особенности иллюстрационной верстки

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

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

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

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

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

Основные виды иллюстрационной верстки в книжно-журнальных изданиях

Вид иллюстрационной верстки определяется характером размещения в издании неполноформатных (не занимающих полную полосу) изображений. Различают четыре основных вида иллюстрационной верстки:

– открытая верстка – изображения по всему изданию размещаются вверху или внизу каждой полосы и соприкасаются с текстом одной стороной при заверстке вразрез или двумя сторонами при заверстке в оборку (а);

– закрытая верстка – изображения по всему изданию размещаются внутри текста полосы и соприкасаются с текстом двумя сторонами при заверстке вразрез или тремя сторонами при заверстке в оборку (б);

– глухая верстка – изображения в многоколонном наборе размещаются внутри текста и соприкасаются с ним всеми четырьмя сторонами (в);

– верстка изображений на полях – иллюстрации малого формата заверстываются вне текста (г).

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

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

Рис. Варианты размещения иллюстраций в тексте

Анализ верстки текста в учебнике «Психогенетика»

Материал сплошной, нет разбиения на колонки.

Два вида текста – основной и добавочный.

Параметры основного текста:

длина строки – 67 символов;

высота текста – 3 мм

межстрочный интервал – 1 мм

абзац: 6 мм

поля:

верхнее – 13 мм

нижнее – 16 мм

корешковое – 12 мм

наружное – 14 мм

Текст однородный, отсутствуют курсив, жирный шрифт и подчеркивание.

Параметры добавочного текста:

длина строки – 71 символ

высота текста – 2.5 мм

межстрочный интервал – 0,8 мм

абзац – 6 мм

поля:

верхнее – 13 мм

нижнее – 16 мм

корешковое – 12 мм

наружное – 14 мм

Текст однородный, отсутствуют курсив, жирный шрифт и подчеркивание.

Высота текста в названии главы – 4 мм

Высота заголовка – 3 мм

Высота подзаголовка – 2.5 мм

Во всех заголовках используются только прописные буквы.

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

Анализ иллюстрационной верстки в учебнике «психогенетика»

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

Верстка «под обрез» не используется. Все изображения находятся в пределах полей.

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

Стилевое единство в издании не нарушено смешением разных видов иллюстрационной верстки.

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

Безопасность

Target

Страница, открытая через target=”_blank”, получает частичный контроль над открывшей её страницей через js свойство window.opener. Эту уловку можно использовать, чтобы перевести пользователя на фишинговую страницу. Чтобы избежать уязвимости, добавляйте к ссылкам с target=”_blank” атрибут rel=”noopener noreferrer”.

Блочная вёрстка

Более современный тип вёрстки — блочный.

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

Валидная вёрстка

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

Валидность обеспечивается соблюдением правил построения кода, его оптимизации, минимизации.

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

Валидная вёрстка помогает сайту занять более высокие позиции SERM благодаря соответствия алгоритмам чтения сайтов поисковыми роботами.

Как минимум, в HTML-коде элементы должны содержаться в соответствующих разделах.

Должен быть прописан <!Doctype html>, теги:

Верстка текста

Длина строки

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

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

Ширина колонки

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

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

Выравнивание

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

Формирование переносов

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

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

Большие промежутки между словами в тексте появляются обычно тогда, когда применяется блочное выравнивание и ширина колонки, в которой верстается текст, невелика. Эффект усугубляется при увеличении кегля или уменьшении ширины колонки. Для того чтобы хоть как-то бороться с этим некоторые DTP-системы выполняют разрядку букв (трекинг) в длинных словах у тех строк, в которых промежутки особенно велики. Результаты такой верстки с разрядкой можно часто наблюдать в газетных статьях.

Межбуквенные просветы

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

Кернинг

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

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

Трекинг

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

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

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

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

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

Интерлиньяж

Это расстояние между базовыми линиями соседних строк. Оно измеряется в пунктах и складывается из кегля шрифта и расстояния между строками. Например, кегль 10 пунктов при расстоянии между строками в 2 пункта называют кеглем 10 пунктов при интерлиньяже 12 пунктов. Пишется 10/12.

Отрицательный межстрочный интервал

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

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

Подгонка текста

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

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

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

Уплотните трекинг, чтобы вогнать короткие строки, завершающие абзацы.

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

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

Немного уменьшите ширину символов (например, установите масштаб 95%).

Уменьшите ширину средника между колонками или слегка сократите ширину полей.

Виды вёрстки

Выделяют два наиболее распространённых вида:

• Табличная вёрстка;
• Блочная вёрстка.

Идеальный алгоритм вёрстки сайта?

Изображение

picture и srcset

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

Инпуты

Тег form

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

Типы

Разные значения аттрибута type (email, number, password и другие) включают правильную клавиатуру на телефонах и помогают валидировать данные

Автофокус

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

Инструменты верстальщика

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

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

Наиболее релевантное ПО для верстальщика — редакторы кода, такие как:

• Notepad (наименее предпочтительный вариант, хотя и временами использующийся).
• SublimeText.
• Webstorm — пожалуй, лучший из существующих.

Компоненты

Теория близости

Объекты, расположенные близко друг к другу, воспринимаются связанно. Если поставить заголовок посредине нескольких статей, будет сложно разобраться, к какому из текстов относится заголовок. Кстати, на Хабре именно такая ошибка. Заголовок параграфа должен быть ближе к своему параграфу, а не быть равноудален от всех. Существует масса других примеров с ошибкой в теории близости.

Пустой блок

Конструкция

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

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

Маштабируемость

Поддерживаемость

Несколько простых практик:

Архитектура

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

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

Типовая страница

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

Обратная связь (наведение, клик, скролл)

Блоки

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

Область клика

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

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

Не накладывайте поверх кликабельных элементов другие элементы, например, иконку лупы над инпутом. В крайнем случае добавьте иконке pointer-events или решите это более поддерживаемым способом (в случае с лупой, добавьте её через background-image).

Правильный формат ссылки

Если ссылка является почтовым адресом, укажите в ссылке mailto:. Тогда по клику на неё сразу откроется почтовый клиент. Тоже самое можно сделать для телефона префиксом tel:.

Скролл на айфоне

По умолчанию, горизонтальный скролл в айфоне обрывистый и неуклюжий. Включить привычный скролл с инерцией можно свойством -webkit-overflow-scrolling: touch.

Признаки правильной вёрстки

• Структура страницы составлена в HTML, в то время как стили вынесены в style.css. В HTML остаются только наименования стилей, присвоенных элементам, но параметры стилям присваиваются в отдельном css.
• У хорошего сайта при просмотре кода отображается только вёрстка. Функциональный код, например, <?php> и часть javascript вынесена также в отдельные классы, недоступные пользователю.
• Чистота кода необходима для быстрой проверки ошибок и доработки. Выносите стили и функционал во внешние классы, соблюдайте отступы, не плодите сущности.
• Правильная вёрстка сохраняет размеры макета. Часто неопытные веб-дизайнеры сильно выходят за заданные ограничения шаблона, и внешний вид страницы отличается от дизайна. Более того, лишние пиксели могут привести к проблемам с адаптивностью, «поехавшей» вёрстке.
• Используйте методологию Яндекса БЭМ. Она позволяет оптимизировать код.
• Обязательно соблюдайте кроссбраузерность. Современная вёрстка должна корректно отображаться в популярных браузерах при всех разрешениях: Chrome, Firefox, Opera, Safari. Это требование всегда есть в технических заданиях.
• Используйте заголовки H1, H2, …, H6.
• Заполняйте атрибуты элементов: <title>, <alt>, <description>.
• Сведите к минимуму изображения — всё, что возможно, должно прописываться текстом или кодом, и в последнюю очередь представлено в виде растровых картинок.

Проверка вёрстки

Базовое тестирование включает в себя ручные прогоны сценариев в нескольких браузерах и устройствах.

Боле фундаментальную информацию дают сервисы jigsaw.w3.org/css-validator и validator.w3.org. 

Производительность

Селекторы

Браузер обрабатывает свойства справа налево. Селектор .section a div вначале найдет все элементы div на странице, затем все ссылки a и только потом определит, какие именно a входят в элемент .section.

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

Анимации

Тяжелые анимации сильно тормозят страницу. Самые лучшие свойства для анимирования — transform и opacity. Они меньше других влияют на производительность.

Существует способ оптимизировать сложные вычисления за счет переноса части сложных вычислений c центрального процессора на графический. Такое аппаратное ускорение можно включить свойством transform: translate3d(0, 0, 0). Оно создаст отдельный слой компоновки с которым будет работать графический процессор.

Пропишите алгоритм вёрстки реферата, коротко

Семантика

Верстка

Нативные элементы HTML5 содержат правильные семантичные аттрибуты. Важно верстать таблицу с помощью <table>, формы c помощью form, кнопки с помощью <button> и т.д. Не забудьте поставить аттрибут alt в каждой картинке.

ARIA и роли

Роли и атрибуты ARIA помогают пользоваться сайтом со скрин-ридера и других нестандартных технологий. На доступном сайте не должно быть недоступных с клавиатуры элементов управления. Каждый такой элемент должен иметь свое описание. Это описание может быть невидимым и указано через аттрибут aria-label.

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

Порядок фокусировки можно подредактировать аттрибутом tabindex. Совсем отменить семантику элемента можно с помощью role=”presentation” (например, чтобы используемая для вёрстки таблица не воспринималась как таблица с данными). Большое количество других рекомендаций можно почитать в этой статье про доступность.

Печать

Попробуйте распечатать ваш интерфейс.

Микроразметка

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

Скорость загрузки

Сжать стили

Конкатенируйте, минифицируйте и кешируйте файлы стилей.

Критичные стили

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

Префетчинг

Браузер можно предупредить об использовании на странице ресурсов с другого адреса. Тогда браузер заранее преобразует URL этих ресурсов в IP и не будет тратить время на поиск DNS.

Стиль

Стиль — это настроение и «вкус» макета. Источник стиля следует искать как в содержании, так и далеко за его пределами: книга про Гутенберга необязательно должна быть похожа на 42-строчную Библию. Абсолютно любой элемент — от пропорций формата до межбуквенного расстояния — является стилеобразующим, однако в неравной степени. К одной и той же конструкции применимы разные стили.

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

Несколько примеров из рубрики «Переверстка».

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

Создаем структуру с нуля, делим текст на мелкие порции — кусочки, сходные по строению и объему:

На основе структуры собираем конструкцию:

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

Общая структура афиши ясна. Название театра, месяц, спектакли и контактная информация в подвале:

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

Теперь стиль: пусть будет классика. Оставляем антикву и спокойный, ненасыщенный красный, добавляем иллюстрацию «от руки»:

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

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

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

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

Поддерживаем стиль иллюстрации и заголовков крафтовым фоном:

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

Структура

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

Таблица

Адаптивность

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

Сделать таблицу удобной не просто. Советую почитать статьи про отображение больших таблиц и переверстку.

Табличная вёрстка

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

При табличной вёрстке страница поделена на соседствующие друг с другом ячейки. Напоминает стандартную работу с таблицами в Excel.

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

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

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

Табличная вёрстка создаётся с помощью тега <table>. Он задаёт основные параметры таблицы — длину, ширину и другие. Ниже в иерархии идёт тег <tr>, создающий новую строку, а под ним уже располагаются теги <td>, задающие столбцы.

Текст

Размер шрифта и интерлиньяж

Оптимальная высота строки (line-height) 1.4 — 1.8 от размера шрифта. Это значение лучше указывать множителями, а не конкретными значениями в пикселях. Так оно будет масштабироваться относительно любого размера шрифта.

Длина строки

Ограничение длины строки помогает легче перепрыгивать глазу со строки на строку. Текст удобно читать, если в него уменьшается минимально 6 слов, а максимально 12. Достаточно использовать min-width и max-width.

Длина строки влияет на интерлиньяж. На телефонах line-height должен быть меньше, чем на большом мониторе. Существует интересный адаптивный подход (css-шлюзы), который плавно подстраивает размер шрифта и интерлиньяж под экран.

Ограничение длинных слов

Текст в строке может оказаться непредвиденно большим, в этом случае его можно ограничить с помощью text-overflow.

Выравнивание по ширине

Многие знают, как плохо выглядит выравнивание по ширине (text-align: justify). Текст становится трудно читать из-за больших отступов между словами. В книгах и газетах нет таких больших пробелов из-за переносов в словах. Чтобы включить такой перенос нужно использовать свойство hypnens, оно автоматически проставляет мягкие переносы в словах. К сожалению, это работает далеко не везде, но можно использовать плагин и словарь к нему.

Типограф

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

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

Продвинутые методы работы с типографикой