• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

InDesign pixel dimensions do not relate to website sizes

Contributor ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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

TOPICS
How to

Views

1.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Nov 29, 2023 Nov 29, 2023

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-leaderboard-768x90/m-p/14263283#M552361

...

Votes

Translate

Translate
Community Expert ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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/.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

Screenshot 2023-11-29 at 4.50.44 pm.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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..

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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...

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 29, 2023 Nov 29, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines