Apple just dropped a MacBook Pro with a 2880x1800 Retina display on us, and I'm sitting here watching designers and developers slowly realize they have a serious problem.
The specs are impressive, sure. 220 pixels per inch. About double the pixel density of a normal laptop screen. It looks unbelievable in person: fonts are crisp, images are sharp, everything looks like someone smoothed it out with a professional touch. But here's what nobody's really talking about yet: what happens to web design when your development machine shows you something completely different from what 99% of your users are seeing?
I get it. High-DPI screens are inevitable. Phone makers have been doing this for years. The iPhone 4 had that pixel density back in 2010. But there's a difference between designing for a phone and designing for the laptop that's sitting on your desk where you actually do work. When you're building a website, you want to see it the way your visitors will see it. Now, if you're working on a new MacBook Pro Retina, everything's going to look sharper, colors might render differently, and spacing that looked perfectly reasonable on your Retina screen might look cramped or awkward to someone on a regular 1920x1200 monitor.
The browser scaling helps, but it's not perfect. You can view at 100% and see two pages at once, or you can zoom and see one. Either way, you're not really seeing what your average user will see. And yeah, there's Firefox and Chrome on older machines, but who wants to keep debugging on ancient hardware?
What kills me is that Apple's going to sell a ton of these, designers are going to want them (the build quality is ridiculously good), and within a year everyone's going to be wrestling with this problem. We're gonna end up with a whole generation of websites that look perfect on Retina MacBooks and vaguely off everywhere else.
There's a chance this actually forces the web design world to get serious about responsive design and not relying on pixel-perfect layouts. That'd be good. Or we could all just adjust our expectations about what websites should look like and accept that your design is going to look slightly different on different screens, which—honestly—it always has. Nobody would die if a button looked 2 pixels smaller on someone's monitor.
There's also the asset problem nobody's mentioning. If you want images to look crisp on a Retina screen, you need to export everything at twice the resolution, which means bigger file sizes for every visitor, not just the ones with fancy new laptops. Somebody on a three-year-old laptop on a slow hotel Wi-Fi connection is now downloading a background image sized for a screen they don't have, just so it doesn't look blurry on mine. That's an actual tradeoff, not a hypothetical one. And most of us don't have a good answer yet for serving the right image to the right screen automatically. There are hacks: srcset attributes, media queries keyed to pixel density, JavaScript that swaps images after the page loads. None of it feels solved. It feels like duct tape holding together a problem Apple just created for the entire web design industry with one product announcement.
Still. I'd rather not buy a $2,200 laptop that makes it harder to do my job. At least not until the rest of the world catches up.
The MacBook Pro Retina is available now if you've got the cash. Everyone else will be working with whatever screen they've got, seeing the web the way it actually looks for most people.