Original rebuilt

Redesign

Validation of the HTML for both my rebuild and redesign

Validation of the original www.cs.umd.edu HTML

www.cs.umd.edu: Revision of the Original CSS/HTML Design


The original design had several distinct flaws, in both the visual design and functionality. For one, the links it used on the right panel were not color-coded properly to distinguish from text, although the more-or-less traditional vertical-navigation-bar design saved these links from being indiscernible. This was not the only problem with the links: it was not clear that the categories of the links themselves were not links, even though these were color-coded. Usually, in a navigation-bar design like this, one expects to be able to use the categories as links as well, such that the content pane to the left would then display some general information about the category and the same links as are in the category, redundantly, with more on-screen description about each link (unfortunately, due to the restrictions of the assignmet, I could not alter this part, as well as many others.) The links were also missing a "visited" pseudo-class, which made the visited links appear equivalent to unvisited ones, constituting less feedback than expected. This problem was fixed in the re-design, the links are color-coded and turn green when visited. To improved link readability, a link-zebra was added. Finally, the entire link category gets highlighted when browsing through a particular category to highlight the attribution of these links to this category and to provide better feedback: the intention remains that the functionality of visiting these broad-category pages will be added if the design was fully integrated into the website.

There seems to be no apparent reason for the difference in the side-margins: the right margin is quite wide and visible, the left one is completely missing. The title is shoved over towards the UMD logo in the top left corner, making for a slight dis-balance for the visual design swaying to the left. The margin on the right provides breathing space on the right, but the same is not true for the left, making the left side overly jumbled. The breadcrumb only adds to the mess when one starts navigating the branches of the website. To mediate this problem, the title was automatically pushed to the right (adjustable when the window is resizing), and the global margins were removed from either side. The cream-yellow background makes the atmosphere of the website similar to that of my grandmother's kitchen, while the grey highlight on the image-links for CS department home (the "title" image) and the UMD logo is completely unfitting with the rest of the design. The fitting colors for a combination of technology and academia should be, instead, white, subtle or dark grey, white, limited black (no black backgrounds), and navy blue in various shades, and this color scheme was applied to the redesign.

The website cannot be constricted to half the standard 19-inch screen side: while the window is resized the shrinking stops at 800 pixels in width, which is not enough to fit it into a 600x800 screen anyway, due to the vertical scroll-bar width and browser borders, when those are present (if that was the intension). It's problematic to work around this if one is trying to fit more than just a browser on the same screen (i.e. a text- or an html- editor, for example ;). Resizing is now possible down to 640 pixels in width, which constitutes a little over half of a 1280x1024-resolution screen. When the window is sized down in width, the search bar in the new design is moved along with the title and top menu at first, but continues to do so (it is partially transparent to allow see-through viewing). Also, if the user needs to scroll, the search bar's position remains fixed in the upper-right portion of the screen, allowing to search without having to scroll up the page. The effect is that the user has already read or skimmed through the information immediately below the search bar when she or he chooses to scroll down, but if need be still knows it is there, seeing it partially through the transparency, and can scroll up to improve the readability of this area.