Mendesain untuk Artikel Berbentuk Panjang

Merancang sebuah "artikel" yang indah dikerjakan dengan banyak pertimbangan. Tidak seperti, katakanlah, beranda, artikel bentuk panjang kurang tentang mendesain antarmuka daripada mendesain teks dengan cara yang menciptakan pengalaman membaca yang santai dan nyaman.

Itu karena artikel berhubungan dengan konten bentuk panjang yang, pada gilirannya, cenderung dihargai oleh interaksi "waktu di halaman" dengan pengguna. Kami ingin seseorang membaca narasi yang lengkap. Ada ruang alami antara waktu seseorang mendarat di sebuah artikel dan membaca semua kata. Dan mudah-mudahan, ruang itu cukup mendalam untuk tidak hanya menampung pengguna, tetapi juga memancing pemikiran, ide, dan, mungkin, tindakan. Setidaknya itulah yang saya harapkan karena saya mendapatkan perhatian Anda dan Anda membaca artikel yang sedang Anda baca.

Ada keseimbangan. Di satu sisi, kami mendengar itu “tidak ada yang membaca internet.” Di sisi lain, artikel bentuk panjang menuntut perhatian yang cermat. Mempertimbangkan nilai pemasaran konten saat ini dan meningkatnya ketidaksabaran pengguna, memikat pembaca selama mungkin harus menjadi perhatian utama. Mari kita lihat beberapa praktik terbaik dan contoh halaman artikel yang luar biasa untuk mendapatkan ide yang lebih baik tentang apa yang membuat pengalaman membaca yang menarik secara visual untuk artikel bentuk panjang (tanpa mengorbankan pengalaman pengguna), dan bagaimana kita dapat meniru efeknya.

Kemenangan cepat

Biarkan saya dengan cepat membuat daftar apa yang menurut saya mungkin sudah jelas bagi banyak dari Anda, tetapi merupakan hal yang efektif untuk keterbacaan konten:

• Meningkatkan ukuran font: Kita tahu bahwa 16px adalah default dan baik-baik saja dalam banyak desain, tetapi ukuran font yang lebih besar mengundang karena menyiratkan pengguna bebas untuk bersandar dan menetap tanpa harus miring ke depan dengan layar di wajah mereka untuk membaca.
• Bertujuan untuk karakter per baris: Sangat sedikit orang yang saya kenal suka bekerja lebih keras daripada yang mereka butuhkan, dan itu juga berlaku untuk membaca. Daripada menggunakan lebar viewport penuh, cobalah untuk mempersempit semuanya dan menyeimbangkannya dengan ukuran font Anda yang lebih besar untuk mendapatkan sedikit karakter pada setiap baris teks. Sweet spot Anda mungkin berbeda, meskipun banyak orang menyarankan antara 45-75 karakter per baris untuk membantu membatasi seberapa jauh mata pembaca harus bekerja dari kiri ke kanan. Kris memiliki bookmarklet untuk membantu menghitung karakter, tetapi kami juga memiliki ch unit di CSS untuk mendapatkan hasil yang dapat diprediksi.
• Naikkan ketinggian garis: Ketinggian garis default akan terasa hancur. Ini lucu, tetapi lebih banyak ruang di antara garis (sampai titik tertentu, tentu saja) kurang bekerja untuk mata, yang tampaknya bertentangan dengan saran karakter-per-baris di mana kita biasanya ingin mata menempuh jarak yang lebih pendek. Tinggi garis antara 1.2 dan 1.5 tampaknya menjadi rentang yang cukup khas untuk konten bentuk panjang.

Jika Anda belum pernah melihatnya, Pierrick Calvez memiliki yang hebat “lima menit” panduan tipografi yang dikemas dalam seikat buah menggantung rendah seperti ini.

Desain untuk ruang bernapas ekstra

Anda mungkin terbiasa merancang "paro atas" di mana real estat adalah komoditas utama. Itu seperti properti tepi pantai di dunia web karena di sanalah kami terbiasa mengemas barang-barang bernilai tinggi, seperti spanduk pahlawan, ajakan bertindak, dan apa pun untuk membantu menjual sesuatu. Paro atas bisa sangat mirip dengan pusat kota perkotaan yang padat dengan lalu lintas tinggi dan gedung-gedung tinggi.

Artikel berbeda. Mereka memungkinkan Anda untuk meregangkan sedikit. Jika kita ingin mengambil analogi pembangunan kota sedikit lebih jauh, artikel memiliki areal untuk bersandar pada semacam pendekatan desain "kurang lebih". Itulah yang membuat pilihan desain yang tampaknya kecil — seperti tipe — sangat penting untuk keseluruhan pengalaman.

Lihat contoh di bawah ini. Tautan yang digarisbawahi memiliki sedikit lebih banyak ruang untuk bernafas (khususnya, mereka muncul di bawah descender). Ini sebenarnya adalah sesuatu yang dapat Anda aktifkan di seluruh situs tetapi terlihat sangat bagus di halaman artikel karena meningkatkan keterbacaan. Itulah jenis pilihan desain halus yang berkontribusi pada ruang bernapas ekstra.

text-underline-position: under; adalah baris CSS yang membuat ini berfungsi. Tentu saja, text-decoration harus diatur ke sesuatu selain none (underline dalam hal ini), juga.

Contoh di atas juga memiliki fitur text-decoration-thickness, yang mengubah ketebalan garis bawah (dan jenis garis lainnya). Anda dapat menggunakan properti CSS ini untuk mencocokkan ketebalan garis dengan ukuran dan/atau berat font.

Berikut ini contoh lengkapnya:

a {
  text-decoration: underline;
  text-decoration-thickness: 2px;

  /* or */
  text-decoration: underline 2px;
  text-underline-position: under;
}

Tapi sebelum Anda mencapai text-decoration singkatan, ime Vidas memiliki beberapa "gotcha" ketika datang untuk menggunakannya yang layak ditinjau.

Memimpin ke dalam konten

Tutup topi adalah huruf bergaya yang dapat ditempatkan di awal dokumen atau bagian dokumen. Mereka pernah digunakan dalam teks Latin, tetapi saat ini sebagian besar digunakan untuk alasan dekoratif.

Secara pribadi, saya pikir drop cap menghambat keterbacaan. Namun, mereka bisa menjadi cara yang bagus untuk "mengarahkan" pembaca ke konten utama, dan mereka seharusnya tidak menimbulkan masalah aksesibilitas serius selama Anda menggunakan ::first-letter elemen semu. Ada lainnya (lebih tua) metode yang melibatkan lebih banyak HTML dan CSS serta penggunaan atribut ARIA agar konten tetap dapat diakses.

Menggunakan ::first-letter, CSS akan terlihat seperti ini:

/* select the first letter of the first paragraph */
article > p:first-child::first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

Pasti akan menyenangkan jika kita bisa menggunakan initial-letter properti, tetapi hampir tidak ada dukungan untuk itu pada saat saya menulis ini. Jika kami memilikinya, semua matematika untuk ukuran font dan tinggi garis akan dihitung untuk kami!

CodePen menantang orang-orang untuk memamerkan keterampilan styling drop-cap mereka beberapa tahun yang lalu dan Anda dapat melihat banyak contoh rapi darinya di koleksi ini.

Loncat ke daftar isi utama

Pembaca layar memungkinkan pengguna untuk melompat ke konten utama selama itu membungkusnya dalam a <main> elemen. Namun, mereka yang menavigasi situs web dengan tab tidak mendapat manfaat dari ini. Sebagai gantinya, kita harus membuat tautan jangkar "lompat ke konten utama". Tautan ini biasanya disembunyikan tetapi terungkap setelah pengguna membuat tab pertama mereka (yaitu tampilkan pada fokus).

Akan terlihat seperti ini:

<!-- anchor -->
<a id="skip-link" href="#main">Skip to main content</a>

<!-- target -->
<main class="main">
  <!-- main content -->
</main>

#skip-link {
  position: absolute; /* remove it from the flow */
  transform: translateX(-100%); /* move it off-screen so that it appears hidden but remains focusable */
}
#skip-link:focus {
  position: unset; /* insert it back into the flow */
  transform: unset; /* move it back onto the screen */
}

.main {
  scroll-margin: 1rem; /* adds breathing room above the scroll target */
}

Ada cara lain untuk melakukannya, tentu saja. Berikut adalah beberapa penyelaman lebih dalam tentang membuat tautan lewati.

Visual yang mulus

Saya suka ilustrasi di artikel ini. Terlepas dari betapa luar biasanya penampilan mereka, mereka tidak menuntut terlalu banyak perhatian kognitif. Mereka memperkenalkan momen kegembiraan singkat tetapi juga menyarankan bahwa artikel itu sendiri memiliki sesuatu yang lebih penting untuk dikatakan. Sebagian, ini karena penggunaan transparansi, sedangkan gambar persegi panjang menangkap lebih banyak ruang negatif dan karena itu menuntut lebih banyak perhatian (yang baik-baik saja jika itu adalah efek yang diinginkan dan gambar sangat penting untuk cerita).

Namun, penting untuk diketahui bahwa gambar sebenarnya tidak transparan sama sekali, melainkan JPEG non-transparan dengan warna latar belakang yang sama dengan konten. Saya berasumsi itu untuk menjaga ukuran gambar lebih kecil dibandingkan dengan PNG yang mendukung transparansi.

Kelemahan untuk "memalsukan" latar belakang transparan seperti ini adalah bahwa hal itu akan membutuhkan tipu daya (dan pemeliharaan) tambahan untuk mendukung a UI mode gelap jika situs Anda kebetulan menawarkannya. Jika ilustrasinya cukup datar dan sederhana, maka SVG mungkin merupakan cara yang tepat karena kecil, skalabel, dan mampu menyatu dengan latar belakang apa pun.

Tetapi jika Anda terikat untuk menggunakan gambar raster dan lebih suka bekerja dengan file PNG untuk transparansi, Anda akan ingin melihat menggunakan gambar responsif dan loading="lazy" atribut untuk waktu pemuatan yang lebih cepat.

Letakkan fokus pada jenis dan semantik

Anda mungkin tidak banyak bicara bagaimana or dimana seseorang membaca konten di web akhir-akhir ini. Baik pengguna menerimanya dalam umpan RSS, mengirimkannya melalui email, melihatnya disalin dan ditempelkan dari rekan kerja, menemukannya di situs yang dihapus, atau yang lainnya, konten Anda mungkin terlihat berbeda dari yang Anda inginkan. Anda dapat merancang apa yang menurut Anda adalah artikel paling indah di seluruh negeri dan pengguna masih mungkin hancurkan tombol Mode Pembaca itu untuk cemas Anda.

Tidak apa-apa! Kemampuan konten untuk ditemukan sama pentingnya dengan desainnya, dan banyak pengguna memiliki cara mereka sendiri untuk menemukan konten dan preferensi untuk apa yang membuat pengalaman membaca yang baik.

Tetapi ada alasan mengapa seseorang menginginkan Mode Pembaca. Pertama, ini seperti "tidak melihat CSS" sama sekali. Maksud saya Mode Pembaca Safari or Pembaca Kecepatan Berani, yang menggunakan pembelajaran mesin untuk mendeteksi artikel. Tidak ada pengambilan atau eksekusi CSS, JavaScript, atau gambar non-artikel, yang meningkatkan kinerja dan juga memblokir iklan dan pelacakan.

Semacam ini "kasar minimalis” menempatkan fokus pada konten daripada gaya. Jadi, Anda mungkin sebenarnya ingin untuk merangkul gaya membaca berpendirian browser khusus untuk tujuan itu.

Cara melakukannya bukan dengan menggunakan CSS, tetapi dengan lebih memperhatikan HTML Anda. Mode pembaca bekerja paling baik dengan markup yang menggunakan HTML sederhana, semantik, terkait artikel. Anda harus melakukan lebih dari sekadar menampar tag di sekitar artikel untuk mendapatkan hasil maksimal darinya.

Anda mungkin hanya menemukan bahwa desain minimal yang menekankan keterbacaan daripada slickness sebenarnya adalah strategi yang baik untuk digunakan dalam desain situs Anda. Saya sangat menyarankan membaca posting Robin di “terkecil CSS” untuk pengalaman membaca yang solid.

Rangkuman artikel bentuk panjang!

Saya telah membagikan banyak hal yang menurut saya membuat pengalaman membaca yang luar biasa untuk artikel bentuk panjang di web. Tetapi melihat adalah percaya dan saya telah mengumpulkan banyak contoh yang menunjukkan apa yang telah kita bahas.