: Mobile Web application graphic design The resolution of the iPhone 4/4s is 960x640 and the the iPhone 3gs is 480x320. How does one go about designing web pages for mobile devices with all sorts

@Angie364

I had the same question before I started designing web app for one of the startup. The fact it it wont matter because the experience is different for browser page vs native app. I used normal images saved as .jpeg or .png with regular 72 dpi on my pages...they render totally fine.

Vote Up Vote Down

@Holmes874

iPhone 4+ is called 'retina' display. It, indeed, has twice the pixels, but it's not usually a concern for the designer other than, if they so choose, they can provide those with retina displays higher resolution images to give it a crisper look. Apple was smart and pretty much treats the retina display like the standard display in terms of rendering web pages. In otherwords, a web page on both devices looks the same physical size (rather than it being rendered extremely small on the Retina display).

Google 'designing for retina display' and you will find all sorts of tutorials that show you how handle the CSS for retina iPhones.

Apple's decision to exactly double the x/y amount of pixels and let most of that be automated is a great thing for us web devs. What's not so great are some other high-PPI devices coming on to the market that don't particularly identify themselves as high-PPI. So in those situations, you end up with really small type and such.

Vote Up Vote Down