Designing for web on a retina macbook
- Started
- Last post
- 39 Responses
- nvsn
Anyone have a retina mbp and have good or bad experiences of designing for web on retina for 72dpi? I am trying to decide between the retina and non mac book pros. I am worried I will not have an accurate idea of what images will look like for 72dpi screens.
- ESKEMA0
What are you talking about. Please tell me you didn't say that.
- on a side note, I'm referring to the "72dpi" thing.ESKEMA
- 72 dpi means nothing anyway. Most monitors have actually been 96dpi or higher for a while.ETM
- Which in itself is wrong because it should really be PPI, pixels, not dots. It's not print.ETM
- exactlyESKEMA
- i should have left dpi out of it, lets say retina and non retina display.nvsn
- ETM0
They'll look fine. It's no different than doing responsive design and having all the source images larger than needed anyway. They'll scale in all modern browsers nicely. The only down size is the slight bandwidth hit from larger images. As well, you may need some scripts to swap out the source images for mobile if they get too large.
- don't use script to swap images. use progressive enhancement. read the ALA responsive design book.sublocked
- ETM0
Mac is just pushing/leading a trend that was coming for a while. Pixels won't be a finite measurement anymore. And good riddance with the vast amount of devices out there. Now we measure in scales and percentages of total.
- ETM0
If you are still not familiar with responsive design, the new retina is one more reason to get more familiar. Here is a start.
http://www.alistapart.com/articl…
http://speckyboy.com/2012/03/05/…
This book rocks. If you want to save money, just grab the PDF version:
- nvsn0
I know its not a dpi issue, I am asking is there any reason not to design in photoshop for web on a retina display?
- other than the fact Photoshop is horrible for UI design?animatedgif
- <this.jtb26
- If you think Photoshop is horrible for UI design, you don't know how to use Photoshop properly.CanHasQBN
- +10 canhasqbn
UKV - I see your +10 and I raise another +20
don't ever blame the tool, rule #1Miguex
- ETM0
So elaborate the issue. What IS the exact concern?
That you will create detail not visible on standard monitors? What? PS is still exporting in pixels.
- nvsn0
yeah i guess that is the concern, having to be even more pixel perfect. ha
- If you don't love that final pixel, this business will give you a stroke :)mikotondria3
- ETM0
Well, I'll tell you what. It's gonna make it a lot harder to shop nips and vajayjays into celebrity photos and try to make it believable.
- nvsn0
yeah that is the concern
- Nathan_Adams0
If designing in PS on the retina display, just make everything double the size you normally would. Make a lot of use of smart objects, and don't do any lines smaller than 2px wide. When you're done, duplicate your file and scale the whole thing 50% and output your standard definition assets from that. Output your hi-def one's from the original document.
- ETM0
^
Great advice, but again, that's more useful if you are designing for a final dimension in mind... something that is becoming less important with responsive design.
- mekk0
one more screen to export assets for... in all our oh-so-cool responsive designs, why dont we just use those fancy vectors for our ui´s?
- nb0
If you have the Retina MBP, you could always buy common cheap external monitor to look at your designs.
So... has everyone started outputting assets at 2x res?
I'm starting a couple small projects from scratch, was thinking about setting up my document in PS at 144ppi and working at 50%. Is anyone doing this already?
I guess it's time to buy Fireworks, or get on the Cloud.
- fireworks? what?
are you from 1992? are you wearing eddie bauer clothes?Miguex - 144ppi?Nathan_Adams
- 92 would be Deluxe Paintanimatedgif
- Fireworks is how you make websites these days Miguex get on with the times.ernexbcn
- Miguex, when it comes to set a bunch of buttons and icons on a dashboard like it's the case for many UI like productivity/utiliti... apps or online banking services, Fireworks is the right software in 2012.
Not convinced? just look at QBN's UI do you really feel it needed Photoshop?iGin - you mean fireworks WAS how you did website before adobe bought macromedia..Miguex
- fireworks? what?
- Miguex0
^
nb, this will make you feel at homehahaha, fireworks....
- tOki0
Um just use the display scaling thing in the OS to test scale on different resolutions? 1650x1050 is supposedly the most "normal" dot pitch compared to other screens on the market.
I've already done a few ipad 3 apps at double resolution.. you just double the DPI and design at a zoom to make it 1:1 on your monitor, of course depends what resolution it is. As apps are really about physical size not pixel dimensions, this is important to ensure legibility/element scale is large enough for fingers.
- animatedgif0
lol @ people who don't realise Fireworks is the best UI/web design app out there.
But yeah if you're designing websites you'll probably want a non-retina external monitor if you want to be serious about it.
- You would say that "animatedgif"HAYZ1LLLA
- hahahaa, fireworksMiguex
- It does encode gifs smaller than PS too ;)animatedgif
- cannonball19780
Just don't do it. Design at a lower common denominator.
- 23kon0
I heard that 800x600 is to be the next big trend so i'm off out to source one of these babies ...
- monolith0
don't worry.. nobody gives shit nor will design stuff for MacBook Pro Retina