Pendekatan "Readability First" terhadap Media Query dan Layout

Indonesian (Bahasa Indonesia) translation by Biyan Pasau (you can also view the original English article)

Ada beberapa pendekatan yang berbeda untuk desain web yang ramah dibanyak resolusi dan penerapan media query yang telah muncul dalam beberapa tahun terakhir. Beberapa mungkin pernah Anda dengar meliputi:

"Mobile First" - Dimulai dari ponsel kecil dengan lebar sekitar 320px dan kemudian bertambah ukurannya.
"Desktop Down" - Dimulai dengan desain berukuran penuh lalu diperkecil jika diperlukan.
"Content First" - Menetapkan content test di awal proses dan kemudian merancang sekitarnya secara progresif.
"Device Specific" - Menargetkan perangkat dengan resolusi spesifik dengan breakpoints pada nilai px tertentu, misalnya smartphone di 320px hingga 480px, tablet di 768px hingga 1024px, 1200px+ untuk desktop dll.
"Device Agnostic" - Membuat sistem "satu desain cocok untuk semua" yang fleksibel di banyak resolusi.
"The Goldilocks Approach" - Membiarkan browser atau pengguna menentukan ukuran font yang ditetapkan sesuai pilihan, kemudian membangun layout berbasis em menggunakan tiga layout: 'Too Big', 'Too Small', 'Just Right'.

Dalam artikel ini saya akan berbicara tentang metodologi yang merupakan campuran dari hal-hal di atas, dengan beberapa tambahan. Ini adalah "Content First" dan "Device Agnostic", dan pada awalnya terinspirasi oleh typography berbasis em dari "Goldilocks Approach".

Saya suka menyebutkan sebagai pendekatan "Readability First", atau "Utamakan Keterbacaan". Desain yang dihasilkan dari pendekatan ini:

dioptimalkan untuk pengalaman membaca termudah, senyaman mungkin, berdasarkan data penelitian mengenai gerakan mata rata-rata pembaca.
dengan mulus menyesuaikan diresolusi apapun, bahkan pada telepon "mini-fridge 8.3459 inci" terbaru.
menyesuaikan secara proporsional pada browser atau pengaturan ukuran font dari pengguna.

Ide-ide yang terkait dengan pendekatan ini bukan hal baru, tetapi dicampur bersama-sama untuk menciptakan rasa tertentu dari desain responsif.

Dan untuk mengikutinya, saya juga akan berbagi dengan Anda skrip bernama "RDBL", yang telah saya buat untuk membantu Anda menilai seberapa mudah konten teks Anda dibaca pada berbagai point. Bahkan jika Anda tidak mengadopsi metode "Readability First" Anda mungkin masih menemukan widget kecil ini membantu dalam pendekatan desain responsif apa pun yang Anda gunakan.

Asas-Asas "Readability First"

Ada empat asas sederhana yang membentuk dasar dari pendekatan "Readability First", meskipun cara Anda menerapkannya akan sedikit berbeda dari salah satu desain ke yang lainnya. Mereka adalah:

1. Jangan menetapkan ukuran font dasar eksplisit; Serahkan ke browser atau pengaturan pengguna

Gagasan untuk meninggalkan default saja dan tidak menetapkan ukuran font dasar eksplisit untuk dokumen Anda adalah konsep yang diperkenalkan oleh The Goldilocks Approach.

Gagasan umum di balik ini didasarkan pada hal berikut:

Browser memiliki ukuran font default yang dianggap paling mudah dibaca untuk berbagai perangkat tergantung pada resolusi dan kepadatan pixel.
Pengguna juga dapat menetapkan ukuran font default mereka sendiri pada tingkat yang mereka rasa nyaman.

Dengan tidak menimpa pengaturan default ini dengan ukuran font dasar Anda sendiri, Anda dapat membiarkan teks desain Anda dapat diubah secara otomatis tergantung pada preferensi browser dan pengguna. Hal ini pada gilirannya memberi Anda awal yang mudah untuk membangun "keterbacaan" di berbagai perangkat dan individu.

Dalam beberapa kasus, Anda mungkin harus melakukan penyesuaian jika font sangat kecil atau relatif besar terhadap kebanyakan font lainnya pada ukuran default. Ada variasi yang cukup besar antara ukuran sebenarnya dari dua font bahkan jika di-code dengan ukuran yang sama.

Namun, jika Anda perlu mengubah ukuran font default untuk menormalisasinya, lakukan itu dengan nilai relatif, yaitu persentase atau em, yang diterapkan pada elemen html. Dengan cara ini ukuran teks keseluruhan Anda masih akan ditentukan oleh pengaturan browser/pengguna sehingga prinsip lainnya dari pendekatan ini dapat diterapkan.

1	html { font-size: 100%; }

2. Masukkan konten dummy pada permulaan proses desain, bukan akhir

Ketika kita berpikir tentang "desain" web sangat mudah untuk terjebak dalam "desain" bagian dari proses, kadang-kadang menambahkan konten hanya sebagai bagian terakhir dari proses setelah semuanya siap.

Namun, dalam pendekatan kita, konten teks ditambahkan pada awal proses, sebelum styling visual diterapkan. Proses kasarnya adalah:

Memasukkan teks dummy dalam elemen section atau article.
Pilih pengaturan font-family dan font-weight yang akan digunakan.
Tambahkan CSS berbasis unit relatif untuk mengontrol tata letak di sekitar teks tersebut dengan cara yang akan mengoptimalkan keterbacaan (lebih lanjut tentang ini di bagian yang akan datang).
Tambahkan styling visual sebagai semacam "paint job" di bagian atas layout tersebut, sesuaikan jika diperlukan.

Ini pada dasarnya adalah kebalikan dari proses yang populer di masa lalu dimana desain akan dimulai dengan styling visual di PSD, lalu kode layout CSS akan dihasilkan agar sesuai dengan desainnya, tipografi Kode CSS akan ditambahkan untuk meniru apa pun yang ada di PSD , Dan terakhir beberapa teks dummy akan dimasukkan ke demo produk yang telah jadi.

Alasan kami membalik proses ini adalah:

Untuk "paint job" visual agar bisa beradaptasi dengan baik dengan layout yang fleksibel, Anda perlu tahu tata letak tersebut.
Untuk menghasilkan tata letak yang fleksibel dan mudah dibaca, Anda perlu melihat bagaimana teks di dalamnya akan muncul di browser.
Untuk melihat bagaimana teks akan muncul, Anda perlu mengetahui font-family dan font-weight karena dapat disebabkan perbedaan variasi dalam ukuran.
Untuk memilih dan menerapkan pengaturan font-family dan font-weight, Anda memerlukan teks dummy.

Jadi, saat mengubah pengaturan tipografi dapat dibuat belakangan atau dalam proses sebagai bagian dari pemolesan desain, pilihan penting dari font-family dan font-weight harus diterapkan pada teks dummy sebelum menyelesaikan tata letak dan styling.

3. Buat desain Anda dalam nilai % dan em/rem relatif, bukan px

Dalam pendekatan ini sebagai aturan umum, jangan menggunakan unit px. Melainkan, semuanya dari height & width, margin & padding, border-radius & width di-set dengan unit relatif % dan em/rem.

Alasan utamanya adalah:

Dengan menggunakan nilai % pada wrapper layout dan kolom, Anda dapat membuat desain yang mengalir dengan lancar diantara breakpoint Anda daripada melompat dari satu lebar (width) ke lebar berikutnya.
Dengan menggunakan nilai em/rem pada bagian lainnya desain Anda akan menyesuaikan secara proporsional dengan pengaturan ukuran font browser/pengguna.

Fluid Wrapper & Column Berbasis %

Untuk membuat wrapper (pembungkus) disekitar desain yang memungkinkan menyesuaikan dengan viewport diantara breakpoint, gunakan teknik berikut:

1	.wrapper {
2	width: 100%;
3	max-width: 40em;
4	}

Pertama, kita menetapkan wrapper 100% untuk lebar viewport. Ini berarti bahwa pengunjung melihat desain Anda di suatu tempat di antara dua breakpoint Anda, mereka tidak dapat melihat area kosong dibagian luar, namun akan benar-benar rata dengan tepinya.

Namun, text dengan lebar 100% di monitor wide screen tidak akan mudah untuk dibaca. Demikian, kita menambahkan pengaturan max-width 40em yang berarti bahwa bahkan pada monitor besar, wrapper situs akan lebih lebar dari nilai tersebut. Nilai ini dapat disesuaikan lebih lanjut untuk keterbacaan (readability) seperti yang akan dijelaskan di bagian bawah.

Dibandingkan px, nilai % dapat juga diterapkan dalam column di wrapper ini, jadi mereka juga bisa menyesuaikan dengan lebar viewport. Padding dan border dapat diterapkan untuk column berbasis persen dengan nilai em tanpa membuang layout dengan memastikan properti desain box-sizing Anda ditetapkan pada border-box. Margin pada column harus ditetapkan dalam nilai %.

Catatan: Baca lebih lanjut tentang bekerja dengan jenis sistem layout ini dalam artikel saya di grid mixins.

Desain layout em/rem yang tidak berskala

Dengan menggunakan em / rem bukannya px berbagai aspek layout desain Anda akan selalu bersinergi dengan baik terhadap konten text. Tidak peduli apa pengaturan browser atau pengguna, ukuran font dasar keseluruhan desain Anda akan menyesuaikan secara proporsional, jika tidak, teks hanya akan mengubah ukuran dalam wadah tetap:

Desain tidak hanya akan terlihat lebih baik jika menyesuaikan secara proporsional, tapi juga akan lebih mudah dibaca. Kami membuat jarak antar konten teks dengan tujuan membuatnya semudah mungkin bagi pengunjung untuk membacanya. Hanya jika jaraknya berubah-sesuaian dan ukuran teks, kita dapat memastikan bahwa kita memperoleh manfaat dari elemen layout yang dirancang secara cermat ini.

4. Jaga konten teks utama Anda dalam rentang karakter ideal per baris

Alaminya, dalam metode "Readability First" fokus utamanya adalah pada konten teks dan presentasinya. Sebagian besar situs memiliki area untuk konten utama meraka dan karena itu, kita mulai dengan mengoptimalkan ruang tersebut untuk keterbacaan. Setelah area konten utama dioptimalkan, bagian lain dari layout dapat dibuat disekitarnya.

Cara mengoptimalkan area konten utama untuk keterbacaan adalah dengan menargetkan rentang karakter ideal per baris yang menurut penelitian akan menjadi yang paling nyaman dan alami bagi pembaca pada umunya.

Karakter per saccade, saccades per baris

Ketika kita membaca teks kebanyakan orang tidak melihat huruf perhuruf atau kata perkata. Sebaliknya, kita cenderung mengarahkan pandangan kita pada sekelompok karakter, menggunakan penglihatan peripheral untuk membaca sekaligus. Setiap kali mata bergerak dari satu kelompok karakter ke karakter berikutnya, itu disebut "saccade". Saccade dapat menjangkau dari 1 - 20 karakter, tapi rata-rata antara 7-9.

Jika ada terlalu banyak karakter/saccades per garis, mata menjadi tegang dan lelah, dan jika terlalu sedikit pembaca akan kehilangan fokus, karena harus masuk ke baris berikutnya, untuk menyerap konten dengan benar.

Ada beberapa perdebatan tentang jumlah pasti saccade per baris yang pembaca rata-rata merasa nyaman, namun setelah banyak penelitian saya menemukan bahwa kurang-lebih 9 adalah nilai yang cenderung disepakati secara umum. Berdasarkan angka-angka ini, untuk mengoptimalkan keterbacaan untuk pembaca rata-rata, jumlah karakter per baris harus antara 63 (untuk tujuh saccade) dan 81 (untuk sembilan saccade).

Tidak satu pun dari angka tersebut wajib digunakan sebagai aturan baku. Sebenarnya, pembaca santai sangat mungkin hanya menerima sembilan karakter dalam sembilan saccade, sementara pembaca yang sangat terampil bisa menerima ratusan. Jadi sementara Anda harus menargetkan kisaran ini, jika layout Anda sedikit lebih tinggi atau lebih rendah dari kisaran tersebut, itu akan baik-baik saja.

Bagaimana mengimplementasikan "Readability First"

Sekarang Anda sudah terbiasa dengan prinsip "Readability First", saya akan memandu Anda untuk menerapkannya dalam layout. Saya akan melakukannya dengan menunjukkan ke Anda bagaimana demo untuk script RDBL, yang saya sebutkan sebelumnya, dibuat.

Ini hanya seni program monokrom dengan tujuan demonstrasi, tapi Anda dapat menerapkan prinsip dan tekniknya untuk memvirtualkan gaya desain apapun.

Mulailah dengan menemukan lebar berbasis em yang terbaca maksimum

Agar area konten utama Anda maksimal sekitar 81 karakter per baris, Anda harus membatasi lebarnya, bahkan untuk layout wide screen. Ini umumnya bernilai lebar maksimal antara 35em - 40em, tambahkan atau kurangi beberapa 'em'.

Ini terkait dengan apa yang kami bahas di atas mengenai wrapper situs fluid kita pada lebar 100% dengan maksimum sekitar 40em. Pengaturan lebar maksimum ini akan menjadi salah satu nilai-nilai yang Anda sesuaikan untuk menjaga karakter per baris di bawah "batas atas" yang dapat dibaca. Jadi jika Anda membuat desain satu kolom, outer wrapper situs Anda akan berada disekitar 35em - 40em ditambah berapapun jumlah padding yang Anda tempatkan di sekitar teks.

Lainnya, jka Anda membuat desain multi-kolom, lebar kolom juga dapat ditambahkan ke lebar keseluruhan dari wrapper Anda. Misalnya, jika area konten utama Anda tidak lebih lebar dari 40em dan berada di dalam kolom dengan lebar 66,66%, dengan sidebar di sampingnya pada 33,33%, elemen pembungkus luar Anda memerlukan setelan max-width sekitar 60em. Ini mungkin tampak rumit pada awalnya tapi sebenarnya adalah sesuatu yang cukup mudah untuk diterapkan dalam praktik, seperti yang akan Anda lihat di bawah ini.

Tidak peduli apa yang Anda lakukan dengan desain Anda, Anda akan mengetahui lebar maksimum daerah konten utama Anda harus tetap berada dalam jangkauan readability first. Setelah batas atas ditentukan, Anda dapat mulai menambahkan elemen tata letak lainnya, kemudian mengoptimalkan sebanyak mungkin rentang keseluruhan antara lebar maksimum dan nol.

Dengan menempatkan 'readability first' Anda tidak memilih untuk menentukan tipe perangkat tertentu terlebih dahulu seperti desktop atau mobile. Sebaliknya, Anda mempertimbangkan semua perangkat dan resolusi browser dan merencanakan mereka secara simultan dari awal.

Menggunakan RDBL untuk menemukan lebar keterbacaan maksimum

Awalnya saya menggunakan kombinasi me-resize browser saya, plugin pembaca lebar, penghitung jumlah karakter, Firebug dan kalkulator untuk mengetahui lebar maksimum yang saya perlukan. Tapi sebelum memulai artikel ini saya memutuskan untuk membuat hidup saya dan Anda sedikit lebih mudah dengan script yang akan menangani seluruh proses tersebut untuk Anda. Anda bisa mengambil script tersebut di GitHub.

RDBL akan memberikan Anda sebuah bar slider kecil pada desain Anda, dan pembacaan dari berbagai potongan informasi yang berguna sebagai bagian dari proses tersebut. Anda cukup memberitahu bagian mana dari situs Anda adalah Anda targetkan untuk keterbacaan, i.e. area konten utama, dan akan memberitahu Anda jika elemen tersebut "Terlalu Lebar (too wide)", "Terlalu Sempit (Too Narrow)" atau "Dikisaran (In Range)".

Catatan: Script akan secara otomatis mencari tag article, section atau main, dalam urutan yang diinginkan, tapi Anda juga dapat menentukan nama class atau ID pada kolom "Target Content Element".

Anda dapat menyeret 'slider kecil' untuk mengubah ukuran situs Anda, ini sebagai simulasi mengubah ukuran browser dengan cara yang lebih mudah dikelola, dan akan secara otomatis memperbarui 'pembacaan' sekaligus. Ketika tampilan si-hijau-kecil "In Range" menyala merah Anda dapat melihat informasi yang ditampilkan untuk melihat dimana titik tersebut berada.

Anda dapat menggunakan informasi yang ditampilkan untuk menentukan lebar terbaca maksimum area konten utama Anda, dan untuk itu ada juga perkiraan kasar yang dapat ditampilkan dari rentang yang mudah dibaca.

Dalam contoh ini saya telah memulai dengan beberapa konten dummy dalam layout HTML dasar, menempatkan elemen article di dalam wrapper elemen main (Gunakan tag apa pun yang Anda inginkan):

<main>
<article>
<h3>Heading</h3>
<p>Put a few paragraphs of dummy text here.</p>
<p>I personally like Samuel L. Ipsum.</p>
</article>
</main>

Catatan: Sebagai bagian dari dokumen HTML Anda, pastikan Anda menyertakan viewport meta tag sehingga media query yang Anda tambahkan berikutnya akan merespon pada titik yang Anda harapkan pada perangkat yang memiliki kerapatan piksel yang berbeda:

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

Saya kemudian juga menerapkan beberapa CSS dasar yang meninggalkan ukuran font default saja, menetapkan properti box-sizing pada border-box, membuat fluid wrapper di sekitar konten saya, menetapkan konten teks utama saya untuk menggunakan font-family "Open Sans" Dari Google Webfonts, dan font-weight dari teks tersebut menjadi 400:

* {
    box-sizing:border-box;
  -moz-box-sizing:border-box;
}
html, body {
	padding:0;
	margin:0;
	font-family: 'Open Sans';
}
main {
	width:100%;
	max-width:40em;
	margin:3em auto;
}
h3 {
	font-weight: 700;
}
article {
	font-weight: 400;
}

Inilah yang saya perlukan untuk mengetahui lebar terbaca maksimum untuk teks menggunakan font-family dan font-weight, melalui RDBL, dengan melakukan hal berikut.

Pertama, saya memuat layout sederhana saya di Firefox dan melihat apakah 'bendera keterbacaan kecil' jadi merah atau hijau:

Pada lebar 40em, teks ini keluar sekitar 85 karakter per baris, yang sedikit terlalu tinggi. Ini adalah rata-rata yang diambil dari paragraf pertama teks dalam elemen target.

Sekarang saya punya dua pilihan. Yang pertama adalah dengan hanya menggunakan nomor atas dari "Estimated Readable Em Range" yang ditampilkan pada pembacaan sebagai nilai maksimal, yang dalam kasus ini adalah 38.117em. Namun, ini hanyalah perkiraan, sehingga saya juga bisa menggunakan slider untuk secara bertahap mengecilkan situs sampai aku melihat bendera keterbacaan berubah menjadi hijau dan mengambil lebar em yang ditampilkan pada saat itu:

Ini ternyata menjadi 38.5em, cukup dekat dengan perkiraan. Jadi saya mengubah pengaturan lebar wrapper untuk nilai ini:

main {
    width:100%;
	max-width:38.5em;
	margin:3em auto;
}

Dan pada refresh RDBL sekarang akan menunjukkan bahwa teks berada dalam jangkauan "mudah dibaca" pada lebar maksimum yang mungkin.

Menambahkan padding

Sekarang saya tahu maksimum lebar keterbacaan-nya adalah 38.5em saya ingin menambahkan beberapa padding di sekitar tepi konten ini. Saya mengubah CSS untuk elemen artikel saya sebagai berikut (dengan warna background sehingga Anda dapat melihat padding):

article {
    font-weight: 400;
	padding:1.25em 2.25em;
	background: #F5F5F5;
}

Untuk memungkinkan tambahan lebar 2.25em untuk masing-masing artikel, saya menambahkan 4.5em pada max-width wrapper utama. Anda bahkan dapat mengotomatisasi proses ini menggunakan CSS preprocessor variabel.

main {
    width:100%;
	max-width:43em;
	margin:3em auto;
}

Sekarang pada refresh padding ditambahkan, namun karena lebar interior 38.5 em telah ditetapkan, bendera pembacaan masih hijau.

Layout Multi-column

Jika saya hanya merancang tata letak kolom tunggal, saya dapat melanjutkan ke tahap berikutnya untuk menyiapkan breakpoint, karena mengetahui bahwa konten utama saya ditetapkan pada lebar keterbacaan maksimum. Tapi bagiaman dengan layout banyak kolom (multi-column)?

Prosesnya pada intinya sama seperti di atas: buat saja layout multi kolom Anda dengan lebar berbasis persentase yang fleksibel, lalu kecilkan situs Anda dengan bilah geser RDBL sampai Anda menemukan max-width yang tepat untuk diterapkan pada wrapper agar konten tetap dalam batas keterbacaan.

Untuk mengkonversi tata letak ini dari satu kolom layout ke multi-kolom dengan menambahkan sidebar, saya mulai dengan menambahkan sidebar ke dalam HTML setelah elemen artikel:

1	<aside>
2	Sidebar
3	</aside>

Saya kemudian menambahkan beberapa CSS untuk mengubah artikel dan menyisihkan elemen menjadi kolom berdasarkan persentase. Karena saya menambahkan kolom tambahan, wrapper utama juga harus lebih lebar untuk mengakomodasi hal itu. Namun saya belum memastikan berapa lebar wrapper-nya agar sesuai dengan sidebar baru dan tetap menjaga konten tetap terbaca.

Karena itu, untuk sementara, saya mengubah max-width wrapper utama menjadi 'block comment' (syntax). Ini akan memungkinkan saya untuk menggunakan bilah geser RDBL untuk memperkecil dari 100% sampai aku menemukan pengaturan baru yang harus diterapkan.

main {
    width:100%;
	/*max-width:43em;*/
	margin:3em auto;
}
h3 {
	font-weight: 700;
}
article {
	float:left;
	width:65%;
	font-weight: 400;
	padding:1.25em 2.25em;
	background: #F5F5F5;
}
aside {
	float:left;
	width:35%;
	padding:2.25em 1.25em;
	background: #CCC;
}

Saya kemudian me-refresh halaman dan, seperti sebelumnya, secara bertahap mengurangi lebar layout sampai bendera keterbacaan berubah hijau.

Ketika bendera berubah menjadi hijau, pembacaan "Current Document Width" menunjukkan nilai 66.25em, jadi saya uncomment pengaturan max-width pada main wrapper dan mengubahkan menjadi 66.25em. Sekarang saat refresh, saya memiliki dua kolom fluid layout dimana konten utama terletak dalam jangkauan mudah dibaca secara default.

Anda dapat menggunakan pendekatan yang sama untuk menambahkan kolom sebanyak yang Anda inginkan, reset max-width wrapper Anda kemudian perkecil layout Anda dengan RDBL sampai Anda menemukan nilai baru yang harus diterapkan untuk menjaga pembacaan konten utama.

Temukan 'break point' keterbacaan lalu optimisasi via media query

Awalnya, istilah "breakpoint" tidak ada hubungannya dengan sesuatu yang rusak. Namun untuk keperluan metode ini kita akan mengartikan kata tersebut secara harfiah. Dengan lebar maksimum yang dapat dibaca dalam desain, kita bisa mulai mengecilkan untuk menemukan "titik (point)" di mana keterbacaan kita "rusak (break)", yaitu ketika RDBL menampilkan bendera merahnya lagi. Kemudian kita menambahkan media query untuk menyesuaikan layout untuk masing-masing point tersebut.

Gunakan slider bar RDBL untuk mengurangi lebar layout dua kolom, titik pertama di mana bendera merah muncul lagi adalah 54.812em, kali ini menunjukkan "Too Narrow" karena karakter per baris turun di bawah 63.

Ini adalah "break point" keterbacaan pertama, jadi saya akan membuat media query untuk mencegah area konten utama mencapai titik ini. Saya ingin membuat penyesuaian sebelum titik di mana layout menjadi terlalu sempit, jadi saya menggunakan slider bar RDBL untuk menambahkan lebar agar cukup untuk kembali ke bendera hijau. Pada titik ini pembacaan menyebutkan lebar 55em. Saya menyalin isi kolom "Media Query" dan menempelkannya ke CSS saya:

1	@media (max-width: 55em) { /.../ }

Sekarang saya menentukan cara terbaik untuk menyesuaikan layout pada "titik" ini. Saya tahu dari tahap awal desain kolom tunggal, bahwa konten utama membutuhkan lebar maksimum 43em. Ini berarti bahwa 55em akan terlalu lebar untuk konten utama yang harus diisi sebagai satu kolom jadi saya tidak bisa hanya memindahkan sidebar sepenuhnya. Sebaliknya, saya bisa mengurangi ukurannya, membiarkan konten mengambil lebih banyak tempat.

Saya melakukannya dengan mengurangi persentase lebar dari elemen aside, dan menambahkan persentase lebar dari element article:

@media (max-width: 55em) {
    article {
		width:70%;
	}
	aside {
		width:30%;
	}
}

Sekarang saya menyegarkan halaman dan mulai memperkecil lagi, kali ini saya melewati titik 55em dengan konten main (utama) tetap dalam kisaran keterbacaan.

Titik berikutnya di mana keterbacaan mudah dibaca adalah pada 50.875em saat teks kembali menjadi terlalu sempit. Lagi, saya mendorong lebar menjadi cukup untuk kembali ke hijau, dan menyalin media query dari widget RDBL, kali ini di 51em. Hal ini masih terlalu lebar untuk mengubah tata letak ke satu kolom Jadi sekali lagi saya meningkatkan lebar artikel dan menurunkan sidebar:

@media (max-width: 51em) {
    article {
		width:75%;
	}
	aside {
		width:25%;
	}
}

Breakpoint keterbacaan berikutnya muncul di 47.5em, dan sidebar sekarang sangat kecil. Namun saya masih sedikit lebih tinggi dari 43em, yang awalnya ada pada pembungkus utama agar konten tetap terbaca dalam satu kolom. Jadi apa yang harus saya lakukan?

Jawabannya adalah untuk terus maju dan mengubah tata letak menjadi satu kolom pada titik ini, tapi menambahkan padding yang cukup ke elemen artikel sehingga isinya tetap dalam jangkauan yang mudah dibaca. Jadi saya membuat permintaan media lain di 47.75em, meningkatkan padding artikel ke 4em, dan mengubah tata letak menjadi satu kolom:

@media (max-width: 47.75em) { 
    article {
		float:none;
		padding:4.5em;
		width:100%;
	}
	aside {
		float:none;
		padding:4.5em;
		width:100%;
	}
}

Saat refresh layout sekarang bisa dibaca pada satu kolom setelah menjadi lebih sempit dari 47.75em.

Melanjutkan dengan mengukur ke titik berikutnya di mana pembacaan berada pada 40.187em dengan teks menjadi terlalu sesak. Tata letak sudah menjadi satu kolom, jadi sekarang satu-satunya hal tersisa untuk dilakukan untuk memungkinkan lebih banyak ruang untuk konten adalah dengan mengurangi padding. Untuk melakukan ini saya membuat media query di 40.5em dan mengatur padding kembali ke nilai sebenarnya.

1	@media (max-width: 40.5em) {
2	article {
3	padding:2.25em 1.25em;
4	}
5	aside {
6	padding:2.25em 1.25em;
7	}
8	}

Dengan ditambahkannya media query terakhir ini, layout sekarang dapat dengan aman dikecilkan dari lebar maksimum default, tetap berada dalam kisaran yang dapat dibaca dan mengisi seluruh area pandang.

Jika Anda mengulangi semua langkah di atas, Anda akan melihat pada saat ini bahwa jika Anda menurunkannya lagi, Anda akan melihat bendera merah "Too Narrow". Namun Anda telah mengoptimalkan keterbacaan semaksimal mungkin. Anda tidak dapat mengurangi padding lebih lanjut tanpa merusak keterbacaan dengan memiliki teks terlalu dekat ke tepi. Anda juga bisa menebak bahwa siapa pun yang melihat ukuran ini mungkin menggunakan perangkat kecil, sehingga membuat ukuran font yang lebih kecil hanya mengurangi keterbacaan.

Dengan demikian, meskipun teks akan menyimpang di bawah karakter minimum per jumlah baris, Anda sebenarnya sudah mengoptimalkan keterbacaan pada semua ukuran kecil tersebut yang memungkinkan untuk dilakukan.

Namun bendera "Too Narrow" di bawah titik ini tidak menjadi perhatian utama, karena perangkat yang hanya dapat dilihat pada ukuran kurang dari ini hanya 2,9% dari mobile yang beredar, dan bahkan saat itu hanya memiliki sekitar 5 - 6 karakter per Line terlalu sedikit yang masih bisa diterima

Menambahkan styling visual "paint job" Anda

Setelah Anda memiliki layout yang mendukung keterbacaan, Anda tahu apa yang harus Anda kerjakan untuk menerapkan styling visual. Sebenarnya Anda akan cenderung membuat beberapa layout standard seperti ini dan menggunakannya berkali-kali dengan styling yang berbeda.

Saat Anda menerapkan gaya visual Anda, Anda mungkin merasa perlu menyesuaikan tata letak sampai tingkat tertentu, dan jika demikian gunakan saja RDBL untuk mengutak-atik pengaturan Anda dan memastikan tetap berada dalam jangkauan keterbacaan.

Saya tidak akan memberikan banyak detail mengenai desain di sini, namun ada beberapa rekomendasi umum yang saya miliki untuk menjaga agar situs anda tetap beradaptasi:

Sebisa mungkin gunakan CSS3 dan bukan gambar, (misalnya untuk bayangan, gradien, sudut membulat, perbatasan, bersinar) karena style yang dibuat dengan cara ini sepenuhnya terukur asalkan nilai em/rem digunakan.
Gunakan ikon font (misalnya Fontello) dan bukan ikon gambar karena itu juga akan menyesuaikan dengan ukuran font browser / pengguna.
Di mana Anda menggunakan gambar sebagai background, cobalah untuk memastikan bahwa mereka dapat menyesuaikan pada ruang dimana desain Anda harus cocok.

Catatan: Jika Anda terbiasa bekerja dengan Photoshop untuk membuat elemen desain berbasis gambar, cobalah gunakan Adobe Edge Reflow untuk menghasilkan style CSS3 dengan cara yang sudah Anda kenal. Lihat artikel saya di sini tentang "5 Hal yang Berguna yang Dapat Anda Lakukan Dengan Reflow Now" untuk informasi lebih lanjut tentang pilihan itu.

Catatan Tambahan, Tip dan Kesimpulan

Teknik yang ditunjukkan di bagian implementasi artikel ini hanyalah satu contoh bagaimana Anda bisa menerapkan pendekatan "Readabiity First" untuk bekerja. Tidak ada peraturan yang cepat dan tepat tentang bagaimana Anda memutuskan untuk mengatasi "break point" keterbacaan, dan jika Anda membuat pilihan penyesuaian yang sama sekali berbeda dari yang saya lakukan, itu sah-sah saja.

Setiap desain berbeda dan Anda harus berharap untuk membuat beberapa pertimbangan selama penerapan pendekatan ini. Jika ada sesuatu yang tidak sesuai dengan yang Anda inginkan, silakan teruskan dan sesuaikan karakter yang dapat diterima per rentang garis yang digunakan RDBL, karena dengan semua varian dari satu font ke font lainnya, tidak mungkin membuat ini sebagai hal yang pasti.

Anda dapat mengubah karakter per baris kapan pun dengan mengubah nilai-nilai secara langsung di widget, atau Anda dapat menyesuaikan di berbagai pilihan Anda ketika Anda menjalankan script fungsi inisialisasi misalnya init_rdbl(63, 90);

Saat Anda menskalakan layout Anda ke atas dan ke bawah jangan khawatir jika Anda melihat singkat bendera "Too Wide" atau "Too Narrow" yang merah. Jika ada satu karakter terlalu sedikit yang menunjukkan 0.001ems lebar, itu bukan masalah besar. Selama Anda hanya melihat kilatan merah itu sejenak Anda dapat mempertimbangkan tata letak Anda agar mudah terbaca.

Saya berharap bisa membagikan beberapa ide baru untuk bagaimana Anda mendekati proses perancangan tata letak Anda, dan paling tidak alat yang berguna dalam bentuk script RDBL. Bersenang-senang-lah membuat konten pertama Anda sendiri, perangkat agnostik, desain situs "readability first"!