MEMBANGUN APLIKASI

WEB RESPONSIF
Djoko Soerjanto, M.Kom

Semarang, 16 Juni
2014

Web Responsif (Responsive)

???

Website yang tampilannya

dapat diakses melalui
mobile, tablet, maupun
PC/desktop; dimana
ukuran, hirarki,
pengalaman membaca
memberikan kenyamanan
kepada pengguna ketika

Responsive Web Desain

Bagaimana dengan desain Web

yang Non Responsif ?
Informasi akan terlihat terpotong atau
hirarki yang tidak terbaca dengan
nyaman jika dilihat pada browser
mobile atau tablet.

Perbedaan dengan web

design lainnya seperti
Fixed, Liquid ?

Fixed Web Design

Tata letak & ukuran telah ditentukan
Wrapper (pembungkus) lebar tetap dalam
format pixel.

Contoh Web - Fixed Web

Design

Contoh Web - Fixed Web Design #2

Liquid / Flexible Web Design

Tata letak ditentukan oleh persentase dari
ukuran jendela browser.
Tampilan akan mengubah secara otomatis
sesuai ukuran jendela browser atau bergantung
resolusi monitor.

Contoh Web - Liquid Web

Design

Contoh Web - Liquid Web Design

#2

Beda Tampilan Fixed dan

Fluid

Responsive Web Design * History *

RWD mulai dikenalkan oleh Ethan Marcotte sejak 2010
-> Tata letak flexible dan fluid untuk layar apapun.
Populer sejak 2012, dimana browser mobile
tampilannya sudah mulai sama bagusnya dengan
browser desktop.
Pengguna ponsel semakin bertambah besar, dan
mulai menyukai membaca berita atau informasi
melalui web mobile daripada bentuk aplikasi.
RWD mampu beradaptasi dengan ukuran viewport
yang berbeda pada berbagai mobile device tanpa
merubah domain/subdomain.

Contoh Web RWD

Contoh Web RWD #2

Contoh Aplikasi RWD

Perkembangan di Indonesia
?
2013 adalah mulai lepas landasnya
RWD
Di luar negeri, sudah banyak yang
menerapkan, sedang di Indonesia
belum banyak yang menerapkan.
Mengapa ?

Idealnya, situs web

bisa kompatibel
dengan berbagai
media yang dipakai
oleh pengguna.
Tidak perlu repot untuk
mengeluarkan biaya
besar untuk
membangun web

Mudahkah
Membuat
Web & Aplikasi
Responsif itu?

Keahlian Yang dibutuhkan :

HTML, CSS &

Javascript
Instalasi Web Server
(local)
Dasar Pemrogram PHP
Database MySQL
Desain & Layout

Now, let's practice responsive web

with the best

Working from here

Working from home
Working from anywhere

Contact me :
djoko_s@yahoo.com
0819 231 464