Our Innovative Layout

In the policy of open source code for web page design, layout and structure, we are sharing our CSS and HTML design and layout so others can learn and use what we have learned. We have a very innovative design used throughout our various web page looks and transitions and we share the code with you and provide helpful information and tips on web page design, CSS, HTML, XHMTL, and CSS experiments.

Each web page is made up of two main elements. The HTML page features the structure of the page and the CSS (style sheet) represents the presentation style of the HTML page. Because CSS now includes layout positioning, the HTML tags can be rearranged, to a point, in any manner. This frees the designer from having to code the page in a certain order. Books, agazines, and newspapers are commonly laid out in this structure:

1. Top – Header

2. Left – Sidebar

3. Right – Content

4. Bottom – Footer

Without CSS, that’s also the order you would code a web page.

We are proud of our layout structure because we defied tradition through the use of Cascading Style Sheets positioning and are able to have the visual layout in the traditional form while the actual HTML structure flows differently:

1. Top – Header

2. Right – Content

3. Left – Sidebar

4. Bottom – Footer

Why the change? And what is the big deal about this? The layout is the same!

Yes, the layout results are exactly the same. What changes is what happens under the hood. Consider the path gasoline takes to get to your engine. Typically, it follows the fastest path to keep the engine fueled. But what if tradition was to have the fuel line go around the rear of the car and back to the front before it got to the engine? The longer the fuel line, the harder the fuel pump as to work and the lower the fuel pressure. Innovation would come from shortening the distance. Laying out your web page’s HTML structure in the traditional form means your content is third, and possibly last, to load. The longer it takes for the most important element to appear on your page, the slower the access to the content.

Let’s look at the specific benefits of our innovative HTML structure layout:

Important Content Loads First

Most Internet users are familiar with this effect: you click on a page link and the page begins loading. You see the header, then the sidebar, and you wait, wait…ah, a title…wait, and then at last the content is visible. Code within an HTML page loads in the order it is received, first come first serve. The further down the list the content is, the later it is to load. Move the content higher in your page’s structure and the content loads faster. Visit one of our pages and if you have a slow enough bandwidth, you will see the header, then the content, and the last thing to load is the sidebar. We’ve reversed the process, getting the content to the user faster. The user can begin reading before the rest of the page finishes loading.

Faster Access to Content

In our old table layout design, the content first appeared on line 70 of the HTML page. In our new tableless design, the content begins on line 46. Search engines have to plow through each line of code to get to the content. The main home page of our table layout had 4,713 bytes of data to translate within those first 70 lines of code. In the tableless design, there are 3,749 bytes of data within 46 lines, an almost 20% reduction in size. Smaller file size, faster loading and faster access to content. And less code to plow through for the designer.

Search Engines Adore Us

As a search engine’s robot or spider plows through the code and content on your page, most barely move past the top 25-50% before moving on. Moving the content higher up on the page means faster access to worthwhile data. Remember, search engines can’t “see” your page, so they don’t care how pretty it is. They simply are looking for data they can use in their database. The more data search engines collect, and the faster they can collect it, the more they tend to like what you have to offer. Some search engines actually score points for fast access to your data through CSS and deduct them for designing with tables.

Accessibility is Easy

Strip away our style sheet and the layout and content is still readable. When designing for accessibility, it is important to us that our web pages can be read by everyone, no matter their ability, disability, or hardware. Instead of being bored to tears waiting for the content to load, the user can get to the content while the sidebar sits at the bottom, waiting.

Streamlining our page’s structure through the use of style sheets instead of tables frees up our pages to be able to be viewed quickly and cleanly by anyone. The more who can read it, the more visitors we attract and keep.

Our Layout Structure

We’ve created a test example of our innovative layout for you to examine and use. The styles are built into the sheet rather than attached, so you can copy the source file and make your own changes. Looking at the test page, its layout, and the code underneath may help you better understand the following explanation. (To open the page in its own window to refer to while you read on, hold down the SHIFT key and click on the test page.}

By default, a web page is divided up into three main elements, the HTML, HEAD, and BODY. Inside the body, we add divisions called “containers”. These are elements which hold the data you see on the page.

Our main divisions within the body are: container, header, content, sidebar, and footer..

Note the order these elements sppear on the page. They begin with the container which holds the entire page. Then comes the header at the top of the page, then the content, then the sidebar, followed by the footer. Most page layouts are container, header, sidebar, content, and footer. Our HTML structure depends upon the CSS codes to position the page layout. The content within the HTML allows the fastest path to the most valuable information, the content, leaving all the sidebar and footer information at the bottom. This means the search engines and those with slow or less compatible browsers will see the “stuff before the fluff”.

We have an example of what one of our pages would look like without the style sheet to show how the content would look if all the presentation styles (CSS) were gone and compare it to the same page with the style sheets. We also have examples of how one of our pages would look when put to the test and viewed by the wide variety of computer monitors, Internet browsers and various software and disability features, giving you a real world view and test of a web page’s design.

Let’s look at each element individually and then as a whole to help you understand how we did this. It took several months of trial and effort and we found very little help on the Internet, so we are proud of the results.

And The Layout Begins…

We have set the HMTL and BODY tags to have no margins. This gives us more freedom to set the margins of the divisions within the container tag.

The container division ( #container) contains the whole page design within the BODY tag. All other tags go inside of this to contain them.

From here, our page is divided into four sections: header, content, sidebar, footer. The header is the top head of the page that spans the width of the page and includes the title information for our Website. The width of the header is set to 100% of the width of the container. The height is set for 100 pixels, but this may be modified.

Below this we have two columns: content and sidebar. The content column holds the content of the web page, including article information, photographs, and links. The sidebar column holds the navigation menu and other information related to the web page and Website.

There are two positioning elements in CSS. Absolute positioning fixes a corner of a container at an unmoving point on your page. Relative positioning sets the position of the container in relationship to its parent container and the containers around it. It tends to move with the window’s width and resolution. We have worked hard to maintain as much flexibility in our layout as possible, so we rely on few absolute positioning techniques and mostly relative positioning.

To set these two columns we used absolute values for the top left corner of the sidebar as the starting point and gave it a fixed width. We’ve given a left margin absolute position to the content column, but the rest of the elements are assigned relative positioning so they move and stretch with the window size. Notice there is no top position value for the placement of the content. It is automatically pushed down by the header above it. The left margin position leaves a gutter space 170px wide for the sidebar to fit into with its fixed position and width.

Since the sidebar is being forced into position, we’ve used a top and left position:absolute to lock it into place. The top is set 105 pixels from the top of the page, sitting below the header which is 100px high. The left is set for 0 and the width is set for 155px to fill the empty space left by the content’s left absolute position of 170px. The gap in-between creates a gutter of 15 pixels of white space between the sidebar and the content. The height of the sidebar column is set to a relative length of 100% allowing it to stretch the height of the page to fill in the space. We’ve set margin and padding positions for our graphic needs, but these can be adjusted to meet your own needs for space around the content within the section. If the header’s height is changed, the top position of the sidebar must be changed as well.

If anything within the sidebar margin exceeds the fixed width, it pushes the sidebar over the content as shown.

Remember that anything within the narrow width of the sidebar that exceeds the absolute fixed width of 155px will push the sidebar over the top of the content section. Because the left margin of the content section is set at an absolute and not relative figure, the items in the sidebar will just layer over the top of the content material. This is a structural weakness that comes with using absolute values, so take care and watch for extra-long graphics, words, or non-spaced text like web page addresses which may push the right margin out over the content column.

At the bottom of the page is the footer. It is set to a width of 75% and floats to the right to permit the content in the sidebar to drop down below the footer if necessary. If the sidebar in your own design never passes below the footer, you can set the width to 100%. If the sidebar content exceeds the footer, it will overlap it. The magic of this ending code is the clear:both attribute which clears all columns, graphics, and content above it to the right and the left above the footer code. This forces the content within the footer to sit at the bottom of all the other DIV sections (columns) and content, except the sidebar. It keeps the footer close to the content and gives the article content a clean bottom. We go into the specifics of our footer design in our section on the fonts, text, headings, and links of our web page design.

One Little HTML Bug Fix Makes It All Perfect

Before we get to the final set of code for our page’s layout, we have to fix a bug. Microsoft Internet Explorer, whether you like it or not, represents over 80% of all Internet browsing software around the world. Remember, you are designing your web page for an audience, and the majority of your audience uses Microsoft Internet Explorer. Internet Explorer also comes with a few bugs – problems – that need special attention in order for a page to look right when viewed. One of those little problems causes containers, lists, and links to jump around or appear and disappear. A lot of people have come up with ways to fix this, but none are as simple as the Holyhack.

I’ll leave it to the experts at Positioniseverything.net to discuss the “IE Three Pixel Text-Jog and Holyhack” better than I can. For us, the fix comes in two parts. The first one is to make sure and assign the display:relative to most division containers. The second part is to add to the style sheet the following rule:

In the HTML of every page we have the following:

The Holyhack adds a height to everything overall, which helps Internet Explorer set everything in its place. It isn’t the “real” height of the container but Internet Explorer recognizes it and it works. That’s the main thing: It works.

All Together: Our CSS Layout

We’ve looked at the specific sections and now it is time to see the whole thing. We’ve included a few of our basic designs as placeholders for you to insert your own design elements. We’ve also done a lot of experimenting with different CSS designs and you can find your own inspiration and ideas there.

Either place the code in a <style> tag block in the header of your web page or in an attached style sheet. The HTML is laid out below.

CSS Style Sheet Codes

HTML CODE

Now that you have the layout set in the style sheet it is time to add the foundation for your web page. The following is our basic HTML structure. Note: You will need to change the document type to reflect your own needs.

Layout Links and Resources

• Position Is Everything *****
• Eric Meyer’s CSS Edge *****
• Perched Upon A Lily Pad: The Ultimate Three Column Layout *****
• A List Apart ***
• A List Apart’s Flexible Layouts with CSS Positioning
• Glish.com CSS Layout Techniques
• Creating Liquid Layouts with Negative Margins (similar to our layout)
• Faux Columns: Column Stretches ***
• Brainjar’s CSS Positioning ***
• Two columns with color
• Mako’s CSS Positioning
• Toss Out Your Tables: CSS Is Your Scene
• Rich-In-Style Guide
• W3c’s Web Style Sheet Guide ***
• Jakob Nielsen’s Alertbox on CSS, HTML Designs and Accessibility
• Daily CSS Fun – Series of the same web page and the design changed daily for a month ***
• The Noodle Incident Tutorials on Boxes
• Maxdesign’s Colored Boxes and CSS
• Liquid CSS Layouts – Design Alternative to Table Based Websites***
• CSS Sketchbook
• Mandarin Design’s Boxes and Borders: Box Tips and Tricks
• Tantek Advanced CSS Examples
• The Nemisis Project – Collection of CSS Articles and Resources
• CSS Borders Design – Beauty in Simplicity
• CSS: Boxes and Page Layouts
• The Layout Reservoir
• Basics of Element Boxes, Margins, Padding, and Stuff
• DevLib Programming Resources on CSS
• CSS Border Image Text Box Styles – great examples
• CSS Tutorials from BigBaer.com
• The CSSShark Answers FAQs
• Websitetips.com – CSS Section of Resources and Links
• CSS Examples from W3 Schools ***
• Stopdesign’s Making the Absolute Relative
• ClevaTreva Designs’ Bug Proof CSS Style Sheet Generator – a must!*****

NOTE: As with all web pages, they are often in a state of evolution. Within a couple of months of producing these pages giving the specifications of our Website design, we made a few changes. Most of these were cosmetic, changing a background color or font. We’ll list these changes soon. In the interim, there is still a lot to learn from our web page styles no matter what they look like.

In 1999 it was official. Web pages were to be designed using an innovative combination of HTML pages to hold the structure of the web page and an attached Cascading Style Sheet (CSS) file to hold the presentation elements. For consistency, one style sheet could be linked to hundreds of HTML pages. Until this point, the layout design relied upon by most designers was the table, a grid layout resembling graph paper. While it did the job, it was clumsy, confining, code heavy, and easy to screw up. By going tableless with style sheets, designers entered a new realm of creativity.

In 2003, our site, Taking Your Camera on the Road, finally got on the CSS band wagon and we completely eliminated our tables layout. The results are incredible. Our pages are easy to update and maintain, we have greater control, and they load incredibly fast.

More specifically, the benefits of using style sheets are:

Faster Access to Content

The loading time for a web page is based upon several factors, most importantly on the size of the files coming into the user’s computer. When a visitor comes to a CSS supported site, the first page loads into their browser along with the style sheet. During the rest of their visit, only the html page loads as the style sheet is already in the memory, reducing the load capacity. This gives faster access to the content and speeds up the whole process.

Search Engines Get Content Faster

A search engine isn’t looking at your pretty code. It wants the data to fill its database and help people find your site. The more code it has to plow through to get to the content, the harder the search engine has to work. CSS reduces the code and allows the search engine to get to the meat of your page. Some search engines also give points for pages which are web standard compliant with style sheets, which helps you move up through the ranks.

Browsers Love It

The majority of Internet browsing software recognizes Cascading Style Sheets. Instead of designing a page to accommodate all the different types of browsers and computers (Netscape, Microsoft Internet Explorer, Opera, Macintosh, etc), compliance with web standards creates a uniform set of code recognized by all the programmers. Bold will be bold no matter which program you are using. Any code not recognized by a browser is ignored without crashing or scrambling the page. The designers save time, and browsers can interpret the page with less stress and faster speeds.

Designers Love It: Easy Update – Easy Maintenance

Using CSS, instead of plowing through a couple hundred lines of code, I can get right to the content for easy updating and changes. Separating the design from the form means working with less code, but also more precise code. With less presentation code within the HTML page, there is less chance of slipping and deleting a little letter here or there and ending up with a scrambled web page. The less fuss you have to spend to create your pages, the easier they are to update and maintain.

Greater Control Over Design

Instead of tediously changing all the code on every page, a major task as our site totals over 500 pages and growing, we can change the design of our pages from one file. Using style sheets also gives the designer more control over layout, positioning, fonts, colors, backgrounds, and other effects than ever before.

Accessibility: Looks Better to Non-Graphic Users

Almost a quarter of all Internet users have special software that allows them to use a page without the pretty layout or displayed to control the background, foreground, and text size, overriding the designer’s elements. This includes the blind, visually impaired, physically impaired, and no-nonsense users. Add to that number of users viewing web pages on handheld computers and cell phones, miniaturizing and scrambling your lovely layout. The simpler your page layout is when stripped of the presentation code, absent the style sheet, the easier they can access your page.

The Real Benefit They Don’t Tell You About

After a year with a web standard compliant Website, there is a benefit that no one seems to mention. For the HTML and CSS writer and designer, this benefit is the BEST part of having a tableless web page. When you make a goof in a table layout, things go screwy and you have to plow through tons of code to find the goof. With a CSS based design, every little glitch is almost immediately obvious. Miss an end tag for a division, everything is a mess from that point down. Miss an anchor tag and everything on your page becomes a link from that point on. The smallest glitch in the code is visible right away, giving you the clues to where the mistake began, making the job of HTML and CSS detective and problem solver fast and easy. In the graphic to the left, one span end tag was missing and everything below the “made easy” went screwy. Instantly, I knew where to start hunting. The more compliant your page is, honestly, the easier it is to maintain and spot those slips of the finger.

We’ve listed some links and resources below to help you better understand how HTML and CSS works. Our goal on this page is not to teach you HTML or CSS but to show off what we’ve come up with. The Web is a wonderful place to learn and exchange information. We borrowed many of our ideas from other people, and then begged others to help us create and fix what we wanted to design when we couldn’t find similar code. Currently, HTML and CSS designed code is not protected by copyright or trademark. The results are, but the underlying code is open source. When you find something you like, copy the code, but add in your own content, and see how it works for you. This means you can’t copy graphics, but you can copy colors, layout, and text styles. Then make them your own because no one likes a plagiarizer.

CSS For Beginners

• CSS: No Crap Primer
• CSS101: Beginners Course
• HTML Dog CSS Beginners Guide
• Tutorials: What On Earth is CSS?
• CSS From the Ground Up
• CSS Generator – Do It Yourself Starter CSS
• A Roadmap to Standards
• Selectoracle – Enter CSS Style Sheet and All is Explained *****
• NWE Help’s CSS DIV Instead of Tables ***
• Imaginary World’s Internet Brain CSS Layout Templates
• Adding A Touch of Style ***
• The Basics of Positioning
• W3 Organization’s School *****
• NYPL Style Guide
• Web Developer’s Virtual Library of Authoring Tutorials
• Webmonkey, The Web Developer’s Resource
• CodeMoose Tutorials and References on CSS
• Pageresource.com – Web Development Tutorial and Information Site

CSS and Web Page Design Discussion Groups

• CSS Discussion Group
• Web Standards Group List
• CSS Creator Forum
• CSS -Discuss List
• Babble List
• Web Design-l.com
• The CSS-Discuss Wiki

Our articles on web page design cover a wide range of topics, all focused on designing web pages with Cascading Style Sheets (CSS). In this series, we focus on designing the smaller elements, the design elements found on a web page. You can find even more aggressive and unique designs in our CSS Experiments that might suit your web page design. Let’s start this section with fonts, text, links, and headings, the content design elements.

Fonts

Many of our designs began as CSS experiments, some trial and error before we found out what worked for us. So we are sharing with you some of the techniques that go into creating these pages and our CSS, HTML, and web page design elements.

We like to keep our site content simple and clean with good use of space. More importantly, our site is designed to be as user-friendly and accessible as possible. We want our site viewed by everyone and everything, from the blind and visually impaired to small handheld computer screens. Therefore, we set a base font and the rest of our fonts are set by percentage or fraction, allowing the user to override our font-sizes to accommodate their viewing needs.

Use also use a variety of similar fonts in our font-family list to increase the odds of the font we prefer showing up on the page. Fonts are only visible when the user has those fonts installed upon his or her computer. We always include a generic font reference to serif or sans-serif to ensure a specific look if not a specific font as a fallback.

This is an example of our paragraph font.

Headings

For the most part, our headings are simple and consistent throughout our site. As nature photographers, it was important that we present a very simple background and text format so our photographs would jump off the page with color and artistic and dramatic license. Therefore, we kept to a simple blue and white theme. Yet, as simple as the design is, within that theme there are shades of blue to add a little more impact.

Headline One

Headline Two

Headline Four

We decided to feature a bit of jazz in our H3 heading design. We use the H3 selector frequently in our articles to separate content into easily consumable sections. The H3 style sheet rules set the color and style of the text, then adds a line that goes across the page. At the end of the line along the right margin is a small photograph of ours. To add some variety, we change the picture and the color of the horizontal line dependent upon the seasons.

Spring

Summer

Summer Two

Fall

Winter

Headings – Links and Resources

• Rubber Headers **
• Using Background-Image to Replace Text
• Designing 50+ Web Pages: 50+ Headings
• Desilva’s Headings Side by Side
• Making Headlines with Cascading Style Sheets
• HTMLDog’s Headings
• About.com’s Web Design: HTML and Headings (Technical Specifications)

Text Characteristics

Throughout a web page there will be text elements you want to look a certain way. This includes links, but we’ll get to those in a minute. Specifically, these are the occassional bit of color or an impact of bold or italic, or a positioning move to make the text look the way you want it to look. Here are a few of ours:

This is underlined

This is italic

This is bold

This is code or keyboard style and it is an inline code which can sit inside of regular text.

 This is pre, another form of code or keyboard style but it follows the formatting on the HTML sheet and doesn't wrap or sit inline with the regular text. 

Special Text Classes

There are times when you want a certain line of text to stand out and look different from the rest, or a box border to change from blue to green. We’ve created a range of class selectors which change the color of all the selectors within the class. We use this occassionally to provide emphasis.

Everything in this line is blue.

This is Heading Two, normally blue forced to be red

This is the code style which is now green.

This is a combination of darkgreen color and medium font size.

(Note: We used a shorthand combination of two classes in this example. You can find more about this in our section on CSS shortcuts and shorthand.)

 This is pre font style but the color is forced to be navy. 

There are times when we want something to be forced to be bold even though it isn’t normally, so we have a class selector set to be bold.

Font-Size

When the design calls for it, we will change the size of the fonts. Rather than using forced font sizes, such as 14pt, we use relative sizes based upon the default font size which is set at 1em, approximately 12pt. The variable relative font size is represented by a percentage or fraction of the default. Using relative font sizes allows users with their own style sheets to overwrite ours for their special needs, and it allows flexibility for those who require larger or smaller fonts for better reading, controlled by the Internet browser (From the menu, VIEW, FONT-SIZE).

There are various ways to use these special sized fonts. They can be set in classes to be used with divisons or spans. Here is an example of each:

Let’s look at the specific CSS rules for a few of our special font sizes.

This is tiny example of our paragraph font.

This is x-small example of our paragraph font.

This is small example of our paragraph font.

This is medium example of our paragraph font.

This is large example of our paragraph font.

This is x-large example of our paragraph font.

This is xx-large example of our paragraph font.

This is big example of our paragraph font.

Resources for Fonts and Text

Font Sizes

• W3c’s Care With Font Size
• CSS A List Apart: Size Matters
• BIG BAER Explains CSS Font-Size
• MIS: Using Relative Font Sizes
• WebDevRes: CSS Font Size Control and Recommendations

Font and Text Characteristics

• The Noodle Incident’s CSS and Text
• W3 Schools: CSS Fonts
• About.com’s Web Design (CSS): What is a Font
• The Noodle Incident’s Tutorial on Typography
• HTMLHelp’s Font Properties
• HTML Source: Text Formating
• University of Minnesota Creative Standards Guide: Text and Fonts

Font Design Elements and Techniques

• About.com’s Web Design: How Many Fonts are Too Many
• Web Page Design for Designers: Typography
• Blogdrive’s CSS Definitions and Examples
• Cascading Style Sheets Interactive Tutorial for Beginners – Fonts and Text
• Pixel Fonts

Font Surveys and Usage: Choosing Fonts

• Codestyle’s Windows Web Font Survey Results
• Codestyle’s Font Survey For All Platforms
• Web Style Guide: Typefaces

Designing Our Links

We wanted our links to blend into the content of the page while still standing out. But we also wanted them to be clearly recognized as links when the mouse hovers over the link.

Move over the link to see it in action – http://www.cameraontheroad.com/index.html

External Links

We feature several thousand links to sites away from our own. Part of compliance with web and accessibility standards is designating which links are internal and which are external. External links will take the user away from your site. Because we have so many external links as part of the overall flow of our articles, we decided to clearly mark all external links with a dotted blue line underneath the link, a technique becoming very popular among web designers. Our policy states that these links will open in a new window, leaving our article still accessible to the user so they can continue to read on and not let the flow of the article be lost while still accessing the external information.

Because we set the overall look of the links previously, the external class rule merely adds the modification of a bottom dotted border for both the link and visited link.

This is an example of an external link to http://www.cnn.com, the popular news site.

Designing Our Footer Links

Our footer features some interesting links and hovers, adding a little drama to our page design. As mentioned, we want our links to stand out when the mouse passes over them (hover) but we wanted something a little different with our footer.

The hover links within our content feature a light blue color with a top and bottom border of dark blue (Move the mouse over any links in this paragraph to see the design). We changed this in our footer to create the same light blue background of color but with dark blue borders on the left and right sides of each hover link instead of the top and bottom. It is still consistent but different, adding a bit of fun to the design.

This is the HTML structure for the footer without our links.

This is the HTML structure for the footer with our footer links.

Note: Notice the references to accesskey. These are the tab order in which someone can tab through a page to the most important links. These were left in to remind you to create accessible pages to comply with web standards. The order of the accesskeys is based upon your own design.

Resources About Links

• Jakob Nielsen’s Alertbox: Change the Color of Visited Links **
• Jakob Nielsen’s Alertbox: Guide for Visualizing Links
• Accessify’s List-o-Matic – Link List Wizard
• Links: No Underline
• The impact of links and link text on search engine placement
• Colly Logic’s Question Time: Visited Links
• Should visited links get distinctive styling? ***
• Same Link – Different Colors
• Desilva’s CSS Links
• CSS and the Amazing Technicolor Anchors
• Cascading Style Sheets Interactive Tutorial for Beginners – Links
• HTMLSource: Basic Links ***
• W3 Schools: HTML Links
• Simon Willison’s Weblog: Fun With Links
• WebDevRes: Link Colors by Section
• Westciv’s Complete CSS Guide: Link Pseudo Class Selectors
• Jessett.com’s Link Styles
• Spoono’s Link Designs
• Kali’s Web Shoppe Text and Link Rollovers
• About.com’s Web Design: Styling Links with CSS
• eei.press’s It’s All In The Links: Readying Publications for the Web
• Links Want to Be Links
• The Search for the Missing Link
• Websitetips’ CSS and Links

Want More?

In our first section, we examined the innovative layout that we developed for our web pages. In the next section, we tackle the graphic fun of lists and boxes to add drama to your design. Then, we show you some of the little details we use to make our pages look special including the use of invisible text, forced white space, floats, and dealing with Internet browser software bugs. Our last section on CSS and HTML is on the tips and tricks we learned while changing and updating these pages.

Web pages are not just books on the Internet. Nor are they billboards. In general, they are informational and educational papers and brochures to help people learn and gather information to make decisions. The more precise the presention of the information, the faster the user can get to the information. Lists are excellent ways to present information in a quick and easy to read style. Highlighted container boxes within a page contain special information related to the content but distinct or worth calling attention to itself. Here are some examples of our lists and boxes.

Our Web Page Design Lists

Lists can be simple or fancy. We choose simple and clean. We have several different kinds of lists, including special list designs to fit within our various boxes and you will find those examples in our boxes section.

Our Basic List

This is our standard list found throughout our pages within the content. We’ve created a nested list with three levels. We mostly use only level one, but in our Links and Resources section of our site, we feature nested lists three levels deep.

• This is Item One
• This is Item Two
• This is Item Three
  • This is Item Three A
  • This is Item Three B
    • This is Item Three B-1
    • This is Item Three B-2
  • This is Item Three C
• This is Item Four
• This is Item Five

NOTE: Nested lists require a little attention to detail. Notice the lack of an end </li> tag on two lines in the HTML structure above. They are there, but they are listed at the end of each sub-list. With the new web standards, every opening tag requires an end tag, and nested lists require end tags at the end of the nesting section. To help you follow this, we’ve highlighted the list end tags in red.

When Little Sized Lists Are Needed: The Small List

There are times when we need to have a smaller graphic image for our list because the font within that section is smaller. We don’t need a font size specification in the style sheet rule as the small class has already been identified as 70% of the default size. We simply need to define the graphic image of the list style.

• This is Item One
• This is Item Two
• This is Item Three

Our Definition List

We started using definition lists recently to create a more sophisticated layout list that involve more than a line of text. A definition list can be designed in several ways but it basically is used as a glossary or dictionary layout. A word or phrase is set aside and then next to or below it is the definition. Here is our layout for our definition lists which are used on all of our main section pages.

This Is The Word Or Phrase

This is the definition or explanation of the word or phrase.

Definition List Add Style

We like the bold title and boxy element for a different style of list on our pages. We use them on all of our section title pages and throughout our Learning Zone to help make our points.

Resources about CSS and HTML Lists

• W3.org’s CSS-2 – Generated Content, Automatic Numbering, and Lists
• Taming Lists
• HTML Source: Lists
• Cascading Style Sheets Interactive Tutorial for Beginners: Lists
• Listamatic: One List, Many Options
• Max Design’s Definition lists – Misused or Misunderstood?
• Jessett.com’s Images as Bullet Points
• Sensually Styled Definition Lists
• Simplebits’ Style Nested Lists

Our Web Page Design Boxes

Our Website features four main box styles for holding highlighted content separate from the rest of the page’s content. We call them plain, tip, blue, and sidebar. These are often referred to as pull-quotes, sidebars, or tip boxes. They are used to highlight quotes, tips, or notes that related to the content of the article and need special attention paid to them.

When we shifted our thinking from tables grid layout to CSS layouts, we learned that every selector was a container. Since everything fit inside a container, and there could be containers within containers, the only problem was figuring out how to make the containers stay within their parent containers and work with the other containers around them.

Once that idea was absorbed, the freedom in design could cut loose. Here are some of our boxes (containers within containers) that we use starting with the most basic to more sophisticated and dramatic.

Plain Boxes

We have three types of plain boxes: right, left, and wide. The right and left boxes sit on the right and left side of the page with the content flowing around them. The wide box sits on the left side of the page and stretches the width of the page and the text flows from above to below but not around it. This box allows us to put several images next to each other with a greater amount of information to accompany the images. We use the wide box in our Learning Zone a lot.

You may notice a strange code at the very beginning of the example. It is html > body. This is a hack or bug fix for Microsoft Internet Explorer which adds up margins differently than other browsers. This code sets the margin for the box within the body of the document rather than the container it resides within which helps to align it properly within the flow of the document. Otherwise the box can overlap the text and surrounding content.

These three boxes have the same code save for a couple of minor differences. Here is the code for the right box and below we will highlight the different code between the three boxes.

While the HTML structure for the left box is the same, we changed the CSS declarations to change the float from right to left and adjusted the hack accordingly.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quam tortor, pulvinar ut, luctus vel, vestibulum id, wisi. Maecenas molestie sollicitudin velit. Duis bibendum elit vitae dui. Fusce feugiat, nunc quis euismod rutrum, neque mauris luctus tortor, ut tempus tortor orci quis mauris. Vestibulum sollicitudin pede vitae erat. Aenean purus velit, posuere non, auctor ut, hendrerit laoreet, wisi. Aliquam erat volutpat. Maecenas tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut pede quam, tincidunt in, scelerisque id, gravida eget, mauris. Vivamus eleifend hendrerit diam. Aenean sagittis, sapien in pellentesque dapibus, justo erat semper augue, porta condimentum lectus purus in justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque gravida neque sollicitudin lorem vulputate gravida. Praesent sollicitudin elementum elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Next is our wide box design. We’ve removed the float and stretch the width across the width of the page. The content text does not move around the sides of the box but is above it and then continues below the box.

We use the wide box a lot in our Learning Zone to showcase a point or example we need to make. As nature photographers, this often involves showcasing comparison photographs, showing what to do and what not to do, or similar images to make our point. We’ve included a graphic example of this technique to the right.

Plain Boxes – Titles, Headings, and Lists

Featured inside these plain boxes may be titles and headings and lists. They are the same for all three plain boxes, creating a uniform look throughout the Website.

Using CSS Style Sheets, if we want to change the look and feel of our text boxes, especially the heading, titles, and fonts, we can easily change the main linked style sheet and the change would be felt across the entire Website. The simpler the design and structure of your boxes, the easier they are to mainstain.

Tip Box

The tip box is a simple box which features three sections, the container, the title, and the text body. The container is outlined in blue with a dividing line between the title and the text. The title is centered in bold with forced uppercase letters and a wider letter spacing than normal to make it more interesting.

The layout is simple and can be easily changed to have colored backgrounds and borders. The title element can have a solid background color or image, as can the text body element. The structure is simple, it’s up to you to create your own unique style.

To add a list in our tip box, we added the following list code:

The HTML for this code is:

Blue Box

One of our favorite boxes is dramatic and attention getting. We call it the blue box as it features a two-toned blue color scheme with the title being darker and extending and overlapping the lighter blue box underneath. Into this box we put pull-quotes and information we really want to be noticed.

Like most web designers, we love to “borrow” design ideas. This particular look was inspired by Standardice in their Mimicking Magazines Experiment. We liked the look of the “Softer padding for the marginalized” box and did some tweaking to create our blue box.

The box elements consist of the outside container ( boxblue), the title ( bluetitle), a span within the title ( bluetitle span}
, the body ( bluebody) and a span within the body ( bluebody span). The two spans are inline modifications to those elements. The title span creates the dark blue background and allows the background to appear to extend outside the width of the main box. The title rule actually creates a fake “top” to the box underneath, which enhances the effect of the “floating off-sides” title.

The span within the bluebody text forces the beginning line of the body text to be in small caps and bold. This technique accentuates the opening paragraph and adds a bit of drama to the overall look. With a blue background, our blue links were lost in the background, so we changed the color of the links within the box so they would be visible.

The list style is the same as the tip box list style:

The HTML for the blue box is:

Sidebar Boxes

We feature two different container boxes within our sidebar. The first ones we call Connect the Dots and the second ones are tip boxes that have been adjusted to fit within the narrow margins of the sidebar. The Connect the Dots boxes are unique from the rest of our boxes visually. They are not enclosed but rather framed with a blue line below the title and along the right side. They are designed specifically to hold lists of links highlighted by a small silver ball as a bullet.

In the previous boxes, we established their division sets as classes which confined the content. Here, we simply set a class statement and then redesigned how the paragraph ( <p>) and list ( <ul>, <li>) descendent selectors should look under the dots class. The H5 header is followed by the paragraph, if there is some text to be had, and then the list codes to create the Connect the Dots look. This keeps the HTML elements code and structure simple and easy to manage.

These are examples of the container boxes we use on our web pages. In our CSS Fun, Tips and Tricks article, we come up with a wide variety of different looks for container boxes to help you learn more about the power of CSS.

Creating Boxes – Links and Resources

• CSS Sketchbook
• Mandarin Design’s Boxes and Borders: Box Tips and Tricks
• CSS Borders Design – Beauty in Simplicity
• CSS: Boxes and Page Layouts
• Basics of Element Boxes, Margins, Padding, and Stuff
• CSS Border Image Text Box Styles – great examples
• CSS Layout Examples from W3 Schools
• MaxDesign Presentations and Articles ***
• CSS Positioning
• How To Clear Floats Without Structural Markup

We’ve looked at some of the simple scripts used within our web page design. Now we will look at some of the more complex scripts we use to create a more interactive and animated web page design and layout.

[Note: We don’t use most of these javascripts any more, but we did for several years, so we enjoy showing them off, hoping others can use them with their web page designs and layout. Since moving to WordPress, most of these features are now handled by PHP and WordPress Plugins.]

Message of the Day Javascript

The JavaScript Source is a major source of javascripts for us. We love the serious way they take javascripts, offering a wide range for all needs. One of their javascripts sets up an array, like a small database of possiblities, and then posts that message so it changes every day, a new message every day, until the end of the month when it starts the cycle over. We use this script in a variety of ways.

In our Connect the Dots sidebar, the top item on the list changes every day so a different article is featured. At the bottom of our sidebar is a tip of the day on travel or nature photography. Both of these use the same javascript with different information. We use another similar javascript that presents rotating information with every refresh of the screen. We’ll get to that one in a moment.

The basic javascript is shown first, and then we’ve included a couple of examples of how we use it.

In the example below, we use this javascript to highlight one article a day as the featured article. Notice how left slashes were used before every quote mark in the web page address. This causes the javascript to ignore the quote marks and simply “write” them to the screen as any other text content. We only listed part of our version of the script to give you an idea of how we use it.

And we use this javascript in our HTML web page like this:

In this version of the same script, we feature a tip a day for our sidebar. The tips consist of a couple of paragraphs of information and the line breaks inside of the paragraphs are created by using forced line breaks (<br>) to create the space. We use email and web page addresses inside of these messages, too. Be sure and add a left slash before every quote mark in these addresses. At the bottom of the script is the HTML layout that the script writes to the screen and displays the content of the message. It uses the javascript command document.write which writes the content to the screen, including the HTML tags.

We call out the javascript which includes our HTML formating like this:

Quote of the Moment Javascript

Similar to the message of the day, we also use a javascript which changes the message with every screen refresh. Near the bottom of our sidebar we feature an image of the day along with quotes which change with every page or screen refresh. The Javascript works on a variable which randomly picks a number which results in the posting of a random quote. The number of quotes within your array is up to you. We have over 100 quotes in our javascript but you can have less.

We’ve included the simple empty version of the quote of the moment javascript along with a sample of our own layout. The quotes within the array have a few interesting features that need to be taken into consideration.

• All closing tags require a left slash such as <i>italic word</i> would be <i>italic word<\/i>
• All semi-colons require a left slash such as “The earth does not belong to man\; man belongs to the earth.”
• All apostrophes (‘) must be represented with its extended character code such as “an insect’s wings” should be “an insect&#39;s wings”
• Place the number of quotes plus one in the following line (replace the ten) of the javascript: var quote= new makeArray (10);

To see this javascript in action, check out our sidebar’s “The Art of Nature” and hit the F5 key or click the refresh or reload button on the toolbar of your browser to reload the page and watch the quotes change each time.

This is our example of how we use our quote of the moment javascript. Pay attention to the use of HTML opening and closing tags, semi-colons and other content within the quotes.

Image of the Day Javascript

As nature photographers, we never miss an opportunity to show off our beautiful nature images. Our image of the day javascript gives us the chance to showcase seven different images cycling every day over a week. Every few months we change these seven images to showcase more beautiful nature photography. We’ve combined these with our quote of the moment javascript in our “The Art of Nature” section of our sidebar.

The script itself is a fairly simple array of seven images on a list. A document.write function places one of these image files into the layout on our page. Using style codes, we’ve created a nice presentation design for the images and the quote below.

There are a few constraints to the javascript.

• The images must sit in the same directory as designated with the img src location within the document.write layout.
• The images must be approximately the same size to fit within the designed container and space allowed, though with less constraint on the container’s design, there could be some size variance.

HTML to Javascript: Content as a Javascript

We use another technique involving javascripts with the help of a great program from Byte-size Software called Javascript Maker. In places where we have redundant text and code on every page within our Website, like the sidebar links, Javascript Maker turns that HTML into javascript that “writes” the information to the page so it is visible on the screen. If I need to make a change in the content, instead of changing the information on a couple hundred web pages, I simply change the script file and when the javascript runs, the updated information is there. Anything that makes for less work is welcome here.

Javascript Maker takes your HTML file and turns it into javascript using the document.write function. You can do this yourself manually, but it is best to learn a bit about javascript programing and code writing before stepping into this. Using Javascript Maker takes seconds to change HTML into javascript.

The following is a sample of our links for our Toshi’s Tails web pages which include articles about taking your pet on the road traveling.

The following is the same HTML information written as javascript.

Consolidating Javascripts – Optimization

A web page’s size is based upon the sum of the HTML file, the CSS file, all graphics and images embedded in the HTML and CSS file, and all javascripts called out from within the HTML file. The more javascripts loading, the longer the entire page takes to load.

Many of the javascripts shown are on all of our pages all the time. Instead of having individual javascript loading, we’ve combined most of them into a single file. With fewer files loading with our web page, we can speed up the time it takes for a web page’s content to pop into view.

Besides reducing the number of javascripts loading, and shrinking the file sizes, if you use Website traffic and statistic analyzing tools like Webanalyzer or Analog, there is a section that lists the most popular files accessed. The more javascripts used, the more those files will be at the top of your most accessed lists, not giving you the real information about which web pages are being accessed the most. By limiting the number of javascript files embedded in your web pages, hopefully you will start to see more HTML pages come up on the URL list over time.

Here are a few rules to keep in mind as you combine your javascripts into a single file.

• The names of each javascript ( function name()) must be unique within that javascrpt.
• Keep window event handlers to a minimum so they don’t conflict with each other.
• Keep the javascript source and copyright information together with each javascript to help you track down the resource if a problem occurs later.

How Combining Javascript Files Works

To begin the process of combining javascript files into one file, copy and paste each script into a single file and check each one for repeated names or call-outs (arrays, etc.). Make sure each one is unique to itself.

Separate each script with a comment that designates the next script’s name and action, source and copyright information.

When completed, save the file as a javascript file and set the script call-out to load from within the head of your web page.

To initiate the specific javascript from within the “grouped.js” file within your document, enter the javascript function call-out like these examples:

Here is a sample of part of one of our javascripts which uses a combination of javascripts in a single file.

Want To Know More About Javascripts?

As you’ve seen from our few examples, javascripts are quite capable little programs that help animate and complement a web page. If you would like to know more about javascripts, writing, editing, creating, or just using them, or about how to make them benefit you on your Website, we’ve included a list of helful resources and links about javascripts.

Links and Resources for Javascripts

• Websiteoptimizaton’s Optimizing JavaScript for Download Speed – Includes Resources ****
• BrainJar’s Free Online Javascript Optimizer – Instructions *****
• BrainJar’s Free Online Javascript Optimizer *****
• Saltstorm’s Free Javascript Optimizer called ESC (ECMAScript Cruncher) ***
• JSCruncher Pro
• Developer.com’s Javascripts
• Webdeveloper’s Javascripts
• Javascripts.com ****
• The JavaScript Source *****
• Dynamic Drive ****
• Code House

Javascripts are incredibly useful tools for web designers. In the right hands they can add usefulness and class to a web page design. In the wrong hands, they can be used to dance, sparkle, wiggle, and ballistically assault a viewer.

Basically, javascripts are programs that run from within a web site. They can be simple such as the one we use to show the date the file was last updated, or complex, calculating massive data information and returning an answer, such as those found on our Travel Tools pages which calculate distance between points, convert measurements, and more. They can also make things happen on the screen which some web designers think is entertaining to their viewers. Sometimes they are, and sometimes they aren’t. Examples of these include taking over your mouse pointer so that it becomes a butterfly or a butterfly chases it across the screen. Or making it “snow” on the web page. These can be great fun when used appropriately.

We’d like to share with you a few of our favorite javascripts and a program we use to write the javascripts which create our side bar menus. We consider these more in the “useful” area of web design rather than the sparkly and pretty. For those into the pretty javascripts, we’ve included some links and resources to help you find plenty of javascripts to keep you busy for a long time.

[Note: With our new move to WordPress, we aren’t using most of these javascripts any more as many of these functions are built into the program. Still, they are wonderful tools.]

Javascripts are currently recognized by most web browsers, though they are not readily accepted by handheld media, web TV and other new media types. Web page reader programs tend to skip through javascripts, though some try to make sense of them, if there is sense to be had of the javascript’s code.

If you do use scripts for critical design or information elements on your web page, make sure you include alternative content in case the javascript doesn’t work. An example would be:

Our javascripts come from a variety of sources but we mostly enjoy the freeware javascripts from Javascripts.com, Dynamic Drive, and The JavaScript Source.

Javascripts – Links and Resources

• Javascripts.com ****
• The JavaScript Source *****
• Dynamic Drive ****
• Code House
• Javascript 2
• Web Page Javascripts
• Freeware Java
• Timothy’s Javascripts
• Crays Javascript
• Javascript-page
• A1 Javascripts
• AC Javascripts
• Chami.com
• Developer.com’s Javascripts
• Webdeveloper’s Javascripts
• 24fun.com Java Scripts
• Script Asylum
• Javaside.com

Simple and Powerful Javascript Tools

We have a few javascripts we enjoy using on our web pages to add a bit of splash and provide useful tools to help us create our web page design.

Page Update Javascript

We use this javascript on every page. Set below the footer on every page, it reports the date of the file, representing the last time the file was saved. While this isn’t a perfect scorecard for when the page was honestly updated but rather saved to disk, it does help us find out which pages might not have been uploaded with fixes and repairs. And if there have been no changes to the web page’s code or structure, it can give us an idea of how long it has been since we checked that page out or made a change in it.

New and Updated Javascript

We are constantly adding new articles and updating our articles. Keeping track of what is new and updated is hard work with over 500 web pages on our site. This javascript checks the “expiration” date listed as a variable within it and if the date is still “fresh”, it shows the graphic for “New” or “Updated”. If it has expired, it will stop the graphic showing and disappear. A very helpful javascript.

We use the exact same code with two different graphics. We’ve added a class statement to the image to make sure there are no margins or paddings or borders set around the graphic so it fits on the line. We set the expiration date on the call out for the javascript.

We have a lot of viewers who are visually impaired and “older” and they don’t like things that flash and sparkle on a web page. Lucky us, they are vocal in their complaints and after a couple of email requests, we redesigned our animated NEW and UPDATED graphics to only cycle 50 times or less through their rotating flashes. It usually ends within a minute. To see it in action, refresh the page by hitting REFRESH from the menu or the F5 key and watch the animated graphics until they stop. The UPDATED graphic “revolves” slower so it takes longer than the NEW to stop its animation.

No Right Click on Images Javascript

After ages of fighting the paranoia that comes with displaying images on Websites (theft and copyright violations), I found this great javascript from Dynamic Drive Javascripts that allows the user to easily right-click all over our pages but NOT right-click on our images. Excellent!!

As a power Internet user, I depend upon the right-click menu to get around, print, open links, and do a variety of things that come from the right-click menu on web pages. The “no right click” javascripts I found before turned off all usage of the right-click menu, limiting this powerful tool on our own Website. This great “no right click image” javascript recognizes when the user is right-clicking over an image and when they are right-clicking anywhere else. This detection process puts a restriction on our images from easily being stolen, and returns the right click menu to its full capabilities. I love it.

To see this script in action, right click anywhere on the screen and the traditional right click menu will appear if your operating system and browser supports it. Right click over the image to the left and see what happens. [ Editor’s Note: Yes, I, a female, took that picture. Want to know more? Left click the photograph.]

Copyright Javascript

As nature photographers and editorial writers, the issue of copyrights is very important to us. Maintaining all these copyright dates from year to year is a pain. So why not take advantage of a useful javascript tool from A Touch of Jamaica to make the job easier. The javascript lists the starting year and then checks to see what the system date is and puts the current year into the variable.

Unframe Us!! Javascript

While I understand the need for Websites to include their top frame when a visitor links to our site from theirs, we actually can’t stand it. It messes with the design and isn’t user friendly. So we came up with a javascript that removes frames that arrive when a visitor comes to our site.

Want More?

In part two of a look at our javascripts, we tackle the more sophisticated javascripts within our pages including the quote of the moment and image of the day, and give you information on how to streamline your web page redundant code and combine javascript files into one single file for faster loading.

Part of the work involved in creating an “accessible” website includes developing Cascading Style Sheet (CSS) media references to help different media types, such as handheld computers, web page readers, and printers, handle our web page design elements.

Below are some resources to get you familiar with how CSS media references work, and then we give you specific examples of how we use them in our web pages and web page design.

CSS Media Types – Links and Resources

• W3.org’s CSS-2 Media Reference
• Code Style Media Monitor (projection, print, etc)
• The W3C CSS2 recommendation, Section 7: Media types

Web Pages Going to Print

Web page designers spend so much time designing for the screen, they often forget that people still want to print them out and read them on a piece of paper. People just can’t seem to break the paper habit. So designers need to take a few minutes to think about how they want their beautiful web page design to print.

Deciding how your web page design will print means examining all the graphic elements and deciding which ones are critical to the printed presentation, and which ones will look wierd or interfere with the reader’s ability to read the page.

We decided that our sidebar, since it mainly featured links to other pages within our site, a diffcult thing to click on a piece of paper, wasn’t important to the final printed product, so we choose to eliminate it with a display: none in our print media style sheet. Other elements that didn’t need to be “read” on paper were our advertising and our bottom divisions.

Then we made a few design changes so the web page would print nicely, allowing for easy reading. We changed our links so they would have an underline and be boldly represented. We also increased the size of our header text since it is small on the screen, enhanced by a large background image of our logo, so it can be large and easily read when printed. We also changed the height of the header from 100px to 30px. Why waste paper on white space?

One of the most challenging aspects of designing web pages for printing is the way a printer handles a graphic image from a web page. If the image is close to the bottom margin, the printer may just cut the image in half or even more instead of moving the image above or below the physical page break. It can do the same thing with headings, blockquotes, tables, and lists. Not all browsers recognize the declarations for page-break-before, page-break-after, and page-break-inside, though more are adding it to their software. What these declarations do is command the browser to recognize a page break before or after the specific tag and respond according to the declaration’s instructions. For example, we don’t want our headings separated from our text, so we’ve set the page-break-after and the page-break-inside to avoid. This should tell the browser to avoid making a break between the heading and its text. It doesn’t work for every browser, but we leave it in with hope.

To see how our web pages will print, with and without printing a page, select from the browser menu FILE, PRINT PREVIEW. This will allow you to “see” the page before it is printed to see the changes in the design in preparation for printing.

CSS Print Media

• Going to Print by Eric Meyer
• Kissing Print Versions of Pages Goodbye by Lachlan Cannon
• Printing With Style by Lachlan Cannon
• Printing Web Pages by CodeBitch
• Zeldman.com’s Essentials: Printer Friendly
• A List Apart’s CSS Design: Going to Print
• Evolt.org’s How good Does Your Web Site Look on Paper
• The Page-Break-Inside Property
• Killersites.com’s Making Web Pages Printable Using CSS

CSS and Handheld Computer Media

The category of handheld computers aren’t limited to PDA (Personal Device Assistant) computers. These can include many of the new cell phones with built-in web browsing capabilities. Handheld media takes your computer screen designed web page and squishes it down to the tiny screen.

Currently, there are few standards for handheld media style sheets because the web browsing software and hardware on handheld computers isn’t very stable. It is still an evolving market. In the early days, the handheld computers had little memory and even less processing power so they couldn’t handle much in the way of graphics. Today they are packing the power and speed into these little computers and their ability to handle graphics and web page designs are ever increasing.

If you design your HTML and CSS for total accessibility, with the ability to be easily read by screen readers, Linux-style web browsers, and without stylesheets, then you are already a step ahead on designing for the small screen.

Designing for screen sizes of 160×160 small to the larger 320×480 “stretch displays isn’t easy. Should the design “shrinkage” be the responsiblity of the PDA software or of the web page designer? Well, it’s a little of both. Handheld computers are moving fast into the realm of laptop quality, but they are still lagging. So the web page designer has to help them along a little.

In considering our handheld media responsiblities in our style sheet, we choose to let some design elements go. We removed the sidebar with a display: none and soon the advertising joined them. With the sidebar gone, we changed the alignment on the footer back to the left so it wouldn’t be shoved off the screen to the right. We reduced the margins on our content container to zero so as much as possible would fit into the tiny screen. The rest, because of our web standards compliance design, can literally take care of itself. We have some test examples of what our web page may look like on different computers and handheld media, as well as how other specialized software would view our page.

The style codes for the handheld media could go into our main style sheet, but we choose to have it be separate in its own style sheet. Some browsers only load the appropriate style sheet as it is needed, so having it separate allows everything else to load faster. We grouped our print, handheld and aural medias together. The link in our HTML header is:

Handhelds, Cell Phones, and Small Screens – Links and Resources

• WebMonkey’s The End-All Guide to Small-Screen Web-Dev
• All Handhelds on Deck
• WebMonkey’s WML – Wireless Markup Language
• Open Mobile Alliance Organization
• Guide to CSS2 Support in PDA/Handheld Browsers
• pawgo.com’s Handheld Internet 101
• Pcman’s Free WAP Tools and Resources (WML/WAP Page Emulator)****
• How Can I Tell HTML Browsers from WML (Wireless) Browsers
• The Wireless FAQ (WAP, WML)
• W3C Mobile Access – Seamless Web Access From Mobile Devices
• W3C Mobile Access Activity Statement
• CSS Mobile Profile Test Suite
• W3C CSS Mobile Profile 1.0
• W3C HTML 4 Specs on Mobility – Handheld
• Open Mobile Alliance for the Mobile Services Market
• Web Design for Mobility – Handheld, PDA, etc.

The Hills Are Alive With the Sound of…
Our Web Page Talking?

Yes, our web page talks. Doesn’t yours? Well, everyone’s web page should talk and it should speak well for them.

Actually, our web page does talk. It doesn’t use Cyberbuddy or Microsoft Agent to talk to you, but it is also designed to accomodate those web page users who depend upon web page readers to “hear” web pages.

We stuck to a standard aural media with a man reading the page. I’d like to have it be a woman, but none of the women’s voices we “heard” sounded nice at all, so we stuck with good ole Paul to be our reading voice.

The changes we made to the aural media file were very minor. Since we rely heavily upon our H3 heading, we increased the pitch-range from 70 to 80 to add accent to that heading, and lowered the H2 heading pitch-range to 70 to make a difference in tone. We also added our invisible class to the aural media and set it to display: none in the hopes that this would further help to ignore the content set to invisible since it is boring and unintelligable php code.

There are a variety of “voice” style designs available on the web and we’ve included some links and resources below to help you design your own talking web page.

Access – Speech

• An Introduction to Speech-Access Realities for Interested Sighted Internauts
• EmacSpeak
• Introduction to the Voice, Your Aural Font – CSS Tutorial
• Aural style sheets