I am building my first website.

 

When building a website, how do ultra high res. retina screens (eg. MacBook Pro with 2880x1800) display the "standard" resolution webpages?

I am specifically asking from a layout perspective, and not from the perspective of image sharpness.

I understand that some images / icons may be slightly blurry.

Can I just design for standard screen sizes, such as 1920x1080 and these devices will "enlarge" everything, so they fill up the "empty" space, so they look the same as on a standard screen? Or the layout needs to be targeted for ultra high screens as well?

Thank you!

Dont worry. Retina displays will not "scale" your layout it will just display your graphics in higher resolution if available, meaning if the images you are using are bigger than the height/width properties you set. The same with SVG and fonts they will be rendered with twice as much detail as on standard screens but the dimensions will be the same.

 

Can I just design for standard screen sizes, such as 1920x1080

 

You shouldn't really design for fixed screen resolutions (there are simply to many) instead try to make a fluid design that will look good at any resolution.

By default a "fixed width" web site will be have the width scaled down to match the viewport on handheld devices and the result will be very small elements in mobile browsers. You would want to override this behavior with a viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

For elements that need to have fixed width look up how to use media queries, which are groups of style rules triggered by conditional statements (usually device widths).

Edited September 13, 201511 yr by Nillervision

Thanks for this info!

 

Yes, I am already getting used to media queries, and I used them from going up from 320px until 1920px.

But I wasn't sure if I need to go even further up (for example 2880px for a MacBook Pro) or can I stop at 1920px, and MacBook Pro and other ultra high resolution devices will scale up my website. This is still a bit unclear to me, but you suggested retina devices will not scale up the page.. (?)

 

I never thought web design can be so complex..

Thanks for this info!

 

Yes, I am already getting used to media queries, and I used them from going up from 320px until 1920px.

But I wasn't sure if I need to go even further up (for example 2880px for a MacBook Pro) or can I stop at 1920px, and MacBook Pro and other ultra high resolution devices will scale up my website. This is still a bit unclear to me, but you suggested retina devices will not scale up the page.. (?)

 

I never thought web design can be so complex..

As I said you should not worry about every posible screen resolution. Most good designers try to have as few media queries as posible and instead use fluid layouts with widths in% combined with fixed min or- max-widths to have elements colapse on smaller screens.

The only exeption with very large screens (1:1 pixel ratio as well as Retina) is too small image dimensions for full screen images. I see many designs with a full screen background that gets pixelated on very large screens because theimage is "only" 1600-2000 px wide and the container element does not have a max-width.

Edited September 13, 201511 yr by Nillervision

What niller said. There's no need to set your media query breakpoints at specific device sizes. I've just got mine set at arbritrary numbers but met setup allows me to change them on a whim - because it's the content and the design that ultimately dictate breakpoints, not devices.

 

It's madness to try to target specific devices for things as there's so many sizes, and many more that we don't know about in the pipeline. Just make sure everything looks great at every possible device size. If things are well architected you shouldn't need more than a few breakpoints. I think the most I've ever used in a project is 6.

If you don't understand CSS layout (Which from your post I'm lead to beleive) Then sign upto treehouse and spend whatever time it takes on thier frontend path to learn.

 

It's good to learn by doing but you must learn some theory first, learn a bit of theory play around with it in codepen. Then move on and learn the next thing. Eventually you will have the skills needed to make a basic website, these skills take time so there's no need to try and rush things.

Edited September 14, 201511 yr by rbrtsmith