Skip navigation
Help

Digital imaging

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

First time accepted submitter BadassFractal writes "I'm in the market for a new large desktop monitor (or two) which I intend to use almost exclusively for programming and all sorts of software development-related work. I'm trying to keep the cost down reasonable, and I do enjoy as large of a resolution as possible. What do people 'in the know' out there use these days for that purpose? I'm thinking a 1920x1200 24" would be good, unless there's an affordable 2560xFoo option out there. I keep hearing about nameless Korean 27" screens, any thoughts on those?"

Share on Google+

Read more of this story at Slashdot.

0
Your rating: None

Vexing Viewports

“The Web is Agreement.” Jeremy Keith’s eloquent statement neatly summarizes the balance that makes it possible for us to build amazing things. Each week, new devices appear with varying screen sizes, pixel densities, input types, and more. As developers and designers, we agree to use standards to mark up, style, and program what we create. Browser makers in turn agree to support those standards and set defaults appropriately, so we can hold up our end of the deal.

This agreement has never been more important.

That’s why it always hurts when a device or browser maker does something that goes against our agreement. Especially when they’re a very visible and trusted friend of the web—like Apple.

You see, Apple’s newest tablet, the iPad Mini, creates a vexing situation: Its device-width viewport tag defaults to the same values as Apple’s original iPad (768x1024 pixels), even though the Mini's screen is physically 40 percent smaller. That means every button, graphic, link, and line of text on a web page on the iPad Mini appears tiny—even when we try to do the right thing and build flexible, multi-device experiences.

Two iPads, one too small.

But Cupertino isn’t the only culprit out there. This is a problem that’s been brewing since we started using the viewport—and it has to do with not just pixels, but our own practices as well. Let’s take a step back and understand what’s really causing today’s woes—and what all of us need to do about it.

The trouble with pixels

Today’s viewport woes can be traced right back to pixels—yes, those tiny elements we work with every day.

The first pixel challenge is quantity. The more pixels in the display, the more information can be displayed. But as these are physical pixels whose number can’t be altered after the fact, a second factor comes into play: the screen’s physical size.

Imagine two two-inch-wide displays (about the width of the iPhone), as shown below.

Two devices, each with a two-inch-wide display. The one on the right, at 640x960, would pack four times as many pixels into the same space as the 320x480 screen on left.

The first is 320x480 pixels, the second 640x960. This gives the second display four times as many pixels as the first, but fits all of them into the same physical space. This smaller pixel size results in content that is also smaller—making it crisper, but much harder to read as well.

This is exactly what happened on the Nokia E60. In 2005, most mobile phone displays were about an inch and quarter wide, with an average of 176 pixels in that width. But the E60, which sported a “huge” 352x416-pixel display, crammed twice the number of pixels into a similar amount of space. The result: A gorgeous, crisp—but often hard-to-read—display.

The E60 also introduced a now-familiar problem: how users would manage to surf “big” sites on a tiny device. Nokia’s solution was a new browser, the Mini Map. This browser behaved similarly to today’s smartphone browsers by first rendering the full-sized page, then scaling it to fit the available screen size. Superimposed onto this rendering was a transparent red box that could be repositioned using the device’s joystick. Clicking the joystick would zoom the content indicated within the box.

Enter viewports

Mini Map was probably one of the first commercial uses of a dynamic viewport—a construct designed to dynamically change the size or scale of the visible screen area in order to improve the user experience. But it was far from the last.

In 2007, Apple released the iPhone, a much larger device than the E60, but one with a similar problem. Even on a “huge” two-inch display, surfing the “real web” on an iPhone meant loading large pages onto a small device. Apple chose to solve this problem through a series of carefully orchestrated enhancements.

The first was the creation of a virtual viewport similar to the one Nokia designed for Mini Map. When encountering desktop websites, the browser would render them at their full size (based on a default canvas width of 960 pixels). It would then scale them down to fit the two-inch display. Users could interact with the page to scroll and zoom in on areas of their choice.

Apple didn’t stop there. It also developed a new viewport meta tag. Sites not using the tag would be rendered using the default, legacy-web viewport of 980 pixels. But developers who opted to use the tag could declare the viewport for their sites, including setting the width to the all-important device-width value. This value tells the browser, “please pick a width that fits this specific device’s screen best.”

Other mobile browser vendors were quick to follow Apple’s lead. Nowadays just about every mobile browser supports the viewport meta tag, including the device-width value. This provides us with an even playing field: It respects the efforts of those who take the time to adapt sites for the multi-device web, while those who haven’t yet made this transition still receive a “good-enough” default experience.

Mini problems

The value device and browser vendors assign to device-width is directly related to that device’s physical dimensions. Physically smaller devices need a smaller device-width value (which will result in larger content). Set a value that’s too large, and most content will be too small to comfortably read.

And that’s why Apple’s iPad Mini has a vexing viewport. It uses the same 768-pixel device-width as the regular iPad, even though its physical size is much smaller. One would expect to see a device-width more in line with those of similarly sized tablets like the BlackBerry PlayBook or second-generation Samsung Galaxy 7″—around 500 to 600 pixels, as shown in this chart.

Because of this device-width, web pages appear 27 percent smaller on the iPad Mini than they do on the Google Nexus 7 (calculated based on the relative size of device pixels)—all because Apple decided to describe the device’s viewport as 768 pixels.

Solving for content size

One of the first places this causes problems is in text: More pixels in a smaller space means that fonts sized in pixels will look correspondingly dinky.

Of course, many of us aren’t sizing in pixels anymore—we’re using relative dimensional elements like ems, right? Only, that doesn’t quite solve the problem this time.

When we use ems, we imply a certain trust that the browser’s baseline font size at the default zoom level—1em or 100 percent in unit parlance—is sane and readable. But that’s not always the case. The browser’s baseline font-size value (1em) roughly equates to a 16-pixel square. This ratio serves as a ligament that binds absolute and relative units, but it can vary from browser to browser.

On the iPad Mini, font-size at baseline is precisely 16 pixels. That may have worked fine when fewer pixels were packed into our screens, but on a dense display with an improperly defined viewport, that’s going to be uncomfortably small.

Not all browsers toe the 1:16 em-to-pixel line, though. The Kindle Touch’s browser, for example, has a high-density viewport, but adapts by using a 1:20 ratio, kicking the default font size up a few pixels for readability.

This might not fix all of iPad Mini’s viewport problems, but at least the content would be legible.

Three seven-inch tablets. Note the difference in rendering.

So why did Apple do this?

To understand why Apple would release a product with such a vexing viewport, we don’t have to look further than our own habits.

In the wake of the iPad’s initial release, web folk worldwide scrambled to adapt sites to look good on the new tablets. Somewhere along the way many of us collectively settled upon pixel-based notions of tablet-ness, and those notions often resulted in fixed, 1024x768-pixel layouts precisely targeted at these devices.

Were Apple to decrease the device-width value for the iPad Mini on account of its smaller physical size, it would guarantee a second scramble as existing tablet-adapted sites assuming a 1024x768 viewport suddenly looked unexpectedly wretched on the new device.

The responsibility here goes two ways. Browser makers need to provide reliable baselines of viewport and text sizing, yes. But we as implementers also need to stop grasping for pixel-perfect control over our layouts (the “control” is an illusion, anyway).

A way forward

The only way for us to move forward is together. As developers and designers, we need to hold up our end of the bargain and be mindful of how we do our work—and that means letting go of the notion of pixel precision once and for all. We need to earn the trust of browser makers so they hear us out when things just frankly aren’t right. We hope this article illustrates we’re trying to do the right thing. We hope browser makers acknowledge that and follow suit.

Standards and consistency are more important now than ever before. Please let browser makers and device manufacturers, like Apple, know that we rely on consistent and reliable decisions about default viewports and their zooming. We’re willing to hold up our end of the agreement, and we need them with us.

Let’s move into the future—together.

RSS readers: Don't forget to join the discussion!

0
Your rating: None

last day monitors

Screens with a 1024×768 resolution are a bit like Windows XP: there have long been better options, but they still remained the most often used screens on the web. That is, until now. According to the latest data from StatCounter, 1366×768 screens just surpassed 1024×768 as the most popular screen resolution used by the visitors to StatCounter’s global network of sites. Three years ago, 1024×768 still accounted for almost 42% of all visitors to the roughly three million sites that use StatCounter. Today, that number has fallen to 18.6% and 1366×768 screens now account for 19.28%, up from just 0.68% in May 2009.

It’s worth noting that these are global numbers. In Europe, the higher-resolution screens already overtook their predecessors late last year and in the U.S., 1024×768 still holds on to the top spot (but just barely).

Another resolution that is slowly declining in usage is 1280×800. This used to be an especially popular resolution on laptops, but most modern machines now offer higher resolutions.

For the most part, though, what sadly hasn’t changed much in recent years is the pixel density of these displays. This may change once Apple brings its Retina displays to its MacBook line, but right now, it’s almost as hard to find a small display with a very high resolution in a mainstream machine as it is to find a screen that isn’t widescreen.


Among those who will be happy to hear these numbers is surely Microsoft, which long ago decided that it would target 1366×768 as the standard resolution for Windows 8. To effectively use Windows 8′s Metro user interface, for example, 1366×768 is the minimum resolution, though it will run on 1024×768 screens as well. According to Microsoft’s own statistics, only 1.2% of active Windows 7 users currently have screens with resolutions of less than 1024×768 and just under 5% still use 1024×768 screens.

[image credit: Flickr user Vladimir Morozov]

0
Your rating: None

The high-res future is coming

The first of the new iPads will arrive in the hands of the public this Friday, March 16. Like the iPhone before it, and no doubt many more devices to come after it, the new iPad has four times the resolution of typical screens. That means your visitors will soon be looking at your site on a high-resolution screen with a whopping 3.1 million pixels.

The sharp, crystal-clear screens are awesome news for new iPad owners, but they create some new dilemmas for web developers who’d like to offer a better experience for high-resolution screens. Sure, increased pixel density means you can serve up sharper, better looking graphics, but there is a cost as well — bigger images mean more bandwidth and longer page loads.

This isn’t a new problem by any means and Webmonkey has looked at a variety of solutions in the past, including techniques like adaptive images and responsive images.

The problem is simple: you need to send smaller images to small screens and larger images to larger screens. Sending a huge iPad-optimized image to a device with a max resolution of 320×480 just doesn’t make sense. At the same time, when bandwidth isn’t an issue, most sites will want to serve high-resolution content to displays that can handle it.

The ideal solution would be to detect both the resolution of the screen and the available bandwidth. Then, based on the combination of those two factors, the server could offer up the appropriate image. Currently that’s not possible, though there are already proposals to extend HTML to handle that scenario.

The Responsive Image Working Group is a W3C community group hoping to solve some of these problems. The group is proposing a new HTML element, <picture>, which will take into account factors like network speed, device dimensions, screen pixel density and browser cache to figure out which image to serve up. Think of it as a much smarter version of the old lowsrc property. So far though it’s all hypothetical

In the mean time if you’d like to serve up high resolution images to your third-generation iPad visitors look no further than Apple.com for one (not necessarily ideal) way to do it. An Apple Insider reader noticed that Apple is already prepping its site to deliver double-resolution images to new iPads. Cloud Four’s Jason Grigsby, whose responsive image research we’ve covered before, has a great breakdown of what Apple is doing.

Essentially Apple is serving up lower resolution images by default, then using JavaScript to send larger images on to iPads. That works, but it will definitely mean increased download times for new iPads since they have to download two files for every graphic. Apple’s approach will also up the number of HTTP requests, which will also slow down the page.

The slower page loads seem to be an acceptable trade off for Apple since the company no doubt wants to showcase the new iPad’s high resolution display with high resolution images. For other sites the bandwidth trade off may not be worth the gain in image resolution.

Still, screens are only going to continue getting better with ever-increasing pixel density. Now is the time, if you haven’t already, to start embracing CSS 3 (avoid images altogether with gradients, shadows and rounded corners in CSS 3), Scalable Vector Graphics (SVG) for resolution independent graphics and of course @media queries to serve high-res background images.

For more on detecting and developing for high resolution displays, check out these posts from around the web:

0
Your rating: None

  

In darts, hitting the bulls-eye is harder to do than hitting any other part of the dartboard. This is because the bullseye is the smallest target. This same principle can also apply to touch targets on mobile devices.

Smaller touch targets are harder for users to hit than larger ones. When you’re designing mobile interfaces, it’s best to make your targets big so that they’re easy for users to tap. But exactly how big should you make them to give the best ease of use to the majority of your users? Many mobile developers have wondered this, and most have turned to the user interface guidelines provided by the platform developer for the answer.

 Ideal Mobile Touch Target Sizes
(Image credit: ogimogi)

What the Mobile Platform Guidelines Say

Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall. Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px. Nokia’s developer guidelines suggest that the target size should be no smaller than 1cm x 1cm square or 28 x 28 pixels.

While these guidelines give a general measurement for touch targets, they’re not consistent with each other, nor are they consistent with the actual size of the human finger. In fact, their suggested sizes are much smaller than the average finger, which can lead to touch target problems for users on mobile devices.

Small Touch Targets Lead to Big Problems

Small touch targets make users work harder because they require more accuracy to hit. Users need to reorient their finger, from finger pad to fingertip, to hit the target with clear visual feedback. Using the finger pad would cover the entire target, making it impossible for users to see the target they’re trying to hit. Users use the fingertip to hit small touch targets because it gives them the visual feedback they need to know that they’re hitting their target accurately. But when users have to reorient their finger, it slows their movement down, and forces them to work harder to hit their target.

Finger tips and finger pads

Not just that, but small touch targets can lead to touch errors. When small touch targets are grouped near each other, users can accidentally hit neighboring targets and initiate unintended actions. This is because the user’s finger overlaps on to the neighboring buttons. And if pressure is not carefully applied in the right spot, it’ll trigger the wrong action. It’s easy for users to make these errors with their index finger. But it’s even easier for them to make these errors if they use their thumb, because their thumb is much larger than the target. Sometimes users will tilt their thumb sideways and use the thin side to hit a small touch target. But this is a lot of unnecessary work.

Finger and thumb targets

Thumb use among mobile users is popular. Some users won’t always have two hands free when they’re on their mobile device. Many prefer the convenience of using only one hand and their thumb. Users shouldn’t have to switch from using one hand to two hands, or from their thumb to their index finger to hit a target accurately. And more importantly, the size of a target shouldn’t cause them to make touch errors. Small touch targets make things harder for users, where a finger-friendly target does not.

Pixel Width of the Average Index Finger

An MIT Touch Lab study of Human Fingertips to investigate the Mechanics of Tactile Sense found that the average width of the index finger is 1.6 to 2 cm (16 – 20 mm) for most adults. This converts to 45 – 57 pixels, which is wider than what most mobile guidelines suggest.

57 pixel target

A touch target that’s 45 – 57 pixels wide allows the user’s finger to fit snugly inside the target. The edges of the target are visible when the user taps it. This provides them with clear visual feedback that they’re hitting the target accurately. They’re also able to hit and move to their targets faster due to its larger size. This is consistent with Fitt’s Law, which says that the time to reach a target is longer if the target is smaller. A small target slows users down because they have to pay extra attention to hit the target accurately. A finger-sized target gives users enough room to hit it without having to worry about accuracy.

Pixel Width of the Average Thumb

There are many users who use their index finger to tap mobile targets. But there are just as many users who use their thumb as well. The big difference with the thumb is that it’s wider than the index finger. The average width of an adult thumb is 1 inch (2.5 cm), which converts to 72 pixels.

72 pixel target

For users who use their thumbs, 72 pixels does wonders. They’re easier and faster to hit because they allow the user’s thumb to fit comfortably inside the target. This makes the edges visible and easy to see from all angles. This means that users don’t have to reorient their thumb to the very tip to see it hit the target. Nor do they have to tilt their thumb to the side to hit it. One tap with their thumb pad is enough to do the trick.

A Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices found that user errors declined as the target size increased. Users were able to tap the target faster without having to make intentional physical accommodations to increase accuracy such as reorienting the thumb, which would have slowed performance.

Another study on Touch Key Design for Target Selection on a Mobile Phone also found that the number of errors decreased as the touch key size increased. In addition, it was provided that the larger the touch key size, the higher the success rate and pressing convenience.

Finger-Sized is Ideal, But Not Always Practical

As many benefits there are to using finger-sized targets, they’re not always practical in every situation. On a mobile device, you’re working in a limited space. This means when you have many finger-sized targets together, they can take up more space than your screen can afford. However, when you have a few finger-sized targets together, that’s when you can fit them all on your screen without trouble. You will need to measure the size of your screen and touch targets to know exactly how big of a touch target you can afford. If you can’t afford finger-sized touch targets on your interface, use the guidelines the mobile platform gives you instead.

Finger-sized targets are much easier to apply on a tablet than a mobile device because there is more screen space available. You can use them liberally without the fear of taking up too much space and improve tablet usability instantly. However, mobile devices are where users have the most trouble hitting touch targets. And that’s where finger-sized targets are needed the most. The challenge for designers is to figure out how to make the most of finger-sized targets on the mobile screen. This might require using less touch targets than you normally would. But this is a plus because it forces designers to keep their navigation simple and minimal.

Thumb-Sized Targets for Gaming Applications

Another thing to think about is when to use a thumb-sized target over an index finger-sized one. It’s difficult to know whether most of your users will use their thumbs or index fingers on your application. However, if your application is a game, it’s likely most users will use their thumbs to play instead of their index fingers. This is why thumb-sized targets are particularly useful for gaming applications. By making your game control targets thumb-sized, users can play the game with better handling and control. They’re able to see the game control targets as they move their thumbs, and the game will feel more adaptive to them.

It is without a doubt that matching your touch target sizes to the average finger size improves mobile usability for many. Whether your application is a game or any other, touch targets are designed for users to tap. If the user has to take their attention away from using your application to the way they move, orient or arc their finger to tap a target, it degrades their experience of your application. With this new-found insight, you can create applications that are truly finger-friendly. Finger-friendly design isn’t reserved for the few. It’s a new design standard for mobile applications to follow everywhere.

(al)(fi)

© Anthony T for Smashing Magazine, 2012.

0
Your rating: None

The pixel has long been the atomic particle of screen based design: a knowable, concrete unit of measurement. But layouts based on the hardware pixel are fast becoming an endangered species. Even the introduction of a new, W3C standard reference pixel, although it promises stability in the long-term, can't help us navigate the current chaos. Consider the two "standard" pixel definitions and 500 "standard" viewports your user's Android device may support. To create designs that transcend platform differences—the promise of the web and standards—you must normalize pixels across devices. Scott Kellum shows how math and media queries can keep you sane and help you design consistently across platforms.

0
Your rating: None

The Old Dead Tree pixel art challenge is complete and we have three new champions. This week&apos;s challenge awards go to the following pieces:<br /><br /><div class=&apos;iconlg&apos;><a href=&apos;/pixelart/67368.htm&apos; target=&apos;_blank&apos; class=&apos;winner1&apos;>Ye Olde Tree [EDIT 3]</a> by <a href=&apos;/p/33723.htm&apos; target=&apos;_blank&apos;>ThePixelKnight</a></div><div class=&apos;iconlg&apos;><a href=&apos;/pixelart/67435.htm&apos; target=&apos;_blank&apos; class=&apos;winner2&apos;>Tree of the Defunct</a> by <a href=&apos;/p/31479.htm&apos; target=&apos;_blank&apos;>Nate K</a></div><div class=&apos;iconlg&apos;><a href=&apos;/pixelart/67465.htm&apos; target=&apos;_blank&apos; class=&apos;winner3&apos;>Dying Breath.</a> by <a href=&apos;/p/32587.htm&apos; target=&apos;_blank&apos;>CPearson</a></div><br /><br />Thanks so much to all who took the time to vote and participate in the challenge! Check out the <a href=&apos;/forum/forum_posts.asp?TID=13583&apos;>Old Dead Tree forum thread</a> for more information.

0
Your rating: None