Responsive web design

1

RESPONSIVE WEB DESIGN & MOBILE WEBAPP

candraadiputra@gmail.comhttp://www.candra.web.id

http://www.candra.web.id

2

Teknik Web designFrame LayoutTable LayoutCSS layout

Fixed LayoutFloat Layout

http://www.candra.web.id

3

PART I:Responsive Web designKonsepDemo & exampleCSS Framework

http://www.candra.web.id

http://www.candra.web.id 4

Responsive?Responsive disini bukan berarti Cepat saat

diakses, namun responsive disini mengacu pada “Adaptive” .

Merupakan evolusi dari CSS float layoutResponsive Web Design adalah teknik untuk

membuat Layout Web menyesuaikan Diri dengan Device User (ukuran, Layar,orientasi)

http://www.candra.web.id 5

Benefit?Membuat satu website untuk semua platform

dan device dimana secara “Magic” Layout akan berubah sesuai dengan Device yang mengakses tanpa membuat beberapa versi website.

http://www.candra.web.id 6

Gambaran Layout

http://www.candra.web.id 7

width <1200px

http://www.candra.web.id 8

width<=1024px (iPad Landscape

http://www.candra.web.id 9

Width <=768px (iPad Potrait)Ketika ukuran layar device /browser kurang dari 768, maka secara otomatis, sidebar diposisikan dibagianbawah

http://www.candra.web.id 10

<600px (smartphone)Tampilan layout ketika dibuka di device dengan lebar layar kurang dari 600px, secara otomatis gambar di hidden, dan menu utama tampak seperti gambar disamping

Semua layout diatas, diatur hanya dari satu file CSS dengan memanfaatkan media query

http://www.candra.web.id 11

Contoh Website

http://tileabl.es/http://cognition.happycog.com/http://colly.com/http://www.audiovroom.com/Cek lainnya di http://mediaqueri.es/

Website dibawah ini adalah website yang sudah mengimplementasikan Media Query sehingga halamanya sudah responsive. Untuk mencoba responsifitasnya, ubah ukuran browser anda.

http://www.candra.web.id 12

Magic di balik Layar CSS Media Query Example

@media (max-width: 786px{#container (width:786px)/* other CSS rule here *

} @media (max-width: 600px{#container (width:600px;/* your rule here*Other CSS rule here}

http://www.candra.web.id 13

CSS frameworkMempelajari CSS dan Media query butuh

waktu.

Cara tercepat?

Gunakan CSS framework.!!!

CSS framework adalah Framework Layout yang memudahkan anda dalam membuat Responsive Web design dengan tampilan Modern

http://www.candra.web.id 14

Example CSS FrameworkTwitter BootstrapCSS framework untuk membangun Web

Modern dengan Layout sekelas Google+ atau Twitter

getSkeletonCSS framework sederhana yang

mengutamakan responsive web design dan ukuran kecil

http://www.candra.web.id 15

Twitter Bootstrap Fitur

Responsive Webdesign FrameworkPowerfull CSS layoutSuper complete (icon, popup, slide,error

message)Open sourceSee the DEMO !!!

http://www.candra.web.id 16

PART II: Mobile WebAppMobile Web App adalah aplikasi Mobile yang

dibangun menggunakan teknologi Web (HTML5, CSS3, Javascript library)

http://www.candra.web.id 17

KeuntunganPlatform & Device agnostic Tidak perlu belajar teknologi baruMenggunakan teknologi terbuka

http://www.candra.web.id 18

Mobile WebApp FrameworkjQuery MobileExtJS touchjQTouch iUI

http://www.candra.web.id 19

Other LibraryModernzr.jsZepto.js

http://www.candra.web.id 20

Tool DevelopmentAptana IDEYslow Chrome extention Chrome Developer ToolBuiltwith Chrome Extention

http://www.candra.web.id 21

Example Mobile Web

http://www.candra.web.id 22

Example Mobile WebApp

http://www.candra.web.id 23

ReferenceSkeleton Framework

http://getskeleton.com/

Responsive Web Designhttp://www.alistapart.com/articles/responsive-web-design/

CSS design tutorial http://www.maxdesign.com.au

Responsive Web Design: A Visual Guide

http://net.tutsplus.com/tutorials/html-css-techniques/responsive-web-design-a-visual-guide/