PWEB ETS
Responsive web design adalah pendekatan desain web bertujuan membuat situs web dapat ditampilkan dalam berbagai platform seperti desktop, handphone, Ipad, dan lain-lain. tampilan dan fungsionalitas situs web akan menyesuaikan secara otomatis, sehingga pengguna mendapatkan pengalaman yang optimal tanpa harus melakukan zoom atau scroll berlebihan.
Teknik yang digunakan untuk membuat responsive web:
Media Queries
Media Queries adalah fitur di CSS yang memungkinkan kita untuk menerapkan gaya berbeda berdasarkan ukuran layar, orientasi, atau karakteristik perangkat lainnya. Media Queries memungkinkan untuk menjalankan serangkaian pengujian (misalnya, apakah layar pengguna lebih besar dari lebar tertentu, atau resolusi tertentu) dan menerapkan CSS secara selektif untuk menata laman sesuai kebutuhan pengguna.
Flexbox dan Grid
Flexbox atau Flexible Box adalah metode tata letak satu dimensi dalam CSS yang digunakan untuk mengatur elemen atau container beserta item di dalamnya pada halaman web dan Grid adalah sistem tata letak dua dimensi yang memungkinkan pengguna mengatur konten ke dalam baris dan kolom. Teknik ini menggunakan layout yang fleksibel dengan unit yang relatif, seperti persen, daripada menggunakan unit absolut seperti piksel.
2. Istilah ‘meta’ adalah singkatan dari ‘metadata’. Elemen meta digunakan untuk memberitahu informasi penting ke mesin pencari tentang halaman web dan bagaimana web tersebut ditampilkan. Memaksimalkan meta tag dapat membantu menaikkan peringkat konten atau halaman sebuah situs, jumlah klik, serta pengalaman pembaca.
Elemen meta Tag selalu berada di dalam elemen <head> dan biasanya digunakan untuk menentukan rangkaian karakter, deskripsi halaman, kata kunci, penulis dokumen, dan pengaturan viewport. Metadata tidak akan ditampilkan di halaman, tetapi dapat diurai oleh mesin.
Salah satu atribut penting dari elemen meta adalah name.
Atribut name dapat digunakan untuk beberapa hal:
Mengatur viewport
Mengatur karakter set
Keyword untuk SEO
Menentukan hak cipta dan penulis
Contoh kode untuk mengatur viewport
name=”viewport”
Bagian ini memberitahukan browser bahwa elemen ini digunakan untuk mengatur viewport, yaitu area yang terlihat dari halaman web pada layar perangkat. Pada perangkat seluler, viewport adalah ukuran dari area tampilan web yang bisa dilihat pengguna (yang seringkali berbeda dengan ukuran sebenarnya dari halaman web).
content="width=device-width"
Bagian ini menginstruksikan browser agar lebar viewport diatur sesuai dengan lebar layar perangkat. Artinya, halaman web akan ditampilkan sesuai dengan lebar layar fisik perangkat apa pun, baik itu ponsel, tablet, atau desktop.
initial-scale=1.0
Bagian ini mengatur skala awal tampilan halaman menjadi 1.0, yang berarti halaman akan di-load tanpa di-zoom atau di-scaling. Nilai 1.0 menunjukkan bahwa halaman web akan tampil dengan skala aslinya, tanpa pembesaran atau pengecilan otomatis.
Comments
Post a Comment