Not only does the screen size itself vary considerably but also the aspect ratio. (This is the proportion between width and height of your screen and is expressed as a ratio e.g. 16:9). Current common aspect ratios for displays are 5:4, 4:3, 16:10 and 16:9. These vary from 5:4 (square (older PC monitors) to 16:9 (rectangular modern LCD displays). (Here's where you can see how different aspect ratios vary - look at the way the diagonal lines spread from the top left to the bottom right.)
The way your website accommodates all these various display shapes and sizes is to make the design fluid. This is standard practice in the industry and is known as Responsive design. This means that the design changes it shape and size to suit the circumstances. (The alternative would be to have a specific design for every likely screen resolution a process which would take an inordinate length of time to code and add huge cost to development projects.
Everything on the screen can scale except pictures because they are fixed sizes. So, in order for them to look acceptable on as many devices as possible we ‘zoom’ in and out of the image to ensure it always fills the prescribed area. (Please note that not only does this apply to overall screensizes but the shapes of 'containers' in which images sit on a web page.)
Hero Images & Aspect Ratios
Below is a photo which is 640x360 with an aspect ratio of 16:9. The standard for widescreen desktops.
If the photo is shown on a screen with the same aspect ratio then the image will simply resize to suit. For example, below the photo correctly fits the screen size.
If, however, it is viewed on a squarer device the website has to accommodate this by zooming in or out of the photo. Here it does not.
If the website simply resized the photo (whilst retaining its aspect ratio) to fit the screen size, this is what would happen:
There is now left a black ‘unused’ area beneath the photo due to the resize. To correct for this responsive (mobile friendly designs) zoom into the photo and effectively ‘crop’ the edges. Like this:
If we take the reverse (and often more typical scenario) of a square photo and a rectangular screen we get this effect. Notice that the image has been resized (made smaller) leaving black bars on either side of the screen.
To rectify this the responsive design again zooms in on the picture:
Note how now the image is only showing the top half as a result of the ‘zoom’. Since the software has no way of knowing what is important in the picture it simply zooms in from a fixed point on the image.
Responsive designs are a ‘best-fit’ solution to the real world problem of trying to make a website look good under all circumstances. And as a ‘best-fit solution it can never be a perfect fit – what looks right on one screen may look less good on others. Nonetheless the responsive solution provides the most aesthetically pleasing result hence the reason for its universal use.
digitalROAR is a Web Design agency based in Staffordshire. We build websites that convert visitors into customers and enquiries through great design, rock-solid technology and innovative Digital Marketing. Let's make Contact.