Web design on Retina MacBook Pro

[KimHansenDK]

Anyone designing websites on the Retina MacBook Pro - after the retina update for Photoshop?

I am about to put down my money for a new Retina MacBook Pro, and wil be using it for web/ui/logo/icon design, though I am worried about the 72 vs 144 dpi.

What about the canvas size? I guess that it will either be very small og fuzzy? Is there a way around for designing in 72dpi on the Retina MacBook Pro?

 

[NutsNGum]

Getting an external monitor, that's about it. I'm in the process of picking up a 13" Air again. The rMBP is a beautiful machine, but for current web design work it's a nightmare.

This is obviously just my opinion. It's easier to design on an air and upscale than work from the minuscule canvas in CS6 on the retina display.

 

[KimHansenDK]

Getting an external monitor, that's about it. I'm in the process of picking up a 13" Air again. The rMBP is a beautiful machine, but for current web design work it's a nightmare.

This is obviously just my opinion. It's easier to design on an air and upscale than work from the minuscule canvas in CS6 on the retina display.

Maybe I should keep my 2012 MacBook Air 13" with 2.0GHz and 8GB ram.

Will that be fine for web/ui/logo/icon design you think?

 

[NutsNGum]

Maybe I should keep my 2012 MacBook Air 13" with 2.0GHz and 8GB ram.

Will that be fine for web/ui/logo/icon design you think?

At the moment, I'd definitely keep the Air.

 

[kolax]

Getting an external monitor, that's about it. I'm in the process of picking up a 13" Air again. The rMBP is a beautiful machine, but for current web design work it's a nightmare.

This is obviously just my opinion. It's easier to design on an air and upscale than work from the minuscule canvas in CS6 on the retina display.

Why is it a nightmare?

 

[KimHansenDK]

Why is it a nightmare?

I think it is because that you have to view the web design (72 dpi) at 200% to see the 'right' size when designing on the retina screen. And that will **** up the anti aliasing. Either that or dealing with a tiny canvas...

 

[kolax]

Ahh I see. So Dreamweaver isn't retina ready yet?

 

[NutsNGum]

Ahh I see. So Dreamweaver isn't retina ready yet?

Haha, incidentally, no it isn't. But that's not an issue, I use Sublime Text, which is.

When you're dealing with a site that's pretty image-heavy, then the retina display starts to become more problematic. It's much nicer -- at this point -- to be able to design on a 1-1 pixel display.

 

[DayVe3000]

Move the resolution away from "Best for Retina"?

 

[KimHansenDK]

Move the resolution away from "Best for Retina"?

Yeah, would that help, NutsNGum?

Or is it too fuzzy?

 

[NutsNGum]

Yeah, would that help, NutsNGum?

Or is it too fuzzy?

Unfortunately, that doesn't make any difference, it's still being scaled to double and then back down.

 

[KimHansenDK]

But is it usable in 1680x1050 or 1920x1200? Some people claim that 1680x1050 on the retina looks better or at least equal to the hi-res screen in the regular MBP?

 

[DayVe3000]

I have the 13-inch model and run in 1650x1050 and it looks super sharp. I dont have a MBP with a high resolution to compare it too, but it certainly looks as good, if not better than my external 24-inch BenQ 1920x1080 display.

 

[bill-p]

Ahh I see. So Dreamweaver isn't retina ready yet?

Parts of it (interface graphics) isn't. But the text is definitely Retina-quality.

Haha, incidentally, no it isn't. But that's not an issue, I use Sublime Text, which is.

When you're dealing with a site that's pretty image-heavy, then the retina display starts to become more problematic. It's much nicer -- at this point -- to be able to design on a 1-1 pixel display.

I don't see how you can have problems with the Retina display. When you're previewing websites in any web browser, they're always at 1:1 pixel to a 1440 x 900 screen... only texts are much sharper.

 

[KimHansenDK]

I have the 13-inch model and run in 1650x1050 and it looks super sharp. I dont have a MBP with a high resolution to compare it too, but it certainly looks as good, if not better than my external 24-inch BenQ 1920x1080 display.

But have you tried creating a 72 dpi canvas in Photoshop with the new retina update?

 

[bill-p]

But have you tried creating a 72 dpi canvas in Photoshop with the new retina update?

Yeah? At 200% scale, it looks much the same as a native 1440 x 900 screen, if not sharper.

And unless you have super bad eyesight, or unless you're creating super tiny pixel art, even at 100%, you should still be able to pick out details in your graphics.

 

[NutsNGum]

Yeah? At 200% scale, it looks much the same as a native 1440 x 900 screen, if not sharper.

And unless you have super bad eyesight, or unless you're creating super tiny pixel art, even at 100%, you should still be able to pick out details in your graphics.

The screen does look sharper viewing most things, but I have both an 11" Air and the 15" rMBP, so I can see the difference immediately, and it's stark.

If you're designing on the rMBP WITH the retina updated Photoshop CS6, all text and images are bilinearly scaled at 200% and look crap, at 100% the canvas is tiny. If you're designing in CS6 without the retina update, everything looks jaggy and crap.

Take your pick.

 

[bill-p]

The screen does look sharper viewing most things, but I have both an 11" Air and the 15" rMBP, so I can see the difference immediately, and it's stark.

If you're designing on the rMBP WITH the retina updated Photoshop CS6, all text and images are bilinearly scaled at 200% and look crap, at 100% the canvas is tiny. If you're designing in CS6 without the retina update, everything looks jaggy and crap.

Take your pick.

I'm not sure you have the updated Photoshop CS6... or if we are even looking at the same thing.

The interface looks crap prior to the update. Texts and interface graphics are super sharp after the update. Only some very small parts weren't updated (like gradient graphics and cursors)

The canvas does look tiny, but it's not impossible to see.

And you can scale the canvas to 200% any time. What's wrong with doing just that?

 

[akdj]

Getting an external monitor, that's about it. I'm in the process of picking up a 13" Air again. The rMBP is a beautiful machine, but for current web design work it's a nightmare.

This is obviously just my opinion. It's easier to design on an air and upscale than work from the minuscule canvas in CS6 on the retina display.

I'm with Bill P. Have you updated your CS6 apps? I'm subscribed to the whole suite...this time using the Creative Cloud (yearly subscription). It's the first time I didn't actually upgrade the suite w/purchased software...so not sure if you're receiving the updates like I am....but I'm just not seeing what you're seeing. In fact, PS has been incredible to work with post update. I use the 1920 setting in OSx and never change it...perhaps that's a problem?

The screen does look sharper viewing most things, but I have both an 11" Air and the 15" rMBP, so I can see the difference immediately, and it's stark.

If you're designing on the rMBP WITH the retina updated Photoshop CS6, all text and images are bilinearly scaled at 200% and look crap, at 100% the canvas is tiny. If you're designing in CS6 without the retina update, everything looks jaggy and crap.

Take your pick.

Again...Like Bill P, I just DON'T understand what your issue is. There are only a couple of items NOT updated...but MOST everything in PS/CS6 has been retina-ized!!! I, too, have an 11" Air...and the 15" rMBP absolutely SMOKES my Air in pretty much any task I'm doing in CS6.

Do youreally own a rMBP??? My experiences have been exactly 180º opposite yours with the CS6. Is it perfect? No...but it's incredible at this point. Their coders have done a quick job updating...and are consistently (once a week) adding another update to one or more of the programs. If you haven't already...take the time to update all of your Adobe Apps....see what happens.

j

 

[NutsNGum]

I'm not sure you have the updated Photoshop CS6... or if we are even looking at the same thing.

The interface looks crap prior to the update. Texts and interface graphics are super sharp after the update. Only some very small parts weren't updated (like gradient graphics and cursors)

The canvas does look tiny, but it's not impossible to see.

And you can scale the canvas to 200% any time. What's wrong with doing just that?

I've have Creative Cloud, with the most recent updates to PS and Illustrator. I'm not referring to the UI.

In Photoshop, at 200%, I see aliasing and blur as a problem. It's not representative of what people are going to be seeing when they view your site, so I need to use an external monitor for all current web design work on this machine.

Whilst it's possible to use the canvas at 100%, really, would you ever want to?

 

[dma550]

This is one of my issues with rmbp in my opinion. I use an external for all proofing.

 

[bill-p]

I've have Creative Cloud, with the most recent updates to PS and Illustrator. I'm not referring to the UI.

In Photoshop, at 200%, I see aliasing and blur as a problem. It's not representative of what people are going to be seeing when they view your site, so I need to use an external monitor for all current web design work on this machine.

Whilst it's possible to use the canvas at 100%, really, would you ever want to?

Aliasing and blur relative to the Retina screen only.

I have a regular non-Retina MacBook to compare right now, and 200% on the Retina screen actually looks sharper than 100% on the non-Retina.

And I do use the canvas at 100%. I just create elements at 4x the size, and after creation, I scale them all down by 50% (to 1/4 size) for lower-res screens. Most of my work now involves iOS and Android apps, so having higher resolution assets is actually better. I'd think most designers should go about it the same route.

Would you design at exactly 100% a resolution without any scalability whatsoever? How would a 1920 x 1080 screen view your 1280 x 720 website?

 

[NutsNGum]

Aliasing and blur relative to the Retina screen only.

I have a regular non-Retina MacBook to compare right now, and 200% on the Retina screen actually looks sharper than 100% on the non-Retina.

And I do use the canvas at 100%. I just create elements at 4x the size, and after creation, I scale them all down by 50% (to 1/4 size) for lower-res screens. Most of my work now involves iOS and Android apps, so having higher resolution assets is actually better. I'd think most designers should go about it the same route.

Would you design at exactly 100% a resolution without any scalability whatsoever? How would a 1920 x 1080 screen view your 1280 x 720 website?

If you're working on iOS and Android apps, then you're designing individual assets for what are most likely already hiDPi screens. You're not a typical use-case as far as web design is concerned, are you?

And no, I wouldn't design a pixel-for-pixel website as that's ridiculous and obviously not how it works. The problem is trying to view the whole comp as a user would view it. That's clearly less of a problem for your work if you're creating these types of assets.

If I am asked to do a retina-ready site, then yes, this screen may come in handy. But for the average web job, No, it's somewhat of a pain.

----------

Do youreally own a rMBP???

Thanks for your input ⸮

 

[bill-p]

If you're working on iOS and Android apps, then you're designing individual assets for what are most likely already hiDPi screens. You're not a typical use-case as far as web design is concerned, are you?

I'm also working on websites for iOS and Android devices. Those websites also have to use the high resolution assets.

And it's not just me. It's our whole company. And we have been bombarded with projects for a whole year now, so I can't imagine how it's not a typical case now.

And no, I wouldn't design a pixel-for-pixel website as that's ridiculous and obviously not how it works. The problem is trying to view the whole comp as a user would view it. That's clearly less of a problem for your work if you're creating these types of assets.

If I am asked to do a retina-ready site, then yes, this screen may come in handy. But for the average web job, No, it's somewhat of a pain.

I still can't see what's wrong with viewing assets at 200%. Again, I have a non-Retina MacBook here with a 1440 x 900 screen. It looks blurrier at 100% than the Retina screen displaying the same asset (same resolution) at 200% because it doesn't have as many sub pixels as the Retina screen.

Also, there's nothing wrong with creating assets for the Retina screen and then scaling it down, right?

 

[NutsNGum]

I'm also working on websites for iOS and Android devices. Those websites also have to use the high resolution assets.

And it's not just me. It's our whole company. And we have been bombarded with projects for a whole year now, so I can't imagine how it's not a typical case now.



I still can't see what's wrong with viewing assets at 200%. Again, I have a non-Retina MacBook here with a 1440 x 900 screen. It looks blurrier at 100% than the Retina screen displaying the same asset (same resolution) at 200% because it doesn't have as many sub pixels as the Retina screen.

Also, there's nothing wrong with creating assets for the Retina screen and then scaling it down, right?

Well, this thread's totally derailed. I've got to be honest I don't really care enough to argue about the semantics of what you and I deem as acceptable practice as its all completely subjective.

Have a pleasant evening whatever you're doing.