SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast turkey's Avatar
    Join Date
    May 2006
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mobile Websites & Retina images

    Hello,

    Right now I am rebuilding a mobile website that will be catered to smartphones. I am trying to figure out the best way of serving up retina photos and I know the less images the better. Anyways, my question is I have most of them showing up as backgrounds within divs. I am using retina.js to swap the image for a higher res ones testing it on the iphone. Now at the bottom of the retinajs site it talks about using a less css mixin for backgrounds. I have tried to no avail to get this to work. I am also new to the less stylesheet so it could just be some type of configuration that I am missing which is why they aren't being swapped. It only works if I actually insert the image into the div. I have looked all over for simple steps from the beginning to no avail. I guess the instructions there are vauge to me.

    Thanks in advance for any help.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    If you are using background images, you can do away with the js file altogether and just use @media rules like the one they give to serve up a different background image for retina devices:

    Code:
    #logo {
      background-image: url('/images/my_image.png');
    }
    
    @media all and (-webkit-min-device-pixel-ratio: 1.5) {
      #logo {
        background-image: url('/images/my_image@2x.png');
      }
    }
    IMHO, tools like LESS just make things more complicated than they need to be, but I admit I'm not very adventurous with such things, and prefer just good old fashioned, longhand CSS.

  3. #3
    SitePoint Enthusiast turkey's Avatar
    Join Date
    May 2006
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,
    Thank you for your response, I agree that the less thing is just....................that. Confusing. Just so I have it right, I would do this for every class or id using a background?

    I just want to make sure I have this concept right.

    So for example:


    Code:
    #logo {
      background-image: url('/images/my_image.png');
    }
    
    @media all and (-webkit-min-device-pixel-ratio: 1.5) {
      #logo {
        background-image: url('/images/my_image@2x.png');
      }
    }
    
    #Background {
      background-image: url('/images/my_image2.png');
    }
    
    @media all and (-webkit-min-device-pixel-ratio: 1.5) {
      #Background{
        background-image: url('/images/my_image2@2x.png');
      }
    }

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Yes, that looks fine, although I would probably group the rules like so:

    Code:
    #logo {
      background-image: url('/images/my_image.png');
    }
    
    #Background {
      background-image: url('/images/my_image2.png');
    }
    
    
    @media all and (-webkit-min-device-pixel-ratio: 1.5) {
      #logo {
        background-image: url('/images/my_image@2x.png');
      }
    
      #Background{
        background-image: url('/images/my_image2@2x.png');
      }
    }
    There was a thread last week about whether multiple @media rules might make for a slower page load, but no one really knew, so it probably doesn't matter. But I prefer to group them in one place.

  5. #5
    SitePoint Enthusiast turkey's Avatar
    Join Date
    May 2006
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was wondering the same thing but this is very helpful!!! Thanks so much, will give it a shot!

  6. #6
    SitePoint Enthusiast turkey's Avatar
    Join Date
    May 2006
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another helpful article in relation to retina image use.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •