Membangun Aplikasi Web ResponsiFDjoko Soerjanto, M.KomSemarang, 16 Juni 2014

1Web Responsif (Responsive) ???Website yang tampilannya dapat diakses melalui mobile, tablet, maupun PC/desktop; dimana ukuran, hirarki, pengalaman membaca memberikan kenyamanan kepada pengguna ketika mencari informasi pada website tersebut.2Responsive 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 DesignTata letak & ukuran telah ditentukanWrapper (pembungkus) lebar tetap dalam format pixel.

Contoh Web - Fixed Web Design

Contoh Web - Fixed Web Design #2

Liquid / Flexible Web DesignTata 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 RWDDi 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 dinamis.

MudahkahMembuat Web & Aplikasi Responsif itu?

19Keahlian Yang dibutuhkan :HTML, CSS & JavascriptInstalasi Web Server (local)Dasar Pemrogram PHPDatabase MySQLDesain & LayoutDomain & HostingUpload Web

Add slides to each topic section as necessary, including slides with tables, graphs, and images. See next section for sample table, graph, image, and video layouts. 20Now, let's practice responsive web with the bestWorking from hereWorking from homeWorking from anywhere

Contact me :djoko_s@yahoo.com0819 231 464Microsoft Engineering ExcellenceMicrosoft Confidential21