Technology

10 Tools untuk Membangun Website yang Responsif

 

Responsif artinya website anda bisa dibuka melalui sebanyak mungkin device yang berbeda jenisnya. Mulai dari PC dengan resolusi yang berbeda-beda, hingga Smartphone dengan dimensi yang berbeda-beda pula. Membuat website yang responsif kadang jadi momok bagi developer. Karena kini sudah terlalu banyak varian device yang beredar di masyarakat. Namun, ada sejumlah alat yang dapat membantu tugas anda.

Lettering.js

1-letteringjs

Lettering.js adalah plugin jQuery yang memberikan desainer anda mendapat kendali terhadap tipografi anda. Kontrol ini merupakan solusi yang efektif untuk mendapatkan tampilan tipografi yang kreatif tanpa beralih ke penggunaan gambar. Lettering.js dapat memberikan kontrol yang dari segi karakteristik tipografi seperti spasi, leading dan kerning untuk menghasilkan pengalaman membaca yang optimal pada berbagai ruang visual. Dokumentasi fitur ini dapat anda baca di sini: http://letteringjs.com/

FitText

2-fittext

FitText adalah plugin jQuery lain yang dapat membantu anda dari segi tipografi. FitText akan membuat headline anda lebih responsif. FitText bekerja dengan memastikan teks anda tampil secara optimal pada berbagai perangkat. Plugin ini mungkin sederhana, namun fleksibilitasnya cukup menarik untuk diimplementasikan. Dokumentasi fitur ini dapat anda baca di sini: http://fittextjs.com/

imgSizer.js

imgSizer.js (http://goo.gl/T3rJt) adalah script yang dirancang untuk memastikan gambar Anda tampil secara bersih di Windows. Script ini cukup efektif untuk menjaga agar gambar tetap fleksibel meskipun posisinya telah diturunkan secara otomatis oleh browser yang dimensinya lebih kecil.

Fluid 960 Grid System

4-fluid-grid

Jika Anda telah menggunakan 960 Grid System sebelumnya, maka fitur ini adalah versi adaptasinya. inti dari setiap desain yang responsif adalah tata letak yang mengalir, fleksibel, dan mampu menyesuaikan diri dengan ukuran layar dan browser. Dokumentasi fitur ini dapat anda baca di sini: http://designinfluences.com/fluid960gs/

Gridless

5-gridless

Jika menurut anda sistem grid terlalu membatasi ruang gerak anda dalam layouting halaman web, maka gunakan Gridless. Gridless didesain untuk lebih ramping dibanding sistem grid lain. Pembuatan kode Gridless didasarkan pada metode yang memprioritaskan versi mobile dulu, baru kemudian browser yang menyesuaikan. Dokumentasi fitur ini bisa anda dapatkan di sini: http://thatcoolguy.github.io/gridless-boilerplate/

PXtoEM

6-pxtoem

Seringkali seorang desainer kesulitan ketika mengkonversi satuan-satuan seperti px dan pt ke dalam unit-unit pengukuran relatif seperti em dan persen (%). PXtoEM adalah alat yang dapat membantu desainer untuk memberitahu ukuran font yang benar-benar diperlukan. Dokumentasi fitur ini bisa anda dapatkan di sini: http://pxtoem.com/

Adobe Device Central

7-adobe-device-central

Fungsi ini sudah terdapat pada paket Adobe Creative Suite versi 5 ke atas. Dengan Device Central, anda bisa menguji kode HTML dari website pada simulasi perangkat mobile di desktop anda. Untuk memulai simulasi, buka Adobe Device Central, pilih Device Profile > Browse Device > Add To Test Device. Kemudian pilih website anda pada menu File > Open (untuk localhost) atau File > Open URL (untuk remote testing). Meski berbayar, namun desainer / developer profesional pastinya membutuhkan paket lengkap dari Adobe CS.

W3C Mobile Checker

8-w3c-mobile-checker

Anda cukup memasukkan URL versi mobile dari website anda pada halaman berikut: http://validator.w3.org/mobile/. Kemudian alat bantu pengujian akan menjawab apakah website anda sudah mobile friendly. Jika belum, anda akan diberikan saran-saran mengenai apa saja yang harus diperbaiki agar website anda bisa lebih mobile friendly.

Respond.js

Salah satu kelemahan menggunakan media query adalah mereka termasuk bagian dari spesifikasi CSS3. Karena itu fitur ini absen di browser lama seperti di Internet Explorer 8 ke bawah. Tampaknya tidak begitu penting. Tapi satu hal yang perlu diperhatikan adalah desain responsif bukan hanya tentang perangkat mobile. Namun juga optimal untuk semua jenis situasi browser. Untungnya, ada Respond.js. Script ini ringan, open source, dan memberi kita lebih banyak pilihan untuk mengeksekusi media query di IE 6, 7 dan 8. Ukurannya juga kecil, hanya 1KB. Apalagi ketika disajikan dengan gzip, tidak akan mengganggu  kecepatan loading anda. Dokumentasi fitur ini bisa anda dapatkan di sini: https://github.com/scottjehl/Respond.

Modernizr

10-modernizr

Modernizr di sini untuk membawa keunggulan-keunggulan HTML5 dan CSS3, bahkan di browser lama. Meskipun tidak seringan Respond.js. Modernizr juga memiliki kemampuan untuk membuat desain lebih responsif. Beberapa fitur pendukung juga telah ditambahkan, misalnya spesifikasi W3C dari model Flexbox yang memungkinkan layout halaman web jadi lebih solid. Dokumentasi fitur ini bisa anda dapatkan di sini: http://modernizr.com/


Berikan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *