Create a layout for each type of page (e.g., marketing page, search page, or data entry page) on the site. The layout organizes the elements to appear on the page and identifies where they are to appear.

Create a Layout Grid

Start by creating a grid that maps to the browser window and monitor size used by the target audience. The most commonly used browser window size is a 1024x768 pixel screen. The actual space available for a Web page is a little less than that since some of the screen is taken up by the browser and its buttons.

Design a grid that is expandable and collapsible so that varied monitor and browser window sizes can easily be accommodated. Use this grid system to maintain consistency throughout your Web site.

Placement and Style

Decide where to put standard elements (e.g., corporate logos, navigation bars, link to home page) that are to appear on each page. Establish guidelines for placement and style of major headings, subtitles and navigation buttons. Indicate where major blocks of text and graphics will appear on the page.

Test the Layout

Gather sample text and graphic content and experiment with placement of the information in designing the page layout. Try the layout with both the most complex and the simplest pages on your site to make sure the layout works well in either situation.

Test the layout with different sized browser windows and monitors. Make sure that the elements fit proportionally within a page when the window is expanded or collapsed. For example, when expanded, ensure that the elements do not appear to be floating in too much empty space. When collapsing window size, the elements should not be jammed too close together.

Tips and Hints

Aim for a modular design so that new content can be added to the site without redesigning the basic page layout.

Since users tend not to scroll down or across a web page, place important navigational elements as close to the top and left of the page as possible.

In general, pages closer to the top level of a site organization tend to emphasize the graphic and navigational elements of the site and act as a sort of menu and summary to guide users to the actual content. The lower level pages focus on the content and tend to de-emphasize the navigational elements.

The page layout appears as a pattern of text and graphics to the reader when viewed on-line. Keep in mind that regular, repeating patterns tend to be more visually pleasing than uneven, inconsistent patterns.

Don't overcrowd the page. Allow for empty space. Balance the style and content of the page.

Some name

Craig has over 25 years of Technology Consulting experience including 10 years in Project Leadership roles. He has extensive background working with large scale, high-profile systems integration and development projects that span a customer’s organization, and experience designing robust solutions that bring together multiple platforms from Intel to Unix to Mainframe technologies with the Internet.

"In thinking this along further, perhaps the stats on screen resolutions is misleading for developers to use. When you look at modern browsers with the ability to add functions and features that stack tool bars, status bars, side bars and all sorts of crazy gadgets to the screen - how big is the viewable area on the screen when all is said and done for any particular user?
If the goal is to create experiences that reduce the need for scrolling to a bare minimum, then content and design should be created to ignore the screen resolution completely.
Content should be dynamic enough to know what the size is for any given destination browser and work to fill or not fill the space accordingly.
Our site here at ITToolbox is a good example - everything changes dynamically based on the how and what you are viewing... If I expand firefox to span both of my 24"" 16:9 aspect ration LCD screens, I can essentially see all of this page from top to bottom without scroll bars. but it isn't the most convenient way to read or operate and most people don't have that kind of hardware at their disposal.
What if I prefer to use a window instead of full screen? what is the text size or zoom level of the page in the browser for any specific user?
It is quite likely that a large number of users are only working with equivalent to 640x480 spaces and the design and operation of the website shouldn't care. if you have a minimal space then light up scroll bars - or maybe reduce the content being delivered to accommodate the size restrictions. Have content revert to links and vice versa as the screen area is determined.
Web designers need to be much smarter than just designing to a specific size specification and the technology and code has also moved well beyond the need to think in those modes. "

Sorry! Something went wrong on our end. Please try again later.

Craig Borysowich

September 19, 2017 05:09 PM

"I have found that designers still hold 640x480 as the lowest common denominator to follow for page design, but you are right - as worded in my post, it should show the 'most commonly used' browser window size which is 1024x768 according to a 2006 stats compilation that I found. "