Redesign–Day 4

by cdwise 11. March 2014 23:59

Our day 4 site is the Elko-Lander-Eureka County Library System.

image

First issue I noticed is that the page is too wide for my default browser width settings of approximately 1050px wide. The facebook like boxes on the far right look like someone had an “oh we have to have a facebook like on our page” and stuck the two of them on without any real attempt to make them part of the site.  The background and masthead images are attractive but the random placement of all the images and facebook boxes, especially those outside of the site’s boundaries as defined by the images is simply bad UX.

Next thing was that there is no real content on the page. Looking at it the page appears to be a bunch of images with NO CONTENT! It isn’t even obvious that many of those images are in fact links but to what means mystery meat content

imageSo look what happens to what little real text there is on the page when you are using large fonts or resize text larger in Firefox.

Text overflows the absolutely sized and positioned text.  This is made worse because the “background” is just that part of the background image. Anything that contains text should not be in a fixed height container.

Menus

What has been well done is the menus with the top navigation being physical library locations and the sidebar a well organized list of information and services.  The primary menu comes from Stu Nichols CSS play site and is free for use on non-profit sites and available for use on commercial sites for a donation or if you wish to remove the attribution from your stylesheet.

Since the site is already using a CSSPlay menu we decided to use an updated menu from CSSPlay that has a curved background as part of the menu system. To dress it up a bit more we added gradient backgrounds using colors from the header image for both the menu and the facebook widgets.

While I did like the original top menu in keeping with the use of css gradients for the sidebar menu and facebook widgets we decided to go with a gradient on the top menu as well. One that is almost a shadow of the header though I think the original top menu could easily be used if that’s what the site owner/maintainer prefers. The only thing I would change is to increase the font size slightly.

Adding Content

In order to do an effective redesign of this site it is necessary to add real content to the home page and make it more readily apparent that there are links on the page besides those on the two menus and facebook widgets.

Some of the text came from pages that were linked by the image or I created so there would be something we could work with. Personally, I’d like to see much more content on the home page of this site and less graphics but for the purpose of this redesign keeping the facebook widget and blending it into the site seemed important. I would urge the people who maintain the site to add more content to the home page and reduce the size of some of the graphics like the online education book stack that aren’t intuitive.

Ease of maintenance

To make this site easier to maintain we kept the decorative bits in the stylesheet including the gradients used for the two menus and the facebook widgets, well as much as the facebook widgets would allow. Frankly, they aren’t as customizable as I’d like.

None of the content is absolutely positioned though the menu flyouts do use relative positioning but since that is all in the cssplay.css stylesheet there is no need to ever touch it. Adding or removing menu items is done by editing the unordered list in the HTML.

Instead of using absolute positioning that is fragile and may display differently cross browser everything is positioned using floats and clearing classes. Since most of the content that is floated are images where it will render faster if you put the height and width into the img tag two generic classes named .fltright and .fltleft. Always use names that will remind you of what a class is to be used for and when you come back to the site months later you won’t be wondering what .style27 does and end up more or less recreating it at .style41. You can add generic clearing classes like .clrleft .clrright and .clrboth as well.

Final Result

imageNow that there is text on the page you can see that the images mean something and are not just mystery links.

Content is organized into blocks of related items such as the links to the IRS forms and reviews of tax software. 

The online classes section give the visitor an idea of the types of classes offered and that classes in languages other than English are also available.

Facebook has like buttons for both of the sites on the original page adding faces of some of the people who like the library as well as using the facebook dark theme over a gradient background that compliments the main menu.

You can see the redesign live at http://wizerways.net/elko and in case the original is made over either using our redesign or another here is the original.

Tags:

CSS | Review | Templates | Training | Web Design

Comments are closed


Outstanding Hosting