DESAIN WEB

UJIAN AKHIR SEMESTER

PENGGABUNGAN LAPORAN REDESAIN HALAMAN WEB

Tri Wulandari
M3119085
TI D

PROGRAM STUDI TEKNIK INFORMATIKA

SEKOLAH VOKASI
UNIVERSITAS SEBELAS MARET
SURAKARTA
2020
 DAFTAR ISI

DAFTAR ISI...............................................................................................................................................2
A. ANALISIS WEB.................................................................................................................................3
B. DESIGN BRIEF................................................................................................................................18
TEMPLATE DESIGN BRIEF...............................................................................................................18
LAMPIRAN..........................................................................................................................................22
1) Referensi Layout........................................................................................................................22
2) Website UNS.............................................................................................................................24
3) Sitemap......................................................................................................................................25
4) Bahan.........................................................................................................................................25
5) Tools..........................................................................................................................................26
6) Tahap Pengerjaan.......................................................................................................................26
7) Wireframe..................................................................................................................................26
C. DESAIN COLOR..............................................................................................................................27
 Perancangan Wireframe/UI...........................................................................................................27
 Pemilihan Kode Warna Dan Implementasi Pada Wireframe.........................................................27
 Arti Filosofi Warna........................................................................................................................31
D. DESAIN JAVASCRIPT....................................................................................................................32
 Bagian Yang Akan Diberi Jquery..................................................................................................32
 Bahan Untuk Jquery Web..............................................................................................................33
 Tutorial..........................................................................................................................................34
E. TEKNIK KOMPRESI KONTEN......................................................................................................43
 Perbandingan Antara File Asli dan File Kompresi.........................................................................43
 Pembahasan Hasil File Kompresi..................................................................................................46
F. METODE DESAIN LAYOUT..........................................................................................................48
DAFTAR PUSTAKA................................................................................................................................54
 A. ANALISIS WEB

Website : https://biologi.fkip.uns.ac.id/
1.

https://www.seoptimer.com/
2. https://www.woorank.com/
3. https://sitechecker.pro/
KESIMPULAN
A. https://www.seoptimer.com/
1. Result : D-
2. SEO : C-
- Title tag : seharusnya tidak panjang cukup 10-70 karakter termasuk spasi).
- Termasuk kesalahan atribut di tag image
- Tidak ada tag deskripsi meta
- Beberapa link tidak mudah dicari. Solusinya dapat dikurangi panjang kalimat, nama
file, string, karakter special.
- Tidak menggunakan tools analisis website, yang dapat memperbaiki lalu lintas data
pada page.
3. Usability : B
- Button/links kurang besar untuk pengguna touchscreen.
4. Performance : F
- Waktu respon lambat, faktornya meliputi mesin server web dan routing rules yang
membuat responsive.
- Ukuran file terlalu besar, harusnya kurang dari 5mb, soalnya dapat mengurangi
kecepatan akses dan berdampak pada user experience.
- GZIP Compression tidak ada, padahal dapat mengurangi ukuran file dan
mempercepat page.
5. Social : F
- Tidak ada sosial media yang tehubung dengan web.
6. Security : D+
- Tidak menggunakan versi https (ssl secure).
- Ditemukan alamat email, hal ini sangat riskan terhadap adanya spam
7. Technology
- Apache, merupakan software web server yang open source.
B. https://www.woorank.com/
SCORE PENILAIAN : 45
ON PAGE
1. Content : Kurang dicantumkan meta tag. Meta data digunakan oleh browser
(bagaimana cara untuk menampilkan konten),mesin pencari, atau pelayanan web
lainnya.
2. Indexing : Untuk URL, semua versi halaman tidak mengarah ke URL yang sama
(terjadi duplicate content).
3. Mobile : Link dan buttons sangat kecil dan sangat sulit dijangkau pada perangkat
seluler, solusinya adalah gunakan google’s Lighthouse Tool.
4. Structured Data : Tidak menggunakan Schema.org, karena hal ini akan membuat
menurunnya lalu lintas website dan menurunnya keterikatan/ketertarikan pengunjung.
Hal ini dapat di atasi dengan memakai Google’s intro to structured data. Selain itu,
web ini tidak memiliki tag open graph yang dapat terhubung ke facebook guna
mengetahui rating pengunjung.
5. Performance : Tidak menggunakan analytic tool.

OFF PAGE
1. Backlinks (Tautan balik) : nilainya rendah. Link pada umumnya sangat penting dalam
SEO (Search Engine Optimization). Dengan backlinks kita dapat terhubung atau
meloncat ke informasi/halaman lainnya.
2. Profil Sosial : tidak ada media sosial yang bertautan dengan web.

C. https://sitechecker.pro/
 Deskripsi kosong
Menulis deskripsi meta yang baik adalah elemen penting dari praktik SEO yang baik.
Jika kata kunci yang terkandung dalam deskripsi meta cocok dengan kueri pengguna,
mereka muncul dalam huruf tebal - menandakan kepada pengguna bahwa halaman
tersebut kemungkinan besar sangat relevan.
 Kesalahan tag H1
Tag h1 memiliki level tertinggi dalam hierarki judul dokumen HTML. Orang dapat
menganggap judul ini sebagai elemen yang merupakan garis besar dokumen.
 Judul yang sama
Dari perspektif SEO, tag judul halaman (terletak di kepala dokumen HTML) adalah
salah satu area konten yang paling penting, mengingat bahwa judul mengumumkan
atau menjelaskan secara singkat konten yang ditemukan pada halaman yang sesuai.
Hindari judul berulang atau boilerplate. Penting untuk memiliki judul yang berbeda
dan deskriptif untuk setiap halaman di situs Anda. Solusinya adalah memperbarui
judul secara dinamis untuk lebih mencerminkan konten halaman yang sebenarnya
 B. DESIGN BRIEF

TEMPLATE DESIGN BRIEF

Project name : Redesain Web Pendidikan Biologi UNS
Client’s name : Program Studi S1 Pendidikan Biologi UNS
Designer’s name : Tri Wulandari M3119085

Project overview and scope

Redesain ini betujuan untuk memperbaiki web sebelumnya yang memiliki catatan negatif
seperti : judul halaman yang terlalu panjang, link & buttons yang terlalu kecil, tidak ada
media sosial yang bertautan, dan kurangnya efisiensi dalam menggunakan ruang sehingga
menyulitkan pembaca untuk menemukan topik secara spesifik.

Project goals and objectives

Hasil dari redesain web akan lebih dinamis dan fleksibel dengan menggunakan
judul/kalimat yang tidak terlalu panjang dan mudah dibaca dengan font yang tidak terlalu
rumit. Link dan Button akan dibuat lebih besar dan di desain semenarik mungkin. Pada
media sosial akan diberikan ikon yang bertaut pada media sosial prodi biologi. Untuk
ruang baca akan ditambahkan blank space agar pembaca tidak kelelahan saat membaca
artikel.

Company and brand overview

 How big is the company and its market?
Web tersebut berskala nasional tekhusus prodi Biologi UNS.

 What makes the company unique?

Program studi Pendidikan Biologi merupakan salah satu program studi yang
bernaung di bawah jurusan Pendidikan Matematika dan Ilmu Pengetahuan Alam FKIP
UNS. Program studi Pendidikan Biologi berasal dari jurusan Ilmu Hayat Fakultas
Keguruan dan Ilmu Eksakta (FKIE) IKIP Negeri Surakarta yang berdiri dengan SK
Menteri Pendidikan Nasional No. 316/SK.Pet/BRI/66 tertanggal tertanggal 23-1-1966.
 Pada tahun 1976, melalui SK Presiden No. 5 tahun 1976 tertanggal 1 maret
1976 diresmikan berdirinya Universitas Sebelas Maret Surakarta dengan IKIP Negeri
Surakarta melebur sebagai bagian dari Universitas Sebelas Maret tersebut. Satu tahun
kemudian berdasarkan SK Rektor UNS no 4/P.1/000/1977 nama baru untuk Jurusan
Ilmu Hayat  diubah menjadi Jurusan Ilmu Biologi. Pada tahun 1982 melalui SK
Presiden No. 55 tahun 1982 mengenai peleburan Fakultas Ilmu Pendidikan (FIP) dan
Fakultas Ilmu Keguruan (FKg) menjadi Fakultas Keguruan dan Ilmu Pendidikan
(FKIP).
Berdasarkan SK Dirjen Dikti No. 39/DIKTI/ Kep/1984 Jurusan Biologi
mengalami perubahan status dan nama menjadi Program Studi Pendidikan Biologi di
bawah Jurusan Pendidikan MIPA hingga saat ini.Program studi Pendidikan Biologi
beralamat di Gedung D kompleks gedung FKIP Universitas Sebelas Maret Jl. Ir
Sutami No 36 A Kentingan, Jebres, Surakarta. Telp. (0271) 646994 fax (0271) 646655.

What's their mission and vision?

 Misi
 Melaksanakan penelitian dan pengembangan bidang pendidikan biologi yang
berorientasi pada publikasi bereputasi.
 Menyelenggarakan layanan pengabdian kepada masyarakat dalam bidang biologi
dan pendidikan biologi.
 Mengembangkan edupreunership di bidang pendidikan biologi.

 Visi

 Menghasilkan sarjana pendidikan biologi yang memenuhi kualifikasi dan standar

kompetensi.
 Menghasilkan pengembangan ilmu pengetahuan dan teknologi dalam bidang
pendidikan biologi.
 Menghasilkan produk layanan masyarakat berbasis penelitian dalam biologi dan
pendidikan biologi.
 Menghasilkan produk pengembangan di bidang biologi dan pendidikan biologi.
Target audience
 Persona documentation (kebutuhan informasi)
Dalam web tersebut menghadirkan sejumlah informasi mengenai program studi
Pendidikan Biologi yang meliputi profil,akademik,jurnal ilmiah,
galeri,mahasiswa,angket kepuasan, dan akreditasi.
 Demographics (lokasi persebaran masyarakat)
Kebanyakan yang sering mengakses web ini adalah masyarakat yang berkecimpung di
dunia akademik seperti : dosen,mahasiswa,alumni,orang tua mahasiswa.
 Age, gender, location, etc…
Web ini baik disajikan kepada semua kalangan masyarakat terutama para pemuda
yang akan melanjutkan studi ke jenjang perguruan tinggi.
 Psychographics (ada perlakuan khusus atau tidak untuk kebutuhan masyarakat tertentu
dalam web tsb)
 Social media of choice (perlu diberikan tdk alternatif media ini)
Perlu adanya media sosial yang bertaut dengan alamat web tersebut agar para
pengunjung dapat lebih luas dalam memperoleh informasi.
 Hobbies (masyarakat yg suka hobby tertentu misalnya bisa direkomendasikan pada
web ini)
 Habits (kebiasaan masyarakat akan kaitannya dengan penyajian informasi di web ini)
Biasanya para masyarakat seperti orang tua akan mencari-cari info terkait jurusan
kuliah yang cocok untuk anaknya. Begitupula dengan calon mahasiswa, mereka akan
menggali informasi yang lebih dalam terkait jurusan yang akan diambil ketika kuliah.
 Pain points (poin khusus lainnya yg perlu diberikan kepada masyarakat melalui web
ini)
Di web ini terdapat prospek kerja, kegiatan mahasiswa di masyarakat, karya
mahasiswa dan sebagainya. Hal ini akan membuka pengetahuan masyarakat mengenai
bidang keilmuwan biologi. Masyarakat akan lebih percaya dan tertarik untuk dapat
menuntut ilmu di program studi Pendidikan Biologi.

Milestones and schedule

1) Membuat perancangan & wireframe web
2) Membuat kombinasi warna pada layout
3) Membuat blok JQuery di halaman utama web
4) Membuat konten informasi di halaman utama
5) Mengenal layout web
 Milestones 1
 Goal: membuat perancangan & wireframe web
 Timeline/deadline: 1 minggu
 Client feedback due: -
 Deliverable: online (SPADA)
 Cost: -

 Milestones 2
 Goal: membuat dan memilih warna layout halaman utama web
 Timeline/deadline: 1 minggu
 Client feedback due: -
 Deliverable: online (SPADA)
 Cost: -

 Milestones 3
 Goal: membuat blok jQuery di halaman utama web
 Timeline/deadline: 1 minggu
 Client feedback due: -
 Deliverable: online (SPADA)
 Cost: -

 Milestones 4
 Goal: membuat konten informasi di halaman web
 Timeline/deadline: 1 minggu
 Client feedback due: -
 Deliverable: online (SPADA)
 Cost: -
  Milestones 5
 Goal: halaman web lengkap dengan header,navigasi,konten dan footer.
 Timeline/deadline: 1 minggu
 Client feedback due: -
 Deliverable: online (SPADA)
 Cost: -

Budget
@minggu = 3x170 menit

Deliverable
Online (SPADA)

Stakeholders and review process

Online (SPADA)

LAMPIRAN

1) Referensi Layout
a. enweb.iu.edu.sa
b. Islamic.relief sebagai referensi footer
2) Website UNS
3) Sitemap

4) Bahan
Pendidikan Biologi FKIP UNS Gedung D Lantai 3 FKIP Universitas Sebelas Maret Jl.
Ir Sutami No 36 A Kentingan Surakarta Kode Pos 57126
TELEPHONE : (0271) 669124 / 648939
EMAIL : biologi@fkip.uns.ac.id

5) Tools
 Coreldraw X7

6) Tahap Pengerjaan
a. Membuat perancangan & wireframe web
b. Membuat kombinasi warna pada layout
c. Membuat blok JQuery di halaman utama web
d. Membuat konten informasi di halaman utama
e. Mengenal layout web dan melengkapi halaman web
7) Wireframe
 C. DESAIN COLOR

 Perancangan Wireframe/UI

 Pemilihan Kode Warna Dan Implementasi Pada Wireframe

 #FFFFFF dengan #000000

 #000000 dengan #BOAEAD

 #000000 dengan #AAEDFF

 #000000 dengan #A6E4A8
  Arti Filosofi Warna
Penggunaan Warna :
a. Hitam : melambangkan ketegasan dan bersifat formal karena web ini merupakan web
di bidang pendidikan.
b. Abu-Abu : Warna yang melambangkan intelek dan masa depan, bahwa di masa depan
prodi pendidikan biologi akan melahirkan generasi yang berintelek. Selain itu,
pemakaian warna abu-abu ini cocok dipadu dengan warna hitam, karena mudah
diseleksi oleh penglihatan mata, seperti pada bagian menu pada wireframe.
c. Biru : melambangkan kepercayaan diri dan kecerdasan. Karena melalui visi dan misi
prodi Pendidikan Biologi yakni mengembangkan ilmu pengetahuan dan teknologi
dalam bidang pendidikan biologi.
d. Hijau : melambangkan alam dan kedamaian. Pendidikan biologi sendiri berkaitan
tentang ilmu yang mempelajari makhluk hidup oleh karena itu cocok jika warna hijau
mendominasi warna pada wireframe.
 D. DESAIN JAVASCRIPT

 Bagian Yang Akan Diberi Jquery

Di bagian bertanda merah ini merupakan tampilan slideshow yang berjumlah 3 gambar.
Hal ini diberikan agar tidak menimbulkan efek bosan para pembaca ketika berada di web
ini.
 Desain Slide Pertama

Desain Slide Kedua

Desain Slide Ketiga

 Bahan Untuk Jquery Web

 Tutorial

Membuat Slideshow dengan Jquery

Sumber : W3School

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

/* Next & previous buttons */

.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}

/* Position the "next button" to the right */

.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
 width: 100%;
text-align: center;
}

/* Number text (1/3 etc) */

.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background-color: #717171;
}

/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>

<div class="slideshow-container">

<div class="mySlides fade">

<div class="numbertext">1 / 3</div>
<img src="g4.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>

<div class="mySlides fade">

<div class="numbertext">2 / 3</div>
<img src="g1.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>

<div class="mySlides fade">

<div class="numbertext">3 / 3</div>
<img src="g6.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>

<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
 showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>

</body>
</html>

Hasil
 Membuat Dropdown Navigation Bar dengan CSS
Sumber : W3School

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}

.navbar {
overflow: hidden;
background-color: #333;
}

.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.dropdown {
 float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {

background-color: red;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 14px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: #ddd;
}

.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
 <div class="navbar">
<a href="#home">Home</a>
<div class="dropdown">
<button class="dropbtn">Profil
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Pengantar</a>
<a href="#">Dosen & Staff</a>
<a href="#">Struktur Organisai</a>
<a href="#">Fasilitas</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Akademik
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">E-learning</a>
<a href="#">Kuliah</a>
<a href="#">Beasiswa</a>
</div>
</div>
<a href="#home">Jurnal Ilmiah</a>
<a href="#home">Galeri</a>
<div class="dropdown">
<button class="dropbtn">Mahasiswa
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Mahasiswa</a>
<a href="#">Organisasi</a>
</div>
</div>
<a href="#home">Angket</a>
<a href="#home">Website</a>
<a href="#home">Kontak</a>
<a href="#home">Akreditasi</a>
</div>

<h3>Dropdown Menu inside a Navigation Bar</h3>

<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>
</html>

Hasil
 E. TEKNIK KOMPRESI KONTEN

 Perbandingan Antara File Asli dan File Kompresi

No
Gambar/Video Asli Gambar/Video yang terkompresi
.
1.

Setelah dikompresi gambar yang

sebelumnya 52 kb menjadi 40 kb, sehingga
ada pengurangan ukuran sebesar 23%.

2.

Setelah dikompresi gambar ini yang semula 40

kb akan menjadi 36 kb, sehingga file akan 8%
lebih kecil dari ukuran semula.

3.
 File gambar ini sebelum dan sesudah
dikompres, ukuran masih tetap sama.

4.

Ukuran foto sebelumnya adalah 12 kb, setelah

dikompres ukuran menjadi 4,93 kb atau
ukuran berkurang sebesar 59%.
5.

Ukuran foto sebelumnya yakni 10.9 kb setelah

dikompres ukuran menjadi 66% lebih kecil dari
semula yakni 3.71 kb.
6.

Sebelum dan sesudah dikompres ukuran logo

tetap sama yakni 9.13 kb. Yang mana ukuran
ini termasuk sudah kecil.
7.

Ukuran logo sebelum dikompress yakni 6.16

kb, setelah dikompres ukuran menjadi 2.32 kb
atau berkurang sekitar 62% dari ukuran
semula.
8.

Sebelum dikompres logo twitter ini memliki

ukuran 41.9 kb, setelah dikompres ukuran
menjadi 12.4 kb atau ukuran mengecil 70%
 dari ukuran awal.
9.

File video ini saya kompress menggunakan

www.freeconvert.com. Sebelumnya video
berukuran besar yakni 53.3 mb, setelah
dikompres ukuran menjadi 26.7 mb. Sehingga
ukuran kompres 50% lebih kecil dari ukuran
semula.

 Pembahasan Hasil File Kompresi

https://tinyjpg.com/

Sebelum Dikompres
Setelah Dikompres
 F. METODE DESAIN LAYOUT

1. Tampilan Halaman Utama

2. Penggunaan Layout : Fluid Layout

Sebuah website tidak hanya diakses pada satu perangkat seperti laptop/komputer.
Namun, website juga perlu untuk diakses di perangkat yang memiliki ukuran layar yang
lebih kecil seperti pada ponsel, tablet dan perangkat lainnya. Sehingga ukuran layar yang
berbeda-beda tiap perangkat menuntut sebuah website untuk dapat menyesuaikan ukuran
layar atau juga disebut responsif. Hal ini menghindari dari aktivitas scroll horizontal yang
tidak disukai pengguna perangkat/pengunjung website. Berbeda dengan scroll vertikal
yang biasa digunakan untuk menggulir situs web ke bawah.
Untuk membuat web responsif,tambahkan tag <meta>.

Ini akan mengandung viewport dari halaman web, yang mana akan memberi instruksi
pada browser mengenai bagaimana mengatur dimensi dan skala halaman. Di bawah ini
merupakan contoh dari halaman web tanpa tag meta dan halaman web dengan tag meta :

Pada website yang akan dibuat, saya memilih menggunakan Fluid Layout. Layout
ini cocok digunakan pada perangkat berlayar lebar seperti laptop maupun di ponsel,
konten pada website akan disampaikan lebih jelas karena pengurangan gridnya atau
kolom, semisal pada dekstop ditampilkan 3 kolom foto, maka di ponsel akan ditampilkan
1 kolom foto saja. Hal ini agar memudahkan pembaca untuk mengakses dan memperoleh
informasi secara jelas. Perlu diperhatikan, bahwa istilah responsif dan fluid layout adalah
kurang sama. Menurut Sam MCKinney, "A fluid site is responsive, but not all responsive
sites are fluid", jadi fluid layout memang responsif namun tidak semua web yang
responsif adalah fluid. Sehingga banyak jenis responsif lainnya.
 Gambar di atas menunjukkan perbedaan antara fixed layout dan fluid layout.
Fixed layout dalam pembuatannya menggunakan ukuran piksel (px) sehingga ketika
tampil di layar kecil seperti ponsel akan menunjukkan tampilan desktop, tidak ada
perubahan. Sehingga pembaca pun harus membesarkan halaman tersebut berulang kali
untuk memperoleh informasi. Fluid layout hadir untuk memperbaiki kekurangan pada
fixed layout, karena fluid layout menggunakan ukuran persen, sehingga menyesuaikan
viewport tiap perangkat.

 Contoh fluid layout

Tampilan di bawah ini memberikan perbedaan antara fluid layout ketika berada di layar lebar
dan fluid layout ketika berada di layar sempit.

Ketika di layar besar/laptop Ketika di layar kecil/ponsel

 Cara memakai fluid layout dengan bootstrap

Jika kita memakai bootstrap maka dalam pembuatan layout fluid akan mudah, karena cukup
menyertakan link url bootstrap atau bisa berasal dari file bootstrap yang telah didownload.
Kemudian gunakan kelas container-fluid seperti berikut :
 Berikut merupakan perbandingan tampilan responsif dan tidak responsif website pada
layar monitor dan ponsel menggunakan Fluid Layout :

No. Responsif Tidak Responsif

1.

Akan terlihat sama dengan yang tidak

responsif, karena standar dari website
sendiri berukuran seperti layar monitor.
2.

Pada tampilan ponsel, website yang Pada gambar di atas, terlihat semua
responsif akan terlihat berbeda dengan tampilan website tampil dalam satu
yang tidak responsif. Pada gambar ini, tangkapan layar sebelum discroll. Hal ini
website bersifat responsif, konten dapat bukan merupakan web yang responsif,
menyesuaikan ukuran viewport dengan karena dapat menyulitkan pengguna untuk
kondisi ukuran tulisan,gambar,navigasi membesarkan halaman berulang-ulang
yang dapat dibaca jelas oleh pengguna. ketika membaca.
Pada gambar di atas, disaat berada di
perangkat monitor terdapat 3 gambar
berjejeran, setelah dibuka melalui ponsel,
kolom dari website berkurang, sehingga
menyebabkan gambar hanya 1 yang tampil
sebelum discroll ke bawah.

3.

Gambar di atas merupakan contoh

tampilan halaman web saat ukuran
monitor.
 Merupakan contoh tampilan web yang
tidak responsif ketika sebuah layar
halaman dikecilkan. Karena konten
Ketika halaman dikecilkan, maka terlihat terpotong, artinya pengunjung perlu
konten menyesuaikan. Sehingga tidak melakukan scroll ke samping/horizontal.
perlu lagi untuk scroll horizontal maupun
membesarkan halaman.
 DAFTAR PUSTAKA

https://www.w3schools.com/tags/tag_meta.asp
https://www.pageonepower.com/search-glossary/backlinks
https://www.hostinger.co.id/tutorial/apa-itu-apache/
https://www.webfx.com/blog/web-design/a-guide-on-layout-types-in-web-design/#header
https://www.nike.com/id/
https://resources.mojomedialabs.com/blog/6-beautiful-examples-of-fluid-website-design
https://techterms.com/definition/fluid_layout
https://www.w3schools.com/html/html_responsive.asp
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/
optimize-encoding-and-transfer?hl=id

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-
optimization?hl=id

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/
automating-image-optimization?hl=id

https://www.niagahoster.co.id/blog/cara-mengkompres-file/

https://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=333333

https://designmodo.com/design-brief/

https://www.crazyegg.com/blog/homepage-design/