Your SlideShare is downloading. ×
  • Like
Jimba Tamang: Responsive and Retina Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Jimba Tamang: Responsive and Retina Design

  • 573 views
Published

 

Published in Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
573
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Responsive Web Design Jimba Tamang www.jimba.com.np www.lastdoorsolutions.com www.theidealaya.com @jimbatamang
  • 2. Various web devices Image source: web
  • 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. Responsive Web Design Image source: web
  • 5. Still headache with Future Devices Image source: web
  • 6. Different between Normal Website and Responsive WebsiteOld Apple Computer New Apple Computer
  • 7. Normal site in big browser
  • 8. Normal website in iPhoneExample: www.ntc.net.np
  • 9. Responsive site in Big Screen
  • 10. Responsive website iniPhoneExample: www.lastdoorsolutions.com
  • 11. The Basic Concept
  • 12. Auto scaleable image according to the available space in screen
  • 13. Behind the sceneWhat are the magic codes, mysteries?
  • 14. Smart phone force to zoom outthe normal site to fit on It’sscreen.
  • 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. 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. Retina Display
  • 18. Retina Display
  • 19. Retina Display: Background image problem
  • 20. CSS sprite for Retina Display
  • 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. 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. 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. Basic ApproachBig screen first Mobile first
  • 25. Make your site site beautiful Make your Responsive
  • 26. Need Help?•  www.google.com•  www.WordPress.org•  www.smashingmagazine.com•  www.css-tricks.com•  www.jimba.com.np
  • 27. Available at Twitter• lastdoorsolutions.com • @jimbatamang• theidealaya.com Home page • jimba.com.np