Apakah pemrograman situs web untuk seluler benar-benar diperlukan?


9

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?


2
Saya tidak yakin apa pertanyaan Anda. Apakah ini "Haruskah saya membuat situs seluler" atau "haruskah saya membuat situs seluler"? Yang pertama adalah "Ya - 50% dari hit web adalah perangkat mobile", yang terakhir adalah "Anda memutuskan, saya lebih suka Desktop, maka Anda mengatur ulang konten". Sebagai catatan, situs itu berfungsi sangat baik di perangkat seluler. Saya sarankan untuk menciutkan menu - ini menempati seluruh layar ponsel.
Metasomatisme

@Metasomatism Pertanyaannya didasarkan pada efisiensi kode dan bagaimana memuat pada perangkat yang berbeda, saya dapat mencoba tautan itu jika ini tidak mendapatkan daya tarik di sini (Tidak ingin menggandakan posting). Saya telah memodifikasi navigasi untuk seluler, jika Anda merujuk pada navigasi putih yang dilipat di atas konten, ini maksudnya. :)
ccc

1
Saya telah memulai proyek terbaru saya dengan pendekatan "mobile first", dan saya pikir saya akan melakukannya untuk setiap proyek berikutnya di mana situs mobile diinginkan. Dengan membatasi diri, saya lebih bisa fokus pada hal-hal yang paling penting, tidak memikirkan beberapa hal mewah di sekitarnya. Saya juga merasa lebih mudah untuk meningkatkan (karena saya memiliki beberapa hal untuk dimasukkan ke dalam area yang luas) dibandingkan dengan menurunkan (banyak hal untuk dimasukkan ke area yang kecil). Tapi saya rasa ini bisa berbeda dari orang ke orang.
ROAL

3
Saya pikir akan sangat membantu bagi Anda untuk membaca primer desain responsif saya
Zach Saucier

1
Mobile pertama adalah tentang fokus pada hal-hal penting, baik dalam pemrograman untuk mengirimkan aset dan desain untuk menyajikan konten. Dengan demikian, ini adalah cara yang bagus untuk memulai desain situs web yang responsif, karena Anda mendapati diri Anda dikurangi hingga minimum elemen konten dan pilihan tata letak dan dipaksa untuk memprioritaskan.
kontur

Jawaban:


24

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.


Saya juga buta warna: p ... Warna itu cocok dengan gaya yang saya inginkan. Masing-masing dari 4 halaman akan berwarna berbeda. Jika Anda pikir itu ide yang buruk, beri tahu saya. :)
ccc

Terima kasih @MarcusPorter, dan terima kasih telah menerima jawaban saya. Kadang-kadang ada baiknya bertanya kepada orang lain apa yang mereka pikirkan jika Anda ragu;) Dan tentu saja bukan ide yang buruk untuk memberi warna pada masing-masing halaman. Meskipun saya ingin tahu tentang bagaimana Anda memutuskan warna atau kombinasi warna jika Anda buta warna ...
PieBie

3
Apa? Tidak. Anda seharusnya tidak membangun dua situs. Itu konyol dan belum menjadi cara untuk pergi sejak tahun 2005. Anda membangun satu situs yang menyesuaikan diri dengan lingkungannya. Ini disebut
desain web

1
Maksud saya bukan fitur, maksud saya embel-embel, bantalan, bahkan mungkin gambar. Tentu saja tidak pernah fitur. Contoh yang baik adalah menu: Anda tidak benar-benar menambahkan menu ketika situs bertambah besar, tetapi Anda mengganti tombol dengan menu lengkap.
PieBie

2
@piebie: Sebenarnya tren situs berat konten untuk membuat infrastruktur seluler terpisah lagi. Lihat proyek AMP misalnya.
David Mulder

11

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!


2
Sebenarnya, ini hanya sebagian benar. Menurut hasil tes seluler Tim Kadlec dari 2012 tentang unduhan gambar , hanya browser seluler yang sangat lama (Android 3.0, Blackberry 6, Safari 4, dll.) Yang akan mengunduh kedua gambar. Setiap peramban seluler lainnya hanya akan mengunduh gambar yang sesuai.
cimmanon

@immanon Anda benar sekali. Terima kasih sudah mengingatkan saya akan hal itu. Saya telah bertukar untuk contoh yang gagal pengujian Kadlec sebagai gantinya.
Django Reinhardt

Menurut tautan cara yang benar adalah mengatur secara background-imageindividual ke desktop dan seluler.
hlcs

4

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.


"Tidak masalah," —tentu saja. Dan itulah seharusnya pertanyaan ini. Pengkodean / pemrograman umumnya di luar topik di sini sehingga tidak terlalu relevan (relevan, tentu saja — tetapi seharusnya tidak menjadi poin utama)
Cai

1
Bisakah Anda tahu perbedaan antara desain responsif di mana tata letak seluler dirancang sebelum tata letak desktop? Frase "mobile first" berasal dari aspek pengkodean desain responsif. Tidak masalah tata letak mana yang dirancang terlebih dahulu asalkan keduanya dilakukan.
cimmanon

Yang lain sudah membicarakannya dalam jawaban. Mendesain situs web desktop yang penuh fitur kemudian harus mengambil barang karena tidak cocok atau berfungsi di perangkat seluler tidak mudah dan Anda akan sering berakhir dengan elemen / fitur tempat yang canggung. Mendesain untuk ponsel terlebih dahulu kemudian menambahkan fitur untuk desktop itu mudah. Sesederhana itu. Tapi itu benar-benar penting. Mungkin tidak untuk orang yang mengkode situs web tetapi itu untuk perancang.
Cai

Anda tidak menjawab pertanyaan saya: dapatkah Anda menentukan yang mana yang dilakukan terlebih dahulu? Fakta bahwa banyak orang yang buruk dalam mendesain tata letak desktop dan menaruh banyak sampah di halaman mereka tidak ada hubungannya dengan tata letak mana yang harus dirancang terlebih dahulu. Keduanya harus dilakukan, jadi mana yang harus dilakukan terlebih dahulu akan lebih tergantung pada preferensi individu / kemampuan desainer.
cimmanon

Yang saya katakan adalah itu mempengaruhi proses desain. Ambil 2 skenario: 1. Anda mendesain situs yang responsif, dengan mempertimbangkan ponsel dan desktop dan semua yang ada di antara keseluruhan proses. Bagus. 2. Anda mendesain situs desktop saja, hingga persetujuan final dan klien Anda mengatakan "oh, saya perlu untuk bekerja di perangkat seluler juga ..." dan dia masih menginginkan fitur x, y dan z yang tidak dapat berfungsi pada seluler tetapi Anda tidak mempertimbangkannya saat baru merancang untuk desktop ... Skenario mana yang lebih mudah?
Cai

2

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.


Anda membuat poin bagus tentang target audiens. Melihat audiens target saya adalah bisnis kecil, dll. Saya kira demografis saya akan melihat situs saya dengan desktop. Saya sempat mencoba bootstrap sebentar lalu dan sepertinya itu bukan untuk saya, terima kasih atas sarannya.
ccc

Ya saya tahu kerangka kerja seperti Bootstrap meningkatkan kode dan upaya tetapi pasti sepadan dengan usaha, jika Anda butuh bantuan jangan ragu untuk bertanya kepada saya.
wazza

Saya merasa seperti masih belajar css, saya berjuang dengan halaman yang satu ini. Saya pasti akan mencobanya lagi di salah satu klien saya di masa depan.
ccc

Jadi, jika Anda yakin dengan audiens target Anda, Anda dapat melanjutkan pendekatan ini dengan sangat baik, tetapi saya ingin memperingatkan Anda kadang-kadang sulit (jika Anda tidak menggunakan kerangka kerja) untuk menurunkan layar lebih kecil nanti ketika Anda memiliki banyak konten dan fungsi di situs Anda. Semua yang terbaik.
wazza

Ya kau benar. Juga, PieBie membuat beberapa saran bagus tentang masalah itu jika Anda ingin membaca dengan baik.
ccc

-2

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.


Terkadang fitur sengaja ditinggalkan untuk seluler karena mereka tidak dapat menangani intensitasnya
Zach Saucier

tentu, jika itu masalah, itu masalah. Tapi itu hampir tidak pernah menjadi masalah karena ponsel modern sekarang merupakan komputer yang cukup kuat.
Matius

Ini benar-benar terjadi, di banyak situs bagi saya, bahwa saya perlu mengambil versi desktop karena versi seluler bahkan tidak mengurutkan item dalam daftar, atau menyembunyikan tab diskusi, atau pemfilteran yang mudah tidak berfungsi. Ini benar-benar lebih mirip "lakukan desktop terlebih dahulu dan kemudian - dengan cepat, cepat, timeline berakhir kemarin - port to mobile.
h22

Jika Anda memiliki situs yang sangat berat, sampai pada titik di mana ia menjadi aplikasi web, Anda mungkin lebih baik memindahkannya ke aplikasi daripada mencoba menjejalkan semuanya di situs seluler. Facebook misalnya telah membagi situs desktop menjadi dua aplikasi: Facebook dan Messenger.
PieBie

Meskipun facebook sudah cukup bagus membuat semuanya tersedia hanya di aplikasi web seluler - Anda masih bisa mengirim pesan ke sana tanpa Messenger.
Matius
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.