In what resolution to draw a layout on Retina?

Question

Design

Hello.
Got a macbook retina. And now it is not entirely clear in what resolution to create everything.
It is clear that drawing sites under the retina is not correct. I will draw under the standard 1260px, resolution 72. But it is not comfortable to draw on the retina with this resolution. It is comfortable to draw at 144. How to be? Draw at 144 and then reset to 72? And another question. When I draw at 144, everything is super in Photoshop at a scale of 100%, and when I open the layout in the browser, everything is not ice and large. It should be?

Answer 1

Short answer:
don't draw in Photoshop - draw in Adobe XD . And all questions about dpi will disappear on their own.
as GreatRash rightly pointed out , dpi doesn't matter. The main thing is the number of pixels. And even then, with such dynamic interfaces and adaptive sites that are in demand today, even pixels are losing ground and sharing a place with%.
If you answer the question, then you need to make up in the resolution (in pixels) that the browser shows. For example, if everything is clear with ordinary computers: the screen width is 1280px, then you need to draw in 1280. Then everything is not so obvious with phones. For example, the physical screen size of an iPhone 6 is 750x1334px. But the browser on the phone shows the site as if there were half as many pixels: 375x667px. That is, if you draw a block with a width of 187px in the layout, then it will take up half the screen on the iPhone 6.
There is an excellent site that shows the screen sizes of the most popular mobile devices:
Why Adobe XD? Because, I give a tooth, in a couple of years Adobe will say:
- Guys, we are removing all the chips from Photoshop that used to help you design websites. Type them in XD now. And we will leave Photoshop for photographers and illustrators.
The fact is that Adobe XD is their new development for prototyping (design) sites. And the development of this program is in full swing. So far, only available for Mac (by the end of the year there will be a Windows version). The program has very "delicious" chips that speed up work dozens of times. Check out this GIF below. And the program itself is very fast.
There is also Sketch . It is also created specifically for website design and only for Mac.
It can be hard to get used to the design without Photoshop at first, but it's worth it, trust me.
What is website design? And why think about permission? And why do we draw them at all?
After the site is made and the project is closed, all the designer's PSD layouts are sent to the archive and lie there like a dead weight for decades until you delete them. No one needs drawings - the site itself is needed. And we draw them in order to make it easier to imagine and show the layout designer how the site should look. That is, if we could telepathically explain to the layout designer what and how it should look like, then no one would deal with this "nonsense" in Photoshop. And this is the main task of the designer: to come up with how the site should look, animate and interact with the user and pass it on to production.
And here your ideal work as a designer should look like this:
Then you collect it all in one briefcase and carry it to the typesetter. He will thank you very much and call you the best designer in the world.
For an example, regarding point 1, see how I usually draw up a TOR for a layout designer. These are only two pages out of 20.
And this work that you have done is not "additional" work. This is what a good design process usually looks like. Especially in big studios. This way you will get rid of a bunch of small mistakes on the part of the developers and the need to chew on all the little things when answering their "stupid" questions.

Answer 2

The browser (and the coder) absolutely does not care about your dpi. Dots Per Inch (dpi) are needed purely for printing. A layout designer is only interested in pixels. Designers usually forget that the fonts in the layout need to be converted from pt to px (in fact, like all other sizes). In short, do everything in pixels and forget about dpi.