Mengapa harus website responsif?
Menjadi salah satu dari 5 besar pengguna smartphone di seluruh dunia membuat semua aspek dituntut untuk bisa diakses melalui sebuah smartphone. Kemanapun orang pergi, mereka tidak akan pernah meninggalkan smartphone dengan berjuta fungsi dan kegunaannya. Salah satu yang sering dimanfaatkan oleh smartphone adalah mengakses sebuah website. Ini menuntut para pengembang website untuk menciptakan sebuah tampilan website yang responsif, artinya bukan hanya dapat diakses dengan baik di PC, namun juga melalui smartphone atau mobile.
Apa saja aspek pembentuk website yang responsif?
Website responsif terbentuk dari 3 aspek penting, yaitu Fluid Grid, Flexible Images, Media Queries. Apa saja itu? Berikut ini penjelasannya:
1. Fluid Grid
Desain tata letak suatu konten dalam website. Desain tata letak harus selalu sesuai dengan layar media yang nantinya akan digunakan.
2. Flexible image
Gambar yang digunakan juga harus selalu sesuai dengan ukuran layar. Hal ini mencegah agar gambar tidak keluar dari elemen yang menjadi tempatnya.
3. Media Queries
Ini berhubungan dengan CSS yang nantinya akan digunakan. CSS bukan hanya harus sesuai dengan jenis satu layar saja, namun diberbagai layar atau media yang digunakan.
5 Kunci Kesuksesan Website Responsif Toko Online
1. Konten
a. Header
Menjadi bagian terpenting dalam satu halaman website responsif, header tidak membutuhkan space atau bentuk yang rumit. Bahkan header harus kecil dan sederhana, ini dibuat agar bisa lebih fokus kepada inti dari header tersebut. Tetapi juga harus jelas dan informatif.
Untuk membuat sebuah header di website responsif, bisa menggunakan gradient di CSS linier. Tidak perlu menggunakan gabar latar untuk sebuah header, karena nantinya akan berpengaruh terhadap request HTTP yang digunakan.
b. Logo
Konten terpenting lainnya adalah logo. Logo bukan hanya akan memudahkan pelanggan menghafal website Anda, namun logo juga menjadi suatu identitas dari bisnis Anda. Untuk sebuah website responsif, logo usahakan dibuat dengan ukuran yang mudah diperbesar dan diperkecil sesuai layar, agar lebih jelas.
c. Navigasi
Navigasi atau menu di website responsive bisa saja terbilang rumit. Karena dengan ruang yang terbatas, kita harus menyediakan navigasi menu yang lengkap dan mudah, terlebih untuk layar mobile atau smartphone. Ada banyak cara untuk memaksimalkan space menu yang akan digunakan, seperti:
- Masukkan hanya menu penting pada design website responsive mobile Anda.
- Jika ada menu yang belum atau tidak bisa ditampilkan di header, maka footer bisa menjadi alternatifnya.
- Sebuah navigasi atau menu seperti 'Like Facebook' bisa menggunakan sebuah icon yang diletakkan di salah satu sudut halaman, namun harus tetap terlihat jelas.
d. Search Box
Search box harus selalu ada dalam sebuah halaman website. Untuk sebuah website responsive, search box bisa diletakkan di pojok halaman, dan untuk versi mobile, bisa diletakkan di bawah navigasi menu.
2. Image Galery
a. Image Navigasi
Navigasi image disini bukan dalam bentuk text, melainkan image atau gambar product yang ditampilkan secara jelas, melalui preview product yang berbeda – beda. Gambar product kecil harus diberi link ke gambar yang sama dengan ukuran yang jauh lebih besar.
b. Product Image
Dalam website responsif toko onlie, buatlah gambar product berada pada tempat yang mudah dilihat dan sangat jelas dilihat untuk para pengunjung website.
3. Deskripsi Produk
a. Product Overview
Penjelasan produk sangatlah dibutuhkan ketika kita ingin berjualan online baik melalui sosial media ataupun website. Begitupula ketika Anda memilih menggunakan website responsif, deskripsi produk harus sama dengan gambar yaitu terlihat jelas, meskipun saat dilihat dari layar yang jauh lebih kecil dari biasanya. Bila memungkinkan, Anda bisa membuat dan mengatur untuk bisa menampilkan deskripsi product tanpa harus menunggu loading terlalu lama.
b. Tombol Add to Cart
Apa lagi yang terpenting selain deskripsi produk? Ya tombol add to chart. Jangan lupakan tombol ini, sekalipun ukurannya kecil dan biasanya terletak di bawah atau disamping deskripsi produk. Namun tombol add to chart sangat penting. Buatlah design yang menarik dan juga mudah untuk dilihat oleh pelanggan yang mengakses melalui mobile.
c. Rating Stars
Beberapa orang bukan tidak mungkin akan menambahkan fitur rating starts, salah satu alasannya mungkin saja untuk menentukan produk mana yang akan lebih menarik atau disukai pelanggan sebelum akhirnya di launching. Nah, untuk menampilkan rating starts di website responsif, bukan hanya harus menarik, tetapi juga harus jelas. Karena biasanya gambar atau icon rating starts sangat kecil, sehingga harus dibuat dengan jelas.
d. Review count
Review count bisa dibilang menjadi paket dari deskripsi product. Dalam deskripsi produk memang harus dilengkapi dengan penjelasan produk, harga, ukuran, warna dan lain sebagainya.
e. Share button
Nah, untuk yang satu ini memang harus ada, yaitu share button ke sosial media. Untuk ukuran icon memang sangat kecil, naun unutk responsif website harus jelas.
4. Informasi Tambahan
a. Related product
Ada kalanya suatu toko online akan menambahkan beberapa informasi untuk lebih meningkatkan traffic website mereka. Salah satu caranya yaitu dengan menggunakan fitur related product. Disini akan tampil beberapa product yang memiliki ciri atau kriteria yang sama dengan product yang sedang dicari. Nah, saat membuat website responsif, related product juga bisa ditambahkan. Harus jelas dan juga menarik.
b. Product review
Untuk fitur tambahan lainnya, yaitu product review. Nah, di fitur ini bisa digabungkan antara gambar, deskripsi, harga, rating starts dan tombol add to chart. Fitur ini bisa ditambahkan dengan ukuran tampilan yang lebih kecil dari biasanya.
5. Footer
a. Footer navigasi
Untuk footer, website responsif tidak memerlukan desain yang terlau rumit. Yang penting adalah footer navigasi. Menu yang tidak ditampilkan di header, bisa ditampilkan di footer. Dan yang penting mudah untuk diakses dan menarik.
b. Contact person
Jangan lupakan contact person, baik berupa alamat, nomor telepon, email dan link sosial media. Karena sekalipun ukuran layar yang berbeda, namun letak dari contact person harus ada dan jelas.
c. Link back to top
Ini bukanlah fitur yang wajib ada, namun jika memang ada akan menambah nilai dari tampilan. Link bak to top biasanya digambarkan dengan sebuah icon, yang diletakkan di sebelah kanan atau kiri halaman. Jika navigasi ini di klik, maka akan mengarahkan kita pada menu yang ada diatas halaman.
Nah, begitulah yang menjadi beberapa bagian penting yang harus ada di website responsif. Adakah dari para pembaca yang memiliki pendapat lain? Share di kolom komentar ya ;-)
Baca juga:
5 Alternatif Paling Aman Untuk Menguji Update Website
sumber : Media Bisnis Online Indonesia
Baca selengkapnya di --> Anatomi Kesuksesan Website Responsif
Share Artikel ini! »»
|
|
|
Tweet |
0 comments:
Post a Comment