Tampilan Responsive Website Anita's Personal Blog|Komputer|Fotografi (http://anitanet.staff.ipb.ac.id) yaitu tetap utuh dalam berbagai ukuran perangkat.

Tampilan Responsive Website Anita’s Personal Blog|Komputer|Fotografi (http://anitanet.staff.ipb.ac.id) yaitu tetap utuh dalam berbagai ukuran perangkat.

Resize My BrowserSekarang, 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 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 http://mattkersley.com/responsive/
  3. Maka akan muncul tampilan seperti berikut:
    Cara Mengetahui Website Kita Responsive atau Tidak
  4. Lalu di kota searchnya ketikkan alamat website Anda, misalnya ketikklan alamat website ini yaitu http://anitanet.staff.ipb.ac.id
  5. Lalu tekan Enter
  6. Maka akan muncul tampilan berikut:
    Cara Mengetahui Website Kita Responsive atau Tidak
  7. Tunggu beberapa lama, maka akan muncul tampilan berikut:
    Cara Mengetahui Website Kita Responsive atau Tidak
  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 http://anitanet,staff.ipb.ac.id bersifat 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:
    Cara Mengetahui Website Kita Responsive atau Tidak
    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:

    Tampilan Responsive Website Anita's Personal Blog|Komputer|Fotografi (http://anitanet.staff.ipb.ac.id) yaitu tetap utuh dalam berbagai ukuran perangkat.

    Tampilan Responsive Website Anita’s Personal Blog|Komputer|Fotografi (http://anitanet.staff.ipb.ac.id) yaitu tetap utuh dalam berbagai ukuran perangkat.

  9. Selesai.

Penulis: Anita Handayani


FacebookTwitterGoogle+PinterestLinkedInWhatsAppLineShare/Bookmark