Cara Membuat Desain Web Responsive Dengan CSS

Cara Membuat Desain Web Responsive Dengan CSS

Cara Membuat Responsive Web – Pada artikel kali ini saya dambakan menyebabkan tutorial mengenai suatu hal hal yang lumayan penting, yakni Cara Membuat Desain Web Responsive Dengan CSS. Dalam tutorial ini, saya dapat menjelaskan secara singkat mengenai pengertian Responsive Web dan Cara Membuat Web Responsive. Disini kami dapat menyebabkan layout web site yang responsive, yang mana layout web site nantinya dapat sanggup menyesuaikan tampilannya terhadap sebagian ukuran layar layaknya tablet, ponsel, ataupun PC).

Untuk menyebabkan web site yang responsive kami cuma perlu element @media-query terhadap kode CSS. Selanjutnya, yang harus anda pahami adalah lebar berasal dari desain web site anda sendiri, sebagian diantaranya adalah lebar container, wrapper, main. Container sebagai wadah nya, namun wrapper sebagai pembungkusnya, dan main adalah isikan konten berasal dari web site itu sendiri.

Kita ambil semisal terhadap web site saya yang beralamat brianhrs.com, sepenuhnya telah saya menyesuaikan untuk membuatnya jadi responsive (mampu beradaptasi dikala dibuka berasal dari berbagai perangkat). Untuk menguji dan membuktikannya, silahkan anda buka dan perkecil terhadap tampilan browsernya atau silahkan buka di ponsel anda, dan lihat bagaimana tampilannya. Website saya senantiasa mengikuti lebar berasal dari tampilan browser tersebut, itulah yang dinamakan dengan responsive.

Apa itu Responsive Web?

Responsive Web Desain adalah sebuah metode proses web site yang mempunyai tujuan untuk mengoptimalkan web site kalau web site berikut dibuka dalam berbagai ukuran layar. Dengan metode ini, web site dapat menyesuaikan atau beradaptasi kalau dibuka berasal dari perangkat mobile/ponsel berukuran kecil, tablet, ataupun komputer dengan monitor yang besar. Website yang responsive, tentu pengunjung dapat senang dikala sedang mengunjungi web site anda, karena tampilan atau layout nya menyesuaikan dengan perangkat yang pengunjung anda gunakan. Bayangkan kalau web site anda tidak responsive, barangkali tampilan nya rapih dikala dibuka terhadap laptop atau komputer, tetapi kalau di akses dalam mobile layoutnya dapat hancur dan berantakan, hal berikut tentu menyebabkan pengunjung anda tidak betah untuk berlama-lama berada di web site anda, supaya baru sebentar saja pengunjung singgah, tetapi pergi dengan cepat karena web site anda tidak responsive.

Cara Membuat Desain Web Responsive

Pada artikel ini, kami dapat menyebabkan layout web site yang responsive, barangkali kami dapat mencoba menyebabkan 3 kolom di kiri, tengah, dan kanan. Setelah itu, dikala halaman nya dibuka dalam berbagai ukuran yang telah ditentukan apabila saja (1024px), makan kolom berikut dapat terpecah jadi 2 kolom, dan dikala terhadap layar yang lebarnya 786px kebawah maka kolomnya dapat jadi 1 saja.

1. Membuat Struktur File HTML

Langkah pertama yang tentu kami melaksanakan adalah menyebabkan file HTML nya lebih-lebih dahulu. Didalam kode HTML nya, dapat terdapat 3 class berasal dari class utama (main). Kita dapat menyebabkan 3 class dalam class main yang bernama kiri, tengah, dan kanan, tiap-tiap class nanti dapat diberikan ukuran khusus dan dapat diberikan properti float terhadap kode CSS nya supaya sanggup menyebabkan kolom. Untuk kode lengkapnya silakan melihat dan ketikkan ke text editor anda masing-masing. Pada kode diatas, anda dapat lihat kode  , kode berikut merupakan sintaks (syntax) yang fungsinya untuk menampilkan web site yang sesuai dengan layar.

Setelah itu anda lihat kode , kode berikut merupakan kode CSS yang berfungsi untuk men-load file CSS yang bersifat External Stylesheet (file terpisah).

2. Membuat dan Mengatur Layout Web

Setelah struktur file HTMLnya telah selesai kami buat, langkah selanjutnya adalah menyebabkan dan menyesuaikan layout webnya menggunakan CSS. Karena layoutnya belum terbentuk sesuai yang kami mau, maka berasal dari itu kami dapat membentuknya dengan kode CSS supaya layout sanggup membentuk 3 kolom, bikin file baru dengan nama style.css dan letakkan satu folder dengan file HTML kalian lantas silahkan ketikkan kode berikut ini kedalam text-editor anda masing-masing.

Mengapa pada mulanya saya bilang bahwa anda harus familiar dengan HTML dan CSS untuk mengikuti tutorial ini? Jawabannya sangat simpel, supaya saya tidak harus menjelaskan ulang kode  CSS diatas, karena apabila saya jelaskan pun, belum tentu kalian menyadari (jika kalian tidak familiar dengan CSS) karena setidaknya diperlukan ilmu dasar untuk menyadari kode diatas.

3. Menjadikan 2 Kolom Ketika akses terhadap Tablet

Langkah selanjutnya adalah kami dapat menyebabkan pergantian dikala ukuran layar sebebas 1080px, sebetulnya dalam ukuran ini kalian sanggup menentukan dengan keperluan anda masing-masing, entah itu 1024px, 1000px, atua 960px. Namun disini kami dapat menggunakan sesuai dengan ukuran perangkat yang banyak digunakan layaknya iPhone, iPad, Samsung Galaxy, dan sebagainya. Untuk merubahnya kami cuma harus menggunakan pemberian  fasilitas query @media screen and (max-width: 1080px) yang bermakna kalau ukuran layar atau layout maksimal 1080 maka menentukan kode CSS selanjutnya.

Pada kode CSS diatas bukan cuma untuk menyesuaikan layout kolom saja, tetapi terhitung sanggup melaksanakan pergantian lain layaknya merubah kolom kiri jadi warna biru, merubah warna font, merubah ukuran font, atau merubah type font. Pada kode diatas, class .left ditambahkan properti dan value background-color: #89d0ff; untuk memengaruhi backgroundnya jadi warna biru. 

4. Menjadikan 1 Kolom Ketika akses terhadap Ponsel

Langkah selanjutnya adalah kami harus mengurangi ulang layout web site kami terhadap ukuran ponsel, karena untuk tablet tidak sanggup dipakai untuk menampung ponsel, maka berasal dari itu dikala ukuran layar lebih kecil, maka kami harus menentukan ulang terhadap kode CSS nya. Masih serupa dengan dengan yang sebelumnya, kami cuma dapat merubahnya jadi satu kolom dikala dibuka terhadap ukuran 700px kebawah. Coba anda mencermati terhadap kode diatas, kami tidak ulang menentukan lebar kolom, semua element (div) dibuat dengan width: auto; yang bermakna ini dapat dibuat dengan mencukupi layar lebar. Maka berasal dari itu dapat terbentuk sebuah layout yang cuma satu kolom dikala dibuka terhadap ukuran lebih kecil.

Jadi layaknya itu lah langkah yang paling mudah untuk menyebabkan layout web site yang responsive. Tutorial ini mempunyai tujuan untuk mengutamakan anda ke prinsip dalam pembuatan web site responsive supaya kalian mudah mengerti, jadi semua layout yang dibuat dalam tutorial ini sangatlah sederhana dan sederhana. Jika kalian dambakan menyebabkan project web site yang lumayan serius, ada baiknya anda mempelajari lebih lanjut mengenai CSS dan kembangkan ulang element-element CSS nya yang lain.