Isi
- 01. Menambahkan kueri media
- 02. Anatomi kueri media
- 03. Satu hal lagi…
- 04. Memilih breakpoint
- 05. Menyesuaikan thumbnail kami
- 06. Bukan hanya lebarnya
- Pengetahuan yang dibutuhkan: CSS dan HTML menengah
- Membutuhkan: Editor teks, browser modern, perangkat lunak grafis
- Waktu Proyek: 1 jam (total 5 jam)
- File dukungan
Bagian yang relatif baru dari spesifikasi CSS, kueri media tidak diragukan lagi merupakan aspek paling menarik dari desain web responsif dan area yang siap untuk eksperimen lebih lanjut.
Setelah menerima kebutuhan untuk tata letak adaptif, beberapa telah melihat kueri media sebagai sarana untuk menyesuaikan tata letak adaptif ke situs dengan lebar tetap yang ada. Di antara mereka yang telah menggunakan tata letak responsif, banyak yang melakukannya dari perspektif desktop, menyembunyikan konten dan fitur saat area pandang menyempit.
Sepanjang tutorial ini, kami telah mengambil pendekatan alternatif, yang mengutamakan seluler. Sekarang, saat kami ingin memasukkan kueri media, kami dapat memikirkannya menambahkan fitur saat real estate layar meningkat, aman karena mengetahui bahwa markup dan desain yang mendasari situs kami memberikan garis dasar yang terhormat.
Hari ini, kami akan melampaui portofolio pola kami dan membangun halaman individual yang diperlukan untuk situs web kami. Dengan melakukan itu, kita akan melihat bagaimana kueri media dibangun, dan menerapkannya dengan cara yang benar-benar responsif.
01. Menambahkan kueri media
Dengan komponen dalam portofolio pola kami yang lengkap dan bekerja di luar batasan tata letak apa pun, saatnya untuk memindahkannya ke halaman berbeda yang membentuk situs kami.
Kami akan mulai dengan beranda kami. Dari desain berorientasi desktop, kita dapat melihat bahwa dalam viewports yang lebih luas, layout kita akan muncul sebagai berikut:
Mengambil pengukuran dari desain kami, kami dapat mendeskripsikan area dokumen dalam CSS sebagai berikut:
.dokumen {
bantalan: 0 5%;
}
.main {
lebar: 74.242424242424%; / * 784/1056 * /
float: kiri;
}
.yang saling melengkapi {
lebar: 22.727272727273%; / * 240/1056 * /
float: benar;
}
Seperti yang kita pelajari di bagian kedua dari tutorial ini, kita menggunakan rumus berikut untuk menghitung persentase lebar kolom ini:
(target / konteks) * 100 = hasil
Saat kami mengubah ukuran browser kami, kami akan melihat bahwa tata letak desktop kami berskala dari layar ukuran terkecil ke terbesar. Tentu saja, pada ukuran kecil kolomnya terlalu sempit dan panjang barisnya terlalu pendek sehingga isinya sulit untuk dibaca. Kami hanya menginginkan tata letak ini jika tersedia cukup ruang untuk berfungsi.
Di sinilah media queries masuk. Dengan asumsi bahwa layout ini hanya akan berlaku ketika browser lebih lebar dari 768px, kita dapat menambahkan CSS berikut:
.dokumen {
bantalan: 0 5%;
}
@ layar media dan (min-width: 768px) {
.main {
lebar: 74.242424242424%; / * 784/1056 * /
float: kiri;
}
.yang saling melengkapi {
lebar: 22.727272727273%; / * 240/1056 * /
float: benar;
}
}
Sekarang, jika viewport lebih sempit dari 768px, semua yang ada di dalam media query akan diabaikan. Ini akan diabaikan oleh browser apa pun yang tidak mendukung kueri media juga.
02. Anatomi kueri media
Untuk memahami apa yang terjadi di sini, mari kita lihat bagaimana kueri media dibangun. Kita dapat membaginya menjadi dua bagian:
- @ layar media: Bagian pertama dari kueri media adalah tipe media. Anda mungkin mengenali sintaks ini jika Anda pernah memasukkan gaya cetak di CSS Anda. Anda mungkin juga mengenali nama tipe dari media atribut pada tautan> elemen. Itu karena keduanya menerima kumpulan jenis media yang disetujui yang ditemukan dalam spesifikasi CSS 2.1.
- (lebar minimum: 768 piksel): Bagian kedua adalah pertanyaan. Ini termasuk fitur yang akan dipertanyakan (dalam hal ini lebar minimum viewport) dan yang sesuai nilai untuk menguji (768px).
Saat kita berbicara tentang desain web yang responsif, ada kecenderungan untuk fokus pada lebar, tetapi ada fitur lain yang juga dapat kita uji:
- (min- | max-) lebar dan (min- | max-) tinggi: Ini memungkinkan kita untuk menanyakan lebar dan tinggi viewport (yaitu jendela browser).
- (min- | maks-) lebar perangkat dan (min- | max-) tinggi perangkat: Ini memungkinkan kita untuk menanyakan lebar keseluruhan tampilan. Menurut pengalaman saya, biasanya lebih masuk akal untuk mendasarkan tata letak pada viewport daripada tampilan.
- orientasi: Anda dapat langsung memikirkan kemungkinannya di sini; Pikirkan aplikasi yang menampilkan konten berbeda berdasarkan orientasi ponsel Anda - hal yang sama dapat dilakukan di web.
- (min- | max-) rasio aspek: Ini memungkinkan kami menyesuaikan tata letak berdasarkan rasio jendela browser…
- (min- | maks-) rasio aspek perangkat: … Dan ini memungkinkan kami melakukan hal yang sama berdasarkan rasio aspek perangkat. Owen Gregory menulis artikel luar biasa tahun lalu yang mengeksplorasi bagaimana kita dapat menggunakan kueri ini untuk menghubungkan desain kita ke perangkat tempat mereka muncul.
- (min- | max-) monokrom: Kami juga dapat menguji apakah suatu perangkat memiliki tampilan monokrom atau tidak. Bayangkan betapa bergunanya hal ini jika perangkat Kindle e-ink Amazon tidak berbohong dan melaporkan layar mereka sebagai warna!
Bagian terakhir dari kueri kami mungkin yang paling berguna. Dengan menggunakan dan, kami dapat menguji beberapa fitur dalam satu kueri. Sebagai contoh:
@ layar media dan (min-width: 768px) dan (orientasi: lanskap) {
...
}
Seperti yang Anda lihat, kueri media dapat membantu kami membangun pengalaman yang cukup menarik - dan saya baru menyentuh permukaannya saja. Jika Anda mencari bacaan ringan sebelum tidur, Anda dapat melakukan lebih buruk daripada membaca spesifikasi kueri media W3C yang menjelaskan semua fitur yang dapat kami uji.
03. Satu hal lagi…
Meskipun kami telah memasukkan kueri media di CSS kami, jika kami melihat situs kami di perangkat seluler, Anda akan melihat bahwa situs kami masih ditampilkan seolah-olah tampilan lebih lebar dari 768px.
Untuk memahami mengapa ini terjadi, kita perlu mengambil pelajaran sejarah singkat.
Ketika iPhone asli diumumkan pada tahun 2007, salah satu nilai jualnya yang besar adalah kemampuan untuk menjelajahi 'web yang sebenarnya', meskipun itu berarti situs dengan lebar tetap yang berorientasi desktop yang perlu ditekan agar sesuai dengan layarnya yang kecil. IPhone dapat melakukan ini dengan melaporkan layarnya dengan lebar 980px, sebelum menurunkan halaman web agar sesuai dengan layar selebar 320px.
Namun iPhone diperkenalkan sebelum munculnya desain responsif. Sekarang penulis sedang merancang situs yang dirancang untuk seluler, fitur ini kurang berguna. Untungnya, Apple menyertakan cara untuk melewati perilaku ini, dan karena telah diadopsi oleh pabrikan lain, itu hampir menjadi de facto standar. Ini hanya melibatkan menambahkan satu meta elemen ke markup kami:
meta name = "viewport" content = "initial-scale = 1.0, width = device-width" />
Ini memberi tahu browser yang mendukung area pandang bahwa situs web tidak boleh diperkecil, dan lebar jendela browser harus diperlakukan sama dengan lebar perangkat secara keseluruhan. Setelah kami menambahkan baris ini, situs web kami akan muncul dengan tata letak yang diinginkan:
04. Memilih breakpoint
Mari kembali ke kueri media kami:
@ layar media dan (min-width: 768px) {
...
}
Nilai yang diadaptasi tata letak biasanya disebut sebagai breakpoint. Jika Anda ingat, di bagian dua saya mengatakan bahwa menggunakan piksel merupakan indikasi pemikiran yang tidak responsif, namun di sini saya telah memilih 768px, mungkin karena lebarnya perangkat yang sudah dikenal.
Daripada memilih breakpoint berdasarkan karakteristik perangkat populer, akan lebih efektif jika melihat nilai yang diturunkan dari konten kita, misalnya, panjang garis yang nyaman untuk membaca atau ukuran maksimum gambar.
Dengan tipe kami yang diukur menggunakan ems, tampaknya masuk akal untuk kueri media kami untuk menggunakan em juga. Padahal, melakukan hal itu memiliki manfaat tambahan. Saat pengguna mengubah ukuran teks di browser, halaman akan beradaptasi untuk menggunakan breakpoint yang lebih kecil. Situs web kami tidak hanya akan beradaptasi berdasarkan ukuran viewport, tetapi juga ukuran fontnya. Nyatanya, hanya ketika saya melihat Jeremy Keith mendemonstrasikan kueri media berbasis em, saya baru menyadari betapa kuatnya kueri tersebut.
Meskipun desain kami dapat memberikan beberapa indikasi kemungkinan breakpoint, seringkali cara terbaik untuk memilihnya adalah melalui eksperimen. Dengan menyesuaikan lebar jendela browser, saya telah memutuskan bahwa 800px adalah lebar yang bagus untuk ditukar ke tata letak yang lebih kompleks.
Bagaimana kita mengekspresikan 800px dalam ems? Sekali lagi, kita bisa menggunakan rumus kita, tapi apa konteksnya? Saat menghitung ems untuk kueri media, konteksnya selalu menggunakan ukuran font default browser terlepas dari apakah nilai ini telah diganti di CSS Anda. Default ini biasanya 16px, yang memberi kita:
800 / 16 = 50
Kami sekarang dapat memperbarui kueri media kami seperti:
@ layar media dan (min-width: 50em) {/ * 800px * /
...
}
05. Menyesuaikan thumbnail kami
Anda akan ingat bahwa di bagian 2 kami menata thumbnail kami agar responsif. Namun begitu gambar dalam thumbnail ini mencapai lebar penuhnya, area ruang putih muncul di sebelah kanan setiap gambar. Sekali lagi, pertanyaan media memungkinkan kami untuk memperbaikinya.
Inilah CSS asli kami:
ol.media li.media-item {
background-color: #fff;
margin: 0 4.16666666667% 4.16666666667% 0;
lebar: 47.91666666667%;
float: kiri;
}
ol.media li.media-item: n-anak (2n) {
margin kanan: 0;
}
Titik di mana ruang putih ini muncul adalah saat browser tumbuh lebih lebar dari 560 piksel.Kami akan memilih nilai ini untuk menukar menampilkan tiga thumbnail per baris. Kita dapat melakukannya dengan menambahkan CSS berikut:
@ layar media dan (min-width: 35em) {
.media-item {
lebar: 30.612244897959%; / * 240/784 * /
margin: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: n-anak (3n) {
margin kanan: 0;
}
}
Perhatikan bahwa kita tidak perlu menulis ulang semua gaya yang diperlukan untuk thumbnail di dalam media query ini, hanya bagian yang ingin kita adaptasi.
Melihat perubahan ini di browser, Anda akan melihat bahwa tidak ada margin di sebelah kanan thumbnail setiap detik. Ini karena aturan CSS berikut masih tetap aktif:
ol.media li.media-item: n-anak (2n) {
margin kanan: 0;
}
Kita perlu memodifikasi CSS di dalam media query kita untuk mengatur ulang nilai itu:
@ layar media dan (min-width: 35em) {
.media-item {
lebar: 30.612244897959%; / * 240/784 * /
margin: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: n-anak (2n) {
margin kanan: 4.081632653061%;
}
.media-item: n-anak (3n) {
margin kanan: 0;
}
}
Saat membuat kueri media, selalu waspadai masalah warisan seperti ini.
06. Bukan hanya lebarnya
Penting untuk memikirkan kueri media tidak hanya dalam hal lebar, tetapi juga variabel lain. Misalnya, video di halaman item media kami sebagian tersembunyi saat tinggi viewport menurun. Kami memiliki teknologinya:
.media-object-wrapper {
padding-bottom: 56,25%;
lebar: 100%;
tinggi: 0;
posisi: relatif;
}
@ layar media dan (tinggi-maks: 35em) dan (orientasi: lanskap) {/ * 560px * /
.media-object-wrapper {
lebar: 60%;
padding-bottom: 33,75%;
}
}
Saya bahkan menyertakan kueri orientasi untuk menyempurnakan perilaku ini lebih jauh.
Kita dapat mengikuti pendekatan serupa untuk bagian lain dari desain kita, menukar versi lebih besar dari tajuk dan memindahkan tautan navigasi ke bagian atas halaman setelah ruang tersedia.
- Lihat beranda responsif kami
- Lihat halaman item media responsif kami
Dan di sana kami memilikinya! Kami telah membangun situs web yang responsif - dan dengan satu hari luang! Yah, kurang tepat. Tata letak, gambar, dan kueri media yang fleksibel hanyalah awal dari proses desain yang responsif.
Besok: Di bagian akhir dari tutorial ini, kita akan membahas lebih dari sekadar desain web responsif, dan melihat bagaimana kita dapat membangun situs web yang benar-benar responsif.
Paul adalah seorang desainer interaksi yang berbasis di Brighton, Inggris. Dia paling bahagia saat membuat antarmuka sederhana namun menarik yang asli dari web.
