Jan 6, 2014 by Aaron Rubman
Have you ever gone back and looked at a website designed in the late 80’s?
Either the text runs all the way across the screen with a bare minimum of branding and styling, or else the entirety of the copy is compressed into a narrow column of text running down the center or left hand side of the page. But if you cast your mind back, the designs didn’t look like that back in the 80’s - at that time they filled the full screen.
So what changed?
In 1984 it was a big deal to have a screen width of 640 pixels. This effectively determined the maximum size of a website - but it is less than half the size of a typical modern screen. While some people still browse the web with 320 pixel monitors, others have 2560 pixel width monitors.
Top 3 Screen Widths
There are three screen widths that should be paid special attention.
14% of all desktop web traffic comes from monitors of this size
95% of modern web traffic comes from monitors this size or larger
Designing to this size produces a website that is near-universally accessible
19% of all desktop web traffic comes from monitors of this size
79% of modern web traffic comes from monitors this size or larger
Many designers now treat 1280 px as their “standard” design width
28% of all desktop web traffic comes from monitors of this size
55% of modern web traffic comes from monitors this size or larger
This is both the median width for modern desktop web traffic and the single most common screen resolution.
Designing to wider screens is generally unwise at this point.
For a long time, web designers would pick a single screen resolution and design for it to the exclusion of all others. However, as we can see by looking at old websites on modern monitors, this does not future-proof the design, nor does it take into account mobile devices with their smaller monitors.
The answer is Responsive Design. When a developer produces a responsive design, they are arranging the same content for anywhere between 3 and 6 screen widths each customized to the standard resolution of a mobile, tablet, or desktop monitor. The same content is typically displayed in all versions of the design, but arranged to better serve the devices it will appear on.