Download - Jimba Tamang: Responsive and Retina Design
![Page 1: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/1.jpg)
![Page 2: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/2.jpg)
Responsive Web Design
Jimba Tamang
www.jimba.com.np www.lastdoorsolutions.com
www.theidealaya.com @jimbatamang
![Page 3: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/3.jpg)
Various web devices
Image source: web
![Page 4: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/4.jpg)
Why Mobile Devices?
Over 1.2 billion mobile web users in the Whole
World
In USA 25% people use the mobile device only
Asia/Africa 50% internet traffic through
Mobile Devices
![Page 5: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/5.jpg)
Responsive Web Design
Image source: web
![Page 6: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/6.jpg)
Still headache with Future Devices
Image source: web
![Page 7: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/7.jpg)
Different between Normal Website and Responsive Website
Old Apple Computer New Apple Computer
![Page 8: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/8.jpg)
Normal site in big browser
![Page 9: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/9.jpg)
Normal website in iPhone Example: www.ntc.net.np
![Page 10: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/10.jpg)
Responsive site in Big Screen
![Page 11: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/11.jpg)
Responsive website in iPhone
Example: www.lastdoorsolutions.com
![Page 12: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/12.jpg)
The Basic Concept
![Page 13: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/13.jpg)
Auto scaleable image according to the available space in screen
![Page 14: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/14.jpg)
Behind the scene
What are the magic codes, mysteries?
![Page 15: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/15.jpg)
Smart phone force to zoom out the normal site to fit on It’s screen.
![Page 16: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/16.jpg)
Viewport Meta Tag
<meta name="viewport” content="width=device-width, initial-scale=1” >
It tells to smart phones to not zoom out the site
![Page 17: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/17.jpg)
@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; } }
CSS Media Query
![Page 18: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/18.jpg)
Retina Display
![Page 19: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/19.jpg)
Retina Display
![Page 20: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/20.jpg)
Retina Display: Background image problem
![Page 21: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/21.jpg)
CSS sprite for Retina Display
![Page 22: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/22.jpg)
Normal CSS
#nav a { background:url(images/[email protected]) no-repat 0 0; height:40px; width:40px; } #nav a.home { background-position: -1px -20px; }
![Page 23: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/23.jpg)
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/[email protected]); background-size: 200px 200px; } }
![Page 24: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/24.jpg)
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
![Page 25: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/25.jpg)
Basic Approach
Big screen first Mobile first
![Page 26: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/26.jpg)
Make your site Responsive Make your site beautiful
![Page 27: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/27.jpg)
Need Help?
• www.google.com • www.WordPress.org • www.smashingmagazine.com • www.css-tricks.com • www.jimba.com.np
![Page 28: Jimba Tamang: Responsive and Retina Design](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5551313eb4c905325d8b4e41/html5/thumbnails/28.jpg)
Twitter • @jimbatamang
Home page • jimba.com.np
Available at • lastdoorsolutions.com • theidealaya.com