• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Web Design and Retina Display
 

Responsive Web Design and Retina Display

on

  • 2,825 views

 

Statistics

Views

Total Views
2,825
Views on SlideShare
2,824
Embed Views
1

Actions

Likes
2
Downloads
15
Comments
1

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Web Design and Retina Display Responsive Web Design and Retina Display Presentation Transcript

    • 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 In USA 25% Asia/Africabillion mobile people use 50% internetweb users in the mobile traffic through the Whole device only Mobile World Devices
    • Responsive Web Design Image source: web
    • Still headache with Future Devices Image source: web
    • Different between Normal Website and Responsive WebsiteOld Apple Computer New Apple Computer
    • Normal site in big browser
    • Normal website in iPhoneExample: www.ntc.net.np
    • Responsive site in Big Screen
    • Responsive website iniPhoneExample: www.lastdoorsolutions.com
    • The Basic Concept
    • Auto scaleable image according to the available space in screen
    • Behind the sceneWhat are the magic codes, mysteries?
    • Smart phone force to zoom outthe normal site to fit on It’sscreen.
    • Viewport Meta Tag<metaname="viewport”content="width=device-width, initial-scale=1” > It tells to smart phones to not zoom out the site
    • 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; } }
    • 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 ApproachBig screen first Mobile first
    • Make your site site beautiful Make your Responsive
    • Need Help?•  www.google.com•  www.WordPress.org•  www.smashingmagazine.com•  www.css-tricks.com•  www.jimba.com.np
    • Available at Twitter• lastdoorsolutions.com • @jimbatamang• theidealaya.com Home page • jimba.com.np