Web Development

Background

Web Development has been a hobby of mine since the Fall of 1995, my first quarter of my freshman year at Rose-Hulman. Back then (when dinosaurs still roamed the internet, or at least, the computers we had to use were beasts), a fellow freshman, Rich Rudie, taught me how to make my first web page. He forced me to learn HTML, without using development software, and his foresight has paid off. To this day, my development software of choice is the humble text editor.

By the time I started this web site, I had taught myself JavaScript, CSS and the latest HTML specifications. I have developed and maintained several other web sites, and believe that I have developed a much more mature approach to developing web sites, including preliminary design, layout, and style.

On Style

The internet abounds with opinions on style. I'm not going to say that my approach is correct, the best, or even better than anyone else's approach. That being said, I'm going to discuss some of my approach to web style.

Rule Number One -- Standards Use

My first rule of web design is simple to define: write valid code.

This practice results in accessible design.

Observe current standards, such as HTML, CSS, and others as appropriate. The current status of major, modern browsers has made adherence to this rule much easier. The days of browsers being designed to implement largely proprietary markup are thankfully long behind us. While implementation and rendering still vary - sometimes widely - today's dominant browsers, Internet Explorer and Firefox, are light years ahead of the browsers of even two years ago.

Adherence of these first two rules will, in most circumstances, result in only minor differences in rendering among standards-compliant browswers.

Rule Number Two -- Semantic Structure and Style

My second rule of web design is two-fold:

  1. Separate structure and style, and
  2. Define structure and style semantically

The first practice results in efficient design.

The second practice results in elegant design.

The first part indicates that HTML should be used to define structure, or layout, and CSS should be used to define style, or appearance. The second part indicates that structure should be defined in a logical manner, and that style should be defined according to that logical structure.

Understanding this two-fold rule requires understanding the nature of HTML and CSS. HTML defines content in terms of elements (or "containers"), which consist of both attributes and content. CSS defines the appearance of those elements, by specifying the values of various attributes of those elements.

CSS can target an element in one of two ways: by direct reference of an element's defined ID or class attributes, or by semantic reference of the element according to its heirarchy, or parent-child relationship to other elements, within the HTML structure. Either approach is valid, but the latter approach is inherently easier to understand and maintain the markup. The semantic approach also yields a far more predictable specificity and cascade of style.

Rule Number Three -- Consistency

My third rule of web design is concise: be consistent.

This practice results in usable design.

This rule applies to site structure, style, content, and navigation. This consistency is facilitated by semantic design practices and CSS, as well as use of server scripting languages such as PHP.

Consider this site's basic layout: a header, a main content section, and a footer. The header consists of the main site navigation. The main content section consists of three columns: left (section navigation), center (section content), and right (links and miscellaneous). The footer consists of site identification, copyright, and licensing information.

The contents of the header and footer never change (though the style of the header will change, to indicate current location within the site). The contents of the left and right columns will change from section to section, but are constant within a given section. Only the contents of the center column will vary with every page.

Rule Number Four -- Consideration of Typography

My fourth rule of web design is to observe typographical conventions where appropriate.

This practice results in legible and readable design.

The typographic principles observed by traditional print media - including repetition, contrast, proximity, and alignment - often apply to text content rendered by a browser. Font size, letter spacing, and line height - and the white space created by the combination of these attributes - impact legibility of a given font type. Foreground/background contrast, paragraph width, alignment, and spacing impact the readability of the text being displayed.

Likewise, commonly accepted conventions of legibility also apply; specifically:

  • Text set in lower case is more legible than text set in upper-case (ALL CAPS)
  • Upright (Roman) type is more legible than italic type
  • Contrast (without dazzling brightness) is important to legibility, with black foreground on yellow/cream background being the most effective.

The primary disparity between print and online text involves serif versus sans-serif font types. Generally, print media readability favors serif fonts, while monitor-displayed media readability favors sans-serif fonts. This disparity is generally attributed to the limitations of current display technology to render fonts accurately. However, the ability to modify the size, spacing, and line height of the font can mitigate such limitations, allowing for use of readable serif as well as sans-serif font types.

A particular consideration of online text is the horizontal screen resolution of the display. Under no circumstances should a layout ever force horizontal scrolling of the browser in order to read displayed text. Also, while the native resolution of most displays continues to increase (and in fact, I assume a minimum resolution of 1024x768), the increase in popularity of netbooks and mobile internet devices (smartphones, PDAs, etc.) requires that these devices must be accounted for, as well. Fortunately, the CSS specification allows for the definition of different style sheets based upon the medium - such as screen, print, and mobile.

Conventions

  • Typeface:
    Fonts default to sans-serif types, with some use of serif fonts for headings/quotes/etc.
  • Contrast:
    Foreground/background defaults to black text on white background, with some use of light-colored backgrounds to provide emphasis for blockquotes/footer/etc.
  • Paragraph Width:
    The center column defaults to 550 pixels; the sidebars (left and right columns) default to 150 pixels. Total page width is set at 1,000 pixels.
  • Font Size:
    Fonts default to 8pt for paragraph/normal text. Headings are between 9pt and 12pt.
  • Line-Height and Letter Spacing:
    Line height generally defaults to 1.5em to 2.0em, and letter-spacing generally defaults to 0em to 0.2em - both depending on the font type being displayed.

Final Word

Learn from others, experiment, and most importantly, have fun! Obviously, if you are developing a web site for someone else, you will need to consider the needs of those for whom the web site is intended; however, if you are developing the web site for yourself, then ultimately the only person you have to please is yourself. Find out what works best for you, and your tastes.

Timeline

1995: RHIT personal web site v1.0

My first web page is (thankfully) no longer in existence. Since I was just learning the tags for HTML 1.0 (I think), I used every trick I learned, with no sense of style or layout whatsoever.

1996: RHIT personal web site v2.0

Version 2 of my homepage was a vast improvement (and it's probably at least around on disk somewhere), that came along sometime during my sophomore year. I think, by that time, HTML 2.0 (and frames) had come along, so that was my first (and only) version of a home page with frames.

1997: RHIT personal web site v3.0

By my junior year, I was starting to get more refined with my style, and it shows in Version 3 of my home page. Although, my lack of time to work on the web page coincides with that version's lack of content. However, Version 3 can still be seen, thanks to the Internet Archive's WayBack Machine.

1998-2000: RHIT organization web sites

Having developed a framework that I liked (v3.0 of my personal web site), I began re-using that framework for other web sites I maintained for various campus groups such as Rose-Hulman Bands and College Republicans, as well as for a class project web site.

2000: Journaling

In the spring of 2000, I began my foray into the predecessor to blogging: the online journal. My first non-RHIT hosted web site, "The Palliative Polemic", was originally hosted by Geocities.

2000: chipbennett.net

After graduating from college, I decided to undertake an exercise in uber-geekdom: I, being a person of no particular consequence (that is, not being a politician, athlete, or othercelebrity), purchased my name as a domain: chipbennett.net.

The first iteration of this web site was mostly static HTML, with some use of javascript to provide a few, rudimentary dynamic effects as well as to provide some embedded content such as navigation menus.

Also, without knowing it, I turned the main section of the web site into a very crude - and very manual - web log. I began posting semi-regular updates about changes to the web site, and what I was doing from day to day.

2003: Formal Blogging

Soon thereafter, I discovered Blogger, and began self-hosting a Blogger-powered blog. After becoming a fairly regular blogger, I found myself constantly frustrated with both the lack of control over the blog platform and the all-too-often server issues and downtime.

2005: WordPress

Then I discovered WordPress. I installed WordPress, then at version 2.0, on my server, imported my Blogger data, and have been happily blogging ever since.

2006: PHP

Around 2006, I converted the entire web site from static HTML to PHP, and began to eliminate some of the unnecessary javascript.

2008: Semantic Design

In late 2008, I entirely re-wrote the web site, implementing semantic structure and style conventions. I also re-vamped the non-blog sections, updating out-of-date information and merging/eliminating various sections.

Categories
Click to view/hide
Tags
Click to view/hide
Post Formats
Click to view/hide