Saya telah membaca sejumlah sumber yang menyatakan bahwa desain ponsel yang pertama hampir esensial, yang tidak dapat saya pungkiri memang memiliki manfaat yang jelas seperti waktu muat yang lebih cepat untuk ponsel yang umumnya memiliki kecepatan unduhan yang lebih lambat melalui 3G dan 4G.

Tetapi bagaimana jika Anda membangun situs web yang lebih kecil dengan gambar yang sangat sedikit.

Saya ingin mendengar pendapat orang lain tentang hal ini dan apakah orang berpikir ada pengecualian atau tidak. Secara pribadi saya lebih suka desain / kode untuk desktop terlebih dahulu dan turunkan dari sana. Tetapi apakah benar-benar penting untuk merancang / kode untuk seluler terlebih dahulu atau apakah hasil akhirnya tidak cukup signifikan untuk mengganggu dalam situasi tertentu?

Dari sudut pandang desain murni, dimulai dengan versi seluler terlebih dahulu memang masuk akal.

Bagian tersulit dari proses desain adalah selalu memangkas, tidak pernah menambahkan. Jadi semakin kecil layar real estat yang Anda izinkan sendiri, semakin Anda harus memikirkan apa yang penting dalam desain Anda, informasi apa yang benar-benar perlu Anda tunjukkan. Selain itu, Anda akan memaksakan diri untuk memikirkan aksesibilitas juga, karena teks dan item lain akan lebih kecil.

Setelah Anda merancang versi 'ringan', Anda dapat melanjutkan untuk menambahkan hal-hal tambahan seperti elemen desain dan memperbesar hal-hal saat Anda mendapatkan real estat. Seperti yang ditunjukkan oleh @ Django, Anda tidak boleh meninggalkan fitur dari desain.

Untuk situs Anda, contohnya bisa menjadi menu. Anda memutuskan untuk meninggalkan item menu dan menggantinya dengan ikon hamburger, yang merupakan prosedur standar. Tetapi jika item menu adalah salah satu hal paling penting pada halaman, Anda tidak ingin menyembunyikannya di belakang klik.

sidenote: Merah pada biru di situs Anda benar-benar buruk untuk buta warna, harap pertimbangkan untuk mengubahnya.

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.jpgsebelum 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!

Asal usul "mobile first"

Gagasan "mobile first" dalam hal Desain Responsif berasal dari waktu ketika browser untuk perangkat seluler jauh lebih tidak mampu daripada apa yang akan Anda temukan pada perangkat desktop. Banyak dari mereka tidak mendukung permintaan media sama sekali, sehingga gagasan untuk membangun desain desktop yang mewah dan kemudian tetap menggunakan gaya dengan menggunakan pertanyaan media untuk viewport yang sempit jatuh datar di wajahnya.

Tidak adanya dukungan untuk permintaan media sebenarnya adalah permintaan media pertama.

- Bryan Rieger

Apakah ponsel pertama masih relevan?

Terlepas dari kenyataan bahwa peramban untuk perangkat seluler telah mengikuti rekan-rekan desktop mereka, "seluler pertama" masih merupakan cara paling logis untuk menulis gaya Anda.

Saya lebih suka berpikir dalam hal "menghindari membatalkan deklarasi gaya sebelumnya". Pendekatan aditif, daripada menulis gaya dan kemudian menimpanya nanti, hampir selalu mengarah ke lembar gaya yang lebih ringkas. Gaya yang sesuai untuk sebagian besar / semua perangkat harus ditemukan di luar kueri media, sementara gaya yang hanya relevan dengan viewport tertentu harus berada di belakang kueri media.

Bandingkan pendekatan "desktop pertama":

.column {
    float: left;
    width: 50%;
}

@media all and (max-width: 50em) {
    .column {
        float: none;
        width: auto;
    }
}

Untuk pendekatan "mobile first":

@media all and (min-width: 50em) {
    .column {
        float: left;
        width: 50%;
    }
}

Hasilnya sama, tetapi nanti lebih kompak. Gaya sampel tanpa malu-malu disalin dari 7 Habits dari Media Query yang Sangat Efektif dari Brad Frost .

Ada beberapa pengecualian langka di mana "desktop pertama" lebih tepat daripada sebaliknya. Yang paling penting dari ini adalah ketika Anda melakukan hal-hal seperti tabel responsif. Viewport yang lebih luas akan menginginkan gaya default untuk tabel, tetapi viewport yang sempit akan ingin mengesampingkan semua itu sehingga konten dapat ditumpuk secara vertikal.

Jangan putus stylesheet Anda

Satu hal yang benar - benar tidak boleh Anda lakukan adalah memecah gaya responsif Anda menjadi file CSS individu dan menggunakan atribut media pada elemen tautan. Ini memiliki konsekuensi yang tidak diinginkan jika UA mengunduh semua stylesheet yang ditautkan (mis. Tidak ada peningkatan kecepatan untuk melakukannya).

<!-- this is bad, don't do this -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

Jadi kode harus mobile dulu, tapi bagaimana dengan pendekatan desain?

Saya berpendapat bahwa itu tidak masalah. Tata letak untuk semua viewport yang relevan dengan desain harus dilakukan (ini mungkin melibatkan sedikitnya 2 atau sebanyak 5 setelah Anda memperhitungkan breakpoint minor yang mungkin Anda butuhkan!), Pesanan pada akhirnya tidak menjadi masalah. Banyak desainer yang tidak memiliki disiplin untuk memulai dengan tata letak desktop dan menemukan bahwa memulai dari tata letak seluler lebih mudah.

Jika Anda ingin memulai dari tata letak desktop, Anda harus menghindari godaan untuk mengisi semua ruang putih yang mulia dengan kekacauan yang tidak meningkatkan konten untuk halaman itu. Apakah Anda benar-benar membutuhkan foto stok 800x600 wanita tersenyum yang memegang telepon? Ini hanya membebani uang tambahan pengguna ponsel untuk mengunduh bulu yang tidak berguna, dan hanya gangguan visual bagi pengguna desktop untuk melewati masa lalu.

Saya menguji situs web Anda www.cosmosdesign.co.nz pada ukuran layar yang berbeda dan berfungsi baik di semua layar. Mengenai pertanyaan Anda untuk desain pertama seluler, saya ingin mengatakan bahwa pendekatan desain Anda harus mempertimbangkan audiens target Anda bersama dengan banyak faktor lain seperti gambar, konten, dll. Jika audiens target Anda akan menggunakan situs web ini sebagian besar di desktop / laptop maka Anda dapat pasti lanjutkan dengan pendekatan Anda tetapi jika itu adalah situs web yang sebagian besar akan dilihat di ponsel dan tab maka Anda perlu memikirkan strategi Anda.

Anda juga dapat mempertimbangkan mendesain situs web Anda responsif menggunakan Bootstrap (banyak pilihan lain juga tersedia) dan Anda juga dapat mengoptimalkan gambar Anda untuk situs ramah seluler yang juga akan mengurangi waktu buka.

Bagi saya alasan utama untuk melakukan seluler pertama adalah untuk menghindari situasi di mana situs seluler Anda tidak melakukan semua yang dilakukan versi desktop. Ada banyak situs web di mana saya harus meminta versi desktop di ponsel saya untuk melakukan sesuatu karena meskipun ponsel dapat melakukannya, versi seluler mereka tidak. Itu mengganggu saya.

Yang mengatakan, saya pikir desktop-pertama baik-baik saja selama Anda tidak berhemat nanti pada fitur mobile seperti kebanyakan perusahaan.

Juga, banyak kerangka kerja desain membuatnya sangat sederhana. Saya menggunakan lite desain bahan untuk membuat aplikasi desktop-pertama yang cukup kompleks, dan benar-benar hanya perlu mengubah beberapa hal ketika saya merevisinya untuk versi ramah-seluler - sebagian besar pekerjaan sudah dilakukan.