Seberapa penting desain web responsif?

29

Saya telah mendengar berbagai pendapat mengenai pro dan kontra menggunakan desain web responsif baru-baru ini dan bertanya-tanya apakah perlu bagi usaha kecil yang menargetkan area geografis kecil untuk menerapkan desain web responsif?

Beberapa sub-pertanyaan yang saya miliki tentang ini meliputi:

Apakah lebih baik menggunakan desain web responsif daripada menggunakan kode terpisah untuk dimensi / perangkat yang berbeda?
Apakah ini berpotensi memengaruhi SEO (positif atau negatif)?
Apa masalah utama yang bisa saya hadapi ketika mengoptimalkan situs web untuk bisnis menggunakan metode desain ini?

— user125697
sumber

Anda baru saja membuat perubahan drastis ke pertanyaan judul Anda tanpa benar-benar mengubah konten. Apakah Anda benar-benar yakin tentang itu? (Petunjuk: jawabannya sekarang "tidak.")

— Su '

@Su' Maaf tentang itu, saya baru sadar sepenuhnya akan mengubah jawaban saya akan menerima jadi saya melakukan 'rollback'

— tahan

1

Seberapa penting? Tidak penting untuk sebagian besar situs. Untuk Aplikasi atau alat lebih dari itu (1) Responsif vs Adaptif? Bervariasi dari orang ke orang dan proyek ke proyek. Singkatnya tidak ada satu metode yang lebih baik dan penggunaannya juga tergantung pada audiens situs. (2) Mempengaruhi SEO? (3) Masalah utama? Anda harus menguji lebih banyak, memperbaiki lebih banyak bug, dan kode lebih banyak, beberapa hal tidak akan berfungsi ketika memiliki lebar yang dikurangi dan beberapa hal akan melanggar TOS (adsense) jika Anda menghapus atau mengubahnya. Berikut adalah 10 fitur penting untuk aplikasi web dalam video ini yang IMHO berlaku untuk sebagian besar situs vimeo.com/10510576

— Anthony Hatzopoulos

21

Penggunaan internet seluler diprediksi secara luas akan melampaui penggunaan desktop dalam beberapa tahun dari sekarang, jadi beberapa jenis pengoptimalan seluler harus menjadi pertimbangan serius bagi bisnis apa pun.

Dalam banyak hal, ini terutama berlaku untuk bisnis kecil, yang dilokalkan: cukup dapat diprediksi, banyak pencarian seluler cenderung berfokus pada menemukan hal-hal terdekat - pikirkan menemukan toko, restauraunt, dll.

Pada Mei 2012, desain responsif adalah praktik terbaik industri yang direkomendasikan Google ketika merancang untuk ponsel cerdas. Salah satu manfaat utama adalah Anda menjalankan satu situs: itu satu situs untuk merancang, membangun, memelihara, dan mempromosikan. Itu efisien.

Dari sudut pandang SEO, hosting situs seluler terpisah, egmexample.com, berarti Anda perlu mengoptimalkan 2 situs terpisah dan membagi nilai bisnis Anda (PageRank, otoritas, dll.) Di dua lokasi. Meskipun Anda dapat menghindarinya dengan menyajikan konten pada URL yang sama melalui deteksi agen-pengguna, ini tidak berurusan dengan duplikasi upaya (ini masih 2 situs terpisah), dan juga memperkenalkan lebih banyak tantangan teknis, misalnya memastikan agen-pengguna Anda deteksi berfungsi dan selalu diperbarui, bahwa mesin pencari mengindeks konten yang tepat dalam indeks yang tepat, dll.

Secara keseluruhan, desain responsif adalah solusi yang elegan.

Untuk menjawab pertanyaan Anda yang lain:

Tersentuh di atas, tetapi juga mempertimbangkan seberapa cepat pasar ponsel berkembang. Semakin fleksibel solusi seluler Anda, semakin sedikit yang perlu Anda lakukan untuk mengikutinya.
Tergantung apa yang Anda bandingkan, tetapi seperti yang disebutkan di atas, salah satu dari 2 opsi utama lainnya memiliki tantangan SEO yang menyertainya

Ada beberapa kekhawatiran tentang masalah "cloaking", yaitu menyembunyikan konten dari mesin pencari, yang melekat pada desain responsif di sebagian besar implementasi. Namun, meskipun sepengetahuan saya, ini belum secara eksplisit dijawab oleh salah satu mesin pencari utama, bahwa Google menganggapnya sebagai "praktik terbaik" dapat dilihat sebagai indikasi bahwa Google mampu membedakan antara penyembunyian konten yang sah untuk alasan optimasi perangkat dan lainnya, persembunyian kurang sah, karena alasan manipulasi.
Saya pikir tantangan utamanya adalah menentukan konten mana yang akan ditampilkan kepada pengguna seluler. Tergantung pada situs Anda, itu mungkin tidak menjadi masalah, tetapi dalam banyak kasus itu. Pertimbangan utama di sini adalah untuk memahami apa yang pengunjung seluler coba lakukan. Misalnya, seseorang di iPhone mungkin menginginkan informasi atau transaksi yang cepat, mudah. Orang yang sama di iPad lebih mungkin tertarik dengan pengalaman menjelajah yang lebih santai.

— GDav
sumber

Pertanyaan dan jawaban ini berbunyi sangat menakjubkan empat tahun di masa depan.

— dwjohnston

12

Gagasan di belakang adalah untuk memberikan pengalaman menjelajah yang optimal kepada pengunjung Anda terlepas dari perangkat. Karena jumlah pengunjung Anda yang menggunakan perangkat seluler kemungkinan besar akan meningkat alih-alih menurun, masuk akal untuk menggunakan rute itu.

Ada sejumlah tema yang terjangkau (belum termasuk murah) di luar sana untuk Blog dan CMS, Anda dapat segera mencoba dan melihat apakah Anda menyukai apa yang Anda dapatkan (Verifikasi dengan semua perangkat pelanggan Anda atau sebagian dari pelanggan Anda).

Selama Anda harus alasan khusus selalu mencoba untuk fokus pada satu basis kode. Alasannya mungkin Anda ingin menawarkan situs web khusus seperti "aplikasi web".
SEO: tidak. Sebaik dan seburuk tata letak yang tidak responsif.
Anda harus melakukan perencanaan lebih awal. Konten apa yang harus ditampilkan pada perangkat terkecil, bagaimana seharusnya urutan konten? Hal-hal seperti itu. Atau: Apakah konten saya terlihat bagus di setiap dimensi yang didukung? Anda mungkin juga ingin mengoptimalkan ukuran gambar Anda untuk masing-masing dimensi untuk memberikan tidak hanya gambar skala browser tetapi juga ukuran yang diubah ukurannya. Jika CMS Anda tidak mendukung, itu masih banyak pekerjaan.

Jika Anda berencana untuk memasukkan iklan dari sumber eksternal, Anda juga harus memverifikasi apakah format yang diberikan berjalan dengan baik.

Edit:

Izinkan saya menambahkan bahwa jika Anda memiliki data analitik web historis yang tersedia (katakanlah Google Analytics), Anda dapat dengan mudah mencari jumlah pengguna Mobile vs Non-Mobile, mengidentifikasi perangkat yang digunakan (turun ke perangkat keras yang sebenarnya) dan melihat resolusi layar ("Apakah mereka benar-benar melihat halaman saya atau hanya sebagian saja dan harus menggulir?").

Sunting kedua:

Menurut pos ini "Situs Web Seluler vs Desain Responsif: Apa solusi yang tepat untuk bisnis Anda?" "di blog Google Analytics, situs yang dirancang dengan Desain Responsif memiliki Kelebihan ini:

Kemudahan memperbarui
Dioptimalkan untuk Mesin Pencari
Menambahkan kode konversi dan redirect

Kelebihan dari Situs Seluler yang terpisah:

Merancang untuk kebutuhan pengguna ponsel
Buat situs dengan cepat
Opsi DIY yang bagus

Artikel "Desain responsif - memanfaatkan kekuatan kueri media" di Blog Pusat Google Webmaster resmi memberikan pengantar yang bagus tentang bagaimana "Desain Responsif" sebenarnya diimplementasikan.

"Membangun Situs Web yang Dioptimalkan Seluler" di negara Google Developers:

"Google merekomendasikan webmaster mengikuti praktik terbaik industri menggunakan desain web responsif, yaitu melayani HTML yang sama untuk semua perangkat [...]"

— initall
sumber

2

Google sebenarnya akan memeringkat situs Anda lebih rendah jika perlu memuat lebih lama.

— Steffan Donal

2

@Ruirize Ya tapi ... Dia bertanya apakah Desain Responsif berdampak negatif pada SEO. Dan Desain Responsif tidak membuat halaman lebih lama dimuat. Jadi "tidak". Hanya jika Anda suka melakukan itu ;-)

— initall

@diallall - Desain responsif dapat membuat situs Anda membutuhkan waktu lebih lama untuk memuat pada perangkat seluler tergantung pada bagaimana Anda mendesain situs khusus seluler Anda. Jika itu akan memiliki ukuran halaman yang lebih kecil (lebih sedikit konten di muka, lebih sedikit perpustakaan, dll), maka mungkin situs Anda akan memakan waktu lebih lama daripada yang bisa ada di perangkat seluler. Meski begitu, mungkin lebih baik untuk mengoptimalkan satu situs untuk jaringan bandwidth rendah, tetapi itu sesuatu yang harus diperhatikan.

— Nick

1

@Tidak Tentu saja, jika Anda membandingkan situs yang dioptimalkan Seluler dengan yang lebih umum (Responsif), pemenangnya adalah ... tidak mengejutkan. Yang ini daftar beberapa Gotcha

— initall

3

Saya pikir penting untuk pertama-tama menyadari bahwa "desain responsif" (RD) adalah istilah buzz (jika saya menempatkan Lebar: 100% ke elemen saya memiliki RD di sana, untuk membesar-besarkan) dan karenanya kepentingannya tampak lebih penting daripada itu benar-benar seperti pada akhirnya itu bersyarat seperti yang lainnya.

Apakah perlu untuk mengimplementasikan RD?

Untuk menjawabnya, Anda perlu menyatakan beberapa definisi:

Siapa audiens target Anda
Audiens seperti apa yang menjadi target Anda
Apa tujuannya dengan situs web Anda
Dari mana situs web Anda akan diakses (dalam banyak kasus)
dll.

Ini sangat mirip dengan analisis pemasaran. Ini tentang memiliki media yang tepat untuk audiens yang tepat (mungkin audiens Anda duduk di depan komputer hampir sepanjang hari, atau mereka sedang bepergian dengan iPhone terbaru, dan sebagainya). Apakah mereka melakukan keduanya, maka tentu saja RD adalah pusat.

Apakah lebih baik menggunakan desain web responsif daripada menggunakan kode terpisah untuk dimensi / perangkat yang berbeda?

Tergantung pada kompleksitas UI dan bagaimana Anda akan menggunakannya. Halaman tipikal dalam banyak kasus dapat dirender dengan menggunakan set CSS yang berbeda untuk berbagai tampilan. Namun, UI yang lebih kompleks atau canggih mungkin memerlukan pendekatan yang berbeda sehingga dapat bijaksana untuk menyajikan struktur halaman dan strategi yang berbeda tergantung pada perangkat mana yang digunakan (misalnya Google maps, antarmuka multi-touch ..).

Bisakah itu mempengaruhi SEO (positif atau negatif)?

SEO lebih tentang konten daripada desain. Hanya Google yang tahu apakah desainnya berat, tetapi desain / tata letak, tetapi secara umum jika konten Anda berkualitas tinggi, ini akan lebih berat daripada desain sebenarnya.

Apa masalah utama yang bisa saya hadapi ketika mengoptimalkan situs web untuk bisnis menggunakan metode desain ini?

Mendesainnya untuk audiens yang salah. Analisis target Anda dan berikan data teknis terkini jika memungkinkan (mis. Log pengunjung yang menyediakan informasi tentang platform, dll.)

Teknologi baru selalu berisiko, ref. masalah HTML5 untuk Facebook. Ini belum sepenuhnya matang pada saat ini dan mengundang berbagai masalah yang mirip dengan masalah IE6 versus standar.

Buat sesederhana mungkin. Halaman web mewah hanya berharga dalam waktu yang sangat singkat sampai pengguna benar-benar harus menggunakan halaman Anda. Jika harus menunggu 1/2 detik untuk memudar untuk menyelesaikan setiap klik yang dibuatnya, pengguna akan hilang lebih cepat. Hal-hal seperti itu.

— epistemex
sumber

1

Jawaban tidak jelas untuk beberapa bagian jawaban Anda: Jangan gabungkan "desain responsif" dengan konsep "fleksibel" atau "cair". Menurut ukuran layar desain responsif mungkin terlihat "tetap", karena itu tergantung pada permintaan media untuk memberikan CSS berbeda berdasarkan lebar browser. Ini bukan "lebar: 100%". Saya tidak akan menyebutnya "istilah buzz" karena ini adalah konsep yang masuk akal, jawaban yang bagus untuk masalah saat ini dan bukan hanya hype. Mengenai SEO: Setidaknya Google berupaya mendeteksi tata letak tema individu versus tema lainnya; lagi: RD per se tidak buruk atau baik, tergantung pada konten Anda.

— initall

1

100% di belakang komentar 'tetap', meskipun airnya berlumpur. Situs responsif saya di tempat kerja telah diperbaiki dengan elemen internal yang lancar. Saya berpendapat bahwa itu adalah sedikit kata yang ramai pada saat ini tetapi saya membayangkan segera itu hanya akan disebut desain web / pengembangan. Saya pikir dampak SEO mungkin muncul jika perusahaan memiliki situs seluler alih-alih responsif ... tapi, saya tidak tahu tentang dampak SEO yang bijak ini.

— DBUK

2

Saya membaca jawaban lain, maafkan saya jika saya berlebihan ... Saya melakukan desain responsif setiap hari selama 8 + jam sehari pada saat ini ... Klien saya menginginkannya karena mereka ingin pengguna seluler memiliki 'unik' pengalaman, majikan saya menginginkannya karena dibanggakan oleh Google sebagai metode yang disukai dan merampingkan dengan baik. (dan jika dibanggakan oleh Google sebagai cara untuk melakukan sesuatu yang kemungkinan besar bekerja dengan baik untuk SEO)

Apakah lebih baik menggunakan desain web responsif daripada menggunakan kode terpisah untuk dimensi / perangkat yang berbeda?

Saya akan mengatakan itu lebih baik, ya. Sebagian besar kode Anda adalah kode yang sama yang menghasilkan lebih sedikit pekerjaan daripada menulis aplikasi iPhone, aplikasi droid, aplikasi iPad, aplikasi kindle .... Anda mengerti maksudnya.

Apakah ini berpotensi memengaruhi SEO (positif atau negatif)?

Dari titik desain, saya merasa netral; Namun, dari titik statistik, desain responsif saya berjalan sangat baik. Klien menyukainya, dan pelanggan senang menggunakannya.

Apa masalah utama yang bisa saya hadapi ketika mengoptimalkan situs web untuk bisnis menggunakan metode desain ini?

Ini agak sulit dilakukan pada awalnya ... Anda perlu melakukan riset terhadap pertanyaan media dan lebih disukai memiliki beberapa perangkat seluler untuk diuji. Perlu diingat, mengubah ukuran jendela di desktop Anda sudah dekat, tetapi bagaimana perangkat seluler membuat internet terkadang berbeda dari yang Anda harapkan. Sebagai contoh, saya merancang situs responsif di mana saya menggunakan pengulangan bg untuk header dan pada desktop membentang di seluruh area yang dapat dilihat; Namun, di iOS itu memotong pendek karena beberapa alasan ...

Saya merekomendasikan belajar dan mencoba desain yang responsif. lihat situs ini untuk memulai lompatan: http://html5boilerplate.com

Untuk menjawab pertanyaan dalam judul: ini penting dan akan membuat Anda sadar akan hal itu dan bagaimana mendesainnya, dan jika Anda memutuskan untuk tidak menggunakannya, Anda harus siap untuk mempertahankan sikap itu karena klien Anda mungkin ditetapkan. untuk memiliki desain ini. Dari pengalaman saya, klien dan pelanggan menyukai desain yang responsif. Pelanggan yang senang dan klien yang bahagia sudah cukup alasan bagi saya untuk mengejar itu :)

— Ryan Hollingsworth
sumber

1

Desain web responsif sangat penting - jika Anda membuat situs baru, Anda HARUS membuat situs Anda responsif. Sudah, 50% lalu lintas berasal dari perangkat seluler dan tablet dan tidak hanya ini akan tumbuh, itu akan menjadi bentuk penggunaan internet yang jelas dominan.

Untuk bisnis kecil yang menargetkan area geografis kecil, itu bahkan lebih penting - SEO akan sangat sulit untuk bisnis kecil baru, tetapi jika produk Anda bagus, Anda dapat memaksimalkan berapa banyak orang membagikan apa yang Anda lakukan.

Ketika membaca media sosial, kebanyakan orang menggunakan perangkat seluler sekarang - umumnya di tempat tidur di pagi hari dan di tempat tidur di malam hari.

Jika situs Anda tidak dapat digunakan pada perangkat seluler, maka setiap saham yang mengenai audiens yang relevan akan sia-sia. Anda tidak menginginkan ini. Sangat penting untuk menghindari hal itu terjadi.

Mengenai kode responsif atau terpisah: Kelemahan utama desain responsif adalah tidak secepat basis kode terpisah. Kehilangan kecepatan ini akan diabaikan, tentu saja dalam kasus bisnis lokal kecil ketika faktor-faktor lain dapat muncul di pikiran pengguna mengapa situs lebih lambat 0,2 detik dari yang lain.

Keuntungan besar dari desain responsif adalah Anda mempertahankan basis kode yang sama. Ini mengurangi biaya perawatan, biaya pengujian dan biaya pengembangan.

Hal besar dalam SEO hari ini adalah 'Kualitas Situs' - kualitas situs sulit diukur, tetapi secara umum google menggunakan Tingkat Pentalan dan Waktu di Situs untuk mengukur ini. Jika situs Anda mengisap ponsel, 50% dari lalu lintas Anda akan memiliki rasio pentalan yang tinggi dan jumlah pengunjung yang tinggi dengan keterlibatan rendah (kurang dari 10 detik di halaman).

Ini menempatkan Anda pada risiko Penalti Google - lihat Google Panda dan penalti Domain Pencocokan Tepat (minggu lalu) yang baru , yang keduanya menghukum situs karena memiliki 'kualitas rendah'.

Masalah utama yang dapat Anda hadapi ketika mengoptimalkan situs web untuk bisnis menggunakan metode ini adalah bahwa itu adalah kata kunci baru, semua orang membutuhkannya, jadi ada koboi di luar sana yang mengenakan harga sangat tinggi untuk sesuatu yang sangat mudah dilakukan.

Sebagai contoh, saya baru-baru ini membuat situs web yang memiliki toko, forum, bagian tanya jawab serta berbagai halaman lain, blog, dll. Sepenuhnya responsif untuk semua perangkat dalam waktu sekitar satu hari.

Inilah dasar-dasar apa yang perlu Anda lakukan:

Sesuaikan bantalan tubuh dan margin
Pindahkan menu sisi Kiri atau Kanan ke dalam drop down, mungkin menyembunyikannya di bawah tombol opsi di bagian atas.
Ubah ukuran wadah, gunakan lebar 100% di mana Anda bisa
Ubah semua gambar Anda menjadi lebar 100%
Tentukan hal-hal apa yang tidak diperlukan pada ponsel (iklan?) Dan hapuslah (tampilan: tidak ada)

Berikut beberapa contoh kode:

@media screen and (max-width:480px) {
body {
margin:5px;
padding:0px;
}
.advertbox {
display:none;
}
}

Apa yang dilakukan adalah menghapus apa pun dengan kelas 'kotak iklan' dari smartphone (dengan lebar maksimal 480px) dan mengurangi margin tubuh.

Jika Anda membuat situs baru, ini lebih mudah dibangun karena Anda dapat memastikan Anda membangun desain yang bersih dengan kelas bersih yang bagus dan gaya yang baik untuk semua perangkat.

Saya harap ini membantu!

— Dave Hilditch
sumber

1

Saya hanya ingin berpadu dengan perspektif yang berbeda:

Tidak, ini tidak wajib atau bahkan direkomendasikan. Itu tergantung pada siapa audiens target Anda. Lihat analitik Anda dan lihat persentase apa yang berasal dari Seluler dan yang berasal dari Seluler apakah ada penurunan signifikan dibandingkan dengan pengguna Desktop Anda?

Untuk memberikan contoh tempat saya bekerja situs kami tidak responsif. 90% lalu lintas kami berasal dari pengguna Desktop dan Tingkat Pentalan dan Tingkat Penyelesaian Acara hampir identik di seluruh Desktop, Ponsel, dan Tablet.

Sampai ada justifikasi biaya untuk mengubahnya, tidak ada insentif finansial bagi kami untuk melakukannya. Mengatakan pernyataan luas seperti 50% pengguna di ponsel atau sesuatu hanya berlaku jika semua pengguna adalah audiens target Anda. Kalau tidak, logika yang sepenuhnya tidak relevan dan buruk untuk diikuti.

Anda hanya perlu melihat% pengguna di ponsel yang Anda targetkan. Khusus untuk aplikasi B2B kebanyakan orang tidak akan melihat ponsel mereka di waktu luang mereka. Anda akan mendapatkan lalu lintas Senin hingga Jumat di komputer Desktop.

— Ryan
sumber