Our third site selected is for the The Alamance County Genealogical Society. Visually the biggest issue is the navigation text being part of the header graphic and implemented using mapped co-ordinates. The menu text is very difficult to read, particularly on high resolution screens. Otherwise with the exception of the majority of the header image it just looks dated.
Let me take a moment to address the header image.
As we were working on the site several people commented that they loved the collection of heads in the header. How appropriate it was for a genealogy site but they wished it had been of better quality. The biggest reason for the poor quality is that the image (which I agree is conceptually great) was saved as GIF file instead of a jpg. You should never save anything with lots of different colors or gradients as a gif because at best it will only contain 256 colors. A single gradient can contain more shades.
Behind the Scenes
It is when you look at the code that you see where the real issues with this site occur. First issue is the use of a nonstandard doctype.
<htmlxmlns:v="urn:schemas-microsoft-com:vml"xmlns:o="urn:schemas-microsoft-com:office:office"xmlns="http://www.w3.org/TR/REC-html40">
Which means that Word or possibly Excel was used on the site, probably for content creation. This is a problem because only Internet Explorer has a clue what the doctype means and vml is proprietary and will not run in other browsers.
Also, like our day 1 site there is an over use of styles. All of which are named either “styleXX” or “auto-styleXX” with X being a number. There is also a significant amount of MS HTML attributes that are not part of the normal HTML standard and old style HTML presentation mark-up such as
<tdheight="1"align="left"valign="bottom"bordercolorlight="#0000FF"bordercolordark="#00FFFF"bordercolor="#5C5E8B"bgcolor="#C0C0C0" style="width: 163px"><fontsize="4"color="#000080"><b>Monday Nights</b></font></td>
From the code above only <td> should be used without the attributes and <font> has been deprecated since 1999. Which tells us this is an old site but an effort has been made to bring it up to current standards by using styles inefficiently. This is actually pretty common for people migrating a site from FrontPage to Expression Web or other standards compliant web editor. Our Basic Website tutorial and Pat & Tina’s Migrating FrontPage to Expression Web ebook can help you with your transition and understanding how to use web standards and css on your site. Using some of the methods Tina talks about – Find/Replace HTML tab to remove deprecated html elements like <font> and attributes like “bordercolorlight”, “align” and “bgcolor”. Clean up is pretty quick. Next step is to apply HTML elements correctly so that <hx> is used for headers instead of faux headers created using presention attributes so that:
<b><P><fontsize="5">The 1850 and 1870 Census</font><fontcolor="#800000"><br> Go to <ahref="alam_cen.html"><spanclass="style14"> Here</span></a> for this Information</font><blockquote>
Becomes “<h3> The 1850 and 1870 Census</h3> With style definitions for elements like the <a> element created so they would be applied automatically. Should you want to increase the side margin don’t use <blockquote>. That has a semantic meaning that the contents are quoted from some other source. Should you want to move text over create a style with margin defined how you want it. Then name it something meaningful so if you want another block of text to look the same way you can simply apply the existing style instead of creating another stylexx definition.
The final issue is an accessibility one. Fonts are specified in points. Points are a unit of print measurement and do not translate consistently to the web. Different operating system and browser combinations can show the same 12pt as anything from 16px in height to 20px (large fonts) or even up to 30px for those who have changed their OS settings because of poor vision. Internet Explorer for example uses the OS settings to determine how many pixels are used while Firefox does not. So save points, inches and centimeters for print stylesheets. Use ems or percentages for fonts sizing on websites. An em will always use the operating system settings to determine the size of the text to use when it renders the page.
Design Decisions
Our first design decision after cleaning up the page is what type of layout would work best for the site content. Looking at the content there is a mix of information types. Some of the page content is tabular data and others are lists of links which doesn’t immediately suggest a multi column page layout. Instead, we opted for a single column layout with some sections split into two columns.
Next, as with our last site redesign we looked to the image on the current page for a color scheme. That’s where we ran into our first issue. The current image is too small for the wide screen format most commonly found in monitors now. Plus, the quality of the image wasn’t something that could be rescaled easily but the concept was definitely one we wanted to keep. So using a couple of sites that have out of copyright images (http://totallyfreeimages.com/ and Life Magazine hosted by Google) from the 1800s we dubbed in some more folks. Another part of the image that struck us as odd was the inclusion of an outline of the state of North Carolina with what we took to be Alamance County colored in. The majority of the people we had looking at the existing site had no clue what that was until we explained it to them so we decided to remove it from the graphic. We also cut out the society logo and text in the image. What we ended up with is:
What we would like to see is the whole image redone from the original files to a size at least 950px wide because frankly, the head section they created is much better than what I added in. By cutting out just this section we accomplished a couple of things. First, we can use the image as a background to the masthead and allow the page to scale down for viewing on small screen devices. Second, the text is now readable by screen readers and search engines and will scale according to the visitor’s settings.
We also felt that the colors in the society logo didn’t work well with the sepias that dominate the heads graphic so that was also cut out and moved to the body of the site. In keeping with the vintage primarily sepia header we used a subdued ecru sort of color instead of pure white for the content background and a light midtone for the page background.
Fonts
I asked the person who nominated this site for our redesign what font was used to create the site title in the image. Unfortunately, she didn’t know what it was and while we could have used the text cut out from the graphic it is a little pixelated. Instead looking at Google Fonts, we found a similar display font Parisiene to use for the headings. Sort of dresses it up a bit since there aren’t many graphics on the site.
Finishing Touches
Once we had decided on the basic layout the rest was pretty simple with one minor exception. That was that we had a bit of trouble getting the two side by side columns to line up correctly. The simplest solution was to put each column into a div with the .halfcol class assigned so that top margin/padding would be applied the same way.
Finally, to dress it up a bit more of antique look subtly rounded corners and a drop shadow were applied. Max-width instead of width was used on the container so the page would scale on smaller websites but still keep a readable line length on larger/higher resolution screens. Min-width was added to the .halfcol class so if the page was viewed on a narrow screen the columns would wrap instead of becoming so narrow that contents were hard to read. The end result is:
