Pertama, bagi yang belum tau apa responsive web itu? Yaitu web yang
tampilannya dapat menyesuaikan resolusi layar perangkat yang menampilkannya.
Misal ketika dibuka pada monitor ukuran 1024, tampilan web akan terlihat
penuh dan lengkap. Ketika dibuka dengan layar ponsel ukuran 240, lebar tampilan
web pas dengan lebar layar, dan tidak perlu zooming untuk membaca konten yang ada.
Keunggulan responsive web yaitu dapat menyesuaikan lebar layar perangkat,
sehingga tidak perlu zooming dan scrolling ke samping. Karena lebarnya bisa
menyesuaikan, otomatis tata letak di dalamnya pun juga dapat disesuaikan sehingga
lebih tampak tertata dilihat di layar manapun.
Untuk membuatnya, pertama dalam file html-nya berikan meta tag sebagai berikut :
Dari script di atas dapat diartikan bahwa class container akan berubah-ubah lebarnya ketika ditampilkan di layar yang berbeda ukuran. Pada layar dengan resolusi minimal 1200px, lebar class container menjadi 1000px. Dan pada layar dengan resolusi minimal 968px, lebar class container menjadi 900px. Setidaknya dari contoh diatas sudah ada gambaran bagaimana responsive web itu.
<-meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/->
Kemudian pengaturan layout/tata letaknya di css. Gunakan @media pada css nya, seperti berikut :
@media only screen and (min-width:1200px) {
.container {
<-meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
width: 1000px;
}
}
@media only screen and (min-width:968px) {
.container {
width: 900px;
}
}
Dari script di atas dapat diartikan bahwa class container akan berubah-ubah lebarnya ketika ditampilkan di layar yang berbeda ukuran. Pada layar dengan resolusi minimal 1200px, lebar class container menjadi 1000px. Dan pada layar dengan resolusi minimal 968px, lebar class container menjadi 900px. Setidaknya dari contoh diatas sudah ada gambaran bagaimana responsive web itu.
CSS 3 ditambah javascript paling enak mh. mnt tutor bootstrap gan kalo boleh heheheh
ReplyDeleteIya bener gan .. Css kalo dikombinasikan ama JS semakin interaktif dan menarik. Oh siap gan, kapan2 tak nulis tentang bootstrap!
DeleteIya bener gan .. Css kalo dikombinasikan ama JS semakin interaktif dan menarik. Oh siap gan, kapan2 tak nulis tentang bootstrap!
DeleteDalam mengoptimalkan keberhasilan sebuah situs, tujuan membuat desain web responsif tidak boleh diabaikan. Dengan meningkatkan aksesibilitas, menciptakan pengalaman pengguna yang konsisten, menyederhanakan pengelolaan konten, mendukung strategi SEO, dan beradaptasi dengan perkembangan teknologi, desain web responsif menjadi fondasi yang kokoh untuk mencapai tujuan bisnis dan memberikan layanan yang berkualitas kepada pengguna.
ReplyDeletemanfaat membuat desain web responsif tidak dapat diabaikan. Dari aksesibilitas universal, pengalaman pengguna konsisten, hingga peningkatan retensi pengguna, desain web responsif adalah investasi yang cerdas bagi perkembangan dan keberlanjutan suatu situs.
mengakui dan memanfaatkan keunggulan membuat desain web responsif adalah langkah yang tak terelakkan. Dari penyesuaian otomatis hingga penghematan waktu dan sumber daya, desain web responsif menjadi landasan yang kuat untuk mencapai tujuan bisnis online.