Saat ini masih sering kita temui berbagai website yang menggunakan ukuran lebar halaman yang tetap, misalnya 960 pixel, dengan harapan bahwa semua pengguna yang mengakses website tersebut akan mendapatkan tampilan yang sama dan pengalaman yang sama saat berinteraksi dengan website terkait. Ukuran ini memang tidak terlalu lebar untuk layar laptop dan pengguna dengan layar yang memiliki resolusi besar akan mendapatkan margin yang cukup lebar di kanan kiri website.
Akan tetapi sekarang ada Smartphone. Di indonesia pengguna Smartphone kian meningkat baik itu berbasis android ataupun menggunakan produk Apple yakni iPhone. Seperti beberapa data yang sempat dirillis, pengguna internet di Indonesia yang menggunakan perangkat mobile dalam melakukan browsing di internet telah meningkat tajam. Belum lagi ditunjang semakin meningkatnya pengguna tablet dimana ukuran layarnya lebih besar dari smartphone dan lebih kecil dibandingkan laptop.
Akan tetapi sekarang ada Smartphone. Di indonesia pengguna Smartphone kian meningkat baik itu berbasis android ataupun menggunakan produk Apple yakni iPhone. Seperti beberapa data yang sempat dirillis, pengguna internet di Indonesia yang menggunakan perangkat mobile dalam melakukan browsing di internet telah meningkat tajam. Belum lagi ditunjang semakin meningkatnya pengguna tablet dimana ukuran layarnya lebih besar dari smartphone dan lebih kecil dibandingkan laptop.
sebelum kita bahas lebih lanjut, mari kita lihat gambar dibawah ini yang menjelaskan tentang berbagai ukuran resolusi layar yang digunakan diberbagai perangkat saat ini.
Beberapa ukuran layar yang ada (sumber gambar: http://line25.com)
Pengalaman yang berbeda akan dirasakan para pengguna smartphone saat melakukan akses ke website dimana website tersebut menerapkan fixed width, misalnya 960 pixel. Maka pengguna smartphone akan perlu melakukan zoom in zoom out untuk menampilkan atau membaca tulisan yang ada di website tersebut. Belum lagi seringkali adanya salah pencet link dikarenakan terlalu kecilnya tulisan.
Untunglah sekarang telah ada solusi untuk menangani berbagai ukuran layar yang berbeda tersebut. Responsive Design, adalah salah satu istilah dari sekian istilah tentang konsep tampilan web yang akan menyesuaikan dengan besarnya viewport(luasan area pada browser untuk menampilkan website) yang digunakan oleh pengguna saat mengakses sebuah website. Teknik ini didukung teknologi terbaru yakni HTML5 dan CSS3. Serunya teknik ini dapat diimplementasikan tanpa harus berbasis server atau backend solutions.
Pada gambar di bawah ini dapat kita lihat salah satu website yang menggunakan teknik responsive design dan ditampilkan dalam berbagai ukuran.
contoh tampilan responsive design (sumber gambar: http://www.white-fire.co.uk)
Definisi Responsive Design
Secara sekilas, teknik ini cukup sederhana, apabila anda menguasai HTML dan CSS, maka anda bisa menerapkan teknik Responsive Design. Karena sebenarnya yang dilakukan adalah CSS mengecek ukuran area browser, kemudian akan menerapkan style CSS yang sesuai dengan ukuran tersebut. Jadi tidak memerlukan kode pemrograman yang script based seperti PHP, ASP atau lainnya. Teknik ini murni urusan si UX designer atau front end designer.
Secara sekilas, teknik ini cukup sederhana, apabila anda menguasai HTML dan CSS, maka anda bisa menerapkan teknik Responsive Design. Karena sebenarnya yang dilakukan adalah CSS mengecek ukuran area browser, kemudian akan menerapkan style CSS yang sesuai dengan ukuran tersebut. Jadi tidak memerlukan kode pemrograman yang script based seperti PHP, ASP atau lainnya. Teknik ini murni urusan si UX designer atau front end designer.
Istilah Responsive web design awalnya dicetuskan oleh Ethan Marcotte dalam sebuah artikelnya di ListApart(http://www.alistapart.com/articles/responsive-web-design/). Ia mengulas tiga teknik yang telah ada yakni Flexible grid layout, flexible images, dan media and media queries ke dalam satu pendekatan dan menamakannya Responsive Design. Beberapa istilah yang digunakan untuk mengacu hal yang sama antara lain fluid design, elastic layout, rubber layout, liquid design, adaptive layout, cross-device design, dan flexible design.
Marcotte dan beberapa ahli lainnya berargumen bahwa metodologi responsive yang sebenarnya adalah tidak hanya cukup melakukan perubahan layout sesuai dengan ukuran browser yang mengaksesnya, akan tetapi melakukan perubahan total secara keseluruhan terhadap pendekatan yang kita pakai saat mendesain sebuah web. Daripada memulai desain pada ukuran layar desktop yang fixed atau tetap dan kemudian mengecilkannya dan mengatur isinya guna keperluan ukuran yang lebih kecil, maka sebaiknya desain dilakukan pada ukuran viewport yang terkecil terlebih dahulu dan dilanjutkan pada ukuran viewport yang lebih besar.
Viewport atau ukuran layar
Penting untuk diketahui bahwa viewport dan ukuran layar atau screen size merupakan dua istilah yang berbeda. Viewport merupakan area content pada browser, diluar toolbars, tab, address box atau lainnya pada browser. Lebih sederhananya lagi adalah ukuran atau luasan dimana sebuah website ditampilkan pada browser. Sedangkan screen size mengacu pada ukuran layar secara fisik.
Penting untuk diketahui bahwa viewport dan ukuran layar atau screen size merupakan dua istilah yang berbeda. Viewport merupakan area content pada browser, diluar toolbars, tab, address box atau lainnya pada browser. Lebih sederhananya lagi adalah ukuran atau luasan dimana sebuah website ditampilkan pada browser. Sedangkan screen size mengacu pada ukuran layar secara fisik.
Mengapa harus HTML5 dan CSS3?
HTML5 menawarkan kelebihan yang luar biasa dibandingkan generasi sebelumnya yakni HTML4 dan element yang digunakan pada HTML5 lebih memiliki arti atau gampang kita pahami saat kita membaca atau menuliskannya. CSS3 memiliki salah satu fitur yakni media queries yang merupakan salah satu fitur utama untuk responsive design dan tentunya didukung fitur-fitur lain untuk menghasilkan web yang fleksibel. Beberapa fitur CSS3 yang lain misalnya gradient, shadows, animasi dan transformasi.
HTML5 menawarkan kelebihan yang luar biasa dibandingkan generasi sebelumnya yakni HTML4 dan element yang digunakan pada HTML5 lebih memiliki arti atau gampang kita pahami saat kita membaca atau menuliskannya. CSS3 memiliki salah satu fitur yakni media queries yang merupakan salah satu fitur utama untuk responsive design dan tentunya didukung fitur-fitur lain untuk menghasilkan web yang fleksibel. Beberapa fitur CSS3 yang lain misalnya gradient, shadows, animasi dan transformasi.
Galeri Responsive design
Sebelum kita membahas secara lebih detail tentang responsive design, mari kita lihat beberapa website yang telah menerapkannya. Siapa tahu bisa menjadi inspirasi bagi anda. Anda bisa langsung mencoba mengaksesnya melalui berbagai perangkat yang anda miliki. Akan tetapi apabila anda hanya menggunakan komputer atau laptop, cobalah saat selesai halaman web di load, silahkan secara perlahan lebar browser anda kecilkan. Bisa anda lakukan dengan klik dan drag secara perlahan ke arah kiri pada batas tampilan sebelah kanan browser anda. Anda akan melihat perubahan tampilan pada website-website tersebut.
Sebelum kita membahas secara lebih detail tentang responsive design, mari kita lihat beberapa website yang telah menerapkannya. Siapa tahu bisa menjadi inspirasi bagi anda. Anda bisa langsung mencoba mengaksesnya melalui berbagai perangkat yang anda miliki. Akan tetapi apabila anda hanya menggunakan komputer atau laptop, cobalah saat selesai halaman web di load, silahkan secara perlahan lebar browser anda kecilkan. Bisa anda lakukan dengan klik dan drag secara perlahan ke arah kiri pada batas tampilan sebelah kanan browser anda. Anda akan melihat perubahan tampilan pada website-website tersebut.
Beberapa contoh lainnya dapat dilihat disini http://kangtanto.com/web-2/top-ten-examples-of-website-using-css3-media-queries
Tidak ada komentar:
Posting Komentar