Mengapa Anda harus mulai mempraktikkan pengembangan yang mengutamakan seluler

Jika Anda telah mencoba mengkodekan situs web responsif, Anda mengalami masalah ini: Anda mengubah satu properti CSS sederhana yang kecil, dan itu mengubah tata letak pada ukuran layar yang berbeda.

Ini memaksa Anda untuk memeriksa dan memeriksa ulang bahwa nilai margin terbaru tidak merusak situs untuk tablet atau ponsel. Tentu saja, Anda dapat dengan mudah memperbaiki masalah ini dengan penggantian khusus untuk ukuran layar yang berbeda. Namun selama proyek, file CSS dipenuhi dengan pengecualian untuk masalah. Lalu ada pengecualian untuk pengecualian, yang kemudian memiliki pengecualian untuk pengecualian pengecualian.

Ini menjadi rumit dengan cepat, dan Anda akhirnya melawan kode Anda sendiri, menghabiskan banyak jam proyek, dan perlahan-lahan kehilangan kewarasan Anda.

Tapi jangan takut! Pengembangan pertama seluler hadir untuk menyelamatkan Anda dari sakit kepala, pengecualian pengecualian, dan pemuatan halaman yang lambat.

Apa yang terjadi dengan desktop-first dev

Awalnya pengembangan untuk versi desktop situs web responsif bertentangan dengan aliran alami dokumen CSS. File CSS dibaca secara linier dari atas ke bawah, sehingga setiap properti CSS akan ditimpa oleh gaya baru apa pun yang diterapkan lebih jauh ke bawah dokumen.

Dengan mengembangkan untuk layar besar dan kemudian menambahkan gaya seluler lebih jauh ke bawah dokumen CSS, dua masalah muncul:

1. Setiap perubahan yang dibuat pada gaya desktop (lebih tinggi dalam dokumen) akan mengubah cara situs seluler muncul jika gaya baru tidak secara eksplisit ditimpa untuk situs seluler. Membuat baris ekstra CSS sembrono menghabiskan banyak jam proyek dan bertentangan dengan prinsip kode KERING.
2. Perangkat seluler mulai memuat halaman dengan merender semua gaya desktop. Setelah versi desktop yang besar dan kuat selesai dirender, gaya seluler diterapkan. Ini memuat sumber daya tambahan, yang berarti bahwa perangkat seluler membutuhkan waktu lebih lama untuk mengirimkan halaman yang dimuat penuh.

Di sinilah pengembangan mobile-first datang untuk menyelamatkan hari. Metode ini mendorong urutan CSS yang benar (seluler ke desktop dari atas ke bawah), memastikan bahwa perangkat hanya menerapkan informasi yang dibutuhkan saat dibutuhkan.

Mari kita lihat beberapa solusi untuk masalah ini.

Seperti apa tampilan perangkat seluler

Gambar dengan mudah merupakan kontributor terbesar untuk ukuran situs web, membutuhkan waktu lama untuk diunduh jika perangkat tidak terhubung ke wifi. Menghapus gambar ekstra dari gaya seluler Anda adalah hal terbaik yang dapat Anda lakukan untuk meningkatkan kecepatan situs.

Pindah ke seluler terlebih dahulu berarti hanya menayangkan beberapa gambar kecil ke perangkat seluler. Pada contoh di bawah ini, saya telah membuat dokumen CSS yang sama yang diimplementasikan dengan metode desktop dan mobile-first.

Jika Anda menggunakan metode desktop-first, perangkat seluler akan merender dalam urutan berikut:

1. Baca gaya pertama.
2. Unduh gambar besar (segera diganti).
3. Render elemen.
4. Baca gaya ponsel.
5. Unduh gambar kecil (mengganti yang besar).
6. Render elemen lagi.

Namun, jika metode mobile-first digunakan, perangkat akan merender dalam urutan ini:

1. Baca gaya pertama.
2. Unduh gambar kecil.
3. Lewati penataan hanya desktop (karena tidak berlaku).
4. Render elemen sekali.

Situs web tidak hanya memiliki lebih sedikit langkah untuk dijalankan sebelum menyajikan halaman yang telah selesai ke browser, tetapi juga menghapus panggilan tambahan ke gambar sembrono yang tidak digunakan!

Perhatikan bahwa kueri media akan berubah dari lebar maksimum menjadi lebar minimum dengan pengembangan yang mengutamakan seluler. Kueri dengan lebar maksimum akan diterapkan ke semua perangkat yang lebih kecil dari 1000 piksel, sedangkan kueri dengan lebar minimum akan diterapkan ke perangkat yang lebih besar dari 1000 piksel.

Bertukar ke lebar minimum menciptakan penghalang yang mencegah gaya baru yang kami tulis untuk perangkat yang lebih besar agar tidak memengaruhi tampilan situs pada perangkat yang lebih kecil. Ini meningkatkan kecepatan memuat situs web responsif Anda sambil memastikan bahwa apa pun yang Anda ubah dalam kueri media khusus desktop tidak akan memengaruhi tata letak seluler Anda. Ini adalah win-win!

Berhentilah berjuang sendiri

Katakanlah kita sedang mengerjakan proyek yang file CSS-nya dikomentari menjadi tiga bagian utama: desktop, tablet, dan seluler.

Sayangnya kami telah mengikuti metode desktop-first, dan situs dimuat dengan lambat untuk ponsel. Kami telah mencoba memperkecil ukuran gambar, menambahkan cache browser, dan bahkan memperkecil HTML (kotor). Tetapi situs tersebut masih mengalami kesulitan untuk pengunjung pertama kali, dan itu perlu diperbaiki.

Karena kami membangun situs kami dengan metode desktop-first, CSS kami akan terlihat seperti ini untuk elemen .header kami:

Tujuan kami adalah untuk mengurangi jumlah gaya yang dikirim ke seluler. Untuk memulai, kita perlu melakukan inventarisasi tentang apa yang diterapkan pada sebuah elemen, dengan memperhatikan saat kita menimpa gaya kita sendiri.

Pertama, mari beralih ke pendekatan mobile-first. Kami akan menjadikan seluler gaya default kami, gaya non-media-query (catatan: Jangan lakukan ini dalam produksi, itu akan merusak situs dan membuat klien Anda marah).

Mari kita lihat citra kita lagi karena itu memiliki dampak terbesar pada kecepatan situs kita.

Karena kami tidak memuat latar belakang di perangkat seluler, kami dapat menghapus properti itu. Kami akan menambahkan citra untuk perangkat yang lebih besar nanti saat benar-benar dibutuhkan. Hal yang sama berlaku untuk properti margin-bottom, meninggalkan kita dengan hanya dua properti yang benar-benar perlu diterapkan untuk seluler!

Pindah ke bagian tablet, kita perlu memindahkan atribut latar belakang dan padding dari penataan desktop ke gaya tablet, karena tablet adalah bagian berikutnya yang akan dirender.

Ingat, tujuan kami adalah hanya menimpa properti jika berubah dan hanya menambahkan properti baru saat perubahan perlu terjadi, seperti yang ditunjukkan pada gambar di bawah ini:

Jauh lebih baik! Dengan memeriksa bagaimana perangkat seluler akan merender CSS kami yang baru dioptimalkan, dengan cepat menjadi jelas seberapa besar dampak pengembangan mobile-first pada perangkat yang lebih kecil dibandingkan dengan metode desktop-first.

Bekerja lebih cerdas, bukan lebih keras

Mengembangkan desktop-first menciptakan lebih banyak masalah daripada perbaikannya. “Bertukar ke metode pengembangan mobile-first memungkinkan Anda bekerja cerdas, bukan keras. ”

Saat mengembangkan situs responsif, perlu diingat bahwa secara default, semua yang tidak ada di dalam kueri media akan ditampilkan. Dengan membuat gaya default (non-media queried) untuk perangkat seluler, kami mengizinkan jumlah informasi sekecil mungkin untuk dikirim ke perangkat yang paling mudah terpengaruh oleh ukuran situs web.

Desktop dan tablet terhubung ke koneksi internet cepat 99,999 persen setiap saat, memungkinkan sejumlah besar informasi diteruskan dengan kecepatan tinggi. Ponsel adalah yang paling mungkin memuat informasi melalui koneksi internet yang lambat. Mempersiapkan stylesheet Anda untuk mengakomodasi perangkat yang paling sensitif memungkinkan Anda menyajikan situs web sebaik mungkin kepada pelanggan.