iPad

The Retina-driven bandwidth bottleneck

The announcement that the new MacBook Pros will have Retina displays is going to have a massive impact on web design.

The new iPads already have Retina displays, pushing their resolution above most desktop displays and even HD home-theatre set-ups. Challengingly for designers, this resolution increase comes within the bounds of a small screen. Apple uses terms like "crisp" to communicate this change, but ultimately we're talking about a shift to a pixel density of 300dpi. By comparison, most computer monitors have a pixel density of 100dpi. This bump to screen resolutions won't hit us in the same way as an increase in monitor size, because we're squeezing more pixels into the same space.

We tend to get used to a certain level of blurriness until a higher-definition alternative comes along — think of the transition from VHS to DVD, and then from DVD to HD. What was once perfectly acceptable becomes intolerably blurry.

This is challenging for designers for a number of reasons.

The browser on the iPad is always set to full screen. So it's always set to 2048x1536 or 1536x2048, depending on screen orientation. Retina laptops will have an enormous resolution, up to double the new iPad's resolution of 2048x1536.

While the iPad Retina screen displays page layouts at 1024x768, it has greater pixel density for assets. This means that while site layouts that are perfectly serviceable on a medium to large 100dpi monitor will appear the same on a Retina screen, logos, and imagery are going to appear blurry.

However, we can't simply replace existing imagery with higher-resolution imagery, because bandwidth capabilities haven't kept pace with resolution capabilities.

This is the first major bump in browser resolution since VGA and DVI. The bump to the current monitor standard paralleled the beginning of widespread ADSL/cable adoption. Monitor resolutions were growing as people's bandwidth capabilities were growing.

This new Retina standard is coming as people move from wired ADSL to wireless and 3G/4G internet. The resolution capability is massively growing, but we are moving to mobile connections that are less capable and less stable. Tablet use is driving a move towards 3G/4G media consumption, paralleling the move from fixed-line telephony to mobile.

So there's going to be a massive disconnect between screen resolution and bandwidth. We've been building high-bandwidth sites for a full browser experience, and low-bandwidth sites for the mobile experience. We now need to support high-resolution displays over low-bandwidth connections, as well.

Tablet ownership and mobile internet consumption show no signs of slowing down, and the effects of the National Broadband Network (NBN) roll-out won't be felt for a good couple of years yet, meaning that a large segment of the active audience is going to be in that high-resolution/low-bandwidth sector.

So, how do we avoid this bottleneck? In the next article, I'll walk you through some useful techniques that you can use.

Barry Saunders is a UX Architect.

About

Barry Saunders is a UX Architect. He has worked on projects for News Ltd, Google, Westpac, EFIC, WWF-Australia, QUT, and SBS.

21 comments
alexsm
alexsm

Maybe the combination of new HD resolutions in consumer devices and the bottlenecks in networks is the moment to think about pushing standards like SVG graphics or some other new standard to give the web the required higher definition images consuming lower bandwidth than bitmapped graphics formats?

gospellife
gospellife

Dcolbert makes a lot of sense except for the point the author is making regarding new standards. Apple may only have a below 20% market share (Macs still in use, new ones and iOS devices) but they historically lead the PC's and consumer electronic adoption. So Retina is more than a buzz word, it's the new HD. No self respecting developer wants to create for low end when new tech is popular and Retina is popular. The notebooks are Apple's foot in the water which will create a ripple effect and they will create tools for developing content that looks great and can handle bandwidth issues. Meanwhile, market pressure from Apple customers and others must drive data rates higher. It is taking too long for telecom companies to meet the need of cost effect high speed data. Imaging not needing a phone with an additional data package because the whole phone is a data service.

Ron_007
Ron_007

All that resolution is being "wasted" on handhelds. I want retina resolution on my desktop 19, 23, 27" LCDs. I had retina range resolution on my old 17 CRT and it was GREAT!. I MISS it on the carpy new LCD I had to get to replace it when the "magic smoke" escaped, pffft! LCDs limited to HD are such a step down.

gak
gak

... to use a looking glass on a monitor, something like Sherlock Holmes style. And I bet the next article will discuss vector graphics.

Slayer_
Slayer_

Any higher and I can't read the webpages anyways, and I end up setting the browsers zoom, which slows it down and blurs the images. A 4000 x 3000 display is useless to me. Maybe for gaming....

dogknees
dogknees

The web hasn't even caught up with Full HD video yet and that's 10 years old.

dcolbert
dcolbert

Would web design bump up their resolution to accomodate a PC platform that only has 12% of the market share? We can assume that the Retina capable MAC's are going to be a small percentage of THAT total, as well. Wouldn't it make more sense to continue to design for the lowest common denominator - the lowly Windows and Linux PC driving a regular 100dpi monitor - that makes up 85% of the PC surfing audience, and let the Retina displays deal with how imperfect the rest of the world looks? I mean... this IS about web pages, right? And web pages are designed for ALL browsers... and once you factor in all the Windows Phone 7, Android, and other mobile devices with their common, low resolution displays... it seems silly to think lots of websites are going to redesign simply because they look blurry on Macs and iPads. Even if you REALLY want to cater to those Retina displays - I'd assume that you would just put in a detection routine of some sort... "This webpage optimized for Retina displays in Safari". If browsertype = Safari *then* you feed your super-duper high resolution page. Am I missing something here? If you're feeding bandwidth choking pages to a majority of clients who aren't going to get anything out of the extra data you're clogging the pipes with - well, your webpage is the problem. If there is something wrong with my logic here, please correct me.

tkejlboom
tkejlboom

It's not just about the number of pixels. It's about scaling. Apple didn't get a new standard published for their new display, but it's standards compatible. 2880 / 1880 = 1.6

Slayer_
Slayer_

When I was shopping for a laptop, resolutions were even less than HD now, only way to get an HD resolution laptop was to get one with a bluray drive, which is fairly useless. My old 20 CRT is retina as well. Its dying though, still clear picture, but whatever it is that holds the picture in place is broken. So say at 1024 x 768, after a few minutes the edges of the screen will expand and the middle will shrink, making the outer edges of images stretched and the middle squished. at 1600 x 1200 and higher, it works alright, but it will frequently snap around from the edges of the screen, or get a black border and shrink the screen, tapping the side or top of the monitor often fixes it for a bit of time.

tkejlboom
tkejlboom

Go into your display settings and change the "font" size.

wizard57m-cnet
wizard57m-cnet

I know, I know...a glutten for punishment. Though most of my dialup internetting is done in plain old DOS now, and ususally for email and telnetting to a surviving BBS, and testing Arachne! ;)

tkejlboom
tkejlboom

Catering to the lowest common denominator gets you nowhere but last place. That makes you the old GM. You lose money on every crap car, but by God do you sell a lot of them! However, your other proposal, exercising discretion, makes complete sense. A little AJAX should resolve this issue nicely. maps.google.com is the perfect example. Notice as you expand the window to either side, how it only updates map element? So, proof of concept for everyone else at least.

bboyd
bboyd

I can't imagine that much content looks better on a smaller screen Plus I can't Imagine we had articles like this every time a small improvement was made in the video display market like the internet world ended when monitor went from 768 to 1024. Oh my but that wasn't on an Apple. This will cause a massive bandwidth consuming black hole....of course I download more HD video than I consume already. Maybe we just needed another reason to hear that cool word "Retina"(tm) as if it displays into my eye ball directly, well it needs to go from 3+million pixels to 80+million to even get close. Just cone cells alone >7million . sure they look nice but how do they really compound the already geometric growth of bandwidth requirements in the net that much even if every current display was replaced by them.

barry_saunders
barry_saunders

Retina display Macs are only going to be a small percentage of the PC surfing audience for now, but Apple tends to lead the market on tech specs. Sony are already building devices with a 'Reality Display' at 233 DPI, and others are likely to follow. The point I was trying to get at is that you need bandwidth detection as well as browser detection. A 300DPI monitor on a 3G connection needs a combination of responsive design and low-bandwidth images, not just the super-duper high-resolution page. You can't assume that a high-resolution screen is going to be connected to a fat data pipe.

Slayer_
Slayer_

A large number of applications and operating system fonts aren't effected by those settings. And changing DPI settings crashes a lot of legacy programs. Or worse, some applications do recognize the font change, but dont increase the container to match, so button and label text runs off the edge becoming unreadable.

dcolbert
dcolbert

I'll give you that one... good analogy. :) It isn't EXACTLY what I meant - but your response makes it clear that this is how it came across, anyhow. What I really mean is that for most development, you want to be able to reach the BROADEST number of end users, consumers, whatever, balanced with profitability... the "write for iOS first, Android second, and Windows Phone, maybe... and everything else... probably not" principle, more or less. But whatever you do, yeah, write it good - be efficient. Use tricks.

tkejlboom
tkejlboom

The internet is doing just fine. In fact, the internet would LOVE the business. Turn on more of that dark fiber! However, Comcast stated on the last earnings call that it's still aiming for 33% margin and doesn't want to risk growth by increasing prices to offset capital costs. In simple terms, Comcast wants you to pay more money for less stuff. I'm currently running 2 monitors = 3200x1200. This PoS(employer provided) is four years old and wasn't that good back then. I can see a difference, and it's about time. So. 1. Visit your optometrist. 3. Stop imposing your limitations on others. 2. Stop making excuses for last mile providers to dick over their customers.

dcolbert
dcolbert

Agreed - browser identification strings and some sort of bandwidth check are going to have to develop to deliver an optimized browsing experience as/if these high pixel density screens catch on. In that case, I'd wonder what is more important in the long run, super-saturated, rich colors at a pretty acceptable resolution - or super crisp, super dense dpi... Do we need either, or do we need both? Your example used the change from VHS to DVD to HD as an example... and my observation is that both HDTV and BluRay weren't so much enthusiastically adopted by people as forced on them. The law of diminishing returns said that the blow-your-hair-back experience going from VHS to DVD wasn't as impressive going from DVD to HD or BluRay. In fact, we started to notice how ugly our TV personalities were, how badly their studio makeup covered their blemishes. I wonder if we're approaching that horizon with the Retina displays. Samsung makes them, right - and still pushes Super-IPS on their own products. When VGA first became popular people complained about how a 640x480 image looked "computerized" - you could see the evident pixels. These were on .28 dot pitch monitors displaying 640x480 at what... 16 or 24 bits. The Amiga had beautiful 4096 color HAM mode images on .38 dot pitch monitors... and they looked more like photographs and less like computer images. Which made me realize that at THAT time, we perceived television as being more "realistic" than PCs because PCs were too GOOD. The movement and blurriness of television masked a lot of the flaws. So did most Amiga displays. Once you got to a nice NEC Multisync with a decent dot pitch and a high enough resolution, things were so clear you saw the flaws. Apple is pushing a limit right now - and I'm sure eventually it will go mainstream. But how soon will it cause an imminent bandwidth bottleneck? I think Retina displays will remain the exclusive bragging rights of Apple products and Apple users for awhile... Like an amp that goes up to 11. ;)

bboyd
bboyd

2156x1600 should be the standard low end computer monitor. HD TV has slowed monitor improvements greatly. Asian markets are getting them but we have to wait for apple to introduce it. As for connection speed as an American I'm tired of being a second rate country 100Mps is common in Asian and European markets, here its some premium business line. From the sounds of it 1Gps is standard in Singapore and fiber to household is nearing 100% rates.

tkejlboom
tkejlboom

I embraced HD with enthusiasm. You want to know what slowed HD? The stations in my neighborhood adopted it a month before the final EXTENSION which MANDATED it. The cable companies deployed an inferior and proprietary version of it to kill the DVR market. The TV manufacturers deployed crap screens that SCALED to HD for years, and covered it with marketing materials to make it them hard to distinguish until you brought them home and could control the feed. I don't know a single person that ended up complaining that the people on TV weren't as pretty as they wished. I remembered people complaining about the bars on their TV, scaling(&overscanning), and poor quality upconverting of low quality content to high resolutions. The single greatest problem with the deployment of HD was that the people responsible for deploying it were invested in the technologies which HD disrupted.

Editor's Picks