Perancangan Website Menggunakan Responsive

3
Perancangan Website Menggunakan
Responsive Web Design
Syachbana dan Zulkarnain Akib
Volume 2 : Nomor : 1 Edisi : Oktober 2013 – Maret 2014
ISSN 2303-5786
PERANCANGAN WEBSITE MENGGUNAKAN RESPONSIVE WEB DESIGN
Syachbana dan Zulkarnain Akib
[email protected]
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
22
JURNAL SIGMATA | LPPM AMIK SIGMA
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.
1.2. 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
Volume 2 : Nomor : 1 Edisi : Oktober 2013 – Maret 2014
dikarenakan
perbedaan
perangkat yang digunakan.
resolusi
2. Bagi pengembang web atau develover
harus membuat 2 (dua) versi desain atau
lebih yang berbeda, yaitu untuk versi
dekstop komputer dan mobile device.
1.3. 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.
ISSN 2303-5786
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.
1.4. 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).
2.2. 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
Volume 2 : Nomor : 1 Edisi : Oktober 2013 – Maret 2014
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) ;
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.
1. HTML5 Dapat ditulis dalam sintaks HTML
(dengan tipe media text/html) dan XML.
6. Footer : digunakan sebagai tanda, tidak
hanya pada halaman, tapi semua bagian
yang ada, biasanya digunakan lebih dari
satu kali.
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).
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.
3. Embed Audio Video secara langsung.
;
Beberapa kelebihan yang ada pada CSS3
1.
24
ISSN 2303-5786
JURNAL SIGMATA | LPPM AMIK SIGMA
CSS3
bisa
mendeklarasikan
lebih
detail
objek yang
untuk
akan
Volume 2 : Nomor : 1 Edisi : Oktober 2013 – Maret 2014
ISSN 2303-5786
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.
3.1. 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
Volume 2 : Nomor : 1 Edisi : Oktober 2013 – Maret 2014
Desain responsif ini
pengembang web untuk :
memungkinkan
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.
3.2. 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 ;
@media only screen and (min-width :
150px) and (max-width : 780px)
{
26
JURNAL SIGMATA | LPPM AMIK SIGMA
ISSN 2303-5786
.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.
Volume 2 : Nomor : 1 Edisi : Oktober 2013 – Maret 2014
5. DAFTAR PUSTAKA
Arifin,Tiffany,
http: //tiffarifin.blogspot.com
/2012/10/ html-vs-html5.html, diakses 25
juli 2013, 08.48 WIB.
Bertha Sidik, Ir. 2001. 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), 15-28.]
Crist, Matt, Francesconi, Alec, Paradise,
Andrew, and White George., Responsive
Design Guide: A Human Response to
Modern Technology. Retrieved November
ISSN 2303-5786
14, 2012 from http://cantina.co/wpcontent/uploads/2012/01/ResponsiveDesi
gnGuideFnll0110121.pdf
Marcotte, Ethan., Responsive Web Design.
2010,www.alistapart.com/articles.
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
http://www.uie.com/articles/device_experi
ences/.
JURNAL SIGMATA | LPPM AMIK SIGMA
27
Volume 2 : Nomor : 1 Edisi : Oktober 2013 – Maret 2014
28
JURNAL SIGMATA | LPPM AMIK SIGMA
ISSN 2303-5786