Mengapa harus website responsif
.png)
BERITA TEKNOLOGI ONLINE : 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. INTERNET MARKETING :