Дизайн / шрифти
Якщо говорити про читабельність і тому, як на це впливає дизайн, то відразу чомусь хочеться сказати про шрифти. Але залишимо їх поки в спокої.
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Звичайно, професійно проконсультувати з цих питань вас може веб-дизайнер. Хоча іноді я бачив такі макети, що я сам би зробив краще, напевно. Ви повинні розуміти, що дрібний сірий шрифт на чорному тлі - це варіант, який зовсім не годиться.
Простий спосіб перевірити поєднання кольору тексту і фону - самому прочитати пару записів на своєму сайті, а також дати це зробити друзям. Якщо ви відчуваєте якийсь дискомфорт, безумовно щось потрібно міняти.
До речі, ми трохи торкнулися розміру шрифту. Як ви думаєте, яким він повинен бути? У багатьох макетах я бачу, що у основного шрифту розмір 10-14 пікселів. Але моя думка (і не тільки моє), що мінімум має бути 16 пікселів. Літери повинні бути дуже чітко видно, людина зі здоровим зором не повинен додатково напружувати очі, щоб щось розгледіти.
З розміром зрозуміло, я думаю. Залишилося обговорити сам шрифт, яким він повинен бути. Для читання оптимальними є стандартні шрифти без зарубок: Arial, Times New Roman, Tahoma, Verdana. Моя думка в цьому питанні така, що краще не мудрувати і поставити в якості основного шрифт з числа стандартних.
Підсумок по дизайну і шрифтів
Я не кажу, що повідомив вам якусь понад корисну інформацію - ви і самі могли здогадуватися про ті речі, про які я написав. Але повторення - мати навчання. Підведемо підсумок:
Колір тексту повинен поєднуватися з фоном. Краще не брати повністю контрастні один одному кольору, це може різати очі
Розмір шрифту повинен бути побільше. Чи не 10-12 пікселів, а 16. А в ідеалі на початку кожного запису потрібно зробити кнопки, клікаючи по яким читач сам би зміг встановити розмір шрифту, зручний для нього.
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Для читання найкраще підійде один зі стандартних шрифтів без зарубок
оформлення статті
Жирний, курсивний, підкреслений, закреслений, виділений текст. Але не переборщити з цим теж. Виділивши потрібні слова, читабельність помітно поліпшується.
Підзаголовки. Напевно, найважливіший елемент, який дозволяє розбити статтю на підрозділи. Важливо, щоб підзаголовок не був занадто довгим (не більше 60 символів).
Абзаци. Ну це зрозуміло, не будете ж ви писати весь текст в одному абзаці, вірно? Хоча пару раз мені зустрічався такий текст. Це повний жах. Але просто використовувати абзаци мало. Потрібно ще й контролювати кількість вмісту всередині. Бажано не допускати, щоб в абзаці було більше 5-7 рядків тексту. Інакше його вже важко сприймати.
Списки. Де потрібно - марковані, в іншому місці - нумеровані. Списки відмінно покращують зовнішній вигляд записи, привертають увагу. Звичайно, тут дещо залежить і від дизайнера (яке він розробив оформлення) бо особисто мені сильно не подобається дизайн, який є для списків в html за замовчуванням. І то він краще, ніж взагалі не використовувати списки.
Цитати. Вони оформляються відмінно від звичайного абзацу, тому дозволяють теж розбавити текст. Якщо є можливість, варто їх використовувати. Хоча б іноді. Заодно це дозволяє зробити сам текст цікавіше.
Картинки. А куди ж без них. Краще використовувати хоч якусь картинку, ніж взагалі ніяку. Основна мета зображень - розбити текст, зробити його читання більш простим, а також дозволити мозку краще запам'ятати інформацію. Тому що коли ви читаєте про тигра, і в той же час бачите його на зображенні - це дозволяє краще запам'ятати, про що ви взагалі читали.
В принципі, з основних елементів це все. Тут би можна було б ще згадати таблиці, але часто ви в свої статті вставляєте таблицю? Думаю, не часто. Але там, де вони є, безумовно читабельність не погіршується.
Добре, а як перевірити читабельність? На щастя, ви людина, тому можете і самі її оцінити. Якщо хочете, можете залучити до оцінки друзів або інших вебмайстрів. Цього буде досить.
Додаткові поради та фішки
Як ще поліпшити читабельність? Може допомогти впровадження деяких додаткових стилів. Наприклад, першу букву тексту можна оформити не так, як всі інші. Це можна зробити в css за допомогою псевдоелемента: first-letter. Такий ефект часто зустрічається в книгах.
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
Сучасні тенденції веб-розробки
За найближчі 5 днів ми складемо ваш покроковий алгоритм професійного зростання з нуля в сайтобудування.