Ponsel pertama adalah praktik terbaik - ini bukan hukum, dan jika Anda memahami mengapa Anda "harus" menggunakannya, Anda dapat membuat keputusan yang tepat mengapa Anda tidak ingin menggunakannya pada proyek tertentu, dan itu tidak masalah.
Perlu dicatat bahwa "mobile first" berhubungan dengan desain / UX dan build itu sendiri. Desain pertama seluler tidak akan mempercepat situs Anda untuk pengguna, tetapi pengembangan pertama seluler akan .
Mari kita lihat keduanya.
Ponsel pertama dalam desain
Desain pertama seluler adalah tentang membantu Anda mengurangi fitur dan kegunaan dari apa yang Anda butuhkan . Pemikiran di baliknya seperti ini: Daripada mendesain desktop terlebih dahulu, dan kemudian berjuang untuk menempatkan semua fitur yang Anda buat menjadi layar lebar 320px dan mempertahankan UX yang baik, mulailah dengan ponsel ...
Jika UX menjadi berantakan atau rusak oleh semua fitur Anda di ponsel, maka itu seharusnya membuat Anda mempertanyakan apakah pengguna benar-benar membutuhkan semuanya. Bisakah Anda menyingkirkan beberapa dari mereka dan benar-benar meningkatkan pengalaman? Jika demikian, mengapa Anda memilikinya? Mungkin mereka sama sekali tidak penting, dan mungkin mereka seharusnya tidak ada di situs Anda.
Teorinya adalah ini membantu Anda mengurangi fitur yang Anda butuhkan , dan kemudian Anda dapat meningkatkannya menjadi pengalaman desktop yang indah.
Mobile pertama dalam pengembangan
Dengan pengembangan pertama seluler , ini tentang menulis versi seluler terlebih dahulu, lalu memasukkan pengecualian untuk layar yang lebih besar. Alasan ini lebih baik (dan lebih cepat) untuk pengguna seluler adalah ini: Anda memiliki dua gambar untuk situs web, yang besar untuk desktop dan yang lebih kecil untuk seluler. Jika Anda pertama-tama membuat kode desktop, CSS Anda akan terlihat seperti ini:
.test2 {
background-image:url('images/verylargeimage.png');
}
// If on a smaller screen...
@media all and (max-width: 600px) {
.test2 {
background-image:url('images/smallimage.png');
}
}
Ini berarti bahwa pengguna seluler benar-benar mengunduh large.jpg
sebelum CSS mematikannya. Ini sangat buruk.
Ponsel pertama kali terlihat seperti ini:
.test2 {
background-image:url('images/smallimage.png');
}
// If on a larger screen
@media all and (min-width: 600px) {
.test2 {
background-image:url('images/verylargeimage.png');
}
}
Pengguna seluler tidak pernah mengunduh large.jpg
.
Saya harap ini membantu membuat segalanya menjadi lebih jelas, jika Anda tidak memahaminya sebelumnya!