: What width should I design for when creating a website? 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

@BetL875

Screen Size

Higher screen resolutions ultimately make everything look smaller.



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.



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.

Vote Up Vote Down

@Samaraweera207

The real question is not "which document size?" but "which document width?".

I would recommend to design at 1440px X 900px, this way you're in the average of browser sizes (put some guides at 1000px for smaller browsers and ipad).

Don't stop your design at 1000px, stop your content at 1000px.

Usually I start at this size then I increase my height according to my content. Remember that you can't have the same height for all users because they all have different browser size / different screen resolution.

You should use a grid within your design, it's not required, but it'd help you in several things:


Have the same column width between each section, same gap
It'd be way easier to convert it to css if you plan to use a grid system


(You can install a Photoshop plugin to generate grid or download some .psd with all the guides)

You can have a summary of the 2014's browser sizes here (and be sure to check other high).

Vote Up Vote Down

@Samaraweera207

Commonly users now surf with a browser set to 1024 x 768 or larger. It's generally acceptable to use 1000pixels as a max width

i mostly use mockups at 1100px wide even I'm designing for 1024px resolution. I set up guides within the mockup for 1000px. Because entire content come with in my place, The height may varies.

once u check out 960.gs/

Vote Up Vote Down