How the Evolution of Screen Size Has Affected Websites
In the good ‘ol days, designi
ng a website for the mass viewing was simple. We knew the majority of folks were viewing websites on monitors about 1024×768 size and we should design sites that would fit those screen sizes, knowing exactly what content would be appearing above the fold and what would require scrolling down to read. Today with the advent of mobile usage and more larger-sized screens being use in homes and corporate settings, the screen “norm” is less predictable.
Here are some trends we see emerging and how we address them in our designs.
Larger PC monitors are becoming the norm. In 1999 the average screen size was 800 x 600. Then around 2004 to 2005 monitors with screens sized 1024×768 came on the market and within just a couple of years yielded to size 1280 x 1600. Today, there are screen sizes that fall into the huge category with a horizontal measurement of over 1920. This is more than double the size of the 1999 screen size.
Designers need to think horizontally. Not only has the typical monitor size become larger, it’s also become wider. Again, when websites were first being designed, this idea was to create a website that would essentially fit into nearly square sized screen with more additional content to be optimal for long scrolling viewing. The newer screen sizes turns this on its head, challenging designers to think horizontal in their designs.
Multiple mobile screens create the need for responsive designs. In case designers aren’t already challenged with changing PC screen sizes, the variety of mobile screens will add to the optimal design size dilemma. Here are just a few of the screen sizes on the market.
- Kindle measures 800 x 600
- Traditional ipad measures 1024 x 768
- Nokia 5228 measures 360 x 640
- Blackberry 8520 measures 240 x 320
- Iphone 4 measures 640 x 960
Clearly, designers can’t design for all of these screen sizes. With the advent of Responsive design, we are able to create more flexible, fluid websites with components that can shift into place depending on the device they are viewed on.