Selamat Datang

6 Tips Untuk Membuat Website Responsive

Ingin desain website responsive Anda bisa dibanggakan? Ini jelas bukan pekerjaan yang mudah. Meskipun proyek Anda terlihat cukup baik dari sudut pandang desain, masih banyak hal yang bisa menghancurkannya seiring dengan waktu.

Berikut ini kami memiliki beberapa tips untuk membuat web responsive anda menjadi lebih maksimal dan agar menghamat waktu anda dalam proses pembuatan sehingga anda mencapai tujuan anda dengan website responsif yang kerennya maksimal :D

Tips Web Responsive

1. Fokus Pada Konten

Mobile-first, desktop-first atau pendekatan apapun yang anda gunakan atau sejenisnya, hal yang paling penting untuk diingat adalah konten. Konten harus selalu mendorong struktur dan organisasi website. Jadi, hal pertama yang harus dilakukan adalah untuk menjadi lebih familiar dengan konten website. Hal ini harus dilakukan sebelum anda menulis kode program, sebelum membuat setiap wireframe atau mockup(maket). Semakin cepat anda melakukan langkah ini, semakin baik.

Baca juga:

2. Bandwidth

Satu hal yang perlu dipertimbangkan ketiwa membuat website responsive adalah bandwidth. Semua ini berarti bahwa anda harus mempertimbangkan secara menyeluruh apa yang harus anda sediakan untuk mengoptimalkan segala sesuatu yang anda bisa. Tentunya ini berkaitan dengan optimasi, penggunaan ukuran file gambar yang lebih kecil, mengoptimalkan file CSS dan Javascript dengan membuat nya menjadi terkompres atau istilahnya di minify.

3. Phone, Tablet, Desktop, dan….

Kita tidak bisa pungkiri, ketika membuat website responsive kita tidak hanya fokus pada 3 jenis atau kategori perangkat (PC, Tablet, Phone), Anda harus ingat kalau perangkat bukan hanya itu saja, di zaman sekarang ini orang membuka website anda dari berbagai perangkat, seperti smartwatches, ebook reader, ponsel, smartphone, tablet, netbook, notebook, ultrabook, desktop, widescreen, dan banyak lagi. Jadi berikan sedikit waktu anda untuk membuat website anda agar bisa mengakomodir perangkat-perangkat tersebut.

4. Typography

Pada dasarnya website itu adalah 95% tipografi. Sebagian besar konten yang kita konsumsi setiap hari adalah tergantung dari tipografi, baik itu postingan di blog atau infographic. Jadi gunakanlah font yang baik untuk website anda. Pertimbangkan besar file font yang akan di load, pertimbangkan ukuran font ketika website dibuka di layar yang kecil, pertimbangkan warna font agar terlihat jelas di layar pengunjung, gunakan jenis font yang mudah dibaca dan tidak membingungkan.

5. Javascript & Performa

Katika kita berbicara performance, maka Javascript dapat menjadi influencer utama. Javascript menjadi sangat populer dalam beberapa tahun belakangan ini, plugin nya begitu banyak dan bagus-bagus, animasi yang dibuat begitu menakjubkan. Akhirnya web designer dengan sesuka hati menggunakan banyak sekali plugin agar website nya tampil luar biasa, tanpa memikirkan performa website nantinya, bankan tidak tanggung-tanggung puluhan plugin jquery di load secara bersamaan karena website tersebut sangat banyak menggunakan efek dan lainnya. Ini tentu sangat memberatkan website nantinya. Biasanya ini bisa kita lihat di template yang multipurpose, dimana template bisa digunakan untuk semua jenis website, dan untuk membuat itu biasanya sang developer menyertakan semua plugin yang digunakan jenis-jenis website tersebut.

6. Retina Display

Poin terakhir yang perlu kita perhatikan yaitu bagaimana penampilan website anda pada perangkat yang sudah menggunakan retina display. Layar ini memiliki pixel density yang lebih tinggi yang berarti kemampuan untuk menampilkan lebih banyak pixel dan jauh lebih baik,  tampilan yang lebih halus. Singkatnya, Anda dapat melihat lebih detail dalam resolusi tinggi atau lebih kecil dalam gambar yang beresolusi rendah.
Intinya adalah pikirkan untuk menyertakan gambar untuk resolusi yang lebih tinggi yang akan ditampilkan hanya ketika user menggunakan perangkat yang disertai fitur retina display.

Ringkasan

Desain responsif bukan hanya tentang pembuatan website yang tampak keren di smartphone, tablet dan desktop. Untuk membuat pengalaman yang benar-benar responsif ada banyak lagi yang perlu diingat dan diperhatikan. Semoga tips ini akan membantu anda mencapai tujuan anda.

Sampai jumpa di artikel TWD(Tutorial Web Design) berikut nya.





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

5 thoughts on “6 Tips Untuk Membuat Website Responsive

  1. […] Baca juga: 6 Tips Untuk Membuat Website Responsive […]

  2. akhwan says:

    terimakasih tips-tips nya, wner
    yang perangkat retina display maksudnya web harus menggunakan gambar yang resolusi tajam ya biar tidak pecah ?

  3. […] Baca juga: 6 Tips Untuk Membuat Website Responsive […]

  4. […] Baca juga: 6 Tips Untuk Membuat Website Responsive […]

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development