Advertisement


What width should I design for when creating a website?


Question

I just got a freelance project to design the UI for a website. Can someone tell me what layout (dimension) is used to design a website front end in Photoshop? What are the basic dimensions used?

2014/05/07
1
8
5/7/2014 8:14:00 AM

Screen Size

Higher screen resolutions ultimately make everything look smaller. enter image description here enter image description here

A very small percentage of Internet users are still using older resolutions like the once popular 800×600.

Sites using a 720px width appear very small on high resolution screens, and don’t leave room for a sidebar. Now most websites are staying somewhere around 960px wide. Some sites are even catering to the latest technology with much wider sites.

enter image description here

Although it is important to consider the newest devices, I believe the optimal website width is still 960px wide. This width caters to the majority of devices and makes your site fit nicely in both 1024px and 1366px wide screens.

960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, and 15. It is a dream for making a perfect grid site. This leads to the popular resource called the “960 grid system“.

Readability

A blog, news site or any other type of content-drive site then take readability into consideration.

“The ideal line length for text layout is based on the physiology of the human eye. At normal reading distance the arc of the visual field is only a few inches – about the width of a well-designed column of text, or about 12 words per line.”

Reading rate and retention both drop as the column widths increase. It is much more difficult to read a wide page than it is to read a moderate column of text. For the web designer, take font-size and resolution into account. In most cases a safe width for a reading column is between 400 and 700 pixels, and choosing the right font size will greatly help your readers.

2014/05/07
14
5/7/2014 9:45:00 AM