We need to move away from this old-world notion of pixel-based designs. What we really need to base our designs on are the physical dimensions of the screen (fully available to us through media queries).
‘Number of pixels’ are a nice to have to make sure our images are as crisp as possible and it would be beneficial if the browser would return the truthful amount rather than impersonating an older version of itself.
Copy & paste the code below to embed this comment.
efc
I agree with one premise of this article (web designers and device designers each have to hold up their end of the bargain) but not the other (Apple failed to do this). You see, I think the bargain is a complex one. Web designers do their best to predict what will work best for the user and design to that standard, but device designers are doing the same thing. They won’t always agree, that is the point of the agreement, we can agree to disagree and trust one another in our different world views.
In this case I believe Apple carefully considered the matter and decided that the market for the mini would be people who wanted to trade size and weight for slightly smaller rendering. This choice positions the mini for a younger (less eye-challenged) crowd. Apple made this choice evident not simply with its viewport setting, but with the whole interface of the mini, which renders all of iOS a wee bit smaller than the regular iPad.
Apple’s choice gives people in the market, you and I as we survey devices to buy, a real choice to make. Do we want everything a bit bigger, or do we want a smaller/lighter device. We make that bargain when we buy the device.
As web designers we should not be second guessing that bargain. Our end of the bargain is to render for a 768 viewport. That’s what the user, implicitly, expects because that is how the device is designed. As a mini owner, I would be very upset if a web page rendered in any way differently on the mini than it did on the iPad. After all, I would have bought the mini based on the bargain Apple offered: same iPad, just smaller. Who am I as a web designer to decide that my personal preference for “bigger” is the “right” choice.
We should keep our end of the bargain, design for the viewport we are given. Leave it to the hardware manufacturers to set the viewport they intend for their product and the market of buyers to vote with their purchases on whether that configuration makes sense. So far, Apple seems to have no problem selling the mini’s value proposition.
Copy & paste the code below to embed this comment.
efc
One more thought on this issue. Some have advocated bringing back font size controls and the like. Actually, what would be much simpler for browser makers would be for them to offer users the ability to modify the viewport. In other words, create an “accessibility” type setting that lets the user zoom the viewport by a few set multiples. If my eyesight is very poor, I might choose a 2x “view” and then the browser on the mini would report 384 for the viewport. Or I might choose a less aggressive 1.25x view just because my fingers are a bit too fat for the tiny buttons and then my viewport would be reported as 614.
It would also be (relatively) easy for browser designers to implement, since other forms of zooming are already common in their frameworks.
This would provide a three-way bargain: web designers design for viewports, manufacturers set reasonable standards for their device’s intended market, users get to override manufacturers if they so desire.
By the way, I don’t think this setting would be used very often. I think it could be relegated to the purgatory of the iOS Settings app, for example, as part of Safari or Accessibility options. It would not have to be as immediately available as the old font size widgets.
Copy & paste the code below to embed this comment.
Luke Wroblewski
Everyone, Yes it would be great to have better information about screens. However device-width (for viewports) is a mechanism in place today on many of the most popular browsers (esp. mobile) out there. So we can use it now to adapt/optimize designs. Which is is why we’re bringing up the issue of consistency & sensible defaults in its implementation in different devices/browsers.
You don’t have to use device-width in your sites/designs. There’s LOTS of ways already out there to get screen info. It is not the only measure of how many pixels a screen has. If you want to get scared, check out “James Pearce’s in depth-analysis”:http://tripleodeon.com/2011/12/first-understand-your-screen/
If you use “device-width” for your layouts, you are saying “browser use the size that is best for this device” that does not mean a literal translation of physical pixel size. In fact, viewport is variable by design. Having a different “device-width” from the number of physical pixels is not “lying” it is setting a sensible rendering baseline based on the size/form factor of the device.
As we outline in the article this can be done with different default zoom levels as well (i.e. 1em = 20px vs. 16px)
Thanks for writing this, it is perplexing. I’m having a hard time justifying these high-def mini devices because all they do is make our sites look like garbage. As a photographer I struggle with uploading higher resolution photos to my site verses keeping them small for browser speed. I can see how having higher resolution viewing screens would be beneficial for other tasks (like editing photos) but is anyone really doing anything on these devices other than searching the net?
The way to solve this problem with iPad Mini is to declare them as retina devices. They could have done the same as with Ipad Retina: declare 2048 pixel device a 1024 resolution. IPad Mini could have been declared also a half resolution device to browsers. Instead of their 1024×768 they could have use the half resolution of 512×384, and everything would have been the normal size.
The device width is—and should remain—the physical amount of device pixels. The issue here is how the devicePixelRatio is calculated. As Scott mention, the W3C has suggested a baseline target to aim for. Just use the correct devicePixelRatio
physicalPixels * idealPixels = devicePixelRatio
40 Reader Comments
Back to the Articleaepicos
We need to move away from this old-world notion of pixel-based designs. What we really need to base our designs on are the physical dimensions of the screen (fully available to us through media queries).
‘Number of pixels’ are a nice to have to make sure our images are as crisp as possible and it would be beneficial if the browser would return the truthful amount rather than impersonating an older version of itself.
efc
I agree with one premise of this article (web designers and device designers each have to hold up their end of the bargain) but not the other (Apple failed to do this). You see, I think the bargain is a complex one. Web designers do their best to predict what will work best for the user and design to that standard, but device designers are doing the same thing. They won’t always agree, that is the point of the agreement, we can agree to disagree and trust one another in our different world views.
In this case I believe Apple carefully considered the matter and decided that the market for the mini would be people who wanted to trade size and weight for slightly smaller rendering. This choice positions the mini for a younger (less eye-challenged) crowd. Apple made this choice evident not simply with its viewport setting, but with the whole interface of the mini, which renders all of iOS a wee bit smaller than the regular iPad.
Apple’s choice gives people in the market, you and I as we survey devices to buy, a real choice to make. Do we want everything a bit bigger, or do we want a smaller/lighter device. We make that bargain when we buy the device.
As web designers we should not be second guessing that bargain. Our end of the bargain is to render for a 768 viewport. That’s what the user, implicitly, expects because that is how the device is designed. As a mini owner, I would be very upset if a web page rendered in any way differently on the mini than it did on the iPad. After all, I would have bought the mini based on the bargain Apple offered: same iPad, just smaller. Who am I as a web designer to decide that my personal preference for “bigger” is the “right” choice.
We should keep our end of the bargain, design for the viewport we are given. Leave it to the hardware manufacturers to set the viewport they intend for their product and the market of buyers to vote with their purchases on whether that configuration makes sense. So far, Apple seems to have no problem selling the mini’s value proposition.
efc
One more thought on this issue. Some have advocated bringing back font size controls and the like. Actually, what would be much simpler for browser makers would be for them to offer users the ability to modify the viewport. In other words, create an “accessibility” type setting that lets the user zoom the viewport by a few set multiples. If my eyesight is very poor, I might choose a 2x “view” and then the browser on the mini would report 384 for the viewport. Or I might choose a less aggressive 1.25x view just because my fingers are a bit too fat for the tiny buttons and then my viewport would be reported as 614.
This would have an advantage over font size choice of being (A) universal across websites and (B) giving the website designers the cues they need to fix up the whole design, not just the fonts, while © adding no extra work for the web designer who is already dealing well with viewports.
It would also be (relatively) easy for browser designers to implement, since other forms of zooming are already common in their frameworks.
This would provide a three-way bargain: web designers design for viewports, manufacturers set reasonable standards for their device’s intended market, users get to override manufacturers if they so desire.
By the way, I don’t think this setting would be used very often. I think it could be relegated to the purgatory of the iOS Settings app, for example, as part of Safari or Accessibility options. It would not have to be as immediately available as the old font size widgets.
Luke Wroblewski
Everyone, Yes it would be great to have better information about screens. However device-width (for viewports) is a mechanism in place today on many of the most popular browsers (esp. mobile) out there. So we can use it now to adapt/optimize designs. Which is is why we’re bringing up the issue of consistency & sensible defaults in its implementation in different devices/browsers.
You don’t have to use device-width in your sites/designs. There’s LOTS of ways already out there to get screen info. It is not the only measure of how many pixels a screen has. If you want to get scared, check out “James Pearce’s in depth-analysis”:http://tripleodeon.com/2011/12/first-understand-your-screen/
If you use “device-width” for your layouts, you are saying “browser use the size that is best for this device” that does not mean a literal translation of physical pixel size. In fact, viewport is variable by design. Having a different “device-width” from the number of physical pixels is not “lying” it is setting a sensible rendering baseline based on the size/form factor of the device.
As we outline in the article this can be done with different default zoom levels as well (i.e. 1em = 20px vs. 16px)
ContinuumPhotography
Thanks for writing this, it is perplexing. I’m having a hard time justifying these high-def mini devices because all they do is make our sites look like garbage. As a photographer I struggle with uploading higher resolution photos to my site verses keeping them small for browser speed. I can see how having higher resolution viewing screens would be beneficial for other tasks (like editing photos) but is anyone really doing anything on these devices other than searching the net?
milosp
The way to solve this problem with iPad Mini is to declare them as retina devices. They could have done the same as with Ipad Retina: declare 2048 pixel device a 1024 resolution. IPad Mini could have been declared also a half resolution device to browsers. Instead of their 1024×768 they could have use the half resolution of 512×384, and everything would have been the normal size.
David Knowles
The device width is—and should remain—the physical amount of device pixels. The issue here is how the devicePixelRatio is calculated. As Scott mention, the W3C has suggested a baseline target to aim for. Just use the correct devicePixelRatio
physicalPixels * idealPixels = devicePixelRatio
David Knowles
Oops I meant; physicalPixels / idealPixels = devicePixelRatio ^^
ashandrien 1
The end of this article kind of reads like an Anonymous manifesto…hmmm
katex
More like the shady manifesto.. double hmmm