Jimba Tamang: Responsive and Retina Design

916 views

Published on

Published in: Design
  • Be the first to comment

  • Be the first to like this

Jimba Tamang: Responsive and Retina Design

  1. 1. Responsive Web Design Jimba Tamang www.jimba.com.np www.lastdoorsolutions.com www.theidealaya.com @jimbatamang
  2. 2. Various web devices Image source: web
  3. 3. Why Mobile Devices? Over 1.2 In USA 25% Asia/Africabillion mobile people use 50% internetweb users in the mobile traffic through the Whole device only Mobile World Devices
  4. 4. Responsive Web Design Image source: web
  5. 5. Still headache with Future Devices Image source: web
  6. 6. Different between Normal Website and Responsive WebsiteOld Apple Computer New Apple Computer
  7. 7. Normal site in big browser
  8. 8. Normal website in iPhoneExample: www.ntc.net.np
  9. 9. Responsive site in Big Screen
  10. 10. Responsive website iniPhoneExample: www.lastdoorsolutions.com
  11. 11. The Basic Concept
  12. 12. Auto scaleable image according to the available space in screen
  13. 13. Behind the sceneWhat are the magic codes, mysteries?
  14. 14. Smart phone force to zoom outthe normal site to fit on It’sscreen.
  15. 15. Viewport Meta Tag<metaname="viewport”content="width=device-width, initial-scale=1” > It tells to smart phones to not zoom out the site
  16. 16. CSS Media Query@media only screen and (min-width: 960px) {/* Big Screen*/ body { background-color: red; } }@media only screen and (max-width: 767px) {/* Small Screens*/ body { background-color: green; } }
  17. 17. Retina Display
  18. 18. Retina Display
  19. 19. Retina Display: Background image problem
  20. 20. CSS sprite for Retina Display
  21. 21. Normal CSS#nav a {background:url(images/sprite@1.png) no-repat 0 0;height:40px;width:40px; }#nav a.home {background-position: -1px -20px; }
  22. 22. Retina Display Media Query@media only screen and ( -webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1) {/* Retina Stuff here... */ #nav a { background-image: url(images/sprite@2x.png); background-size: 200px 200px; } }
  23. 23. Techniques•  Frameworks: less work •  Skeleton Framework (grid framework) •  Twitter Bootstrap •  Foundation 3 •  And many more…•  Design •  It’s more about team work•  Custom styles: more work
  24. 24. Basic ApproachBig screen first Mobile first
  25. 25. Make your site site beautiful Make your Responsive
  26. 26. Need Help?•  www.google.com•  www.WordPress.org•  www.smashingmagazine.com•  www.css-tricks.com•  www.jimba.com.np
  27. 27. Available at Twitter• lastdoorsolutions.com • @jimbatamang• theidealaya.com Home page • jimba.com.np

×