Redesign Day 6

by cdwise 14. March 2014 13:18

SNAGHTML3272e9cThe majority of the websites submitted for redesign were genealogy sites, either for individuals or clubs like our day 3 site. Today we are redoing an individual’s personal site for themselves and their family. Foster, Colenso, Drummond, Leeman and Ussher This site was selected from the ones submitted because I’ve never seen a site that wasn’t a big database driven content management based site that had 4251 lines of HTML and scripting code.

I suspect that this non-standard doctype and the comment code below it explain many of the issues I see in code view:

<!DOCTYPE HTML PUBLIC"-//IETF//DTD HTML//EN>
<!--This file created 03:47 13/12/2008 by Claris Home Page version 2.0-->

Even after removing the extraneous lines there was still nearly 1,000 left which even for a page as long as this one is means a lot of lines. In doing the initial clean up there were 93 lines of <p></p> where empty paragraph elements were used for spacing. As mentioned in reviewing an earlier site this can lead to very inconsistent display cross browser. Do not use the spacebar or enter key to create whitespace on a web page. Use margin or padding depending on how you want the space to be created.

In addition the freefind.com search form encompasses all most all of the content on the page which is not how you would normally implement a form of any sort, particularly if you wished to style it to blend in with your site. So for the purposes of this redesign it will be omitted.

The other issue I see that is most likely related to the generator program used are non-standard html attributes like: x-sas-useimageheight="" x-sas-useimagewidth="".  Something that really should be avoided if you want consistent cross browser rendering. Also, spaces in file names which require encoding so that the empty space is replaced with a %20 code. If the encoding by the editor used ever fails then the link to the image or file will be broken. One thing that was done right is the use of alt attributes on the navigation images. Without which anyone who could not read the blue on purple text would not be able to use the menu to navigate through the site.

I have to admit that cleaning up the code on this site took far longer than any of the others we have redesigned. Not only was there a lot of strange propriety code and blank lines but tables were improperly used. Not only were there nested tables and content in tables that shouldn’t have been but separate tables when the content logically should be in one continuous table.  Often there were paragraphs inside of table cells with <br> making it appear as if the table was properly created with each line in a separate <td>. Which means the tabular data as shown in the screen shots below should be marked up properly.

Colors

Looking at the table on the left side an attempt to color code the generations was made which does seem like a good idea but sadly it doesn’t appear to have been implemented when you look at internal pages.  Instead of being colored by generation or time looking at:

image

Color coding seems to be by family since looking at the Colenso the entire background is a bright purple with dates listed from 1641 to 1921.  The colored backgrounds make it very difficult to read, particularly the dates as you can see in the image above or on the page itself.

What I had expected was something more like this (Colenso family information that was in purple in the above screenshot):

image

Note: I have no clue which generation each section belongs to so sort of used my best guess.

This would still create a colorful site so we took the opportunity to make sure that colors were in the same color hue values instead of having warm and cold versions of the same color randomly interspersed in the generation color coding table.

Final Design

One thing that really bothered me, the variety of purples with some of them on the blue side of the purple spectrum and others on the pink/red side. While I understand the desire to use the Welsh flag the primary red/green colors simply do not go with purple. Fortunately, there are other Welsh symbols that work better like the Prince of Wales feathers and daffodils. Even leeks would be a better option if any shade of purple is to be used as the primary color. By switching from the Welsh Flag to the Prince of Wales Feathers the clash of colors goes away. Using yellow daffodils would be another option since purple and yellow are complimentary colors.

The other thing that we did was replace or resize some of the images. The background was replaced with a diagonal css gradient in the site owner’s favorite color – purple. By keeping all the purple elements in the same color space we get a semi-monotone design that has a variety of purples without clashing.

SNAGHTMLb321f6a

You can view it at wizerways.net/mandx
If you wish to see how the first set of Colenso family members look it at mandx/surname.html Note: only the first table has been converted to a properly marked up table.

Tags:

CSS | Training | Web Design | Dreamweaver | Expression Web

Comments are closed


Outstanding Hosting