Responsive web design

Get Started
1

Hi,

not sure if this is the correct forum to post my question but anyway here goes, I have designed a website for a client who now wants it to work on the iphone. I am using media queries but for some reason the image won’t resize to fit the width of the iphone (320x480). I am using this website Responsive Design Testing to test out the page as I don’t own an iphone. I have googled fluid images & read up on it but still don’t know why the image won’t resize.
This is the css:

#container {width:725px; margin:0px auto; 
padding-bottom:15px;}
#photo {margin:-75px auto -1px; max-width:100%;}
@media (max-width: 400px){
	body{min-width:320px;}
	#container, #va-accordian, .va-slice, #photo, #contact{width:320px;}
	#cnhc, #isrm {display:none;}
	.va-content, .va-heading {margin-left:15px;}
	.va-slice p, ul#benefits li {font-size:1.0em;}
	.indent {margin-left:0;}
	#contact input.submit {margin-left:0;}
	#footer p {margin-left:0;}
}

This is the link

2

I do want to crop or make the width of the image smaller, get rid of most of the grey area, have made the contrast under prices and locations a lot darker

3

oddz:
my reply was partially based on the answer from TheRaptor (not that it was a bad one) that showed code I see all over the web, which has a specific device-width listed (specifically for iPhones) and there are some apple-only meta tags that usually accompany those. Unless it really means to exclude all non-iPhone devices (sometimes necessary), my hair kinda raises when I see media-queries like that. IE, we do it because it’s retarded and needs help. Apple? Whatever man, you guys just make a phone that costs a lot.

I looked at the site linked in question, and the photo in question is a particular image from the client (of the client).
I’ll post it here and if the OP wants it gone then a mod can remove it later, but
the image in question
If I had no server-side recourse, I would totally crop that, not resize it. Simply because of how that photo was made. Lots of non-information with a face in the middle. Keep the face, crop the rest out.

I agree with you about cropping things uploaded by users… even Facebook’s attempt they used to have didn’t work very well (and I think there had been algorithms they used to try to find faces in photos so the faces were mostly in the center).

Now the image is only 15kb and the rest of the site is rather image-free so I wouldn’t say it’s necessarily undue hardship on the mobile user to download this image and have something happen to it client side (though I would definitely up the contrast on the Prices And Locations section… imagine viewing that on a crappy screen with light hitting it… I have trouble reading it here on my desktop in ideal lighting conditions).

4

Why not set the image width to 100%: img { width: 100%; }? This will cause any images to resize to fit the window.

By the way: It would be best to use a media query like this: @media only screen and (max-device-width: 480px) to target the iPhone.

5

I feel sad inside when someone says “I want this website to work on the iPhone”. As if everyone who owns any other kind of phone have less right to see the website too.

Sometimes someone wants to specifically target an iPhone for a specific reason and that’s fine, but in general I prefer media queries that run fast and loose, and the mobile-ish styles are still flexible enough that even if you didn’t specifically write for a 120x120px screen, your site still deals with it pretty decently (won’t be perfect, but hopefully still usable).

Re the photo: the client is unnecessarily giving a burden to phone users by insisting they download 15 kb for 400px worth of the colour grey.

Since 90% of the image is useless, it might be fun to try the cropping trick.

This is where you set the image as a background of the photo div, instead of as an HTML image (esp since, looking at it, I could successfully argue that the image is mostly decorating the page rather than informing it). Then on the desktop/large stylesheet, just leave the background-position to 0,0.

But on the mobile stylesheet(s), find the pixel coordinates for the guy’s head (his face is the important part of the image, not which colour shirt he’s wearing) and let the photo div remain square (using % height and width, though the height will only work if the box it’s contained in has at least a non-% min-height) and set the background-postion to what would be the ideal top and left coords. Only on the smallest of screens would his face get cut off, but who cares if his shirt gets cut off?

Browser suck at resizing images, and it’s kinda unfair to ask those who may be paying for bandwidth and using slow internets to load a ginormous image suited for desktop, but if you have no server-side options then cropping is probably the better solution (see how tiny his head/face would get if you resized that image? At what point does it become useless to any sighted user?).

I wish I happened to have handy the site where I first saw flexible cropping techniques (and that one did use an HTML img, but it was positioned inside a div with overflow: hidden for cropping as the page width shrank), but depending on your level of CSS you might know what I mean now anyway.

If not, I can either go looking or build an example myself.

6

stomme poes,

I agree with you wholeheartedly, I think I stumbled upon the same thing you mentioned, not sure though but unfortunately I didn’t boookmark it. Do you mind if you could locate the site, I tend to understand it more with an example.
thanks again

7

That is what this is for.

Once the image is shrunk down the only thing left to worry about is proper aspect ratio, likely fitting into a box. You can use background-size: contain for that which most modern mobile devices support.

The only draw back here is that images need to be applied as backgrounds, as opposed to img tags. In my opinion that is little drawback to advantages of using the above techniques.

Now unless your images are decorative, not user supplied cropping based on the focal point of a image is impossible unless the user where to specify it in some way… which would suck for the user adding the photos.

Actually CSS3 background size was created for that very reason, and it is actually much faster then the alternatives, including JavaScript - talk about slow. Not only are you able to resize bit contain and image within a box maintaining aspect ratio and orientation.

8

Seriously. As an Android user, I am always discriminated against :lol:

Seems everyone thinks about iPhone first especially when they create their apps. Many of sites I use have an iPhone app and as an Android user, I am out in the cold. We should be a Constitutionally protected class, I say.

9

I think “iPhone” is becoming the generic term for smart phones, similar to Bayer’s Aspirin becoming the generic term for acetylsalicylic acid, costing them their trademark. Which is why Coca-Cola and Kimberly Clark ruthlessly protect their brand names such as Coke and Kleenex. That’s why I capitalized; I do not want a greed of lawyers descending on me like a wake of vultures. :rolleyes:

The result is, in my experience, that people refer to all smart phones as iPhones. Except maybe Blackberrys. This, even though Android has a 40.1% market share, and is growing by 2% per month in the US. Apple’s is 26.6% and static. Android’s user base (US) is 31.48 million, compared to Apple’s 20.88 million users. (Resource). Market shares and installed base for Android are generally higher outside the US.

cheers,

gary

10

Scaling, resizing and cropping should not be done client-side. It is too expensive in terms of bandwidth, cpu overhead, and memory hogging.

If your client is uploading images, cropping is likely no-go, but size control is dirt cheap at the server, use the Imagick class. Check the UA’s accept header and if not already resized and saved on the server, do so. If resized images are already done, serve them instead of the full sized.

cheers,

gary

11

My company focuses on android and iphone. Its not that the website will not be accessible for other devices just not as nice of an experience and that is nothing more then progressive enhancement.