the graphic design blog that speaks the truth

As a follow up to my post earlier this year, I thought I would give an update on my views of the once standard CSS measure: 1024px.

Why not to use it

The post above linked to these figures which illustrates the rise of larger screen sizes in relation to those bigger than 1024px. Back in January, the figure was as little as 14% of users with screens of 1024px or less. In the space of 9 months, this has decreased a further 4% as users upgrade their machines. This trend suggests that if you are not using responsive design, then you should probably be designing for widths greater than 1024px.Whilst 1024px would display perfectly fine on these larger screens, as screen sizes grow, website sizes need to along with them.

What to use instead

Whilst the majority of websites are now adapting the responsive approach to web design (the website scales elegantly depending on the screen being used to view it) some still don’t, deciding instead to build a desktop version and hoping it performs well on mobile & tablet devices. When building a non-responsive website these days, there is no standard width to use. There are obviously many variables that affect the sizing you choose, but hopefully these figures of higher resolutions will help you make an informed choice.

A CSS tip for these wider websites

When using the 1024 approach, and to allow the smaller devices to read and display the site correctly, a common approach was to add the following css tag to your stylesheet:

body {
    min-width:1024px;
}

With the website rarely being of a width greater than this, this normally did the trick. However, when creating a website with a width of say 1200px this will obviously not work, and you will see horizontal scrollbars on your website when viewing on a mobile or tablet device.

The solution is very simple. Forums around the web would almost always give you the answer “just add min-width:1024px to the body tag“. With wider websites the solution is very much the same, we just need to adjust the value.

When building non-responsive websites I personally tend to add 50px to the width of my website, which allows mobile devices to add some spacing either side of your website (another common problem solved) Say, for example, I was building a website with a width of 1200px I would add the following to my CSS stylesheet:

body {
    min-width:1250px;
}

Hope that tip helps someone out.