fbpx

Desain Website Responsive

Membuat sebuah website responsive tidaklah rumit, namun anda harus mengetahui hal utama yang harus diperhatikan dan dipahami dengan baik ketika ingin membuat desain website responsive. Apalagi login nya yang sederhana, dengan beberapa kolom  yang akan melebar jika anda membukanya pada perangkat smartphone ataupun tablet. Untuk mengaturnya, terdapat beberapa langkah yang perlu anda praktekkan agar dapat menciptakan tampilan website yang baik dibuka dengan berbagai macam browser dengan ukuran layar yang berbeda.

Beberapa Langkah Dasar Perlu Anda Perhatikan untuk Membuat Desain Website Responsive 

Mendefinisikan Meta Tag

Langkah pertama yang perlu anda lakukan adalah mengatur skala halaman html sesuai lebar viewport untuk ditampilkan pada layar mobile. Anda bisa menggunakan cara tag meta viewport untuk mereset nya. Selain itu bisa berguna untuk menginformasikan pada browser guna menggunakan lebar perangkat sebagai acuan serta menonaktifkan skala awal. Adapun meta tag yang bisa anda sertakan dibagian <head> yaitu <meta name=“viewport” content=”width=device-width, initial-scale=1.0”>

Menentukan Struktur HTML

Berikutnya anda perlu menentukan struktur Html website yang terdiri dari header, content, sidebar serta footer. Biasanya header menggunakan lebar full dan tinggi sesuai dengan kebutuhan. Sedangkan content, dapat menggunakan lebar 660px dan sidebar 300px, sehingga lebar keseluruhan yaitu 960px.


Baca Juga :

Perhatikan ! Inilah 5 Hal Penting Sebelum Mendesain Website melalui Kursus Web Desain Surabaya

Membuat Media Query CSS

Langkah terakhir dalam membuat website responsive adalah membuat media query di css yang kini sudah semakin canggih layaknya bahasa pemrograman PHP dan Javascript. Akan tetapi, css harus melakukan rendering halaman dengan mengatur lebarnya yaitu lebar wrapper diatur 96%,konten 66% dari lebar layar dan sidebar menjadi 30%.

Itulah beberapa cara yang dapat anda lakukan untuk membuat desain website responsive, jika anda ingin mengecek apakah web tersebut sudah responsive dapat menggunakan alat tes responsive web. Untuk itu anda perlu memperhatikan pula bagian meta tag, media query di css agar website bisa tampil proporsional. Jika anda ingin mengembangkan website tersebut, dapat dengan mengikuti Pelatihan Web Programming bersama Ahlinya hanya di Flashcom Indonesia. Layanan pelanggan kami yang Fast Response and Service Excellent dapat dihubungi melalui Hotline 0-811-3380-114 atau by WhatsApp 085735948460

100% Praktik & Jadwal Fleksibel

dibimbing langsung oleh ahlinya

Customer Service

Dapatkan newsletter untuk penawaran khusus, agenda seminar, workshop, dan informasi lainnya.