If you follow me on Twitter then you know that I got the new iPad 3 a couple of weeks ago. Since then, I have been asked three questions by virtually everyone who has seen it. I'm not so sure they are asking what they are really wondering. I think what they really want to know is if they should get one and if their website needs to change as a result. Those are slightly more personal questions, so they aren't asked. I won't answer them specifically, but I'll try to hit on them as I cover the three questions I'm actually asked.
What is different on the iPad 3?
You can see a more exhaustive comparison here, but I will only discuss the screen display for now. The iPad 3 screen has an impressively high resolution. I'll break it down for you.
- The Screen Size of the iPad 3 is 9.5" by 7.3". (That's the physical measurement of the display screen itself.)
- The Resolution of the iPad 3 is 2048px by 1536px. (That's they number of pixles that exist in one row across and one column down the screen.)
- The Pixel Density of the iPad 3 is 264ppi. (That's the number of pixles that fit in one linear inch of the screen.)
Here's some perspective: If you were to search for an HDTV, you'd probably find something with a 42 inch screen advertising 1080p resolution. That means there are 1920 pixles across 40.6 inches of screen. There are fewer pixles displaying on more space giving a pixle density of only 48ppi. The iPad 3 has 264ppi!
What is the point of an iPad 3?
I have two answers that I give simultaneously.
- This is a luxury item. We've got phones, laptops, desktops, TVs and the like. No one needs a tablet. But it looks impressive, and the user experience is amazing, and it helps capture a client's attention.
- This is an inevitable item. The pendulum continues to swing. We went from gigantic computers to mainframes with small terminals, to personal computers with our own storage/processing, and now we're heading back to the mainframe concept only this time we're using the cloud. Simply put, no one needs this ... yet.
Does the iPad 3 change anything for web developers?
Yes, it does. Tablets take your website and put it in people's faces. They take your image and magnifies it ... really well. On a phone or tablet, the first thing that I do when I arrive on a site is zoom-in on what I want to see. That's great if you've got text, but what happens to your images? They get aliased (or pixelated). And now, the screen is so clear, you can really tell a difference!
What do we web developers do about this? Well, we're working with things called SVG (Scaleable Vector Graphics). Vector (as opposed to Raster) images can be big or small without loss of quality or addition to file size. They use dynamic equations instead of static numbers in their code. Take a look at the example below. (This will NOT work with IE!)
The following images are done in two different ways. The left half of the image is a standard *.png while the right is a *.svg. The top is at the native size. If you're looking at this on a computer, the two halves of the top probably look about the same. If you're on an iPad, you can probably notice a difference.
Now let's look at these same images when they are increased. Again, these are literally the exact same images. They have the same file name, file type, file size and everything. I merely told the html to display them at a different size. To a *.png images that is detrimental to the quality. To an *.svg it's no big deal. You retain perfect quality! Have some fun; zoom-in and see how the two images react differently.
I imagine we're going to start seeing some more *.svg usage. The only downside is that IE doesn't support it, but that's nothing new! According to w3schools IE usage is dropping drastically. And according to my very unofficial Facebook conversation, most people would rather their site look good on mobile than IE. Of course, they much rather just be sarcastic.