Як красиво оформити текст на сайті

Дуже часто люди, замовляючи розроблення сайту, роблять стандартні елементи шаблону разом із дизайнером і не замислюються на цьому етапі про те, як вони викладатимуть статті в блог, і тим паче — про гарне візуальне опрацювання. І потім уже, коли є перші статті та хочеться зробити їх зручними та максимально читабельними для користувача, виникає безліч проблем, оскільки в первісному шаблоні всі ці елементи не продумувалися. І знову доводиться звертатися до дизайнерів і верстальників для доопрацювання вже готового сайту, а це — додаткові витрати, часто чималі. І тут власники сайту або дійсно витрачаються, або просто викладають контент як є і він візуально програє конкурентам.

Щоб ви не опинилися в такій ситуації, я рекомендую закласти в дизайн усі потрібні елементи на етапі його розроблення, тоді ви отримаєте максимально привабливий контент і заощадите час, гроші та нерви. Ця стаття — добірка найвдаліших рішень з оформлення контенту. Також я розповім, яких помилок можуть припускатися верстальники та як їх уникнути.

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

Трохи про оформлення тексту на сайті

Уже 100500 разів обговорювалося всіма блогерами те, що статті не мають бути просто простирадлами тексту, які навіюють на користувача нудьгу й бажання закрити статтю. Виглядає це приблизно так:

У такій статті оку нема за що зачепитися. Хоча для зручності сприйняття стаття повинна мати візуальні акценти. З цього приводу в редакторській розсилці Ільяхова є чудові візуальні приклади оформлення тексту на сайті:

Підзаголовки дають змогу розставити акценти в тексті та змушують прочитати для початку їх.

Робіть статті такими, які візуально чіпляють завдяки вбудованим елементам і підзаголовкам.

Зверніть увагу!!! Оскільки в сучасному світі більша частина аудиторії відвідує сайти з мобільних телефонів, то всі елементи, що вбудовуються в адаптивному сайті, також мають бути адаптивними. І стаття має бути коректною і на мобільному, і на планшеті, і на десктопі. Інакше користувачі смартфонів не зможуть оцінити вашу красу.

Сміттєві теги в тексті статті

Якщо ви переносите тексти статей з Microsoft Word або Google Doc, то навіть за найправильнішого оформлення статті в документі контент копіюється на сайт разом із додатковими тегами оформлення, які засмічують код статей. Зазвичай це теги <span> зі своїми стилями, теги перенесення рядка </br> тощо.

Приклад такого тут:

При цьому на сайті подібне має такий вигляд:

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

Не використовуйте теги <span> та стилі через атрибут style для правки шрифтів у тексті статті. Бо це значно подовжує код сторінки, до того ж потрібно багато часу, щоб зробити всю статтю однаковою. Використовуйте для всіх візуальних оформлень класи з прописаними централізованими властивостями в css файлах. Якщо вам не подобаються шрифти та зовнішній вигляд текстів після викладення чистого коду, то краще попросити програмістів внести правки у відображення елементів централізовано. Тоді за 1 правку всі статті одразу набудуть такого вигляду, як ви хотіли.

Не допускайте перенесення рядка під час абзацу за допомогою тега <br/> у тексті. Якщо потрібно зробити абзац, то робіть це тегом <p>.

Дуже часто копірайтери для зручності читання текстів у MS Word документах роблять абзаци за допомогою перенесення рядка, а не централізованих відступів, на кшталт <p></p>:

Не робіть вертикальних відступів таким чином (порожніми тегами <p>), якщо вам не вистачає відступів між абзацами, то краще це виправляти централізовано, через css класи тегів <p> або будь-яких інших.

Намагайтеся, щоб відступи були невеликими і допомагали читанню, а не мали такий вигляд:

А ось приклад коректного використання відступів:

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

Якщо треба виділити якусь інформацію, то виділяйте її підзаголовками, курсивом, жирним, додатковими елементами тощо:

Допускається для оформлення текстів на сайті такі теги:

• <p> — тег абзацу;
• <ul><li> та <ol><li> — маркований і нумеровані списки;
• <b> або <strong> — виділення жирним;
• <i> або <em> — виділення курсивом;
• <u> — підкреслення;
• <a> — посилання;
• <img> — картинки;
• <del> — закреслений текст;
• <h2>, <h3>, <h4>, <h5>, <h6> — підзаголовки.

У деяких випадках можуть використовуватися в тексті й інші теги, але це вкрай рідко. Здебільшого чистий код статей має складатися саме з них. А всі їхні стилі мають бути прописаними одразу в шаблоні сторінки.

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

Часто не зовсім досвідчені копірайтери роблять підзаголовки в статтях у Word-файлі просто виділенням жирним, і під час перенесення статей вони так само й викладаються:

Не потрібно використовувати просте виділення жирним для заголовків у статтях, у них є власний набір тегів <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Крім візуального оформлення всі теги заголовків обробляються пошуковими системами трохи інакше, ніж звичайний текст, і ключові запити в них трохи краще впливають на ранжування статті, ніж запити просто з тексту. Тому важливо їх використовувати правильно.

Заголовок h1 на сторінці має зустрічатися один раз і в статті позначати саме назву статті, а не якісь елементи дизайну. Це може бути так:

Або ось так:

Далі по тексту використовуйте підзаголовки h2, h3, h4, h5 і h6, і їх уже може бути необмежена кількість кожного. У середньому один підзаголовок на 500–750 знаків.

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

Підзаголовки мають насамперед виділятися розміром:

• Тег H1 — найбільший тег за розміром на сторінці.
• Тег Н2 має бути наступний за розміром.
• Тег H3 має бути наступний за розміром після H2.
• Далі можуть йти вже інші теги заголовків за зменшенням розміру шрифту до H6.
• Навіть H6 підзаголовок має візуально виділятися на тлі основних блоків тексту (шрифтами, відступом, кольором, жирністю тощо) і мати вигляд саме підзаголовка.

Приклад:

Можна підзаголовки Н2 оформляти з картинкою як підкладкою:

Або просто ефектними стилями:

А решту вже виділяти тільки шрифтами без яскравих додаткових елементів.

Не використовуйте сторонні теги, як-от <span>, <strong>, та ін. всередині тегів підзаголовків, типу:

Усі правки стилів підзаголовків робіть централізовано через css і класи. Особливо суворо цього правила потрібно дотримуватися в заголовку h1.

Підзаголовки мають створювати ієрархію в статті, якщо сформувати її зміст. Приклад:

• розділ з h2
  • дочірній розділ з h3
  • дочірній розділ з h3
    • глибший підрозділ h4
    • глибший підрозділ h4
  • дочірній розділ з h3
• розділ з h2

Не потрібно використовувати тільки якийсь один вид, якщо у статті складна структура, оскільки має простежуватися ієрархія.

Підзаголовки мають виділятися відступами, але вони мають бути невеликими й однаковими зверху і знизу, або ще краще, якщо вони візуально об'єднують заголовок і наступний текст у групу. З цього приводу є гарне пояснення від команди Tilda:

Списки

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

Ці списки мають свій власний синтаксис при верстці. Ось так, наприклад, виглядає чистий код маркованого списку і його відображення:

А ось так нумерованого:

Текст між тегами <li>, що закриваються і відкриваються, не повинен бути обрамлений додатково в теги абзаців <p>, що зазвичай відбувається, якщо переносити контент із Word без правок коду. Інакше ви отримаєте додаткові відступи між пунктами списку, не завжди красиві, типу:

Тому під час верстки статті обов'язково прибирайте все це.

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

Буває, що під час верстання дизайну сайту для списків прибирають відступи та маркери, тоді під час викладення це має такий вигляд:

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

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

Посилання в тексті статті

Для статей здебільшого важливо, щоб під час їхнього прочитання користувачі затягувалися в читання та переходили від однієї статті до іншої на сайті або йшли зі статті взагалі на інший сайт (особливо це важливо в проєктах, які намагаються переводити користувачів на інші сайти зі свого за партнерськими посиланнями). Тому обов'язково в статтях вказуються посилання на інші документи та навіть сайти. Але недостатньо просто вказати, важливо щоб посилання були такими, щоб користувачі з першого погляду на статтю розуміли, де і куди можна клацнути на сторінці. Тому посилання повинні мати таке налаштування стилів у css, щоб вони за кольором візуально ще відрізнялися від решти тексту, навіть не натиснувши, типу:

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

Для блогів та інтернет-видань, де важливо викликати перехід углиб сайту, можна ще зробити так, щоб там, де це необхідно, посилання на інші ваші статті на сайті шикувалися за текстом ось так (з обтіканням збоку):

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

При правильній реалізації на додаток до звичайних посилань у вас будуть і такі, і коли буде потрібно, ви зможете спеціально застосувати при оформленні статті або новини. І під час оформлення статей в адмінці ви писатимете окремими тегами звичайні посилання, а окремими ― ті, що будуть у скрипті. Цей скрипт ще на етапі розроблення сайту необхідно вбудувати в його код і передбачити, щоб візуальне оформлення таких посилань було аналогічним звичайним, включно з появою руки під час наведення (щоб для користувача відмінностей не було на перший погляд).

Картинки

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

Ось приклад уточнювального використання картинок:

Коли вони дійсно доповнюють текст візуальним поясненням.

А ось приклад нейтральної картинки в тексті:

Коли вона просто додає візуальних ефектів-акцентів, але при цьому не несе великого смислового навантаження.

Зверніть увагу!!! Якщо в тему немає можливості зробити адекватну уточнювальну картинку, то краще взяти картинку близько тематичну і накласти на неї тематичну фразу, пораду або текст підзаголовка, як це зроблено на зазначеному вище прикладі, ніж залишитися без картинки взагалі.

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

Таке рішення, з одного боку, дасть змогу розглянути картинку в деталях, а з іншого — не відведе користувача зі статті. Саме тому не треба відкривати картинку окремою сторінкою.

Щоб стаття мала гарний вигляд, потрібно, розміщувати 1 картинку, як і будь-який інший візуальний елемент (відео, таблиці, врізки, цитати) на 750–1000 знаків тексту. Якщо за логікою розповіді в статті треба наводити більше картинок, то не страшно, головне розділяти логічні групи картинок текстом. Але якщо проміжки без картинок більші й там немає додатково жодних візуальних елементів, як-от таблиць, списків, порад тощо, то текст матиме нудний вигляд:

У деяких тематиках подібні статті будуть нормою (наприклад, юриспруденція), але для більшості тем — це буде не дуже.

У фото має бути можливість прописування унікальних, красивих унікальних підмалюнкових підписів, як тут:

У разі якщо у вас картинка доповнює контент, то підмалюнковий підпис — це поле, де можна дати пояснення зображенню, яке дійсно допоможе користувачеві.

Для всіх картинок має бути можливість прописування унікальних alt. Як відомо, alt картинки враховується під час ранжування сторінок у пошуку, тому важливо, щоб була можливість їхнього заповнення для всіх картинок.

Галереї

Якщо треба розмістити за змістом кілька картинок поспіль, то краще використовувати функціонал галереї на 2–4 картинки в ряд, а не картинки одна під одною. Приклад галереї:

При клацанні на картинку має далі спливати модальне вікно з можливістю гортання всіх картинок галереї в повному розмірі:

У б'юті-блогах часто трапляється викладка великої кількості фото за темою в рамках галереї, і цей момент, якщо у вас аналогічна проблема, теж варто врахувати. Варіантів візуального оформлення галерей маса.

Наприклад, з розбивкою за тегами картинок:

Або з горталкою:

За дуже великої кількості фотографій у галереї, які треба показати саме в першому блоці, можна використати галерею, що покаже кількість картинок і прев'ю 1–2 картинок з описом, на кшталт:

А далі вже всю іншу галерею користувач зможе подивитися в модальному вікні.

У сайту Vogue галереї з гортанням показуються взагалі прямо в тексті й можна розглядати всі зображення, не вдаючись до модальних вікон:

Для низки сайтів, де не потрібне додаткове збільшення картинок, це може бути непоганим рішенням. Але от якщо треба буде збільшити картинку, то тут подібний варіант не підійде.

Зверніть увагу!!! Усі фото повинні мати можливість прописування унікальних тегів alt для кожної картинки, і галереї тут не виняток.

Розташування картинок у тексті

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

Або робіть картинки по ширині тексту, як це зроблено тут:

Так вони набагато краще візуально розділяють текст на блоки, ніж наведений приклад:

Бажано, щоб картинки були широкими, а не високими. Але якщо немає можливості використовувати широкий варіант, то тоді врятує вирівнювання по середині.

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

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

Порівняння картинок

Якщо розробляєте дизайни або інші творчі роботи, то ефектним буде показ дизайнів у стилі порівняння (до і після), так тут:

або тут:

Таке рішення більше розповість про вашу роботу, ніж тисячі слів тексту.

Відео

У більшості тематик чудовим доповненням до тексту статті буде відео. Тому важливо передбачити можливість його вбудовування в текст статті. Найпростіший варіант для більшості користувачів — це вбудовування відео з YouTube, Vimeo або аналогічних сервісів на сайт. І здавалося б, що може бути простіше? YouTube сам дає код плеєра з відео у вигляді iframe, тут:

Скопіював його, та вставив у статті й усе:

Усе, та й не все.

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

Не варто робити його з обтіканням текстом з боків невеликим віконцем:

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

Але ще не варто забувати й про мобільних користувачів. Якщо ви просто зустрінете в коді сторінки тег iframe з YouTube навіть із правильними розмірами, то ваше відео матиме гарний вигляд на десктопі, але водночас, найімовірніше, буде набагато більшим за екран у смартфоні або відображатиметься в неправильній пропорції. І адаптуватися під розмір екрана нормально не буде. Приклад:

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

Зверніть увагу! У деяких CMS сайтів необхідно просто підготувати html-приклад для вбудовування відео й далі його копіювати із заміною адреси відео зі статті у статтю у вигляді html-тегів. Проте для деяких CMS-систем є вже заздалегідь розроблені плагіни, яким в коді сторінки треба просто правильно вказати шорткод з адресою відео, потім все інше сайт зробить сам.

У разі якщо ви плануєте вставляти ролики не з сервісів, а з хостингу сайту, то однозначно без початкового налаштування програмістом тут не обійтися.

Аудіо

Особисто я не великий фанат подкастів й аудіоконтенту, якщо це не музика, але є багато користувачів, які нададуть перевагу аудіоконтенту над читанням. У цілій низці тематик доповнити статтю аудіо — чудовий альтернативний засіб сприйняття контенту. У такому разі варто заздалегідь підібрати сервіс, де буде публікуватися ваше аудіо і вбудувати плеєр сервісу на сайт. Приклад:

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

Вставки з інстаграму, фейсбуку, твіттеру тощо.

Якщо ви робите новинне видання або інтернет-журнал, то вам ніяк не обійтися без вставок з цитатами відомих людей, їхніх постів у соцмережах або фотографій. Приклад:

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

Зміст статті

Якщо любите писати лонгріди, як це люблю я, то обов'язково робіть для таких статей зміст із якорями, в якому кожен пункт при натисканні буде перекидати користувача на відповідний розділ (підзаголовок) статті. Як тут, наприклад:

Немає сенсу дробити зміст у статтях на 2000–3000 знаків, але читати статтю, яка 8000 тисяч знаків і більше без змісту для багатьох користувачів проблематично. Особливо, якщо з усієї статті потрібен конкретний фрагмент.

При створенні змісту варто зауважити:

• якщо стаття має складну структуру та заголовки різного рівня h2, h3 і далі, то тільки краще, щоб меню було не таким, як на фото, а багаторівневим, наприклад, як тут:

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

Не забуваємо про відображення меню на мобільному, воно має бути не менш зручним, ніж на комп'ютері.

Таблиці

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

Саме оформлення таблиць може бути різним:

або:

або:

Є низка моментів в оформленні таблиць, на які треба звернути увагу:

• Бажано, щоб заголовки стовпців були виділені кольором або стилем серед решти таблиці (що видно на наведених вище прикладах).
• Таблиці повинні коректно відображатися на мобільних пристроях і мати свій власний горизонтальний скрол через CSS стилі. Це в жодному разі не скрол самого браузера (бо інакше гугл вважатиме, що сторінка не адаптивна), а якщо це скрол верстки, то у гугла тоді претензій до сторінки немає.

і вона ж на мобільному:

У цьому разі стовпці та рядки навіть перебудувалися, помінялися місцями, з'явився внутрішній скрол.

Приклади документів у вигляді картинок

Бувають тематики, де важливо показати приклади документів, і їх теж можна використовувати як візуальний контент. Якщо це ваш випадок, то зробіть так, щоб відображалося невелике прев'ю документа — мініатюра (кілька в ряд):

А далі при натисканні документ розгортався повністю поверх вікна — приклад:

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

Приклади pdf-файлів, презентацій тощо

Є тематики, де потрібно вбудовувати цілий pdf-документ або презентацію в статтю з можливістю перегортання і читання прямо на сторінці. Оптимально показ документів на сторінках сайту робиться аналогічно тому, як розміщуються YouTube ролики в статтях, з тією тільки різницею, що для відображення pdf-файлів і презентацій через iframe є зовсім інші сервіси, які дають змогу залити на себе потрібний документ і потім вставити його iframe у вашу сторінку для показу.

Наприклад, для публікації pdf-документів є сервіс Yumpu.com, який дає змогу залити документ до себе, налаштувати його відображення для сторонніх сайтів і далі вставити отриманий код прямо в сторінку. Використання цього сервісу не вимагає втручання програмістів, оскільки адаптивність цього блоку можна регулювати налаштуваннями показу документа в адмінці самого сервісу (приклад):

І далі вже код, що вбудовується, робитиме цей фрагмент адаптивним.

Для різних типів файлів існують різні подібні сервіси, але не варто також забувати, що аналогічним способом можна вбудувати на сторінку й документи, що лежать на Google Drive (через Google Doc, Google Spreadsheets тощо).

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

Різноманітність верстки

Якщо ваші статті містять багато різних порад і важливих ідей, які варто було б виділити серед іншого контенту, то краще давати це все не єдиним текстом із виділеннями жирним, а саме передбачити спеціальні блоки по тексту статті, як це зроблено тут:

Поради та важливі ідеї

Важливі поради та ідеї дуже добре візуально розділяють текст на частини, якщо мають виділення кольором, рамкою або шрифтом, типу:

або

Додатково можна ще додавати виділення жирним і, залежно від поради, давати різні кольори виділення, якщо це матиме гарний вигляд у вашому дизайні, як на прикладах нижче:

Приклади та визначення

У низці тематик, таких як маркетинг, часто наводять описові приклади. Це робить тексти зрозумілішими й іноді навіть більш особистими для читача. Однак такі приклади, просто подані як частина основного блоку тексту, будуть погано сприйматися, оскільки можуть бути не в один абзац, а в кілька, і не мати акценту. Найкраще подібні приклади виділяти будь-якою рамкою (або по периметру, або по одній зі сторін). Можна в цих блоках видозмінювати шрифт, колір фону всього блоку або колір тексту, щоб чітко показати, що весь цей блок, попри поділи на абзаци, є єдиним цілим і виділяється серед іншого контенту. Тому на сайті має бути можливість показати подібне, наприклад, так:

Другий варіант виділення неповною рамкою:

Якщо у вашій тематиці в тексті трапляються визначення для термінів, то їх так само як і приклади, варто виділяти окремим блоком і, можливо, ще й додатково виділити кольором. Це дасть змогу ще більше виділити їх серед усіх інших блоків із прикладами. Наприклад, як тут:

Блоки правильно / неправильно

Є ціла низка тематик, де під час написання статті можна наводити приклади, як негативні, так і позитивні. І щоб звертати увагу читачів на це, можна використовувати залежно від контенту різні варіанти оформлення блоку правильно / неправильно (переваги / недоліки) (приклад):

Якщо у вас у прикладах мають бути на додачу приклади та пояснення, то можна робити подібні складні конструкції, де поєднуються елементи оформлення блоків прикладів і блоків правильно / неправильно:

Такі рішення зустрічаються не часто, проте у деяких темах вони є і, якщо це ваш випадок, доведеться робити подібне. За замовчуванням такі блоки зазвичай у дизайн не закладають, тому доведеться додатково допрацьовувати цей момент.

Акордеон контенту та FAQ

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

Особливо часто цю методику застосовують під час оформлення блоку FAQ (запитання-відповідь) — текст запитання буде заголовком пункту акордеона, а відповідь — у частині, яка випадає. Приклад:

Зазвичай сам заголовок блоку виділяється тегом h2, а ось питання можна виділити тегами h3 або взагалі дати просто візуальне виділення (наприклад, жирним шрифтом або кольором).

Таби контенту

Якщо вам потрібно компактно показати кілька контентних блоків, хорошим варіантом будуть таби. Наприклад, як на сайті Schema.org:

За допомогою табів можна показати блоки було / стало, кілька варіантів реалізації одного й того ж завдання або просто заверстати різні смислові блоки.

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

Цього блоку за замовчуванням немає в багатьох CMS, але в деяких із них він легко реалізується через шорткоди. Головне, заздалегідь зробити дизайн для їхнього оформлення і вибрати оптимальний варіант:

Блок із цитатами

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

Також можна працювати з цитатами тільки одного експерта, публікуючи їх по ходу статті.

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

Якщо контент із цитатами планується у вашій тематиці, не забудьте передбачити для нього блок. Наприклад:

У подібному блоці має бути виділено текст коментаря автора, є можливість показати його ім'я, коротку інформацію про нього і фото (за бажанням). Приклад:

У цьому варіанті навіть використовується цитування не на весь рядок тексту, а як бічний блок, що має гарний вигляд не у всіх дизайнах статей.

Елементи, що продають, для статей

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

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

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

Наприклад, це може бути блок наприкінці статті, який збирає контакти в обмін на щось корисне, типу такого:

Або елемент наприкінці статті з товарами, про які йшлося в тексті, приклад:

Бажано, щоб ці блоки були не просто картинками та посиланнями, а повноцінними індексованими html-блоками, кожен з яких містить:

• невелику картинку;
• текстову пропозицію;
• кнопку із закликом до дії, при натисканні на яку буде відкриватися форма, створена під відповідну пропозицію.

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

Статтю просто перервали по абзацу й дали блок, що продає.

А ось аналогічний приклад з формою (що спливає при натисканні):

Або ось:

!!!Зверніть увагу: залежно від можливостей вашої CMS подібні елементи програмісти можуть реалізувати по-різному. Хтось може зробити просто в одній зі статей повноцінне заготовлення html-коду, де ви будете тільки в коді заготовлення змінювати текст і посилання, а далі публікувати. Але при цьому вам треба знати хоча б основи верстки, щоб контролювати роботу або правити все це самому. Або, як варіант, програміст може встановити плагін або модуль шорткодів і налагодити відображення його за дизайном. Тоді ви просто прописуватимете шорткоду потрібні URLи та тексти в окремих полях, і все оформлення підлаштовуватиметься під ці правки. І для роботи з цим варіантом вам не потрібно буде поглиблене вивчення верстки, а достатньо лише освоїти спеціальні команди виклику заготовлень. Звісно, зручніший з погляду користувача другий варіант, але, на жаль, на багатьох CMS подібне впровадження неможливе або дуже дорого коштує, і тому там може застосовуватися перший варіант.

Зокрема, має бути можливість від сторінки до сторінки змінювати в цих блоках тексти, заголовки, фото й адресу, щоб давати релевантну змісту статті пропозицію. Тобто щоб на одній сторінці ця форма за підсумком відпрацьовування надсилала одне, а інша — інше (те, що вкажемо заздалегідь під час верстки сторінки з блоком).

У сайтів-оглядачів Амазона може непогано працювати ось такий варіант оформлення продуктів прямо в тексті статті:

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

Варіант має право на існування, проте в його реалізації є одне "але": здебільшого під час адаптивного верстання цей блог програмується прихованим на мобільних пристроях, оскільки місця на екрані для нього немає. І в такому разі він ховається, але оскільки більшість користувачів сайтів заходять на них із мобільних, то практично всі ці користувачі даний блок не бачать, а отже, не зможуть ним скористатися. Тому для таких рішень дуже важливо детально продумати, як показати товар там, а це часом простіше зробити через блоки товару по тексту статті, як у вище запропонованих варіантах.

Приклади коду

Не секрет, що більшість різних IT і маркетингових компаній просуваються насамперед завдяки блогам. У статтях таких тематик нерідко треба показати фрагмент коду або стилів верстки. І ось тут починаються проблеми. Оскільки без спеціальних надбудов більшість двигунів блогів усі фрагменти коду обробляють по-своєму: замінюючи при цьому символи, або видаляючи їх. Таке не рідкісне явище в популярних CMS-системах, типу WordPress. А якщо навіть вам пощастило, налаштуйте сайт так, щоб він нічого не обробляв, інакше великі фрагменти кодів, які можуть бути важливі як приклади для статей, матимуть не дуже гарний вигляд, якщо їх буде викладено суцільним шаром у текст.

Щоб фрагменти програмного коду або верстки показувати нормально в тексті, варто дивитися або в бік сторонніх рішень, які просто вбудовуються в код сторінки, або як відео з YouTube, і дають можливість показати все акуратно, типу codepen.io:

Або шукати спеціальні плагіни двигуна сайту.

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

Часті помилки під час оформлення

Хоча описана тема не є новою, все ще можна зустріти багато сайтів, що мають такі помилки:

• Перебір з оформленням у тексті та візуальними елементами:

• Занадто великі відступи, які заважають читанню:

• Складні для читання шрифти в оформленні навіть заголовків ― таке має гарний вигляд, але змушує користувачів напружуватися під час прочитання:

• Занадто великі або занадто дрібні шрифти: