Website Redesign - Reason 2 Resolution

Screen resolution, not New Years Resolutions ;-)

Having been in the website design, development, and hosting business since 1996, it’s been interesting to watch the screen resolutions we develop for change. When we first started building websites a 640 x 480 resolution screen was all we could count on and even then, it may have only displayed 256 colors. Thank goodness the color issues have gone away, but with having to design for smartphones, darn if that 640 x 480 resolution didn’t come back! Today a website has to work and work well, on everything from that smartphone up to a 1920 x 1080 monitor. Recent analysis of screen resolutions used in North America shows that 1920 x 1080 is is the screen resolution used by almost 10% of people viewing the Web. Surprisingly that’s the largest percentage of any resolution. Gone are the days of 1280 x 1024, 1024 x 768, 800 x 600. As the chart below shows there are many, many sizes, and "Other" is the largest group. Reinforcing why responsive web design is so critical, we simply can’t know what screen size will be used when viewing a site.


 
Of those 14 defined sizes, half are phone sizes, confirming Google’s claims that half of all traffic is mobile. There’s a couple of tablet sizes in that list as well.
 

So why is screen resolution a reason to redesign a website?

If your site is more than a few years old, it was never designed to be viewed at 1920 pixels wide. You’ve seen these sites. The site is narrow running down the middle of the monitor with huge swaths of unused screen real estate on either side, maybe even on the bottom. That no-mans-land may be a color, a texture, or hopefully an interesting photo background, but however you look at it, it’s space going to waste. Here’s an example…


 
Honestly, right now, even our website is showing it’s age with too much white space to the left and the right. Sorry to be a “Do as I say, not as we do” example.

Today’s designs use full-width liquid layouts where the content on the page fills the screen. In fairness this technique was used years ago as well but doesn’t hold up well on that 1920 resolution. These sites have a single line or two of text for content and lots of white space below. Having that much width back then was simply unimaginable at the time. Today we know that 4k and even 8k or 16k monitors will eventually arrive and we'll be going through a redesign process again.

A couple of recent website design projects that use full-width liquid design and look great at high resolutions.

Arizona Hardwood Floor and Supply is an excellent example of using full-screen images to show off beautiful product at it’s best.
 


This website for Loves Garage Doors uses a full-width slider (slide show).


 
Compass Cleaning Solutions uses the same full-width slider with some nifty little animation as you scroll down and reveal additional images.


 
Any of these sites are great examples of using screen resolution to it’s fullest on website redesign projects.

How about you? Ready to upgrade your old site with something that makes an impact? Contact us today at 602-427-5626 to get a free estimate on redesigning your website.

Next up in the series, Website Redesign Reason 3 Design Trends