Fadlan Reza FST

r=='"""""'=-"'=~~..,, ~~-.
,~
{"'"""""- .. .
PROTOTYPE WEBRESPONSivE.DE~JbN PADA
i~ ~: ~: ~" "7
UIN SYARIF HIDAYATULLAH JAKARTA MENGGUNAKAN
FRAMEWORK BOOTSTRAP
Skripsi
Sebagai salah satu syarat memperoleh gelar Sarjana Komputer
FADLANREZA
108091000065
PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI
UIN SYARIF HIDAYATULLAH JAKARTA
2014 MI 1435 H
PROTOTYPE WEB RESPONSIVE DESIGN PADA
UIN SYARIF HIDAYATULLAH JAKARTA MENGGUNAKAN
FRAMEWORK BOOTSTRAP
Skripsi
Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer
Oleh:
FADLANREZA
108091000065
PROGRAM STUD! TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI
UIN SYARIF HIDAYATULLAH JAKARTA
2014 M/1435 H
Tgl
LEMBARPENGESAHAN
WEB RESPONSIVE DESIGN UNTUK PERGURUAN TINGGI

MENGGUNAKAN FRAMEWORK BOOTSTRAP
(Studi Kasus : UIN Syarif Hidayatullah Jakarta)
Skripsi
Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer
Fakultas Sains dan Teknologi
UIN SyarifHidayatullah Jakarta
Oleh:
FADLANREZA
NIM : 108091000065
Menyetujui,
Pembimbing I, Pembimbing II,
Viva Arifin MMS Arini, MT

NIP. 19730810 200604 001 NIP. 197601312009012001
Mengetahui,
Ketua Program tudi Teknik Informatika
Nurh ati P . D
1'TTP 1o;;orn1;; 1 00001 ,, oo-,
PERNYATAAN
DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI !NI BENAR-
BENAR HASIL KARYA SENDIRI YANG BELUM PERNAH DIAJUKAN
SEBAGAI SKRIPSI ATAU KARYA ILMIAH PADA PERGURUAN TINGGI
ATAU LEMBAGA MANAPUN.
Jakaita, September 2014
Fadlan Reza
108091000065
Fadhm Reza, Prototype Web Responsive Design Pada VIN Syarif Hidayatullah
Jakarta Menggunakan Framework Bootstrap, dibimbing oleh Viva Arifin, MMSI
dan Arini, MT.
ABSTRAK
Angka akses website VIN Syarif Hidayatullah Jakarta dengan menggunakan

perangkat mobile mencapai 30% dari total kunjungan dan dari 59 jenis resolusi
layar, 42 adalah perangkat mobile selama I Januari - 17 Februari 2014 (Data
Primer PVSTIPANDA, 2014). Secara global angka akses internet menggunakan
perangkat mobile meningkat, menurut Morgan Stanley Research dalam laporan
Global The Mobile Internet Report, 2009, pada 2014 diprediksi akses internet
dengan perangkat mobile akan melampaui akses internet dengan perangkat
mobile. Pada 2012 menurut HIS iSuppli Research angka penjualan perangkat
desktop mengalami penurunan sebesar 1,2 % dibanding tahun 2011, dampak dari
meningkatnya jumlah penjualan perangkat mobile. Hal ini menimbulkan
pertanyaan pada apakah website VIN SyarifHidayatullah Jakarta pada 2014 sudah
siap menghadapai akses dari perangkat mobile yang begitu beragam? Menurut
Ethan Marcotte, semakin banyaknya perangkat yang muncul dengan berbagai
ukuran, maka sebuah situs perlu mengenali ukuran perangkat pengguna (Marcotte,
2011: 8). Responsive web design adalah pendekatan desain webite yang dapat
beradaptasi dengan masalah pada web browser dan perangkat keras yang
menjalankannya untuk menciptakan respon terhadap kebutuhan pengguna
(Marcotte, 2011: 9). Responsive web design terdiri atas 3 komponen yaitu: tata
letak fleksibel berbasis grid, gambar dan media fleksibel, media queries. Pada
penulisan skripsi ini penulis menggunakan metodologi Web Site Design Method
(WSDM) dalam pembuatan website VIN Syarif Hidayatullah Jakarta dengan
tahapan proses pernyataan misi dengan pengumpulan data berupa observasi dan
wawancara, pemodelan pengguna, desain konseptual, desain implementasi, dan
implementasi. Hasil proses pembuatan adalah website VIN Syarif Hidayatullah
Jakarta dengan tampilan baru yang mengadopsi teknologi responsive web design,
sehingga bisa beradaptasi pada setiap ukuran resolusi layar yang berbeda-beda
baik dengan perangkat mobile maupun desktop.
Kata kunci : Website, Responsive Web Design, Resolusi Layar, Mobile,

Web Site Design Method (WSDM).
Daftar Pustaka : 26 (1998 -2013)
Jumlah Halaman : 5 BAB + 116 Halaman + 33 Gambar + 13 Tabel + 6
Lampiran
Faizal, Fariz Yuliono, Hafizhan Irawan, Ilham Tri Saputra, Muchtar Aham,
Muhammad Ardiansyah, Priyangga, Rahmad Hamidi, Rizqon Syauqi, dan
Eko Suganda. Language Theory & Automata Band.
6. Teman-teman Muhammad Fajar, Vina Alfiani, Aji Prastio Wibowo, Indah
Permata Sari, Ninda Firstri Oktidila, dan Adina Siti Maryam Talogo atas
do'a, dukungan, dan semangatnya.
7. Rekan-rekan PUSTIPANDA UIN Syarif Hidayatullah Jakarta atas
kesempatan riset dan data penelitiannya.
8. Teman-teman Teknik Informatika C 2008 (Ticcer) dan Teman Teknik
Informatika Multimedia 2008.
9. Keluarga Besar Dapur Seni atas ilmu dan pengalaman bermusiknya. Teman-
teman band dan lainnya.
I 0. Selumh pihak yang telah membantu meski tak penulis sebutkan khusus.
Terima kasih banyak atas do'a, bantuan, dan dukungannya semoga Allah SWT
membalas dengan segala kebaikan dan keberkahan. Mohon maaf atas segala
kekurangan yang masih terdapat dalam skripsi ini.
Demikian, penulis berharap skripsi ini dapat memberikan manfaat. Untuk
kritik dan saran dapat menghubungi penulis melalui email facHm1@Joutlook.com.
Jakarta, September 2014
Fadlan Reza
DAFTARISI
Halaman
HALAMAN SAMPUL ............................................................................ .
HALAMAN JUDUL ................................................................................ ii
HALAMAN PENGESAHAN .................................................................. iii
HALAMAN PENGESAHAN UJIAN ..................................................... iv
HALAMAN PERNYATAAN .................................................................. v
ABSTRAK ............................................................................................... vi
KATA PENGANTAR .............................................................................. vii
DAFTAR ISI ............................................................................................ ix
DAFTAR GAMBAR .................................................................................. xii
DAFTAR TABEL .................................................................................... xiv
BAB 1 PENDAHULUAN ...................................................................... 1
I. I Latar Belakang ..................................................................... I
1.2 Rumusan Masaiah . .. ...... .. .... ...... ..... ..... .. ...... ... ....... .. ............. 3
I .3 Batasan Masai ah .. .. ....... .. ...... .... .. .. .. ...... .. .... .. ............. .... ..... .. 4
I .4 Tujuan Penelitian .................................................................. 4
1.5 Manfaat Penelitian ................................................................ 5
1.6 Sistematika Penelitian ........................................................... 6
BAB Il LANDASAN TEORI ................................................................. 7
2. I Responsive Web Design ......................................................... 7
2. l. l Tata Letak Fleksibel Berbasis Grid .............................. 7
2. l.2 Gambar dan Media Fleksibel ....................................... 8
2.1.3 Media Queries ............................................................. 9
2.2 Framework Responsive Web Design ...................................... 10
2.2. l Bootstrap ..................................................................... 11
2.2.2 Foundation .................................................................. 11
2.2.3 Skeleton ...................................................................... 12
2.2.4 Perbandingan 3 Framework Responsive Web Design.... 13
2.2.5 Alasan Menggunakan Framework Bootstrap ................ 15
2.3 Desain Web ........................................................................... 15
2.3.1 HyperText Markup Language 5 (HTML5) ................... 15
2.3.2 Cascading Style Sheet 3 (CSS3) .................................. 16
2.4 Usabilitas .............................................................................. 17
2.5 Studi Pustaka ......................................................................... 19
2.6 Web Site Design Method (WSDM)........................................ 19
2. 7 Unified Modeling Language (UML) ...................................... 25
BAB m METODOLOGI PENELITIAN .............................................. 27
3 .1 Metode Pengumpulan Data ..... .. .... ....... .. ... .. ..... .. .. .. .. ... .. ...... 27
3.1.1 Data Primer............................................................... 27
3.1.1.1 Wawancara .................................................... 27
3.1.1.2 Observasi ...................................................... 27
3.1.2 Data Sekunder .......................................................... 28
3.1.2.1 Studi Pustaka ................................................. 28
3.2 Metode Web Site Design Method (WSDM) ........................ 29
3.2.1 Pernyataan Misi ......................................................... 29
3.2.2 Pemodelan Pengguna ................................................ 30
3.2.3 Desain Konseptual ..................................................... 30
3.2.3. l Pemodelan lnfonnasi ..................................... 31
3.2.3.2 Pemodelan Fungsi ......................................... 3I
3.2.3.3 Desain Navigasi ............................................ 31
3.2.4 Desain Implementasi ................................................. 32
3.2.4. I Desain Halaman ............................................ 32
3.2.4.2 Desain Presentasi .......................................... 33
3.2.5 Implementasi ............................................................. 34
3.2.6 Pengujian .................................................................. 34
3.3 Alasan Menggunakan WSDM ............................................. 35
3.4 Kerangka Berfikir ............................................................... 36
BAB IV HASIL DAN PEMBAHASAN ........ 37
4. I Web Site Design Method (WSDM) ...................................... 37
4.1.1 Pemyataan Misi ......................................................... 37
4.1.2 Pemodelan Pengguna ................................................ 45
4.1.2.1 Klasifikasi Pengguna ................................... 45
4.1.2.2 Karakterisasi Pengguna ............................... 54
4.1.3 Desain Konseptual ..................................................... 55
4.1.3.1 Pemodelan Informasi .................................. 55
4.1.3.2 Pemodelan Fungsi ....................................... 56
4.1.3.3 Desain Navigasi .......................................... 61
4.1.4 Desain Implementasi ................................................. 63
4.1.4.1 Desain Halaman .......................................... 63
4.1.4.2 Desain Presentasi ........................................ 75
4.1.5 Implementasi ............................................................. 80
4.3 Pengujian ............................................................................ 83
4.4 Perbandingan Website UIN Syarif Hidayatullah Sebelum dan
Sesudah Menggunakan Teknologi Responsive Web Design......... 86
BAB V PENUfUP .................................................................................. 87
5.1 Kesimpulan ........................................................................... 87
5.2 Saran .... ....... ..... .. .... ...... ...... .. ..... .... ......... ..... ....... ..... ...... ....... . 88
DAFTAR PUSTAKA ............................................................................... 89
LAMPIRAN ............................................................................................. 92
DAFTAR TABEL
Halaman
Tabel 2.1 Perbandingan 3 Framework Responsive Web Design .................. 13
Tabel 4.1 Resolusi Layar Pengguna Website VIN SyarifHidayatullah
Jakarta ....................................................................................................... 38
Tabel 4.2 Browser Pengguna Website UIN SyarifHidayatullah Jakarta ..... 39
Tabel 4.3 Jenis Perangkat Mobile Pengguna Website UIN SyarifHidayatullah
Jakarta ....................................................................................................... 41
Tabel 4.4 Durasi Pengguna Website VIN Syarif Hidayatullah Jakarta......... 43
Tabel 4.5 Pemyataan Misi Website VIN Syarif Hidayatullah Jakarta .......... 45
Tabel 4.6 Deskripsi Use Case Akses Website.............................................. 46
Tabel 4. 7 Deskripsi Use Case Login Administrator..................................... 47
Tabel 4.8 Deskripsi Use Case Manage Berita ............................................. 47
Tabel 4.9 Deskripsi Use Case Manage Artikel............................................ 48
Tabel 4.10 Deskripsi Use Case Manage Kolom Rektor............................... 49
Tabel 4.11 Deskripsi Use Case Manage Halaman Kategori ........................ 49
Tabel 4.12 Pengujian Website..................................................................... 84
BABI
PENDAHULUAN
1.1 Latar Belalumg
Vniversitas Islam Negeri Syarif Hidayatullah Jakarta sebagai lembaga
pendidikan tinggi dengan arah pengembangan menuju universitas kelas dunia
sebagaimana ditulis dalam Buku Pedoman Akademik tahun 2010-2011, VIN
Syarif Hidayatullah Jakarta menjadi jendela keunggulan akademis Islam
Indonesia (window of academic excellence of Islam in Indonesia) dan barometer
perkembangan, pembelajaran, penelitian, dam kerja-kerja sosial yang
diselenggarakan kaum Muslim Indonesia dalam berbagai bidang ilmu (Tim
Penyusun Pedoman Akademik, 2010: 14). Hal ini perlu ditunjang media informasi
yang menerapkan teknologi terbam sebagai jendela awal pencarian informasi
mengenai VIN Syarif Hidayatullah di dunia internet. Website sebagai media
informasi yang penting guna mendukung kelancaran informasi dan komunikasi
antara sivitas akademika dengan seluruh unit yang ada di lingkungan VIN Syarif
Hidayatullah Jakarta (Tim Penyusun Pedoman Akademik, 20 I 0: 23).
Hasil observasi yang dilakukan pada website VIN Syarif Hidayatullah
Jakarta, bahwa pada 1 Januari 2014 sampai 17 Februari 2014 website belum
menerapkan teknologi responsive web design. Data statistik kunjungan
menunjukkan dari 100% kunjungan, 30% sudah mengakses website VIN Syarif
Hidayatullah Jakarta dengan perangkat mobile, dari angka 30% terdiri dari 143
2
jenis perangkat mobile dari total 4 77 jenis perangkat yang digunakan untuk
mengakses (Data Primer PUSTIPANDA Statistik Website VIN Syarif
Hidayatullah Jakarta).
Fenomena bertambahnya jenis perangkat keras dengan beraneka variasi
ukuran resolusi layar serta perilaku pengguna yang cendemng akan lebih banyak
menggunakan internet secara mobile berdampak pada masalah mengenai faktor
usabilitas dari sebuah produk digital dalam penelitian ini pada masalah website.
Semakin banyaknya perangkat yang muncul dengan berbagai ukuran, maka
sebuah situs perlu mengenali ukuran perangkat pengguna (Marcotte, 2011: 8).
Dalam bukunya Responsive Web Design pada 2011, Ethan Macotte
memperkenalkan teknologi Responsive Web Design sebagai solusi untuk
bagaimana membuat sebuah website mampu untuk mengenali ukuran perangkat
pengguna dan membuat website dapat memberikan tampilan yang sesuai dengan
ukuran perangkat pengguna, tanpa mernsak tampilan website tersebut, sehingga
tingkat usabilitas pada jenis-jenis perangkat tetap maksimal. Penulisan skripsi ini
menggunakan framework Bootstrap untuk perancangan tampilan website UIN
Syarif Hidayatullah Jakarta, Bootstrap dikembangkan oleh Twitter. Bootstrap
menjadi framework responsive web design terpopuler dengan menjadi proyek
yang paling banyak dilihat di fornm GitHub sebanyak 33.000 anggota forum.
Dalam penerapannya Bootstrap membagi kategori ukuran resolusi perangkat ke
dalam 4 kategori, yaitu: large devices, medium devices, small devices, dan extra
small devices.
6
1.6 Sistematika Penelitian
Dalam penyusunan tugas akhir ini, penulis menyajikan badasan dalam
lima pokok bahasan, yang secara singkat akan diuraikan sebagai berikut :
BABI PENDAIDJLUAN
Bab ini akan diuraikan tentang latar belakang, perumusan
masalah, batasan masalah, tujuan penelitian, manfaat
penelitian, dan sistematika penulisan.
BABil LANDASAN TEORJ:
Bab ini akan diuraikan mengenai landasan teori yang
digunakan dalam pembahasan penulisan skripsi ini dan
sumber landasan teori tersebut.
BABilI METODOLOGI PENELITIAN
Bab ini berisikan metode dan tahap-tahap yang akan
digunakan dalam penelitian tugas akhir atau skripsi.
BAB IV HASIL DAN PEMBAHASAN
Bab ini akan diuraikan dan membahas proses perancangan
dan pengembangan antarmuka (user inteiface) website
dengan teknologi responsive web design yang meliputi
hasil dari metodologi penelitian yang telah dilakukan.
BABV KESIMPULAN DAN SARAN
Bab ini akan disajikan kesimpulan dan saran-saran yang di
angkat dalam penelitian berdasarkan pembahasan pada bab-
bab sebelumnya.
BABU
LANDASAN TEORI
2.1 Responsive Web Design
Responsive web design adalah pendekatan desain web yang dapat
beradaptasi dengan masalah pada web browser dan perangkat keras yang
menjalankannya untuk menciptakan respon terhadap kebutuhan pengguna
(Marcotte, 2011: 9). Google perusahaan yang bergerak di bidang teknologi dan
mesin pencarian infonnasi di internet dalam portal Google Developer mengenai
"Building Mobile-Optimized Websites" merekomendasikan langsung responsive
web design bagi pengembang website untuk dapat melayani kebutuhan para
pengguna agar optimal pada setiap jenis perangkat dekstop maupun mobile.
Responsive web design memiliki satu aspek dimana hanya diperlukan satu website
untuk berbagai perangkat dan tetap memberikan user-experience yang baik. Ada 3
elemen utama dalam teknologi responsive web design, yaitu:
a. Tata Letak Fleksibel Berbasis Grid
b. Gambar dan Media Fleksibel
c. Media Queries
2.1.1 Tata Letak Fleksibel Berbasis Grid
Tata letak berbasis grid merupakan salah satu pilar penting dalam
desain responsif. Tata letak responsif adalah menggunakan CSS untuk posisi dan
untuk meletakkan margin dan spasi untuk menerapkan berbagai jenis tata letak
8
web dengan cara baru. Tata letak dan ukuran teks biasanya dinyatakan dalam pixel
tata letak berbasis presentase dan ukuran berbasis "em".
Dengan mendasarkan ukuran pada teks, lebar, dan margin presentase
atau di "em" dengan unit pengukuran berdasarkan ukuran titikfont, ukuran yang
dirubah adalah ukuran tetap menjadi ukuran relatif untuk mencapai grid yang
fleksibel dan sistem ukuran teks, dengan rumus perhitungan "em"
Target + Konteks = Hasil
(Marcotte,2011 :20)
Contoh:
Konteks normal ukuran/ont "body" adalah 16 piksel. Jika perancang menetapkan
bahwa "HI" harus 24 piksel dapat dihitung menjadi: 24+16=1.5 maka hasil yang
digunakan dalam kode CSS :
hl{
Font size: 1.5em;
}
2.1.2 Gambar Dan Media Fleksibel
Menurut Ethan Marcotte dalam bukunya Responsive Web Design
salah satu masalah terbesar yang dapat dijawab oleh responsive web design adalah
penggunaan gambar dalam website. Ada beberapa teknik yang dapat digunakan
dalam mengatur ukuran gambar secara proporsional. Salah satu yang paling
populer yang ditulis Ethan Macotte dalam artikelnya tentang fluid images adalah
9
penggunaan "max-width" dalam CSS, teknik ini pertama kali diuji coba oleh
Richard Rutter.
Saat aturan tentang ukuran gambar ini belum ada, pada umumya
setiap gambar akan memuat dalam ukuran aslinya, kecuali area tampilan menjadi
lebih sempit dari lebar asli gambar itu. Lebar maksimum gambar diatur ke 100%
dari lebar layar atau browser, sehingga ketika itu 100% menjadi lebih sempit
maka ukuran gambar tidak akan berubah. Gagasan dibalik fluid-image adalah
bahwa Anda memberikan gambar pada ukuran maksimum yang akan digunakan.
Anda tidak mendeklarasikan tinggi dan lebar dalam kode Anda, tetapi biarkan
browser mengubah ukuran gambar yang diperlukan saat menggunakan CSS untuk
membimbing ukuran size secara relatif (Knight, 2012: 13).
2.1.3 Media Queries
Media query adalah mekanisme untuk mengidentifikasi jenis media,
karakteristik fisik perangkat, dan browser yang digunakan (Marcotte, 2011: 74).
Perangkat yang sudah mendukung CSS3 akan mendukung fitur media query, jadi
memanggil media query untuk mendeteksi target ukuran perangkat. Fitur barn
pada CSS3 juga mencakup orientasi (potret dan landscape), dengan mendeteksi
ukuran resolusi layar sehingga dapat membuat beberapa style sheet serta
perubahan tata letak dasar didefiniskan sesuai dengan rentang lebar bahkan untuk
orientasi landscape dan potret. Contoh penggunaan media query:

10
/* Smartphones (portrait and landscape)

*/
@media only screen
and (min-device-width 320px)
and {max-device-width 480px)
/* Styles */
)
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 32lpx) {
I* Styles */
)
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
Secara umum media query telah didukung banyak browser (Firefox 3.6+, Safari
4+, Chrome 4+, Opera 9.5+, iOS Safari 3.2+, Opera Mobile IO+, Android 2.1+,
dan Internet Explorer 9+) (Frain, 2012: 35).
2.2 Framework Responsive Web Design
Framework adalah kumpulan perintah atau fungsi dasar yang membentuk
aturan-aturan tertentu dan saling berinteraksi satu sama lain sehingga dalam
pembuatan aplikasi website, kita harus mengikuti aturan dari framework tersebut
(Wardana, 2010: 3).
Dalam pemrograman tampilan webite dengan teknologi responsive web
design, telah dikembangkan yaitu Bootstrap yang dikembangkan oleh Twitter
Inc., Zurb Foundation yang dikembangkan oleh Zurb, Skeleton dan lainnya.
Sebuah framework selain menyediakan lingkungan pengembangan
sendiri juga menyediakan berbagai macam fungsi siap pakai yang bisa digunakan
dalam pembuatan sebuah tampilan website, berikut penjelasan framework
responsive web design (Bootstrap, Foundation, dan Skeleton):

11
2.2.1 Bootstrap
Bootstrap adalah open-source front-end toolkit yang dikembangkan
oleh Mark Otto dan Jacob Thornton dari perusahaan yang berkecimpung dalam
bidang sosial media yaitu Twitter, dirilis pada Agustus 2011. Bootstrap
dikembangkan dengan tujuan untuk membantu desainer dan pengembang dalam
membangun front-end sebuah website secara cepat dan efisien. Twitter Bootstrap
secara cepat menjadi proyek yang paling di dilihat pada GitHub dengan lebih
33.000 pengguna GitHub yang melihat, dua kali lipat lebih banyak dibanding
posisi kedua (Cochran, 2012: 2). Framework Bootstrap mengkategorisasikan
ukuran resolusi layar ke dalam 4 kategori, yaitu:
I. Large Devices (dengan ukuran resolusi layar ?J200px)
2. Medium Devices (dengan ukuran resolusi layar ?992px)
3. Small Devices (dengan ukuran resolusi layar 2:768px)
4. Extra Small Devices (dengan ukuran resolusi layar <768px)
2.2.2 Foundation
ZURB Foundation adalah framework pembuatan responsive web
design open source untuk pengembangan front-end yang dikembangkan oleh
ZURB. ZURB adalah perusahaan desain yang fokus ke bidang desain interaksi
berlokasi di Campbell, California, Amerika Serikat. ZURB Foundation berisi
template desain HTML dan CSS berbasis tipografi, bentuk:, logo, tombol,
navigasi, dan komponen antarmuka lainnya, serta opsional pelengkap tembahan
JavaScript. ZURB Foundation fiwnework meraih tempat ke-16 sebagai proyek

12
terpopuler di GitHub, sebuah forum sosial para pengembang aplikasi, website,
aplikasi, dan perangkat lunak.
ZURB Foundation pertama kali rilis pada September 2011, pada
Oktober 2011 Zurb merilis Foundation 2.0 sebagai open-source responsive web
design framework dibawah lisensi dari Massachusetts Institute of Technology.
2.2.3 Skeleton
Skeleton adalah kumpulan kecil files CSS untuk pengembangan web
desain yang dikembangkan oleh Dave Gamache. Skeleton memiliki 3 prinsip
dasar yaitu :
a. Responsive Grid to Mobile
Skeleton sangat familiar dan ringat digunakan dengan 960 grid-
grid sebagai dasarnya, dan secara elegan dapat menyesuaikan
dengan ukuran browser yang diperbesar atau diperkecil.
b. Fast to Start
Skeleton framework yang cepat untuk digunakan untuk rapid
development, dengan grid-grid yang terstruktur dan pertimbangan
untuk pengembangan di telepon genggam yang mudah. Skeleton
dilengkapi dengan struktur file dan elemen antarmuka yang
beragam.
c. Style Agnosic
Perangkat pengembangan yang paling mendasar yang dapat
menyesuaikan berbagai gaya desain denganframework Skeleton.

13
2.2.4 Perbanllingan 3 Framework Responsive Web Design

Tabel 2.1 Komparasi Framework Responsive Web Design
(Sumber: http:!/responsive. vennilion.com/compare.php)
Bootstrap3 Foundation 4 Skeleton

Ringkasan Basis pengguna Basis pengguna Basis pengguna
besar medium medium
Grids: Fluid dan Grids: Fluid. Terbaik Grids: fixed
fixed dalam kelas grids di Perangkat
Perangkat antarmuka semuajenis antarmuka:
: banyak widget; viewports. terbatas
eocok untuk rapid Perangkat Sejarah: style
prototyping. antarmuka: set agnostic dan
Sejarah: perangkat powerful lebih ringan.
Dikembangkan oleh dan modular. Style
Twitter sebagai agnostic lebih
acuan style untuk banyak dibanding
perangkat internal. Bootstrap.
Sejarah: Mobile-first
ke boilerplate
dikembangkan oleh
ZURBuntuk
proyek-proyek klien.
Versi 3 4.0 1.2
Terakhir rilis 26 Juni 2014 28 Februari 2013 20 Juni 2012
Website htt12J{t'vi IJ.~r. eith ub.com/ http://foundation .z~.uti.,, co http:/I get.~.keleton. com
J?g__QJslra12'.'. n1/ !
Github J1 tt p://git hu h.con1/t\vitJ~rf http:/I gj thu b.co1n/ zurb/fo11 !illn:/I eithu b. corn/dh g
bootst111p/ ndp.JiOJJ a1nache/Skeleton
Pengembang Twitter ZURB Dave Gamache
Lisensi MIT License MIT License MIT License
Dukungan Chrome (Mac, Windows, Desktop: Chrome, Desktop: Chrome,
Browser iOS, and Android) Firefox, Safari, IE9+ Firefox, Safari, IE?+
Safari (Mac and iOS Mobile: iOS (iPhone), Mobile: iPhone,
only) Firefox (Mac, iOS (iPad), Android 2, 4 Droid, iPad
Windows) Opera (Mac (Phone), Android 2, 4
and Windows) IE8+ (Tablet), Windows Phone
7+, Surface
css
Reset Normalize.css Normalize.css Inspired by Eric
Meyer's reset
LESS Ya Tidak Tidak
15
2.2.5 Alasan Menggnnakan Framework Bootstrap
Dari 3 framework yang penulis bahas dalam penulisan skripsi ini,
penulis memilih menggunakanframework Bootstrap dengan alas an yaitu:
1. Framework Bootstrap sebagai proyek paling banyak dilihat di
forum pengembang teknologi informasi GitHub, dilihat lebih
33.000 anggota forum, dua kali lebih banyak dari peringkat kedua
terbanyak (Cochran, 2012, 2).
2. Buku-buku dan sumber yang lebih banyak.
3. Lebih mudah dipahami oleh pemula.
4. Fitur-fitur untuk tampilan website yang cukup lengkap.
2.3 Desain Web
2.3.1 HyperText Markup Language 5 (HTML5)
HTML5 adalah versi terbaru dari spesifikasi HTML yang telah ada
sejak tahun 1997 dan sudah banyak browser yang mendukung fitur-fitur pada
HTML5. Perubahan HTML5 mencakup fokus pada semantic markup seperti
penambahan <header>, <footer>, <section>, dan <article>, selain itu penambahan
elemen <canvas> untuk grafik interaktif dan elemen <video> untuk menampilkan
video (Grannell, Sumner, dan Synodinos, 2012: 8). Dalam perkembangannya
HTML5 memungkinkan pembuat website untuk memasukkan banyak
fungsionalitas ke dalam website. Teknologi website berkembang dengan pesat,
sebagian besar karena meningkatnya kecepatan rata-rata koneksi internet, dan
para pengguna, desainer, dan programmer semakin menuntut fungsionalitas lebih
pada halaman website, seperti kontrol untuk font dan tata letak yang lebih
16
terkendali, rendering yang lebih baik pada perangkat yang bervariasi seperti dari
ponsel ke monitor besar, Iebih interaktif, video, audio, animasi, dan dukungan
yang lebih baik untuk format gambar danjile (Wempen, 2011: xxiv).
2.3.2 Cascading Style Sheet 3 (CSS3)
CSS3 adalah pengembangan dari CSS yang dimana berfungsi untuk
mengatur format I tampilan tata letak sebuah halaman web. CSS ini bersifat
embeded pada tag HTML yang artinya menempel atau melekat pada tag HTML.
Kelebihan CSS3 menurut (Clark, Studholme, Murphy, Manian, 2012: 235):
a. Desain Lebih Ramping
Dengan CSS3 pembuatan website tidak perlu melewati proses
lama dengan mengolah rancangan dulu dalan1 aplikasi pengmbuat
grafts lalu diubah dalam bentuk kode, perubahan bisa langsung
dilakukan melalui kode CSS3. Hal ini tidak hanya meningkatkan
alur kerja dan mengurangi panjang dari proyek, tetapi membuat
pemeliharaan dan penanganan akan perubahan permintaan lebih
mudah (Clark, Studholme, Murphy, Manian, 2012: 236).
b. Mengurangi solusi dan hacks
CSS3 memberikan faslitas lebih lengkap dibanding versi
terdahulunya, sehingga tidak diperlukan trik khusus untuk
membuat website menjadi sesuai dengan keinginan pembuat.
Contohnya yaitu:
I. Spesifikasi web font yang lebih banyak

19
teknologi web responsive design selain itu juga mempennudah kerja dari web
administrator dalam memperbaharui berita dan karena pembuatan menggunakan
framework Codeigniter maka waktu pengerjaan pembuatan situs jadi lebih
singkat, kode program lebih mudah dibaca dan menjadi pilihan tepat untuk
mempercepat kerja teamwork (Herbowo, 2012: iv). Penelitian dengan tema sejenis
kedua dari Chen Zhang, pada tahun 2013, Rochester Institute of Technology,
dengan judul penelitian "Responsive Website Design for First Unitarian Church
and Louis Kahn." Menurut Chen Zhang, A website which has three user
experiences: a desktop site, tablet site and a mobile site (Zhang, 2013: 5).
2.6 Web Site Design Method (WSDM)
Pada penulisan skripsi ini penulis menggunakan metode pengembangan
Web Site Design Method (WSDM) yang dikembangkan oleh De Troyer dan Leune
pada 1998, WSDM adalah pendekatan yang terpusat pada pengguna untuk
pengembangan situs web, yaitu model-model aplikasi yang berdasarkan pada
kebutuhan infonnasi dari kelompok pengguna (Simarmata, 20 I 0: 217). Proses
pengembangan ini terbagi menjadi lima fase, digambarkan dalam gambar 2.1:
20
Au-dim1ce Modclilng
Audience
ClassiflcstiOn
Audience Class
c11aractartzMion
Conceptual Oel!.ign
!nforrna!Joo Naviga!!onal
MOOeling
Funct\ooa!
Modeling ) IJeS!g._ti
~---~
lmpfernltt'ltaUon dfl>1gn
LC<,JVC&l DatfiW5e
DeSign
lmplement.atlan
Gambar 2.1 Konsep Web Site Design Method (WSDM)
(De Troyer, Casteleyn. The Conference Review System with WSDM)
1. Pernyataan Misi
Fase ini mendefiniskan pernyataan misi dari website yang akan
dibuat. Pernyataan misi ini hams menjawab beberapa pertanyaan yaitu:
apakah tujuan dari website, apa subyek dari website, dan siapa target
pengguna dari website.

21
2. Pemodel1111 Pe11gg111111
Pada fase ini, pengguna diklasifikasikan dan dikelompokkan dalam
kelompok kebutuhan sistem sesuai dengan masing-masing kebutuhan
kelompok pengguna.
a. Klasifikasi Pengguna
Langkah ini mengidentfikasi dan mengklasifikasikan
pengguna website. Salah satu cara dengan melihat organisasi atau
proses dari website yang akan dibangun. Setiap organisasi,
lembaga, dan proses dapat dibagi dalam sejumlah kegiatan. Setiap
kegiatan melibatkan orang. Orang-orang ini adalah pengguna
potensial website.
b. Karakterisasi Pengguna
Pada fase ini memiliki dua fokus berbeda. Fokus pertama
adalah kebutuhan informasi sebagai persyaratan kelas pengguna
yang berbeda. Semua pengguna dari kelas pengguna berpotensi
memiliki kebutuhan informasi yang sama. Namun, pengguna dalam
kelas pengguna tertentu mungkin berbeda tentang bagaimana
informasi harus disajikan kepada mereka. Fokus kedua adalah
karakteristik dari kelas pengguna. Karakteristik ini akan
mengarahkan bagaimana informasi harus disajikan untuk kelas
pengguna tertentu, beberapa contoh karakteristik pengguna adalah:
tingkat pengalaman dengan situs web sebelumnya, frekuensi
penggunaan internet, dan lainnya.

22
3. Desain Konseptnal
Dalam fase ini, diagram kelas didesain untuk mewakili model statis
sistem dalam model navigasional untuk mewakili kemungkinan dari
navigasi. Fase ini terdiri dari dua sub-tahap, pemodelan objek dan
desain navigasi.
a. Pemodelan Informasi
Tujuan dari tahap ini adalah untuk secara resmi memodelkan
kebutuhan informasi yang dinyatakan dalam deskripsi kelas
pengguna. Hal ini dilakukan dengan membangun (konseptual)
model obyek untuk kelas pengguna yang berbeda. Model ini
disebut Object Model Pengguna.
Sebuah object model pengguna adalah model obyek bisnis
dalam organisasi dari sudut pandang pengguna di kelas pengguna.
Sejak kelas pengguna biasanya hanya memiliki pandangan yang
terbatas pada organisasi, objek model pengguna hanya akan
menutupi bagian dari total set obyek bisnis organisasi.
b. Pemodelan Fungsi
Fase pemodelan fungsi menjabarkan dalam persyaratan yang
lebih mendasar dari fungsional website. Fase ini melibatkan
komponen dari website yang memiliki fungsi untuk digambarkan
bagaimana fungsi tersebut bekerja.

26
2. Class Diagram
Class Diagram menggambarkan struktur objek sistem. Diagram ini
menunjukan kelas objek yang menyusun sistem dan juga hubungan
antara kelas objek tersebut (Whitten, 2007: 393). Contoh class
diagram menurut Jeffrey L. Whitten:
kelas_ 1 I kelas_2 I
kelas_3 kelas_4
Gambar 2.3 Contoh Class Diagram
3. Sequence Diagram
Sequence Diagram menggambarkan dengan sangat detail bagaimana
sebuah objek berinteraksi san1 sama lain sepanjang wakn1. Diagram
ini memodelkan logika sebuah use case dengan cara
menggambarkan interaksi pesan di antara objek-objek dalam
rangkaian waktu (Whitten, 2007: 393). Contoh sequence diagram
menurut Jeffrey L. Whitten:
processor
1: mengirim pesan
: mengirim pesan batasan n
~
---------Lrl
I
I I
I I
Gambar 2.4 Contoh Sequence Diagram.

BAB III
METODOLOGI PENELITIAN
Pada penulisan skripsi ini, penulis menggunakan dua metode dalam
melaksanakan penelitian, yaitu metode pengumpulan data dan metode Web Site
Design Method (WSDM).
3.1 Metode Pengompolan Data
3.1.1 Data Primer
3.1.1.1 Wawancara
Pada tahap wawancara penulis mengumpulkan informasi
mengenai kondisi langsung website VIN Syarif Hidayatullah Jakarta saat ini dari
sudut pandang pihak pengelola yaitu Pusat Teknologi Informasi dan Pangkalan
Data VIN SyarifHidayatullah Jakarta (PVSTIPANDA). Selain itu untuk menggali
informasi mengenai kebutuhan untuk pengembangan website ke depan, serta
pendapat mereka mengenai teknologi responsive web design.
3.1.1.2 Observasi
Pada tahap observasi penulis mengumpulkan informasi mengenai
statistik yang ada pada website VIN Syarif Hidayatullah sejak I Januari 2014
hingga 17 Februari 2014. Bertujuan untuk mengetahui berbagai jenis perangkat,
ukuran resolusi layar, browser, dan durasi akses website. Selain itu, untuk
mendapatkan data pendukung lainnya seperti pengguna-pengguna yang berperan
dalam website VIN Syarif Hidayatullah.

28
3.1.2 Data Sekunder

3.1.2.1 Studi Pnstakll
Berdasarkan studi pustaka pada penelitian sejenis, penulis
melakukan analisis pribadi sehingga disimpulkan kelebihan dan kekurangan dari
penelitian sejenis untuk dikembangkan oleh penulis, yaitu:
a. Web Responsive Design Untuk Situs Berita Menggunakan
Framework Codeigniter (Agus Rahmat Herbowo, 2012).
Fokus
Kelebihan Keknrangan
Pengembangan
Fitur dan konten a Menggunakan a Menggunakan
website lebih framework yang framework untuk
lengkap dan bukan untuk tampii an
informatif. tampilan website responsive web
responsive web design
design. b. Menggunakan
b. Tidak menggunakan metodologi untuk
metodologi untuk pembuatan
pembuatan desain tampilan website
website
b. Responsive Website Design for First Unitarian Church and Louis
Kahn. (Chen Zhang, 2013).
Fokus
Kelebihan Kekurangan
Pengembangan
Fokus mendalam Tidak membahas fitur a Fokus pada
pada proses desain dan fungsi website tampilan.
dari website (User secara keseluruhan, b. Membahas
Experience). hanya pada tampilannya tampilan dan fungsi
saja dari website.
29
3.2 Metode Web Site Design Method (WSDM)
Pada proses pembuatan website untuk penulisan skripsi ini, penulis
menggunakan metode Web Site Design Method (WSDM). Pendekatan dengan
metodologi Web Site Design Method lebih berorientasi pada pendekatan berbasis
pengguna, dimana yang diutamakan adalah kebutuhan pengguna akan
kebergunaan website sehingga tercapai kebergunaan website bagi pengguna secara
maksimal. Teknologi Responsive Web Design berfungsi untuk mampu mengenali
resolusi layar yang digunakan pengguna kemudian menanggapinya dengan
menghadirkan tampilan website yang memiliki bentuk, ukuran, dan komposisi
yang proporsional dengan resolusi layar pengguna.
Web Site Design Method yang digunakan penulis memiliki tahapan-
tahapan berikut:
3.2.1 Pernyataan Misi
Pada fase ini penulis melakukan kegiatan dengan mengumpulkan
informasi berupa tujuan dan maksud dari UIN Syarif Hidayatullah Jakarta.
Informasi yang penulis dapatkan berasal dari Buku Pedoman Akademik
Universitas Tahun 2010-2011. Selain itu, penulis melakukan observasi di Pusat
Teknologi Infonnasi dan Pangkalan Data (PUSTIPANDA) UIN Syarif
Hidayatullah Jakarta selaku pihak pengelola website UIN Syarif Hldayatullah
Jakruia dengan basil berupa statistik data mengenai website (www.uinjkt.ac.icl)
selama I Januari 2014 - 17 Februari 2014 seputar resolusi layar, browser yang
digunakan, jenis perangkat mobile yang digunakan, dan durasi kunjungan,

30
Pemyataan misi tertulis pada Tabel 4.5 Pemyataan misi website UIN Syarif
Hidayatullah Jakarta (lihat subbab 4.1.1 ).
3.2.2 Pempdellm Penggnna
Pada fase ini penulis mengumpulkan informasi mengenai pengguna
potensial website berdasarkan kebutuhan masing-masing pengguna untuk dapat
dikelompokkan (lihat subbab 4.1.2).
3.2.2.1 Klasifikasi Penggnna
Pada fase ini penulis mengelompokkan pengguna kedalam
beberapa kelompok dan mengidentifikasi berdasarkan tujuan masing-masing
pengguna dalam penggunaan website UIN Syarif Hidayatullah Jakarta yang
tercantum dalam Use case diagram website UIN SyarifHidayatullah Jakarta (lihat
subbab 4.1.2.1 dan gambar 4.2).
3.2.2.2 Karakterisasi Penggnna
Pada fase ini penulis memberikan pra syarat pengguna yang dapat
menggunakan website dengan maksimal. Hal ini didasari oleh masing-masing
pengguna memiliki kebutuhan yang berbeda terhadap website, namun perlu
adanya penyetaraan terhadap syarat apa yang diperlukan untuk penggunaan
website UIN SyarifHidayatullah Jakarta (lihat subbab 4.1.2.2).

31
3.2.3 Desain Konseptual
Pada fase ini penulis mulai merancang website yang akan dibuat,
berdasarkan infonnasi pada fase-fase sebelumnya. Perancangan mencakup
perancangan data, perancangan fungsi, dan navigasi (lihat subbab 4.1.3).
3.2.3.1 Pemodelan Informasi
Pada fase ini, penulis menitik beratkan pada perangcangan desain
yang berkaitan dengan data dan infonnasi pada website. Dalam fase ini penulis
merancang dalam bentuk basis data dalam bentuk class diagram pada Gambar 4.3
Class Diagram Website UIN SyarifHidayatullah Jakarta (lihat subbab 4.1.3.1).
3.2.3.2 Pemodelan Fm1gsi
Pada fase ini, penulis merancang tentang fungsi-fungsi apa yang
disediakan oleh website dan bagaimana tahapan pada saat sistem bekerja Model
dari fungsi yang dirancang penulis tuangkan dalam bentuk sequence diagram.
Adapun tahapan tersebut dijelaskan pada :
a. Sequence Diagram Akses Website (Gambar 4.4)
b. Sequence Diagram Login Administrator (Gambar 4.5)
c. Sequence Diagram Manage Berita (Gambar 4.6)
d. Sequence Diagram Manage Artikel (Gambar 4.7)
e. Sequence Diagram Manage Kolom Rektor (Gambar 4.8)
f. Sequence Diagram Manage Halaman Kategori (Gambar 4.9)
3.2.3.3 Desain Navigasi
Pada fase desain navigasi, penulis menggambarkan alur navigasi
dan struktur website antar halaman UIN Syarif Hidayatullah pada saat penulisan
32
penelitian ini. Penulis menggunakan diagram dalam perancangan desain navigasi
yang tergambar pada struktur navigasi (lihat gambar 4.10).
3.2.4 Desain Implementasi
Fase desain implementasi penulis mulai melakukan implementasi atas
perancangan pada fase-fase sebelumnya ke dalam bentuk sebuah desain visual
yang hampir menyerupai bentuk, wama, dan ukuran dari wujud website yang akan
dibuat, penulis menggunakan perangkat lunak Adobe Illustrator dan Adobe
Photoshop (lihat sub bab 4.1.4).
3.2.4.1 Desain Halaman
Pada fase desain halaman, penulis mendesain wujud website yang
akan dibuat dalam bentuk desain sketsa dengan bantuan perangkat lunak pengolah
dan pembuat gambar (lihat sub bab 4.1.4.1 ). Hasil perancangan desain
implementasi ada pada gambar yaitu:
1. Rancangan Halaman Home Untuk Large Device (Resolusi
2:1200px) (Gambar 4.11)
2. Rancangan Halaman Home Untuk Medium Device (Resolusi
2:992px) (Gambar 4.12)
3. Rancangan Halaman Home Untuk Small Device (Resolusi
2:768px) (Gambar 4.13)
4. Rancangan Halaman Home Untuk Extra Small Device
(Resolusi :5768px). A Untuk Kondisi Accordion Tertutup, B
Untuk Kondisi Accordion Terbuka (Gambar 4.14)

33
5. Rancangan Halaman Detail Untuk Large Device (Resolusi
2:1200px) (Gambar 4.15)
6. Rancangan Halaman Detail Untuk Medium Device (Resolusi
2:992px) (Gambar 4.16)
7. Rancangan Halaman Detail Untuk Small Device (Resolusi
2:768px) (Gambar 4.17)
8. Rancangan Halaman Detail Untuk Extra Small Device
(Resolusi :S768px). A Untuk Kondisi Accordion Tertutup, B
Untuk Kondisi Accordion Terbuka (Gambar 4.18)
3.2.4.2 Desain Presentasi
Pada fase desain presentasi, penulis mulai menerapkan desain
sebuah halaman website yang akan dibuat lengkap beserta bentuk, wama, dan
ukuran yang akan dibuat, sehingga wujud dari website yang akan tampak dengan
bantuan perangkat lunak pengolah gambar. Adapun hasilnya terdapat pada
gambar rancangan yaitu:
1. Halaman Home Untuk Large Device (Resolusi 2:1200px )
(Gambar 4.19)
2. Halaman Home Untuk Medium Device (Resolusi 2:992px)
(Gambar 4.20)
3. Halaman Home Untuk Small Device (Resolusi 2:768px)
(Gambar 4.21)
34
4. Halaman Home Untuk Extra Small Device (Resolusi 968px)
(Gambar 4.22)
5. Halaman Home Untuk Extra Small Device Dengan Bagian
Atas Accordion Terbuka (Gambar 4.23)
3.2.5 Implementasi
Pada fase implementasi penulis mulai mewujudkan desain pada fase-
fase sebelumnya ke dalam bahasa pemrograman yang dapat dikenali oleh
komputer, penulis menggunakan bahasa pemrograman yang sama dengan yang
digunakanframework Bootstrap yaitu HTML5, CSS3, dan JQuery (lihat lampiran
2) rekam gambar hasil terdapat pada:
I. Halaman Web Bagian Atas (Gambar 4.24)
2. Halaman Web Bagian Tengah (Gambar 4.25)
3. Halaman Web Bagian Bawah (Gambar 4.26)
4. Halaman Kategori Bagian Atas (Gambar 4.27)
5. Halaman Kategori Bagian Bawah (Gambar 4.28)
3.2.6 Pengujian
Pada penulisan skripsi ini penulis melakukan modifikasi pada metode
Web Site Design Method (WSDM) dengan menambahkan fase pengujian, ha! ini
penulis anggap perlu sebagai tahapan pembuktian apakah teknologi responsive
web design mampu menjawab permasalahan yang ada pada penjelasan di Bab I
(lihat subbab 4.2).

36
3.4 Kerangka Berfikir
MULAI
PERNYATAAN MISI
PEMODELAN PENGGUNA
WEB SITE DESIGN

METHOD DESAIN KONSEPTUAL
(WSDM) .
DESAIN IMPLEMENTASI
IMPLEMENTASI
PENGUJIAN
I SELE SAi
l
Gambar 3.2 Kerangkar Berfikir
BAB IV
HASIL DAN PEMBAHASAN
4.1 Web Site Design Method (WSDM)
Pada bab ini akan menjelaskan tahapan-tahapan pembuatan website.
Penulis menggunakan metodologi Web Site Design Method menurut De Troyer
dan Leune, dengan tahapan-tahapan yaitu pemodelan pengguna, desain
konseptual, desain navigasi, desain implementasi, dan implementasi.
4.1.1 Pemyataan Misi
Tahap pertama pada metodologi WSDM adalah mendefiniskan
pernyataan misi dari website yang akan dibuat. Pernyataan misi ini harus
menjawab beberapa pertanyaan yaitu: apakah tujuan dari website, apa subyek dari
website, dan siapa target pengguna dari website.
Berdasarkan basil observasi didapatkan informasi berupa data
kunjungan website Universitas Islam Negeri Syarif Hidayatullah Jakarta
berdasarkan kategori resolusi layar, browser yang digunakan, jenis perangkat
mobile yang digunakan, dan lama waktu kunjungan, pengambilan data
menggunakan pelacak statistik website, StatCounter.com, data yang digunakan
berdasarkan waktu terhitung dari 1 Januari 2014 sampai 17 Februari 2014.

38
Tabel 4.1 Resolusi Layar Pengguna Website UIN SyarifHidayatullah Jakarta
(Sumber: Data Primer PUSTIPANDA, 2014)
NO RESOLUTION PERCENTAGE HITS

I 1366x768 28.72% 137
2 1024x768 14.47% 69
3 1024x600 5.24% 25
4 1360x768 3.56% 17
5 800x600 3.35% 16
6 480x800 2.94% 14
7 320x240 2.52% 12
8 1600x900 2.31% 11
9 218xl89 2.31% II
10 720x1280 2.31% 11
11 800x1280 2.10% 10
12 320x534 2.10% 10
13 1920xl080 2.10% 10
14 1280xl024 1.89% 9
15 320x480 1.68% 8
16 1280x800 1.68% 8
17 1400xl050 1.47% 7
18 1280x768 1.26% 6
19 480x854 1.05% 5
20 600xl024 1.05% 5
21 1152x864 1.05% 5
22 300x371 1.05% 5
23 601x962 0.84% 4
24 984xl050 0.84% 4
25 l76x220 0.63% 3
26 540x960 0.63% J'
27 1440x900 0.63% 3
28 240x382 0.63% 3
29 240x320 0.63% 'J
30 500xl71 0.63% 3
31 480x360 0.63% 3
32 320x568 0.63% 3
33 320x218 0.42% 2
34 300x372 0.42% 2
35 800x5000 0.42% 2
36 500x738 0.42% 2
39
37 240x274 0.42% 2
38 228x240 0.42% 2
39 343x571 0.42% 2
40 984xl233 0.21% l
41 1280x720 0.21% 1
42 984xl455 0.21% l
43 640x480 0.21% l
44 234x320 0.21% I
45 246x260 0.21% I
46 1024x576 0.21% l
47 290x305 0.21% I
48 314x220 0.21% l
49 282x371 0.21% I
50 314x200 0.21% l
51 330x549 0.21% 1
52 720xll84 0.21% I
53 984xl384 0.21% 1
54 480x762 0.21% I
55 240x229 0.21% 1
56 480x640 0.21% I
57 480x329 0.21% I
58 246x295 0.21% I
59 800x983 0.21% I
Tabel 4.1 menggambarkan pengguna website UIN Syarif Hidayatullah saat ini
menggunakan perangkat dengan resolusi layar yang sangat beragam, terdapat 59
jenis ukuran resolusi layar yang digunakan dengan total kunjungan 477 kali.
Tabel 4.2 Browser Pengguna Website UIN SyarifHidayatullah Jakarta (Sumber:
Data Primer PUS TIPANDA, 2014)
NO BROWSER PERCENTAGE IDTS

l Cbrome32.0 17.20% 86
2 Firefox 26.0 13.80% 69
3 Firefox 27.0 10.60% 53
40
4 Android 0 9.20% 46
5 OperaO 8.60% 43
6 BlackBerry 0 6.00% 30
7 Chrome for Android 2.40% 12
8 Chrome 7.0 U!O% 9
9 iPhoneO 1.60% 8
10 Android 0 1.60% 8
11 UC Browser 8.6 1.60% 8
12 ms.o l.60% 8
13 Firefox 12.0 1.60% 8
14 Firefox 3.6 1.40% 7
15 Chrome for Androi 1.40% 7
Hi Firefox 24.0 1.20% 6
17 Google Wireless Transcoder 0 1.20% 6
18 Firefox 18.0 l.20% 6
19 Firefox 19.0 l.20% 6
20 Chrome 31.0 l.00% 5
21 NokiaO 1.00% 5
22 Chrome for Android 0.80% 4
23 Firefox 28.0 0.80% 4
24 Firefox 16.0 0.80% 4
0
25 Firefox4.0 0.60% ~
0
26 Firefox 8.0 0.60% ~
27 Firefox 13.0 0.60% 3

28 Chrome34.0 0.60% 3
29 Chrome5.0 0.60% 3
30 Chrome ll.O 0.60% 3
31 Firefox 25.0 0.60% 3
32 UC Browser 9.0 0.60% 3
33 Facebook Bot 0 0.40% 2
34 Firefox 9.0 0.40% 2
35 Clnome 25.0 0.40% 2
36 Firefox 17.0 0.40% 2
41
37 Chrome29.0 0.40% 2
38 IEMobile 10.0 0.40% 2

39 OperaO 0.40% 2
40 Firefox 10.0 0.40% 2
41 Baidu Explorer 1.0 0.20% 1
42 Firefox 11.0 0.20% I
43 Safari 5.1 0.20% l
44 Chrome 13.0 0.20% I
45 Firefox 21.0 0.20% I
46 Firefox 15 .0 0.20% l
47 Firefox 26.0 0.20% l
48 Firefox 14.0 0.20% I
49 Firefox 23.0 0.20% 1
50 Opera 12.00 0.20% I
51 Firefox 3.5 0.20% 1
52 Firefox 3.0 0.20% I
(Keterangan: Yang d1cetak tebal adalah browser yang sudah mendukung HTML5)
Tabel 4.2 Sebanyak dari 500 kali kunjungan terdapat 280 kmtjungan dengan
menggunakan browser yang mendukung HTML5 (Google Chrome dari versi 6
hingga terbaru, Firefox dari versi 16 hingga terbaru, Internet Explorer versi 8
hingga terbaru).
Tabel 4.3 Jenis Perangkat Mobile Pengguna Website UIN Syarif Hidayatullah
Jakarta (Sumber: Data Primer PUSTIPANDA, 2014)
NO DEVICE PERCENTAGE HITS

I Samsung Galaxy Y 9.79% 14
2 Samsung Galaxy Tab 3 8.0 9.09% 13
3 Samsung Galaxy Note II 7.69% 11
4 RIM BlackBerry 9320 6.99% 10
42
5 Apple iPhone 6.29% 9

6 NokiaC3-00 5.59% 8
7 Samsung Galaxy Tab 4.90% 7
8 Samsung 4.20% 6
IO RIM BlackBerry 9700 4.20% 6
II Samsung Galaxy Grand 3.50% 5
12 Nokia 2.80% 4
13 Samsung Galaxy Young 2.80% 4
14 Samsung Galaxy Tab 7.7 2.10% 3
15 Sony Ericsson K610i 2.10% 3
16 RIM BlackBerry 2.10% ,
0
17 Samsung Galaxy Ace 2 2.10% 3

18 Nokia Asha 311 1.40% 2
19 Lenovo 1.40% 2
21 RIM BlackBerry 8900 0.70% I
22 Samsung Galaxy Core 0.70% I
23 Samsung Galaxy S Duos 0.70% I
24 LG Optimus Hub 0.70% I
26 Sony Ericsson Xperia miro 0.70% I
27 Samsung Galaxy Mini 0.70% I
30 Samsung Galaxy Ace II 0.70% 1
31 Nokia Asha 308 0.70% I
32 Sony Ericsson El6 0.70% I
33 Sony Ericsson Xperia V 0.70% I
34 Samsung Galaxy Pocket 0.70% I
35 NokiaE71 0.70% I
37 Nokia 2700 classic 0.70% I
43
38 Samsung Galaxy Note 8 0.70% I

39 NokiaX2-0l 0.70% I
40 NokiaX2-02 0.70% I
41 Nokia6300 0.70% I
Tabel 4.3 memberikan informasi bahwa ada 42 jenis perangkat keras yang
digunakan pengguna dengan total kunjungan 143 kunjungan dengan perangkat
mobile.
Tabel 4.4 Durasi Pengguna Website UIN SyarifHidayatullah Jakarta (Sumber:
Data Primer PUSTIPANDA, 2014)
NO HITS VISIT LENGTH

l 167 Less than 5 secs
2 11 From 5 secs to 30 secs
3 37 From 30 secs to 5 mins
4 24 From 5 mins to 20 mins
5 12 From 20 mins to an hour
6 4 Longer than an hour
Tabel 4.4 memberikan informasi bahwa sebagian besar pengguna website UIN
Syarif Hidayatullah Jakarta, hanya membuka website dengan durasi kurang dari 5
detik.
Kesimpulan:
a. Dari 59 jenis ukuran resolusi layar, 42 jenis diantaranya adalah
perangkat mobile. Sehingga sebagian besar website UIN Syarif
Hidayatullah diakses dengan ukuran resolusi layar yang unik.

44
Perbandingan Perangkat Yang Digunakan Untuk

Akses Website UIN Syarif Hidayatullah Jakarta
"Perangkat Desktop (19)
Perangkat Mobile (42)
Gambar 4.1 Perbandingan perangkat yang digunakan untuk akses
website VIN Syarif Hidayatullah Jakarta.
b. Sebagian besar kunjungan dengan browser mendukung HTML 5
sehingga dapat menjalankan responsive web design (label 4.2).
c. Durasi kunjungan rendah.
Berdasarkan has ii wawancara pada 21 Juli 2014 bertempat di Pusat
Teknologi Informasi dan Pangkalan Data (PVSTIPANDA) VIN Syarif
Hidayatullah Jakarta, pihak PVSTIPANDA yang diwakili oleh Abdullah, S.Kom
yang menjabat sebagai !coordinator Divisi Support. Dari basil wawancara
didapatkan infonnasi bahwa website Vniversitas Islam Negeri Syarif Hidayatullah
Jakarta saat ini belum menggunakan teknologi responsive web design. Kedepan
VIN Syarif Hidayatullah berencana untuk mengembangkan website dengan
teknologi responsive web design.
Pemyataan misi dari website VIN Syarif Hidayatullah penulis
menggunakan referensi dari Pedoman Akademik Program Strata 1 VIN Syarif
Hidayatullah Jakarta 20I0/2011 "Dalam era globalisasi, website merupakan media
infmmasi yang penting. Guna mendukung kelancaran infonnasi dan komunikasi

45
diantara sivitas akademika dengan seluruh unit yang ada di lingkungan UIN Syarif
Hidayatullah Jakarta." (Tim Penyusun Pedoman Akademik UIN Syarif
Hidayatullah Jakarta, 2010: 23) Sehingga didapat:
Tabel 4.5 Pemyataan misi website VIN Syarif Hidayatullah Jakarta
Tujuan Mendukung kelancaran informasi dan komunikasi

Subyek Media informasi
Sivitas akademika, unit-unit UIN SyarifHidayatullah
Target Pengguna
Jakarta
4.1.2 Pemodelan Penggnna
4.1.2.1 Klasifikasi Pengguna
Pada website UIN Syarif Hidayatullah Jakarta, dari hasil
observasi didapatkan keterangan bahwa pengaturan aktivitas website dilakukan
oleh satu pengguna, yaitu administrator, tugas dari administrator secara umum
dapat dikategorikan ke dalam tiga jenis, yaitu:
I. Input berita terbaru
2. Input informasi slideshow
3. Melakukan update atau perubahan pada informasi statis yang
ada pada website.
Berdasarkan hasil observasi, untuk pengguna (pengunjung)
website hanya memiliki aktivitas fungsi menerima informasi atau pencarian
informasi mengenai UIN Syarif Hidayatullah Jakarta. Fungsi untuk administrator
dapat melakukan login pada halaman administrator, manage berita, manage
artikel, manage kolom rektor, dan manage halaman kategori. Sistem yang
46
diterapkan saat ini belum memungkinkan pengguna melakukan aktivitas yang
dapat berpengaruh terhadap website.
Website UIN Syarlf Hidayatu!!ah Jakarta
Login
Pengguna-
Manage Halan1an
Kategori
Gambar 4.2 Use case diagram website UIN SyarifHidayatullah Jakarta
Tabel 4.6 Deskripsi use case akses website
Nama Use Case Mengakses website
Aktor Pengguna (User)
Deskripsi: Use case ini menggambarkan proses untuk menampilkan website
sesuai dengan ukuran dan resolusi layar pengguna.
Aktivitas yang Langkab I : Pengguna mengakses halaman website
dijalankan : Langkah 2 : Sistem menampilkan halaman website dengan
tampilan disesuaikan dengan ukuran layar dan resolusi layar
perangkat yang digunakan
Postcondition : Tampilan website ditampilkan dalam penyesuaian dengan ukuran
dan resolusi layar pengguna

47
Tabel 4.7 Deskripsi use case login administrator
Nama Use Case Login Administrator
Aktor Administrator
Deskripsi: Use case ini menggambarkan proses masuk administrator ke dalam
sistem website
Aktivitas yang Langkah I : Aktor mengakses halaman login
dijalankan: Langkah 2 : Aktor memasukkan usemame dan password
Langkah 3 : Sistem melakukan pengecekan kesamaan username
dan password
Langkah 4 : Apabila username dan password sama maka sistem
merespon dengan menampilkan halaman utama administrator,
apabila usemame dan password berbeda maka sistem akan
meresopon dengan mengaral1kan ke halaman login dengan
peringatan.
Postcondition : Aktor dapat masuk ke dalam halaman utama sistem administrator
Tabel 4.8 Deskripsi use case manage berita
Nama Use Case Manage berita yang ditampilkan di website
A ktor Administrator
Deskripsi: Use case ini menggambarkan proses aktor memperbaharui
(menambah, edit, dan hapus) berita yang ditampilkan pada website
Aktivitas yang Langkah I : Aktor mengalcses halaman utama administrator
dijalankan : Langkah 2 : Aktor memilih pilihan "berita"
Langkah 3 : Aktor menambahkan berita baru pada kolom tambah

49
Tabel 4.10 Deskripsi use case manage kolom rektor
Nama Use Case Manage kolom rektor yaog ditampilkao di website
A ktor Administrator
Deskripsi : Use case ini menggambarkao proses aktor memperbaharui
(menambah, edit, dao hapus) kolom rektor yang ditampilkan pada
website
Aktivitas yaog Laogkah I : Aktor mengakses halamao utama administrator
dijalaokao : Laogkah 2 : Aktor memilih pilihan "kolom rektor"
Laogkah 3 : Aktor menambahkan berita baru pada kolom tambah
kolom rektor
Langkah 4 : Aktor dapat menghapus kolom rektor
Laogkah 5 : Aktor dapat menggubah kolom rektor
Langkah 6 : Sistem merespon dengao menampilkao, menghapus,
dao memberikao akses edit kolom rektor.
Postcondition : Kolom rektor baru yaog ditampilkao pada website.
Tabel 4.11 Deskripsi use case manage halaman kategori
Nama Use Case Manage halaomn kategori
Aktor Administrator
Deskripsi: Use case ini menggambarkan proses memperbaharui konten yaog
ada pada setiap halamao kategori yaog ada pada website
Aktivitas yaog Laogkah I : Aktor mengakses halamao utama administrator
dijalaokao : Langkah 2 : Aktor memilih pilihao kategori halaman yaog akao
diperbaharui
50
Langkah 3 : Aktor memperbaharui halaman kategori dengan
menambah halaman
Langkal1 4 : Aktor memperbaharui halaman kategori dengan
menggubah halaman
Langkah 5 : Aktor dapat menghapus halan1an kategori
Langlah 6 : Sistem merespon dengan menampilkan halaman
kategori dengan konten terbaru
Postcondition : Halaman kategori website ditampilkan dengan konten terbaru
Para aktor yaitu secara umum pengguna dan administrator yang
terlibat dalam website perlu dijabarkan kembali, penjabaran tersebut untuk
mengetahui kebutuhan masing-masing. Aktor pengguna dalam website VIN
Syarif Hidayatullah Jakarta perlu dijabarkan karena pengguna website UIN Syarif
Hidayatullah Jakarta memiliki beragam kepentingan dan kebutuhan. Kita dapat
merumuskan sebagai berikut:
Mahasiswa terdaftar
Calon mahasiswa
Mantan mahasiswa (alumni)
Do sen
Karyawan
Peneliti
a. Admin
Kebutuhan fungsi:
I. Memasukkan berita terbaru
2. Memasukkan artikel terbaru

51
3. Memasukkan kolom rektor terbaru
4. Mengubah konten pada halaman website
Kebutuhan infonnasi:
1. Informasi berita
2. Infonnasi artikel
3. Infonnasi kolom rektor
4. Informasi konten website
5. Username danpassword
b. Pengguna (Mahasiswa Terdaftar)
Kebutuhan fi.mgsi:
1. Pencarian infonnasi spesifik tentang perkuliahan
2. Pencarian informasi untuk beasiswa/bantuan pendidikan
3. Pencarian informasi tentang kegiatan, budaya, dan info seputar
kampus
4. Pencarian infonnasi tentang penelitian
5. Pencarian informasi tentang infonnasi akademi, gelar, dan program
lainnya
Kebutuhan informasi:
1. Infonnasi sistem perkuliahan
2. Infonnasi beasiswa dan bantuan pendidikan
3. Infonnasi budaya dan kegiatan kampus
4. Infonnasi penelitian
52
c. Pengguna (Caton Mahasiswa)
I. Kebutuhan fungsi:
2. Memeriksa informasi tentang program studi yang ditawarkan
3. Memeriksa informasi persyaratan program studi
4. Mencari informasi umum seputar universitas
5. Mencari informasi lokasi kampus dan sekitamya
6. Mencari informasi mengenai bantuan pendidikan dan beasiswa
7. Mencari informasi tentang budaya, fasilitas, dan kegiatan
universitas
Kebutuhan infmmasi:
I. lnformasi program studi
2. Informasi umum seputar universitas
3. lnformasi akses dan lokasi kampus
4. lnformasi beasiswa
d. Pengguna (Mantan Mahasiswa (Alumni))
Kebutuhan fungsi:
I. Mencari informasi program magister dan doctor
2. Mencari informasi organisasi alumni
3. Mencari informasi agenda kegiatan universitas
I. Informasi program studi magister dan doctor
2. Informasi organisasi alumni

54
g. Pengguna (Peneliti)
Kebutuhan fungsi:
I. Mencari informasi tentang penelitian
2. Mencari informasi bantuan dana pendidikan dan penelitian
3. Mencari informasi perpustakaan universitas
I. lnformasi penelitian
2. Informasi bantuan dana pendidikan dan penelitian
3. Informasi tentang perpustakaan
4.1.2.2 Karakterisasi Pengguna
Semua kelas pengguna memiliki potensi kebutuhan fungsional
dan informasi yang sama. Tetapi memiliki perbedaan pada bagaimana informasi
tersebut disajikan karena kebutuhan usability yang berbeda. Beberapa
karakteristik pengguna yang dapat diambil adalah tingkat pengalaman dengan
website pada umumnya, frekuensi penggunaan website, penggunaan bahasa
pengantar, kemampuan intelektual, usia, pendapatan dan gaya hidup. Sehingga
karakteristik ini akan diterjemahkan kedalam kebutuhan usability dan diterapkan
pada fase implementasi pada panduan desain secara "tampilan dan rasa" seperti
pemilihan wama, font yang digunakan, desain gratis yang digunakan, dan lain
sebagainya (De Troyer, Casteleyn, 200 I: 9).

56
Gambar 4.3 Class Diagram Website UIN SyarifHidayatullah Jakarta
4.1.3.2 Pemodelan Fungsi
Pemodelan fungsi memiliki langkah yang mirip dengan tahap
pemodelan informasi, hanya pada tahap ini lebih berfokus pada pemodelan
persyaratan fungsional. Dalam penelitian kali ini penulis menggunakan sequence
diagram untuk menggambarkan proses pemodelan fungsi pada website, yang
berfungsi untuk menggambarkan urutan kegiatan yang terjadi dalam fungsi
website tersebut.
57
1. Sequence alcses website
~lenga~s..:s V\'e~~_: -~ 'l

II 2 Mcndolcks1 rcso!usi lny?rl I
LJ<U
r- 3 Mcnentukan style ]
~---
4 Menampilkan tamp11an msponsJVe
---- ---- ---- - -- -----------------~
I
Gambar 4.4 Sequence Diagram Akses Website
Gambar 4.4 menggambarkan sequence diagram akses website oleh
pengguna. Pengguna mengakses website kemudian sistem akan
menampilkan tampilan responsif yang akan menyesuaikan dengan
ukuran dan resolusi layar pada perangkat keras yang digunalcan
pengguna untuk mengakses website.
2. Sequence login administrator
~l I Database
5 True/false io9inO
Gambar 4.5 Sequence Diagram Login Administrator

58
Gambar 4.5 menjelaskan sequence diagram login satu aktor yaitu
administrator. Aktor yang ingin mengakses halaman utama sistem
terlebih dahulu mengakses halaman login. Aktor melakukan input
username dan password. Sistem akan memproses username dan
password yang dimasukkan. Sistem melakukan pengecekan pada
database. Jika sistem menemukan username dan password yang ada
pada database sama dengan username dan password yang dimasukkan
oleh aktor maka sistem akan mengarahkan aktor ke halaman utama
sistem, namun jika sistem tidak menemukan username dan password
yang sama dengan username dan password yang dimasukkan maka
sistem akan mengarahkan aktor ke halaman login kembali.
3. Sequence manage Berita
Gambar 4.6 Sequence Diagram Manage Berita

59
Gambar 4.6 menjelaskan sequence diagram pada manage berita. Setelah
aktor mengakses halaman ntama, aktor memilih menu berita. Pada
halaman berita aktor dapat melakukan beberapa fungsi yaitu, tambah,
ubah, dan hapus data berita. Segala fungsi tersebut akan tersimpan di
database tabel berita.
4. Sequence manage Artikel
11....- 15
- -->
Menamp1lkan data artikel ._
13 S1mpan perubahan
>--------------->
.. __________
... 14 Data berhas1! d1ubah
"' _______________
u
_
LJ"-------------------------.. .--
Gambar 4.7 Sequence Diagram Manage Artikel
Gambar 4.7 menjelaskan sequence diagram pada manage artikel.
Setelah aktor mengakses halaman utama, aktor memilih menu artikel.
Pada halaman artikel aktor dapat melakukan beberapa fungsi yaitu,
tambah, ubah, dan hapus data artikel. Segala fungsi tersebut akan
tersimpan di database tabel artikel.

60
5. Sequence manage Kolom Rektor
1\dmin1stmtot Kotom Rektor

---~-~
;
'
t Mcmh" mc"u ho lorn rnhlo1 >[] '
2 "':gl>cbocgkonkedotobo~aj
~ ~ _ ~ ~ __ ~ ~ !:'l;:~a!!'E1!~?-~~3:~~ -~c:~o~!~k_l_o!. - _, ...... __ --~ -0
' -~-Tamba!i ko_iom rnktor ~'
-~-Simpa~~~--~oloi_:i~Ktor ~
D r
7 Menamp1!kan da!a ko:om mktor
6 Data bamas11 d1s1moan
--------------------------~--------
D '
~-------
'
'
'
'
9 S1mpan perubahan ~
10 Data borhas'I d:ubah
-----------------------------------
1
~ 13
12. Hapus kclom rektor
>
Menampi1kari dala kolom rektor
13 $1rnpnn parubahnn
>---------::>
14 Data berhas:I d1ubah
--------------------------------'
u
Lr--:-------------.--------------------
'
'
Gambar 4.8 Sequence Diagram Manage Kolom Rektor
Gambar 4.8 menjelaskan sequence diagram pada manage kolom rektor.
Setelah aktor mengakses halaman utama, aktor memilih menu kolom
rektor. Pada halaman kolom rektor aktor dapat melakukan beberapa
fungsi yaitu, tambah, ubah, dan hapus data kolom rektor. Segala fungsi
tersebut akan tersimpan di database tabel kolom rektor.

62
penulisan dilakukan dan untuk menggambarkan hubungan antar halaman. Desain
navigasi website UIN Syarif Hidayatullah Jakarta:
MAP
ALAMAT
EMAIL
FAKULTAS
KAU:NOER
AKADEMIK
ILMUTMBIYAH
PE DOMAN DAN KEGURUAN
AKADEM!K
~ SKS
SYARIAHDAN
~ DOUBLE DEGREE HUKUM
ADAS DAN
I PORTALAIS HUMAN10RA
DAKWAHDAN
BEASISWA KOMUNJKASI
USHULLUDlN
SAJNSDAN
TEKNOLOGI
EKONOM! DAN
BISNJS
ILMU SOSIAL DAN

ILMU POUTlK
PSIKOLOGI
ILMU KEDOKTERAN
DAN KESEHATAN
Gambar 4.10 Struktur Navigasi Website UIN SyarifHidayatullah Jakarta

63
4.1.4 Desain Implementasi
Pada tahap desain implementasi, struktur dan bentuk web sudah
didefinisikan agar wujud dari web tersebut sudah dapat dilihat. Tujuan agar
menciptakan tampilan yang konsisten, mudah, dan efisien. Proses desain
implementasi mempertimbangkan persyaratan kegunaan dan karakteristik
pengguna yang sudah didefinisikan.
4.1.4.1 Desain Halaman
Desain halaman adalah tahap perancangan tampilan mock up
sederhana dari tampilan website yang akan dibuat. Dalam proses ini berdasarkan
dokumentasi dari framework Bootstrap perancangan terbagi atas empat jenis
kategori resolusi layar yang akan digunakan yaitu extra small devices (<768px),
small devices (2:768px), medium devices (2:992px), dan large devices (2:1200px).
Disiui penulis membagi berdasarkan tipe halaman web yang dibuat dan
rancangannya dalam beberapa versi resolusi layar.
a. Halaman home atau index
Halaman ini adalah halaman dari website yang pertama kali akan
muncul saat website diakses, rancangan halaman ini akan terbagi
menjadi 4 jenis sesuai dengan resolusi layar.

64
12-_il UNIVERSITAS ISIAM UEGERI SYARlf HIDAYATUUN1 JAY.;cRTA
OERfTA
BERITA lA!NflYA
JUOIJL6(;1UTAWN
-JU:ll!LBflllTAWN
JU:lUl.lllllTAWN
JU:ll!LBSlllJ\LNN
ARTIKEL
AA.Tiffi LA!NfM
-JUOU!.AAl'!Kal...>U
.!UrlULAATrl<P..1Al'I
.lt!rlULAATIK..9.Llll'I
-J\lt:IULN!TIKB.LlllN
JUout./<llTIKfl. .l'.JCll.'l.MmKB. Jtm'JL>.flTlX~L
!R"W._W<'il=><U
i"'""'''""i lfl>Xil<'! ~..Bi')
KOLOM RSKTOR
~~ ,~~
"~ KOLOMl.AlllNYA
rnc~w"''"'-"'"""""' o=~D<..W<O."Tffi
f'fC(1'<"''"'""'""-"'<U -JUout.1-N'I
JU!H.J'.WN
J'.Ill'J'~l.Alll
-JtroUUAlll
ltili.M%U!flm
t!ili.Wfil'l.ME!M
FOOTER
Gambar 4.11 Rancangan halaman Home untuk large device (resolusi
2:1200px)
Rancangan halaman home pada ukuran resolusi ini ditargetkan untuk
pengguna dengan perangkat seperti laptop, desktop PC, dan jenis
perangkat lain dengan resolusi 2:1200px. Pada rancangan ini selumh
komponen desain web berada pada posisi dan komposisi ukuran yang
normal.
65
lS2l UNIVERS!TAS JSlAM NEGERI SYARlF HIDAYA1ULLAH JAKARTA

I/ '-I
illlilllI.llil>~>ffliffi!1!M!!>~>~>~>
~-- .~ SLIDE SERITA U'rAMA
~ ~
BER ITA
BERITALAINNYA
1)(1[)(11)(
JUOUL SERITA LAIN
JUOUL 6ERITA LAIN
JUOULBERITA LAIN
- JUDUL BERITA LAIN
JU DUL SERITA JUOULBERITA JUDULBERITA

~Vi',"{ISl!l8llt.o. PRCV!EVI ISi BEMI\ F!l!;\ll!'WISl!iMA
[Rii.;:DMoru:) [PEAOJ.'-Ot!!: I l PEAO MOruO I
ARTIKEL
ARTfKEL LAINNYA
)([><][)(
JUDULARTIKEL JUDULARTIKEL JUDULARTIKEL
-JUOULARTIKELLAIN
- JUDULARTlKEl LAIN
JUOULARltKa LAIN
- JUOULARTIKELLAIN
PREVlEW ISIAAruEl. PflEVC'-/ISIAATlKS. Pil.EW:WISlh'UlKEI.
I =MORE] jRI'J'DMOlll<I j REAOOOi\E: I
KOLOM REKTOR
JUDUL JU DUL JUD UL KOLOM LAINNYA
PilE:VlEWISIKOlO!.lfl5:rorl PRBl!EW ISi KOlOM llB{fOll ~YISIKOl.01.!REKfOll -JUOULLAIN
JUOULLAIN
IREAfl~] ["mwit.11)fl' ! I REAnl.\ORE I -JUOUL.L.AIN
-JUDULLAIN
FOLLOW US AGENDA
11tJis SQSIAJ_ m;or~ Nf{)RMA!ll Ms.JGE!UJ AGB!DA l~fORM!..51 ME!1GOIAI AGOIO,\ ITlfORlt..'ISI ME!JOOW AGSlW.
lN!<SO.'\)~Q!t.,
l.R1!'> QStAl. tAE/2!(')

I oaoJl ! I 08.M. ! !Dt!M..I
FOOTER
Gambar 4.12 Rancangan halaman home untuk medium device (resolusi
2::992px)
66
Rancangan untuk medium device dengan resolusi layar 2;:992px
ditargetkan untuk pengguna yang menggunakan laptop dengan ukuran
resolusi layar rendah, netbook, dan sebagian PC tablet dengan kondisi
penggunaan landscape. Dalam rancangan ini tidak banyak yang
berubah pada tampilan web, hanya ruang kosong yang berada di sisi
kanan dan kiri diperkecil, namun tidak mempengaruhi posisi dan
komposisi ukuran dari komponen desain web.

67
-------,
1 ,:;::=""'"""=""'"""=.,.,,.,
[~'1
tP"':..1 """"""""""""'"""""""""'"""'"""'""""""""!
I
I!=------------.,, _ _.,,____...---.;II
--------
--"
-----~
:'.'.'.'~-~< 7"] I
.- ~'
___ '
-----...__ i
~
.~
I"""'
i """'-=+
1 ..,.,.,,,,.
I::: ----
-----"------1
1:= I
I:'::""'
@El_]
[---- ---;:;;~-------
---- -----------
Gambar 4.13 Rancangan halaman home untuk small device (resolusi
2:768px)
68
Rancangan halaman untuk layar dengan resolusi ~768px ditargetkan
untuk pengguna dengan perangkat tablet baik digunakan dalam posisi
portrait atau landscape, sebagian smartphone dengan posisi pengunaan
landscape. Pada rancangan ini, bagian header tidak berubah, namun
pada bagian berita, artikel, kolom rektor, agenda, dan footer mengalami
perubahan, yaitu menjadi satu barn grid vertikal, sehingga
mengakibatkan ukuran panjang vertikal dari web bertambah. Komposisi
ukuran pun mengalami perubahan, yaitu pada gambar thumbnail di
bagian berita dan artikel bertambah besar, menyesuaikan dengan
resolusi layar pada perangkat yang digunakan.

69
--
1:=-:c-;-
1c:::::::::...,.,._~----
I------
I ~u~
l::;.;-
------
1
I 11.'UTAlAOi!IYA
'-~""'-'""'""""
---.__ ~7
~.,,,.-
"""'-"""'"
I~ /I l"ilib"">l:l
h------_ ~I
~=/
1:::::::
i;;;:;:,7"
~' .......
10~
I '
~.~
I~ ~I
l/~1
r~~MnF-0. --1
'1 -
r~,,:i 1;:;;;-
1=-~-.,,.
1=::
,_
j KOt,OM ROOPR
::~~
11:~~=:
......,,...l..<J<llfil.,....
l"""'"Q"""'"'-"'
1~J I~
i'-"'-
1~-- 1-"""'"~
1~-~
f'""''""fl ["'"'""~]
~~-
1:=~---1
-I
'1~
~~
;;;-di
l
~
~ ..- -~ .......
A
'
Gambar 4.14 Rancangan halaman home untuk extra small device
(resolusi S768px). A untuk kondisi accordion tertutup, B untuk kondisi
accordion terbuka
70
Rancangan untuk resolusi layar :5768px ditagetkan untuk pengguna
smartphone baik untuk posisi pengunaan portrait atau landscape. Pada
rancangan ini terjadi perubahan pada bagian logo dan nama universitas
berubah ke posisi tengah, komposisi ukuran tulisan diperkecil, bagian
header dimana menu pada header dihilangkan, namun diakomodir
dengan memasukkannya kedalam bentuk tampilan accordion yang akan
muncul jika tombol representasi dari accordion tersebut disentuh. Pada
bagian berita, artikel, kolom rektor, agenda, danfooter tidak mengalami
perubahan signifikan, hanya ukuran dari setiap gambar diperkecil. Efek
yang dihasilkan adalah ukuran panjang vertikal dari halaman akan
bertambah.
b. Halaman Detail
Halaman detail berisi infonnasi detail dari setiap informasi spesifik
yang akan ditampilan pada website. Secara umum, desain halam detail
dibuat secara umum sehingga dapat menyesuaikan dengan setiap materi
informasi yang akan dicantumkan.

71
[s;2l
I/"'
UNIVERS!TAS !SI.AM NEGER! SYAR1F HIDAYATIJLLAH JAKARTA
1!E > ~ >rnE!J.hlM!! >~ >Efil!filill&! > KOtHMIW,I >
JUDUL HALAMAN --------------IMAGE----------
HEADLINE ----------- -------------

Lorom lpsum dclor ITT! emet, o:onsGctel~r adlptsclog elil 11.W. diam nonwnmynl!ID eulnmod !lncldWltut
J11e>et dolcm m11gn11 llfiq@m mt volutpat UI w1$1 enlm ad minim venlam. qlll9 nostrud exerd tlltlen
unamcO!Jlet su~clpl! lobortls 1'11$1 ul allqlllp m:. ea comm.::do coos11qu11t Du!s autem val eum !rluro dolor In
hendrertt to \l\llput11te varn esl111 molosllo torniequal, vol Ilium doloro eu feuglilt null11 fec!!lcl!l 111 wro eros et
11:cwni1m et luslo odlo dli1fll$!llm qui bl!111dll PfllllS!lrrt lllpt11tum :urn delenlt 11ugue duls deloro tu feugalt nuUa
fadllsl. Nam Ub-0.r 1emper cum eol\.!t.1 nobls elotl'Oml optlcn congua nthll lmpardlat doming Id qoorJ mliZ.lm
p!aearat foCllr pos~lm uswn. Typl nen llab<lnt clarttalam tosl!am; Cllt !llllm lagentls In lb qui !aelt eorum
clsrttatam. !rwosllgsllones dumonstmvenmt lactoras tegera me lkm quccl Ulagllllt Sllllplua. Clllritas es\ etiam
pnx;eS3us dyriamlcus, qui sequitur mullltkmam consuotudlum lllelorum. Mlrum est noUlro quern B!lera
gotf\lca. ci1mm nunc pulamus. pan.im clamm. anlsf!0$1lerll ltt!marum ronnas. lwmanHalb per saacula qu!lrta
doelmo et qulntl:I declma. Eodem modo typl. qui num: nobls vldentur parurn ciarl, nsnl sellemnu In Murum.
FOLLOW AGENDA
I NiK SOS!Al l.'E!)!A lllFOOMASl MEliGWN HIFORMASI MENGSIAI INfOIWAS! MS<Ge1m
!!'IKSQS'Al M"D'A
UtJK so~JAL M!i!2!6
f~I
= =
FOOTER
Gambar 4.15 Rancangan halaman detail untuk large device (resolusi
;:>:J200px)
Rancangan halaman detail penataan posisi hampir sama dengan
halaman home akan tetapi halaman detail lebih fokus pada
penyampaian teks untuk detail infonnasi di setiap halaman. Rancangan
halaman detail pada ukuran resolusi ini ditargetkan untuk pengguna
dengan perangkat seperti laptop, desktop PC, dan jenis perangkat lain
dengan resolusi ;:>:1200px. Pada rancangan ini seluruh komponen desain
web berada pada posisi dan komposisi ukuran yang nonnal.

73
~" UNlVERSITAS ISLAM NEGERI SYARIF HIDAYAnJLlAH
~~~~eJ;W;ll!!lli~
JU DUL -----------IMAGE-----------
HEADLINE ----------- -------------

LOl'ilm lpsum dok>f ~ amat conooetotoor ndipls<:ln;i ell!. sed dlem nmrummy nlbh
Gulomod llncid!mt ut laoi'IXit dcbro mal)IUI a!lquam erat V':llulflal. Ul wbl enlm ea
minim venklm. qullJ l'IOS!nd cxen:l taUoo llllem<:tl!pa $U!plt lo!lortl$ nlal Ill ellqulp
!IX on commrnlD ccnsoqmiL outs ootem vcl eum lrluro dcioc In handrerlt In vulpulale
v!lllt esJW mo!Gslkl consoqllllt. vel mum r.lokllil w fD.IJUltit nullil tru:m~1' nt VGm oms
ct nccums!Ul cl ilmlo odl() dlgnbs"n qui ~n pmonent lupl:i\um .ulil dllklflit
wguo duls dolcro ta fougalt nullll fai:!ll!l Nam libl!r!Gmpor cum sokl'.e nobls
eletfend option ~enriua l\lhll lmperdlel doming Id qucd mazlm. plac<!m! to.oar pc!Slrn
M$um. 'fypl non l!benl clart!a11!m lri!illllnl; as\ wiua l<)goollfl in 11!1 qul rectt eorum
c""1WGm. !llVlls!lgatlooes damorui!raverunt toc1cras Jcgoro mo llus quod H!ogool
~oplus. crarttM est euimi proeessus dy;'wllle!IS, qui $4<'!Uflutm\11~li1'lem
eor.suetudium lectorum. !..'Jrum est notnro quam !lttera gothka. quam mine pufumus
parum c!Mam. antopoS1rortl tr.ararum roonu 11\lmanltaUs l"i' ~uln quarb
declma el qulnlll dccima. Ee<tam m~ typl, qui !lllf\Q no1'b vldSf!\ur pnrom d11rl.
flnnt soamnGs In Murum.
FOLLOW
UHt;:~.!:J!ill!8
lITTKSQS1Al!,J~
1-!:lb;OS~-M~
AGENDA
l!ffORMN>l
=
mfOF<M!IS
=
mrof<W.SO
= FOOTER
-- I
Gambar 4.17 Rancangan halaman detail untuk small device (resolusi
?:768px)
Rancangan halaman untuk layar dengan resolusi ?:768px ditargetkan
untuk pengguna dengan perangkat tablet baik digunakan dalam posisi
portrait atau landscape, sebagian smartphone dengan posisi pengunaan
landscape. Pada rancangan ini, bagian header tidak berubah, namun
pada bagian berita, artikel, kolom rektor, agenda, dan footer mengalami
perubahan, yaitu menjadi satu barn grid vertikal, sehingga
mengakibatkan ukuran panjang vertikal dari web bertambah. Komposisi
ukuran pun mengalami perubahan, yaitu pada gambar thumbnail di

74
bagian berita dan artikel bertambah besar, menyesuaikan dengan
resolusi Jayar pada perangkat yang digunakan.
I,,,, -;;;i
[El'
UNIVERSITAS ISL.AM NEGEA!
SYARIF HIDAYATULI.AH JAKARTA
~ ~
JU DUL IMAGE
~ ~
HEADLINE
Lorom lpum1 dolorelt run at consecll:ituer adlp!aclllg
"'"'
om, seddlflm nonummy nlbh eulsmod llncldunt ut
!Mrailt dotora magn1111llquam era! volu!pal ut WW
11nlm lid minim V<inlam, quln norrtrud exerd talion oolm DU minim vanlll!ll, quls nos!rud axm'tl IMloo
ullamcotpllr $USeipll lotlortls nlsl ut e!lqlllp ex 110 llllan1COljler susclpl! lobo~ nls! UI aRqulp &X ea
commcdo tonsequat. Duis 11utom vnl oum lriuro commodo consequat Dulli autam veleum kluro
dolor In Mndrorlt In vulputll!ll v&l!I UHi moleslkl dolor In hendrnrt! In vulputato vallt essa malaatla
consequat vat Ulum dolom eu filll!lh;d null11 faclri!5l!l COMeqUat, vol mum (folom ou tauglat nlllla facllIBls
at vero eros et 11ceums11n at lusto odlo dlgnl5slm qui at varo aros &t 11ctumsan el Justo odlo dfgn!sslm qui
blendlt praesent luptatum Ulil d&lllfllt augua di.Ila hlandll pmesent luptatum zzrtl delenlt augua duls
doloi le feug11lt null.1 flltlll!i.L N11m lib tamper cum dolorc te raugalt nlllla faclll&I, N!llll libar temper cum
soluta nobls ekllfend cptlon conguo l\lllll lmptm:llat saluta no!lls elelfand op<Jon rongue nlhll lmperdl&t
doming Id quod maum pl11cor11t facQr p!l$lllm doming Id q!IOd mazlm pl11cerntfru:eqmsslm
assum. ;ypl non habllnt clarllatem lns!lam; est 115US aasum. Typl non Mbantc!4rUatam ln~llam; esl usus
IGgontb In Us qui faelt ncrum clartlatom. klgantls In b qui feelt aorum cierl!atem.
lnvestlgntlonos <lamoostraverunl tectorM legsm ma lllV8!1lgllllOl'IM damoMtmvarunl lectorns tegern me
llus quod U!Ggunt suplus. Cl!lrltM HI etlam Illa quod Hlogunl saoplus. cttllttas osl ellt!.m
proeassus dynsmlws. qui Hqultur mutallcrwm proceasus dynamleus. qui nqultur mutauonem
ccn~uctudlum l~torum. Mlrum est notaro quom consueludlum lactorum. Mlrum eat no\Bro quam
mtnm gc1111ca. qtiam nune putamus parum ebram. ettem gC!hlea. quam n\11\C pWlmus parum clm'am.
anteposuerll ltltGrarum ftlmms humanllil!ls par 1mtep0!iue11t !lt!l!rnrum ftlrrnas humenlta!l~ par
saaeula quW dec!ma et qulntl!I declma. Eodem aaB(\11:.s quana declma ot qulnta dllclme. Eod&m
modo typl, qui rume nollls \'ldanlur parum clarl, fillnt rncdo typl, qui nune nobls vldantur poom1 citlll, finnl
aoUcmnos lnfllturum. oouemn&S In Murnn1.
FOLLOW US fOLLOWUS
UflliSOSIAIM~ mm SO&ALMED!A
I INK SOSIAI. MEDtA ! INK SOS!At ME!M
! INK SOf~AI MEQl/!, !JNK SO'M! Mf!WI
AGEN AGEN
mfOflM/\SI lllfORMASI
=
ENFOr<MASI ENFO!ll.IJ\S!
=
mf<XW/\SI INfORMASI
=
FOOTER FOOTER
A B
Gambar 4.18 Rancangan halaman detail untuk extra small device
(resolusi :S768px). A untuk kondisi accordion tertutup, B untuk kondisi
accordion terbuka
75
Rancangan untuk resolusi layar ::0:768px ditagetkan untuk pengguna
smartphone baik untuk posisi pengunaan portrait atau landscape. Pada
rancangan ini terjadi perubahan pada bagian logo dan nama universitas
berubah ke posisi tengah, komposisi ukuran tulisan diperkecil, bagian
header dimana menu pada header dihilangkan, namun diakomodir
dengan memasukkannya kedalam bentuk tampilan accordion yang akan
muncul jika tombol representasi dari accordion tersebut disentuh. Pada
bagian berita, artikel, kolom rektor, agenda, danfooter tidak mengalami
perubahan signifikan, hanya ukuran dari setiap gambar diperkecil. Efek
yang dihasilkan adalah ukuran panjang vertikal dari halaman akan
bertambah.
4.1.4.2 Desain Presentasi
Tahap desain presentasi sudah menggambarkan desain tampilan
web dengan menampilkan definisi dari desain web tersebut berupa wama,
posisi, dan tata letak elemen. Desain ini digunakan untuk merancang
berbagai jenis halaman yang akan dibuat.

78
Gambar 4.21 Halaman home untuk small device (resolusi 2':768px)

76
Article
O:her "-rticles
Ko!om R0ktor
Kclorn LalrnyJ
Gambar 4.19 Halaman Home untuk large device (resolusi 2:1200px)

78
Gambar 4.21 Halaman home untuk small device (resolusi 2:768px)

79
Gambar 4.22 Halaman home untuk extra small device (resolusi
::;768px)
80
Gambar 4.23 Halaman home untuk extra small device dengan bagian
atas accordion terbuka
4.1.5 Implementasi
Tahap implementasi adalah tahap pembuatan website ke dalam
bahasa yang dimengerti oleh komputer yaitu HTML, CSS, dan JQuery (lihat
lampiran 2) . Berikut arsitektur proses teknologi responsive web design yang
diwujudkan dalam bentuk pseudocode dan screen capture dari hasil tampilan
website ( ukuran resolusi 1280x800 piksel):

81
a. Pseudocode Arsitektur Responsive Web Design
start
declare media queries
extra small devices (min <768px)
small devices {min ~768px)
medium devices (min Z992px)
large devices (min ~1200px)
declare css
font: 18px /* 100% */
container:00%
css extra small devices
container (width: 767px)
font size: 0.75em /* 18px/24px */
max image: 100%
column: 1
css small devices
font size: 0. 82em /* 18px/22px */
max image: 100%
column: 1
css medium devices
font size: 0.9em /* 18px/20px */
max image: 100%
column: 2
css large devices
container (width: >~1200px)
font size: 1 em /* 18px/18px */
max image: 100%
column: 4
workflow
if {extra small devices)
then load {css extra small devices)
else
then load (css small devices)
else
then load (css medium devices)
else
then load (css large devices)
finish
82
b. Screen Capture Tampilan lmplementasi Pada Resolusi 1280x800 piksel
Gambar 4.24 Halaman Website Bagian Atas
Gambar 4.25 Halaman Website Bagian Tengah
Gambar 4.26 Halaman Website Bagian Bawah

83
Gambar 4.27 Halaman Berita Bagian Atas
Gambar 4.28 Halaman Berita Bagian Bawah
4.2 Pengujiau
Tahapan terakhir dalam penelitian kali ini adalah dengan melakukan
pengujian untuk membuktikan apakah seluruh fungsi berjalan sesuai dengan
rancangan. Pengujian dilakukan dengan blackbox testing. Pengujuan dilakukan
dengan menjalankan website dalam beberapa resolusi, browser, dan perangkat,
berfokus pada persyaratan fungsional (responsive web design pada web) dengan
menggunakan perangkat yaitu:

84
A. Perangkat lunak
I. Sistem operasi Windows 7 Ultimate 32bit, Android Ice Cream
Sandwich, Apple iOS 6.1.2
2. Browser desktop: Google Chrome (versi 34.0.1847.116 m),
Mozilla Firefox 27.0.1, Internet Explorer 11, Opera 22.0.
Browser mobile: Default Browser Lenovo IdeaTab AIOOOT,
Safari iOS 6.1.2, Chrome Mobile.
B. Perangkat Keras
I. Laptop Compaq Presario CQ4 l (1280x800 piksel)
2. Monitor CRT LG Flatron ez T730SH (1024x768 piksel)
3. Komputer Tablet Lenovo ldeaTab AIOOOT (600 x 1024 piksel)
4. Smartphone Apple iPhone 3GS (320x480 piksel)
Tabel 4.12 Pengujian Website
Perangkat
No. Item uji Browser Resolusi Hasil Keterangan
Keras
Halaman Lampiran I
1. Laptop Google Chrome 1280x800 Sukses
Home 1.a
Halaman Lampiran 1
2. Laptop Mozilla Firefox 1280x800 Su kses
Home l.b
Halaman Lampiran 1
'
J. Laptop Internet Explorer 1280x800 Sukses
Home l.c
Halaman Lampiran 1
4. Laptop Opera 1280x800 Sukses
Home l.d
Halaman Monitor Lampiran 1
5. Google Chrome 1024x768 Sukses
Home CRT 2.a
Halaman Monitor Lampiran 1
6. Mozilla Firefox 1024x768 Sukses
Home CRT 2.b
Hal aman Monitor Lampiran l
7. Internet Explorer 1024x768 Sukses
Home CRT 2.c
8. Hal am an Monitor Opera 1024x768 Sukses Lampiran l
85
Home CRT 2.d

Hal am an Lampiran I
9. Laptop Google Chrome 1280x800 Sukses
Kategori I.a
Halaman Lampiran I
IO. Laptop Mozilla Firefox 1280x800 Sukses
Kategori Lb
Hal am an Lampiran J
11. Laptop Intemet Explorer 1280x800 Suks es
Kategori l.c
Hal aman Lampiran I
12. Laptop Opera 1280x800 Sukses
Kategori l.d
Hal am an Monitor Lampiran I
13. Google Chrome 1024x768 Sukses
Kategori CRT 2.a
Halaman Monitor Lampiran I
14. Mozilla Firefox 1024x768 Sukses
Kategori CRT 2.b
Hal am an Monitor Lampiran I
15. Internet Explorer !024x768 Sukses
Kategori CRT 2.c
Hal aman Monitor Lampiran I
16. Opera 1024x768 Sukses
Kategori CRT 2.d
Halaman IdeaTab Lampiran I
17. Default Browser 600x1024 Sukses
Home AIOOOT 3.a
Halaman IdeaTab Lampiran 1
Home AIOOOT 3.a
Hal am an IdeaTab Lampiran I
Kategori AIOOOT 3.a
Halam an IdeaTab Lampiran I
Kategori AIOOOT 3.a
Halaman IdeaTab Lampiran 1
21. Chrome Mobile 600x1024 Sukses
Home AIOOOT 3.b
Halaman IdeaTab Lampiran I
22. Chrome Mobile 1024x600 Su kses
Home AIOOOT 3.b
Hal am an IdeaTab Lampiran I
23. Chrome Mobile 600xl024 Sukses
Kategori 'AIOOOT 3.b
Hal aman IdeaTab Lampirau I
Kategori AIOOOT 3.b
Hal am an iPhone Lampirau I
25. Safari 320x480 Sukses
Home 3GS 4.a
Hal am an iPhone Lampiran I
Home 3GS 4.a
Halaman iPhone Lampiran I
Kategori 3GS 4.a
Kategori 3GS 4.a
Home 3GS 4.b
86

Home 3GS 4.b
31. Chrome Mobile 320x480 Snkses
Kategori 3GS 4.b
Halam an iPhone Lampiran I
Kategori 3GS 4.b
4.3 Perbandingan Website mN Syarif Hidayatnllab Sebelnm dan
Sesndab Menggnnakan Teknologi Responsive Web Design
Setelah dilakukan proses pembuatan dan pengujian website UIN Syarif
Hidayatullah Jakarta dengan responsive web design, selanjutnya penulis
membandingkan website UIN Syarif Hidayatullah Jakarta saat penulisan skripsi
dibuat dengan website yang penulis buat menggunakan teknologi responsive web
design.
Sebelum Sesudah
Dengan resolusi 320x568 piksel Dengan resolusi 320x568 piksel

Bel um mampu beradaptasi dan Mampu beradaptasi dan menyesuaikan
mennyesuaikan tampilan dengan ukuran tampilan dengan ukuran resolusi layar yang
resolusi layar yang berbeda-beda berbeda-beda
BABV
PENUTUP
5.1 Kesimpulan
Berdasarkan hasil penelitian, maka diambil kesimpulan sebagai berikut:
1. Dengan teknologi responsive web design tampilan website dapat
menyesuaikan dengan ukuran dan resolusi perangkat keras yang
berbeda-beda, yaitu dengan melakukan kategorisasi ukuran resolusi
layar dalam 4 kategori yaitu: Large Devices (layar dengan resolusi
2:1200px), Medium Devices (layar dengan resolusi 2:992px), Small
Devices (layar dengan resolusi 2:768px), dan Extra Small Devices
(layar dengan resolusi <768px) dan mengimplementasikan 3
komponen utama responsive web design, yaitu: tata letak fleksibel
berbasis grid, gambar dan media fleksibel, dan media queries.
2. Performa responsive web design dalam beradaptasi pada setiap
jenis perangkat keras dengan ukuran resolusi layar yang berbeda-
beda terbukti baik, yaitu terbukti dengan hasil pengujian yang
penulis lakukan (lihat subbab 4.2). Sehingga dapat disimpulkan
teknologi responsive web design mampu menjadi solusi atas
masalah tampilan website yang kurang proporsional pada saat
diakses dari berbagai macam perangkat keras dengan ukuran
resolusi Iayar yang berbeda-beda.
R7
88
5.2 Saran
Dengan berbagai keterbatasan yang ada, maka penulis memberikan saran
agar nantinya penelitian dengan tema sejenis dapat lebih baik, yaitu :
I. Solusi untuk kurangnya dukungan teknologi responsive web design
terhadap browser yang belum mendukung HTML 5.
2. Perlu adanya pengembangan dan pengujian terhadap berbagai jenis
layar baru dengan tingkat resolusi layar yang dapat disesuaikan
dengan kebutuhan dan inovasi teknologi di masa depan.
3. Pengembangan agar responsive web design tak hanya dapat diakses
dengan smartphone tetapi jugafeature phone.

90
Herbowo, Agus Rahmat. 2012. Web Responsive Design Untuk Situs Berita
Menggunakan Framework Codeigniter. Jakarta: Universitas
Gunadarma.
Knight, Kayla. 2012. Responsive Design. Freiburg: Smashing Media GmbH.
ISBN: 978-3-943075-33-5.
Krug, Steven. 2013. Don't Make Me Think, A Common Sense Approach To Web
Usability. San Francisco: Pearson Education New Riders Publishing.
ISBN: 978-979-024-614-0.
Marcotte, Ethan. 2011. Responsive Web Design. New York: A Book Apart. ISBN
978-0-9844425-7-7.
Pusat Teknologi Informasi dan Pangkalan Data UIN Syarif Hidayatullah Jakarta.
2014. Data Statistik Kunjungan Website UIN Syarif Hidayatullah
Jakarta(! Januari 2014-17 Februari 2014). Diakses 17 Februari 2014.
Simannata, Janner. 2010. Rekayasa Web. Yogyakarta: Penerbit ANDI. ISBN:
978-979-29-1310-1.
Stanley, Morgan Research. 2009. The Mobile Internet Report. New York: Morgan
Stanley Research.
Tim Penyusun. 20 I 0. Pedoman Akademik Program Strata I 2010/2011. Jakarta:
UIN SyarifHidayatullah Jakarta.
Wardana, S.Hut., M.Si. 20 I 0. Menjadi Master PHP dengan Framework
Codeigniter. Jakarta: Elex Media Komputindo. ISBN: 978-9-792781-
89-2
91
Wempen, Faithe. 2011. Step by Step HTML5. California: O'Reilly Media, Inc.
ISBN: 978-0-735-64526-4
Whitten, Jeffrey L, Bentley, Lonnie D. 2007. System Analysis and Design
Methods. New York: McGraw-Hill. ISBN: 978-0-07-305233-5
Wroblewski, Luke. 2011. Mobile First. New York: A Book Apart. ISBN 978-1-
937557-02-7.
Zhang, Chen. 2013. Responsive Website Design for First Unitarian Church and
Louis Kahn. New York: Rochester Institute ofTechnology.
!:illJ;i)J1:spon2ive.ver111ilion.com/co111parc.php diakses pada 11Januari2014
httDs;L/technologvj)ls.com/413235/pc-shiQIIl9l1[s-seHo-declinc-in-2012-for-first-
time-in- I I -ycar0 diakses pada 10 November 2013
hliP.ii!1listapart.co111/articlc/rcsoo_112i_ve-web-design diakses pada IO Oktober 2013
!:ill!) :iich rorn c. blo;.cspot. co m/2009IQ 8/ncw-bcta-w hv-s Io w-dow n-w hen- vo u-
can.hrml diakses pada 2 September 2014
http://ncws.slashdot.org/stoi:y/l 2/ I 0/09/ I 741219/fircfox-16-releascd-morc-l1tml5-
support diakses pada 2 Sepetember 2014
htrp://n1o;dn.m icroso ft.com/ en-11si.1ibrarv/ie/hh673546Lv=vs. 85 ).asffi diakses pada
2 September 2014
h(tps://devclopcrs.;zQ.Q.gle.corn/wcbma$lers/spiartphonc-sites/dcJgils diakses pada
I 0 November 2013
LAMPIRAN-LAMPIRAN
1. LAMPIRAN 1 : ABSTRAK PENELITIAN TEMA SEJENIS
2. LAMPIRAN 2 : SCREEN CAPTURE HASIL PENGUJIAN
3. LAMPIRAN 3 : SOURCE CODE
4. LAMPIRAN 4 : LEMBAR HASIL WAWANCARA
5. LAMPIRAN 5 : SURAT KETERANGAN DOSEN PEMBIMBING
6. LAMPIRAN 6 : SURAT KETERANGAN ID.SET
92
93
LAMPIRANl
ABSTRAK PENELITIAN TEMA SEJENIS
Nama Peneliti Agus Rahmat Herbowo

Tallon Penelitian 2012
Sum ber Penelitian Skripsi Universitas Gunadarma
Web Responsive Design Untuk Situs Berita
.Jndul Penelitiau
Menggunakan Framework Codeigniter
ABSTRAK
Teknologi dan informasi semakin berkembang seiring waktu berjalan
dimulai dari menyampaikan berita melewati media 11011-eletronik hingga
sekarang menggunakan teknologi informasi khususnya melalui situs. Saat
ini mengakses situs berita menggunakan perangkat atau plaiform mobile
seperti smartphone dan tablet meningkat pesat. Semakin banyaknya
perangkat dan plaiform dengan berbagai ukuran, maka sebuah situs perlu
untuk mengenali setiap ukuran perangkat pengguna. Tujuan penulisan ini
membuat web responsive design yang dapat menampilkan halaman situs
sesuai dengan layar perangkat atau platform., sehingga pembaca nyaman
dan mudah membaca konten berita tan pa harus mengeser layar
kesamping. Penulisan ini menggunakan metode kepustakaan untuk
mencari bahan-bahan yang dapat dijadikan referensi kemudian analisis
kebutuhan aplikasi, desain, konstruksi, menggunakan framework
Codeigniter, HTML 5, dan CSS 3 setelah itu tahap pengujian dan
implementasi secara publikasi dengan hosting untuk bisa diakses secara
online kemudian pengujian dilakukan menggunakan perangkat atau
plaiform dengan ukuran layar yang berbeda-beda. Setelah terbuatnya web
responsive design untuk situs berita menggunakan framework
Code igniter maka permasalahan perkembangan perangkat dan variasi
layar terpecahkan oleh teknologi web responsive design selain itu juga
94
mempermudah kerja dari web administrator dalam memperbaharui berita

dan karena pembuatan menggunakanframework Codeigniter maka waktu
pengerjaan pembuatan situs jadi lebih singkat, kode program lebih mudah
dibaca dan menjadi pilihan tepat untuk mempercepat ke1ja teamwork.
Nama Peneliti Chen Zhang

Tahun Penelitian 2013
Sumber Penelitian Thesis Rochester Institute of Technology
Responsive Website Design for First Unitarian
Judul Penelitian
Church and Louis Kahn
ABSTRAK
Responsive Website Design for First Unitarian Church and Louis Kahn is
a thesis project for Master Degree of Fine Arts in Computer Graphics
Design program at the Rochester Institute of Technology. This thesis
project is to design a responsive website for the First Unitarian Church, a
website which has three user experiences: a desktop site, tablet site and a
mobile site. The website audience is architecture or design students,
professors, and enthusiasts. There are three objectives in this thesis
project: first, to design a responsive website for cross-platform
experience for users; second, to provide users a real digital visiting
experience which is immersive and vibrant to First Unitarian Church;
third, to keep the design direction for this whole project the same as
Louis Kahn's architectural design style - disciplined and clean.
95
LAMPIRAN2
SCREEN CAPTURE PENGUJIAN TAMPILAN WEBSITE
1. Laptop Compaq Presario CQ4 l

(1280x800 piksel)
a. Google Chrome
b. Mozilla Firefox
96
2. Monitor CRT LG Flatron ez

T730SH (I 024x768 piksel)
a. Google Chrome
d.
b. Mozilla Firefox
98
j!_\j
4. Smartphone Apple iPhone 3GS

(320x480 piksel)
a. Safari
Hw,,.;,,,, w ,u', ;;,, :C:.;r;

tr,,)HLi'.r,v:, S('t;,F;, !',;" LJSI f;l'FI .>i:'~Jl;;r
,h,- tLr-;q,;;; ih;u Ff' ,;01;ur

'1'-FI ;YlJ;
i;< rr-~1_.,,-,,~ Ji':,)' Y;;. ,a dv1
f'-'.l'.U! pucpbc!;a~, nJs;-;;1.;il Jt \'iY'g
99
b. Google Chrome Mobile

<- !9216810-11 = f[!J
~ 192.1G81D41
"*"' 192.108104 1
.,,., rv ,-,. - nr.-.;;.;, -- ;:<,<''

-n_,-i;l.n ''-' )li,.<h px.L
-,,,, lh' 1',-1 J<, ~I '-c- ;, r-t ,qh-
V ,_ -1r;; ""'I'-'-":;--"'
<- 192 108 104 1

LAMPIRAN3
SOURCE CODE
<script
1. Index.php src="dist/js/bootstrap.js"></script>
<?php <script
error _reporting(E_ALL " E_NOTICE}; src"'" di st/ j s / dropdown. js'' ><I script>
require_once("admin/class/tampil/beri </head>
ta-index.php"); <body>
$news "' new Derita(); <div class,."container header-logo">
?> <a href="index.php"
<IOOCTYPE html> style,,"color:black; ">
<I -- <img
To change this license header, choose src="img/logo.png" />
License Headers in Project Properties. <h3>Universitas Islam Negeri
To change this template file, choose Tools Syarif Hidayatullah Jakarta</h3></a>
[ Templates </div>
and ,
__ open the template in the editor. <l-- Static navbar -->
<div class="navbar navbar-default
<html lang=Nen"> navbar-static-top" role="navigation">
<head> <div class,,."container">
<meta charset="utf-8"> <div class="navbar-header">
<meta http-equiv"X-UA-Compatible" <button type,."button"
content="IE=edge" > class="navbar-toggle" data-
<meta name="viewport" toggle="collapse" data-target=".navbar-
content=' width=device-width, initial- collapse">
scale=l .0' > <span class,,,"sr-
<meta name="keywords" only">Toggle navigation</span>
content="state islamic university, Islamic <span class="icon-
Studies, Islamic collage, UIN Jakarta, bar"></span>
Universitas Islam Negeri, Syarif <span class="icon-
Hidayatullah," /> bar"></span>
<meta name,."description" <Span class="icon-
content,."UIN syarif Hidayatullah Jakarta, bar"></span>
"Leading Toward Research </button>
University"" /> <div class="responsive-
<link rel="shortcut icon" logo">
href="img/favicon.ico"> <img
<title>Welcorne to UIN Syarif src="img/logo.png" />
Hidayatullah Jakarta</title> <h3>Universitas Islam Negeri Syarif
<I-- Bootstrap core CSS --> Hidayatullah Jakarta</h3>
<link href="dist/css/bootstrap.css" </div>
rel:"stylesheet"> <I-- <a
<link href="dist/css/main.css" class="navbar-brand" href="#" >Project
rel="stylesheet"> name</a>-->
<I-- Bootstrap core JavaScript </div>
<div class="navbar-collapse
====:== --> collapse">
<script
src="https://code.jquery.com/jquery-
1.10. 2.min. js"></script>
<ul class.,"nav navbarnav"> <li><a href="#">Arsip Derita UIN

<Ii Jakarta</a></li>
class="dropdown"> </ul>
<a href=-"#" </li>
class="dropdown-toggle" data- <li
toggle="dropdown">About Us <b class="dropdown">
class=" caret" ></b></a> <a href="#"
<ul class="dropdowntoggle" data-
class="dropdown-menu"> <li><a toggle="dropdown">Academics <b
href,,.." ?p.,,about-us">Tentang UIN class,,."caret"></b></ a>
Jakarta</a></li>
<li><a href.,"#">Hymne UIN Jakarta</a></li> class="dropdownmenu">
<li><a href="~t">Struktur <li><a href="#">Sl Undergraduate</a></li>
Organisasi</a></li> <li><a href="ll">52 Postgraduate</a></li>
<li><a href="#">Susunan Organisasi</a></li> <li><a href="#">Pembiayaan 51</a></li>
<li><a href,,,"#">Pembiayaan 52</a></li>
101
<li class="dropdown-submenu"> <li

<a href="#" class="trigger right- class="dropdown">
caret" >Fakul tas</a> <a href="#"
<ul class="dropdown-menu sub-menu"> class="dropdown-toggle" data-
<?php toggle="dropdown">Contact Us <b
foreach($news->menuFakultas() as class="caret"></b></a>
$row): <ul
$kcl = strtolower($row('nama']); class="dropdown-menu">
$pe = explode(" ",$kcl); <li><a href="#">Map</a></li>
$gb = implode("-",$pe); <a 'nref="#">Alamat</a></li>
?> <li><a
<li><a href="?p=fakultas&f=<?php echo $gb; href="W'>Email</ a></li>
?>R><?php echo $row['nama']; ?></a></li> </Ul>
<?php endforeach; ?> </li>
</ul> </ul>
</li> </div><l--/.nav-collapse
<li><a href="ft">Kalender Akademik</a></li>
<li><a href="1t">Pedoman Akademik</a></li> </div>
<li><a href="1f">SKS</a></li> </div>
<li><a href="#">Double Degree</a></li> <?php
<li><a href.. "ff">Portal AIS</a></li> switch($_GET[ 'p'] }{
<li><a href="#">Beasiswa</a></li> case "about-us":
</ul> case "organisasi":
</li> case "jalur-
<li penerimaan":
class="dropdown"> case "kampus":
<a href.. "#" case "pusat-
class="dropdown-toggle" data- penelitian":
toggle="dropdown">Penerimaan <b case "fakultas":
class="caret"></b></a> case "berita":
<Ul case "artikel":
class,,,"dropdown-menu" > case "kolom-
<li><a href=" ?p=jalur-penerimaan" >Jalur rektor":
Penerimaan</a></li>
<li><a href="it''>Biaya Perkuliahan</a></li> include("admin/komponen/depan/statis.
<li><a href="tt">Portal SPMB</a></li> php");
</ul> break;
</11> default:
<li include ( "admin/ komponen/ depan/home. ph
class.,"dropdown"> p");
<a href="#" break;
class="dropdown-toggle" data-
toggle="dropdown">Campus <b ?>
class,." caret" ></b></ a> <div class,,,"pre-footer">
<Ul <div class="container">
class="dropdown-menu"> <div class="row">
<li><a href="#">Fasilitas</a></li> <div class="col-md-6
<li><a href="#">Peta & Lokasi</a></li>
<li><a href="tt">Perpus Utama</a></li> <113 class="title-
<li><a href,."#">Pusat Lab Terpadu</a></li> home">Follow Us :</113>
<li><a <h4 class="pre-
href="'ft">Puskom UIN Jakarta</a></li> foater-linkn><a href="n>Facebook</a></h4>
</ul> <h4 class="pre-
</li> footer-link" ><a href="" >TWitter</a></h4>
<li <h4 class="pre-
class="dropdown"> footer-link"><a href="">News
<a href="tt" Center</a></h4>
class,,"dropdown-togglen data- </div>
toggle="dropdown">Penelitian <b <div class="col-md-6
class="caret"></b></ a>
<ul <h3 class="title-
class="dropdown-menu"> home">Agenda</h3>
<li><a href=" ?p=pusat-penelitian">Pusat <h3 class="title-
Penelitian</a></li> home" >29 Januari 2014</h3>
<li><a href="#">Journal Library</a></li> <P class="agenda-
<li><a href="fl-">Naskah Nusantara</a></li> time">09. 00 - 14.00 WIB</P>
<li><a href="it" >Pusbangsitek</a></li> <h4 class="agenda~
<li><a href="#">Repository UIN title">Seminar Lorem Ipsum</h4>
Jakarta</a></li> <hS class="agenda-
</ul> place">Auditorium Prof. Harun Nasution</hS>
</li> <P
class,.,"moredetail-agenda" ><a
102
href="#" >&nbsp ; Detail <P class="link-

</a></p> text"><a href="lt">Pusat 8ahasa</a></p>
</div> <p class="link-
<div class="col-md-6 text"><a href="#">CSRC</a></p>
col-lg-3"> <P class="link-
<h3 class="title- text"><a href,,"#''>Madrasah
home" > </h3 > Pembangunan</a></p>
<h3 class="title- <p class="link-
home">l-28 Februari 2014</h3> text"><a href="#">PUSKOM UIN
<p class="agenda- Ja'Karta</a></p>
time ">09. 00 - 14.00 WIB</p> <p class="link-
<h4 class="agenda- text"><a href="if">Naskah Nusantara</a></p>
title">Pendaftaran SPMB</h4> <p class="link-
<hS class="agenda- text"><a href="#''>lembaga Peningkatan dan
place">Gedung Akademik UIN Jakarta</hS> Jaminan Mutu (LPJM)</a></p>
<p <p class"'"link-
class="moredetail-agenda" ><a text"><a href="#">Pusat laboratorium
href=" #" > Detail Terpadu</a></p>
&nbsp ;&nbsp ; </a></p> <P class="link-
</div> text"><a href="#">Journal Library UIN
<div class="col-md-6 Jakarta</a></P>
col-lg-3"> </div>
<h3 class="title- <div class="col-md-6
home" > </h3> col-lg-3">
<h3 class,,,"title- <h3 class="title-
home">4 Maret 2014</h3> home"> </h3>
<p class,,,"agenda-time">09.00 - 14.00 <p class="link-
WIB</p> <h4 text"><a href="#">Repository UIN
class="agenda-title">Wisuda 93</h4> Jakarta</ a></p>
<hS class="agenda- <p class="link-
place">Auditorium Prof. Harun Nasution</h5> text"><a href="W'>Pusbangsi tek</a></p>
<p <p class="link-
class="moredetail-agenda" ><a text"><a href="#">International
href= "#" > Detail Office</a></p>
u </ a></p> <p class="link-
</div> text"><a href="#">Pusat Penelitian</a></p>
</div> text"><a href="#">Pusat Pengabdian Kepada
</div> Masyarakat</a></p>
<div classu"real-footer"> <p class="link-
<div class="container"> text"><a href="tt">E-SKP</a></p>
<div class="row"> <p class="link-
<div class="col-md-6 text"><a href="W'>Satuan Pemeriksa
col-lg-3"> Internal</a></p>
<img width:"80" <p class="link-
alt="logo UIN" src,,,"img/logo.png" /> text"><a href="W'>Academic Information
<h4 class="title-home">UIN Syarif System</a></p>
Hidayatullah Jakarta</h4> <p class="link-
<p class=~agenda text"><a href="#">Portal SPMB
place">Jl. Ir. H. Juanda No.95 Ciputat Mandiri</a></p>
15412</p> </div>
<P class="agenda- <div class="col-md-6
place">Jakarta Indonesia</p>
<p class="agenda- <h3 class="title-
place">Telp. (021)7401925</p> home">Sites</h3>
<P class="agenda- <p class="link-
place" >humas@uinjkt.ac.id</p> text"><a href="#">About Sites</a></p>
<div class"'"col-md-6 text"><a href="#">Site Map</a></p>
col-lg-3"> <p class="link-
<h3 class="title- text"><a href.. "#">Karir</a></p>
home">Internal Links</h3> <p class="link-
<p class="link- text"><a href="#">Arsip Derita
text"><a href,."#">Perpustakaan Utama</a></p>
Utama</a></p> </div>
<p class .. "link- </div>
text"><a href="#">Pasca Sarjana</a></p> </div>
<p class="link- </div>
text" ><a href="#">PPIM</a></p> </body>
</html>
WAWAN CARA RISET SKRIPSI
WEB RESPONSIVE DESIGN UNTUK PERGURUAN TINGGI MENGGUNAKAN
FRAMEWORK BOOTSTRAP
(STUDI KASUS UIN SYARIF HIDAYATULLAH JAKARTA)
Tanggal : .'?:l.::J0?:.J..::-.... 2014

Narasurnber : .A l!.P.1/.1!.:- .+.tr..... .
Jabatan : . K..<?Qf.. .. f.".>.P.~~ ~!'
Pertanyaan I
Pewawancara : Apa platfonn teknologi yang digunakan di website UIN Syarif
Hidayatullah saat ini?
Narasumbcr : . .JOc.Ml-.!\:;..P,Hf,.f\'\~{S.&.\..: ............................................................... .
Pe1tanyaan 2
Pewawancara : Apakah selarna ini a<la kendala pada masalah antannuka/tampilan website
UIN SyarifHidayatullah Jaka1ta?
Narasurnber :1.~fl "~. k1.4!1'?. {-ef.\'\"\... .~M-~-~,. \aj;_\!:0-.. #.~~~~.~'A~~.. f.0!!~.~~ _o.t
\\fto\oi\( M<11S11- k.f\lS (;OOW J.<1,.._ be).vV.. \/is.:; Viflro.a.o.yifwJ>i.
Pertanyaan 3
Pewawancara : Apakah saat ini website UIN Syarif Hidayatnllah Jakarta sudah bisa
diakses dari berbagai rnacam perangkat mobile? Apakah ada website
dengan versi mobile?
Narasurnber : .t;wlci~ .. k-15.0.. -~-f.. \e.\u\i\'l.. ~?w.1.C1'.~.. ~~- ~~ !f.\':'.~ .. -~~.?~'-~- ..
Pcrtan ya an 4
Pewawancara : Menurut Anda apakah website dengan dua versi tampilan (desktop dan
mobile) efektif untuk memenuhi kebutuhan pengguna dan kernudahan saat
diakses?
N arasurn ber :-~--~~t!Y\1t:;t;;!:tt:Z~~-l. . ~l~ ~~!~.~:..~r..~"} ..
Pertanyaan 5
Pewawancara : Bailalmana n1enun1t An<la narl:i cles;;iin t:lrnnllnn we:h~ite: vt1no- m:::Jmnn
Narasumber
Pertanyaan 6
Pewawancara : Apakah Anda mengetahui mengenai teknologi responsive web design?
Narasumber : .W.l~'j.h!M ... ......................................................................
Pertanyaan 7
Pewawancara : Apakah dari pihak pengelola website (PUSTIP ANDA) herencana
menerapkan teknologi responsive web design pada website UIN Symif
Hidayatullah Jakarta? . ~ fl,\j~
Narasumber : .SK~<h .. ~0:~~.c:-.r..Y.t~.~ .. ~0...erv.~~.ee ..~ ....~.".": ... Y'."-...... -
Pertanyaan 8
Pewawancara : Menurnt Anda seberapa pentingkah penerapan teknologi responsive web
design pada website UIN Syarif Hidayatullah Jakarta saat ini? Mengingat
angkat pertumbuban penggunaan perangkat mobile untuk akses internet
yang semakin tinggi.
: ~~~;-t1j 1~~t\J~:rtiAi~~~;;- &';?it4'~r1.

Narasumber 17
Pewawancara Narasumber
Fadlan Reza
KEMENTERIAN AGAMA
UNlVERSITAS ISLAM NEGERI (UIN)
Ill 111111- SYARIF HIDAYATULLAI-I JAKARTA
U II I
Telp. (62-21) 7401925 Fax (62-21) 7402982
Juanda No. 95 Ciputat 15412 Indonesia Webs ite:www.uinjkt.ac. id: E-mail: info@u injkt.ac. id
SURAT KETERANGAN
Un.Ol/P.Kom/OT.01.3/ <;a '/2014
Yang bertanda tangan dibawah ini menerangkan bawa yang tercantum dibawah ini
Na ma : Fadlan Reza
NIM : 108091000065
Jurusan/Semester : Teknik lnforrnatika /XI (sebelas)
Adalah benar telah melakukan penelitian I wawancara pada Pusat Teknologi lnformasi
dan Pangkalan Data (PUSTIPANDA) UIN Syarif Hidayatullah Jakarta untuk keperluan tugas
akhir/skripsi.
Demikian, surat keterangan ini dibuat agar dapat dipergunakan sebagaimana
mestinya.
Jakarta, 21 Juli 2014

Fadlan Reza FST

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Fadlan Reza FST

Diunggah oleh

Hak Cipta:

Format Tersedia

r=='"""""'=-"'=~~..,, ~~-.

PROGRAM STUDI TEKNIK INFORMATIKA

PROGRAM STUD! TEKNIK INFORMATIKA

WEB RESPONSIVE DESIGN UNTUK PERGURUAN TINGGI

(Studi Kasus : UIN Syarif Hidayatullah Jakarta)

Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer

Fakultas Sains dan Teknologi

UIN SyarifHidayatullah Jakarta

Pembimbing I, Pembimbing II,

Viva Arifin MMS Arini, MT

DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI !NI BENAR-

BENAR HASIL KARYA SENDIRI YANG BELUM PERNAH DIAJUKAN

SEBAGAI SKRIPSI ATAU KARYA ILMIAH PADA PERGURUAN TINGGI

ATAU LEMBAGA MANAPUN.

Jakaita, September 2014

Angka akses website VIN Syarif Hidayatullah Jakarta dengan menggunakan

Kata kunci : Website, Responsive Web Design, Resolusi Layar, Mobile,

Jakarta, September 2014

1.1 Latar Belalumg

Vniversitas Islam Negeri Syarif Hidayatullah Jakarta sebagai lembaga

pendidikan tinggi dengan arah pengembangan menuju universitas kelas dunia

sebagaimana ditulis dalam Buku Pedoman Akademik tahun 2010-2011, VIN

Syarif Hidayatullah Jakarta menjadi jendela keunggulan akademis Islam

Indonesia (window of academic excellence of Islam in Indonesia) dan barometer

perkembangan, pembelajaran, penelitian, dam kerja-kerja sosial yang

diselenggarakan kaum Muslim Indonesia dalam berbagai bidang ilmu (Tim

yang menerapkan teknologi terbam sebagai jendela awal pencarian informasi

mengenai VIN Syarif Hidayatullah di dunia internet. Website sebagai media

informasi yang penting guna mendukung kelancaran informasi dan komunikasi

Hidayatullah Jakarta (Tim Penyusun Pedoman Akademik, 20 I 0: 23).

Hasil observasi yang dilakukan pada website VIN Syarif Hidayatullah

menerapkan teknologi responsive web design. Data statistik kunjungan

mengakses (Data Primer PUSTIPANDA Statistik Website VIN Syarif

Fenomena bertambahnya jenis perangkat keras dengan beraneka variasi

menggunakan internet secara mobile berdampak pada masalah mengenai faktor

Semakin banyaknya perangkat yang muncul dengan berbagai ukuran, maka

Dalam bukunya Responsive Web Design pada 2011, Ethan Macotte

memperkenalkan teknologi Responsive Web Design sebagai solusi untuk

bagaimana membuat sebuah website mampu untuk mengenali ukuran perangkat

ukuran perangkat pengguna, tanpa mernsak tampilan website tersebut, sehingga

menggunakan framework Bootstrap untuk perancangan tampilan website UIN

Syarif Hidayatullah Jakarta, Bootstrap dikembangkan oleh Twitter. Bootstrap

menjadi framework responsive web design terpopuler dengan menjadi proyek

Dalam penerapannya Bootstrap membagi kategori ukuran resolusi perangkat ke

1.6 Sistematika Penelitian

Dalam penyusunan tugas akhir ini, penulis menyajikan badasan dalam

Bab ini akan diuraikan tentang latar belakang, perumusan

masalah, batasan masalah, tujuan penelitian, manfaat

penelitian, dan sistematika penulisan.

BABil LANDASAN TEORJ:

Bab ini akan diuraikan mengenai landasan teori yang

digunakan dalam pembahasan penulisan skripsi ini dan

sumber landasan teori tersebut.

BABilI METODOLOGI PENELITIAN

Bab ini berisikan metode dan tahap-tahap yang akan

digunakan dalam penelitian tugas akhir atau skripsi.

BAB IV HASIL DAN PEMBAHASAN

Bab ini akan diuraikan dan membahas proses perancangan

dan pengembangan antarmuka (user inteiface) website

dengan teknologi responsive web design yang meliputi

hasil dari metodologi penelitian yang telah dilakukan.

BABV KESIMPULAN DAN SARAN

Bab ini akan disajikan kesimpulan dan saran-saran yang di

r=='"""""'=-"'=..,, -.