Illustrator CS5 PDF Dimensions Incorrect - 72dpi for web

Question

Issue in a nutshell: I'm wire-framing sites in Illy CS5 for it's snap to pixel grid features. I have my document set up to use pixels as units, raster effects at 72dpi, and RGB color. So as far as I can tell everything should be formatted correctly. The issues arise when I save the comps to PDF so I can e-mail them to clients. Two things happen, from what I can tell so far, that are most likely related. First, the PDF artboard size doesn't match the Illy artboard size. Comparing 100% zoom size side by side on each, the PDF appears to be 33% too large (i.e. they look identical when the PDF is at 75% zoom and Illy at 100%.) Second, what I thought was a separate problem originally, when placing PSD's at 72dpi they look crisp in Illy and Photoshop but appear blurry when saved as PDF (I'm assuming because of the 33% scale distorting them.) When saving the PDF I've tried using "Smallest File Size", "High Quality Print", and some custom settings (downsampling images to 72dpi) just to see if I can get anything to work. Everything comes out oversized though. Also, I know there are options to export as .png, .jpg, ect... and that you can "Save for Web and Devices." I want to avoid using these if possible because they tend to be slow, don't favor multiple artboards, generally handle text poorly, and are not as good as a PDF for emailing to clients for review.
In the reading I've done searching for a solution it looks like most people have their artboard or PDF preferences set up incorrectly. Usually resulting in a drastically larger or smaller image, roughly 4 times, because the file is being saved at 300dpi instead of 72dpi. What throws me for a loop is the 33% scale because I'm not seeing a direct relationship between print quality dpi and web dpi mussing things up. There must be some setting or box I'm not checking to save the file correctly, but am not sure where to go about it.
Thanks for all your help, and let me know if you need any more info. 

Answer 1

Arnbly,
Forget monitor resolution. It has nothing to do with monitor resolution. Discussion of monitor resolution just confuses the issue.
Comparing 100% zoom size...
That's the key.
You are using two different applications. (Never mind that they are published by the same software vendor.)
Regardless of your monitor's specs, it's neither the monitor's dot pitch (102 PPI) nor its pixel count (1920 x 1080) that makes Illustrator's display of 1" smaller than Acrobat's on that same monitor. It's how many monitor pixels (on any size monitor) that the two programs use to render a representation of a real-world inch at 100% zoom.
Illustrator always assumes 100% of one inch of actual linear measure in the document corresponds to 72 monitor pixels. In other words, at 100% zoom, it uses 72 pixels to "paint" an inch. When set to Inches, the major tickmarks of Illustrator's rulers are 72 monitor pixels apart, therefore display smaller (take up less of your monitor's space) than the rulers do in Acrobat.
Reader (and Acrobat), by default, assumes 100% of one inch of actual linear measure in the document corresponds to 96 monitor pixels. In other words, at 100% zoom, it uses 96 pixels to "paint" an inch. When set to inches, the major tickmarks of Acrobat's rulers are, by default, 96 monitor pixels apart, therefore display larger (take up more of your monitor's space) than the rulers do in Illustrator.
In a nutshell, it boils down to this: Zoom is just the currently-displayed ratio between real-world measure and number of monitor pixels used to paint a picture of it. Illustrator and Acrobat (by default) simply label different zoom levels to be "100%". Illustrator clings to the MacOS convention of using 72 monitor pixels to paint an inch-worth's of page content. Acrobat's default uses the Windows convention of using 96 monitor pixels to paint an inch-worth's of page content.
Neither one necessarily matches physical reality. That is, even without switching between programs, if you hold a ruler up to any given monitor displaying a given application, what the software labels "1 inch" at "100%" will quite likely not match your physical ruler. Obviously, for example, if you view your PDF on a cell phone and zoom to "100", the display will measure in real-world physcial measure much smaller than the same PDF does on your laptop, which will likely in turn be smaller than when displayed on your desktop--even if all three devices have Acrobat zoomed to "100%."
As you can see above, Illustrator's "72 pixels to paint an inch" uses less of your monitor's space to display an inch at 100% zoom, but shows less detail because it has fewer pixels (72 x 72) available for rendering that square inch . Acrobat's default "96 pixels to paint an inch" takes up more of your monitor's space to display an inch at 100% zoom, but shows more detail because it has more pixels (96 x 96) available for rendering the same square inch.
The above screenshots, however, are of vector-based artwork. If the artwork were a raster image, display quality , not just size, would also differ between the two programs when zoomed to 100%. The display would be sharpest when the actual number of pixels contained in the scaled-to-one-inch image matches the number of monitor pixels that the program displaying it uses to render an inch. So if the above artwork were a 96 x 96 pixel raster image scaled to 1 inch on the page, its display would be better at 100% in Acrobat than in Illustrator. If its were a 72 x 72 pixel raster image scaled to 1 inch on the page, its display would be better at 100% in Illustrator than in Acrobat.
So to make your PDFs display at the same size as your Illustrator documents at 100%, set your Reader (and/or Acrobat) display preferences to what Illustrator considers an inch:
But understand: Pixels Per Inch means nothing to a web browser. Web browers ignore PPI. They just display image pixels to monitor pixels, 1:1. So if your client is on Windows (by far more likely than not), Acrobat's default setting of 96 PPI is going to be more representative of the size he sees your web-destined design when viewed in his web browser.
JET