ellars.com

 web: philosophy

[glowing neon at O'Hare Airport in Chicago]

overview

This volume is an "alpha" release; that is, it is still being written! (You will know when this volume has reached its "final" release because this message will no longer appear.) Please excuse any debris you may come across, including broken links or missing content. Thanks.

This volume of my portfolio begins with some background information. The bulk is devoted to demonstrating my experience through personal sites, professional work, and general content development. Some of the web experiments I have cooked up over time are also on display. I conclude this volume with a discussion of my web design philosophy.

philosophy

or, of rhyme and reason, sound and sense

or, the rationale behind this web site

Rather than bore you, the visitor, with a dry discussion of why I design web sites the way I do, I thought a more lively exposition would be in order. A visitor to ellars.com recently wrote to me about my web site. She wanted to know what I used to create the site, and if I had any tips or tricks that I could pass along. The following is my slightly cleaned-up (and heavily marked-up) reply.

what goes into making this site

the mark-up

I write all of the mark-up for the site, including the structural HTML and the presentational Cascading Style Sheets (CSS), by hand using simple, text-only editors. Initial development was done on my home computer using Microsoft Notepad (with cross-browser checking in Internet Explorer 5.5 and Mozilla 1.2.1), though now that the site is "live" I do all of the development on the remote linux server using a bare-bones text editor called Pico. (This is the default text editor that comes with the popular email program called Pine.) To the best of my knowledge, the site displays more-or-less the same on any "modern" browser (i.e., one that was released in the last two or three years -- sorry, no Netscape 4 support here).

the graphics

The few images (photographs) on the site were taken with my Canon S200 Digital Elph camera and touched up, resized, and otherwise manipulated in Adobe Photoshop. I had originally hoped to use PNGs on the site, but the unreasonably large file sizes led me to redo most of the images as high-quality (low-compression) JPEGs. You can still see a couple of the PNG graphics in the Personal portion of ellars.com, where I wanted to have full alpha-channel transparency. (Unfortunately, all versions of IE for the Windows platform have b0rken PNG rendering engines, so you'll likely see a gray-ish background instead. IE for Macintosh display transparent PNGs splendidly, as do Opera and Mozilla-based browsers such as Netscape.)

the philosophy

The decidedly "simple" look is an attempt to return to the roots of the world wide web, in which content (not appearance) was the point of producing web pages. This doesn't mean I've abandoned the knowledge I have gained; in fact, this is by far the most thoroughly complex web site I have ever designed. (What I consider the coolest item: adjust the text size in your browser and the relationships of the elements on the page should remain the same, that is, everything that lined up before should still line up, even though the text is now bigger or smaller! Got bad eyesight and/or want to view ellars.com with a bigger font? No problem! The layout isn't absolutely reliant upon a specific font size!)

how to make your own

getting started

It really depends upon what you're hoping to do with your web site. Over the last eight years (!) I have journeyed through just about every school of web design, from minimalism to metaphors to pixel-perfect layout. What I've discovered is that it takes entirely too much effort to create and later maintain the total-control designs I was used to creating, in which the entire page is essentially a giant graphic that gets sliced into smaller images that are then arranged in an iron-clad system of nested tables. Not only does using tables for purposes of general layout make for needlessly complicated mark-up, it also tends to break non-graphic browsers such as screen-readers and braille displays.

Today, with the current iteration of ellars.com, I believe I have returned to the roots of the World Wide Web. My hypertext mark-up is mostly structural -- that is, it describes the structure of the content within, rather than its presentation. The task of coloring, positioning, and sizing -- the presentation portion of the site -- is handled almost exclusively through Cascading Style Sheets, a/k/a CSS. This means I can completely redesign the site in a matter of minutes by defining a new stylesheet, and never have to touch the mark-up of any page on the site.

This is a really powerful concept; I'm not sure many people truly grasp the depth of possibilities enabled by separating the content from the presentaiton. I know it took me a couple of years to fully come to terms with what this potentially trite phrase really means. But in doing so, I have opened the doors to fully-featured site "themes" such as the ones I created for ellars.com (lightness, darkness, and now blueness). It also allows me to create a completely different look for printing, completely eliminating the need for writing separate printable documents. You can see this effect at ellars.com by selecting "Print Preview" from your browser's pull-down file menu.

development options
okay: the quick-and-dirty wysiwyg option

If you're looking for a quick-and-dirty personal web site and don't care about HTML, CSS, and the like, then you should just invest in a WYSIWYG (What You See Is What You Get) program like Microsoft FrontPage, Adobe GoLive, or Macromedia Dreamweaver. (Note that this list is in order from least quality to highest quality and, I believe, from cheapest to most expensive; in this case, you get what you pay for.) These programs produce mediocre, passable, or fairly decent (respectively) quality HTML pages and generally include a vast array of pre-built functions, templates, and other goodies that just about eliminate the need for any knowledge of mark-up.

better: the wysiwyg with manual mark-up option

If you're looking for a good page-layout program and don't mind adding a bit of HTML mark-up every on most pages, Macromedia Dreamweaver MX is the way to go. Unlike most other web-authoring packages, the folks at Macromedia have actually been working with web-standards groups to make a better product that behaves nicely with the established standards. While there are still some rough edges that could stand some polish, I have been impressed with my experiences with it at my job.

preferred: the manual mark-up and styling option

If you're ready to dive into the realm of authoring for the web -- I mean, really develop it as a marketable skill -- then learning HTML and CSS is a must, and marking up your pages by hand should become second nature. People frequently "view source" and get intimidated by all of the brackets and symbols and strange code-like abbreviations, but trust me when I say that there is nothing terribly complicated about HTML. Like most things related to computers, it follows a set of fairly straightforward rules. (It doesn't help that most browsers, in an attempt to be "friendly," ignore, bend, or break those rules. This is why so many sites look odd when viewed with different browsers or on a different operating system. If browsers would only display validated mark-up, authors would be forced to write validated mark-up, and the web would be a much nicer place to play.)

structural versus presentational mark-up

The trick to writing HTML is to stop thinking of it as programming because it isn't programming -- it's mark-up. Most people who use a word processing program like Word or WordPerfect write mark-up all day long and never give it a second thought or confuse it with computer programming. All mark-up is is defining the structure (and presentation) of content. When you highlight a word and click on the "B" button to make the text bold, that's mark-up. When you select the "Heading 1" style from the pull-down menu to make the text big, bold and centered, that is mark-up, too. The difference in HTML is that you actually have to type certain "codes" to "turn on" and "turn off" these elements (such as <b></b> for bold text and <h1></h1> for level 1 headings). If you ever used WordPerfect for DOS, or the old WordStar program, you should be familiar with the concept of mark-up codes. For a more modern example, consider the "view codes" feature of Microsoft Word: the only difference between that view and HTML is that HTML uses mark-up that looks like <p></p> for paragraphs rather than the little paragraph symbol.

Continuing the above word-processor mark-up examples: these are two different types of mark-up. It tends to take people a while to understand the difference. The former example is presentational mark-up: this text should be bold. It doesn't tell anyone anything about the nature of the text, only that it should be presented as bold text. The latter example is structural mark-up: this text is a level 1 heading. This does tell people (or at least the word processor) something about the nature of the text -- that it is a top-level heading, and therefore of fairly great importance in the document. Behind the scenes, a second bit of presentational mark-up is being applied to all level 1 headings to make them big, bold and centered.

The power behind structural mark-up, compared to presentational mark-up, is that the presentation of structural mark-up can be universally modified through a few seconds of changing a setting, whereas presentational mark-up requires each instance to be changed individually (a process that could take many minutes or even hours or days). Continuing the above example, if I decided I wanted all of the bold text to be italicized instead, I would probably be forced to go throught the document and change all of the bold text to italics. (There happen to be ways to do this automatically, but we'll ignore them for the purposes of these examples because these methods are particular feature sets of certain word processors and not universally available.) In contrast, if I wanted to change all of the level 1 headings (style: Heading 1) to still be big and bold, but now also red and right-justified, all I would need to do is change the presentational mark-up for level 1 headings. Viola! Change a line of text in the style definition and it is instantly applied.

real-world impact

The key is to write structural mark-up and avoid presentational mark-up. When I redesigned ellars.com, not only did I not know what the "look" of the site would end up being, I didn't even define a style sheet! I wrote out a couple of pages with nothing but structural mark-up (heading and paragraph tags). Only then did I start applying presentational mark-up, and even then only through the use of Cascading Style Sheets. CSS documents are linked to the HTML pages through a special declaration in the document. If all of the pages of a web site link to the same CSS file, the look and feel of the entire web site can be updated simply by changing the single CSS file!

This isn't to say that there is no place for presentational mark-up. But it is to say that you should carefully consider what it is you're trying to convey when you apply presentational mark-up. For example, the presentational mark-up tags for bold (<b></b>) and italic (<i></i>) have similar structural mark-up tags called strong (<strong></strong>) and emphasis (<em></em>). If you truly want something to be bold, use the bold tags; but if you're just trying to make it stand out from the surrounding text, use strong. You can always define (and redefine) what "strong" means, but bold is just bold. Similar issues arise with using italic and emphasis.

hypertext mark-up reference

When it comes to writing HTML, it is unfortunately difficult to describe everything in a brief format. The two books I turn to most often are "Web Design In a Nutshell" (by Jennifer Niederst, published by O'Reilly Associates, www.ora.com) and "Cascading Style Sheets: Separating Content from Presentation" (by Owen Briggs, et al., published by Glasshaus, www.glasshaus.com). A book that was just released, called "Designing With Web Standards" (by Jeffrey Zeldman, published by New Riders Publishing), has already filled the web design world with tremendous positive buzz. While not so much a reference for writing web pages, it is a reference for making them standards-compliant.

As for reference web sites: The World Wide Web Consortium, or W3 (www.w3.org), is the final authority for web standards; but while their web site is filled to the brim with technical information, it isn't very accessible to the average web author (though this is slowly changing). I use many excellent web sites as resources, including:

And the most important resource of all: view source. I learned 90% of what I know about writing web pages by viewing (and borrowing) the source of other web sites that I happened to like. The trick here is not to wholesale copy a web site, but to learn how and why certain features work and implement them yourself on your own web site.

conclusion: the future is now

I suppose you might be asking why anyone would care about this stuff so much. This is a perfectly valid question, and it certainly takes a keen interest in and knowledge of the current state of technology to derive an answer. Essentially, the presentation of data (i.e. content) is headed towards a meta-driven, device-neutral state; that is, data itself will be heavily documented (with "metadata" or data about data) and designed to display on any device regardless of the device's size, resolution, speed, software, or hardware features. This allows the identical content to be simultaneously viewed in a web browser on a personal computer, a hand-held device (like a Palm Pilot), a wireless web-enabled watch, a text-only line mode index service, or just about anything else.

Unfortunately, this type of universal display of data is almost impossibly complicated when the data is hard-coded with the presentation. The solution, then, is to separate the content from the presentation, and simply define different presentations (styles) for different types of environments (media). All of this is moving towards a system in which HTML is no longer needed or even used, instead relying on XML-based mark-up with transformable style sheets (XSL/XSLT) based upon media presentation rules. Ah, but I'm really digressing at this point...

thanks

This concludes the web volume of my portfolio. You can return to the other pages in this volume by following the links below. Or, you can return to the portfolio index.

themes?: [lightness] [darkness] [blueness]

© 1995-2013 [terms of service] [dreamhost] [xhtml 1.1]