0

I am bit confused in asking this question because i have read all the articles available but still was not able to find something helpful. The problem is I have a psd design in the 2880 px width . Now to convert it to the html and css. I design the page in 2880px width. In the end i find this is not something which i should use. Because on the small screens everything was too big. In the design guidlines for the psds there was written:

This PSD is designed for retina display

How can i use the best practice to achieve this. I have to design it to the 2880 or in the 1440.

P.S : I am very new to the css thing and the challenge is i did not have to use bootstrap this is a simple customization in magento theme.

fat potato
  • 503
  • 1
  • 9
  • 29
  • Resolution of your screen design won't matter if you implement it as adaptive or responsive design. It strongly depends on capabilities of your designed layout and what you are trying to achieve. Before starting with desktop-first screen design you should google something like "screen resolution statistics 2017" and consider if your layout should become static, adaptive or even responsive. – Vladimir Samsonov Oct 25 '17 at 07:59
  • @samsonovits this only provides me the stats which i think not enough for me. My question is to design the 1440 screen but the psds are in 2880 for the retina. does this mean i have to divide everything in the 2880 by half? – fat potato Oct 25 '17 at 09:13

2 Answers2

0

You have to consider the pixel ratio of screens in mobile side. Remember not all have the same pixel ratio. This will be a good read.

what exactly is device pixel ratio?

Mostly small mobile devices have 1.X ratio that cuts off images' original crispness based on that ratio. Like if your image has 2880px width it will become 1440px or so depends on pixel ratio. You can check the pixel ratio of a device here: https://mydevice.io/devices/

Once you will know the pixel ratio of the screen then you can control which image needs to be loaded using this CSS for example.

@media only screen and (min-device-pixel-ratio: 2) {
    .yourClass{ background-image: url('low-resolution.jpeg'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    .yourClass{ background-image: url('high-resolution.jpeg'); }

}

babidi
  • 506
  • 5
  • 6
  • lets forget about the pixel ration of the mobile. Problem is if i am going to design my web page according to the 1440px so for the retina i have to design also for the 2880px? because retina doubles the pixels – fat potato Oct 25 '17 at 09:35
  • yes indeed but the drawback is, it will also double up the loading time of the image. But if you only have 1 or 2 images you'll be fine. – babidi Oct 25 '17 at 19:59
0

For high-resolution screens like retina you may use media queries to provide alternative sprites and images for better results or just let it upscale by its pixel ratio. useful stuff to read https://www.leemunroe.com/designing-for-high-resolution-retina-displays/

Vladimir Samsonov
  • 1,344
  • 2
  • 11
  • 18
  • as i have already mentioned. what to do for my normal screens then ? like i have to actually design my page for the 1440 and for the 2880 i should have put the media queries?. what changes required in median queries images,fonts, spacing, button sizes, all should be exactly in half? – fat potato Oct 25 '17 at 10:43
  • no, not all of it.normally you should design with 1440 viewport in mind and provide better images for high-res screens via media queries. – Vladimir Samsonov Oct 25 '17 at 10:46
  • so by watching the psd design for the 2880 i should have cut everything in half like if fontsize in psd is 40pt i should cut it into 20pt for the 1440. Or if a padding between two divs is 12 px it should be actually 6px? – fat potato Oct 25 '17 at 10:51
  • font size also ? – fat potato Oct 25 '17 at 11:15
  • just checked this in PS. You can just scale the whole canvas. Photoshop adjusts all the values automatically. no need for manual calculation – Vladimir Samsonov Oct 25 '17 at 11:20
  • Oh great. Thanks! – fat potato Oct 26 '17 at 06:10