Web Design

Web Design Work

My entry into the world of web design began with the Cal Poly Architecture Department website. Following its competition the College of Architecture & Environmental Design asked me to implement Architecture's template throughout the college. I stopped working with these sites in 2009 and they migrated to the new university template in 2012. The set of six sites continue to retian some of my original direction.

Since retiring I have sought opportunities to provide web design for non-profit organizations and businesses. I developed the initial concept for the SLOBC website that the webmaster has implemented and continues to maintain. Next I designed and constructed the SLO Quilters website and function as its webmaster.

My prefered way of working with an organization or business is to collaborate on the design and production of the web site and then provide training for their people to maintain the site.

Web Site Development

The following principles guide my web design work:

Design web sites that reflect the feel and quality of the organization or business
Follow web standards in the use and coding of HTML and CSS
Use HTML for structure and semantics
Use CSS for style and presentation
Design sites that are clearly organized
Design sites to be as simple and quick loading as possible
Design sites that are accessible to all users

HTML 5 & CSS 3

HTML 5 and CSS 3 are used for this web site. This includes the new HTML 5 structural elements of header, nav, section, article, aside and footer along with the figure and figcaption elements.

Currency

My positions concerning users, browsers, web standards and web design are as follows:

It is the responsibility of users to stay current in order to receive the full benefit of the web and support its continued development.
Current web standards should be used in site design
Web sites should be designed for browsers that support current web standards
Browsers that do not support current web standards should be ignored

HTML-CSS Investigations

The CSS specific to each investigation is embedded in the header of the pages. They provide me a place to learn and explore new techniques.

Forms

Naked Form Without Floats
Naked Form With Floats
Form Using DIVs
Form Using Ordered Lists

The Ordered List approach has the advantage of maintaining a vertical listing of the form elements when CSS is turned off. It also allows the use of the <ol> tag to adjust spacing above and below a group of form elements within a fieldset.

Images

The image experiments create image grids. Each requires the establishment of a set of standard image sizes.

Image Grids Using Figure Tag
Fancy Image Grids Using Figure Tag

This experiment creates an image grid using table properties but not full table markup. The approach is from Everything You Know About CSS is Wrong by Rachel Andrew.

Table Property Image Grids

These experiments create image grids using unordered lists. The approach is from The Art & Science of CSS by Cameron Adams, Jina Bolton, David Johnson, Steve Smith, and Jonathan Snook.

Unordered List Image Grids-1
Unordered List Image Grids-2