Responsive Web Design (RWD) adalah konsep desain website yang akhir-akhir ini semakin booming. RWD adalah pendekatan atau proses yang bertuj...
Responsive Web Design (RWD) adalah konsep desain website yang akhir-akhir ini semakin booming. RWD adalah pendekatan atau proses yang bertujuan menciptakan desain web yang bisa diakses dengan baik oleh berbagai perangkat akses berbeda (dari perangkat komputer hingga mobile), menyediakan navigasi yang mudah digunakan, dan, singkatnya, memperhatikan semua yang berkaitan dengan aksesibilitas website.
Dengan demikian, selain untuk aksesibilitas, konsep desain responsif ditujukan untuk menyediakan kesatuan akses website melalui perangkat mobile; berbeda dengan mobile web design, yang merupakan bagian terpisah. Namun demikian, keduanya memenuhi kriteria yang disebut sebagai mobile-friendly, yaitu kemampuan sebuah website untuk diakses oleh perangkat mobile dengan baik.
Desain website responsif sangat dianjurkan, termasuk oleh Google, karena sifatnya yang dinamis dan hanya membutuhkan satu sumber akses, tidak perlu versi lain (mobile version). Oleh karena itu, desain website responsif lebih hemat, tidak membutuhkan budget sebanyak situs yang memiliki versi website terpisah untuk perangkat mobile, baik dalam hal design maupun kebutuhan server.
Desain website responsif juga menjadi salah satu cara untuk mendapatkan label situs mobile-friendly, yang kemudian digunakan Google sebagai salah satu parameter ranking situs melalui algoritma MobileGeddon.
Nah, asumsinya, website/blog anda sudah memiliki desain responsif. Tapi, apakah sudah mendukung responsivitas pada kebanyakan perangkat komputer dan mobile? Kemajuan teknologi di bidang perangkat mobile dan digital tidak ada lelahnya. Setiap saat muncul perangkat mobile baru, baik tablet, smartphone, dan berbagai jenis gadget mobile lainnya. Masing-masing memiliki lebar layar tersendiri. Desain website responsif harus memperhatikan hal ini dan melakukan update sewaktu-waktu jika ada perangkat dengan luas layar berbeda dari yang sudah ada.
Nah, untuk melihat tingkat responsivitas website produktif atau website yang sedang anda desain, dibutuhkan perangkat uji yang memadai. Apalagi jika berbicara mengenai SEO, maka situs anda harus benar-benar mobile-friendly untuk semua perangkat agar mendapatkan peringkat tinggi di hasil pencarian. Artinya, perangkat uji resposivitas yang akan digunakan harus memiliki kemampuan atau fitur yang mencakup hampir semua perangkat akses terbaru. Berikut 3 situs terbaik untuk cek responsivitas website ini:
Layar ujinya meliputi monitor 27 inch, monitor 17 inch, monitor 15 inch, monitor 11 inch, Macbook Ar 11 inch, IPAD landscape dan portrait, NEXUS 7 landscape dan portrait, serta iPhone landscape dan portrait. Cukup lengkap dan mewakili hampir semua perangkat yang ada saat ini. Di bagian bawah navigasi, akan ada informasi luas layar (dalam piksel) sehingga memudahkan anda dalam memperkirakan CSS media queries yang digunakan. Misalnya: 27in. Monitor, Dell U2711: 2560px wide x 1440px high. Tool uji responsive ini biasanya saya gunakan bila ingin melakukan test cepat tanpa butuh mengatur banyak spesifikasi.
Untuk cek, cukup masukkan url website dan klik “Go”. Gunakan navigasi yang mengindikasikan jenis-jenis perangkat untuk melihat kemampuan responsif website/blog anda terhadap perangkat-perangkat tersebut.
Go to site >>
Di sebelah kiri atas ada beberapa navigasi berupa icon perangkat smartphone, tablet, laptop, dan desktop monitor/computer. Apabila anda klik akan muncul menu dropdown yang menampilkan spesifikasi layar berbeda-beda. Untuk smartphone ada spesifikasi Apple (iPhone), Blackberry, Samsung, HTC, dan LG. Untuk tablet ada spesifikasi Apple (iPad mini dan iPad), Amazon (seri Kindle), Asus (Google Nexus 7 & dan seri Transformer), Barnes & Noble, Samsung, HP, Microsoft, dan Sony. Untuk laptop ada Apple (Macbook), Acer, Asus, Dell, HP, Lenovo, Sony, dan Toshiba. Untuk desktop monitor ada Apple (iMac), Dell, HP, Asus, Lenovo, Sony, Acer.
Satu lagi yang luar biasa adalah fitur ruler (penggaris) dalam ukuran pixel (px) yang berada di bagian atas, sehingga anda dapat mengukur langsung tanpa harus menggunakan fitur tambahan lain. Really worth it!
Go to site >>
Setelah masuk ke situs Am I Responsif, akan ada sample yang bisa anda lihat di bagian atas. Untuk melakukan tes, scroll ke bawah dan masukkan url website yang ingin diuji responsivitasnya. Anda juga bisa menggunakan bookmarklet (untuk dibookmark pada browser) dan digunakan untuk project lain. Cukup efisien jika anda ingin mengecek responsif atau tidaknya website dengan cepat.
Go to site >>
Desain website responsif sangat dianjurkan, termasuk oleh Google, karena sifatnya yang dinamis dan hanya membutuhkan satu sumber akses, tidak perlu versi lain (mobile version). Oleh karena itu, desain website responsif lebih hemat, tidak membutuhkan budget sebanyak situs yang memiliki versi website terpisah untuk perangkat mobile, baik dalam hal design maupun kebutuhan server.
Desain website responsif juga menjadi salah satu cara untuk mendapatkan label situs mobile-friendly, yang kemudian digunakan Google sebagai salah satu parameter ranking situs melalui algoritma MobileGeddon.
Nah, asumsinya, website/blog anda sudah memiliki desain responsif. Tapi, apakah sudah mendukung responsivitas pada kebanyakan perangkat komputer dan mobile? Kemajuan teknologi di bidang perangkat mobile dan digital tidak ada lelahnya. Setiap saat muncul perangkat mobile baru, baik tablet, smartphone, dan berbagai jenis gadget mobile lainnya. Masing-masing memiliki lebar layar tersendiri. Desain website responsif harus memperhatikan hal ini dan melakukan update sewaktu-waktu jika ada perangkat dengan luas layar berbeda dari yang sudah ada.
Nah, untuk melihat tingkat responsivitas website produktif atau website yang sedang anda desain, dibutuhkan perangkat uji yang memadai. Apalagi jika berbicara mengenai SEO, maka situs anda harus benar-benar mobile-friendly untuk semua perangkat agar mendapatkan peringkat tinggi di hasil pencarian. Artinya, perangkat uji resposivitas yang akan digunakan harus memiliki kemampuan atau fitur yang mencakup hampir semua perangkat akses terbaru. Berikut 3 situs terbaik untuk cek responsivitas website ini:
Responsive Design Checker
Saya paling suka tool uji responsif yang disediakan oleh situs ini karena mudah digunakan. Navigasi berbagai layar perangkat berbeda ada di bagian atas. Load halaman website hanya pada navigasi jenis layar yang kita klik, jadi tidak berat load-nya.Layar ujinya meliputi monitor 27 inch, monitor 17 inch, monitor 15 inch, monitor 11 inch, Macbook Ar 11 inch, IPAD landscape dan portrait, NEXUS 7 landscape dan portrait, serta iPhone landscape dan portrait. Cukup lengkap dan mewakili hampir semua perangkat yang ada saat ini. Di bagian bawah navigasi, akan ada informasi luas layar (dalam piksel) sehingga memudahkan anda dalam memperkirakan CSS media queries yang digunakan. Misalnya: 27in. Monitor, Dell U2711: 2560px wide x 1440px high. Tool uji responsive ini biasanya saya gunakan bila ingin melakukan test cepat tanpa butuh mengatur banyak spesifikasi.
Untuk cek, cukup masukkan url website dan klik “Go”. Gunakan navigasi yang mengindikasikan jenis-jenis perangkat untuk melihat kemampuan responsif website/blog anda terhadap perangkat-perangkat tersebut.
Go to site >>
Responsive Test
Tool favorit kedua saya adalah responsive test. Biasanya digunakan untuk cek responsivitas website secara lebih detail. Tool ini jauh berbeda dengan yang di atas. FIturnya cukup lengkap dan saya jamin tidak ada tool lain, baik dalam bentuk ekstensi, addon, plugin, dan sejenisnya, yang memiliki fitur sekaya ini. Anda bisa memasukkan lebar dan tinggi (dalam piksel) secara manual. Ada pula tombol rotasi (rotate) untuk mengubah tampilan dari landscape menjadi portrait.Di sebelah kiri atas ada beberapa navigasi berupa icon perangkat smartphone, tablet, laptop, dan desktop monitor/computer. Apabila anda klik akan muncul menu dropdown yang menampilkan spesifikasi layar berbeda-beda. Untuk smartphone ada spesifikasi Apple (iPhone), Blackberry, Samsung, HTC, dan LG. Untuk tablet ada spesifikasi Apple (iPad mini dan iPad), Amazon (seri Kindle), Asus (Google Nexus 7 & dan seri Transformer), Barnes & Noble, Samsung, HP, Microsoft, dan Sony. Untuk laptop ada Apple (Macbook), Acer, Asus, Dell, HP, Lenovo, Sony, dan Toshiba. Untuk desktop monitor ada Apple (iMac), Dell, HP, Asus, Lenovo, Sony, Acer.
Satu lagi yang luar biasa adalah fitur ruler (penggaris) dalam ukuran pixel (px) yang berada di bagian atas, sehingga anda dapat mengukur langsung tanpa harus menggunakan fitur tambahan lain. Really worth it!
Go to site >>
Am I Responsive
Sebenarnya situs ini cukup sederhana, dari segi fungsinya. Perangkat uji responsif-nya hanya menyediakan 4 contoh perangkat: tablet, smartphone, laptop, dan desktop computer. Yang menarik adalah, kita bisa langsung melihat 4 tampilan responsif website pada 4 perangkat berbeda, yang ditampilkan dalam sebuah mockup mirip dengan perangkat-perangkat aslinya. Semuanya aktif (live) dan kita bisa langsung mencoba navigasi website pada masing-masing screen.Setelah masuk ke situs Am I Responsif, akan ada sample yang bisa anda lihat di bagian atas. Untuk melakukan tes, scroll ke bawah dan masukkan url website yang ingin diuji responsivitasnya. Anda juga bisa menggunakan bookmarklet (untuk dibookmark pada browser) dan digunakan untuk project lain. Cukup efisien jika anda ingin mengecek responsif atau tidaknya website dengan cepat.
Go to site >>
COMMENTS