Peralatan Desain Web Responsif

Sumber : http://modification-blog.blogspot.com/2012/04/peralatan-desain-web-responsif.html

Sekarang kita sudah memahami tentang Unsur Dasar Desain Web Responsif, dengan harapan memahami konsep dasar yang harus dilakukan ketika akan memulai belajar lebih jauh mengenai desain web yang responsif. Berkembangnya perangkat keras untuk mengakses situs membuat para desainer harus mencari solusi terbaik agar halaman-halaman situs mampu dinikmati oleh para pengunjung tanpa kendala yang berarti. Joshua Johnson mengatakan bahwa "Apple mendorong industri teknologi maju dengan meningkatkan pixel density (kepadatan pixel) pada layar iPhone dan iPad. Hal ini bagus dari sudut pandang pengguna, tetapi sebagai web designer atau web developer secara harfiah hal ini merupakan ancaman dan pemaksaan agar mengubah cara Anda membangun website." Pernyataan Joshua tersebut menggambarkan bahwa para web desainer cukup kerepotan dalam menciptakan website yang mampu beradaptasi dengan perangkat keras yang ada dipasaran. Namun ternyata hal tersebut bukanlah rintangan berarti, ini justru membuat para web desainer menjadi lebih kreatif lagi menciptakan peralatan (tools) untuk membangun desain web yang lebih mudah dan lebih responsif.

Untuk memudahkah pemahaman tentang peralatan yang akan digunakan, maka dibawah ini peralatan desain web akan disederhanakan dengan pengkategorian yang lebih sempit. Selain itu daftar peralatan desain web responsif yang akan dibahas, baru sebatas peralatan yang populer digunakan. Dibawah ini daftar peralatan yang kemudian dikategorikan menjadi:

Responsif Tipografi (Responsive Typography)

Ini merupakan bagian yang harus diperhatikan untuk mendesain web yang responsif. Responsif Tipografi adalah cara untuk mengatur penampilan huruf, dari mulai warna, posisi, ukuran, dan hal-hal lain yang berhubungan dengan huruf agar bisa menyesuaikan dengan lebar layar secara otomatis.

1. Lettering.js

Plugin jQuery ini sangat populer di kalangan web desainer karena kemudahan dalam penggunaan dan fungsi yang beragam. Lettering.js seakan menjadi plugin wajib bagi siapa saja yang berencana membuat desain web responsif karena kemampuannya yang komplek dalam mengatur posisi huruf. Beberapa kemampuan Lettering.js diantaranya; mengatur spasi antar huruf (kerning), mengatur spasi dan ukuran huruf yang komplek, kemudahan pengelolaan kode, dan kompleksitas posisi huruf (down-to-the-letter) sehingga mampu menghasilkan pengalaman membaca yang optimal dalam ruang visual yang beragam. Lettering.js di gunakan karena CSS belum mampu melakukan kompleksitas pengaturan huruf. Seorang Paul Irish saja sampai berkomentar "Hebat. Dunia sangat membutuhkannya - sebuah plugin jQuery yang berbeda dari yang lainnya".

2. FitText.js

Ini Plugin jQuery berikutnya yang juga sangat populer. Jika Lettering.js berhubungan dengan kompleksitas posisi huruf, maka FitText.js berhubungan dengan kemampuan pengaturan ukuran huruf secara otomatis pada berbagai ukuran layar. FitText.js mampu membuat huruf menjadi sangat fleksibel dalam berbagai visualisasi viewport, namun dengan penerapan yang sangat sederhana. FitText.js menciptakan visualisasi huruf yang benar-benar fluid dan responsif. Plugin yang tidak boleh anda lewatkan.

3. Font.js

Plugin jQuery yang satu ini termasuk masih baru sehingga kurang begitu populer. Font.js digunakan untuk memilih bentuk huruf yang akan digunakan pada sebuah situs. Ini salah satu plugin yang mungkin lebih cocok disebut sebagai perpustakaan huruf untuk pemilihan jenis huruf yang dibutuhkan. Font.js dapat digunakan sebagai remote untuk mengambil jenis huruf dari system atau dari URL yang telah ditentukan.

Gambar Fleksibel (Flexible Images)

Christopher Schmitt pada artikelnya "Adaptive Images in Responsive Web Design" menuliskan, gambar yang dikirimkan ke perangkat dan tersajikan pada halaman web harus memperhatikan beberapa faktor berikut:

1. Resolusi Layar
2. Bandwidth
3. Lebar Jendela Browser

Masalahnya adalah cara menentukan gambar yang terbaik untuk dikirimkan ke browser, hal ini membuat faktor menjadi independen satu sama lain. Ketika sebuah halaman situs mengandung elemen gambar maka gambar tersebut harus bisa menyesuaikan dengan lebar browser, jika ukuran file gambar tersebut dipaksakan dengan rasio skala penampilan saja maka ini akan memperlambat pemanggilan halaman. Tentunya juga akan menurunkan kecepatan koneksi internet, sedangkan perangkat jenis mobile phone cenderung memiliki kecepatan koneksi yang lebih lambat dari pada komputer biasa, hal ini menambah beban load halaman yang menjadi semakin lambat. Jika demikian adanya, yang harus kita pikirkan bersama, Apakah anda akan memberikan resolusi rendah demi kemudahan versi mobile? Atau apakah anda membiarkan saja browser memanggilnya dengan versi sebenarnya, tetapi dengan waktu download yang lebih lama? Terlepas dari permasalah diatas, sampai dengan artikel ini dibuat, para web desainer memberikan jalan keluar dengan metode:

1. Memaksakan gambar dalam ukurannya sebenarnya namun dengan penampilan responsive yang mampu menyesuaikan dengan lebar browser. Cara ini berarti bermain pada skala rasio penampilan gambar sesuai ukuran browser.
2. Dengan teknik DOM, yaitu penyediaan gambar dengan berbagai ukuran untuk berbagai perangkat pada server situs yang kemudian gambar akan ditampilkan sesuai dengan viewport (ukuran browser).

1. Adaptive Images

Plugin yang ditulis dengan bahasa PHP ini akan secara otomatis membuat berbagai ukuran gambar dan cache dan kemudian menampilkannya sesuai dengan ukuran browser. Tidak diperlukan perubahan mark-up. Hal ini dimaksudkan untuk kemudahan pada penggunaan situs dengan desain yang responsif dan untuk digabungkan dengan teknik gambar fluid.

2. imgSizer.js

Sebelum menggunakan imgSizer.js lebih baik anda membaca dulu rincian yang di sampaikan pembuatnya, Ethan Marcotte tentang peran script ini dalam penerapannya pada desain web responsif. Pada dasarnya, script ini dirancang untuk memastikan bahwa gambar mampu di render dengan baik pada Microsoft Windows. Langkah Marcotte ini cukup berhasil untuk me-render gambar agar ukurannya turun secara otomatis sesuai dengan browser yang digunakan.

3. Spacer PNG

Ini adalah cara sederhana untuk menampilkan gambar yang responsive. Menggunakan teknik media query dalam mendeteksi ukuran browser dan mengganti ukuran gambar yang sesuai dengan browser. Gambar yang akan ditampilkan justru diganti dengan blank PNG atau blank GIF transparan yang ukurannya sesuai dengan ukuran gambar yang akan ditampilkan. Sedangkan gambar yang ditampilkan justru dijadikan background dengan penyajian background-size: contain.

Responsif Web Layout (Responsive Web Page Layouts)

Inilah bagian inti yang menjadi pembahasan hangat sekarang ini. Inti dari desain web responsif adalah kemampuan tata letak yang fluid dan fleksibel serta mampu menyesuaikan diri dengan ukuran layar dan fitur dari browser pengguna. Dibawah ini adalah beberapa sumber daya yang terkait dengan tata letak dan populer digunakan dalam mendesain web responsif.

1. Fluid 960 Grid System

Fluid 960 Grid System pada dasarnya adalah pengembangan dari 960 Grid System yang dibuat oleh Nathan Smith. Perubahan besar dilakukan pada kemampuan fluid pada berbagai ukuran layar. Berbeda dengan 960 Grid Sytem yang bersifat tetap (fixed), sedangkan Fluid 960 Grid System bersifat fleksibel terhadap ukuran browser. Grid System ini merupakan yang paling banyak digunakan oleh para web desainer saat ini. Jika anda terbiasa dengan 960 Grid System maka begitu pula penggunaannya pada Fluid 960 Grid System. Mengenai bagaimana cara menggunakan Fluid 960 Grid System, Deny E. Wicahyo memaparkan dengan jelas dalam salah satu artikelnya "Responsive Layout dengan Grid System"

2. Gridless

Jika anda menggunakan Fluid 960 Grid System kemudian merasa bahwa tata letak halaman terlalu sempit maka Gridless adalah solusi untuk mengatasi area yang terlalu sempit. Gridless dibuat lebih ramping dibangdingkan dengan sistem grid yang lainnya dan dibangun dengan dasar desain responsife. Kode Gridless didasarkan pada filosofi yang telah banyak dibahas pada diskusi-diskusi "metode mobile utama (mobile first)" untuk pembuatan website yang mampu digunakan pada berbagai perangkat.

3. Skeleton

Sistem Grid yang satu ini juga sedang hangat-hangatnya dibahas. Silahkan anda eksplorasi pada sistem grid yang satu ini dan temukan kehebatannya dibandingkan sistem grid yang lainnya.

4. Semantic Grid System

Sistem Grid yang satu ini menitik beratkan pada semantic dan terintegrasi dengan beberapa bahasa pemrograman CSS seperti LESS, SCSS atau Stylus. Mereka mengklaim dirinya mampu memberiksa cita rasa baru pada saat mendesain web responsif.

Pengujian Web Layout (Testing and Cross-Browser)

Setelah anda memahami dan mampu membuat desain web responsive maka waktunya untuk memeriksa, apakah desain yang sudah anda buat benar-benar dapat bekerja pada berbagai ukuran browser dan perangkat, atau justru gagal. Silahkan gunakan beberapa peralatan tester dan cross-browser dibawah ini untuk meyakinkan diri bahwa kita telah berhasil membuat desain web yang responsif.

1. Matt Kersley Responsive Tester
2. Web Developer
3. iPadPeek
4. iPhone Web Simulator
5. Opera Mini Simulator
6. Adobe Device Central CS5.5

Kesimpulan

Akhirnya, tidak setiap proyek desain web harus melibatkan semua peralatan dan sumber daya yang telah disebutkan diatas. Namun kembali lagi dengan menganalisa proyek desain web yang sedang anda hadapi. Artikel ini disusun hanya untuk memberikan gambaran dan kemudahan dalam mencapai tujuan desain web yang responsif dan sesuai dengan apa yang diinginkan. Dalam prakteknya, kadang kita membutuhkan fitur lain untuk mempercantik dan memperbaiki tampilan akhir dari desain web yang sedang kita buat dan yang sesuai dengan keinginan orang yang membutuhkan desain kita. Semua ini kembali pada kemampuan anda dalam memahami resource yang tersedia, imajinasi dalam membuat desain, dan ide yang merupakan dasar dari rancang bangun desain web yang responsif. Selamat bekerja...