Responsive Web Design      Jimba Tamang     www.jimba.com.np  www.lastdoorsolutions.com    www.theidealaya.com       @jimb...
Various web devices                      Image source: web
Why Mobile Devices?   Over 1.2      In USA 25%       Asia/Africabillion mobile    people use     50% internetweb users in ...
Responsive Web Design                    Image source: web
Still headache with Future Devices                             Image source: web
Different between Normal Website      and Responsive WebsiteOld Apple Computer      New Apple Computer
Normal site in big browser
Normal website in iPhoneExample: www.ntc.net.np
Responsive site in Big Screen
Responsive website iniPhoneExample: www.lastdoorsolutions.com
The Basic Concept
Auto scaleable image according to the available space in screen
Behind the sceneWhat are the magic codes,       mysteries?
Smart phone force to zoom outthe normal site to fit on It’sscreen.
Viewport Meta Tag<metaname="viewport”content="width=device-width, initial-scale=1” >         It tells to smart phones to n...
CSS Media Query@media only screen and (min-width: 960px) {/* Big Screen*/      body {         background-color: red;      ...
Retina Display
Retina Display
Retina Display: Background image             problem
CSS sprite for Retina Display
Normal CSS#nav a {background:url(images/sprite@1.png) no-repat 0 0;height:40px;width:40px;         }#nav a.home {backgroun...
Retina Display Media Query@media only screen and ( -webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-p...
Techniques•  Frameworks: less work     •  Skeleton Framework (grid framework)     •  Twitter Bootstrap     •  Foundation 3...
Basic ApproachBig screen first          Mobile first
Make your site site beautiful  Make your Responsive
Need Help?•  www.google.com•  www.WordPress.org•  www.smashingmagazine.com•  www.css-tricks.com•  www.jimba.com.np
Available at                               Twitter• lastdoorsolutions.com                                           • @jim...
Jimba Tamang: Responsive and Retina Design
Upcoming SlideShare
Loading in...5
×

Jimba Tamang: Responsive and Retina Design

621

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
621
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×