CSS Methods
Designing for Information and Readability
One of the most difficult issues when managing websites-especially those that are content heavy-is ensuring the structure of that site, as well as ensuring readability.
Content has to do with how you organize your informational materials. Content-heavy sites tend to have a lot of, well, content! And content that is so vast tends to be deep in nature, meaning that it should be made as easy as possible to get to and to read.
If you're trying to ensure that your site is easy to read and that the information held within it is clearly organized for site visitors, keep these design concerns in mind:
Contrast Perhaps one of the most important aspects of readability, high contrast between the foreground and background is necessary when creating information- rich sites.
Chunking paragraphs The concept of 'chunking' came about as web content creators began to realize that people want short sentences. There are several known reasons for this. First, reading onscreen is still not as easy as reading on the page, so keeping items short is more comfortable. Another issue is that shorter paragraphs help create more white space, which rests and guides the eye.
Width of text With the change in computer screen resolutions and the desire to keep websites fluid in design, sometimes you'll run across situations where body text runs very long. Using CSS to contain text and ensure that there are margins around it can go a long way to making your site visitors happy readers.
Page length Ever come across a page that scrolls and scrolls and scrolls, yet offers no means of going up or down the length of the page? Terribly inconvenient for site visitors, indeed. Try keeping page length to about 3-5 screens maximum, and if you do run long, use intra-page linking to allow for navigation along the length of the page.
Type size and font face Selecting the proper font face and size is a critical issue in web design. Type size has to be small enough to look good onscreen, yet large enough to be read by a person with average sight with ease. Font faces should be of normal weight for body text, and typically common sans-serif faces, such as Arial, are considered to be excellent for onscreen body text. (See Chapter 4, 'CSS Typography,' for more detail.)
| Tip | Information Architecture is the field of study that closely examines how information should be structured and presented. You might wish to get in touch with the Asilomar Institute for Information Architecture (AIfIA), a nonprofit organization with resources related to information architecture, especially as it relates to the Web: http://aifia.org/. |
Case Study: World Organization of Webmasters Learning Center
The World Organization of Webmasters (WOW) is a nonprofit, member-driven organization that provides support to individuals and organizations that design and develop websites. This support ranges from the creation of local chapters for networking to the provision of high-end education and certification for a range of professional web topics.
Typically, WOW's members are from education, government, and industrial sectors worldwide. Their needs for information are broad, spanning a range of design and technology specialties. They tend to be busy people who need information fast, but do appreciate well-written, well-organized, and easily accessed resources.
In an effort to provide educational services to both WOW members and the public at large, an online Learning Center has been developed. WOW, as with many organizations looking to the future, has understood for some time that it must promote important professional and best-practice trends, including standards.
To that end, the Learning Center uses structured XHTML documents, CSS layouts, and CSS for all design. There is no presentation in any of the site's markup, and the pages are geared to comply with accessibility concerns.
Listing 8.1 shows the structured markup used to manage the site's general content.In this listing, look at how using the structural markup can help organize your informa- tion effectively.
Listing 8.1: WWW. XHTML Markup on WOW Website
 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>World Organization of Webmasters: Learning Center</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" media="screen" href="core_style.css" /> <style type="text/css" media="screen">@import "global_layout.css";</style> </head> <body> <div > <a href="index.html" title="go to the home page">home</a> <a href="about.html" title="go to the about page">about us</a> <a href="education.html" title="go to education">education</a> <a href="certification.html" title="go to certification"> certification</a> <a href="http://www.joinwow.org/" title="join WOW">join WOW</a> <a href="sitemap.html" title="go to site map">site map</a> </div> <div > <h1>january 1, 2003</h1> <h2>a new year, new directions</h2> <p>These are formidable times facing our industry. With the economic
slowdown, buyer insecurity, news reports about IT Conference cancellations,
bankruptcies and consolidations, job opportunities in the Web profession is
unquestionably a hot topic.</p> <p>There is no doubt that 2002 proved challenging for most people, and Web
professionals especially. There are few among us worldwide who can't say
that we, or someone we know, has either lost or changed jobs, or is
struggling with the economic challenges that the world events of the year
have left behind.</p> <p>With the New Year, it's natural to take stock of the past year and make
plans for the new one to come. When things get difficult, it helps to start
counting blessings. In an effort to forge a much brighter and prosperous
future for WOW members, we at WOW have done just that. And, one of our very
first projects to help the optimism along is the WOW Learning Center.</p> <h2>about the center</h2> <p>The WOW Learning Center is a growing education resource provided through
its parent organization, The World Organization of Webmasters (WOW). Our
goal is to provide education in step with WOW's respected certification
programs for both the interested public and well as current and prospective
WOW members.</p> </div> <div > <form method="get" action="http://search.atomz.com/search/"> <p><label for="search">search: <input type="text" name="search" size="15" /></label></p> </form> <p>navigate:</p> <p><a href="programming/index.html" title="go to programming">
:: programming</a><br />
<a href="databases/index.html" title="go to databases">:: databases</a><br
/> <a href="networking-security/index.html" title="go to networking and
security">:: networking &<br /> web security</a><br />
<a href="ecommerce/index.html" title="go to ecommerce">:: e-commerce</a><br
/>
<a href="webservices/index.html" title="go to web services">:: web
services</a><br />
<a href="markup/index.html" title="go to markup and css">:: markup &
css</a><br />
<a href="design-usability/index.html" title="go to design and usability">::
design & usability</a><br />
<a href="accessibility/index.html" title="go to accessibility">::
accessibility</a><br />
<a href="internationalization/index.html" title="go to
internationalization">:: internationalization</a><br />
<a href="business-law/index.html" title="go to business and law">::
business & law</a><br />
<a href="tools-products/index.html" title="go to tools and products">::
tools & products</a><br />
<a href="career-center/index.html" title="go to careers">::
career center</a><br />
<a href="clients/index.html" title="go to for the client">:: for the
client</a></p> </div> <div > <p >distinguished partners:<br /> <img src="/books/1/266/1/html/2/images/partners.gif" width="148" height="38" alt="distinguished
partners logos" /></p> </div> </body> </html>
|
Listing 8.2 is the global layout style sheet for the site. Here, you'll see layout styles primarily. Fonts, borders, colors and so forth are different for each site section, as you'll see in an example a bit later.
Listing 8.2: WWW. Global CSS Layout for WOW Learning Center Website
|
body { margin:0px; padding:0px; background: url(images/wow-education.gif) top left no repeat scroll; } h1 { margin:0px 0px 15px 0px; padding:0px; border: none; } h2 { margin:0px 0px 15px 0px; padding:0px; } p { margin:0px 0px 16px 0px; padding:0px; } #header { margin:50px 0px 10px 0px; voice-family: "\"}\""; voice-family:inherit; height:14px; } body>#header { height:14px; } #content { margin:0px 210px 50px 10px; padding:25px; } #menu { position:absolute; top:100px; right:20px; width: 190px; voice-family: "\"}\""; voice-family:inherit; width: 170px; } body>#Menu { width:170px; } #partners { position: absolute; text-align: center; top: 490px; right: 20px; width: 190px; margin: 10px; voice-family: "\"}\""; voice-family:inherit; width:170px; } |
| Note | You'll see that the box model workaround has been put to use in the layout of this site. For more information on that workaround, please see Chapter 6, 'Working with CSS Layouts.' |
Managing Information within the Site
In addition to logistical and informational pages at the top level of the site, the Learning Center covers 14 specific topic areas, which is a significant amount of information.
Figure 8.1 shows the home page of WOW's Learning Center.
Figure 8.1: The home page of WOW's Learning Center
Several items are important to point out. First, notice the logo (8.1A). You'll see that this is consistently placed throughout the entire site. The same is true of the top navigation (8.1B) as well as the side navigation (8.1C), leading to the individual site sections.
Within the page itself, headers denote the topic of the page at hand (8.1D) as well as any subtopics (8.1E).
You'll also note a subtle background image that provides shape and movement without intruding on the visual design of the site.
Figure 8.2 shows an internal section page that is an excellent example of addressing readability concerns.
Figure 8.2: The Career Center at WOW's Learning Center
The font color for all body text throughout the site is black and it has a sans-serif face, Arial specifically (8.2A). Line length is variable depending upon browser sizing and resolution, but sufficient margins (8.2B) and white space make it appealing. Note also the use of small paragraphs (8.2C) and bullet points (8.2D) to keep information 'chunky.'
Finally, while navigation has been kept simple, each section is color-coded with global color design in mind. This has been achieved by using section-specific style sheets. Listing 8.3 shows the style sheet for the Business and Law section of the site.
Listing 8.3: WWW. Business and Legal Section Style for WOW's Learning Center
|
body { font-family: arial, helvetica, sans-serif; color:#000000; } h1 { font-size:28px; line-height:28px; font-weight:900; color:#884362; background: transparent; } h2 { font-size:24px; line-height:26px; font-weight:900; color:#B86389; background: transparent; } p { font:15px/20px arial, helvetica, sans-serif; text-align: justify; background: transparent; } ul, li { font:15px/20px arial, helvetica, sans-serif; text-align: justify; background: transparent; } a { color: #666; font-size: 13px; text-decoration: none; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; } a:link { color: #666; } a:visited { color:#666; } a:hover { color:#999; } a:active { color:#cccccc; } a.topnav { border: none; } a.topnav:link { color: #FFF; } a.topnav:visited { color: #FFF; } a.topnav:hover { color: #666; } a.topnav:active { color: #999; } #header { padding:17px 0px 0px 20px; height:33px; border-style:solid; border-color:black; border-width:1px 0px; line-height:11px; background-color:#BFC7B0; } #content { background: transparent; } #menu { padding:10px; background-color:#E6EBDE; border-left: 1px solid #656b78; border-right: none; border-top: none; border-bottom: none; line-height:17px; } #partners { text-align: center; } .small { font: bold 12px/13px Arial, Helvetica, sans-serif; } |
Figure 8.3 shows the Business and Law page, complete with layout and style.
Figure 8.3: The Business and Law section, with an appropriately austere color scheme
You'll see that color coding sections in information-rich sites is a popular way to keep the site looking interesting without degrading the integrity of the design.
Figures 8.4 and 8.5 provide a look at two of the other internal pages.
Figure 8.4: The Design and Usability page uses a bright, lively color scheme
Figure 8.5: The Programming section, with colors reflecting technology (silver) and progress (red)
EAN: 2147483647
Pages: 86