2

I am designing a web template/admin panel and need to know, what correct page dimensions should I use and at what DPI?

And What Font size will be compatible so that my developer will have the correct specifications for a web page?

  • 2
    There s is no answer to this question. Webpages dont have a DPI as such and the size is different for every viewer. Talk with your developper – joojaa Feb 26 '18 at 10:08
  • I understand your context, but I just wanted to know, what resolution (default) do I need to design a web page (so that it will match the content (font size) of a basic web page. For eg: If I am taking 14px as a paragraph text, the same size can be used for development purpose) in Photoshop so that its specification can be used by developers? – Akashdeep Bhardwaj Feb 26 '18 at 10:12
  • The dpi/ppi is irrelevant on web pages. Browsers ignore dpi/ppi settings. All that matters is the dimensions in pixels. 14px in a web browser is 14px regardless. The size it will be displayed at depends on the device viewing it. – Billy Kerr Feb 26 '18 at 10:18
  • @BillyKerr Thank you for replying, and that is correct. The thing is, I stuck when my client gives me the specification in points. And when I checked that in my PS document, I was completely wrong. My client asked me for a heading content as "Calibri 16pt RGB 38,112,251", and when I entered 16pt in photoshop that was completely different from the size he had asked me in his wireframe design. And when I converted 16pt into PX, that was changed into 24px in my photoshop document. Whereas if we can see that 16pt = 21.33px – Akashdeep Bhardwaj Feb 26 '18 at 10:22
  • In Photoshop, when a document is set to 72ppi (the default), then 14px = 14pt. If you change the resolution, then that won't be true. Don't change the resolution in Photoshop when designing a web page. It's pointless (excuse the pun) because browsers ignore ppi settings. – Billy Kerr Feb 26 '18 at 10:35
3

Web pages don't have a resolution as such (as joojaa already pointed out in the comments), because browsers ignore the ppi setting in raster images.

Different devices display images at different sizes depending of on the resolution of the display, or whether any system zoom has been set.

When designing a web page in Photoshop, leave it at the default 72ppi setting. Do not change it, doing so is pointless. Changing it will not give you better quality images. The ppi/dpi setting is not a measure of the quality of an image (a common misunderstanding). For more info read this The Myth of DPI - it's an old article, but still relevant.

All that matters in images intended for the web is the pixel dimensions of the images.

As for which dimensions to use, it depends on what device it will be used on. But in Photoshop CC there are presets available for common web page sizes. Use one of these.

enter image description here

You may wish to create additional artboards/documents for different devices like mobile phones/tablets, to give your developer an idea of how you would like the page to be laid out for these kinds of devices.

There are presets available in Photoshop CC, under the "Mobile" tab when creating a new document for common mobile devices, if you need them.

  • 1
    72 being Adobes way of saying i dont know. – joojaa Feb 26 '18 at 11:12
  • 1
    @joojaa - yes, absolutely! – Billy Kerr Feb 26 '18 at 11:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.