8 Replies Latest reply on Jan 22, 2018 3:05 PM by pierrec86934804

    Design for web on a retina display

    cristian.roman

      Hi guys,

       

      I know there are a lot of topics on this matter and I apologise for creating a new one. The problem is that I still can't find a way to make this work and I'm still looking for an answer..

       

      So, here it goes: I recently bought my first macbook pro and it's the first time I'm using a higher resolution. In the back days I used to create 1920 x 1080 projects and design a website without any problems. On this mac there's a 2880 x 1800 resolution which gets me into a strange new world because of the pixel density difference. If I try to design a 1920 x 1080 website it look TOO SMALL. Some people said on the web that you need to scale the view to 200%, which I tried but it looks pixelated.

       

      If I create a 2880 x 1800 document. IT STILL LOOKS TOO SMALL AT 100% SCALING (I'm going nuts)

       

      Can someone please answer me this small questions?

      1) How can I design for web in Photoshop?

      2) What size and dpi should the project have?

      3) What view / scaling should I use? Cause 200% looks blurry to me.

       

      Again, I'm sorry for starting a new topic on this matter. But I can't find a way. And I can't do my job right.

      Any help would be highly appreciated.

       

      Cheers guys,

      Cristian

        • 1. Re: Design for web on a retina display
          Mylenium Most Valuable Participant

          2) What size and dpi should the project have?

          DPI doesn't matter on the web. It's all just absolute pixels.

          3) What view / scaling should I use? Cause 200% looks blurry to me.

          It will always be this way. You simply can't design all assets to look sharp even at the most insane resolutions. That's pretty much it. Content will always be scaled and resized as needed. There simply is no way to accomodate all devices and resolutions. Browsers do it all the time and there's nothing wrong with that. It's perfectly okay to scale decorative elements or background images/ videos as long as critical elements like buttons remain reasonably sharp, accessible and functional, but even those are often scaled up from smaller graphics. And of course you always have to balance data rates agains quality, too. Doesn't do you much good to wait endlessly for a high-res image to load on a mobile device. For the most part it reall has nothing to do with Photoshop or designing the graphics. That's web stuff and you have to read up on responsive/ adaptive designs, media queries and how to use alternate layouts and resources depending on the detected resolutions. Even your old approach of using a HD res is fishy. In this day and age there simply is no fixed reference resolution. You can only set your own values and "nail" the design so it looks good, but beyond that you really have to delve into the web stuff. You basically design a version somewhere in the middle and then decide which elements need to scale up or down and which ones need to be designed to stay always sharp and be loaded based on the situation.

           

          Mylenium

          • 2. Re: Design for web on a retina display
            cristian.roman Level 1

            Hi and thanks for the response. It looks like my English wasn't perfect and you understood it wrong.

             

            It's not about how my design would look on other devices. It's not about frontend development. My issue is just about DESIGNING in Photoshop and how the design would look IN Photoshop. I know, it sounds crazy, please allow me to explain it one more time:

             

            Back in the days, on my windows device I had a 1920 x 1080 monitor. So I would've created a 1920 x 1080 project and design a website just like I would see it real in a browser. Now I'm using a Macbook pro with a 2880 x 1800 resolution. Scale is set to 1920px (from System Preferences -> Display), so websites would render like on a 1920 x 1080 display.

             

            My problem is that I can't find a way in Photoshop to create a document that would look at 100% view just like a website in browser. If I create a 1920px document, it would look TOO SMALL. What size should I chose to have a fullscreen document at 100% view?

             

            I believe that the problem comes from the pixel density difference. Some things render on my retina display at real pixels (1 render pixel = 1 physical pixel) and others are scaled to reflect a certain resolution, i.e. 1920 x 1080 but still can't figure it out how to use PS...

            • 3. Re: Design for web on a retina display
              D Fosse Adobe Community Professional & MVP

              View > 200%

               

              This maps exactly one image pixel to exactly four screen pixels. This is precisely what your browser and the other native Mac apps do.

              • 4. Re: Design for web on a retina display
                deelbe Level 1

                You want a web design that maxes out at 1920px, so you make your PS canvas that width. But when you zoom in to 200% to get the PS page to match the browser size it looks bad, especially the text, right? Text in Photoshop is raster. Text in a browser is not. Zooming in in Photoshop is enlarging pixels. A web browser is filling one "CSS pixel" with four times as many retina screen pixels as it "paints" the page if it is at "Actual Size." And you can zoom in on a web page all day long and the fonts totally scale.

                 

                I think it could be useful to approach this question from a Web Dev / Design point of view and try to find out exactly what the browser is doing with our web design.

                 

                Lets start by VISUALLY confirming (and understanding) that Photoshop definitely has a 1:1 pixel relationship with a Retina screen. I have a 27" Retina monitor. Apple specs tell me that this screen is 5120px wide. If I set the PS ruler to pixels, zoom to 100%, open it full screen and get rid of all the tools bars (there is still some PS chrome in the way, namely, the left ruler and the right scroll bar) the PS ruler also reads 5120px. 1:1.

                 

                Now lets see, literally, what the browser says. I develop in Chrome so I'll use that. I'm going to put the browser in full screen mode, open up the console in dev tools and run the following JavaScript:

                console.log(window.innerWidth);

                And I get... 2560px? What? That's half the actual width of my screen.

                 

                Ok what if I call this:

                console.log(screen.width);

                That should definitely give me 5120px right? It's going to measure screen width. Nope. It still returns 2560.

                 

                And... how about this call:

                console.log(window.devicePixelRatio);

                That returns... 2. A ha. Starting to make sense.

                 

                So, what is going on? Browsers use "Device Independent Pixels" for unit measurement inside the browser window. This is what allows you to set pixel values for say, font-size, in your CSS that will be relatively consistent from an iMac to a Nexus5 to a Galaxy Note 3 to whatever other exotic piece of hardware a browser might get used on in the wild. The device pixel ratio determines how a Device Independent Pixel will map to the device based on its screen resolution.

                 

                Because in Web Design we often think of everything in terms of pixels, including white space, it might be useful to think of CSS pixel values (such as: padding: 30px;) more as coordinates that the browser's graphic API (Skia, in the case of Chrome) uses to render (paint) and layout a webpage.

                 

                You probably were not working at a 1:1:1, Photoshop to browser to monitor, resolution ratio on your previous monitor either. But it was close enough to 1:1 to not make a major difference. 2:1 makes a major difference and you are now noticing it.

                 

                Anyway, the answer is to make your web design mockups in Photoshop the same ratio as the device pixel ratio of the device screen you are using. 2 to 1 will do it for any Mac Retina screen: iMac, MBP, iPhone, etc. If you normally design for 1920px wide, then 3840px wide in photoshop will make your mockup look as close to the same size as the way the browser will render it. Unfortunately you have to double everything else in PS as well, including column widths, font sizes, gutters, etc. This complicates handing off your design specs to a developer to get pixel perfect alignment. But that was already complicated, right?

                 

                Double the dimensions of your jpegs (because the browser can't add pixels to the image files the way it can to a font) and start using svg for icons whenever possible.

                 

                Oh and set the screen resolution in System Preferences back to the default.

                 

                Hope this helps.

                1 person found this helpful
                • 5. Re: Design for web on a retina display
                  D Fosse Adobe Community Professional & MVP

                  There's a much simpler way, and one that corresponds to actual browser behavior:

                   

                  View > 200% in Photoshop. That's what the browser does too, when it detects a high resolution display.

                   

                  Yes, text is raster in Photoshop. It's a raster image editor; that's just how it works. So perhaps you shouldn't make text in Photoshop.

                   

                  There are ways to load high-resolution images to a site when a high-resolution display is detected. But any site that is generally intended to work on standard HD displays have to be designed as such. It will still be displayed at 2x in the browser, so a double size image will display 4x.

                  • 6. Re: Design for web on a retina display
                    deelbe Level 1

                    View > 200% in Photoshop = "what the browser does" is waaaaayyy too over-simplified. Photoshop and browser graphic engines have very different methods of rendering visual information. But it doesn't matter. The OP wants to make Web Page mockups in Photoshop that visually correspond to how the page will look in a browser. The way to do that is to work at 2x, in actual canvas size, not at View > 200%. They've already attempted 200% and don't like working that way. That is the very problem for which they need a solution. You are not offering a solution. You are just telling them they are wrong. And if I had to guess I'd say that is because you are not a professional web designer or developer. Although that makes me even more confused as to why you keep insisting on responding to this question on this, and previous threads.

                     

                    Also, a raster image will be sized to a DOM element container according to the device pixel ratio. If you are on a retina screen (2:1 device pixel ratio) with a web page container having CSS pixel (device independent pixel) dimensions of 500px x 500px and you place a 500px x 500px raster image in that container, it will look low-res. Why? Because the actual size of the container on the screen is 1000px x 1000px, so it will have to stretch the image to twice its actual size to fill that space on the screen, effectively cutting its resolution in half. Put a 1000px x 1000px image in the container and the resolution looks correct. It will not display at 4x the physical size (in pixels, which is what I assume you meant by "display 4x").

                     

                    Here are many other explanations of this:

                    Designing Retina Web Graphics in Photoshop: Should You Work at 1x or 2x?

                    css - what exactly is device pixel ratio? - Stack Overflow

                    Responsive Meta Tag | CSS-Tricks

                    https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

                    CSS Values and Units Module Level 3

                     

                    As far as your suggestion that "perhaps you should't make text in Photoshop". You might have something there, although I would extend that to perhaps, in this day and age of impending 2:1 HD monitor ubiquity, you shouldn't mock up webpages in Photoshop. I still do because thats what is comfy, but at some point I'll want to switch to something vector based that can still manage my raster assets. CC has implemented some awesome "save for device" functionality and added a bunch of new apps to the suite. Any suggestions?

                    • 7. Re: Design for web on a retina display
                      D Fosse Adobe Community Professional & MVP

                      The browser scales to 200% when detecting a high resolution display. It really is no more complicated than that. Of course, scaling vector text is not quite the same as scaling a raster image or raster text.

                      • 8. Re: Design for web on a retina display
                        pierrec86934804 Level 1

                        Hi

                         

                        I'm with @deelbe on this. And considering that most web apps like Wordpress downgrade image quality to 80/82 % quality of jpeg's on the fly on the upload folder.

                         

                        Pierre