7

This is one of my major issues these days. I'm using 15" Retina Macbook Pro. When I'm designing websites in Photoshop I normally use following settings,

  • width = 2560, to make it easy to view on large screens; however I keep all text within the 12 column content grid (2000px)
  • res > 300

The problem is when I view the site in my web browser on a 1080p screen it looks huge. In Photoshop on my Macbook Pro however it looks normal.

I don't understand the theory behind this. What are the best practices for getting your site to scale to different resolutions?

What's really happening to the site when you do responsive web design? What font size(s) should I use in photoshop so they scale properly?

  • What units are you using to size your content? If your using pixels to size your divs, fonts, and images, these are static dimensions and so won't scale proportionally when the screen resolution changes. Pixels are different "sizes" depending on the screen. Much better to use rem's and %'s as your units of measurement. – DavidC Dec 17 '15 at 13:12
  • Hi David, Thanks. Our developer asked me to use pixels as the text size unit, Um currently designing this site and it looks ok to me in photoshop full screen (2560px width) but looks badly huge in 1080p screen after development. So Is it ok to start the design in 1920px canvas rather than this 2560px width canvas? Does it make sense? Thank you for your help again.:) – Rangana Chandrasena Dec 18 '15 at 3:43
  • Google "responsive web design" to get a better idea of how to build web sites today. Bottom line, you really shouldn't have a width. – DA01 Dec 18 '15 at 16:12
  • As for 2560px looking huge on 1080...what are you confused about? in that situation, you made the page 2.5x as wide as the actual screen. – DA01 Dec 18 '15 at 16:12
2

I'll comment a bit on your steps before trying to briefly answer.

When I'm designing websites in Photoshop

Designing is not the same as "making a picture". Design is a process where you know what that process is. Making a "mockup" is just one part of the design process.

I normally use following settings,
width = 2560, to make it easy to view on large screens; however I keep all text within the 12 column content grid (2000px)

You are assuming that pixels is the correct unit. It is not, but rather a starting point.

res > 300

PPI has nothing to do with webdesign. But as you are using Photoshop as a starting point, set your ppi to 72 or 96.

A basic guide

I don't understand the theory behind this. What are the best practices for getting your site to scale to different resolutions?

I would separate "best practices" from "basic practices"

The basic theory is that web design is not bitmap based, but proportional based. For example:

Use your image (think a jpg file) of whatever pixel size you choose.

  • A proportional process does NOT say: this is a big photo of XXpixels.

  • It says "This is meant to be as wide as your screen".

Here is my tip on a post about how can a mockup be presented: How Do You Present Wireframes & Designs For Long One-Page Website?

If you use that code, the image will be resampled to fit any modern screen size.

That is the first basic idea. From there you start working on thinking how a webpage should look in a physical device. Mainly:

  • A big desktop monitor

  • A tablet

  • A phone

But this has to be coded more specifically in the style sheet.

Did you noticed I did not mentioned any pixel size yet?

The Retina Problem

A special issue are the high density displays.

If you think you can design a website using a big monitor and the same information can be used as it is on a small phone... Nope. It does not matter if it have the same 1920x1080 pixels as your 24 inch monitor.

Again, you think about it as a phone or as a big monitor, not the pixels.

The "retina" is a special case where you deliver an alternative image to be viewed sharper versus a normal screen.

The browser is "declaring" a normal pixel size for the phone, for example 480px, but at the same time "whispers" to the website "Hey, but send me the high resolution images you have because I can show them more crisply" so you can receive a photo that is 2x or 3x times larger.

By the way, you are starting with this retina display resolution, which is not always the case.

Some tips:

  • Try with a more standardized resolution, such as 1920px width but just a starting point.

  • Use the code I provided you in the link to preview your image on different monitors.

  • Cut a hole in a sheet of paper the same size of a tablet screen and other in the same size of a phone and imagine the content there. Make the necessary adaptation.

The best practices

  • Think in terms of proportions. <= (The basic practices are here)

  • Start exploring what media queries are. <= (The standard practices are here)

  • Explore the use of a framework. <= (Some common practices here)

  • Study deeply HTML and CSS, UX design, resolution, etc. <= (The best practices are here)

0

Pixels do not have a standard 'size' associated with them. So a 2,000 pixels wide image on a Retina display (at 2880 pixels by 1800 pixels), is about 2/3 the width of the screen. However, that same image on a 1080p screen (1920 pixels by 1080 pixels) is wider than the screen dimensions.

  • Hey TUnaMaxx thanks. Is it ok to start design on 1920px width canvas instead of 2560px canvas? What is the difference? any pros and cons? – Rangana Chandrasena Dec 18 '15 at 3:50

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.