skip to main content

TAMU Webmaster's Blog


Information and insight from the A&M Webmasters

Page Layout

February 6th, 2009 by Erick Beck

Summary

In the past, Web design was geared around meeting fixed screen widths and resolutions. Today, especially as web pages are increasingly viewed on mobile devices, designers are coming to understand that the web is a fluid medium and not a piece of paper with boundaries.

Content reading vs. page scanning

Visitors to your website don’t read, they scan. Some studies show that web visitors often look first at the headline, then the navigation, but many similar studies have been published, each with its own findings. Because these findings are ever-changing, and often differ according to how each website is used, it’s important to look at current research trends and decides how it fits into your site design. Generally speaking, your visitors’ eyes are attracted to features such as bold type, color, and graphics. By using these elements wisely on your website, you can make its most important features easier to find.

Page length

You don’t need to say it all in one page. Make each page short enough to minimize scrolling, then create other pages to cover sub-topics. However, don’t make your pages so short that your visitors feel they are spending more time waiting for the next page to download than reading the actual pages. Cover each topic thoroughly enough so that visitors don’t need to go to another page to find what they came to your page for. That being said, the graphic intensity and coding complexity for Web pages has grown along with bandwidth speeds, so even a page with little text but complex scripts and images can take time to process.

Relative vs. fixed width

This debate has raged since the beginning of the Internet. Most corporate sites are still fixed-width because that gives the greatest control over what the user sees. Everyone will see the same text and pictures on the same part of the screen. Relative-width pages give up this advantage to be more user friendly. The page width can automatically adjust to meet the capabilities and wishes of the user. This is particularly important as we enter the age where most web page views will come from non-traditional devices, such as cell phones, which do not display in large screen sizes.

Screen resolution

Screen resolution is somewhat related to the issue of fixed/relative width pages because assumptions made here usually determine the page width.

A few tips:

  • Don’t use “best viewed at [screen resolution]” on pages. It’s not so much the screen size as it is the browser window size. Yes, most desktop monitors today have a screen resolution above 800 x 600, but most people will not maximize their browser window out to its farthest reaches because they want to still be able to access their other windows easily. And mobile users can’t maximize their browser windows.
  • Consider a fluid design methodology that uses percentages to allow for browser resizing. Some visitors will be using a huge flat screen monitor, on which a fixed-width Web page will take up a tiny corner and not the whole screen. Other visitors will be surfing your website from their mobile phone, on which a large splash banner will be unusable.
  • Don’t use “best viewed using [browser]” on pages. It should not ever fall back on the user to have to use a certain browser to access pages. While older browsers eventually lose popularity and newer standards-compliant browsers are recommended, you should perform cross-browser and cross-platform testing during your design and development to ensure a consistent user experience.  Again, you never know if your visitors may be using mobile phones, screen readers, or other devices without these browsers. This is why designing to particular browsers is specifically mentioned as a TAC §206 violation.

File size

Today’s website is much different from that of only two or three years ago. As high-speed Internet has become more available, designers have loaded up on large graphics, Flash, and other elements that dramatically increase the file size of our web pages. While keeping modern web design practices in mind, don’t assume everyone has high-speed access. There are still a large number of people with satellite or even dial-up connection speeds. Part of the university’s and System’s responsibilities is to provide education and outreach, especially to rural areas and underrepresented populations, so pages need to be optimized to minimize download time. Site planning should include a discussion on the use or limit of images in relation to the page’s overall download time.

CSS vs. tables

We strongly encourage the use of Cascading Style Sheets (CSS) rather than tables to control the display of web content and applications. Before browsers began implementing CSS, tables were commonly used for positioning the elements of a Web page. But CSS has been an official Web standard since 1996, and every modern Web browser is compatible with CSS. The most basic concept in modern web standards is separating content from presentation, and this is best accomplished through the use of CSS.

When designers find themselves in conflict with device limitations, content is king. With CSS it should be possible to gracefully degrade how the page looks without losing access to the whole content.

No Frames

This is one thing that has not changed. Frames are evil. Google makes the ominous statement, “Google supports frames and iframes to the extent that it can.” Frames not only cause problems for search engines, they are usually not supported by screen readers and other audio browsers. Furthermore, they have the effect of making the screen appear smaller by dividing it into more sections, forcing your users to scroll in more places in order to view your content. While not specifically disallowed, TAC §206 strongly discourages the use of frames in web page creation.

Categories

Archives