Inilah 10 Tips Membuat Desain Website yang Responsif

Desain web responsif

Desain web responsif kini telah menjadi sebuah standar web yang baru. Banyak perusahaan berlomba-lomba menciptakan solusi desain web khusus hanya untuk ponsel saja atau mengatasi masalah cross-platform. Pada artikel kali ini kita akan membahas beberapa tips bagaimana membuat desain web responsif yang efisien.

1. Perencanaan

Seperti biasa, perencanaan adalah prioritas nomor satu. Setelah kita memecahkan berbagai masalah tentang desain di atas kertas, kita siap untuk membangun situs tersebut.

2. Gunakan prototyping software

Salah satu software yang bisa kita gunakan adalah Adobe Edge Reflow. Software ini memungkinkan kita untuk menggunakan media query, mengatur breakpoint dalam program dan desain layout untuk menyesuaikan layar desktop, tablet, dan mobile. Kemudian kita bisa mengcopy CSS ke dalam program lain seperti Adobe Dreamweaver atau HTML editor lainnya untuk menyempurnakan desain.

3. Pertimbangkan strategi Mobile First

Ini adalah strategi di mana kita membangun mobile site first, yang kemudian mengembangkannya untuk desain tablet dan desktop. Salah satu perhatian utama kita adalah logo atau teks. Jika teks mudah dibaca pada perangkat mobile, berarti tidak ada masalah dengan desain tablet atau desktop.

4. Hati-hati penggunaan navigasi

Jika situs kita hanya memiliki 2-3 menu navigasi, kita bisa memasukkannya ke dalam menu sederhana pada layar. Jika ada elemen menu lebih, pertimbangkan untuk membuat satu icon dengan model drop down untuk tambahan menu.

5. Bangun “Look and Feel” website

Beberapa perushaan, seperti Jiffy Software, membangun seluruh interface layout terlebih dahulu, sebelum melakukan coding. Hal ini untuk memastikan “look and feel” yang diinginkan klien sebelum mereka melakukan coding. Ketika membangun sebuah layout untuk situs mobile, salah satu pertimbangan yang sangat penting adalah membuat tombol yang cukup besar untuk jari. Pertimbangan lain adalah menjaga desain agar tetap sederhana, namun fungsional. Banyak desainer cenderung menambahkan terlalu banyak interface untuk mobile, sehingga menyebabkan masalah desain dan kegunaan.

6. Persiapkan untuk menggunakan banyak program software

Bagi kebanyakan pengguna menggunakan template dengan WordPress sudah lebih dari cukup, tapi jika kita ingin membangun sebuah desain yang kompleks, mungkin kita harus menggunakan program khusus dan memiliki kode untuk setiap situs.

7. Gambar

Ketika membangun desain layout responsif, buat gambar yang dioptimalkan untuk setiap layout. Hal ini akan mengurangi masalah scaling dan badwidth. Gunakan format JPEG, GIF, dan ONG-8. Jangan menggunakan PNG karena bisa membuat ukuran file menjadi 5-10 kali lipat.

8. Gunakan ukuran gambar yang tepat

Jika kita ingin menggunakan resolusi gambar dengan ukuran 500x350px dengan 100ppi, maka atur juga dimensi gambar sesuai dengan resolusi tersebut. Hal ini akan menghilangkan scaling, juga menjaga resoulusi dan kualitas gambar. Jika gambar diubah dengan skala yang tidak sesuai akan menyebabkan masalah color depth dan resolusi.

9. Gunakan Parallax Scrolling

Parallax Scrolling adalah suatu teknik khusus di mana benda yang berada di latar belakang bergerak lebih lambat dibandingkan dengan yang berada di latar depan sehingga menimbulkan efek 3D meskipun grafik yang dibuat hanyalah sebatas 2D. Teknik ini sangat cocok diterapkan pada desain web responsif.

10. Desain sederhana dan rapi

Dalam desain web responsif, desain yang terlihat sederhana dan rapi menjadi kunci utama dalam merancang situs. Selain enak untuk dilihat, desain situs sederhana dan rapi juga bisa meningkatkan waktu loading website.

Baca juga: Tips SEO : 5 Rahasia Untuk Meningkatkan Konversi ke Web-mu

Itulah 10 poin penting yang harus diperhatikan dalam membuat desain web yang responsif.

Leave a Reply

Your email address will not be published. Required fields are marked *