Cara Mengetahui Website Anda Responsive atau Tidak

Ukuran: px

Mulai penontonan dengan halaman:

Download "Cara Mengetahui Website Anda Responsive atau Tidak"

Widya Irawan
6 tahun lalu
Tontonan:

1 Cara Mengetahui Website Anda Responsive atau Tidak [caption id="attachment_29882" align="aligncenter" width="1000"] Tampilan Responsive Website Anita's Personal Blog Komputer Fotografi ( yaitu tetap utuh dalam berbagai ukuran perangkat.[/caption] page 1 / 8

Sekarang, tahun 2015 salah satu kriteria penialain dalam Lomba Website IPB salah satu kriteria penjurian adalah tentang Responsive Web Design (RWD).

2 Sekarang, tahun 2015 salah satu kriteria penialain dalam Lomba Website IPB salah satu kriteria penjurian adalah tentang Responsive Web Design (RWD). Responsive Web Design (RWD), adalah pendekatan desain web yang bertujuan untuk menampilkan layar yang optimal, mudah dibaca dan penggunaan navigasi yang minimal baik itu untuk resize, panning, scrolling, dan tampilan yang baik di berbagai perangkat (dari ponsel ke monitor desktop komputer). Memahami konsep RWD sebetulnya bukan hanya resolusi layar yang mudah menyesuaikan maupun objek gambar yang dimanipulasi ukurannya, tetapi lebih kepada pemikiran desain layout website secara keseluruhan. Seperti sifat cairan yang dapat menyesuaikan diri dalam media apa pun (fluid grid/fluid images). Melakukan test responsive web design bisa jadi merupakan tugas yang cukup berat, tidak mudah untuk setiap kali harus melakukan resize pada ukuran-ukuran yang spesifik (panjang dan lebar web browser). Mengubah lebar ukuran browser dan melakukan test pada berbagai browser dan aplikasi yang berbeda sangat melelahkan dan sangat menyita waktu. Apikasi page 2 / 8

3 di bawah ini sangatlah membantu anda dalam melakukan test responsive design pada berbagai ukuran layar browser. Untuk melakukan test pada website design di berbagai ukuran layar browser tersebut saya memakai Matt tools. Matt tools adalah online tool yang berbasis iframe. Cara mengetahui Website kita responsive atau tidak dengan Matt tools: 1. Buka browser, disini saya buka browser IE 2. Buka aplikasi Web Responsif Design buatan Matt Kersley - Fork pada Github, alamat URL nya 3. Maka akan muncul tampilan seperti berikut: page 3 / 8

4 4. Lalu di kota searchnya ketikkan alamat website Anda, misalnya ketikklan alamat website ini yaitu 5. Lalu tekan Enter 6. Maka akan muncul tampilan berikut: page 4 / 8

5 7. Tunggu beberapa lama, maka akan muncul tampilan berikut: page 5 / 8

6 8. Nah kita bisa lihat kalau website yang kita uji terlihat utuh tidak terpotong tampilannya di berbagai ukuran. Ini terbukti website anita's Personal Blog Komputer Fotografi yang alamat URL nya Responsive!!!! Di lebar 240 pixel, 320 pixel, 480 pixel, 768, atau 1024 pixel tampilan website yang responsive tetap utuh, seperti contoh tampilan dibawah ini, Width Only: page 6 / 8

7 Di Ukuran Perangkat (pilih Device Size) 240 x 320 (small phone), 320 x 480 (iphone), 480 x 640 (small tablet), 768 x 1024 (ipad - Portrait), 1024 x 768 (ipad - Landscape) tampilan website yang responsive tetap utuh, contohnya seperti gambar dibawah ini: page 7 / 8

8 [caption id="attachment_29882" align="aligncenter" width="1000"] Tampilan Responsive Website Anita's Personal Blog Komputer Fotografi ( yaitu tetap utuh dalam berbagai ukuran perangkat.[/caption] 9. Selesai. Penulis: Anita Handayani page 8 / 8

dokumen-dokumen yang mirip

Panduan Lomba Web Thn 2014 Panduan Lomba Web Thn 2014 Kriteria Penilaian

Panduan Lomba Web Thn 2014 Panduan Lomba Web Thn 2014 Kriteria Penilaian No 1 2 Kriteria Presence, banyaknya halaman dalam suatu domain yang diindeks oleh mesin pencari Google. Presence merepresentasikan