How wide should my website be?
In the (honestly quite terrible) 2001 movie Antitrust they really had this responsive design thing down. Social media was years away so the only practical way to spread the word about
Microsoft NURV being completely evil is to simultaneously hack every computing device on the planet. UI designer Lisa, clearly the best designer to ever live was able to present an interface in the same sharp detail on both a tiny early 2000’s mobile phone and a billboard on Times Square without any changes between devices. Given that we don’t exist in Hollywood where the same interface looks perfect on all screens no matter the size it can difficult to work out just how wide a website should be.
Even if we ignore mobile devices screens range in size from those on the smallest laptops to massive retina displays that would look more at home in the lounge room showing Game of Thrones. You don’t want a user having to scroll horizontally to read your content but a tiny website drowning in a sea of whitespace isn’t very appealing either.
How wide should my website be for desktop users?
When deciding on how wide your website should be it is important to keep lines of text at a comfortable reading width. Your users will get very sore necks if they have to scan back and forth over the expanse of their 27 inch monitor to read you content. A width range of 960px to 1600px is popular among web developers at the moment. Twitter’s Bootstrap framework has a default container width of 1100px which I find a good width to work with.
A width range of 960px to 1600px is popular among web developers at the moment
What widths should I use in my CSS media queries?
This keeps changing as new devices come out so it is best to use general breakpoints to group devices by size rather than catering for specific devices. However this article on css-tricks.com contains the media queries to target popular devices including the Apple Watch if you are particularly keen.
It is best to use general breakpoints to group devices by size in media queries rather than catering for specific devices.
How can I make my website look better on large displays?
Just because you are being careful about making your text sections a comfortable reading width doesn’t mean your website has to float in a sea of white space. Large background images are a popular way of filling up blank space. The 12 upwardly responsive websites showcased in this article from econsultancy.com make clever use of the extra screen real estate by adding extra images or columns of content when the site is displayed on larger screens.
What tricks do you use for large monitors or which websites have you seen handle them well? Has anyone designed a website for the Apple Watch yet?