resolution not 72?

[BluegillMedia]

As I am sure many of you know, most of the devices these days are more then 72 ppi. If I have the numbers right the iPhone 4 has a 163 ppi resolution while the to 4s has a 326 ppi resolution.

When creating websites for these devices, should graphics be being created at higher then 72 like you would for print? Thoughts?

[Eye for Video]

Well for digital media it really doesn't matter what you set the ppi at. 1000 px is 1000 px.
So a 500 px x 500 px image saved at 500 ppi will display the same as a 500 px x 500 px image saved at 72 ppi on a digital media device.
The pixel dimensions are what is important.
If you are working with a 1000px wide web site, you have room for 2, 500 x 500 images, regardless of the "ppi resolution" you saved the images at.
Best wishes,
Eye for Video

[BluegillMedia]

Ya I suppose hey, I guess regardless of how they phrase their ppi, it is still X number of pixels wide...

[auntnini]

Yes, in Photoshop for instance, pay attention to Pixel Dimensions: Width and Height for digital output on monitor.

Here's a screen shot of Image> Image Size dialog box

[BluegillMedia]

Photo-what? :P

[auntnini]

Adobe Photoshop

[auntnini]

I just found this by Keegan Street July 16, 2010 at http://labs.thesedays.com/blog/2010/...bile-websites/

10 tips for web designers in 2010 – the year of the mobile.

1. Design with a fluid layout, min-width: 320px

There are two factors that make this a necessity. First, mobile device screens are so small that you really need to utilise all of the*available*space. Second,*there are a lot of different screen resolutions out there.*The only way to utilise all of the space available on different sized screens is with a fluid layout.

I have found websites with a minimum width of 320px will look good on most high-end mobile devices like the iPhone, Android and Nokia N97. Here are the screen resolutions of some of the most popular devices:

Device Screen res (height x width)
iPhone 320 x 480
iPhone 4 320 x 480 (scaled by a factor of 2)
Nokia N97 360 x 640
HTC Legend 320 x 480
LG eXpo 480 x 800

Technically, the retina display on the iPhone 4 has a screen resolution of 640 x 960 pixels but don’t worry, if you optimise your site for 320 x 480, the iPhone 4 will scale it up by a factor of two so it fits the whole screen. You will need to insert higher resolution images – but more on that in the next section!

2. Include high res images for the iPhone 4 retina display

The iPhone 4 display has four times the number of pixels as that of the original iPhone. To prevent mobile sites from looking tiny, it magnifies them by 200%. That works great on text and vector images like SVG. But its not so hot on bitmap images (or even the HTML5 canvas so it would seem). To avoid pixelation, you need to insert alternative high resolution images for the iPhone 4.

Designers should create their Photoshop documents with a width of 640 pixels. Developers should export the images at full res for iPhone 4 and 50% res for everything else.

Here’s how to use a CSS media query to insert a high resolution image for iPhone 4:

.myImage {
****height: 40px;
****width: 100px;
****-webkit-background-size: 100px 40px;
****background: url("images/myImage.jpg");
}

@media screen and (-webkit-device-pixel-ratio: 2) {
****.myImage {
********background: url("images/myImage@2x.jpg");
****}
}

The first line that might jump out at you as being a little unusual is probably -webkit-background-size: 100px 40px;. The -webkit-background-size CSS property takes two parameters: width and height. The parameters can be lengths, percentages or "auto", and can even be mixed, i.e. -webkit-background-size: 100% auto. This tells the browser to stretch the background image to a specific size.

The second interesting part is the media query @media screen and (-webkit-device-pixel-ratio: 2) {...}. This means that any styles contained within the curly braces only apply if the device has a pixel ratio of 2 (two physical pixels per measurement pixel). Inside the media query selector, we override the .myImage class, and replace the background image with the high resolution image myImage@2x.jpg

3. Turn off auto-scaling

Mobile devices will assume your website is optimised for desktop computers unless you tell them otherwise. Add a viewport meta tag to the head section of your HTML to set the width of your website to match the width of the display, render with a zoom level of 100% and prevent the user from zooming in/out.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Mobile phones will also adjust text size when the screen orientation changes unless you include a special CSS parameter:

body {
****-webkit-text-size-adjust: none;
}

[BluegillMedia]

2 Questions:

First why wouldn't you just build it for the 640 resolution and allow the 320 screens to scale it down (scaling it down always works better then scaling it up).

Second, rather then using a "-webkit-device-pixel-ratio" (which in my opinion are really just hacks that are not cross-browser or part of any standards) why wouldn't you just use a:

@media only screen and (min-device-width: 320px) and (max-device-width: 640px) {
.myImage {
********background: url("images/myImage@2x.jpg");
****}
}

that CSS is compliant with all CSS3 capable browsers, rather then a web-kit which is hit-and-miss.

[auntnini]

It's from 2010 so it may be outdated. I just found it and thought it might be helpful.

Hopefully, someone else with more expertise can answer your questions

=========
P.S., can someone advise me about
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> ?

What would be best maximum-scale for user-scalable=yes? Or is letting user scale a bad idea?

[jedaisoul]

First why wouldn't you just build it for the 640 resolution and allow the 320 screens to scale it down (scaling it down always works better then scaling it up).

In my, albeit limited, experience there are pitfalls in this approach.

1. Basically, you need to build a site that will fluidly adjust down to 320px wide. Why? Because some smart phones (particularly Symbian devices) screw up the web site if it is more than 320px wide.

2. You also need to allow for the side scroll bar as well. In practice this means reducing the minimum screen width to 300px. 310px might be ok, but it is safer to allow down to 300. So I design fluid screens ( no media queries) that automatically adjust from 800px down to 300px wide. I test specifically at 320px (on a Symbian device), and 600px and 800px widths (on a Kindle), to see that the display is optimal at these points.

Second, rather then using a "-webkit-device-pixel-ratio" (which in my opinion are really just hacks that are not cross-browser or part of any standards) why wouldn't you just use a:

@media only screen and (min-device-width: 320px) and (max-device-width: 640px) {
.myImage {
********background: url("images/myImage@2x.jpg");
****}
}

that CSS is compliant with all CSS3 capable browsers, rather then a web-kit which is hit-and-miss.

I basically agree, but are all smart phones CSS3 compliant? I doubt it. I'm going through all my web sites making them fluid, and it seems that some smartphones support only a subset of CSS2 let alone 3! If so, there is no magic bullet.

It seems to me that you have to decide whether to support Symbian devices. If so you need to either have separate sites (not good) or accept the compromises needed to meet the limitations of the device. This is still work in progress for me. I've overcome a number of issues by taking the minimum screen width down to 300px, and simplifying the code. In particular the levels of nested DIVs I'd used, but so far I can't get the Symbian phone to flow text round IFrames. It runs the text behind the frame, which makes it unreadable! Ho hum