• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive web design
 

Responsive web design

on

  • 2,079 views

 

Statistics

Views

Total Views
2,079
Views on SlideShare
2,073
Embed Views
6

Actions

Likes
0
Downloads
62
Comments
0

1 Embed 6

http://elearning.tadelformacion.com 6

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive web design Responsive web design Presentation Transcript

    • candraadiputra@gmail.com http://www.candra.web.idhttp://www.candra.web.id 1
    • Teknik Web design Frame Layout Table Layout CSS layout  Fixed Layout  Float Layout http://www.candra.web.id 2
    • PART I:Responsive Web design Konsep Demo & example CSS Framework http://www.candra.web.id 3
    • 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
    • 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
    • Gambaran Layout http://www.candra.web.id 6
    • width <1200px http://www.candra.web.id 7
    • width<=1024px (iPad Landscape http://www.candra.web.id 8
    • Width <=768px (iPad Potrait) Ketika ukuran layar device /browser kurang dari 768, maka secara otomatis, sidebar diposisikan dibagianbawah http://www.candra.web.id 9
    • <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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Keuntungan Platform & Device agnostic Tidak perlu belajar teknologi baru Menggunakan teknologi terbuka http://www.candra.web.id 17
    • Mobile WebApp Framework jQuery Mobile ExtJS touch jQTouch iUI http://www.candra.web.id 18
    • Other Library Modernzr.js Zepto.js http://www.candra.web.id 19
    • Tool Development Aptana IDE Yslow Chrome extention Chrome Developer Tool Builtwith Chrome Extention http://www.candra.web.id 20
    • Example Mobile Web http://www.candra.web.id 21
    • Example Mobile WebApp http://www.candra.web.id 22
    • 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