MODUL 6 Responsive Web A. TUJUAN 1. Mampu memahami

Desain Web
MODUL 6
Responsive Web
A. TUJUAN
1. Mampu memahami konsep responsive web
2. Mampu membuat desain web responsif menggunakan CSS
B. PETUNJUK
1. Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan
2. Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar
3. Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur
4. Tanyakan kepada dosen apabila terdapat hal-hal yang kurang jelas
C. DASAR TEORI
Responsive pada web merupakan tampilan antarmuka yang dinamis, mampu berubahubah atau beradaptasi sesuai dengan ukuran layar perangkat yang digunakan untuk melihat
halaman web tersebut. Trend responsive web ini mulai berkembang sejak pengguna mobile web
angkanya semakin naik seiring berkembangnya teknologi.
Tampilan versi PC (layar lebar)
Sabian | STKIP PGRI TULUNGAGUNG
1
Desain Web
Tampilan versi Mobile (layar sempit)
Responsive web dapat kita terapkan dengan cara menambahkan kode khusus pada file
HTML dan file CSS yang kita gunakan. Pada file HTML, kita tambahkan tag <meta> pada head,
sedangkan pada file CSS kita tambahkan @media untuk menuliskan rule tambahan pada class
yang ingin kita ganti tampilannya pada bentang layar tertentu.
D. LATIHAN
1. Bukalah aplikasi teks editor
2. Tuliskan kode dasar HTML
Simpan sebagai index.html
Sabian | STKIP PGRI TULUNGAGUNG
2
Desain Web
3. Sisipkan kode berikut pada head:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
4. Kemudian tambahkan style pada head:
Sabian | STKIP PGRI TULUNGAGUNG
3
Desain Web
5. Selanjutnya tambahkan kode berikut pada body:
6. Buka index.html menggunakan browser. Jika kode benar, maka tampilannya sebagai berikut:
7. Selanjutnya coba kecilkan ukuran jendela browser anda. Jika kode benar, maka tampilannya
sebagai berikut:
Sabian | STKIP PGRI TULUNGAGUNG
4
Desain Web
Pada dasarnya, tidak terdapat perubahan tampilan utama pada kedua ukuran jendela.
Perubahan hanya pada panjang teks saja yang menyesuaikan dengan lebar jendela.
8. Selanjutnya, coba tambahkan kode berikut pada style:
9. Buka index.html dengan ukuran jendela maksimal, hasilnya sebagai berikut:
Sabian | STKIP PGRI TULUNGAGUNG
5
Desain Web
10. Kecilkan ukuran jendela, jika kode benar tampilannya sebagai berikut:
Kode @media only screen and (max-width: 720px) pada CSS akan memberlakukan suatu rule
untuk ukuran layar (jendela) mulai dari 1 – 720 piksel. Jika ukuran layar atau jendela browser
kita lebih dari 720 piksel, maka rule yang akan diberlakukan adalah rule default, yakni rule
yang telah kita tuliskan pada kode CSS bagian awal.
Dengan kata lain, secara peruntukan, rule CSS untuk ukuran layar 720 piksel ke bawah akan
diberlakukan pada layar handphone atau tablet, sedangkan rule untuk ukuran layar di atas
720 piksel akan diberlakukan pada layar PC.
Untuk mencobanya, silahkan transfer file index.html di atas pada handphone anda kemudian
buka dengan browser. Coba lihat rule CSS mana yang akan ditampilkan.
Tujuan utama dari dikembangkannya responsive web adalah untuk mengakomodasi tampilan
web kita agar mampu menyesuaikan komposisinya terhadap ukuran layar yang digunakan
tanpa harus membuat beberapa file HTML untuk masing-masing mode tampilan.
Sabian | STKIP PGRI TULUNGAGUNG
6
Desain Web
E. TUGAS
Desainlah suatu tampilan web seperti berikut menggunakan CSS:
a. Tampilan PC
b. Tampilan Tablet
Sabian | STKIP PGRI TULUNGAGUNG
7
Desain Web
c. Tampilan Mobile
Sabian | STKIP PGRI TULUNGAGUNG
8