Peralatan Desain Web Responsif

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...

Jika Anda mengetahui perlengkapan atau resource yang dapat membantu dalam membangun desain web responsif, silahkan berbagi dengan kami pada komentar!

Read more

Unsur Dasar Desain Web Responsif

Para desainer web dunia sedang hangat membahas tentang desain web responsif. Pada tingkatan tertentu, popularitas konsep desain web yang responsif menjadi agenda utama, hal ini karena semakin banyaknya pengguna di tambah beragamnya perangkat keras akses internet yang digunakan pengguna untuk mengakses halaman web. iPad, iPhone, perangkat mobile Android, desktop, netbook dan lain-lain. Ini memaksa kita masuk ke dalam sebuah masa di mana desain web harus berfungsi dalam banyak cara dan banyak perangkat. Mari kita sama-sama telusuri pengertian dan prinsip di balik desain web responsif.

Fitur Inti Desain Web Responsif

Agar desain web kita dianggap "responsif," maka perlu untuk memahami tiga fitur kunci dalam merancang web responsif. Desainer dan pengembang web, Ethan Marcotte menuliskan bahwa konsep desain web responsif memiliki tiga fitur kunci, yaitu:

1. Situs yang akan dibangun harus memiliki kerangka dasar fleksibel (flexible grid).
2. Gambar yang dimasukkan ke dalam desain harus mampu fleksibel sendiri.
3. Pandangan yang berbeda (different view) harus diaktifkan pada konteks yang berbeda melalui media query.

Tiga kunci dasar desain web responsif diatas harus diperhatikan dengan seksama agar hasil akhir web benar-benar responsif. Jika kemudian kita mendesain web tanpa tiga kunci dasar tadi maka hasil akhir web bukanlah web responsif. Berarti desain cacat...

Grid Fleksibel

Istilah grid ini berkaitan dengan desain web yang cukup tumit. Mengharuskan situs web yang anda desain menggunakan grid fleksibel bukan berarti bahwa itu membatasi anda untuk memilih berbagai bentuk dan ukuran dalam penyesuaian dengan sistem jaringan yang kompleks di luar sana. Namun sebaliknya grid fleksibel membantu kita untuk mendesain web yang lebih mudah dan fleksibel dengan berbagai pandangan.

Mendefinisikan parameter sendiri untuk kolom (column), jarak (spacing) dan kontainer (container) merupakan solusi terbaik untuk desain web yang akan menghasilkan halaman web fleksibel dan mampu menyesuaikan dengan sistem di luar sana. Bahkan, sistem grid yang ada sebagian besar, terbatas hanya menggunakan CSS class untuk menentukan ukuran (size), ruang (space) dan keselarasan (alignment). Ketika anda mencoba untuk menempatkan objek di batas-batas ini ke dalam desain web responsif yang anda buat, itu justru akan membuat proses menjadi lebih rumit dan akan memakan banyak waktu dibandingkan dengan koding grid buatan anda sendiri.

Apakah anda menggunakan sistem grid premade (bahan mentah sebagai acuan) atau membuat kustom grid sendiri, hal ini merupakan aspek penting dari sebuah sistem grid fleksibel dalam menyusun mekanisme ukuran, tata letak dan jarak. Bagi seorang desainer web, ini berarti meninggalkan satuan ukuran pixel yang telah lama menemani hari-hari kita dalam mendesain web dan menggantinya dengan layout web yang menggunakan satuan ukuran presentase dan em, yang merupakan satuan unit ukuran relatif.

Namun, hal ini bukan berarti kita meninggalkan satuan pixel dalam pembuatan layout web dengan perangkat lunak editing gambar (misal; Photoshop, Fireworks dan lain-lain). Sebaliknya, ini merupakan tantangan kepada para desainer web untuk kembali belajar dasar-dasar perhitungan matematika. Perhitungan matematika merupakan bagian dari proses desain web responsif yang digunakan sebagai proses konversi dari satuan pixel ke dalam layout web dengan menggunakan satuan unit pengukuran relatif (persen dan em).

Gambar Fleksibel

Gambar yang bergerak dan berskala dengan grid fleksibel adalah kunci berikutnya dalam mendesain web responsif. Maksudnya, ukuran gambar dan posisi gambar akan berubah sesuai dengan pandangan browser. Hal ini merupakan kisah klasik yang membuat para desainer web cukup mengerutkan dahi pertanda pusing tingkat kelurahan. Kenapa? Karena gambar yang diload oleh browser adalah gambar dengan ukuran maksimal, ini membuat loading page (pemuatan halaman) cenderung menjadi lebih berat, sedangkan desainer web hanya bisa mengubah ukuran skala gambarnya saja dari atribut HTML width dan height tanpa mampu menurunkan ukuran gambar yang sebenarnya. Perubahan skala gambar mengikuti pandangan dari perangkat browser di tujukan untuk penyesuaian dan memberikan ruang teks artikel pada halaman tersebut. Dan perubahan skala gambar bukanlah cara terbaik untuk mempercepat loading page web responsif. Mungkin inilah saatnya bagi para desainer web untuk mengkaji ulang penggunaan gambar-gambar yang terlalu berlebihan pada desain web-nya.

Sebuah alternatif lain dalam masalah gambar adalah dengan menggunakan CSS. Properti CSS overflow (misal; overflow: hidden) memberikan kemampuan cropping gambar dinamis yang mampu menyesuaikan gambar dengan wadah (frame) ketika terjadi perubahan pandangan. Selain itu ada juga yang menggunakan metode penyediaan berbagai ukuran gambar pada servernya, sehingga mampu melayani berbagai ukuran gambar yang tepat sesuai dengan permintaan dari agen perangkat browser dengan memanfaatkan fitur deteksi side-server atau side-client seiring dengan berkembangnya metode DOM.

Dan cara terakhir untuk mengakali beratnya loading page akibat ukuran gambar adalah dengan metode menyembunyikan gambar. Hal ini diterapkan pada halaman situs yang memfokuskan web pada konten non-gambar, menggunakan metode stylesheet media query yang menetapkan property display: none pada gambar. Atau menerapkan sebuah subset pada opsi penggantian gambar dengan menggunakan class seperti optional-img sebagai sebuah cara pemilihan gambar melalui selektor CSS yang spesifik didalam stylesheet. Sederhananya, menggunakan opsi pengganti gambar asli dengan gambar yang lebih kecil melalui CSS.

Media Query

Media Query adalah fitur yang paling menarik untuk di bahas (namun paling menakutkan untuk desainer web yang belum terbiasa) dalam proses desain web responsif. Terkadang, para desainer web terbawa arus dengan berkonsentrasi hanya pada media query, tanpa memikirkan komponen inti dari sebuah desain web responsif, bahkan meninggalkan komponen opsional halaman fleksibel. Hal ini justru membuat media query hampir tak berpengaruh terhadap situs web jika meninggalkan prinsip dasar HTML dan CSS yang meliputi grid fleksibel dan gambar fleksibel. Media Query memungkinkan para desainer untuk membuat beberapa layout menggunakan dokumen HTML yang sama secara selektif melalui stylesheet berdasarkan fitur agen pengguna (user agent), seperti misalnya ukuran jendela browser, orientasi layar (landscape atau portrait), resolusi layar, warna (kemampuan menampilkan sejumlah warna pada layar), dan lain sebagainya.

Berikut adalah contoh media query yang melayani stylesheet tergantung pada lebar viewport (pandangan):

<link rel="stylesheet" media="(max-device-width: 320px)" href="mobile.css" />
<link rel="stylesheet" media="(min-width: 1600px)" href="widescreen.css" />

Media Query tidak dikhususkan untuk memberikan solusi untuk mobile atau solusi untuk tablet (kadang para desainer web pemula berfikir demikian). Sebaliknya, media query dan desain responsif mengajak kita untuk berfikir keluar dari batasan ukuran atau resolusi layar dan mulai membangun website fleksibel yang mampu menyesuaikan diri (secara teoritis) dengan semua media yang beragam.

Apakah Bisa Desain Web Responsif

Seperti telah ditulis diatas mengenai tiga fitur kunci dari desain web responsif, itu hanyalah hal kecil jika dibandingkan dengan semangat anda. Dari 90% desain web responsif yang terbaik adalah dengan memulainya untuk belajar mendesainnya. Well-formed HTML dan tata letak fleksibel harus menjadi bagian penting yang harus diperhatikan dari web desainer modern. Apa yang telah disampaikan oleh Marcotte mengenai aturan desain web responsif hanyalah untuk menunjukan kepada kita cara baru dalam penerapan praktek-praktek mendesain yang terbaik yang harus kita kerjakan. Dalam konteks modern, mengingat bahwa kebutuhan akan layout fleksibel, hal penting yang harus dilakukan sekarang adalah kemampuan dalam mengakomodasi susunan terbaik yang lebih luas sesuai dengan situasi saat ini, kita memerlukan desain yang fleksibel dan fluid. Desain web responsif memaksa kita meluangkan banyak waktu untuk melakukan hal yang benar, bukan hanya bagaimana kita menulis kode, namun bagaimana kita memahami ide-ide baru dan menciptakannya menjadi desain yang segar.

Kami Masih Belum Mengerti

Siapapun yang telah meluangkan banyak waktu dalam mengerjakan konten fleksibel dan merealisasikannya melalui media query maka ia akan menyadari bahwa ini belum mampu memberikan solusi terbaik dalam membangun website yang siap melayani setiap user agent. Pengguna menjelajah web dengan niat berbeda yang terkadang mempunyai keinginan dan kebutuhan yang berbeda-beda, tergantung dari perangkat yang digunakan. Seorang pengguna dengan mobile web browser kemungkinan besar akan tertarik untuk mengakses informasi utama secepat mungkin. Misal; untuk restoran, pengguna mungkin hanya ingin menelusuri menu, nomor telephone untuk pemesanan, alamat, dan sebagainya. Dalam kondisi seperti ini, memuat seluruh halaman situs dan kemudian menyembunyikannya sebanyak 90% bagian halaman, jelas bukan solusi ideal.

Arah Yang Baik

Apa yang membuat desain itu harus responsif, kemudian, apakah langkahnya sudah benar. Banyak situs dibuat untuk memperoleh desain responsif yang terbaik, dan setiap desainer tentunya harus mampu menemukan solusi dan mencari cara untuk mengoptimalkan desain mereka. Desainer akan terus membuat kemajuan untuk menemukan solusi dan menemukan desain yang mampu bekerja dengan baik pada berbagai perangkat dan situasi, sehingga mampu menampilkan web dengan cara yang paling ideal dan intuitif. Hal ini karena kedua belah pihak (desainer dan pengguna) mengarahkan ke arah yang terbaik, ini memberi banyak kesempatan untuk membangun web yang lebih dinamis, menarik dan indah.

Dan itu adalah sesuatu yang sangat berharga... Selamat berkarya...

Pranala Luar :
[1] Kumpulan Situs Responsif
[2] 960 Grid System
[3] 978 Grid System
[4] Fluid Baseline Grid System
[5] Tiny Fluid Grid System

Read more