Our class was assigned to come up with a common template to be used by faculty members, whose web pages now differ wildly with no common theme. Here is what I came up with, in both a small

Common faculty template.

Common faculty template.

and large version.

Each page would feature the AACC logo at upper left, carrying on the teal and gray colors used by the college, with a stack of mostly common links down the left side of the page. (The departmental links would vary.) A contrasting red-brown color was selected for the main headline and for an overline intended to grab attention. Texture is provided by a subtle gradient in the links sidebar, which also offers the option for faculty members to insert a picture of their choice if they want to; if they don’t, leaving it out and spacing out the links somewhat more doesn’t detract from the design. The main block of text starts on the upper right-hand side and continues down the middle, while a subsidiary block starts on the lower right. I tried the template with several examples we were given of existing pages, and in each case the common template would work with a minimum of tinkering.

AACC Sponsored Math Contest:

math1

(The existing math contest page needs more than a redesign: It needs more information about when, where and why the contest is held, what students must do and how their work is judged. The page is upside down, too, placing the most recent results at the bottom instead of at the top where common sense would place them. AACC is missing an opportunity to promote math scholarship on its web pages.)

Professor Allen-Chabot:

allen-chabot1

Online Science: Tutoring Page

ostc

Professor Chesley:

chesley

Dr. Bronfenbrenner Faculty Page:

bronfenbrenner

Nutrition Homepage:

nutrition

For comparison, here are links to a couple of the other existing pages:
http://ola4.aacc.edu/amallenchabot/nutrition/default.htm

http://ola.aacc.edu/ostc/

What made it possible for me to undertake this project was that I had just completed a project we started in class, finishing the design of a website from a detailed storyboard and set of instructions. The result is here.

Assigned reading for the week included “A Dao of Web Design,”
by John Allsopp, from “A List Apart,” a website for people who make websites
http://www.alistapart.com/articles/dao/

Allsopp writes that Tao Ta Ching is an ancient text whose common theme is harmony. Working with style sheets, he has come to understand there is a strong association between web design and the Tao (or Dao) and senses “a real tension between the web as we know it and the web as it would be, the tension between the already-existing medium of the printed page and its child, the web. It’s time to understand the relationship and let the child go its own way, “time to throw out the rituals of the printed page, and to engage the medium of the web and its own nature.” Mostly what his advice boils down to is: Stop fretting about font sizes. He says a lack of complete control over what appears in a browser often frustrates developers, but the answer is adaptability to the needs of the reader — that is, accessibility. “Let your design flow from the services which [its pages] will provide to your users, rather than from some ovearching idea of what you want pages to look like.” The most important step is to separate the content and its appearance. If you are using italic for emphasis rather than appearance, he says, use the “em” coding element denoting emphasis rather than the “i” element signifiying italic, so browsers that aren’t PC-based can handle it. Use style sheet “classes” rather than HTML for presentation, he advises. “If you use style sheets properly, to suggest the appearance of a page, not to control the appearance of a page, and you don’t rely on your style sheet to convey information, then your pages will ‘work’ fine in any browser, past or future. Browsers which don’t support style sheets simply present pages that look a little on the plain side.” Avoid absolute units like pixels or points, and don’t rely on color, he adds. The same point size looks smaller on a Mac than a PC because the “logical resolution” is 72dpi instead of 96dpi. Plus, a significant number of people have trouble reading anything smaller than 14 pts on paper. “With CSS you can specify font size as a percentage of a parent element.” And if you don’t, the text of the body will be the size the reader has chosen as default size. Thus rather than specifying a size in points or picas, you can specify Heading1 will be 30% larger, heading2 25% larger, etc. These can adapt to the reader’s preference for size of body font. Similarly, margins, text indentation and other layout aspects can be specified in relation to text size, e.g.
p {margin – left: 1.5em} means margin is 1.5 times the height of the font of that paragraph.
“It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.”

Advertisements