Kandungan
- Gambar responsif
- Persembahan
- Pemuatan bersyarat dan malas
- Tipografi responsif
- Pertanyaan media dalam JavaScript
- Peningkatan progresif
- Susun atur
- Susun atur grid CSS
- Akhirnya
Reka bentuk web responsif terdengar sangat sederhana. Pilih grid fleksibel untuk susun atur, gunakan media fleksibel (gambar, video, iframe), dan terapkan pertanyaan media untuk mengemas kini ukuran ini untuk mengatur kandungan dengan lebih baik di mana-mana kawasan pandangan. Dalam praktiknya, kami telah belajar bahawa tidak semudah itu. Masalah kecil yang timbul selama setiap projek membuat kita menggaru-garu kepala, dan kadang-kadang bahkan mengukir parit kuku di meja kita.
Sejak saya mula memilih buletin Responsif Design Weekly, saya cukup bernasib baik untuk bercakap dengan banyak ahli komuniti web dan mendengar pengalaman mereka. Saya ingin mengetahui dengan tepat apa yang sebenarnya ingin dipelajari oleh komuniti, jadi saya menyebarkan tinjauan kepada pembaca. Berikut adalah keputusan teratas:
- Gambar responsif
- Meningkatkan prestasi
- Tipografi responsif
- Pertanyaan media dalam JavaScript
- Peningkatan Progresif
- Susun atur
Dengan mempertimbangkan topik-topik tersebut, saya menjalankan beberapa siri podcast yang meminta pendapat beberapa pemimpin industri kami. Dalam maklum balas mereka, satu titik adalah sebulat suara: fokus untuk mendapatkan asas sebelum anda mula bimbang tentang teknik menarik dan maju. Dengan mengembalikan semula perkara-perkara yang asas, kami dapat membina antara muka yang mantap untuk semua orang, menggunakan ciri-ciri apabila membenarkan peranti atau konteks pengguna.
"Jadi ... bagaimana dengan teknik canggih ini?" Saya dengar anda bertanya. Saya rasa Stephen Hay menyimpulkannya dengan terbaik ketika dia berkata: 'Teknik RWD utama adalah memulakan dengan tidak menggunakan teknik RWD yang maju. Mulakan dengan kandungan berstruktur dan bangunlah. Hanya tambahkan titik putus apabila reka bentuk rosak dan kandungannya menentukannya dan ... itu saja. '
Dalam artikel ini, saya akan bermula dengan asas-asasnya dan menambahkan lapisan kerumitan apabila keadaan memungkinkan, untuk memanfaatkan teknik canggih tersebut. Mari kita mulakan.
Gambar responsif
Media cecair adalah bahagian utama RWD ketika pertama kali ditakrifkan oleh Ethan Marcotte. lebar: 100%; , lebar maksimum: 100%; masih berfungsi hari ini, tetapi landskap gambar responsif menjadi jauh lebih rumit. Dengan peningkatan jumlah saiz skrin, kepadatan piksel dan peranti untuk menyokong, kami memerlukan kawalan yang lebih besar.
Tiga kebimbangan utama ditentukan oleh Kumpulan Komuniti Responsif Imej (RICG):
- Ukuran kilobyte gambar yang kami hantar melalui wayar
- Ukuran fizikal gambar yang kami hantar ke peranti DPI tinggi
- Potongan gambar dalam bentuk arah seni untuk ukuran pandangan tertentu
Yoav Weiss, dengan bantuan dari Indiegogo, telah melakukan sebagian besar pekerjaan dalam pelaksanaan Blink - garpu WebKit Google, dan pada saat anda membaca ini, ia akan dihantar dalam Chrome dan Firefox. Safari 8 akan menghantar srcset, namun atribut ukuran hanya pada bangunan malam dan gambar> belum dilaksanakan.
Dengan kedatangan sesuatu yang baru dalam proses pengembangan web kami, sukar untuk memulakannya. Mari kita ikuti contoh langkah demi langkah.
img! - Menyatakan gambar fallback untuk semua penyemak imbas penyokong gambar -> src = "horse-350.webp"! - Menyatakan semua ukuran gambar dalam srcset. Sertakan lebar gambar menggunakan deskriptor w untuk memberitahu penyemak imbas lebar setiap gambar .--> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Ukuran memberitahu penyemak imbas mengenai susun atur laman web kami. Di sini kami katakan untuk mana-mana viewport yang berukuran 64 item dan lebih besar, gunakan gambar yang akan memenuhi 70% dari viewport -> size = "(min-width: 64em) 70vw,! - Sekiranya viewport tidak begitu besar, maka untuk mana-mana viewport yang berukuran 37.5ems dan lebih besar, gunakan gambar yang menempati 95% dari viewport -> (min min: 37.5em) 95vw,! - dan jika viewport lebih kecil dari itu, maka gunakan gambar yang menempati 100% ruang pandang -> 100vw "! - selalu mempunyai teks alt. -> alt =" Kuda "/>
Dari sudut prestasi, tidak menjadi masalah jika anda menggunakan lebar minimum atau lebar maksimum dalam atribut ukuran - tetapi urutan sumber tidak penting. Penyemak imbas akan selalu menggunakan ukuran padanan pertama.
Juga, ingatlah bahawa kita mengekodkan atribut ukuran yang sukar didefinisikan secara langsung dengan reka bentuk kita. Ini boleh menyebabkan masalah bergerak ke hadapan. Contohnya, jika anda merancang semula laman web anda, anda perlu melihat semula semua img> atau gambar> dan mentakrifkan semula ukurannya. Sekiranya anda menggunakan CMS, ini dapat diatasi sebagai sebahagian daripada proses membina anda.
WordPress sudah mempunyai plugin untuk membantu. Ini menentukan srcset pada varieti gambar standard WP dan membolehkan anda menyatakan ukuran di lokasi pusat. Apabila halaman dihasilkan dari pangkalan data, halaman tersebut akan menukar sebutan mengenai img> dan menggantinya dengan markup gambar.
Asas
- Fikirkan sama ada anda benar-benar perlu memasukkan gambar. Adakah kandungan inti gambar atau hiasan? Satu gambar yang kurang bermaksud masa muat yang lebih cepat
- Optimumkan gambar yang perlu anda sertakan menggunakan ImageOptim
- Tetapkan tajuk luput untuk gambar anda di pelayan atau fail .htaccess anda (lihat perincian di bawah ‘Prestasi’)
- PictureFill memberikan sokongan polyfill untuk gambar
Mahir
- Muatkan gambar anda dengan malas menggunakan pemalam Lazy Load jQuery
- Gunakan HTMLImageElement.Saiz dan HTMLPictureElement untuk pengesanan ciri.
- Plugin PictureFill WP yang maju, yang terdapat di Github, akan membolehkan anda menentukan nilai lebar dan ukuran gambar tersuai
Persembahan
Untuk mendapatkan prestasi yang paling cepat dirasakan di halaman kami, kami memerlukan semua HTML dan CSS yang diperlukan untuk membuat bahagian atas halaman kami dalam respons pertama dari pelayan. Nombor sihir itu ialah 14kb dan berdasarkan ukuran tetingkap kesesakan maksimum dalam waktu perjalanan pergi balik pertama (RTT).
Patrick Hamann, pendahulu teknikal frontend di Guardian, dan pasukannya telah berjaya memecahkan halangan 1000ms menggunakan campuran teknik frontend dan backend. Pendekatan Guardian adalah untuk memastikan kandungan yang diperlukan - artikel - disampaikan kepada pengguna secepat mungkin dan dalam nombor sihir 14kb.
Mari lihat prosesnya:
- Pengguna mengklik pautan Google ke berita
- Permintaan sekatan tunggal dihantar ke pangkalan data untuk artikel tersebut. Tidak ada cerita atau komen yang berkaitan yang diminta
- HTML dimuat mengandungi Critical CSS
- di kepala>
- Proses ‘memotong mustard’ dilakukan dan sebarang elemen bersyarat berdasarkan ciri peranti pengguna dimuat
- Sebarang kandungan yang berkaitan dengan atau menyokong artikel itu sendiri (gambar artikel berkaitan, komen artikel dan sebagainya) malas dimuatkan
Mengoptimumkan jalan rendering kritikal seperti ini bermaksud kepala> panjang 222 baris. Walau bagaimanapun, kandungan kritikal yang dilihat pengguna masih terdapat dalam muatan awal 14kb ketika dizip. Proses inilah yang membantu mengatasi halangan rendering 1000ms.
Pemuatan bersyarat dan malas
Pemuatan bersyarat meningkatkan pengalaman pengguna berdasarkan ciri peranti mereka. Alat seperti Modernizr membolehkan anda menguji ciri-ciri ini, tetapi ketahuilah bahawa hanya kerana penyemak imbas mengatakan bahawa ia menawarkan sokongan, itu tidak selalu bermaksud sokongan penuh.
Salah satu tekniknya adalah dengan menahan memuatkan sesuatu sehingga pengguna menunjukkan niat untuk menggunakan ciri tersebut. Ini akan dianggap bersyarat. Anda boleh menahan memuatkan ikon sosial sehingga pengguna melayang-layang atau menyentuh ikon, atau anda boleh mengelakkan memuatkan Peta Google iframe di ruang pandang yang lebih kecil di mana pengguna cenderung memilih untuk memautkan ke aplikasi pemetaan khusus. Pendekatan lain adalah untuk 'Potong mustard' - lihat kotak di atas untuk perincian mengenai perkara ini.
Pemuatan malas didefinisikan sebagai sesuatu yang selalu anda ingin muatkan di halaman - gambar yang merupakan sebahagian daripada artikel, komen atau artikel lain yang berkaitan - tetapi tidak perlu ada bagi pengguna untuk mula memakan kandungannya.
Asas
- Aktifkan gzipping untuk fail dan tetapkan tajuk luput untuk semua kandungan statik (netm.ag/expire-260)
- Gunakan pemalam jQuery Lazy Load. Ini memuatkan gambar ketika menghampiri viewport, atau setelah jangka waktu tertentu
Mahir
- Sediakan dengan pantas atau CloudFlare. Rangkaian penghantaran kandungan (CDN) menyampaikan kandungan statik anda kepada pengguna lebih cepat daripada pelayan anda sendiri, dan memiliki beberapa tingkatan percuma
- Dayakan SPDY untuk penyemak imbas berkemampuan http2 untuk memanfaatkan ciri http2 seperti permintaan http selari
- Hitungan Sosial memungkinkan untuk memuatkan ikon sosial anda secara bersyarat
- Menggunakan API Peta Statik akan membolehkan anda menukar peta Google Interaktif untuk gambar. Lihat contoh Brad Frost di netm.ag/static-260
- Pola Sertakan Ajax akan memuatkan coretan kandungan dari atribut data-sebelum, data-selepas atau penggantian data
Tipografi responsif
Tipografi adalah untuk menjadikan kandungan anda mudah dicerna. Tipografi responsif memperluas ini untuk memastikan kebolehbacaan di pelbagai jenis peranti dan kawasan pandang. Jordan Moore mengakui bahawa jenis itu adalah satu perkara yang dia tidak mahu terusik. Jatuhkan satu atau dua gambar jika anda perlukan, tetapi pastikan anda mempunyai jenis yang hebat.
Stephen Hay menyarankan untuk menetapkan ukuran fon HTML menjadi 100 peratus (baca: biarkan seperti apa adanya) kerana setiap penyemak imbas atau pengeluar peranti membuat lalai yang dapat dibaca untuk resolusi atau peranti tertentu. Bagi kebanyakan penyemak imbas desktop ini adalah 16 piksel.
Sebaliknya, Moore menggunakan unit REM dan ukuran fon HTML untuk menetapkan ukuran fon minimum untuk elemen kandungan tertentu. Contohnya, jika anda mahukan sebaris artikel selalu 14 piksel, tetapkannya sebagai ukuran fon asas pada elemen HTML dan tetapkan .byline {font-size: 1rem;}. Semasa anda memperbesar badan: ukuran huruf: agar sesuai dengan ruang pandang, anda tidak akan mempengaruhi gaya .by-line.
Panjang garis bacaan yang baik juga penting - bertujuan untuk 45 hingga 65 aksara. Terdapat bookmarklet yang boleh anda gunakan untuk memeriksa kandungan anda. Sekiranya anda menyokong pelbagai bahasa dengan reka bentuk anda, maka panjang garisnya juga mungkin berbeza. Moore menyarankan untuk menggunakan: lang (de) artikel {max-width: 30em} untuk menutup segala masalah di sana.
Untuk mengekalkan irama menegak, tetapkan margin-bottom terhadap blok kandungan, ul>, ol>, blockquote>, table>, blockquote> dan sebagainya, sehingga sama dengan ketinggian garis anda. Sekiranya irama terganggu dengan pengenalan gambar, anda boleh memperbaikinya dengan menambahkan Baseline.js atau BaselineAlign.js.
Asas
- Berasaskan fon anda pada 100 peratus isi badan
- Bekerja di unit em relatif
- Tetapkan margin anda ke ketinggian garis anda untuk mengekalkan irama menegak dalam reka bentuk anda
Mahir
- Tingkatkan prestasi pemuatan fon dengan Enhance.js atau pemuatan fon yang ditangguhkan
- Gunakan Sass @ termasuk untuk tajuk semantik.
- Selalunya kita perlu menggunakan gaya h5 dalam widget bar sisi yang memerlukan markup h2. Gunakan Beadsed's Typographic Mixins untuk mengawal ukuran dan tetap semantik dengan kod di bawah:
.sidebar h2 {@termasuk tajuk-5}
Pertanyaan media dalam JavaScript
Sejak kami dapat mengawal susun atur di pelbagai tontonan pandangan melalui pertanyaan media, kami telah mencari cara untuk mengaitkannya dengan menjalankan JavaScript kami juga. Terdapat beberapa cara untuk mengaktifkan JavaScript pada lebar, ketinggian dan orientasi ruang pandang tertentu, dan beberapa orang pintar telah menulis beberapa pemalam JS asli yang mudah digunakan seperti Enquire.js dan Simple State Manager. Anda juga boleh membuatnya sendiri dengan menggunakan matchMedia. Walau bagaimanapun, anda mempunyai masalah yang anda perlukan untuk menduplikasi pertanyaan media anda dalam CSS dan JavaScript anda.
Aaron Gustafson mempunyai helah yang rapi yang bermaksud anda tidak perlu mengurus dan memadankan pertanyaan media anda di CSS dan JS anda. Idea ini pada mulanya berasal dari Jeremy Keith dan dalam contoh ini Gustafson telah menerapkannya sepenuhnya.
Menggunakan getActiveMQ (netm.ag/media-260), masukkan div # getActiveMQ-watcher di hujung elemen badan dan sembunyikan. Kemudian dalam set CSS # getActiveMQ-watcher {font-family: break-0;} ke pertanyaan media pertama, font-family: break-1; hingga yang kedua, font-family: break-2; hingga 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-keluarga yang aktif. Sekarang anda boleh menggunakan ini untuk mengaitkan peningkatan JS seperti menambahkan antara muka tab ke dl> apabila ruang pandang membenarkan, mengubah tingkah laku kotak cahaya, atau mengemas kini susunan jadual data. Lihat kodepen getActiveMQ di netm.ag/active-260.
Asas
- Lupakan JavaScript untuk tontonan yang berbeza. Berikan fungsi kandungan dan laman web kepada pengguna dengan cara mereka dapat mengaksesnya di semua kawasan pandang. Kita tidak semestinya memerlukan JavaScript
Mahir
- Luaskan kaedah Gustafson dengan menggunakan Breakup sebagai senarai pertanyaan media yang telah ditentukan dan mengautomasikan pembuatan senarai keluarga fon untuk getActiveMQ-watcher
Peningkatan progresif
Kesalahpahaman umum mengenai peningkatan progresif ialah orang berfikir, 'Oh saya tidak dapat menggunakan ciri baru ini', tetapi sebenarnya, sebaliknya. Peningkatan progresif bermaksud bahawa anda dapat menyampaikan fitur jika hanya disokong dalam satu atau bahkan tidak ada penyemak imbas, dan lama-kelamaan orang akan mendapat pengalaman yang lebih baik ketika versi baru tiba.
Sekiranya anda melihat fungsi teras laman web mana pun, anda boleh memberikannya sebagai HTML dan meminta pelayan melakukan semua pemprosesan. Pembayaran, borang, Suka, perkongsian, e-mel, papan pemuka - semuanya boleh dilakukan. Setelah tugas asas dibina, kita dapat meletakkan teknologi yang hebat di atasnya, kerana kita mempunyai jaring pengaman untuk menangkap mereka yang mengalami masalah. Sebilangan besar pendekatan lanjutan yang telah kita bicarakan di sini didasarkan pada peningkatan progresif.
Susun atur
Susun atur yang fleksibel mudah disebut, tetapi mempunyai banyak pendekatan yang berbeza. Buat susun atur grid sederhana dengan markup yang kurang dengan menggunakan: nth-child () pemilih.
/ * nyatakan lebar pertama telefon bimbit untuk grid * / .grid-1-4 {float: left; lebar: 100%; } / * Apabila viewport sekurang-kurangnya 37.5em maka tetapkan grid ke 50% per elemen * / @media (min-lebar: 37.5em) {.grid-1-4 {lebar: 50%; } / * Kosongkan pelampung setiap elemen SELEPAS yang pertama. Ini menyasarkan ke-3, ke-5, ke-7, di grid. * / .Grid-1-4: nth-of-type (2n + 1) {clear: left; }} @media (lebar minimum: 64em) {.grid-1-4 {lebar: 25%; } / * Keluarkan jelas sebelumnya * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * Kosongkan pelampung setiap elemen ke-4 SELEPAS yang pertama. Ini menyasarkan ke-5, ke-9 ... di grid. * / .Grid-1-4: nth-of-type (4n + 1) {clear: left; }}
Selamat tinggal menggunakan kedudukan dan terapung untuk susun atur anda. Walaupun mereka telah melayani kami dengan baik hingga kini, penggunaannya untuk susun atur telah menjadi peretasan yang diperlukan. Kami kini mempunyai dua anak baru di blok yang akan membantu menyelesaikan semua masalah susun atur kami - Flexbox dan Grids.
Flexbox sangat bagus untuk modul individu, mengawal susun atur kepingan kandungan dalam setiap modul. Terdapat susun atur yang kami cuba sampaikan yang dapat dicapai dengan lebih mudah menggunakan Flexbox, dan ini lebih benar lagi dengan laman web yang responsif. Untuk lebih lanjut mengenai perkara ini, lihat panduan CSS Tricks ke Flexbox atau Flexbox Polyfill.
Susun atur grid CSS
Grid lebih untuk susun atur tahap makro. Modul susun atur Grid memberi anda kaedah yang baik untuk menggambarkan susun atur anda dalam CSS anda. Walaupun masih dalam peringkat draf pada masa ini, saya mengesyorkan artikel ini mengenai susun atur grid CSS oleh Rachel Andrew.
Akhirnya
Ini hanya beberapa petua untuk memperluas amalan responsif anda. Semasa mendekati pekerjaan responsif baru, ambil langkah mundur dan pastikan anda mendapat asasnya dengan betul. Mulakan dengan kandungan, HTML, dan tingkatkan pengalaman yang lebih baik dan tidak akan ada batasan di mana anda boleh membuat reka bentuk anda.
Artikel ini pada asalnya muncul dalam edisi 260 dari majalah bersih.
