What is it? The ratio of the width to the height of an image or screen. In layman’s term, It’s length by width. Carpenters dating back to the stone age have been using aspect ratio without knowing it. Kindergartners know aspect ratio, because they know the difference between a square and a rectangle. The rectangle has a higher aspect ratio than a square, which has an aspect ratio of 1:1.
What uses it? Any physical shape has an aspect ratio, from toys to skyscrapers. However, the most prevalent aspect ratio of our daily lives is monitor size. In this case, “monitor” refers to any screen of any digital device, be it a desktop computer or a cell phone.
The most common aspect ratios and the devices which use them are as follows:
|4:3||Older TVs, older iPhones, and most tablets|
|3:2||iPads and some Android devices|
|16:10||Most Android devices|
|16:9||Most TVs, newer iPhones, and most small tablets|
Most of the time you won’t have to worry about aspect ratio when using a device, because it’s a physical feature, not a setting – usually! There’s always a catch, and in this case, it’ TVs. I’m not talking about the TV your Grandpa bought after getting back from ‘Nam, I’m referring to any TV purchased within the last 10-15 years.
On your TVs remote, there’s most likely an “Aspect Ratio” button. It’s probably at the bottom and surrounded by the other seldom used buttons. Perhaps it’s not a button at all, but a setting in your TVs internal menu. Either way, this option enables the screen to be changed between different ratios, because certain shows (usually older re-runs) were filmed using the older 4:3 standard. So, if you’re e very wondering why the TV is cutting off the bottom or top of a show, press that button and see what happens.
Why does it matter? Aspect ratio is extremely important when it comes to web browsing. If you’re reading this article, I’m willing to bet it wasn’t printed off and mailed to you by Grandma. Meaning, you’re viewing it on a computer of some fashion, whether that’s a desktop computer, tablet, or smart phone. This is the key part, each of those devices has a different aspect ratio, yet needs to display the same content.
Each device needs to read the data from the source, and display it in a readable fashion. As the user, you might not know how that’s accomplished, but you certainly recognize when it’s done incorrectly. Have you ever called on a website and been forced to scroll to the right to see the content… that’s not supposed to happen. All websites, regardless of viewing device, should be 100% width, with vertical scrolling only.
It’s all about user experience! When a site is coded improperly for responsive devices, the user tends to get agitated and leave the website. So why make it harder on them? If you’re business relies on digital customers, you want to make it as easy as possible for them to consume what you’re offering, no matter what it is. This means having a website all viewers can easily consume, regardless of device aspect ratio.