Design and Implementation Principles
Web Standards/Compliance/Compatibility
"Web standards" describes a design philosophy that strives for accessibility, transportability, and cross-browser compatibility. The crux of it is the separation of content and presentation (see CSS, below), adhering to guidelines defined by the World Wide Web Consortium (W3C)
Many designers complain about how difficult it is to work around Microsoft's Internet Explorer (IE)'s many "quirks" (though they're a member of W3C, their browser does not comply with the specifications in many areas). At EON Webware, we prefer to keep things simple enough that IE's oddities do not pose a serious problem. When a problem does rear its head, it may take extra time to deal with IE, but since 90% of your visitors are likely using this browser, we feel it's the right thing to do.
Using accessibility standards and the power of CSS (see below), a site should be useful and navigable whether the visitor is using a text reader, a Macintosh, a flashy new browser, or simply the usual IE on a Windows PC.
CSS
Cascading Style Sheets are the principal tool for adhering to current Web standards and for making your site beautiful, easily maintainable, and portable.
Without going into great detail, CSS documents are where you control the appearance of your pages. The actual HTML document, such as this page you are looking at right now, should only contain content: words, necessary images. There should only be simple markup for headlines, lists, paragraphs, occasionally a table if necessary for tabular data. Your document is then linked to a CSS document, which says what color, size, and position your headlines and paragraphs should have.
A properly coded HTML page should never have a tag in it that says "make the font bigger here," or "make this right-aligned and green" Instead, each element (a paragraph, a headline) has a type and a "class." Even more, each functional area of the page has an identifier, so that style sheets can control what to do with them. This is how the dropdown menus above work (see Accessible Drop-down Menus, below). And this is why a headline on this page looks different from the same type of headline on the home page, where they're inside several boxes. It is also why the HMTL code for the home page gives no hint that those boxes even exist, nor any directions on where to place them. All that belongs in the CSS.
We can design separate style sheets for browser display, print format, and portable devices. Whether to go this extra step is up to the client, as it increases development time up-front. We will usually design for the browser first, then add alternate styles upon request.
Some sites even have multiple CSS sheets that the user may switch between to view the site in the way they prefer. To see this in action, take a look at The Holier Grail
No Tables
For about a decade, web designers have been creating complex, nested "table" structures in order to control position and alignment of elements on a Web page. Current Web standards urge designers to use table coding for things that actually are a table: tabular data; and leave all other alignment and positioning to the CSS document. EON Webware has embraced this principal for its flexibility, accessibility, and ease of maintainenance. But doing it right requires good design work up-front, and requires a bit more time than just slapping everything into a series of table columns and rows.
Accessible Drop-down Menus
Accessible drop-down menus load instantly (no images with rollovers to download), require no Javascript except a small fix to take care of a certain browser's non-compliance with CSS rules, and "degrade gracefully" (that is, still display usably in browsers that don't support modern standards, or have their own separate standards, such as cell phone browsers). Items may be added or deleted at any time, as items are merely entries in a list (actually, multiple lists).
Accessible menus are also wonderful because CSS (Cascading Style Sheets) controls their appearance AND location in the page layout. If you choose to switch your navigation menu from the top of the page to the side, or change it's color or size, change a couple of values in the CSS document, and your whole Web site has a new navigation appearance. If you need to add an item to a menu, it takes mere moments.
Flexible Design
Where possible, we like to design for the possibility of both large and small monitor sizes. Since we're not printing a brochure, why constrain the design to a fixed size? Not all clients agree with this philosophy. If you're one of them, we'll gladly force your pages to fit the smallest monitor (640x480 pixels), or a medium-sized, 800x600 resolution monitor, or larger. But since the smallest size leaves a lot of empty screen "real estate" and the middle or larger sizes may be too large for the smallest monitors, therefore requiring side-ways scrolling (users hate that), why lock your site in like that? We encourage our clients to consider flexible, scalable designs.
One way to use the full width while still maintaining readability is a multi-column layout. Another is to constrain the width of the main text area to, basically, a certain multiple of the size of the text being used. This option is what you see here. Try changing the font size in your browser and you will see the column of text get narrower or wider. (We're still deciding where we'd like the logo to go if you scale your text so large you need to scroll left-right.)