Like everyone else who watched Apple’s WWDC yesterday, I wouldn’t mind getting my hands on one of those brand new MacBook Pros with a Retina Display. Of course, since it’s starting at $2,200, I’ll have to wait to make that jump, and I’m going to take a leap of faith and guess I’m not alone in that. While we wait, it’s worth looking at what makes this new release so special.

The new MacBook Pro model sports high-end specs and is almost as thin as a MacBook Air, but most importantly, it has its own “Retina Display.” Yes, that term is imperfect, but what matters most is that, with this release, super high resolution displays have arrived on laptops.

Now, it’s only a matter of time before competitors start trying to offer the same benefits of a high resolution screen (easier reading, stunning videos and games, etc), and this means that every software developer on the planet will soon have to start preparing for sharper graphics in order to keep up. Apple has effectively ushered in a new era of high resolution displays.

Native apps, however, aren’t really going to struggle much with this. The Web? That’s an entirely different story.

pinterest2 The Web is going to look hideous on the new retina MacBook Pro Pinterest’s logo still looks awful on the new iPad, and soon the new MacBook Pro

Plagued with bandwidth constraints and corner-cutting solutions, the Internet is about to get a whole lot uglier for anyone using the new MacBook Pro, because, just like the latest iPad, every single pixel that normally hides behind your sub-par display will soon be standing right in front of you stark naked.

The Web, as most of our readers will know, is still highly image-based and will stay that way until some magical vector camera hits the market. Surely, we’ve come a long way from entirely image slice-based HTML

layouts, but we still live in a world where graphics that could be well suited as scalable vectors wont cross over any time soon.

gq The Web is going to look hideous on the new retina MacBook Pro Blurry banners from GQ, on the new iPad’s retina display

In short, buttons, logos and anything affected by Photoshop’s “Save for the Web” settings, will look blurry or pixelated — even to untrained eyes. Apple knows that isn’t enough of a problem to discourage anyone from actually buying a high resolution display, but the Web definitely needs to prepare.

Here’s what will have to change:

  • Bandwidth: Higher quality photos, graphics and videos will put more pressure on ISPs to raise bandwidth limits and increase speeds.
  • Vectors: Scalable graphics work just like text, and are already needed for true design flexibility among different types of devices. Now it will be even more important for sites that want to support varied screen resolutions. You can learn more about using SVG in Web design here.
  • Renovations: Web designers will have to go back and re-save their assets to be retina-friendly, if they haven’t already for the iPad. Soon we can completely kiss 72 dpi goodby.
  • Typography: Web type will need to continue evolving as text presentation becomes more important. This also means larger websites. Hopefully this means the emergence of a new standards to keep type foundries happy.

Good thing is, we’re on the cusp of a more beautiful Web in many ways, and bumping up the resolution of the entire Internet makes perfect sense. Displays were always going to improve, and now that Apple has nudged the industry forward, it wont be long before every laptop, tablet and phone gets a spec bump. No matter what, Web designers, developers and ISPs must keep these changes in mind to avoid unfortunate surprises in the future.

As designers, developers, users and members of the Web community, what do you think of this coming shift? Feel free to leave your thoughts in the comments below!

Related: Apple’s image_replacer.js, 2X images, progressive JPGs, CSS background images, responsive images

 

More like this article

6566846499_3533e53ecb_z
By — 12 Jun '12

WordPress.com Sites Get Infinite Scrolling

Screen Shot 2012-06-12 at 4.38.27 PM
By — 13 Jun '12

Finally: The iPhone's shutdown spinner is Retina ready in iOS 6

Popularity Of Social Networking Website Grows
By — 19 Jun '13

Facebook Rolling Out Ability To Insert Images Natively Into Comments

Discussion

  • http://mikepuglielli.com Mike Puglielli

    Its funny that everyone wanted a Retina display…turns out we aren’t ready for it—Its too soon.
     
    If you’re an iOS developer, or App developer in general, this is perfect. The pixel density really helps design for retina displays, otherwise I can’t find a real reason for it. 

  • anonymous

    Being a member of both the print and web design community, I’m surprisingly more excited for the retina display in a designing-for-print capacity.

  • Harrison Weber

     @Mike Puglielli Well-prepared graphics really look beautiful on a Retina display. Also text. I don’t think we’re not ready for them to be made…I just know the Web needs to play catch up.

  • Jason Woodward

    “Standard definition movies are going to look hideous on HDTVs!”Right. That’s how progress works. 

  • Jason Woodward

    “Standard definition movies are going to look hideous on HDTVs!”
     
    Right…that’s how progress works. The pros definitely outweigh any potential cons here.

  • Harrison Weber

     @anonymous high-res displays mean higher accuracy for print prep

  • Redwan Huq

     @Harrison Weber  @Mike Puglielli The Web doesn’t need to do a damn thing until ultra-high res laptops and tablets are commonplace AND under $1k. This will obviously take a long, long time. The only thing a high-res web means for us = slower loading of everyday websites and more expensive ISPs. So I’m all for keeping the web as it is until that point.

  • Matt Convente

    As a front-end developer and web designer, I’ll be one of those affected by the new Retina display. It’s just the way of life, and I’ll do lots of research before I adjust all my image assets.
     
    There are two things I’m concerned with, testing and maintaining support for ancient browsers. First, unless I get a new Retina display MBP (and with my current 17″ only a year old, that’s not happening for a while), I won’t be able to truly test image quality. I’ll never know what the final results are and will just have to prep higher-res images and hope for the best.
     
    Second, and most important, maintaining support for ancient browsers. This is especially true for web products that have enterprise customers with old computers running IE7/8. Most people don’t realize how many large companies still have very outdated hardware, and with IT lockdowns employees usually aren’t able to self-upgrade to a better browser.
     
    Maybe having to reconcile with Retina displays will give web products more courage to push away their older customers, but that’s hard to do when they make up a significant portion of your revenue.

  • Harrison Weber

     @Redwan Huq  @Harrison Weber  @Mike Puglielli Apple sold 3M new iPads in three days. Also, the next airs will almost certainly feature a higher resolution screen at the same price range.
     
    This shift is going to take 2-5 more years to take full effect, but it’s happening.

  • Russell Ziskey

     @Harrison Weber 
    The Web still doesn’t even have a decent page-description language.  The whole thing is still a pathetic hack that coerces a result through trickery and workarounds.  HTML should’ve been replaced by a PostScript-like language by now.
     
    Not to mention that we don’t need to wait for 2K assets to download.  What a waste.

  • Harrison Weber

     @Russell Ziskey The Web certainly isn’t perfect, but I can’t hate on it completely. It’s like my baby.

  • anonymous

    Hi Web,
     
    Please do grow up soon, I have been using high quality monitors for photo editing for so long now, Beautiful monitors with High resoulutions. But to browse the web I have to turn to my  low res monitor or use only a part of the screenfor viewing web pages :-(
     
    Thank you apple for making the push. With this I hope the industry follows an is able to create cheaper high res monitors through mass production and eveybody gets the same glorious images that I get to see on my High end monitors
     
    Peace

  • anonymous

     @Mike Puglielli
     Hi Mike, Nice thought…But
     
    Somebody has to do something about things else much may not change even for centuaries. For example the LCD , the technology was invented in 1888 it was until 1988 until Sharp Corporation decided to do something about it and we had our first commerical LCD TV
     
    From then it has been 25 years now, today Sharp may not be the largest MNC in the world but if they had not taken that step, we never know how much more longer we would have had to wait to see 1080P screens all around.
     
    Also I am pretty sure in 1988 nobody thought we needed LCD TV’s let alone 1080P Videos. 

  • paulmcclean ಠ_ಠ

    Protip:
     
    <link rel=”stylesheet” type=”text/css” href=”/css/retina.css” media=”only screen and (-webkit-min-device-pixel-ratio: 2)” />

  • anonymous

    I suppose in purely economic terms, as long as the production is kept in the US (mhm…unlikely) this will be great. There will be a rat race to perfect the technology, software for developers and a bustling secondary market for people getting rid of “old” monitors & so on… Imposing this on Apple’s part was a dick move & if anything I think they’ll have to back-pedal instead of the tech world revolving around their annual product line.

  • http://www.welcomebrand.co.uk James Young

    A few icons and a logo are currently pretty easy to work with for retina displays, it’s the tiny photos that clients and 3rd parties supply all too often that will be the hardest rwd image problem to fix soon. http://www.welcomebrand.co.uk/thoughts/small-images-big-layouts/

  • http://www.nickspriggsisinterestedin.com Nick Spriggs

    I think it’s an awesome and exciting time! Anyone that sees it as a pain shouldn’t be in web design. It also represents a crossroads for designers. Too often we want to have absolute control over our designs but the more difficult (and in my opinion more exciting) challenge is to create designs that are truly responsive and beautiful across all mediums.
     
    It’s the performance stuff that really excites me, screen sizes are getting simultaneously bigger and smaller with amazing resolutions but wireless networks are still shit.
     
    Think of it, SVG (vector) images, creating UI with HTML & CSS instead of images, Masking with PNGs and GIFs to create complexing animations that are a fraction of the size of flash animations, beautiful typography, beautiful COLOR (something that really hasn’t excited in a controlled way on the web before), gah, I’m giddy!

  • SoumYa RanJan
  • Bart Peperkamp

    Let’s hope the web get’s vectorized soon ;-)

  • Stephen Trott

    My thought exactly

  • Dxtr Sctt

    until it gets better…

  • Darrell Hanley

     @Nick Spriggs That’s a nice sentiment, but the problem is not all browsers are compatible with SVG or canvas, Internet Explorer 6, 7, and 8 in particular. Canvas in particular is slow to render on mobile browsers, and SVG support was added to Android at 3.0, but it really doesn’t even matter because most of those users are on 2.x.
     
    Generally, the main issue that everyone is running into is that there’s no means in the HTML5 spec to fetch content based on resolution size. So either you serve high res images to everyone, or you default at low res and then fetch high res for high PPI users, which causes them to load two images, one of which they won’t even see, or you use PHP to serve one, but then you have to send an additional request. Apple.com, for example, does the serve the image twice method using Javascript. Now if you happen to have Javascript disabled on your retina device, then you’re going to get the ugly version of the site. And I hope that you aren’t browsing on your 3G/4G plan, because you’re also using more bandwidth than a non-retina display user.

  • Darrell Hanley

     @paulmcclean ಠ_ಠ Doesn’t fix your inline issues. So sure you can change up the background images fairly easily using CSS media queries, but your inline images can’t be limited by media.

  • Nick Armstrong

     @Darrell Hanley These sound like problems for industries to solve.
     
    And who in god’s name still cares about IE6?! Can we put that crippled dinosaur to bed once and for all, please? If I’m browsing using IE6-8, I’m probably aware my web experience is going to be a disaster (either that, or I’m insane anyway, and it doesn’t matter what’s on the screen).
     
    In those instances, you have a PC-driven environment ANYWAY which is most likely government or deep-internal-business webapps. You don’t need fancy graphics there for the most part anyway – and when you do, they’re most likely exported to PDF to print and not displayed to the user.

  • Nick Armstrong

     @Darrell Hanley spacer.gif 1×1 transparent pixel and sizing divs, FTW. Anywhere that’s not the case, you’d have a very very small amount of images that could be handled through JavaScript (for now). You’re absolutely right when you say the HTML5 spec should have this ability built in somehow though.

  • anonymous

    One can justify the extra lengths we as web developers and designers have to go to if you are talking about new projects, small website or blog-style templates. But, I work on large corporate sites (mostly online newspapers) that have thousands of unique graphic elements, photos and videos. There is just no way we can go back and bump the resolution of all this media. The amount of time needed to adapt it for retina displays is an insane amount of work, not to mention the cost. My employers have already decided not to support retina displays because of this. Yes, IE6 and IE7 (to an extent IE8) seem like logical candidates to ignore in terms of support, but they still collectively constitute a large percentage of the traffic on our sites. At the end of the day, this is all that our advertisers are interested in, and they pay the bills.  

  • Julia Hide

     @Nick Spriggs 
    Couldn’t agree more with Nick – bring it on! One of the many things I love about the working in the web industry is that it never gets stagnant because there’s always a new challenge around the corner – this is just the next one and it’s a natural progression imo. Adaptation is and always has been the name of the game when it comes to the web so instead of complaining about the issues involved people need to accept that change is here and put on their thinking caps to find ways of best utilising the new technology.

  • Harrison Weber

     @anonymous I definitely think the corporate world will see this change happen much slower than consumers. Right now these monitors are a luxury. After prices go down and once people start expecting them to be there more than not, we’ll start seeing a few select corporate offices with retina displays. Until then, you’re totally right.

  • Steve Oziel

     @anonymous  IE6 shouldn’t be a priority in terms of support, it is officially dead and now use is down to 6.3% worldwide (www.ie6countdown.com). Maybe Retina on a huge corporate website shouldn’t be priority either, but it’s something to take into account for a future version.

  • website builder software

    Its a nice informative post and its great resource for lots of peoples, so to promote your business by using some internet marketing strategy and it can easily to reach the correct market place.

  • http://twitter.com/Ianthetechman ian walker

    I would literally sell a kidney for a macbook pro with retina display.