Cara Memastikan Pengalaman Visual yang Optimal di Seluruh Perangkat

Diperbarui 22 Agustus 2022

Buka halaman dengan konversi terbaik di situs web Anda di tiga perangkat – seluler, tablet, dan desktop.

Sungguh, lakukanlah. Aku akan menunggu.

Apakah konten Anda ditampilkan sebaik yang Anda harapkan?

Banyak pemasar akan menemukan itu tidak. Pengalaman pengguna dan konsistensi pesan tidak memuaskan. Terkadang, itu benar-benar mengerikan.

Bagaimana Anda sampai di sini? Bagaimanapun, perusahaan Anda menginvestasikan banyak sumber daya untuk mempublikasikan konten. Anda bahkan memaksimalkan sumber daya konten tersebut dengan mengadopsi metode COPE – buat sekali, publikasikan di mana saja.

Dan itu mungkin kesalahannya.

Semangat, sobat content marketer. Saya di sini untuk membantu dengan sedikit penyesuaian – COPE-M.

Strategi buat sekali, publikasikan di mana saja bisa menjadi kesalahan dalam hal visual, kata @BuddyScalera melalui @CMIContent. Klik Untuk Tweet

Pahami mengapa COPE-M diperlukan

Menggunakan strategi COPE tradisional, Anda mengunggah sepotong konten satu kali (definisi, gambar, deskripsi, dll.), dan CMS menarik (bukan menempelkan) potongan itu menjadi beberapa kiriman. Saat Anda memperbarui konten asli, pembaruan mengalir melalui repositori Anda.

Sebagai strategi konten, konten COPE elegan. Ini efisien. Ini logis. Ini meningkatkan penggunaan kembali konten Anda dan mengamortisasi investasi Anda dalam konten asli. Ia bekerja dengan teks, audio, dan video.

Tapi COPE bukanlah obat mujarab untuk penerbitan konten Anda. Peramban modern mengubah teks Anda, tetapi gambar diperkecil untuk perangkat Anda. Gambar yang tampak bagus di desktop mungkin tidak dapat dikenali di perangkat seluler. (Audiens Anda tidak menyukainya dan begitu juga Google, yang dapat merusak peringkat konten Anda.)

COPE adalah titik awal yang bagus, tetapi pendekatan yang lebih berlapis untuk kontrol gambar diperlukan. Saya menyebutnya COPE-M – buat sekali, publikasikan di mana-mana kebanyakan. COPE-M dapat menjadi jembatan antara pengalaman pengguna yang baik dan pengalaman yang luar biasa.

Create Once, Publish Everywhere Mostly (COPE-M) adalah jembatan antara pengalaman pengguna yang baik dan yang hebat, kata @BuddyScalera melalui @CMIContent. Klik Untuk Tweet

Mengadopsi pendekatan COPE-M untuk strategi penerbitan konten Anda dapat meningkatkan pengalaman pengguna Anda, meningkatkan konsistensi, dan meningkatkan pengoptimalan mesin telusur (SEO) Anda dengan konten yang diperbarui.

KONTEN TERKAIT YANG DIPILIH SENDIRI: 9 Langkah Mengoptimalkan Gambar untuk SEO

Gambar belum tentu berteman baik dengan COPE

Banyak yang telah berubah sejak 2009 ketika Daniel Jacobson menguraikan konsep dan pendekatan teknis untuk strategi penggunaan kembali konten ini. COPE tetap merupakan konsep yang solid, tetapi konten saat ini didistribusikan melalui berbagai jenis perangkat. Pemirsa juga mengonsumsi konten dalam lebih banyak format.

Teks sumber tunggal yang dilihat di beberapa browser masih berfungsi, tetapi ini merupakan masalah untuk gambar. Teks dapat dipisahkan dari tampilannya. Lembar gaya berjenjang memungkinkan tampilan teks, seperti ukuran font dan lebar kolom, untuk berubah tanpa mengubah sumber aslinya.

Gambar tidak begitu mudah dibentuk. Grafik yang diberikan (misalnya, file JPEG, PNG) tidak dapat dipisahkan dari tampilannya. Satu ukuran dari satu sumber tidak selalu cocok untuk semua. Infografis yang terlihat bagus di desktop mungkin tidak dapat dibaca di iPhone. Itu membuat pemirsa mencubit, memperbesar, menyipitkan mata, dan menggerutu mencoba melihatnya.

Gambar tidak mudah dibentuk seperti teks dalam pengkodean, jadi visual satu sumber tidak selalu terlihat bagus di seluruh perangkat, kata @BuddyScalera melalui @CMIContent. Klik Untuk Tweet

Pilih gambar ke multisumber

Sampai sistem manajemen konten menjadi cukup pintar untuk secara otomatis memberikan pengalaman menonton yang ideal untuk setiap gambar di setiap perangkat, Anda harus mempertimbangkan kapan harus COPE dan kapan tidak COPE dengan gambar Anda.

Kembali ke permintaan awal saya – buka halaman konversi terbaik Anda untuk melihat tampilannya di beberapa perangkat. Lakukan itu dengan halaman dan gambar penting lainnya di situs web Anda. Anda mungkin sudah menandainya di perangkat lunak analitik Anda.

TIP: Persempit pilihan halaman Anda ke halaman yang mendapatkan lalu lintas signifikan dari perangkat seluler.

Untuk mengidentifikasi gambar mana yang menjadi multisumber, uji halaman yang dipilih pada beberapa perangkat. Ambil setumpuk perangkat dan desainer, ahli strategi konten, atau orang UX. Muat konten Anda seperti yang dilakukan pelanggan Anda. Jika gambar terlihat terjepit, tambahkan ke daftar gambar-to-be-multisource.

TIP: Jangan hanya melihat untuk melihat apakah gambarnya ditampilkan. Perhatikan baik-baik bagaimana tampilannya. Jika pengguna harus mencubit dan memperbesar untuk melihat semua gambar, COPE kemungkinan bukan metode terbaik.

Bagikan hasilnya dengan semua tim yang terkait dengan konten, termasuk strategi konten, desain, rekayasa konten, dan pengalaman pengguna, yang harus mengetahui bagaimana gambar situs web Anda dimuat.

Desain untuk beberapa layar

Dengan gambar yang dikompromikan di ujung atas dan bawah agar sesuai dengan layar perangkat seluler, akan bermanfaat untuk mengunggah banyak gambar dan memberi tahu sistem di titik henti mana untuk menggunakan masing-masing gambar.

Breakpoint adalah titik di mana sistem berhenti menarik satu gambar dan menarik versi yang lebih sesuai untuk perangkat tampilan. Titik henti sementara ditentukan oleh lebar perangkat karena pengguna dapat menggulir secara vertikal tanpa batas tetapi tidak dapat memperlebar layar.

Ilustrasi ini menunjukkan tiga kemungkinan breakpoint: 320 piksel untuk ponsel, 720 piksel untuk tablet atau ponsel besar, dan 1.024 piksel untuk laptop:

Dalam contoh ini, gambar asli dua putri saya dan anjing kami lebarnya 800 piksel. Ini terlihat bagus di desktop yang dirender dalam ukuran penuh (sisi kiri gambar). Pada layar berukuran tablet, gambar asli kehilangan detail, yang mengurangi dampaknya.

Jika gambar ini adalah bagan atau infografis, gambar tersebut mungkin tidak terbaca di layar yang lebih kecil. Itulah mengapa Anda harus berusaha ekstra untuk mencari banyak gambar. Pendekatan ini disebut “arah seni responsif.” Ini adalah trik browser yang memberi Anda sedikit lebih banyak kontrol atas cara gambar ditampilkan kepada pengguna Anda.

Inilah cara kerjanya dengan contoh aslinya. Kali ini, saya mengambil foto yang berbeda untuk setiap ukuran – lebar 800, 400, dan 200 piksel. Saat diterbitkan, wajah mereka kira-kira berukuran sama di masing-masing.

Dalam versi horizontal 800-piksel, satu anak perempuan duduk di tangga dengan anjing kami, sementara yang lain berdiri di sepanjang pagar dengan sekilas lingkungan di latar belakang. Dalam versi vertikal 400 piksel, kedua putrinya duduk di tangga dengan anjing di sebelah salah satu dari mereka dengan kedua pagar terlihat. Dalam versi vertikal 200 piksel, setiap anak perempuan dan anjing memiliki langkahnya sendiri, dan hanya satu pagar yang terlihat.

Pendekatan ini bukan COPE. Ini bukan sebagian besar bagian dari COPE-M. Saya menciptakan pekerjaan tiga kali lebih banyak untuk diri saya sendiri. Itulah mengapa Anda harus membatasi pekerjaan yang memakan waktu ini hanya untuk konten konversi yang penting.

Lihat bagaimana gambar multisumber dikodekan

Meskipun artikel ini bukan tutorial tentang cara menulis kode semacam ini, Anda mungkin perlu melihat seperti apa tampilannya:

Di antara tag “gambar”, saya menentukan tiga gambar sumber, yang diberi nama berdasarkan lebar gambar:

Sekarang, setiap gambar akan muncul saat mencapai breakpoint:

  • 499 piksel (maks) untuk ponsel cerdas
  • 799 piksel (maks) untuk tablet
  • 800 piksel (minimum) untuk desktop

Jadikan COPE-M berfungsi untuk merek Anda

Sebagian besar sistem manajemen aset digital (DAM) dapat membuat beberapa output dari satu gambar dalam berbagai ukuran dan rasio. Jika Anda tidak dapat memotret ulang foto, potonglah untuk memastikan pengalaman terbaik di semua ukuran layar. Ini bisa menjadi banyak pekerjaan, jadi jangan meminta desainer atau pengembang Anda untuk mendesain ulang setiap gambar di situs web Anda. Fokus pada dampak.

Jika SEO adalah prioritas utama, tanyakan kepada spesialis SEO Anda sebelum menerapkan pendekatan multi-gambar. Algoritme Google dapat menghukum laman web yang tidak memberikan pengalaman yang sama persis di desktop dan seluler. Meskipun Anda memberikan pengalaman yang lebih baik bagi manusia, perayap Google mungkin belum mengetahui hal ini. Tentu saja, jika lebih banyak orang menganggap halaman Anda layak untuk waktu mereka karena pengalaman gambar yang lebih baik, Google akan menyukainya.

Bagaimana dengan tim Anda? Apakah Anda terkadang membuat beberapa versi gambar penting Anda untuk mengakomodasi berbagai ukuran layar? Apa yang telah Anda pelajari dari pengujian gambar Anda di beberapa perangkat? Beri tahu saya di komentar.

KONTEN TERKAIT YANG DIPILIH SENDIRI:

Daftar untuk menghadiri Content Marketing World di Cleveland, Ohio. Gunakan kode BLOG100 untuk menghemat $100.

Gambar sampul oleh Joseph Kalinowski/Content Marketing Institute