Bawa RWD ke ekstrem – Beragampengetahuan

Ketika Ethan Marcotte menyusun RWD, teknologi jaringan jauh lebih matang daripada sekarang. Sebagai pengembang web, kami mulai memahami cara menggunakannya floatSetelah bertahun -tahun semuanya di sel meja makan. Tidak ada banyak cara yang mungkin untuk menanggapi situs web. Ada dua: Mesh cairan (berdasarkan persentase) dan Pertanyaan Mediaitu adalah hal baru pada waktu itu.

Apa yang hilang Nyata Sistem tata letak memungkinkan kita untuk melakukannya tempat benda keluar Di halaman, bukan konten mengambang improvisasi. Kami harus menunggu beberapa tahun sebelum Flexbox muncul. dan setelah kisi CSS.

Tidak ada keraguan bahwa sistem tata letak baru browser adalah inovatif 10 tahun yang lalu. Revolusi mereka cukup untuk menarik era baru. Dalam pidatonya, pada konferensi acara pada tahun 2019, Jen Simmons mengusulkan nama untuk ini: Desain web intrinsik (IWD). Mari kita lepaskan kata mewah itu terlebih dahulu. Menurut Kamus Merriam-Webster, makna batinnya adalahEsensi dasar atau konstitusi hal -hal. Dengan kata lain, IWD adalah cara alami untuk merancang web.

Ini tidak terdengar seperti inovatif. Namun, ini membuka banyak kemungkinan yang tidak lebih awal dari tata letak atau tabel berbasis titik mengambang. Kami mendapatkan yang terbaik dari dua dunia: tata letak 2D dengan kemampuan pengemasan (seperti tabel tabel dan kolom) (mis. Konten mengambang tanpa ruang yang cukup). Ada lebih banyak hal baik seperti mencampur konten ukuran tetap dengan konten berukuran cairan atau elemen yang sengaja tumpang tindih:

Sistem tata letak asli ada di sini untuk membuat browser cocok untuk Anda – jangan ragu untuk memanfaatkannya.

Mulailah dengan HTML semantik

HTML adalah tulang punggung jaringan. Ini adalah bahasa untuk membangun dan memformat konten pengguna. Muncul dengan bonus besar: itu akan memuat dan menampilkan kepada pengguna bahkan karena alasan apa pun. Dengan kata lain, bahkan jika CSS dilengkapi dengan tata letak dan javascript interaktif, situs web tersebut masih masuk akal bagi pengguna. Situs web adalah dokumen teks yang tidak berbeda dari yang dapat Anda buat dalam prosesor teks seperti kata atau pustakawan.

HTML semantik juga menyediakan fitur aksesibilitas penting seperti judul yang sering digunakan oleh pengguna pembaca layar untuk menavigasi halaman. Itulah mengapa tidak hanya memulai dengan penanda apa pun, Semantik Tag struktur yang bermakna adalah langkah kunci dalam memasukkan kemampuan web asli.

Gunakan ruang cairan jenis cairan

Ketika ukuran layar berubah, kita biasanya perlu menyesuaikan ukuran font konten. Layar yang lebih kecil berarti dapat menampilkan lebih sedikit konten, dan layar yang lebih besar memberikan lebih banyak keterjangkauan untuk konten lainnya. Itulah mengapa kita harus mengambil konten sebagai cairan tubuh Maksud saya, konten harus secara otomatis disesuaikan sesuai dengan ukuran layar. Sistem pencetakan fluida mengoptimalkan keterbacaan konten saat dilihat dalam konteks yang berbeda.

Saat ini, kita dapat mengimplementasikan jenis cairan sejati melalui garis CSS clamp() Fungsi:

font-size: clamp(1rem, calc(1rem + 2.5vw), 6rem);

Matematika yang terlibat jauh di atas kepala saya. Untungnya, di Smashing Magazine dan Utopia, ada artikel terperinci tentang jenis cairan Adrian Bece, alat yang nyaman bagi kami untuk melakukan matematika. Tapi waspadalah – ada naga! atau setidaknya kemungkinan masalah aksesibilitas. Dengan membatasi ukuran font maksimum, kita dapat mematahkan kemampuan untuk mengecilkan konten teks, melanggar salah satu persyaratan WCAG (meskipun ada beberapa solusi untuk dipecahkan).

Untungnya, ruang cairan lebih mudah dipahami: jika kesenjangan antara elemen (tepi) didefinisikan dalam unit yang bergantung pada font (mis. rem atau em), mereka akan skala berdampingan dengan ukuran font. Tapi tolong yakinkan, ada peringatan.

Selalu bertaruh pada peningkatan progresif

Ya, itulah teknologi yang telah membuat halaman web selama lebih dari 20 tahun. Ini masih sangat penting hari ini. 2025. Banyak fitur menarik memiliki ketersediaan terbatas – seperti transisi tampilan lintas halaman. Mereka tidak akan bekerja untuk setiap pengguna, tetapi membuatnya sesederhana menambahkan garis CSS:

@view-transition { navigation: auto; }

Itu tidak bekerja di beberapa browser, tetapi juga tidak merusak apa pun. Dan jika beberapa browser mengejar standar, kode sudah ada dan transisi tampilan dimulai di browser di situs web Anda. Ini seperti memilih fitur saat siap.

Berikut adalah peningkatan progresif terbaik: memungkinkan Anda memindahkan tangga ke eskalator sebanyak mungkin.

Ini berfungsi untuk lebih banyak di CSS (kisi -kisi yang tidak didukung hanyalah tata letak aliran, tata letak batu yang tidak didukung hanyalah sebuah kisi, dll.) Dan teknologi web lainnya.

Percayai browser

Percaya karena memiliki beberapa pemahaman tentang keamanan pengguna yang menelusuri jaringan. Selain itu, ini adalah program komputer yang sangat bagus dalam menghitung konten. Jadi, alih -alih menghitung semua breakpoint ini sendiri, ambil bantuan mereka dan biarkan mereka melakukannya untuk Anda. Beri mereka beberapa kendala. mewujudkannya <main> Elemen ini tidak lebih dari 60 karakter, juga bukan kram 20 karakter – kemudian bersantai dan menonton browser untuk menjadikannya 37 karakter pada beberapa viewport super langka yang belum pernah Anda temui sebelumnya. Ini Just Works ™.

Tetapi mempercayai browser juga berarti mempercayai jaringan terbuka. Bagaimanapun, algoritma ini yang bertanggung jawab untuk daftar konten adalah semua bagian dari standar.

Meninggalkan “fisika” CSS

Ini adalah titik hadiah saya. Sistem tata letak memperkenalkan konsep CSS logis. Flexbox tidak memiliki konsep kiri atau kanan – ia memiliki titik awal dan akhir. Cara berpikir ini bersembunyi ke area CSS lain, menciptakan seluruh atribut logis CSS dan modul nilai. Setelah bekerja lebih banyak dengan sistem tata letak, CSS logis tampaknya lebih intuitif daripada “fisika” lama. Ini juga memiliki setidaknya satu keunggulan dengan cara lama dalam melakukan sesuatu: Ini bekerja lebih baik dalam konten internasional.

Saya tahu ini kedengarannya gila, tetapi berubah memikirkan perubahan situs web. Jika Anda tidak mengetahui informasi paling dasar tentang konten (ukuran font), Anda tidak dapat benar -benar menerapkan nomor spesifik apa pun dalam tata letak. Anda hanya bisa berpikir perbandingan. Jika ukuran font sama dengan ✕judul Anda mungkin sama 2✕kolom utama 60✕beberapa input teks – 10✕dll. Dengan cara ini, semuanya harus bekerja dengan ukuran font apa pun dan memperpanjang dengan ukuran font apa pun.

Kami telah menggunakan sistem tata letak untuk melakukan ini – kami mengizinkan mereka bekerja di rasio dan mencari tahu seberapa besar setiap bagian tata letak seharusnya. Kami juga telah melakukan ini rem Dan em Unit yang digunakan untuk memperluas konten berdasarkan ukuran font. Satu -satunya yang tersisa adalah melupakan sepenuhnya1rem = 16px”Persamaan dan sepenuhnya merangkul pantai yang menarik dari dimensi yang tidak diketahui.

Tetapi perubahan psikologis ini akan memiliki konsekuensi yang tidak bijaksana. Jangan atur ukuran font dan bekerja dengan font yang disediakan pengguna alih-alih sepenuhnya Pindahkan daya dari pengembang web ke browser dan secara efektif memindahkan pengguna. Browser dapat memberi kami informasi lebih lanjut tentang preferensi pengguna.

Berkat CSS modern, kami bisa Tanggapan Hal -hal ini. Misalnya, jika pengguna lebih suka satu, kami dapat beralih ke mode hitam, jika pengguna meminta, kami dapat membatasi pergerakan, jika perangkat memiliki layar sentuh, area yang dapat diklik dapat dibuat lebih besar, dan sebagainya. Dengan ini Berbicara dengan browserPertukaran informasi (memberi kami data tentang pengguna dan memberikan tips tentang cara menampilkan konten kami), kami Pengguna yang berwenang hasil. Konten akan ditampilkan dengan cara tertentu mereka memikirkan. Ini membuat situs web kami lebih inklusif dan dapat diakses.

Bagaimanapun, pengguna tahu apa yang paling mereka butuhkan. Jika mereka mengatur ukuran font default ke 64 piksel, maka mereka akan sangat berterima kasih jika kita menghormati nilainya. Kami tidak tahu mengapa mereka melakukan ini (mungkin mereka memiliki semacam gangguan visual, atau mungkin mereka hanya jauh dari layar);

Ini adalah desain yang sensitif bagi saya.

Dapatkan $ 200 seminggu
Dari artikel di Smashing Magazine – untuk desainer dan pengembang web