Tips Menciptakan Website Responsive Dan Ringan

Hi Web Developer Indonesia! Kali ini saya mau kasih tips gimana caranya untuk buat website yang  responsive. Website yang responsive sangat diharapkan oleh website. Apalagi, berkembangnya teknologi website di zaman ini. Pada umumnya user lebih tertarik dengan website yang responsive. User akan cenderung meninggalkan website tersebut.

Kenapa sebuah  Website harus Responsive? Sebelum itu, saya mau nanya. Kamu jalan masuk website ini lewat apa? mobile atau desktop? Jika tanggapan kau mobile. Berarti pertanyaan itu sudah terjawab. Karena, user kebanyakan membuka website melalui mobile. Fleksibilitas ini yang menciptakan Website yang kita buat ini akan lebih menarik user.

 

Oke, sebelum masuk ke tipsnya. Kita coba sepahamin dulu ya. Apa yang dimaksud dengan Website yang Responsive.

Apa itu Website Responsive? Pada umumnya, website responsive didefinisikan menjadi website yang fleksibel di device manapun.Website akan menyesuaikan ukuran pada besar layar yang ada. Sehingga, dikala website dibuka di layar yang kecil, Tulisan dan grafis pada website akan gampang untuk dilihat dan gampang untuk dipandang. 

Sudah banyak website yang menerapkan Website Responsive ini. Jika kau sadari, website menyerupai Facebook, Instagram, Twitter, dsb. Sudah terdapat website dengan tampilan khusus untuk mobile.

Caranya? Sepengetahuanku, ada dua cara yang sanggup dilakuin semoga Website sanggup responsif.

1. Javascript. Cara pertama, dimulai dari yang agak sulit ya. Ide awalnya dengan javascript kalian sanggup cek apakah user memakai desktop atau mobile. Lalu dengan javascript tersebut kalian sanggup menyesuaikan html yang cocok bagi desktop/mobile.
Ini variabel yang sanggup kau pake untuk ceknya. kopi aja.

 var isMobile = {     Android: function() {         return navigator.userAgent.match(/Android/i);     },     BlackBerry: function() {         return navigator.userAgent.match(/BlackBerry/i);     },     iOS: function() {         return navigator.userAgent.match(/iPhone|iPad|iPod/i);     },     Opera: function() {         return navigator.userAgent.match(/Opera Mini/i);     },     Windows: function() {         return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);     },     any: function() {         return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());     } };

source : https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser

Untuk penggunaanya, kalian sanggup pribadi memakai variabel tersebut.
if( isMobile.any() ) alert('Mobile');

2. Meta Tag. Cara kedua, ini cara yang lebih gampang untuk dipahami. Kalian cukup menciptakan satu arahan tema html kemudian Meta Tag akan menyesuaikan lebar layar dengan konten yang ada pada html. Sehingga ukuran Website akan menyesuaikan secara otomatis.
Kalian sanggup letakan arahan ini di tag head.

<meta name="viewport" content="width=device-width, initial-scale=1">

source : https://css-tricks.com/snippets/html/responsive-meta-tag/

Nah, untuk bahasan yang selanjutnya saya mau kasih tips gimana caranya untuk buat website yang ringan. Tanggung dong ya kalo cuman sanggup buat website yang responsive tapi ga ringan. Tapi sebelum itu saya mau kasih tau dulu nih apa laba website yang ringan.
1. User betah. Yap, kalian gasuka nunggu kan? iya, saya juga. Makanya pastiin website mu ringan semoga cepat diakses.
2. Bagus Untuk Pengembangan. Website yang lebih ringan pastinya mempunyai grafis yang sederhana sehingga pengembang website juga akan lebih gampang dalam membuatnya. Loading website juga sanggup mempersingkat waktu pengembangan.
3. Storage yang sedikit. Bagi kau yang menciptakan website ringan pastinya memakai sedikit resource yang ada sehingga penggunaan storage sanggup lebih efisien.

Ok, kini kita masuk ke tips gimana cara buat website yang ringan!
1. Simple. Buatlah website dengan desain minimalistik dan tidak menambahkan banyak grafis yang tidak diperlukan, Jangan tambahkan elemen yang tidak dibutuhkan. Perhatikan kecepatan dalam load website tersebut.
2. Belajar Membuat Shape dengan HTML. Bagi yang belum tau. HTML sanggup menciptakan shape hanya dengan memakai kode. Kamu sanggup mencarinya dengan kata kunci "SVG". Kamu sanggup berguru menciptakan gambar dengan tag SVG ini.
3. Kuasai CSS. Dengan menguasai CSS. Kamu sanggup menciptakan warna dari mulai warna datar sampai gradiasi. Kamu pun sanggup menciptakan animasi sederhana dengan arahan sehingga website sanggup menjadi lebih ringan.