InDesign pixel dimensions do not relate to website sizes

[markeeeee]

I'd like to use InDesign to mockup the visual design of a website.

I've created a new a new 'web' document using pixel units. The document is 1920px wide. I'm viewing it at 100% scale and it isn't fitting into my 2560px monitor screen. Weird.

I've then added some 21px text and compared it to some 21px font-size text on my website. In InDesign it looks massively bigger. I have to reduce the zoom to about 65% before the text in InDesign looks about the same size as the text on a website.

Why isn't InDesign in a 'web' document, at 100% zoom, showing the correct scale? It is as if the pixels are massively bigger

[BobLevine]

As someone who has used InDesign for well over 20 years and designed websites for almost as long, if you want to give a mock up to a web designer, draw it on the back of napkin and be done with it. There is no such thing as a pixel perfect website and you'll never get the feel of a responsive site using a page layout application.

I can tell you from experience this will not end well if the client is very picky and they'll be complaining left and right about the fact that the site doesn't look the same on the web as your InDesign mock ups.

If you wish to ignore this advice, go right ahead. I'm not going to even bother trying to explain the fake pixel counts in InDesign. 

[markeeeee]

I normally design in a code editor, but I'm beginning to wonder if it would be quicker in InDesign and as someone who has used Quark/InDesign for well over 26 years I figure I should be pretty fast. But I've got this problem right from the off...

[BobLevine]

InDesign is not a pixel-based application. What you're seeing is an assumption of a pixel equaling 1/72 of an inch. That might have been appropriate more than a decade ago but it's not anymore.

If you really want to do this, and you find this a dealbreaker, find a more appropriate tool for it. Me? I'm a WordPress guy I figure if I have to design a site, I just design the site in WordPress.

[J E L]

Bob's advice is solid. InDesign is not the app for website mock-ups. What type of site is it going to be? Brochure, blog, magazine, news, e-commerce? What platform are you building it on? If it's a simple site, it would be far easier to stage it as a website in the first place. I mock up sites in a live environment using WordPress and Divi and never look back. The key is having the architecture, content look and feel, calls to action, main text blocks, etc. thought out in advance (yes, on a napkin works just fine). You could get your fonts and colors sorted out in InDesign for approval but don't try to be precise in building website pages with it.

[markeeeee]

Okay I've made a 'web' doc in Illustrator – same scaling issues. But the same size doc 1920px in Photoshop looks like a 1920px website width.

Why is InDesign and Illustrator scaling web documents, so they look much bigger than they actually are?

[BobLevine]

Because they are not truly pixel-based, Photoshop is.

[markeeeee]

And it's not possible in the Preferences to change this?

[BobLevine]

Not any more possible than turning a screwdriver into a hammer.

[Derek Cross]

Have a look at Figma, it's perhaps the best tool for mocking up websites, and it's now owned by Adobe!

[markeeeee]

Argh, I was hoping I could do this in InDesign and not have to learn something new.... 

[BobLevine]

You can, but not given your constraints. Honestly, it's your project and far be it from me to tell you how to do it, but I don't understand the issue here. Many people (myself included) will set a zoom percentage on websites to something higher than 100% because it simply displays too small on a high-resolution monitor. And that doesn't even touch on responsiveness for phones and tablets.

I really don't know what else to tell you.

[markeeeee]

Thanks for the Figma heads up. I can't see that this is available (yet) as part of Creative Cloud? Or that a CC subscriber can get free access to Figma?

[Derek Cross]

You can get a free version of Figma to try out.

Bring Your Own Laptop  https://bringyourownlaptop.com/ has two very good tutorials, as has Flux: https://www.flux-academy.com/.

[100pk]

Strange, I havent had this problem. I use Indesign al lot for creating website designs and social media banners.

If you set everything as web-based and use pixels all InDesign items should match your screen.

I know Figma or XD have big advantages over InDesign, but when you are used to a certain ‘Chocolate-application’ it is hard to switch. InDesign has a lot of functionality which is in fact perfect for designing for web. 

[markeeeee]

The attached screenshot shows (top) 21px HTML text in a web browser and the same 21px font in an InDesign web document (bottom) at 100% scale.

This makes using InDesign kinda tricky to judge the size of things.

I agree, I think there are a lot of overlaps between InDesign/DTP and web design, especailly text and object styles and master pages

[markeeeee]

[BobLevine]

Pixels for text on a website? Sorry, but that's possibly the very worst unit of measurement you can use.

[markeeeee]

Actually rem units, but to compare with InDesign I stated the pixel size

[BobLevine]

So, you're kind of making my point for me. Why are you comparing something you're not going to use?

[markeeeee]

My opening question is about how to get InDesign to display pixels in InDesign that are the same size as my monitors pixels. I'm not asking for your opinion on what app to use.

[Derek Cross]

This is a friendly forum and opinions are welcome as there is often more than one approach to a problem raised and others, who are following the isssue, may be interested on other approaches offered by posters..

[BobLevine]

Oh well, sorry to have bothered you with my decades of experience. Good luck; with that kind of attitude, I'm pretty sure you're going to need it.

[rob day · Accepted solution]

The document is 1920px wide. I'm viewing it at 100% scale and it isn't fitting into my 2560px monitor screen. Weird.

InDesign’s 100% view is the actual Print Output size—if you print your 1920px page its output size would be 26.66 inches wide. Photoshop’s 100% view is a 1:1 image to monitor ratio.

You can change InDesign’s default 100% View via scripting. See this thread:

https://community.adobe.com/t5/indesign-discussions/view-actual-pixel-dimensions-for-example-leaderb...

[markeeeee]

Wow, that looks promising. Where / how do I put the Java Script?