: Web Design Sizes 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

@Debbie163

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)

Vote Up Vote Down

@Si6392903

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.

Vote Up Vote Down