3 Perancangan Website Menggunakan Responsive Web Design. Syachbana dan Zulkarnain Akib

Transkripsi

1 3 Perancangan Website Menggunakan Responsive Web Design Syachbana dan Zulkarnain Akib

2 PERANCANGAN WEBSITE MENGGUNAKAN RESPONSIVE WEB DESIGN Syachbana dan Zulkarnain Akib Abstrak Akses halaman web menggunakan perangkat bergerak seperti tablet dan smartphone akan berbeda secara tampilan atau desainnya dibandingkan saat diakses menggunakan dekstop komputer ataupun notebook, hal ini dikarenakan secara ukuran resolusi perangkat bergerak seperti tablet dan smartphone memiliki resolusi ukuran yang berbeda dengan dekstop komputer maupun notebook. Ketidak nyamanan yang dirasakan pengguna pada saat mengkases halaman web di perangkat bergerak atau mobile device inilah yang mendorong lahirnya sebuah konsep Responsive Web Design.Responsive Web Designsendiri adalah sebuah teknik yang digunakan untuk membuat layout web menyesuaikan dengan tampilan device atau perangkat yang digunakan pengunjung web baik ukuran maupun orientasi tampilan secara tegak atau portrait dan tampilan secara mendatar atau landscape. Kata Kunci : Website, Responsive Web Design, perangkat bergerak 1. PENDAHULUAN 1.1. Latar Belakang Internet sebagai salah satu media informasi yang efektif dan efisien dalam penyampaian informasi yang bisa diakses setiap orang kapan saja dan dimana saja saat ini telah menjadi salah satu kebutuhan masyarakat dalam memperoleh informasi, hal ini didukung oleh perkembangan mobile device atau perangkat bergerak seperti, tablet dan smartphone yang semakin memudahkan banyak orang untuk melakukan aktivitas berbasis web seperti registrasi via web, pemesanan tiket atau barang via web dan kegiatan lainnya yang di sediakan melalui sebuah web. Akses halaman web menggunakan perangkat bergerak seperti tablet dan smartphone akan berbeda secara tampilan atau desainnya dibandingkan saat diakses menggunakan dekstop komputer ataupun notebook, hal ini dikarenakan secara ukuran resolusi perangkat bergerak seperti tablet dan smartphone memiliki resolusi ukuran yang berbeda dengan dekstop komputer maupun notebook, sehingga dari sisi kenyamanan bagi pengguna pada saat mengakses sebuah halaman web pengguna harus melakukan resize atau menggatur kesesuaian tampilan web tersebut dengan perangkat bergerak yang digunakan saat itu agar mendapatkan tampilan yang paling maksimal bagi pengguna. Ketidak nyamanan yang dirasakan pengguna pada saat mengkases halaman web di perangkat bergerak atau mobile device inilah yang mendorong lahirnya sebuah konsep Responsive Web Design,Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout web menyesuaikan dengan tampilan device atau perangkat yang digunakan pengunjung web baik ukuran maupun orientasi, sehingga tampilan yang berada di dekstop komputer dengan tampilan di perangkat bergerak atau mobile device akan tetap sama nyamannya dengan tampilan halaman web tersebut saat ditampilkan di dekstop komputer Indentifikasi Masalah Adapun identifikasi masalah dari uraian latar belakang diatas adalah sebagai berikut : 1. User atau pengunjung web kurang nyaman pada saat pengaksesan halaman web 22 JURNAL SIGMATA LPPM AMIK SIGMA

3 dikarenakan perbedaan resolusi perangkat yang digunakan. 2. Bagi pengembang web atau develover harus membuat 2 (dua) versi desain atau lebih yang berbeda, yaitu untuk versi dekstop komputer dan mobile device Tujuan Penelitian Merancang sebuah website yang menyesuaikan tampilannya dengan tampilan device atau perangkat yang digunakan pengunjung web baik ukuran maupun orientasi, sehingga tampilan yang berada di dekstop komputer dengan tampilan di perangkat bergerak atau mobile device tetap memberikan kenyamanan user yang mengakses webite tersebut. menggunakan responsive design, perancang dimungkinkan untuk dapat menerapkan solusi bagi berbagai resolusi layar, density, dan rasio aspek pada banyak jenis perangkat. Responsive design memiliki kemampuan untuk mengelola aset media dengan efektif. Hal ini memberikannya keunggulan untuk dapat diterapkan ke dalam perancangan situs web sehingga situs dapat diakses melalui smartphone, tablet, desktop, ataupun smart TV tanpa memperlihatkan perbedaan yang terlalu besar dalam hal penggunaan Manfaat Penelitian Menghasilkan sebuah website yang bersifat Responsive atau menyesuaikan secara otomatis atau melakukanresize dengan ukuran tampilan perangkat yang digunakan pengunjung web. 2. LANDASAN TEORI 2.1. Web Web merupakan kumpulan dokumen dokumen yang tersebar di mesin mesin di internet. Dokumen ini biasa disebut page (halaman HTML). Tiap page mengandung link ke page yang lain di mesin yang lain di internet. Halaman web yang melakukan point ke halaman yang lain ini dinamakan menggunakan Hypertext. String yang melakukan link ke halaman yang lain disebut dengan Hyperlink (Tabratas Tharom, Marta Dinata dan Xerandy, dalam Bertha, 2001:64) Responsive Web Design Berdasarkan artikel UIE yang berjudul Device Experience & Responsive Design, responsive design merupakan salah satu teknik yang dapat membuat proses perancangan aplikasi dan situs web untuk berbagai jenis perangkat menjadi lebih mudah. Hal ini dikarenakan bahwa dengan Gambar 1. Beberapa ukuran layar yang ada Dengan menggunakan konfigurasi responsive design, sebuah situs web mampu memberikan respon secara otomatis terhadap ukuran layar, sehingga situs dapat beradaptasi dengan optimal dalam perangkat apapun yang digunakan pengguna untuk mengaksesnya (Jurnal Service Innovation Through Touch-Points: Development of an innovation toolkit for the first stages of new service development, Clatworthy, 2011). Kemampuan adaptasi tersebut jelas merupakan poin penting dalam proses perancangan situs. Sebab, untuk dapat menciptakan sebuah desain situs yang baik, maka proses perancangan perlu berfokus pada penyediaan layanan dan mobilisasi yang baik bagi pengguna (Jurnal Designing for Services (Mager dan Sung, 2011). JURNAL SIGMATA LPPM AMIK SIGMA 23

4 3. PERANCANGAN WEB Perancangan sebuah website umumnya di rancang menggunakan HTML atau HyperText Markup Languagedan CSS atau Cascade Style Sheet, HTML digunakan sebagai struktur pembentukan website dan CSS digunakan untuk pendesainan layout web dan memperindah tata letak dari suatu halaman web. HTML merupakan sebuah bahasa standar yang digunakan secara luas untuk menampilkan halaman web.berkas-berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan ke dalam format ASCII normal sehingga menjadi homepageyang dibuat dengan perintah-perintah HTML. HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Perkembangan HTML saat ini telah mencapai HTML 5, dimana HTML 5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web. Kelebihan HTML 5 dibandingkan dengan HTML versi sebelumnya adalah sebagai berikut, (Arifin,2012) ; 1. HTML5 Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML. 2. Pada versi sebelumnya, untuk bisa memberikan interaksi "menggambar" di halaman web, kita harus memakai applet Java atau Flash. HTML 5 akan memberikan satu opsi tambahan berupa canvas, media yang bisa dicorat-coret langsung, tidak lagi perlu memuat plug-in khusus, berupa Element canvas, sebagai mode untuk menggambar objek dua dimensi (2D). 3. Embed Audio Video secara langsung. 4. Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya. 5. Integrasi ( inline ) MathML dan SVG dengan doctype yang lebih sederhana. 6. Koding yang lebih efisien. 7. Dapat dimengerti oleh browser lawas (backwards compatible). Sehingga istilah deprecated tidak akan diperlukan lagi. Beberapa struktur elemen baru yang hadir di HTML5 ; 1. Header : mengandung informasi awal dari sebuah seksi atau halaman, bisa mengacu pada dokumen hingga seluruh isi konten. 2. Nav : digunakan untuk menampung link menuju halaman lain, atau menuju bagian lain di halaman yang sama. 3. Section : mewakili bagian dari halaman atau aplikasi, mirip dengan 'div'. 4. Article : mewakili bagian tertentu dari dokumen yang bisa berdiri sendiri. 5. Aside : mewakili konten yang berhubungan dengan area utama dari dokumen, biasanya dimiliki oleh sidebar yang berisi "related post", "tag clouds", dll. 6. Footer : digunakan sebagai tanda, tidak hanya pada halaman, tapi semua bagian yang ada, biasanya digunakan lebih dari satu kali. CSS yang memiliki kepanjangan Cascade Style Sheet ini digunakan desainer web untuk mengatur style elemen yang ada dalam halaman web mereka, mulai dari memformat text, sampai pada memformat layout, CSS merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. ; Beberapa kelebihan yang ada pada CSS3 1. CSS3 bisa lebih detail untuk mendeklarasikan objek yang akan 24 JURNAL SIGMATA LPPM AMIK SIGMA

5 diberikan style. Contohnya di dalam objek blockquote bisa membuat (quote) di awal dan akhirnya menggunakan font lebih besar dari konten blockquote itu sendiri. 2. CSS3 kaya akan fitur untuk animasi dan efek untuk teks atau objek, yang sebelumnya tidak bisa dilakukan oleh CSS 2/CSS 2.1, dan bisa menggantikan peran gambar. Standar web 2.0 atau situs interaktif dan efisien berdasar dari penggunaan CSS. Gambar 2. Tampilan Antar Muka Website Menggunakan Responsive Web Design dengan ukuran layar Komputer Dektop 3. Dengan CSS3 situs akan bisa lebih berkembang dan bisa lebih interaktif lagi dengan pengunjung. 4. Bisa mengurangi ukuran file yang di-load dan lebih ringan, secara otomatis mengurangi bandwidth inbound/outbound situs. Dalam penelitan ini akan akan dirancang desain sebuah website yang akan menggunakan Responsive Web Design, dalam perancanganya maka akan digunakan HTML 5 sebagai struktur pembentukan website dan CSS3 digunakan dalam pendesainan layout web tersebut yang terdiri atas ; Gambar 3.Tampilan Antar Muka Website Menggunakan Responsive Web Design dengan ukuran tablet HTML 5 HTML 5 menawarkan kelebihan yang luar biasa dibandingkan generasi sebelumnya yakni HTML 4 dan element yang digunakan pada HTML 5 lebih memiliki arti atau gampang kita pahami saat kita membaca atau menuliskannya. Berikut ini contoh tampilan website yang menggunakan Reponsive Web Design berdasarkan ukuran device yang digunakan untuk mengakses website tersebut ; Gambar 4.Tampilan Antar Muka Website Menggunakan Responsive Web Design dengan ukuran Smartphone. JURNAL SIGMATA LPPM AMIK SIGMA 25

6 Desain responsif ini memungkinkan pengembang web untuk : 1. Dinamis melakukan pergeseran di mana elemen ditempatkan pada halaman. 2. Skala gambar untuk resolusi yang berbeda. 3. Mengekspos atau menyembunyikan elemen tertentu pada breakpoints resolusi yang berbeda CSS 3 CSS 3 merupakan penyederhanaan untuk memberikan porsi yang berbeda dari CSS sebelumnya berdasarkan karakteristik perangkat pengunan atau device yang di gunakan. CSS 3 digunakan untuk membangun resposif atau adaptif desain dari sebuah website, yang tidak tergantung kepada style atau aturan gaya pada sebuah browser tetapi didasarkan porsi aturan ukuran viewport atau layar kerja sebuah perangkat atau device. Elemen CSS 3 pada Responsive Web Design antara lain ; 1. Media Queries adalah salah satu fasilitas yg dimiliki oleh CSS3 (Cascading Style Sheet), dimana halaman web bisa menggunakan CSS style yang berbeda sesuai dengan karakteristik dari perangkat atau device yang digunakan user, dan pada umumnya media queries mendeteksi ukuran jendela browser. 2. Fluid Grid, atau grid yang fleksibel, konsep ini mengacu pada penggunaan ukuran relatif dengan basis persentase atau ems dibandingkan jenis ukuran absolut seperti pixel atau point. 3. Flexible Image, penggunaan ukuran persen dari 0 sampai 100 untuk image yang ditampilkan di web responsif, selain itu juga tehnik ini berguna untuk mencegah image tampil melebihi elemen containernya. Berikut ini format dasar penulisannya only screen and (min-width : 150px) and (max-width : 780px) {.body { clear: both; margin: 0 auto; width: 90%; font-size: 90%; } Min-width :150px digunakan untuk menampilkan ukuran minimum dari sebuah website dan max-width : 780px digunakan untuk menampilkan ukuran maksimun dari sebuah website. Penggunaan nilai % dalam pengaturan di website bermanfaat untuk menyesuaikan secara otomatis ukuran device yang digunakan. 4. PENUTUP 4.1. Kesimpulan 1. Web yang didesain menggunakan Responsive Web Design dapat beradaptasi dengan optimal dalam perangkat apapun yang digunakan untuk mengaksesnya, berupa respon secara otomatis atau penyesuaian ukuran web terhadap ukuran layar perangkat yang digunakan sehingga memberikan kenyamanan pengguna pada saat mengakses web tersebut. 2. Keuntungan penggunaan Responsive Web Design bagi pengembang adalah pengembang dapat mengurangi jumlah desain yang harus dibuat pengembang yaitu menjadi satu halaman desain saja untuk dipakai di semua devices atau perangkat. 3. Tidak semua jenis website yang dirancang akan sesuai menggunakan Responsive Web Design, karena jika website yang dibuat mengutamakan tampilan gambar sebagai desain utama website tersebut maka resource atau sumber daya yang digunakan oleh mobile device akan sama dengan yang digunakan oleh komputer desktop sehingga dapat berpengaruh terhadap kecepatan akses ke halaman website tersebut. 26 JURNAL SIGMATA LPPM AMIK SIGMA

7 5. DAFTAR PUSTAKA Arifin,Tiffany, http: //tiffarifin.blogspot.com /2012/10/ html-vs-html5.html, diakses 25 juli 2013, WIB. Bertha Sidik, Ir Pemprograman Web dengan PHP, Bandung, Informatika. Clatworthy, Simon (2011). Service innovation through touch-points: Development of an innovation toolkit for the first stages of new service development. International Journal of Design, 5(2), ] Crist, Matt, Francesconi, Alec, Paradise, Andrew, and White George., Responsive Design Guide: A Human Response to Modern Technology. Retrieved November 14, 2012 from gnguidefnll pdf Marcotte, Ethan., Responsive Web Design. 2010, Mager, B., & Sung, T. J., Special issue editorial: Designing for services., (2011)., International Journal of Design, 5(2), 1-3. Sherly, Winson,dkk.,pengembangan aplikasi sahabat krl berbasis spasial dengan teknologi responsive web design. Wroblewski, Luke., Device Experience & Responsive Design. Retrieved 22, 2012 from ences/. JURNAL SIGMATA LPPM AMIK SIGMA 27

8 28 JURNAL SIGMATA LPPM AMIK SIGMA Volume 2 : Nomor : 1 Edisi : Oktober 2013 Maret 2014 ISSN