Embed Size (px)
Citation preview
Responsive Web Design
Jimba Tamang
www.jimba.com.np www.lastdoorsolutions.com
www.theidealaya.com @jimbatamang
Various web devices
Image source: web
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
Responsive Web Design
Image source: web
Still headache with Future Devices
Image source: web
Different between Normal Website and Responsive Website
Old Apple Computer New Apple Computer
Normal site in big browser
Normal website in iPhone Example: www.ntc.net.np
Responsive site in Big Screen
Responsive website in iPhone
Example: www.lastdoorsolutions.com
The Basic Concept
Auto scaleable image according to the available space in screen
Behind the scene
What are the magic codes, mysteries?
Smart phone force to zoom out the normal site to fit on It’s screen.
Viewport Meta Tag
<meta name="viewport” content="width=device-width, initial-scale=1” >
It tells to smart phones to not zoom out the site
@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
Retina Display
Retina Display
Retina Display: Background image problem
CSS sprite for Retina Display
Normal CSS
#nav a { background:url(images/[email protected]) no-repat 0 0; height:40px; width:40px; } #nav a.home { background-position: -1px -20px; }
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; } }
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
Basic Approach
Big screen first Mobile first
Make your site Responsive Make your site beautiful
Need Help?
• www.google.com • www.WordPress.org • www.smashingmagazine.com • www.css-tricks.com • www.jimba.com.np
Twitter • @jimbatamang
Home page • jimba.com.np
Available at • lastdoorsolutions.com • theidealaya.com
