responsive web design and retina display

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/sprite@1.png) 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/sprite@2x.png); 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