Larry Piper's IRFP.net Design Goals

Quick Summary

The IRFP.net web site is being designed to have the following features:

to top

Basic Design Philosophy

I believe that the purpose of web pages is to communicate with other people. Anything that enhances communication is to be encouraged, anything that discourages communication should be avoided. The number one thing one can do to enhance communication is to make his or her pages accessible to everyone. That means people who can't afford the latest browser, or choose not to use the most popular one. That means people who want to access one's pages via low-bandwith feed, or small-screen feed (cell phone or pda). That means people whose eyes aren't the greatest, so want larger fonts.

Thus, my major objective is to make a page that will look decent in modern, standards-compliant browsers, but which can also be read sensibly in a text browser or small-screen rendering device. In addition, I expect that people should be able to resize my pages to accomodate their eye-sight limitations. For example, people with "mature" eyes (i.e. people over 50) need to have larger screen fonts to read comfortably than do those under the age of 30. So, if people wish to have fonts resized, most page style elements should change proportionately, not spill over the edges of hard-coded visual page elements.

In order to achieve these goals, I'm planning on designing my pages with "bare-bones" style html. Basically, it is html from the early 90s. Basic mark up of content elements and little to no mark up of visual style elements. The visual style then will be achieved by manipulating the overall style sheets for the site. Actually, I'm hoping to provide several style sheets for the pages so that people who like tiny red fonts on a black background can have them, and people who want decent font size and contrast can have that.

So the plan is to write validated, standards-compliant xhtml and use style sheets for positioning and style. The problem with this approach, of course, is that Microsoft doesn't make a standards-compliant browser, so some elements won't translate properly. Rather than design to fix bugs in IE's implementation, I'll most likely have relaxed standards for the look of the site. I'm not a particularly visual person anyway. Some might even call me esthetically challenged. Fortunately, I'll never have to do this stuff for a living.

to top

IRFP.net Site Requirements

IRFP.net is a web site describing the work of the sound artist and electronic noise musician, Jessica Rylan. Most of her work is aural and intellectual, so visual design niceties are not necessarily so important as they would be on the site of a purely visual artist, like that for a painter or sculptress. Jessica creates sound installations, records tapes and CDs, writes and produces books, and performs at various venues. Most of her work uses analogue synthesizers she has designed and built.

What is important for the IRFP web site is to describe Jessica Rylan's work (installations, synthesizers, recordings, performances, etc.), to provide documentation of past work, to provide a schedule for upcoming performances and to provide a means whereby people can purchase copies of her CDs, tapes and books. Thus we'll need pages to describe the work, pages for work archives, pages for an upcoming schedule of events, and a page where various tapes, CDs and books are described and from which individual items can be selected and purchased. I may also try to work out some kind of guest book or comment log so Jessica's fans can interact with each other and, on occasion, with her.

Since Jessica works in sound, there will necessarily need to be options for downloading or listening to sound clips. Imposing sound clips on site visitors, however, is an extremely annoying affectation which will be eschewed on this site.

So there we have it, so to speak:

to top

Problems and Limitations

I face several limitations in web design. This causes problems in making things that render properly on most people's computers. Basically, I don't have good enough eyesight that I can work comfortably on a monitor having a resolution of 1024x768, or even on the even wider rendering offered on one of those nice, new Mac Power Books. Not only am I stuck with 800x600 screen resolution, but, in order to work comfortably, I also have to enhance the basic fonts by 25%. Since about a third of people still use resolutions of 800x600 or less, it makes sense to accomodate them anyway.

If I design things to be perfect for my particular set up, however, they won't look so good on the higher resolution set ups favored by most other people. So I'm trying to design with dimensions spaced proportionally as much as possible (i.e. ems or per cents, as opposed to pixels). The hope is that this approach will prevent my pages from becoming lop sided (all on one side or the other) or from having content blocks segregated on the edges of the screen, separated by large amounts of central blank space.

Another obvious problem is that I'm way too wordy. So is the customer for the IRFP web site I'm designing (my daughter). She is a person of ideas. As I mentioned above, her art is intellectual and aural, not particularly visual (although she does provide some visual components in her work).

One solution to the wordiness problem (also the proportionality issue) is to make sure that lines of text don't become overwhelmingly long. Shorter lines of text are easier to read, unless of course, they're too short. So on most pages comprised primarily of text, I've arranged things to have the text centered in a relatively manageable column. I tried setting both maximum and minimum line widths, but then discovered that non-standards-compliant IE doesn't support those line-length specifications. So I just set on a fixed width for my text columns by fixing the width of the container holding that text (at the moment 30 em, but that might change).

So basically, I had to make a less-than-ideal accomodation for 75% of the browsers out there (wow, 25% of people now don't use IE, up from less than 15% a year ago -- see http://www.w3schools.com/browsers/browsers_stats.asp). It's a compromise to try to keep the page from looking totally stupid, but sill capable of working for me. Were I to fix all aspects of the design, down to the last pixel, it most definitely would not work for me. So this way, I get at least a small amount of fluidity to the design to accommodate people's needs for different font sizes to maintain browsing comfort.

Another limitation, I suppose, is that I can't afford a WYSIWYG editor, so everything has to be hand coded. I use TextPad which comes with various tag libraries I can use, so I don't have to remember everything from scratch. It also does color coding, has a great global search and replace across multiple files, multiple document interface (lots of documents open in separate tabs, but one primary window), etc. It's pretty good (and can be used for free). The benefit of hand coding, of course, is that one writes much less bloated code (not counting all the wordiness), so pages load faster and are much easier to alter and maintain. Also, since the point of the class is to learn html, it seems rather counter productive to use a WYSIWYG crutch that prevents me from actually learning the details of html.

For the curious, I use Opera to check my pages. It is a much more standards compliant browser than is IE, so I can do just about anything and it will render properly. The other nice thing it does provide alternative rendering modes. So I can click a button and see what my page would look like in a text browser. Another click (shift + f11, actually) and I see what my page would look like in a small-screen device, such as a cell phone. So I can check easily to ensure that the basic flow of my content makes sense.

Then, if I hit another button (ctrl + alt + v), it automatically opens up a new tab and uploads my page to the W3C validator in that tab's view. Thus, I can easily validate as I go. Opera can be used free, but I thought it was such a good browser that I gave them some money (same as I did for the TextPad folks).

to top

Specific Design Elements

I'm still vague on this part, so I still have plenty of issues to work out. My plan is to use header tags liberally, and to design menus in the form of lists, unordered, ordered or even definition. Then I will style the headers and lists to get appropirate visual effects (within the limitations of my overwhelming lack of esthetic sensibilities).

Basic content blocks will be contained in <div> tags and placed and styled with classes or ids. That's the plan at least. I'll try to add specifics when I can.

All pages will have an address block with some kind of "mailto" link. People should be able to contact the web-site subject easily. Eventually, I'll probably do some kind of javascripting thing to foil spambots.

People should also be able to navigate easily. All pages will have a link to the home page and to all major topic pages. Most likely I'll provide some kind of side navigation bar at the top and also a navigation footer so one doesn't have to scroll back to the top of the page to navigate elsewhere.

As for fonts, most people on the internet now seem to favor sans serif fonts. I'm not sure why. Some folks say they're easier to read, others not. I prefer the look of the serif fonts, so I think I'll go with them. Besides it provides a bit more of a "retro" look, which I think is what is wanted for this site.

to top