I bought a Macbook Pro 17″ (March 2009 unibody version) and loved the amount of screen real estate. There’s been a lot spoken about the size of fonts and in general everything being rather tiny on this otherwise great laptop. The high resolution screen with native dimensions of 1920 x 1200 means things are beautifully crisp but smaller than what the majority of us are used to seeing. Personally, as my eyesight is good, I don’t have much of a problem and I can always hit command + in Safari if I really need to enlarge text quickly.
There is an added disadvantage as a web designer though.
In print we are used to zooming in and out to look at fine detail, align objects and text etc and we are very aware that the only true proof of our design is printing to a decent laser printer. In web design however I am used to viewing at 100% most of the time and setting up my document in Photoshop to 72dpi.
There’s a good article here about the myth of dpi here but regardless of this I prefer the main content in my designs to be fixed to a width of 960 pixels.
I started noticing that my decisions were being influenced by how tiny everything appears on the 17″ screen. Once I was happy with a design I’d view it on a larger, lower-res screen and find that most of the elements were oversized and in effect ugly.
So what’s the answer? How do we preview with a normal screen resolution?
There are a number of options but none of these are very useful.
- Use an external monitor (great but costs more money and you need an adapter for the mini-dvi port plus I want this thing to be portable!)
- Change the resolution of the display to 1680 x 1050 or smaller (this is not native and will appear fuzzy)
- Use this command in the terminal to change the scale of applications: defaults write NSGlobalDomain AppleDisplayScaleFactor 1.3 (fuzzy render again)
I’ve found a work around for now which is simple and I think will work pretty well.
As the dpi of the 17″ MBP is 133, simply set up your Photoshop document to that as well. So a 960px wide document becomes 1774px at 133dpi with Resample Image checked.
This will then give you a fairly accurate idea of what your design will look like on a 72dpi screen of perhaps 1280×1024. If you zoom out once in Photoshop so you are at 66.7% you get a very good approximation of a 1680×1050 view. This is all crisp and smooth of course as you are still using the native resolution of the MacBook Pro.
The only caveat with this approach is remembering to output any proofs or graphics at the correct dimensions. You can do this easily by changing the Percent to 54.14% when you Save for Web or if you are supplying the psd to a developer, resize the document back to 72dpi (with resampled checked of course). Obviously any images you use will need to be twice as large as they otherwise would but that’s a small payoff for being able to escape screen shock later on when you see the site on a different screen.
