Responsive web design
-
Upload
candra-adi-putra -
Category
Education
-
view
2.451 -
download
19
description
Transcript of Responsive web design
1
RESPONSIVE WEB DESIGN & MOBILE WEBAPP
[email protected]://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/