Dokumen tersebut membahas tentang desain web yang responsif dan framework untuk membangun aplikasi web mobile. Topik utama adalah konsep desain web yang responsif, framework CSS untuk membuat tampilan yang beradaptasi dengan berbagai ukuran layar perangkat, serta library dan alat untuk mengembangkan aplikasi web mobile.

1. candraadiputra@gmail.com
http://www.candra.web.id
http://www.candra.web.id 1

2. Teknik Web design
 Frame Layout
 Table Layout
 CSS layout
 Fixed Layout
 Float Layout
http://www.candra.web.id 2

3. PART I:Responsive Web design
 Konsep
 Demo & example
 CSS Framework
http://www.candra.web.id 3

4. Responsive?
 Responsive disini bukan berarti Cepat saat diakses,
namun responsive disini mengacu pada “Adaptive” .
 Merupakan evolusi dari CSS float layout
 Responsive Web Design adalah teknik untuk membuat
Layout Web menyesuaikan Diri dengan Device User
(ukuran, Layar,orientasi)
http://www.candra.web.id 4

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 5

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

7. width <1200px
http://www.candra.web.id 7

8. width<=1024px (iPad Landscape
http://www.candra.web.id 8

9. Width <=768px (iPad Potrait)
Ketika ukuran layar device /browser
kurang dari 768, maka secara
otomatis, sidebar diposisikan
dibagianbawah
http://www.candra.web.id 9

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 10

11. Contoh Website
Website dibawah ini adalah website yang sudah mengimplementasikan
Media Query sehingga halamanya sudah responsive. Untuk mencoba
responsifitasnya, ubah ukuran browser anda.
 http://tileabl.es/
 http://cognition.happycog.com/
 http://colly.com/
 http://www.audiovroom.com/
 Cek lainnya di http://mediaqueri.es/
http://www.candra.web.id 11

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 12

13. CSS framework
 Mempelajari 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 13

14. Example CSS Framework
 Twitter Bootstrap
 CSS framework untuk membangun Web Modern
dengan Layout sekelas Google+ atau Twitter
 getSkeleton
 CSS framework sederhana yang mengutamakan
responsive web design dan ukuran kecil
http://www.candra.web.id 14

15. Twitter Bootstrap
 Fitur
 Responsive Webdesign Framework
 Powerfull CSS layout
 Super complete (icon, popup, slide,error message)
 Open source
See the DEMO !!!
http://www.candra.web.id 15

16. PART II: Mobile WebApp
 Mobile Web App adalah aplikasi Mobile yang
dibangun menggunakan teknologi Web (HTML5,
CSS3, Javascript library)
http://www.candra.web.id 16

17. Keuntungan
 Platform & Device agnostic
 Tidak perlu belajar teknologi baru
 Menggunakan teknologi terbuka
http://www.candra.web.id 17

18. Mobile WebApp Framework
 jQuery Mobile
 ExtJS touch
 jQTouch
 iUI
http://www.candra.web.id 18

19. Other Library
 Modernzr.js
 Zepto.js
http://www.candra.web.id 19

20. Tool Development
 Aptana IDE
 Yslow Chrome extention
 Chrome Developer Tool
 Builtwith Chrome Extention
http://www.candra.web.id 20

21. Example Mobile Web
http://www.candra.web.id 21

22. Example Mobile WebApp
http://www.candra.web.id 22

23. Reference
 Skeleton Framework
 http://getskeleton.com/
 Responsive Web Design
http://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/
http://www.candra.web.id 23