Mobile Site

MuGeN

MuGeN

MuGeN

Associate
Joined
21 Oct 2008
Posts
1,679
Location
Mooching... in your house
Hi guys,

having a first crack at a mobile site and have a quick question...

so the iPhone (and other high res devices) takes images and doubles their size right? well, if a site (as ours is) is designed purely for mobile, at a width of 640... why do the images look twice as big as they should and blurred?

if it would only display it how we designed it'd look spot on, and I know its to do with detecting the screen size etc so could someone shed any light? basically I'd like to be able to output a high res version if the screen supports (at a proper 1:1 ratio) and a half size one on older devices...

Any ideas?

EDIT: there are plenty of solutions to do with background images, but I'm talking about foreground ones in img tags...
 
Last edited:
Not ideal, as it only targets iDevices, but if you have a higher-res image and give it the same name as the 'normal' sized image but with "@2x" at the end of the name [before the file extension!] - and put them in the same directory as the normal images - those iDevices will automatically substitute the higher-res images.
 
There seem to be two methods you need... One for background images which involves CSS media queries, and one fore foreground images which requires you to upload the high res image but set the size in HTML to half the size.

Although this works it is horribly hacky and non-semantic... Surely there is a more professional way? As this stands if another image was added by a lay person, someone would then have to go in and calculate the half sizes to stop the images being double size and blurry?

So... What is the proper way to create a mobile only site that works on both high res and low res devices?
 
Responsive design is all well and good, and where we will be moving... but this job is a specific mobile only site as that's what was specified in the job brief...

gonna tag on a question in case anyone knows...

This:

Code: 
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    body#page-home #container { background-size: 100%; }

works for iPhone 4, but on our HTC Sensation it is still zoomed to 2x and looks pixelated and crap...

Any idea how to mod this line (or add another one) for Android compatibility?
 
MuGeN said:
Hmmm maybe they do, so with fluid images do you just size every image (or maybe the images container) in percentages?
Click to expand...

There are a few ways to do it but yeah, you use the dimensions of the images parent element to dictate the maximum width of the image. Only issue you then need to address is image size. Downloading a 1024px wide image is a little wasteful if you are only showing it at 200px most of the time.

Media queries are great for this sort of thing as well.
 
fez said:
There are a few ways to do it but yeah, you use the dimensions of the images parent element to dictate the maximum width of the image. Only issue you then need to address is image size. Downloading a 1024px wide image is a little wasteful if you are only showing it at 200px most of the time.

Media queries are great for this sort of thing as well.
Click to expand...

While that's true, it's never going to be slower than what people expect from using a desktop, considering that's the highest resolution your responsive design probably is built for.

Still, is there an accepted best practice for fluid image file sizes? I've seen a lot of swapping out images based on area available etc using PHP and JS, but to me it's a whole lot of work that considering the proliferation of high speed mobile internet will become less important as time goes on.
 
You must log in or register to reply here.
Back
Top Bottom