2. Responsive Web Design
Jimba Tamang
www.jimba.com.np
www.lastdoorsolutions.com
www.theidealaya.com
@jimbatamang

3. Various web devices
Image source: web

4. Why Mobile Devices?
Over 1.2 In USA 25% Asia/Africa
billion mobile people use 50% internet
web users in the mobile traffic through
the Whole device only Mobile
World Devices

5. Responsive Web Design
Image source: web

6. Still headache with Future Devices
Image source: web

7. Different between Normal Website
and Responsive Website
Old Apple Computer New Apple Computer

8. Normal site in big browser

9. Normal website in iPhone
Example: www.ntc.net.np

10. Responsive site in Big Screen

11. Responsive website in
iPhone
Example: www.lastdoorsolutions.com

12. The Basic Concept

13. Auto scaleable image according to the available space in screen

14. Behind the scene
What are the magic codes,
mysteries?

15. Smart phone force to zoom out
the normal site to fit on It’s
screen.

16. Viewport Meta Tag
<meta
name="viewport”
content="width=device-width, initial-scale=1” >
It tells to smart phones to not zoom out the site

17. 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;
}
}

18. Retina Display

19. Retina Display

20. Retina Display: Background image
problem

21. CSS sprite for Retina Display

22. 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;
}

23. 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;
}
}

24. 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

25. Basic Approach
Big screen first Mobile first

26. Make your site site beautiful
Make your Responsive

27. Need Help?
• www.google.com
• www.WordPress.org
• www.smashingmagazine.com
• www.css-tricks.com
• www.jimba.com.np

28. Available at Twitter
• lastdoorsolutions.com
• @jimbatamang
• theidealaya.com
Home page
• jimba.com.np