This is an outline my design philosophy for the web pages I created for lgpiper.net. The site redesign was originally my project for the 90.302 class I took at UMass/Lowell during the spring 2006 semester.
The lgpiper.net web site is being designed to have the following features:
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 (half the world is still on dial-up), 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 mostly design 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 is then achieved by manipulating the overall style sheets for the site. I have worked out an approach to have the specific style sheets delivered according to the visitor's screen resolution. Smaller resolutions, i.e. under 800 px wide, get a liquid layout; modest resolutions have a modest fixed-width content, and wider resolutions have a slightly more generous, but still-fixed width content. The fixed-width parts are to be centered appropriately in the window.
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 have relaxed my 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.Now having said this, I must admit that people trying to access this site with one of the early versions of Netscape or Internet Explorer won't do so well. If you're one of those people and feel aggravated by my site, please write me and complain.
to toplgpiper.net is a web site describing my various interests. Most of my interests are more intellectual than visual, so visual design niceties are not necessarily so important as they might be on the site of a web designer.
What is important for the lgpiper.net web site is to describe my interests, to provide documentation of past work, and pretty much whatever catches my fancy at the time I decided to put it on my web site.
My particular interests are my family, music, spirituality, technical things (PChem and computer stuff), writing, and some silly things.
So there we have it, so to speak:
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.
Actually, since I wrote the above, I got a nifty 19-inch flat pannel screen, so can now do 1024X768. However, I still remember the old days. About 20 to 25% of the population is still on 800x600, so I feel it appropriate to accommodate them.
If I design things to look nice at low resolution, however, they won't look so good on the higher resolution set ups favored by most 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. Since I began my adventures, I learned to do a style-sheet switcher that was triggered by first determining the visitor's browser resolution. So this should help keep things in proportion once I implement it more widely.
Another obvious problem is that I'm way too wordy. I'm not sure what to say about this. It's my site, after all, and if I focused on having lots of visuals, it wouldn't represent me.
One way to moderate 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 serve up a liquid content for screen resolutions below 800 px, a fixed, but modest content block for screen resolutions between 800 and 1000 px, and a larger, fixed column (35em) for even larger columns.
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 my classes have been to learn html and javascript, it seems rather counter productive to use a WYSIWYG crutch that prevents me from actually learning the details of these fields.
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 is 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 topBasically, I use header tags liberally, and design menus in the form of lists, unordered, ordered or even definition. Then I style the headers and lists to get appropriate visual effects (within the limitations of my overwhelming lack of esthetic sensibilities).
Basic content blocks are be contained in <div> tags and placed and styled with classes or ids.
All pages will have an address block with some kind of "mailto" link. People should be able to contact the web-site subject easily. I've combined javascripting and numerical character references 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. In the sub sections, I might put some additional navigaton on the right, e.g. between the various music pages. Still to be decided.
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'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