Верстка статьи: Верстка и оформление статей на сайте

Содержание

Верстка и оформление статей на сайте

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

Навигация по статье

Оформление текста статей на сайте
Повышаем ценность статьи
Дополнительное оформление
Вывод

Оформление текста статей на сайте

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

важно

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

Как красиво оформить статью на сайте?

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

Читайте также: Как составить мета-теги

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

Для наглядного примера возьмем фрагмент текста из правовых документов Яндекса в разном оформлении.

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

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

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

Читайте также: Поиск ниши для сайта

важно

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

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

важно

Делайте так, чтобы можно было визуально легко отделить один абзац от другого. Используйте теги <p> или <br>.

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

Присоединяйтесь к
Rush-Analytics уже сегодня

7-ми дневный бесплатный доступ к полному функционалу. Без привязки карты.

Попробовать бесплатно

Повышаем ценность статьи

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

Кроме того, рекомендуется использовать дополнительные элементы, которые позволят улучшить восприятие информации:

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

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

важно

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

Дополнительное оформление

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

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

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

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

Вывод

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

из-за них вы теряете читателей

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

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

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

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

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

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

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

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

Подробнее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заголовок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как делать красивые статьи на Тильде

В статье рассказываем основные приемы, как работать с текстом на Тильде. Эти правила помогут красиво и быстро верстать статьи и выработать стиль издания или блога. Правила верстки универсальны и пригодятся всем, кто работает с текстом и типографикой.

Содержание

1. Текст должен легко читаться
2. Типографика: делаем текст визуально интересным
3. Как найти свой стиль подачи контента
4. Не перестараться с версткой
5. Визуальный контент: добавляем фотографии, видео и иллюстрации
6. Обложка статьи, или как произвести первое впечатление на читателя
7. Навигация: пусть в статье будет удобно ориентироваться
8. Чеклист по верстке статьи

1. Текст должен легко читаться

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

Используйте ширину текста 8 колонок, а не 10 или 12. В кириллице для комфортного восприятия в строке должно помещаться от 55 до 70 символов. Если строки длинные, то, пока читатель переводит глаза от конца предыдущей строки к началу следующей, он может потерять строку или смысл текста.

Верстка

Оформление элементов контента в статье (текста, заголовков, изображений и др).

Лонгрид «Мечты об Арктике»

Истории выпускников БВШД. Мария Саблина

Лифт Space. Михаил Пономаренко об изменениях методов продвижения в социальных сетях

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

Делим текст на абзацы

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

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

Отбивка

Дополнительная пустая строка между двумя абзацами.

Баухауз: когда стул — предмет искусства. Лонгрид

Журнал Oh, my Moscow! Машина времени. Часть 1

Магадан — культурный город. Лонгрид «Ледник»

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

Выбираем шрифты, которые не отвлекают от содержания текста

Выбор шрифтов с засечками или без зависит исключительно от тематики и стилистики сайта.

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

Засечка

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

Акцидентные шрифты

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

Лучше выбрать нейтральные текстовые шрифты, которые не будут отвлекать читателя от содержания. Хорошо читаются шрифты без засечек PT Sans, Arial, Futura, Open Sans. Из шрифтов с засечками в сплошном тексте хорошо считываются PT Serif, Times New Roman, Baltika или Charter.

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

Оптимальная насыщенность шрифта для основного текста — это normal (нормальный). Light (тонкий), super light (очень тонкий) или bold (жирный) не стоит использовать — текст будет плохо читаться.

Если в статье много текста, используйте размер шрифта 18 или 20 px. А если много изображений и текст используется минимально, можно выбрать шрифт покрупнее — 22 или 24 px.

Используем возможности Тильды

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

«Висячие» предлоги

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

Когда в тексте неправильные кавычки и тире, текст выглядит неаккуратно и замусорено. Например, у дефиса «-» и тире «—» в русском языке разные значения. Дефис — знак орфографический, а тире — пунктуационный.

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

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

2. Типографика: делаем текст визуально интересным

Порядок в тексте: заголовок, подзаголовок и лид

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

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

Журнал «Тогда». Симфония гудков

Журнал «Тогда». Штаны и юбки

Tilda Education. Зачем компании нужен HR лендинг

Лид после обложки кратко описывает содержание статьи. Он вовлекает читателя, помогает ему понять, о чем речь в статье. В лиде используется чуть более крупный размер шрифта, чем у основного текста. Если размер шрифта основного текста 20 px, смело задавайте в лиде размер не менее 30 px. Можно сверстать немного крупнее первый абзац после заголовка — использовать его как лид для каждой главы.

Баухауз: когда стул — предмет искусства. Лонгрид

Tilda Publishing. Визуальная иерархия сайта

Проект Bunch of questions. Лев Кассиль

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

Добавим контраста: как выделить важные моменты в тексте

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

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

Лонгрид «Мечты об Арктике»

Solarcomplekt. Документы для оформления зеленого тарифа

Проект Bunch of questions. Ульяна Кузнецова

Happyfication. Супер… но не сегодня

Журнал «Тогда». Главный советский миф, или «Взятие Зимнего дворца»

Лонгрид «Мечты об Арктике»

Истории выпускников. Типацеха

Сделайте цитаты более живыми — добавьте фотографии спикеров.

РИА Новости. Летят журавли

Tilda Education. 12 психологических приемов повышения конверсии сайта

Чтобы список смотрелся аккуратно, используйте блок с нумерацией.

Баухауз: когда стул — предмет искусства. Лонгрид

Блог О2 Kislorod. Как превратить клиента с негативными отзывами в последователя?

Блог Amplifr. Гид по рекламе в Фейсбуке и Инстаграме

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

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

3. Как найти свой стиль подачи контента

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

Эксперименты с типографикой

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

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

#madeontilda Лаборатория Wonderful

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

Графические элементы

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

Изображения и фон

Можно поэкспериментировать с оформлением галерей в статье и расположением фотографий относительно текста. В разделах «Изображение» и «Галерея» библиотеки Тильды вы найдете много разных комбинаций изображений.

Блог FY:R. С чистого листа

Happyfication. Ум – друг или враг?

РИА Новости. Война и мир

Магадан — культурный город. Лонгрид «Ледник»

РИА Новости. Летят журавли

Интересное решение — сменить цвета фона между разделами или главами — плавно или контрастно. В Тильде это блоки DV11 и DV11A в категории «Разделитель».

Теории и практики. От товара к товарищу

РИА Новости. Летят журавли

Телеграф.дизайн. Антон Колотило

Блог Amplifr. Конспект выступлений с конференции «Шторм»

Нулевой блок — пространство для экспериментов в верстке

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

Блог FY:R. Торжество внутреннего мира

Телеграф.дизайн. Антон Колотило

Блог FY:R. Outline

Телеграф.дизайн. Антон Колотило

Вдохновляемся и делаем

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

4. Не перестараться с версткой

Узнав столько нового, легко увлечься. Если нашпиговать статью стилями типографики — читатель запутается и упустит смысл текста.

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

Гарнитура

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

Колонки и отступы

Одна ширина колонок в тексте нужна, чтобы текст выглядел аккуратно и не имел волнообразных краев. Чаще всего используют 8 колонок для основного текста и 10 колонок для ключевых фраз. Но, скажем, использовать еще и 12 колонок для заголовков — уже слишком. Ширину заголовка лучше тоже сделать либо 8 колонок, либо 10.

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

5. Визуальный контент: добавляем фотографии, видео и иллюстрации

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

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

Магадан — культурный город. Лонгрид «Ледник»

Магадан — культурный город. Лонгрид «Жизнь на Севере»

Блог FY:R. Торжество внутреннего мира

Оптимальные размеры изображений на Тильде

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

Полноэкранное изображение — ширина 1680 px
Изображение на ширину 12 колонок — 1160 px
Изображение на 10 колонок — 960 px
Изображение на 8 колонок — 760 px
Изображение шириной 6 колонок — 560 px

Где искать подходящие изображения

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

Если такой возможности нет, можно поискать бесплатные изображения с лицензией Creative Commons на стоках (Unsplash, Everypixel), в Google или на Flickr. Фотографии на Flickr интересны тем, что их выкладывают пользователи, и можно найти много интересных снимков, но нужно не забывать следить за лицензией и использовать только те фотографии, которые отмечены лицензией Creative Commons.

unsplash. com

everypixel.com

flicr.com

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

Как использовать изображения в верстке статьи

Фотографии и изображения могут иллюстрировать текст — например, делать объяснение сложных терминов наглядным.

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

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

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

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

Tilda Publishing. Доверие в дизайне

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

6. Обложка статьи, или как произвести первое впечатление на читателя

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

Размер заголовка и высота обложки

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

Журнал Oh, my Moscow! Небесное кружево

Блог Сироп Клуб. Хороший сервис: одно простое решение

Журнал «Тогда». Как написать сценарий и снять кино

РИА Новости. Летят журавли

Если статья входит в серию или это внутренняя страница проекта, можно сделать высоту обложки 50 или 75%. Так акцентируется внимание на иерархии страниц.

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

Заголовок на обложке

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

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

Журнал «Тогда». Основы черчения

Лонрид о самых знаменитых зданиях стиля «Конструктивизм»

Блог BaseTemplates. Getting Started with Pitch Deck Template

Журнал «Тогда». По пути в утопию

Журнал Oh, my Moscow! Москва подарочная

Happyfication. Супер… но не сегодня

Можно обойтись без картинки

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

Tilda Education. 20 лекций TED для дизайнеров

Блог О2 Kislorod. Как превратить клиента с негативными отзывами в последователя?

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

7. Навигация: пусть в статье будет удобно ориентироваться

Если статья длинная, создайте навигацию, чтобы читатель мог сориентироваться.

Например, можно сделать содержание со списком глав в начале статьи и проставить на них якорные ссылки. Блок с якорной ссылкой на Тильде находится в категории «Другое» под номером Т173.

В статье можно использовать навигацию с точками, она фиксируется во время скролла — это помогает передвигаться внутри страницы между главами. Это блок МЕ604 в категории «Меню».

Якорные ссылки

Якорная ссылка отправляет посетителя к нужному месту на странице.

culture-city.com/music-xx. Навигация с точками

Переходы внутри сайта

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

Если статья длинная, можно добавить кнопку «Наверх». В библиотеке Тильды блок с кнопкой «Наверх» находится в разделе «Форма и кнопка» под номером BF702.

Истории Лифт Space

Журнал «Тогда»

Журнал Oh, my Moscow!

Проект Bunch of questions

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

Чеклист по верстке статьи

Чтобы быстро проверить готовность материала к публикации.

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

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

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

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

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

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

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

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

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

Текст, иллюстрации, дизайн и верстка: Юлия Засс

Если материал вам понравился, расскажите о нем друзьям. Спасибо!

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

24 лекции TED для дизайнеров — подборка

Как не облажаться с дизайном

Как стать дизайнером — 3 составляющие профессии дизайнера

Визуальная иерархия сайта: оформление и организация контента

Флэт (flat) дизайн: лучшие практики плоского дизайна

Навигация по сайту — примеры как сделать навигацию удобной

Белое пространство: способы вёрстки контента на сайте

Обучение веб дизайну: 70+ лучших ресурсов о веб-дизайне

Как правильно писать тексты для сайта

Картинки для сайта — как подбирать фото и изображения на фотостоках

Как наказать пиратов и что делать, если ваш сайт украли

Где скачать иконки для сайта бесплатно?

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

Евгения Черешкова, автор, редактор, SEO-копирайтер

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

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

В этой статье рассказываем:

как оформить страницу на сайте, чтобы она стала интереснее,

какие ошибки допускает большинство владельцев сайтов,

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

Блоки: сохраняйте порядок на странице

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

Представьте, будто вы строите аккуратный домик. Если какой-то блок «выпирает» или рядом стоит слишком много акцентов — архитектура развалится.

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

Модульность

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

Главная страница сайта дизайн-студии RoyDavid Architecture разделена на четкие блоки. Внутри каждого блока заложен свой ритм — где-то три колонки, где две. Страница смотрится аккуратно и динамично одновременно

Модули необязательно должны быть горизонтальными. Узкие колонки со ссылками характерны для новостных сайтов. На скриншоте пример главной страницы журнала Dezeen

Модули смотрятся аккуратно, если они не пересекаются друг с другом.

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

Принцип близости

Элементы в блоке должны стоять ближе друг к другу, чем к другим блокам. То есть:

заголовки стоят ближе к тексту, к которому они относятся,

подпись стоит ближе к картинке, к которой относится,

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

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

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

Контраст

В композиции картины, интерьера, книжной страницы отлично работает контраст. Используйте контраст и на web-странице:

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

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

«Этаж» также создается за счет смены ритма.

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

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

Акценты со смыслом

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

Порядок в блоках создает общий порядок страницы

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

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

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

Иллюстрации

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

Выноска на полях привлекает внимание, но сама по себе малоинформативна и плохо сочетается по смыслу с заголовком

Выноска на полях сочетается по смыслу с заголовком: она отвечает на вопрос «Как можно больше — это сколько?». Читатель быстро получает полезную информацию

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

Альтернатива – качественные иллюстрации, схемы.

Пример иллюстрации из статьи о выборе строительной бригады: как оценить качество ремонта на объекте

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

Заголовки

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

Редакция «Ревдинского рабочего» знает толк в заголовках. Их не убивает даже визуально массивный блок с рекламой

Чтобы заголовок стал акцентом:

— он должен быть контрастным по отношению к основному тексту и другим элементам на странице;

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

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

Следите, чтобы заголовок «накрывал» все колонки. Иначе создается впечатление, что озаглавлена только первая колонка, а вторая остается не у дел;

Выравнивайте заголовок по левому краю. Заголовок по центру нарушает спокойный ритм левого края. Модуль распадается.

Абзац

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

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

Делите текст на абзацы: не делайте их слишком длинными или слишком короткими. Золотое правило: 1 абзац = 1 мысль.
Легко читаются абзацы не больше 5-6 строк.

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

Также шрифт должен соответствовать настроению статьи. Знаменитый Comic Sans читается легко. Но если его выбрать для серьезной статьи, смысл текста потеряется.

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

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

Строки не должны быть слишком длинными или короткими. Тяжело читать строки свыше 90 символов: нельзя быстро найти начало следующей строки. Также сложно воспринимать смысл в длинных узких колонках.
Cтроки состоят из 98-105 символов. Легко потеряться

Строки слишком короткие. Глазам приходится быстро перемещаться от строки к строке, от колонки к колонке. Ничего кроме невроза такая верстка не вызывает

65-75 символов в строке — читать легко

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

Расстояние между строк слишком маленькое. Все слиплось, читать невозможно

Межстрочное расстояние слишком большое. При переходе на другую строку глаз теряет начало

Оптимально

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

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

Гиперссылки

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

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

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

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

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

Формы

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

элементы смотрятся вместе как единое целое;

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

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

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

Дополнительные элементы, привлекающие внимание

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

Выноски на полях

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

Ссылки на полезные сайты в статье о выборе строительной бригады вынесены на поля

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

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

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

Так цитаты оформляет AD Magazine

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

Случайные блоки

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

Не ставьте на страницу больше одного такого элемента.

На сайте Карима Рашида заголовки нарушают принцип модульности. Но только заголовки

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

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

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

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

Блоки смотрятся как прямоугольники, не наезжающие друг на друга.

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

Динамика статьи создается за счет контрастов.

Заголовок, иллюстрация, цитата, выноски на полях, гиперссылки — это акценты. Они контрастируют с основным текстом.

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

Иллюстрации хорошего качества. Исключения, но не оправдания — статьи-репортажи с проекта.

Каждая картинка несет информацию. Нет «мертвым» фотографиям Shutterstock.

Если нет подходящего фото, его заменяет схема, картинка.

Левый край ровный. Заголовки, иллюстрации не выровнены по центру.

Текст разбит на абзацы.

1 абзац = 1 мысль.

Длина абзаца — не больше 5 строк.

Длина строки 55—75 символов.

Чем короче строка, тем меньше межстрочный интервал.

Строки не слипаются и не отрываются друг от друга. Абзац смотрится как красивый монолит.

Шрифт легко читается.

Шрифт соответствует настроению статьи.

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

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

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

Гиперссылки выделены синим.

При наведении на гиперссылку курсор превращается в «руку».

Множество гиперссылок объединены в блок. Они не разбросаны по абзацу.

Форма — это блок. Она смотрится единым целым.

Пользователь понимает, зачем он отвечает на вопросы формы.

———————-

Смотрите также по теме:

Как создать и чем наполнить сайт для дизайнера интерьера

Как сделать сайт на Tilda. Подборка обучающих материалов

Как сделать сайт удобным: элементы навигации

Тексты на сайте дизайн-студии: как писать, чтобы читали

Как зарегистрировать адрес своего сайта

————————————————————————

Евгения Черешкова,

редактор, автор, SEO-копирайтер

Помогаю сделать контент интереснее и понятнее для читателя.

Сайт textforbusiness.ru

Telegram, WhatsApp: +7(903)000-47-04

Skype, email: homanova@yandex. ru

Статьи по верстке | WebForMySelf

Использование Google API для доступа к переменным шрифтов

Верстка \ Статьи по верстке 2019-10-29

От автора: веб-сайт Google Fonts является отличным ресурсом, и, учитывая постоянно растущий интерес к переменным шрифтам, часто возникает вопрос, будут ли Google Fonts иметь переменные шрифтов, и если да, то как мы будем их использовать?

Продолжить чтение →

Интерактивная анимация в HTML электронных письмах

Верстка \ Статьи по верстке 2019-07-03

От автора: в прошлом месяце Panic анонсировала Playdate, красивую игровую систему с черно-белым экраном. Я был довольно большим поклонником Panic в течение длительного времени: от Coda для How to Count Стивена Фрэнка до одной из моих самых любимых футболок для Firewatch. И их тизерная страница действительно потрясающа, с интерактивной 3D-моделью консоли, которой вы можете управлять в браузере.

Продолжить чтение →

Миллиард способов того, как использовать SVG

Верстка \ Статьи по верстке 2019-05-17

От автора: ранее мы рассмотрели, что такое SVG-изображения и почему они отлично подходят для использования в веб-приложениях / на сайтах. В этой статье мы рассмотрим различные способы того, как использовать SVG в браузерах. Данными методами мы располагаем в HTML, CSS и JavaScript. Это будет небыстро, так что возьмите немного содовой (или другой предпочтительный напиток) и поехали.

Продолжить чтение →

Как стать современным верстальщиком и заработать на этом

Верстка \ Статьи по верстке 2018-10-10

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

Продолжить чтение →

5 страхов веб-дизайнеров, связанных с CSS Grid

Верстка \ Статьи по верстке 2018-01-22

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

Продолжить чтение →

Понятие пути критического рендеринга

Верстка \ Статьи по верстке 2017-02-08

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

Продолжить чтение →

Битва css-in-js

Верстка \ Статьи по верстке 2017-01-09

От автора: мы на сайте HelloFresh постоянно боремся со стилями. Еще год назад стили на нашем сайте были плохими, запутанными, кода было слишком много, как и у множества других компаний. Мы захотели поправить эту ситуацию и нашли новенькую библиотеку css-in-js.js, очень крутая штука.

Продолжить чтение →

Совет: на всякий случай именуйте линии CSS Grid

Верстка \ Статьи по верстке 2016-12-28

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

Продолжить чтение →

Интерактивная валидация HTML форм

Верстка \ Статьи по верстке 2016-12-26

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

Продолжить чтение →

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

Верстка \ Статьи по верстке 2016-12-26

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

Продолжить чтение →

Список статей — Вёрстка — Webmascon

CSS вёрстка: учимся сами
Время от времени в мой почтовый ящик приходит очередное письмо, содержащее всего одну просьбу: меня просят рассказать о неком алгоритме изучения «блочной» вёрстки. (2005.08.15)

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

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

CSS дизайн: с учетом контекста
Остроумная идея: почему бы не использовать CSS для показа контента на странице, предназначенного, скажем, только для распечатки или для сотового телефона? (2004.10.02)

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

«Резиновая вёрстка»: используем отрицательные поля
Чтобы показать, как полезны могут быть отрицательные поля для создании резиновой вёрстки, давайте-ка сделаем резиновый двухколоночный макет страницы с «шапкой» и «подвалом», причём в коде страницы контент будет расположен перед блоком боковой колонки. (2004.07.24)

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

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

Линейки в таблицах
При помощи простого JavaScript-а можно улучшить отображение и восприятие таблиц с большим количеством строк. (2004.04.12)

CSS Design: Нестандартное подчеркивание ссылок
Сплошная линия подчеркивания у ссылки? Это слишком скучно! Гораздо веселее выглядит ссылка в цветочек, полосочку и мелкую сеточку. (2004.02.21)

Трюк с блочной моделью CSS
Чтобы ваш «divный» дизайн не выглядел ужасно в броузерах, неверно трактующих блочную модель CSS, воспользуйтесь трюком Box Model Hack. (2004.02.20)

CSS Design: Укрощение списков
Настало ваше время командовать спискам, как себя вести. Хватит им шататься беспризорно по вашим веб-страницам и уродовать их отступами и жирными маркерами.

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

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

Позиционирование: всему свое место
Глава 9 из книги ‘Создание веб-сайтов: искусство верстки’. Посвящена способам позиционирования с помощью таблиц и CSS.

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

Блоки в документах
Глава 7 из книги ‘Создание веб-сайтов: искусство верстки’. Оформление блоков вещь интересная, но нас, как верстальщиков, в первую очередь интересует верстка блоков. Конечно, для уникально оформленного блока придется создавать уникальный HTML-код, но все же есть достаточно много универсальных приемов, которые встречаются сплошь и рядом.

One True Fit — верстаем в рамках стандартов
Как создать без таблиц красивый, привлекательный, современный коммерческий веб-сайт используя стандартные CSS и XHTML?

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

CSS: правильное использование — залог успеха
Вообще жестких правил при написании таблицы стилей нет, потому что написать стиль можно по-разному и это будет работать, однако есть множество рекомендаций. Эти рекомендации вы найдете в Главе 5 книги Михаила Дубакова «Веб-мастеринг средствами CSS «

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

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

Кулинарные рецепты CSS
Несколько полезных хитростей и советов по CSS

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

Предложение WaSP по основным стандартам
WaSP в двух словах описывает свою цель по популяризации web-стандартов и пропаганде их поддержки.

Размер имеет значение
Статья о правильном употреблении ключевых слов для размера шрифта: font-size: от xx-small до xx-large.

Реализация эффекта rollover c помощью CSS
С помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка.

Продвинутая CSS-верстка: шаг за шагом
Задача: воспроизвести с помощью CSS основную страницу WebRef. Инструменты: CSS и много свободного времени.

Дизайн макетов статей, темы, шаблоны и загружаемые графические элементы на Dribbble

Посмотреть журнал 365
365 Магазин
Просмотр #Exploration — Страница статьи
# Исследование — Страница статьи
Посмотреть журнал 365
365 Магазин
Посмотреть #Exploration — новый макет и иллюстрации для моего блога
#Exploration — новый макет и иллюстрации для моего блога
Просмотр #Исследование — Редакционный дизайн — 03
#Исследование — Редакционный дизайн — 03
Просмотр #Исследование — Редакционный дизайн — 02
#Исследование — Редакционный дизайн — 02
Посмотреть макет блога
Макет блога
Просмотр #Exploration — Редакционный дизайн
#Исследование — Редакционный дизайн
Посмотреть примитив
Примитив
Посмотреть блог SmartUV
Блог SmartUV
Посмотреть макет личного блога
Макет личного блога
Посмотреть STUDIOLISE — СТАТЬЯ
СТУДИЯ — АРТИКУЛ
Посмотреть дизайн брошюры
Оформление брошюры
Посмотреть Boxmind — веб-приложение для онлайн-публикаций
Boxmind — веб-приложение для публикации в Интернете
Посмотреть Financial Times — Статья
Financial Times — Статья
Макет типа просмотра
Типовая компоновка
Посмотреть блог агентства
Блог агентства
Просмотр макета страницы статьи
Макет страницы статьи
Посмотреть страницу статьи НАСА
Страница статьи НАСА
Посмотреть научную статью — Макет
Научная статья – Макет
Посмотреть страницу статьи музыкального журнала
Страница статей музыкального журнала
Посмотреть театр WDT
Театр WDT
Посмотреть исследование макета
Исследование макета
Посмотреть искрометную статью — Макет
Игристое изделие – макет

Зарегистрируйтесь, чтобы продолжить или войдите в систему

Идет загрузка еще…

Quarto — Макет статьи

Обзор

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

Заполняет область основного содержимого
Переполняет область содержимого
Охватывает всю страницу
Занимает поля документа

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

Все возможности компоновки, описанные в этом документе, работают для вывода HTML, а многие работают для вывода PDF и LaTeX. Подробнее о выводе PDF/LaTeX см. в разделе Макет PDF/LaTeX.

Колонка корпуса

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

.тело колонны

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

 ::: {.column-body-outset}
Исходное содержание...
:::

.column-body-outset

Столбец страницы

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

.column-page

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

 :::{. страница-столбца}
![](изображения/слон.jpg)
:::

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

 ```{р}
#| столбец: страница
вязальщица::кабель(
  мткары[1:6, 1:10]
)
```

3 Mazda RX9	21,0	6	160	110	3,90	2,620	16,46	0	1	4
Мазда RX4 Ваг	21,0	6	160	110	3,90	2,875	17.02	0	1	4
Датсун 710	22,8	4	108	93	3,85	2,320	18,61	1	1	4
Хорнет 4 Драйв	21,4	6	258	110	3,08	3,215	19,44	1	0	3
Hornet Sportabout	18,7	8	360	175	3,15	3. 440	17.02	0	0	3
Доблестный	18,1	6	225	105	2,76	3.460	20,22	1	0	3

Кроме того, вы можете использовать .column-page-inset , чтобы слегка вставить элемент со страницы, например:

.column-page-inset

Экранная колонна

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

 ::: {.column-screen}
![Полноэкранное изображение](/image.png)
:::

.колонка-экран

Следующий код отображает карту Leaflet по всей странице.

 ```{р}
#| столбец: экран
библиотека (буклет)
листовка() %>%
  addTiles() %>% # Добавляем тайлы карты OpenStreetMap по умолчанию
  addMarkers(lng=174. 768, lat=-36.852, popup="Место рождения R")
```

Вставка экрана

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

 ::: {.column-screen-inset}
![Полноэкранное изображение](/image.png)
:::

.column-screen-inset

Модификатор inset-shaded приводит к тому, что блок занимает всю ширину, но имеет слегка затененный фон. Например:

 ```{р}
#| столбец: экран-вставка-затененный
библиотека (буклет)
листовка() %>%
  addTiles() %>% # Добавляем тайлы карты OpenStreetMap по умолчанию
  addMarkers(lng=174.768, lat=-36.852, popup="Место рождения R")
```

макетов столбцов, таких как screen-inset-shaded будет работать с расширенным макетом рисунка. Например, легко создать многоколоночное представление рисунков, охватывающих весь документ:

 ```{р}
#| столбец: экран-вставка-затененный
#| макет-nrow: 1
участок (автомобили)
сюжет(ирис)
участок (давление)
```

Содержимое полей

Вы можете разместить содержимое в пределах правого поля документа Quarto. Например, здесь мы используем класс .column-margin для размещения изображения на полях:

 ::: {.column-margin}
![Изображение на полях](image.png)
:::

.column-margin

Цифры полей

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

 ```{р}
#| лейбл: fig-mtcars
#| fig-cap: «MPG против лошадиных сил, окрашенных трансмиссией».
#| столбец: поле
библиотека (ggplot2)
mtcars2 <- mtcars
mtcars2$am <- фактор(
  mtcars$am, labels = c('автоматический', 'ручной')
)
ggplot (mtcars2, aes (л.с., мили на галлон, цвет = am)) +
  geom_point () + geom_smooth (формула = y ~ x, метод = «лесс») +
  тема (легенда.позиция = 'внизу')
```

Рисунок 1. Сравнение расхода топлива на галлон и мощности в зависимости от передачи.
Таблицы полей
Вы также можете разместить таблицы на полях документа, указав столбец : поле .
```{р} #| столбец: поле вязальщица::кабель( мткары[1:6, 1:3] ) ```
Мазда RX4 21,0 6 160
Мазда RX4 Ваг 21,0 6 160
Датсун 710 22,8 4 108
Хорнет 4 Привод 21,4 6 258
Hornet Sportabout 18,7 8 360
Доблестный 18,1 6 225
Несколько выходов
Вы также можете настроить определенные типы выходных данных (например, рисунки) для размещения на полях. Например, следующий код отобразит таблицу, суммирующую mtcars набор данных и визуализировать большую часть данных на полях рядом с таблицей.
```{р} #| рис-столбец: поле mtcars2 <- mtcars mtcars2$am <- фактор( mtcars$am, labels = c('автоматический', 'ручной') ) вязальщица::кабель( мткары[1:6, 1:6] ) библиотека (ggplot2) ggplot (mtcars2, aes (л. с., мили на галлон, цвет = am)) + geom_point () + geom_smooth (формула = y ~ x, метод = «лесс») + тема (легенда.позиция = 'внизу') ```
Мазда RX4 21,0 6 160 110 3,90 2,620
Мазда RX4 Ваг 21,0 6 160 110 3,90 2,875
Датсун 710 22,8 4 108 93 3,85 2,320
Хорнет 4 Привод 21,4 6 258 110 3,08 3,215
Hornet Sportabout 18,7 8 360 175 3,15 3.440
Доблестный 18,1 6 225 105 2,76 3.460
Другой контент
Вы также можете разместить содержимое на полях, указав столбец полей с помощью элемента div с расширением . 9{x} f(u)\,du\right)=f(x).\]
Разрывы страниц
Шорткод pagebreak позволяет вам вставить родной разрыв страницы в документ (например, в LaTeX это будет \newpage , в MS Word родной разрыв страницы docx, в HTML разрыв страницы после: всегда директива CSS и т. д.):
стр. 1 {{<разрыв страницы>}} стр. 2
Собственные разрывы страниц поддерживаются для HTML, LaTeX, Context, MS Word, Open Document и ePub (для других форматов символ перевода страницы 9).0275\f вставляется ).
Ссылки на поля
Сноски и список литературы обычно располагаются в конце документа, но вы можете разместить их на полях, установив следующий параметр ¹ во вступительной части документа:
¹ Вы также можете размещать ссылки в другом месте (например, внизу блока, раздела или документа).
--- ссылка-местоположение: маржа место цитирования: маржа ---
При установке этих параметров сноски и цитаты (соответственно) будут автоматически размещаться на полях документа, а не внизу страницы. Например, когда я цитирую Xie, Allaire, and Grolemund (2018), сама библиографическая запись будет отображаться на полях.
Се, Ихуи, Дж. Дж. Аллер и Гаррет Гролемунд. 2018. R Markdown: Полное руководство . Бока-Ратон, Флорида: Чепмен; Холл/CRC. https://bookdown.org/yihui/rmarkdown.
В стороне
Отступы позволяют размещать содержимое отдельно от содержимого, в котором оно размещено. Отступы выглядят как сноски, но не включают знак сноски (номер надстрочного индекса).
Это диапазон, который имеет класс в стороне от , что помещает его на поля без номера сноски.
[Это диапазон, в котором класс находится в стороне, что помещает его на поля без номера сноски.]{.aside}
Подписи на полях
Для рисунков и таблиц вы можете оставить содержимое в теле документа, поместив подпись на полях документа. Использование cap-location: поле в ячейке кода или вступительной части документа, чтобы контролировать это. Например:
```{р} #| этикетка: fig-cap-margin #| fig-cap: «MPG против лошадиных сил, окрашенных трансмиссией». #| расположение шапки: маржа библиотека (ggplot2) mtcars2 <- mtcars mtcars2$am <- фактор( mtcars$am, labels = c('автоматический', 'ручной') ) ggplot (mtcars2, aes (л.с., мили на галлон, цвет = am)) + geom_point () + geom_smooth (формула = y ~ x, метод = «лесс») + тема (легенда.позиция = 'внизу') ```
Рисунок 2. Сравнение расхода топлива на галлон и мощности в зависимости от передачи.
Переполнение контента
Вы также можете расширить содержимое за пределы основной области только с левой или правой стороны документа, используя правую и левую версии столбцов body , page и screen для компоновки содержимого. . Версия этих столбцов левая или правая выглядит следующим образом:
.column-body-outset-right
. column-page-inset-right
.column-page-right
.column-screen-inset-right
.column-screen-right
.column-body-outset-left
.column-page-inset-left
.column-page-left
.column-screen-inset-left
.column-screen-left
Используйте div с одним из вышеуказанных классов, чтобы выровнять содержимое по одной из областей переполнения. Это также работает с использованием опции столбца ячеек исполняемого кода:
```{р} #| столбец: экран-вставка-справа библиотека (буклет) листовка() %>% addTiles() %>% # Добавляем тайлы карты OpenStreetMap по умолчанию addMarkers(lng=174.768, lat=-36.852, popup="Место рождения R") ```
Опции Ссылка
Глобальные параметры
Некоторые параметры макета могут быть указаны глобально в документе yaml. Например:
--- fig-cap-location: поле ссылка-местоположение: маржа ---
Все приведенные ниже параметры в настоящее время поддерживают только установку значения 9. 0275 margin , который указывает Quarto поместить соответствующий элемент на поле.
ссылка-местоположение Где размещать сноски. По умолчанию используется документ .
[ документ | раздел | блок | поле ]
адрес цитирования Где размещать цитаты. По умолчанию документ .
[ документ | поле ]
место для крышки Где размещать подписи к рисункам и таблицам. По умолчанию `нижний` для рисунков и верхний для таблиц.
[ топ | дно | поле ]
расположение фиг. крышки Где размещать подписи к рисункам. По умолчанию снизу .
[ топ | дно | поля ]
tbl-cap-location Где размещать подписи к таблицам. По умолчанию сверху .
[ топ | дно | поле ]
Опции ячейки кода
Вы также можете установить столбец макета для определенных ячеек кода. Это управляет компоновкой содержимого, создаваемого ячейкой кода.
```{р} #| столбец: страница участок (автомобили) ```
столбец Столбец макета, используемый для вывода кодовых ячеек. См. параметры столбца ниже.
фигурная колонка Столбец макета для вывода цифр кодовых ячеек. См. параметры столбца ниже.
стол-столбец Столбец макета для использования в выходных данных таблицы кодовых ячеек. См. параметры столбца ниже.
место для крышки Где размещать подписи к рисункам и таблицам, созданные этой кодовой ячейкой. По умолчанию снизу для рисунков и сверху для таблиц.
[ топ | дно | поле ]
расположение фиг. крышки Где размещать подписи к рисункам, созданным этой кодовой ячейкой. По умолчанию встроенный .
[ встроенный | поле ]
tbl-cap-location Где размещать подписи к таблицам, создаваемым этой кодовой ячейкой. По умолчанию встроенный .
[ встроенный | поле ]
Использование классов
В дополнение к глобальным параметрам и параметрам, специфичным для ячейки кода, вы можете использовать элементы div с классами макета (с префиксом . столбец-) для размещения содержимого в столбцах:
::: {.column-margin} Этот контент появится на полях! :::
Доступные столбцы
Вот все доступные спецификаторы столбцов:
Корпус
столбец: тело столбец: body-outset столбец: body-outset-left столбец: body-outset-right
. тело колонны .column-body-outset .column-body-outset-left .column-body-outset-right
Страница
столбец: страница столбец: страница слева столбец: страница справа
.column-page .column-page-left .column-page-right
Вставка экрана
столбец: экран-вставка столбец: экран-вставка-затененный столбец: экран-вставка-левый столбец: экран-вставка-справа
.column-screen-inset .column-screen-inset-shaded .column-screen-inset-left .column-screen-inset-right
Экран
столбец: экран столбец: левый экран столбец: экран-правый столбец:
.колонка-экран .column-screen-left .column-screen-right
Поле
столбец: поле
.поле столбца
Формат PDF/LaTeX
Хотя большинство описанных возможностей макета поддерживаются как для вывода HTML, так и для PDF, некоторые из них доступны только для вывода HTML. Вы можете использовать полный набор столбцов для HTML. Затем при рендеринге вывода в формате PDF или LaTeX содержимое будет автоматически помещено в наиболее подходящий связанный столбец (обычно это означает использование основного столбца и правого поля). Вот как отображаются столбцы:
Любой столбец, в котором используется правое поле (например, страница , экран , экран-справа и т. д., будет отображаться как страница-справа в LaTeX.
Любой столбец, использующий левое поле, будет отображаться как обычное содержимое основного текста.
Страница Геометрия
Когда вы визуализируете PDF-файл с использованием содержимого на полях или содержимого, которое охватывает страницу, Quarto автоматически настраивает геометрию страницы для классов документов Quarto LaTeX по умолчанию (KOMA scrartcl , scrreport или scrbook ), чтобы создать немного более узкую область основного содержимого и немного более широкую область поля. Эта корректировка будет включать известные размеры бумаги, чтобы создать разумную геометрию страницы для большей части содержимого.
Вы можете самостоятельно управлять геометрией страницы, установив параметры геометрии во вступительной части документа. Например:
--- геометрия: - слева = 0,75 дюйма - ширина текста = 4,5 дюйма - marginparsep=0,25 дюйма - marginparwidth = 2,25 дюйма ---
Эти параметры можно использовать для управления геометрией страницы для встроенных классов документов или для настройки геометрии других классов документов, которые вы можете использовать.
Если вы хотите просмотреть геометрию страницы в обработанном PDF-файле, вы можете передать showframe параметру геометрии , как в приведенном ниже примере.
--- геометрия: - витрина ---
Кодовые блоки
При рендеринге PDF-файла, в котором для содержимого используются поля, Quarto автоматически настраивает внешний вид блоков кода. Вместо сплошного цвета фона используется обработка левой границы.
Это позволяет неразрывному коду перетекать на поля без косметических проблем, создаваемых фоном блока кода (который не перетекает в область полей).
Вы можете отключить эту обработку, установив следующий код code-block-border-left: false во вступительной части документа.
Getting Out Of The Box — Smashing Magazine
11 минут чтения
Вдохновение, Витрины
Поделиться в Twitter, LinkedIn
Об авторе
Виталий Фридман любит красивый контент и не любит легко сдаваться. Когда он не пишет, он, скорее всего, занимается интерфейсом и UX… Больше о Виталий ↬
За последние месяцы мы наблюдаем сильную тенденцию к увеличению количества отдельных веб-дизайнов . Эти проекты часто используют реалистичные мотивы из нашей обычной жизни в качестве визуальных эффектов. Однако, помимо визуальных элементов дизайна, можно творчески подойти и к макету сайта — его структуре и способу подачи и передачи информации. Чтобы дать вам некоторое представление о том, как именно это можно сделать, мы собрали примеры из креативных макетов дизайна .
За последние месяцы мы наблюдаем сильную тенденцию к увеличению количества отдельных веб-дизайнов . В этих дизайнах используются реалистичные мотивы из повседневной жизни, такие как нарисованные от руки элементы, шрифты, булавки, скрепки, органические текстуры и альбомы для вырезок. Это неудивительно, поскольку они выполняют функцию, которую безликие, блестящие, стеклянные 3D-кнопки совершенно не выполняют: индивидуальность и индивидуальность. «Личные» дизайны кажутся более привычными и дружелюбными. При правильном использовании такие элементы могут придать дизайну человеческое прикосновение и передать контент по-настоящему отличительным образом.
Однако, кроме элементов визуального оформления, можно проявить творческий подход и к макету сайта — его структуре и способу подачи и передачи информации. Чтобы дать вам некоторое представление о том, как именно это можно сделать, мы собрали примеры креативных дизайн-макетов. Дизайн был для нас важнее, чем конкретная реализация какой-то творческой идеи. Нас также не интересовало, валидируется код или нет. Ниже приведены некоторые примеры, которые мы нашли на данный момент.
Вас также могут заинтересовать следующие статьи, которые мы публиковали ранее:
Оригинальные и инновационные веб-макеты
Адаптивный веб-дизайн: что это такое и как его использовать
Фиксированный, гибкий и эластичный макет: что лучше Подходящий для вас?
Применение Божественной пропорции к вашему веб-дизайну
В представленной ниже витрине мы представляем 40 креативных готовых макетов , которые разбивают скучные двух- и трехколоночные коробочные макеты. Мы собрали чистые CSS-дизайны, CSS+JavaScript-макеты, а также Flash-дизайны. Большинство дизайнов, представленных ниже, рискуют своей структурой сайта и представлением контента из-за необычных подходов. Вот что отличает их. Надеюсь, вы найдете несколько творческих идей, которые сможете развить в своих будущих проектах.
Еще после прыжка! Продолжить чтение ниже ↓
Мы настоятельно рекомендуем дизайнерам отказаться от привычных шаблонных макетов, экспериментировать с новыми подходами и рисковать безумными идеями. Покажи, на что ты способен!
20 × Креатив с CSS
Павел Бубен Павел Бубен использует макет в стиле обложки журнала для своего одностраничного сайта. К сожалению, внутренних страниц нет — было бы интересно посмотреть, как они будут оформлены. Интересный и необычный подход.
AIGA Лос-Анджелес AIGA Los Angeles творчески использует коробки. Все элементы дизайна размещены в соответствии с базовой сеткой, однако они явно выбиваются из рамок. Такой подход создает напряжение в дизайне и выглядит по-настоящему самобытно.
Космический коллектив Для своего раздела галереи SpaceCollective использует сетку из пяти столбцов. Текст и изображения идеально размещены на сетке, что придает макету законченную форму и ощущение порядка. Обратите внимание на различные размеры шрифтов и стиль текста в дизайне — они вводят в макет глубокую визуальную иерархию, которая отлично работает в сложном, непредсказуемом макете.
Джейсон Санта-Мария Джейсон Санта-Мария выбрал совершенно иной путь в своем макете сайта. Каждая статья оформлена по-своему, с упором на типографику и визуальную ясность. Ниже представлены три макета. Вам может быть трудно найти похожие макеты в Интернете.
Касса: касса для Mac (POS) На первый взгляд Checkout выглядит как обычная сетка Apple. Макет интересен не только расположением его визуальных элементов, но и тем, что каждый раздел страницы имеет свой индивидуальный (хотя и согласованный) дизайн. Тем не менее, макет очень сканируемый и интуитивно понятный.
НОФРКС.дизайн NOFRKS использует JavaScript для перехода между различными частями сайта. Что нам показалось более интересным, так это то, как представлен контент. Большинство элементов помещаются в контекст, придавая содержанию второстепенное значение.
СМС Парковка На первый взгляд SMSParking вообще не имеет макета. Дизайн кажется единой иллюстрацией — все элементы идеально сочетаются друг с другом, создавая визуальную гармонию и ощущение баланса и завершенности.
Матрис Коммуникакао Эта бразильская компания представляет собой прекрасный пример того, как дизайн и контент могут быть легко интегрированы в законченный, но простой макет.
Михморандум Mihmorandum необычным образом использует обычную трехколоночную раскладку. Хотя структура вполне обычная, сам дизайн выглядит своеобразно и напоминает стопку бумаги, сложенную в папку.
3-й М 3rdM использует значки для обозначения различных вариантов навигации. Это не тот тип макета, который вы найдете во многих других веб-дизайнах. И это то, что делает макет креативным.
Нил Внутри Многие портфолио используют вертикальную компоновку для демонстрации своих работ. Нил.ру выставляет свои работы в хронологическом порядке, как если бы это был горизонтальный блог.
Рокати Rockatee использует асимметрию для размещения блоков контента в необычном, но привлекательном стиле. Обратите внимание, что левый блок идеально совпадает с опцией навигации «Домой» в верхней части страницы. Скриншот в середине страницы охватывает ровно два варианта навигации и имеет ту же ширину, что и блок описания в правой части страницы.
Искажение макета вызвано основной органической текстурой. Хотя дизайн идеально выровнен по сетке, на первый взгляд он кажется хаотичным. Напряжение между порядком и хаосом создает напряжение в макете и выглядит очень привлекательно.
Получить Лондонское чтение Эффективное фоновое изображение может помочь макету выделиться. Достигнутый здесь эффект соответствует цели проекта — побудить людей читать больше.
BL:ND (слепой) На первый взгляд, планировка выглядит убогой. Однако его отличает выбор размеров изображений и эффективное использование пустого пространства. Обратите внимание, как хорошо используется негативное пространство на боковой панели, где отдельные элементы четко разделены и правильно выровнены. Ширина изображений равна ширине блоков контента. Да, макет квадратный, но мудрое использование пробелов делает его далеко не скучным.
Портфолио Ганнибала Обычно меню навигации размещают на боковой панели или в верхней части сайта. Уильям Ф. Лефферт поступает иначе. Его нелинейная планировка буквально вырывается из квадратной структуры и предлагает нечто совершенно иное. Иногда достаточно просто поэкспериментировать с расположением элементов дизайна, чтобы добиться ярких дизайнерских решений.
Сокращатель URL Креативные дизайнерские решения могут быть такими же простыми, как это. Элегантный и привлекательный макет от URLshrinker.
15 × Креативность с помощью CSS+JavaScript
ShopComposition ShopComposition предлагает скользящую навигацию в верхней части сайта. Пользователи могут выбирать контент, который они хотели бы прочитать, и выбирать ширину блоков контента. В этом магазине есть встроенный блог и несколько дополнительных проектов (таких как «картинки в день») для привлечения внимания покупателей. JavaScript в использовании.
забывчивость Forgetfoo использует почти минималистичный, простой макет с боковой панелью и областью содержимого. Дизайнеры убрали все нужные и ненужные детали, сосредоточившись только на последних записях блога. Дизайн не содержит никаких вариантов навигации по категориям. Это необычно, но может быть слишком много минимализма. Навигация по сообщениям блога реализована с помощью Javascript.
Включить При включении один блок контента и соответствующий блок навигации «висят в воздухе». По сути, страница состоит из двух столбцов; Однако. макет выглядит довольно оригинально — может быть, из-за того, что коровы почему-то размещены на заднем плане. Навигация с правой стороны реализована с помощью Javascript.
Кобе Опции навигации в верхней части сайта слегка анимированы, но создают соответствующую атмосферу. При нажатии на один из разделов открывается основная область содержимого 9.1169 слайдов по вертикали — сначала фоновое изображение, потом контент. Если в области содержимого также есть некоторые параметры навигации, они также перемещаются по вертикали. В этой ситуации было бы несколько лучшим дизайнерским решением использовать вместо этого горизонтальную навигацию, чтобы посетителям было легче различать основную и вторичную навигацию.
кран кран кран Tap Tap Tap использует смелый и привлекательный макет, чтобы донести сообщение до своих посетителей. Макет, хотя в основном состоит из боковой панели и области контента, совсем не скучен и выглядит привлекательно. Левосторонняя навигация и дополнительные эффекты создаются с помощью JavaScript.
youlove.us Оформление на youlove.us определенно очень яркое. Он использует большое яркое фоновое изображение и эффект прокрутки, чтобы пользователи могли быстро переходить из одного раздела сайта в другой. Обратите внимание, что область навигации повторяется четыре раза в каждой из категорий. Эффекты скольжения также используются для каждой из категорий. Вместо использования 20 отдельных страниц макет объединяет их все на одной странице. Результат компактен и удобен в использовании.
Метод: агентство Brand Experience Это дизайнерское агентство использует гибкий макет на основе JavaScript, который обновляет свой размер в зависимости от размера окна браузера. Контент «упакован» в коробки, что является обычным для такого дизайна на основе сетки; однако выравнивание коробок делает дизайн буквально выделяющимся.
Вигет Лабс Viget Labs также использует скользящую навигацию и эффект горизонтальной прокрутки, чтобы сделать взаимодействие с пользователем более динамичным и, следовательно, более привлекательным. Однако, что более важно, выделяется сама раскладка: раскладка незаметна и напоминает интерактивные Flash-интерфейсы. Используемый CSS+JavaScript. Smashing говорит: пять из пяти звезд.
Лукума Lucuma также использует горизонтальную компоновку и горизонтальную навигацию слайдера. Простая, но эффективная интеграция фоновых изображений, навигации, видео и контента делает макет необычным и отличительным.
Дизайн Акселя Пимеллера На этой странице все элементы дизайна можно перетаскивать, а некоторые из них кликабельны. В первый момент кажется, что на вас набрасываются образы, но в итоге все они обретают смысл. Это необычное портфолио, которое запоминается и интересно для изучения.
ИДЕО IDEO представляет все на своей главной странице. Параметры навигации размещены в черных ящиках и каким-то образом расположены среди других полей содержимого. При наведении курсора на один из черных ящиков соответствующие блоки контента выделяются. Это не то, что большинство пользователей ожидают от макета.
Богдан Левищенко Богдан Левищенко использует тот же подход, что и IDEO, но предоставляет все возможности навигации вверху страницы. Отдельные работы представлены в виде изображений под навигацией и разбросаны по всему макету.
MelissaHie.com Мелисса Хай помещает все элементы дизайна на одну большую страницу. Посетители в основном перемещаются с одного сайта на другой с помощью эффекта прокрутки.
Отель Оксфорд - Тимишоара Одностраничный сайт с очень спокойным и удобным макетом. Все возможности навигации доступны с первого взгляда. После выбора некоторых параметров блок содержимого слева динамически заменяется. Логотип отеля Оксфорд всегда остается на своем месте.
ЧЕРЕЗ САЙТЫ / Портфолио В этом портфолио иллюстрации дизайнерских работ как-то свободно натянуты на невидимую веревку. При нажатии на одну из иллюстраций все остальные элементы располагаются таким образом, что содержание, которое представляет эта иллюстрация, становится доминирующим.
Эрвин Бауэр КЕГ Сайт-портфолио Эрвина Бауэра использует другой подход к использованию панорамируемого пользовательского интерфейса, но реализует его на JavaScript, а не на Flash. Сайт позволяет пользователям щелкать и перетаскивать для панорамирования холста или использовать ссылки, расположенные вокруг контента, для перемещения. Дизайн чистый и имитирует дизайнерский документ с метками совмещения и обрезки, а также визуальными подсказками о направлениях, в которых холст будет перемещаться при навигации.
5 × Творчество с Flash
Секретное место The Secret Location, медиа-агентство, базирующееся в Торонто, Канада, иллюстрирует их работу, предоставляя захватывающий флэш-опыт вокруг придуманной истории, ведущей персонажа по таинственному пути, ведущему к секретному месту. Очень интерактивный подход, очень необычная верстка сайта.
Камиль Готвальд В своем макете Камиль Готвальд позволяет пользователям вручную определять ширину столбцов сайта. Для вертикальной навигации пользователям необходимо использовать горизонтальную прокрутку. Следовательно, вертикальная полоса прокрутки не требуется. Возможно несколько просмотров сайта.
Grooveshark Lite Grooveshark как бы имитирует интерфейс iPod и делает это действительно очень хорошо. Хотя это может быть не очень креативно, такие макеты трудно найти в Интернете.
Джереми Левин Дизайн Flash предлагает множество творческих возможностей для дизайна интерактивной навигации. Джереми Левин использует динамические бумажные полоски, которые, кажется, висят в воздухе.
СеймурПауэлл Сеймур Пауэлл придумал интересную идею, чтобы дать своим посетителям некоторое представление о том, насколько хороша его работа. Нажмите на кучу, чтобы узнать.
Студия Муку «Пусть Муку сделает тебя»: этот дружелюбный приятель просто хочет оставаться на виду и поэтому пытается найти какое-то место на экране, чтобы следить за посетителями сайта. Макет сайта простой, но запоминающийся — ну, Муку заботится о том, чтобы его запомнили после закрытия окна браузера.
Самый эффективный макет статьи для контент-маркетинга
Страница статьи — это, вероятно, самый простой тип страницы на вашем веб-сайте, но он также и самый важный. Как я неоднократно говорил в этой серии статей, потенциальные клиенты с гораздо большей вероятностью начнут сеанс на вашем веб-сайте со страницы более низкого уровня, чем со страницы верхнего уровня, такой как ваша домашняя страница. Страницы статей — это именно то, что я имею в виду, когда говорю «нижний уровень». Дело не в том, что они менее важны, просто они ниже в информационной архитектуре сайта. Это «дети» вашего центра контент-маркетинга. А поскольку здоровый центр контент-маркетинга добавляет несколько таких страниц каждый месяц, очень важно предвидеть опыт потенциальных клиентов при разработке шаблона, который они используют. В этой статье я объясню свои рекомендации по более эффективному макету статьи по контент-маркетингу.
Для каких видов контента используется макет статьи контент-маркетинга
Вообще говоря, для любой части «контента», которую вы создаете, может использоваться один и тот же макет страницы статьи. На самом деле, я рекомендую, чтобы все основные формы контента, которые обычно создают наши клиенты, использовали один и тот же макет с некоторыми небольшими исключениями. Это означает, что каждый пост в блоге, официальный документ, вебинар и подкаст, перечисленные на вашем веб-сайте, могут использовать один и тот же макет статьи по контент-маркетингу. Что будет отличаться на этих страницах, конечно, контент само собой.
Позвольте мне объяснить два очень распространенных различия в контенте, которые должны учитываться в макете контент-маркетинга.
1. Контент с закрытым доступом
В следующей статье я объясню мои рекомендации по дизайну страниц с закрытым контентом, так что после этой статьи вы можете ожидать более подробной информации по этой теме. Однако в качестве предварительного просмотра я скажу, что закрытый контент в конечном итоге использует один и тот же макет статьи, но имеет две его версии. Существует предварительное состояние, в котором удаляется все, кроме введения контента и короткой формы, которую необходимо заполнить, чтобы получить доступ к остальному. А еще есть состояние после выхода, которое увидит потенциальный клиент, заполнив форму. Спойлер: она выглядит точно так же, как и любая другая статья на вашем сайте.
2. Встроенные носители
Типы контента, такие как подкасты и вебинары, изначально не являются текстовыми. Но одна из основных причин включить их на свой веб-сайт — получить некоторую выгоду для SEO от опыта, которым вы делитесь с этим медиа. Лучший способ сделать это — расшифровать ваши подкасты и видео и сделать этот текст доступным для сканирования поисковыми системами. Итак, это первый шаг в продумывании макета вашей статьи по контент-маркетингу: предугадывание большого количества текста. Например, транскрипция 30-минутного подкаста может легко превысить 4500 слов.
Но для большинства людей, которые находят этот контент через поисковые системы, исходный формат — это то, что им действительно нужно. Вот тут-то и появляются встроенные медиа. Вам нужно встроить аудио- и видеоплееры для этого контента, а также включить вступления и транскрипции. Ваша страница статьи по контент-маркетингу должна быть в состоянии обрабатывать типичные сообщения в блогах, которые обычно содержат текст и изображения, а также подкасты и вебинары, которые будут точно такими же, плюс некоторые встроенные медиа.
Меньше макетов — проще для всех
Мои рекомендации всегда основаны на практичности, поэтому, хотя нет ничего плохого в том, чтобы иметь уникальные макеты для всех ваших индивидуальных типов маркетингового контента (при условии, что они расставляют приоритеты в отношении правильных стратегических элементов), я стремлюсь к тому, чтобы их было как можно меньше. насколько это возможно.
Это облегчает вашей команде дизайнеров создание визуального языка вашего веб-сайта и общей системы дизайна. И это облегчает ваши перспективы. Поддержание согласованности макетов означает, что потенциальному клиенту не нужно переориентироваться на географию страницы каждый раз, когда он смотрит на что-то новое.
Помня об этих незначительных исключениях, давайте теперь посмотрим на макет статьи по контент-маркетингу, который я рекомендую нашим клиентам.
Лучший макет статьи по контент-маркетингу
Как я уже писал, это будет довольно просто. Лучшие макеты статей по контент-маркетингу состоят из трех основных элементов:
500+ слов индексируемого контента, который удобен как для читателей, так и для поисковых систем
список из 3-5 связанных статей
2-3 удобных для исследователей и оценщиков призывов к действию
Большинство этих атрибутов говорят сами за себя, но позвольте мне кратко остановиться на каждом из них.
1. Более 500 слов индексируемого контента
Поисковые системы жаждут текста. Хищный! На самом деле, я не удивлюсь, если когда-нибудь снова войду на эту страницу и увеличу рекомендуемое количество слов. Все советы по SEO, которые я недавно получил, можно поместить под одним заголовком: БОЛЬШЕ. SEO-специалисты рекомендуют больше текста, чтобы быть авторитетным в теме. Они рекомендуют больше стилей заголовков, чтобы страницу было легче читать. И они рекомендуют больше метаданных, чтобы страница была проиндексирована и правильно оценена поисковыми системами. Таким образом, ваш макет статьи по контент-маркетингу требует большого количества слов — что должно быть легко для вас, поскольку вы являетесь экспертом в своей области — и требует большого внимания к типографике, чтобы потенциальным клиентам было легче читать.
2. Список из 3-5 связанных статей
Когда потенциальный клиент впервые попадает на статью, он очень быстро оценивает, находится ли он в нужном месте. Они спросят себя: «Действительно ли эта страница о том, что я ищу?» Они могут ответить предварительно «да» и потратить некоторое время на чтение. Но в какой-то момент они спросят: «Хорошо, но действительно ли этот веб-сайт посвящен тому, что я ищу?» Когда вы включаете список связанных статей в макет статьи по контент-маркетингу, вы помогаете ответить на их вопрос. Да, вы также снижаете вероятность отскока. Но реальная ценность заключается в том, как такой список подтверждает ваше позиционирование. Потенциальный клиент должен просмотреть этот список и подумать: «Вау, этот сайт действительно освещает эту тему».
3. 2-3 CTA, удобные для исследователя и оценщика
В моей предыдущей статье о том, как спроектировать центр контента, я потратил много времени на обсуждение того, как потенциальные клиенты ожидают найти информацию на странице и что это означает для того, куда вы звоните. -к действию. Я не буду повторять это здесь, но достаточно сказать, что я по-прежнему убежден, что правая колонка, посвященная связанному контенту и возможностям взаимодействия, по-прежнему является лучшей структурой для такой страницы. Ваши потенциальные клиенты ожидают найти призывы к действию справа, поэтому имеет смысл размещать их там. Я также обсудил два распространенных способа использования среди потенциальных клиентов, один из которых — «горизонтальная ориентация». Вы также можете просто назвать это просмотром. Некоторые потенциальные клиенты очень быстро переходят со страницы на страницу, чтобы понять, о чем сайт. Убедившись, что возможности для взаимодействия находятся в верхней части страницы, помогает ориентирующемуся потенциальному клиенту по-прежнему реагировать.
Я также написал еще одну статью, описывающую все формы, которые должен содержать маркетинговый веб-сайт, поэтому, пожалуйста, прочитайте ее, чтобы получить больше информации о том, как должны работать такие призывы к действию.
Но для целей этой статьи убедитесь, что эти призывы к действию предлагают исследователям что-то, например простую форму для подписки на ваш информационный бюллетень. И убедитесь, что они предлагают что-то для оценщиков, например, загружаемый официальный документ.
Эта статья является девятой в серии, которая поможет вам самостоятельно применить принципы Prospect Experience Design.
Следующим в этой серии является руководство по созданию более эффективных точек взаимодействия с потенциальными клиентами.
12 лучших практик верстки блога, о которых стоит помнить в 2021 году
Хороший бизнес-блог — это основной инструмент для привлечения новых пользователей на ваш сайт, которые ищут знания и ответы на свои вопросы. Он полон экспертных идей и информации, которая ценна для вашей аудитории и в конечном итоге помогает стимулировать продажи для развития вашего бизнеса.
По данным HubSpot, маркетологи, уделяющие первостепенное внимание ведению блога, в 13 раз чаще получают положительный ROI.
Хотя постоянное создание контента является важной частью обучения вашей аудитории, просто иметь контент недостаточно. Вы должны сделать так, чтобы пользователям было как можно проще находить и переваривать ваш контент.
Чтобы помочь формировать и оптимизировать удобочитаемость вашего контента, вам необходимо, чтобы дизайн блога облегчал процесс чтения и выделял наиболее важную информацию. Он должен быть в состоянии привлечь клиентов к заголовкам, побудить к взаимодействию, оптимизировать конверсии и произвести неизгладимое впечатление.
Но с чего начать? Как вы все организуете, чтобы увеличить количество подписчиков и продолжительность сеансов вашего блога, сохраняя при этом эстетичный вид?
Чтобы помочь вам, мы собрали наиболее важные компоненты дизайна, которые должен иметь дизайн вашего блога, и то, как они работают по отдельности, чтобы помочь оптимизировать ваш блог для достижения ваших маркетинговых целей.
Лучшие практики оформления блога, о которых следует помнить в 2021 году
Сделайте из него накопительный «учебный центр»
Включить поля для краткого обзора статей
Использовать макет карточки блога
Используйте большие высококачественные избранные изображения
Узкая сетка для контента вашего блога
Используйте разборчивую типографику на всех устройствах
Используйте краткие описательные подзаголовки
Сделайте обмен в социальных сетях доступным на всех устройствах
Стратегически размещайте лид-магниты
Выделите своих авторов
Включить связанные статьи
Показать ожидаемое время чтения
Бесплатная оценка: оценка эффективности веб-сайта
1.
Сделайте его накопительным «учебным центром»
Если вам нравится IMPACT и вы создаете контент в течение многих лет, скорее всего, вы накопили много различных типов содержание.
Естественно, вы, вероятно, сделали то же, что и многие другие организации, разделив контент на множество разных областей. Например, видео живут в видеотеке, статьи в блоге, технические документы и электронные книги в ресурсном центре — вы поняли.
Хотя с точки зрения типа контента все организовано хорошо, ваш пользователь не всегда захочет просматривать только видео или только контент блога.
Представьте, что пользователь — это вы, и вы находитесь в пути, чтобы узнать больше по определенной теме. Вы бы предпочли прыгать по разным частям сайта, чтобы увидеть, что доступно по этой теме, или вы хотели бы, чтобы у вас было одно место, где вы могли бы просматривать все по этой теме, будь то блог, видео, столбец или загружаемый контент?
Думаю, второе. Вот почему мы рекомендуем организовывать контент в учебный центр.
Помимо простоты, подход с кумулятивным учебным центром повышает вероятность того, что ваши пользователи будут проводить больше времени на вашем сайте, поскольку барьер для поиска того, что они хотят, значительно снизился. Это также, вероятно, приведет к увеличению количества ваших страниц за сеанс, что Google использует в качестве критерия при ранжировании вашего сайта. Чем больше страниц за сеанс, тем лучше ваш рейтинг.
Итак, как это должно выглядеть? Одним из способов является то, как подходит к этому Aquila Commercial, клиент IMPACT.
У них есть одна страница с лентой всех возможных фрагментов контента, которые они создали.
Оттуда вы можете фильтровать по разным пользователям, темам или типам контента, используя меню слева. Затем, используя раскрывающийся список в правом верхнем углу, вы можете отсортировать последние сообщения или самые популярные.
Если вы все еще не можете найти то, что вам нужно, есть также панель поиска.
Другой подход заключается в том, как IMPACT создает собственный учебный центр.
Подобно Aquila, IMPACT имеет специальные макеты для каждой внутренней страницы темы.
При таком подходе наиболее полные элементы, такие как основные страницы, перечислены первыми. Ниже приведены рекомендуемые фрагменты — те, которые либо наиболее популярны, либо наиболее полезны для тех, кто ищет знания по этой конкретной теме.
В следующем разделе IMPACT перечислены эксперты по теме из нашей команды. Это помогает пользователю идентифицировать людей, у которых он должен продолжать искать контент, одновременно укрепляя доверие к этим авторам.
И, наконец, есть лента статей блога и подкастов, упорядоченная по самым последним, которая автоматически обновляется по мере выхода новых статей.
В целом оба подхода преследуют схожие цели — предоставление вашим пользователям максимально релевантного контента. В зависимости от того, как в настоящее время организован ваш контент и как построен ваш веб-сайт, один подход может быть лучше другого.
Итак, прежде чем приступить к этому проекту, обязательно поговорите внутри своей команды разработчиков или, если у вас ее нет, свяжитесь с нами и пообщайтесь, чтобы мы могли обсудить, как сделать это реальность на вашем сайте.
2. Включите поля для краткого обзора статей
Для того, чтобы обеспечить высокий рейтинг по конкурентным ключевым словам и привлечь трафик на наш веб-сайт, большинство статей, которые мы пишем, содержат около 1500 слов.
Хотя написание контента такой длины — это именно то, чего хочет от вас Google, это не совсем интуитивно понятно для определенных вопросов или для пользователей, которым нужны быстрые ответы.
Например, подумайте о запросе «что такое контент-маркетинг?»
Большинство результатов поиска, связанных с этим типом ключевой фразы, представляют собой исчерпывающие руководства, дающие вам все, что вы хотели бы знать по теме, но если вы просто ищете определение контент-маркетинга, просмотрите статью из 4000 слов. может быть немного утомительно. Вот где сводные окна действительно удобны.
Традиционно помещаемые в начале статьи в блоге, в эти поля вы можете добавить краткие ответы на вопросы, о которых идет речь в статье.
HubSpot и IMPACT делают это в своих статьях, как показано в примере ниже.

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

Использование этого поля не является обязательным для всех статей в блоге и также не гарантирует наличие избранного фрагмента, но поэкспериментировать с ним, чтобы увидеть, улучшит ли он рейтинг вашей статьи, безусловно, стоит попробовать.
3. Используйте макет карточки блога
Чтобы максимизировать трафик и поддерживать актуальность вашего веб-сайта, вероятно, вы выкачиваете много контента.
В зависимости от частоты ваших публикаций к концу года на вашем веб-сайте может быть до 600+ сообщений в блогах.
С таким количеством сообщений, как лучше всего использовать пространство вашего веб-сайта для организации этих статей, чтобы вы могли отображать как можно больше сразу, не обременяя посетителей информационной перегрузкой?
Одним из наиболее удобных для UX макетов для решения этой задачи является карточный дизайн.
Как мы знаем, физические карты (бейсбольные, баскетбольные, покемоны и т. д.) существуют уже довольно давно и служат простым способом визуального отображения и организации информации.
Архитектура карточек помогает нам легко распознавать, вспоминать и читать важную информацию.
Дизайн карт теперь также часто используется в Интернете. Крупные игроки, такие как Pinterest, Twitter и Google, внедрили его в свой UX:
Как и в приведенных выше примерах, важно, чтобы ваши карточки блога были простыми.
Они должны иметь единую повторяющуюся структуру, но использовать различные размеры изображений и шрифтов для представления самых важных и наименее важных элементов карты, чтобы сделать их более разборчивыми для тех, кто их читает.
Также обратите внимание на включение в карточку следующих элементов (выделены жирным шрифтом):
Избранное изображение
Название блога
Автор блога (и изображение, если есть место)
Дата сообщения
Категория
Выдержка из блога
Ссылки на социальные сети
Кнопка «Подробнее»
Имея в виду этот список, давайте в качестве примера возьмем блог Zenefits:
В своей карточке они выделяют изображение и заголовок как наиболее заметные элементы. Затем они также включили выдержки, которые не только помогают пользователям решить, подходит ли им статья, но и могут побудить их щелкнуть, если они были на заборе.
У них также есть даты, которые позволяют пользователю узнать, является ли статья новой или актуальной, и авторы (с фотографиями), чтобы очеловечить бренд и установить лидерство в мнении.
Обычно на странице со списком статей мы рекомендуем размещать эти карточки в два или три столбца в зависимости от того, какую информацию вы включаете, чтобы максимизировать количество сообщений, просматриваемых одновременно.
4. Используйте большие высококачественные избранные изображения
По мере того, как ведение блога становится все более заметным, а социальные сети становятся все более наглядными, одна из самых эффективных и отличительных вещей, которую вы можете сделать для своего блога, — это включение больших, не приземистых главных изображений.
Этот выбор дизайна неспроста.
Возьмем, к примеру, шаблон внутреннего блога Intercom. Хотя их избранное изображение может показаться большим, настолько, что оно отодвигает содержимое вниз, оно также привлекает внимание.
С точки зрения иерархии, он также добавляет удобную привязку к верхней части страницы, позволяя пользователю легко распознать, где начинается статья, и еще раз подчеркнуть тему.
Хотя нет необходимости в том, чтобы быть таким же большим, как Intercom, важно, чтобы размер вашего избранного изображения был достаточно большим, чтобы оно имело достаточный визуальный вес и выделялось среди элементов рядом с ним.
Не стесняйтесь экспериментировать со своим макетом. В то время как такие компании, как Intercom, предпочитают размещать свои изображения на всю ширину, другие, такие как Drift, перекрывают заголовки своих статей более чем на половину основной области, позволяя основному тексту заглянуть выше сгиба.
Это дает более сбалансированный акцент на главном изображении и заголовке, делая более удобным для ваших пользователей возможность немедленно начать чтение, а не прокручивать их перед просмотром текста.
4. Узкая сетка для контента вашего блога
Одним из самых простых способов начать создание чистого и организованного дизайна является использование системы сетки. Короче говоря, «сетка служит каркасом или каркасом, на котором дизайнер может рационально и легко усваивать графические элементы», как поясняется в Википедии.
Этот метод широко используется в печатных макетах газет и журналов для облегчения чтения и усвоения содержания. Системы сетки в печатных носителях также могут различаться в зависимости от макета носителя.
В последние годы этот метод применялся к веб-сайтам, чтобы помочь с адаптивным дизайном и обеспечить единообразие для пользователей с экранами разных размеров.
Представьте, что перед вами распечатанный лист размером 8,5 на 11 дюймов, на котором напечатано эссе. В его нынешнем состоянии его довольно легко читать, но что произойдет, если вы растянете бумагу до 18 дюймов в ширину? Для большинства людей становится значительно сложнее переходить от строки к строке чтения. Вот почему газеты и журналы используют более узкие форматы колонок.
Эта идея применима и к блогам. Если ширина сетки вашего блога слишком велика (особенно для пользователей на больших экранах), это создаст проблемы с читабельностью. Это может привести к тому, что они потеряют свое место, а ваш контент будет казаться короче и неудобным.
Поскольку подавляющее большинство пользователей используют мониторы шириной от 1300 до 1400 пикселей (размер ноутбука), ширина сетки вашего блога должна варьироваться от 900 до 1100 пикселей, в идеале 1024 пикселя.
Одна компания, которая делает это хорошо на своем веб-сайте, — Helpscout. Обратите внимание, как они используют сетку, чтобы содержание их блога оставалось в середине страницы. Ограничивая места, где может располагаться контент, они избавляют вас от необходимости прокручивать страницу из стороны в сторону, чтобы читать.
Этот метод также дает вам достаточное количество пробелов в вашем блоге. Это помогает пользователям отличать элементы вашего блога (боковые панели, заголовки/основной текст, изображения, значки обмена) друг от друга и направлять взгляд.
6. Используйте удобочитаемую типографику на всех устройствах
Не все люди, заходящие на ваш сайт, имеют зрение 20/20, а те, кто все же не хотят читать ваш шрифт размером 12 пунктов. Это может вызвать напряжение глаз, особенно на цифровых экранах. Я не могу сосчитать, сколько раз мои родители и друзья переходили к статьям в блогах только для того, чтобы увеличить масштаб, просто чтобы прочитать, что на странице.
Звучит смешно, правда?
Вы хотите, чтобы размер шрифта вашего веб-сайта, особенно в вашем блоге, был последним, на что пользователи жалуются. Итак, теперь возникает вопрос — какой размер шрифта мне следует использовать?
Когда дело доходит до основного шрифта, мой опыт подсказывает мне, что он находится где-то между 17px и 21px, в зависимости от того, какой шрифт вы используете (некоторые, естественно, крупнее других).
Для получения информации о размере заголовков и более глубоком анализе того, почему все это имеет значение, я предлагаю ознакомиться с этой статьей. Далее в нем рассматриваются некоторые из наиболее распространенных размеров, используемых для тегов заголовков, от настольных компьютеров до мобильных устройств.
Если вы ищете примеры веб-сайтов, которые освоили типографику и размеры на своем сайте, я предлагаю проверить эти компании:
Wired

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

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

The Economist имеет гораздо более легкий шрифт, который они используют во всех своих заголовках, но их размер в сочетании с красной темой, которая находится выше, помогает направлять взгляд пользователя, когда он просматривает страницу. названия статей.
7. Используйте краткие описательные подзаголовки
Говоря о поиске быстрых ответов на вопросы...
Как правило, люди приходят к статьям в блогах с намерением просмотреть их, пока не найдут раздел(ы), которые отвечают на их вопросы или вызывают у них интерес.
Ваши заголовки должны способствовать достижению этой цели, будучи конкретными и описательными.
Я не говорю о «Разделе 1» или об общих типах «почему» и «как». Вам нужны заголовки, точно определяющие, о чем читатели узнают в этих сгруппированных абзацах вашей статьи.
Копихакеры отлично справляются с этой задачей. В этой статье блога под названием «Как привлечь подписчиков в Instagram с помощью текста, чтобы они полюбили ваш бренд и купили вашу продукцию » , каждый пункт имеет четкий и лаконичный заголовок, позволяющий читателям просмотреть их.
Если вы чувствуете, что не можете сделать это со своими статьями в блоге, я предлагаю ознакомиться с некоторыми советами по написанию, которые помогут вам организоваться. Если вам нужны советы о том, как писать подзаголовки или даже немного оживить их, используйте эту статью от Copyblogger, которая поможет вам.
8. Сделайте обмен в социальных сетях доступным на всех устройствах
Ссылки для обмена в социальных сетях (также известные как кнопки, которые позволяют людям легко размещать вашу статью в своих профилях в социальных сетях) — это один из самых простых способов побудить людей распространять ваш контент для вас, но многие сайты не предоставляют такой же возможности для пользователей планшетов и мобильных устройств.
Опрос Pew показал, что 85% взрослого населения США в настоящее время получают новости на мобильных устройствах хотя бы часть времени, в том числе лица старше 65 лет9.0005
Те же самые люди также просматривают социальные платформы на своих мобильных устройствах, поэтому можете поспорить, что они готовы делиться контентом и на мобильных устройствах (при условии, что они находят это осведомленным и имеют для этого простые средства). Убедитесь, что у вас есть не только ссылки на социальные сети, но и то, что их легко найти и щелкнуть.
В блоге Mashable социальные кнопки расположены справа от навигации и остаются с вами, когда вы прокручиваете страницу, давая пользователям возможность поделиться в любое время.
NBC применяет аналогичный подход, также помещая свои параметры общего доступа в фиксированную верхнюю панель, которая появляется, когда пользователь прокручивает определенную точку на странице.
Это размещение ваших социальных ссылок также может быть легко применено к рабочему столу. Просто взгляните, например, на блог Atlassian.
Они размещают ссылки на социальные сети в верхнем правом углу навигации по статьям. Навигация прилипает к верхней части страницы и следует за вами по мере прокрутки вниз, что означает, что социальные кнопки всегда доступны.
Если вы ищете платформы, на которых можно легко создавать кнопки «Поделиться» ( с без программирования), ознакомьтесь с такими инструментами, как AddThis, ShareThis или Sumo.
Дополнительный совет : недавно вы могли заметить, что некоторые сайты используют Facebook Messenger или Slack в качестве дополнительных платформ для обмена. Это сделано для того, чтобы пользователи могли легко получать контент на платформах и в программном обеспечении, которые они используют чаще всего.
Если вы знаете, что ваши пользователи тусуются где-то в новом месте, убедитесь, что ваши социальные ссылки отражают это. Или, если у вас есть социальная ссылка на платформу, которая редко используется, возможно, пришло время отказаться от нее. Это поддерживает ваш опыт в актуальном состоянии и снижает вероятность упущенных возможностей обмена в социальных сетях на самых популярных платформах.
9. Стратегически размещайте свои лид-магниты
Многие из нас имеют приличный объем трафика, но с трудом получают желаемое количество подписчиков или конверсий. Именно здесь использование заманчивого и эстетически приятного лид-магнита в вашем блоге может быть очень желательным.
Если вы не знакомы с этим термином, лид-магнит — это неотразимое предложение, которое пользователи могут получить в обмен на конкретную контактную информацию.
В идеале вы хотите, чтобы лид-магнит был чем-то, что резонирует с вашей целевой аудиторией, чтобы вы привлекали в свою систему квалифицированных лидов.
В то время как многие люди используют лид-магнит как отдельное предложение в блоге, более стратегическое использование — это предложение, которое получают, когда люди подписываются на ваш блог. Это стимулирует акт подписки.
Как только вы выясните, какое предложение лучше всего подходит для вашей аудитории, вам нужно сделать его визуально привлекательным.
В клиентских блогах IMPACT мы подошли к этому двумя разными способами.
Первый находится на странице сообщений в блоге (где ваши пользователи видят все опубликованные вами статьи). После того, как пользователь прокрутит несколько из перечисленных статей, может быть размещен призыв к действию либо загрузить руководство, либо подписаться. Он должен удобно вписываться в вашу страницу со списком, используя другой вариант макета и цвета, чтобы отличаться от статей.
Ниже вы можете увидеть, как это было реализовано в блоге Армстронга, одного из клиентов IMPACT.
Второй способ — всплывающее окно, которое появляется один раз в день для пользователей, не подписанных на блог сайта. При его реализации нужно убедиться, что он легко различим. Например, затемнение фона и создание белого контейнера может помочь выделить всплывающее окно и не дать пользователям отвлекаться на блог под черным наложением. Вы также можете увидеть это в лид-магните Армстронга.
Оба экземпляра всплывающего и встроенного лид-магнита нуждаются в следующих элементах:
Обложка предложения или изображение, чтобы пользователи визуально видели, к чему относится предложение
Заголовок, который помогает пользователю понять, что такое предложение
Подзаголовок помогает пользователю понять, почему ему нужно конкретное предложение и какую ценность оно для него представляет
Цвет кнопки, который отличается от цветовой палитры вашего сайта, поэтому он очень узнаваем.
Они обеспечат лучший опыт, когда пользователи столкнутся с ними, что в конечном итоге приведет к тому, что каждый из них будет работать как можно лучше.
10. Выделите своих авторов
Ваши авторы потратили много времени и усилий на создание контента для вашего блога, и вы должны отпраздновать это, опубликовав их как авторов соответствующих статей.
Не только это, вы также должны дать им краткие биографии, которые появляются внизу статей, чтобы ваши пользователи могли различать, кто что написал в вашем блоге. А еще лучше иметь отдельные страницы авторов, на которых представлены все написанные ими сообщения.
Inc делает страницы своего блога красивыми и простыми. Они начинаются с фотографии автора, биографии и социальных сетей. Затем на оставшейся части страницы отображается лента любых статей, которые они написали.
Это улучшит UX вашего блога, чтобы пользователям было проще искать статьи понравившихся им авторов, а также дает вашим авторам возможность продемонстрировать всю информацию, которую они предоставили по различным темам.
11. Включите соответствующие статьи
Многие пользователи, которые посещают ваш веб-сайт, находятся в пути, чтобы узнать больше по определенной теме.
Ваш веб-сайт должен помочь им продвинуться в этом путешествии. Лучший способ сделать это — размещать связанные статьи или ресурсы на той же странице, чтобы они могли перейти к следующей.
В идеале они должны быть связаны либо темой, либо ключевыми словами, а не случайными статьями, которые вы хотите заставить людей посетить.
Один из способов сделать это в макете вашего блога — периодически размещать отдельные ссылки внутри статьи.
При этом необходимо использовать стиль, указывающий на небольшое отделение от потока чтения. В случае с Insider перед заголовком статьи ставится полужирная надпись «Подробнее:» и заголовок, выделенный синим курсивом.
Вы также можете добавить связанные статьи в конец статьи. Это может быть более привлекательным для людей, которые предпочитают удерживать внимание людей на статье, которую они читают, дольше.
The New Yorker имеет специальный раздел в конце своих статей, в котором выделяются четыре связанные статьи. В данном случае пост, на который я нажал, был о COVID, поэтому соответствующий материал посвящен этой теме.
Вам также не нужно предпочитать один подход другому.
Многие издатели (например, IMPACT) комбинируют эти два метода или идут дальше, добавляя боковую панель с более соответствующими статьями. Вам решать, что лучше для вашей аудитории и что технически возможно на вашем веб-сайте.
12. Показать ожидаемое время прочтения
Заранее установить ожидаемое время чтения определенных статей — отличный способ сообщить пользователям, будет ли у них время полностью погрузиться в материал.
Я не могу передать вам, сколько раз я ловил себя на обеденном перерыве, пытаясь втиснуть несколько статей, только чтобы обнаружить, что одна или две, которые я выбрал, могли быть неосознанно длиннее, чем ожидалось.
Отображение какого-либо индикатора длины статьи устраняет это препятствие, а также позволяет пользователю узнать, насколько подробно конкретная статья может быть посвящена определенной теме. Обычно это делается двумя тонкими способами.
В начале статьи показано фактическое время чтения.
Альтернативный подход — показать пользователям, сколько у них осталось. Обычно это делается с помощью индикатора выполнения, длина которого увеличивается по мере прокрутки страницы, как в блоге Trello:
Каждый вариант иллюстрирует ненавязчивый способ лучше помочь пользователю понять, что он, вероятно, ожидает, прежде чем он прочитает.
Следующие шаги
Чем раньше вы сможете внедрить эти принципы дизайна в свой блог, тем быстрее вы начнете получать больше конверсий и трафика.
Пришло время действовать! Работайте со своей командой внутри, чтобы придумать новые проекты, которые могут связать некоторые из вышеперечисленных элементов, и проверить, как они работают. Объедините их работу с лучшими практиками SEO и наблюдайте, как растет ваш трафик!
Если вы считаете, что вам все еще нужны рекомендации относительно того, какие другие области вашего веб-сайта нуждаются в улучшении, рассмотрите возможность связаться с нами и поговорить с нами о мастерстве повышения производительности веб-сайта IMPACT. Наша команда экспертов по веб-сайтам будет тесно сотрудничать с вашей внутренней командой, чтобы разработать индивидуальную стратегию веб-сайта, которая соответствует вашим целям.
Основной шаблон статьи ACM
ACM меняет формат архива своих публикаций, чтобы отделить содержание от презентации в новой цифровой библиотеке, повысить доступность и повысить гибкость и отказоустойчивость наших публикаций. Этот подход требует нового рабочего процесса, использующего упрощенный формат «проверки» и формат «окончательной отправки». «Окончательное представление» отправляется на новую производственную платформу ACM, где авторы смогут просмотреть выходные форматы PDF и HTML перед публикацией.
Первоначальный подход с использованием шаблона основной статьи 2017 года для Microsoft Word оказался непригодным, и ACM прекратила использование этого шаблона. Этот новый рабочий процесс, разработанный с участием добровольцев из сообщества авторов и SIG, устранит болевые точки, о которых сообщали авторы. Новый рабочий процесс в настоящее время тестируется на отдельных конференциях перед более широким выпуском в конце 2019 года. свяжитесь с Крейгом Родкиным ([email protected]) для получения дополнительной информации.
Авторы журнала PACM загрузите шаблон ACM Small на веб-странице шаблона журнала

Промежуточный шаблон
Все конференции используют этот шаблон, если не указано иное. Обратитесь к вашей странице представления конференции для получения дополнительной информации.
До более широкого выпуска нового рабочего процесса для публикаций ACM мы просим пользователей Microsoft Word использовать эти промежуточные шаблоны, которые обеспечивают окончательный макет для статей ACM, но не имеют каких-либо встроенных функций для захвата специальных возможностей и тегов метаданных. . Пожалуйста, загрузите промежуточный шаблон Word здесь: Промежуточный макет.docx и промежуточный образец в формате pdf (Пожалуйста, не обращайте внимания на какие-либо инструкции, встроенные в промежуточный макет на этом переходном этапе. ) . Пожалуйста, ознакомьтесь с информацией на странице ваших материалов для конференции.
Не стесняйтесь обращаться к нам по адресу [email protected], если у вас есть какие-либо вопросы. (последнее обновление: 28 февраля 2019 г.)

Новый рабочий процесс для публикаций ACM
Только для определенных конференций! Обратитесь к вашей странице представления конференции для получения дополнительной информации.
Авторы, использующие новый шаблон основной статьи Microsoft Word ACM для отправки контента на рецензирование, должны использовать формат отправки для рецензирования, представленный на странице https://www.acm.org/publications/taps/word-template-workflow. Полный рабочий процесс и окончательный формат отправки в настоящее время тестируются в режиме реального времени на некоторых конференциях перед более широким выпуском в конце 2019 года. www.acm.org/publications/taps/word-template-workflow.
Не стесняйтесь обращаться к нам по адресу production@hq. acm.org, если у вас есть какие-либо вопросы. (последнее обновление: 28 февраля 2019 г.)

LaTex Authors
acmart.cls, официальный шаблон основной статьи ACM для LaTeX, объединяет 8 отдельных журналов ACM и шаблонов протоколов ACM. Шаблон [основной] доступен в следующих форматах ^* : (последнее обновление 13 апреля 2022 г.)
LATEX (версия 1.87)
Перед использованием шаблона статьи ACM LaTeX каждый должен прочитать Руководство пользователя TeX, которое включает первый раздел документа; авторам, которые планируют использовать свои собственные пакеты, следует прочитать более подробное Руководство по внедрению TeX, которое следует ниже.
Чтобы обеспечить 100% совместимость, пожалуйста, проверьте утвержденный список пакетов LaTeX, которые будут использоваться с шаблоном основной статьи , прежде чем создавать документ. На странице утвержденных пакетов LaTeX также содержится информация о том, как отправить дополнительные пакеты LaTeX на проверку и принятие.
Этот новый объединенный пакет шаблонов заменяет все предыдущие независимые файлы и пакеты классов и предоставляет единый актуальный пакет LATEX с дополнительными вызовами. Пакет использует только бесплатные пакеты TEX и шрифты, включенные в TEXLive, MikTEX и другие популярные дистрибутивы TEX. В новых шаблонах ACM используется новый набор шрифтов (libertine), который необходимо установить на вашем компьютере перед использованием шаблонов. Пожалуйста, скачайте и установите шрифт libertine установите перед написанием статьи. Шрифты, используемые в шаблоне , не могут быть заменены ; корректировка маржи не допускается.

Новый пакет LATEX включает обновленные версии следующих шаблонов ACM:
Журналы ACM: ACM Small, ACM Large, ACM и TOG (также для авторов SIGGRAPH, публикующихся в TOG)
Шаблоны протоколов ACM: Стандарт ACM и SIGPLAN
ПРИМЕЧАНИЕ. Шаблоны журналов Все журналы используют acmsmall со следующими исключениями:
acmlarge — большой формат с одной колонкой, используемый для DGOV, DTRAP, HEALTH, IMWUT, JOCCH, TAP
acmtog – большой формат с двумя столбцами, используемый для TOG
.
ПРИМЕЧАНИЕ: Большинство авторов протоколов (включая авторов ICPS) будут использовать шаблон протоколов "sigconf". Если вы не уверены, какой вариант шаблона использовать, обратитесь за разъяснениями к представителю вашего мероприятия или публикации.
Средство совместной разработки LaTeX на платформе Overleaf
ACM сотрудничает с Overleaf, бесплатным облачным инструментом для совместной разработки, чтобы предоставить авторский шаблон ACM LaTeX.
Overleaf — это платформа для совместной работы: авторы могут легко пригласить коллег для совместной работы над своим документом.
Авторы могут писать, используя «Режим расширенного текста» или обычный «Режим источника». Это полезно для междисциплинарного сотрудничества в тех случаях, когда одни авторы предпочитают писать в LaTeX, а другие — в текстовом формате.
Платформа автоматически компилирует документ, пока автор пишет, поэтому автор может видеть, как будет выглядеть готовый файл в режиме реального времени.
Шаблон позволяет авторам легко отправлять рукописи по адресу ACM с платформы Overleaf.
Шаблон ACM LaTeX на платформе Overleaf доступен всем авторам ACM по адресу https://www.overleaf.com/gallery/tagged/acm-official#.WOuOk2e1taQ
Новые шаблоны позволяют импортировать необходимые концепции индексирования для вашего статья из системы компьютерной классификации ACM (CCS) с использованием инструмента поддержки индексирования, который находится в цифровой библиотеке ACM (DL), который генерирует необходимый код TeX после того, как вы выбрали свои термины (и генерирует XML для документов Word).
Важно предоставить правильную информацию об индексации из системы компьютерной классификации ACM (CCS). Точная семантическая маркировка обеспечивает читателю быстрый доступ к содержанию; облегчает поиск в DL соответствующей литературы; включает несколько тематических функций DL, таких как агрегированные области SIG и журнала; и помогает ACM продвигать вашу работу на других интернет-ресурсах.
ОСОБОЕ ПРИМЕЧАНИЕ О ФОРМАТАХ ССЫЛОК
Ссылки и подсчет цитирования облегчаются за счет использования стандартных форматов ссылок. Пожалуйста, придерживайтесь стиля цитирования в тексте и рекомендаций по формату ссылок, которые мы используем для публикаций ACM. Если вы этого не сделаете, ваша статья может быть возвращена вам для надлежащего форматирования.
Примечание. Примеры BibTeX см. по адресу: http://www.acm.org/publications/authors/bibtex-formatting
Рекомендации ACM по доступности для публикации в цвете
статья по-прежнему читается при печати в оттенках серого. Наиболее заметными причинами этого являются:
Наиболее распространенный тип наследственного дефицита цветового зрения (CVD) — красно-зеленый (при котором часто путают цвета одинаковой яркости, которые отличаются только количеством красного или зеленого) и он поражает до 8% мужчин и 0,5% женщин североевропейского происхождения.
Наиболее распространенным типом приобретенного дефицита цветового зрения (ССЗ) является сине-желтый (включая легкие случаи у многих пожилых людей).
Большая часть печати выполняется в черно-белом режиме.
Ситуационные нарушения (например, яркий солнечный свет, падающий на экран мобильного телефона) имеют тенденцию к уменьшению всей цветовой гаммы, снижая различимость цветов.
ПРИМЕЧАНИЕ. НЕбезопасно кодировать информацию, используя только различия в цвете (т. е. только различия в оттенке и/или насыщенности), так как это обязательно повлияет на кого-то!
Чтобы убедиться, что вы используете наиболее доступные цвета, ACM рекомендует выбирать наборы цветов, чтобы обеспечить подходящие вариации в черно-белом режиме, используя один из следующих инструментов:
ColourBrewer: http://colorbrewer2.org/
ACE: доступный инструмент оценки цвета: http://daprlab.com/ace/ для разработки палитр, совместимых с WCAG 2.0.
ЯЗЫКОВЫЕ УСЛУГИ
ACM заключила партнерское соглашение с International Science Editing (ISE) для предоставления услуг языкового редактирования авторам ACM. ISE предлагает широкий спектр услуг для авторов, включая стандартное и премиальное редактирование на английском языке, а также услуги по иллюстрации и переводу, а также имеет значительный охват в Китае. Редактирование доступно как для файлов Word, так и для файлов LaTeX. Как автор ACM, вы получите щедрую скидку на услуги редактирования ISE.
Чтобы воспользоваться преимуществами этого партнерства, посетите http://acm.internationalscienceediting.com/. (Услуги редактирования оплачиваются автором и не гарантируют публикацию рукописи.)
ТЕХНИЧЕСКАЯ ПОДДЕРЖКА для авторов Microsoft Word и LaTeX
Если у вас есть вопросы, касающиеся LaTeX, сначала просмотрите Руководство пользователя и внедрение.
ACM рада предоставить техническую помощь авторам, работающим с файлами LATEX class и Microsoft Word . Пожалуйста, направляйте свой технический запрос по адресу: [email protected] для запросов LaTeX и Microsoft Word.
No related posts.

Мазда RX4	21,0	6	160
Мазда RX4 Ваг	21,0	6	160
Датсун 710	22,8	4	108
Хорнет 4 Привод	21,4	6	258
Hornet Sportabout	18,7	8	360
Доблестный	18,1	6	225

`ссылка-местоположение`	Где размещать сноски. По умолчанию используется документ `.` [ `документ` \| `раздел` \| `блок` \| `поле` ]
`адрес цитирования`	Где размещать цитаты. По умолчанию `документ` . [ `документ` \| `поле` ]
`место для крышки`	Где размещать подписи к рисункам и таблицам. По умолчанию `нижний` для рисунков и `верхний` для таблиц. [ `топ` \| `дно` \| `поле` ]
`расположение фиг. крышки`	Где размещать подписи к рисункам. По умолчанию `снизу` . [ `топ` \| `дно` \| `поля` ]
`tbl-cap-location`	Где размещать подписи к таблицам. По умолчанию `сверху` . [ `топ` \| `дно` \| `поле` ]

`столбец`	Столбец макета, используемый для вывода кодовых ячеек. См. параметры столбца ниже.
`фигурная колонка`	Столбец макета для вывода цифр кодовых ячеек. См. параметры столбца ниже.
`стол-столбец`	Столбец макета для использования в выходных данных таблицы кодовых ячеек. См. параметры столбца ниже.
`место для крышки`	Где размещать подписи к рисункам и таблицам, созданные этой кодовой ячейкой. По умолчанию `снизу` для рисунков и `сверху` для таблиц. [ `топ` \| `дно` \| `поле` ]
`расположение фиг. крышки`	Где размещать подписи к рисункам, созданным этой кодовой ячейкой. По умолчанию `встроенный` . [ `встроенный` \| `поле` ]
`tbl-cap-location`	Где размещать подписи к таблицам, создаваемым этой кодовой ячейкой. По умолчанию `встроенный` . [ `встроенный` \| `поле` ]

Корпус	столбец: тело столбец: body-outset столбец: body-outset-left столбец: body-outset-right	. тело колонны .column-body-outset .column-body-outset-left .column-body-outset-right
Страница	столбец: страница столбец: страница слева столбец: страница справа	.column-page .column-page-left .column-page-right
Вставка экрана	столбец: экран-вставка столбец: экран-вставка-затененный столбец: экран-вставка-левый столбец: экран-вставка-справа	.column-screen-inset .column-screen-inset-shaded .column-screen-inset-left .column-screen-inset-right
Экран	столбец: экран столбец: левый экран столбец: экран-правый столбец:	.колонка-экран .column-screen-left .column-screen-right
Поле	столбец: поле	.поле столбца