Isi
- Gambar responsif
- Performa
- Pemuatan bersyarat dan lambat
- Tipografi responsif
- Kueri media di JavaScript
- Peningkatan progresif
- Tata Letak
- Tata letak kisi CSS
- Akhirnya
Desain web responsif terdengar sangat sederhana. Pilih kisi fleksibel untuk tata letak, gunakan media fleksibel (gambar, video, iframe), dan terapkan kueri media untuk memperbarui pengukuran ini guna mengatur konten terbaik di area pandang mana pun. Dalam praktiknya, kami telah mempelajarinya tidak semudah itu. Masalah kecil yang muncul selama setiap proyek membuat kami terus menggaruk-garuk kepala, dan terkadang bahkan mengukir parit kuku di meja kami.
Sejak saya mulai menyusun buletin Mingguan Desain Responsif, saya cukup beruntung untuk berbicara dengan banyak anggota komunitas web dan mendengarkan pengalaman mereka. Saya ingin tahu persis apa yang sebenarnya ingin dipelajari komunitas, jadi saya menyebarkan survei kepada pembaca. Berikut hasil teratasnya:
- Gambar responsif
- Meningkatkan kinerja
- Tipografi responsif
- Kueri media di JavaScript
- Peningkatan Progresif
- Tata Letak
Dengan topik tersebut di benak, saya menjalankan serangkaian podcast menanyakan beberapa pemimpin industri kami untuk pemikiran mereka. Dalam tanggapan mereka, ada satu hal yang sepakat: fokus pada mendapatkan dasar-dasarnya tepat sebelum Anda mulai mengkhawatirkan teknik-teknik yang menarik dan canggih. Dengan mengembalikan semuanya ke dasar, kami dapat membangun antarmuka yang kuat untuk semua orang, melapisi fitur ketika perangkat atau konteks pengguna memungkinkan.
'Jadi ... bagaimana dengan teknik lanjutan ini?' Saya mendengar Anda bertanya. Saya pikir Stephen Hay menyimpulkannya dengan baik ketika dia berkata: 'Teknik RWD yang paling utama adalah memulai dengan tidak menggunakan teknik RWD tingkat lanjut. Mulailah dengan konten terstruktur dan kembangkan jalan Anda. Hanya tambahkan titik henti sementara desain rusak dan konten menentukannya dan ... hanya itu. "
Dalam artikel ini, saya akan mulai dengan dasar-dasar dan menambahkan lapisan kerumitan jika situasinya memungkinkan, untuk mengembangkan teknik lanjutan tersebut. Mari kita mulai.
Gambar responsif
Fluid media adalah bagian penting dari RWD ketika pertama kali didefinisikan oleh Ethan Marcotte. lebar: 100%; , lebar maks: 100%; masih berfungsi hari ini, tetapi lanskap gambar responsif menjadi jauh lebih rumit. Dengan bertambahnya jumlah ukuran layar, kepadatan piksel, dan perangkat yang mendukung, kami mendambakan kontrol yang lebih besar.
Tiga perhatian utama ditentukan oleh Responsive Images Community Group (RICG):
- Ukuran kilobyte gambar yang kami kirim melalui kabel
- Ukuran fisik gambar yang kami kirim ke perangkat DPI tinggi
- Gambar dipotong dalam bentuk art direction untuk ukuran viewport tertentu
Yoav Weiss, dengan bantuan dari Indiegogo, telah melakukan sebagian besar pekerjaan pada implementasi Blink - garpu Google dari WebKit, dan saat Anda membacanya, ini akan dikirimkan di Chrome dan Firefox. Safari 8 akan mengirimkan srcset, namun atribut ukuran hanya dalam nightly build dan picture> belum diterapkan.
Dengan datangnya sesuatu yang baru dalam proses pengembangan web kami, mungkin sulit untuk memulai. Mari kita jalankan contoh langkah demi langkah.
img! - Deklarasikan gambar fallback untuk semua browser yang tidak mendukung gambar -> src = "horse-350.webp"! - Deklarasikan semua ukuran gambar dalam srcset. Sertakan lebar gambar menggunakan deskriptor w untuk memberi tahu browser tentang lebar setiap gambar .--> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Ukuran menginformasikan peramban tentang tata letak situs kami. Di sini kami mengatakan untuk setiap viewport yang 64em dan lebih besar, gunakan gambar yang akan menempati 70% dari viewport -> size = "(min-width: 64em) 70vw,! - Jika viewport bukan itu besar, maka untuk setiap viewport yang berukuran 37.5em dan lebih besar, gunakan gambar yang menempati 95% viewport -> (min-width: 37.5em) 95vw,! - dan jika viewport lebih kecil dari itu, gunakan gambar yang menempati 100% viewport -> 100vw "! - selalu memiliki teks alt .--> alt =" A horse "/>
Dari sudut pandang performa, tidak masalah jika Anda menggunakan min-width atau max-width di atribut ukuran - tetapi urutan sumbernya penting. Browser akan selalu menggunakan ukuran pertama yang cocok.
Juga, ingatlah kita melakukan hard-coding atribut ukuran untuk didefinisikan secara langsung terhadap desain kita. Ini dapat menyebabkan masalah bergerak maju. Misalnya, jika Anda mendesain ulang situs, Anda harus mengunjungi kembali semua img> atau gambar> s dan menentukan ulang ukurannya. Jika Anda menggunakan CMS, ini dapat diatasi sebagai bagian dari proses build Anda.
WordPress sudah memiliki plugin untuk membantu. Ini mendefinisikan srcset pada varietas gambar standar WP dan memungkinkan Anda untuk menyatakan ukuran di lokasi pusat. Saat halaman dibuat dari database, ia menukar penyebutan apa pun di img> dan menggantinya dengan markup gambar.
Dasar
- Pikirkan apakah Anda benar-benar perlu menyertakan gambar. Apakah konten inti gambar, atau dekoratif? Satu gambar lebih sedikit berarti waktu muat lebih cepat
- Optimalkan gambar yang perlu Anda sertakan menggunakan ImageOptim
- Setel header kedaluwarsa untuk gambar Anda di server atau file .htaccess (lihat detail di bawah 'Kinerja')
- PictureFill memberikan dukungan polyfill untuk gambar
Maju
- Lambat memuat gambar Anda menggunakan plugin jQuery's Lazy Load
- Gunakan HTMLImageElement.Sizes dan HTMLPictureElement untuk deteksi fitur.
- Plugin WP PictureFill tingkat lanjut, ditemukan di Github, akan memungkinkan Anda untuk menentukan lebar dan ukuran gambar kustom nilai
Performa
Untuk mendapatkan kinerja yang dirasakan tercepat pada halaman kita, kita membutuhkan semua HTML dan CSS yang diperlukan untuk merender bagian atas halaman kita dalam respon pertama dari server. Angka ajaib itu adalah 14kb dan didasarkan pada ukuran jendela kemacetan maksimum dalam waktu perjalanan pulang pergi (RTT) pertama.
Patrick Hamann, pemimpin teknis frontend di Guardian, dan timnya telah berhasil menembus batas 1000ms menggunakan campuran teknik frontend dan backend. Pendekatan The Guardian adalah untuk memastikan konten yang diperlukan - artikel - dikirim ke pengguna secepat mungkin dan dalam angka ajaib 14kb.
Mari kita lihat prosesnya:
- Pengguna mengklik link Google ke sebuah berita
- Permintaan pemblokiran tunggal dikirim ke database untuk artikel tersebut. Tidak ada cerita atau komentar terkait yang diminta
- HTML dimuat berisi CSS Kritis
- di kepala>
- Proses 'Potong mustard' dilakukan dan elemen bersyarat apa pun yang didasarkan pada fitur perangkat pengguna dimuat
- Konten apa pun yang terkait atau mendukung artikel itu sendiri (gambar artikel terkait, komentar artikel, dan sebagainya) akan dimuat dengan lambat
Mengoptimalkan jalur rendering penting seperti ini berarti panjang head> 222 baris. Namun, konten penting yang dilihat pengguna masih memiliki muatan awal 14kb saat di-gzip. Proses inilah yang membantu memecahkan penghalang rendering 1000 md itu.
Pemuatan bersyarat dan lambat
Pemuatan bersyarat meningkatkan pengalaman pengguna berdasarkan fitur perangkat mereka. Alat seperti Modernizr memungkinkan Anda menguji fitur ini, tetapi perlu diketahui bahwa hanya karena browser mengatakan ia menawarkan dukungan, itu tidak selalu berarti dukungan penuh.
Salah satu tekniknya adalah menahan memuat sesuatu sampai pengguna menunjukkan niat untuk menggunakan fitur itu. Ini akan dianggap bersyarat. Anda dapat menahan memuat di ikon sosial sampai pengguna mengarahkan kursor ke atas atau menyentuh ikon, atau Anda dapat menghindari memuat Google Map iframe di area pandang yang lebih kecil di mana pengguna cenderung lebih suka menautkan ke aplikasi pemetaan khusus. Pendekatan lain adalah dengan 'Memotong mustard' - lihat boxout di atas untuk detailnya.
Pemuatan lambat didefinisikan sebagai sesuatu yang selalu ingin Anda muat di halaman - gambar yang merupakan bagian dari artikel, komentar, atau artikel terkait lainnya - tetapi tidak perlu ada di sana agar pengguna dapat mulai membaca konten.
Dasar
- Aktifkan gzipping untuk file dan setel header kedaluwarsa untuk semua konten statis (netm.ag/expire-260)
- Gunakan plugin jQuery Lazy Load. Ini memuat gambar saat mendekati viewport, atau setelah jangka waktu tertentu
Maju
- Siapkan Fastly atau CloudFlare. Jaringan pengiriman konten (CDN) mengirimkan konten statis Anda ke pengguna lebih cepat daripada server Anda sendiri, dan memiliki beberapa tingkatan gratis
- Aktifkan SPDY untuk browser yang mendukung http2 untuk memanfaatkan fitur http2 seperti permintaan http paralel
- Hitungan Sosial memungkinkan pemuatan bersyarat dari ikon sosial Anda
- Menggunakan Static Maps API akan memungkinkan Anda untuk mengganti peta Google Interaktif untuk gambar. Lihat contoh Brad Frost di netm.ag/static-260
- Ajax Include Pattern akan memuat cuplikan konten dari atribut data-before, data-after, atau data-replace
Tipografi responsif
Tipografi adalah tentang membuat konten Anda mudah dicerna. Tipografi responsif memperluas ini untuk memastikan keterbacaan di berbagai perangkat dan area pandang. Jordan Moore mengakui bahwa tipe adalah satu hal yang dia tidak mau mengalah. Jatuhkan satu atau dua gambar jika Anda perlu, tetapi pastikan Anda memiliki tipe yang bagus.
Stephen Hay menyarankan untuk menyetel ukuran font HTML menjadi 100 persen (baca: biarkan apa adanya) karena setiap browser atau produsen perangkat membuat default yang cukup dapat dibaca untuk resolusi atau perangkat tertentu. Untuk sebagian besar browser desktop, ukurannya 16px.
Di sisi lain, Moore menggunakan unit REM dan ukuran font HTML untuk menetapkan ukuran font minimum untuk elemen konten tertentu. Misalnya, jika Anda ingin byline artikel selalu 14px, maka setel sebagai ukuran font dasar pada elemen HTML dan setel .byline {font-size: 1rem;}. Saat Anda menskalakan body: font-size: agar sesuai dengan viewport, Anda tidak akan memengaruhi gaya .by-line.
Panjang baris bacaan yang baik juga penting - usahakan untuk 45 hingga 65 karakter. Ada bookmarklet yang dapat Anda gunakan untuk memeriksa konten Anda. Jika Anda mendukung beberapa bahasa dengan desain Anda, maka panjang baris juga dapat bervariasi. Moore menyarankan penggunaan: artikel lang (de) {max-width: 30em} untuk menutupi masalah apa pun di sana.
Untuk mempertahankan ritme vertikal, atur margin-bottom terhadap blok konten, ul>, ol>, blockquote>, table>, blockquote> dan seterusnya, agar sama dengan tinggi baris Anda. Jika ritme terganggu dengan pengenalan gambar, Anda bisa memperbaikinya dengan menambahkan Baseline.js atau BaselineAlign.js.
Dasar
- Dasarkan font Anda pada 100 persen body
- Bekerja dalam unit em relatif
- Atur margin Anda ke ketinggian garis Anda untuk mempertahankan ritme vertikal dalam desain Anda
Maju
- Tingkatkan kinerja pemuatan font dengan Enhance.js atau pemuatan font yang ditangguhkan
- Gunakan Sass @includes untuk judul semantik.
- Seringkali kita perlu menggunakan gaya h5 di widget sidebar yang membutuhkan markup h2. Gunakan Mixins Tipografi Bearded untuk mengontrol ukuran dan tetap semantik dengan kode di bawah ini:
.sidebar h2 {@include heading-5}
Kueri media di JavaScript
Sejak kami dapat mengontrol tata letak di berbagai area pandang melalui kueri media, kami telah mencari cara untuk mengaitkannya dengan menjalankan JavaScript kami juga. Ada beberapa cara untuk mengaktifkan JavaScript pada lebar viewport, ketinggian dan orientasi tertentu, dan beberapa orang pintar telah menulis beberapa plugin JS asli yang mudah digunakan seperti Enquire.js dan Simple State Manager. Anda bahkan dapat membuatnya sendiri menggunakan matchMedia. Namun, Anda memiliki masalah bahwa Anda perlu menduplikasi kueri media di CSS dan JavaScript Anda.
Aaron Gustafson memiliki trik rapi yang berarti Anda tidak perlu mengelola dan mencocokkan kueri media di CSS dan JS Anda. Ide awalnya datang dari Jeremy Keith dan dalam contoh ini Gustafson telah menerapkannya secara penuh.
Menggunakan getActiveMQ (netm.ag/media-260), masukkan div # getActiveMQ-watcher di akhir elemen body dan sembunyikan. Kemudian di dalam set CSS # getActiveMQ-watcher {font-family: break-0;} ke kueri media pertama, font-family: break-1; ke yang kedua, font-family: break-2; untuk yang ketiga dan seterusnya.
Skrip menggunakan watchResize () (netm.ag/resize-260) untuk memeriksa untuk melihat apakah ukuran viewport telah berubah, dan kemudian membaca kembali font-family yang aktif. Sekarang Anda dapat menggunakan ini untuk menghubungkan penyempurnaan JS seperti menambahkan antarmuka tab ke dl> jika viewport memungkinkan, mengubah perilaku lightbox, atau memperbarui tata letak tabel data. Lihat Codepen getActiveMQ di netm.ag/active-260.
Dasar
- Lupakan JavaScript untuk area pandang yang berbeda. Menyediakan konten dan fungsi situs web kepada pengguna dengan cara yang dapat mereka akses di semua area pandang. Kita seharusnya tidak membutuhkan JavaScript
Maju
- Perluas metode Gustafson dengan menggunakan Breakup sebagai daftar kueri media yang telah ditentukan sebelumnya dan mengotomatiskan pembuatan daftar keluarga font untuk getActiveMQ-watcher
Peningkatan progresif
Kesalahpahaman umum tentang peningkatan progresif adalah bahwa orang berpikir, 'Ya, saya tidak dapat menggunakan fitur baru ini', tetapi sebenarnya, justru sebaliknya. Peningkatan progresif berarti Anda dapat menghadirkan fitur jika hanya didukung di satu atau bahkan tidak ada browser, dan seiring waktu orang akan mendapatkan pengalaman yang lebih baik saat versi baru tiba.
Jika Anda melihat fungsi inti dari situs web mana pun, Anda dapat mengirimkannya sebagai HTML dan meminta sisi server melakukan semua pemrosesan. Pembayaran, formulir, Suka, berbagi, email, dasbor - semuanya bisa dilakukan. Setelah tugas dasar dibangun, kami kemudian dapat melapisi teknologi yang luar biasa di atasnya, karena kami memiliki jaring pengaman untuk menangkap mereka yang gagal. Sebagian besar pendekatan lanjutan yang telah kita bicarakan di sini didasarkan pada peningkatan progresif.
Tata Letak
Tata letak fleksibel mudah dikatakan, tetapi memiliki banyak pendekatan berbeda. Buat tata letak kisi sederhana dengan lebih sedikit markup menggunakan: selektor nth-child ().
/ * nyatakan lebar pertama seluler untuk kisi * / .grid-1-4 {float: left; lebar: 100%; } / * Jika viewport setidaknya 37.5em, setel petak ke 50% per elemen * / @media (min-width: 37.5em) {.grid-1-4 {width: 50%; } / * Hapus float setiap elemen kedua SETELAH yang pertama. Ini menargetkan yang ke-3, ke-5, ke-7, ke-9 ... di grid. * / .Grid-1-4: tipe-n (2n + 1) {jelas: kiri; }} @media (min-width: 64em) {.grid-1-4 {width: 25%; } / * Hapus hapus sebelumnya * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * Hapus float setiap elemen ke-4 SETELAH yang pertama. Ini menargetkan 5, 9 ... di grid. * / .Grid-1-4: n-tipe (4n + 1) {jelas: kiri; }}
Ucapkan selamat tinggal untuk menggunakan posisi dan pelampung untuk tata letak Anda. Meskipun mereka telah melayani kami dengan baik hingga saat ini, penggunaannya untuk tata letak telah menjadi peretasan yang diperlukan. Kami sekarang memiliki dua anak baru yang akan membantu memperbaiki semua masalah tata letak kami - Flexbox dan Grids.
Flexbox sangat bagus untuk modul individual, mengontrol tata letak bagian konten di dalam masing-masing modul. Ada tata letak yang kami coba sampaikan yang dapat lebih mudah dicapai menggunakan Flexbox, dan ini bahkan lebih benar dengan situs responsif. Untuk informasi lebih lanjut tentang ini, lihat panduan Trik CSS untuk Flexbox atau Flexbox Polyfill.
Tata letak kisi CSS
Kisi lebih untuk tata letak tingkat makro. Modul tata letak Grid memberi Anda cara yang bagus untuk mendeskripsikan tata letak Anda dalam CSS. Saat ini masih dalam tahap draf, saya merekomendasikan artikel ini tentang tata letak Grid CSS oleh Rachel Andrew.
Akhirnya
Ini hanyalah beberapa tip untuk memperluas latihan responsif Anda. Saat mendekati pekerjaan baru yang responsif, ambil langkah mundur dan pastikan Anda menguasai dasar-dasarnya dengan benar. Mulailah dengan konten Anda, HTML, dan tingkatkan pengalaman yang ditingkatkan di atasnya dan tidak akan ada batasan di mana Anda dapat mengambil desain.
Artikel ini pertama kali muncul di edisi 260 di majalah net.
