Redesign Day 1

by cdwise 9. March 2014 16:06

First site selected in our remake a day is for the Johnson Space Center Astronomical Society http://www.jscas.net  This is written as notes while the redesign is in progress, so take it as commentary as the redesign process goes along. This is the way the home page looked when we first saw it.

original

Issues

First issue I noticed s that the site is very busy with lots of colors and a scrolling banner and is way too wide requiring approximately 1250px for the entire page to display. This makes it difficult to use and understand the abundant information on the page.  Plus all the fonts are specified in points which are not scalable in IE nor will browsers like Firefox honor OS font size settings. So if you have a high resolution screen with large fonts set IE will render 12pt as 20 pixels but 16px in Firefox.  While I understand the idea behind the star field as a page background I think the site could be best served with something not so busy.  The page as rendered weighs in at over 550k which makes it load slowly on anything but a fast connection and not one you would want to pull down over cellular.

Our first site redesign is now live and the write up is at

http://by-expression.com/post/2014/03/09/Redesign-Day-1 Original site is at http://www.jscas.net/ and the redesign can be seen at http://wizerways.net/jscas/ there is also a second option but you'll have to read the write up to the link for it.

We still haven't chosen the last 2 sites to be redesigned. There are some under consideration but it isn't too late to enter your site.

Jan2014HSTNext thing I noticed is that what looks like a table with links to data is actually an image of another site’s content. What is really confusing about the images is that there are instructions to click what looks like links but in reality is simply part of the image as shown to the right.

This is not only something that confuses visitors but also needs to have the permission of the site you are taking the image from. Credit is given to the website Heaven Above but I couldn’t find a link to their site only the static images.

Overall there is a lot of information on the page that could benefit from a more structured approach and a consistent more subdued color scheme without background images that distract from the excellent photos and content.

So the first thing I did was to pull down a copy of the home page using Microsoft Expression Web to get what it is the browser gets. Since the purpose here is a simple remake of how a page displays with the permission of the site owner we don’t really need or want anything other than what the browser renders. In the redesign we removed scripts such as the Moon Phase widget that the site owner may want to add back.

The Process

Step 1 – Clean-up

Once I had a copy of the site on my hard drive the first thing I did was to remove all the inline code and styles. Something that started as:

<p align="left" class="style18">&nbsp;</p>
<p align="left" class="style58"><img src="colorlin.gif" width="540" height="4" /></p>
<p align="left" class="style10"><img src="dwarf.jpg" alt="" width="500" height="300" /></p>
<p align="left" class="style58"><a href="http://astrobeck.com/__oneclick_uploads/2011/11/moon-venus-fort.jpg" class="style34">Becky Ramotowski's wonderful picture at Ft. McKavett</a>    </p>
<p align="left" class="style58"><img src="colorlin.gif" width="540" height="4" /></p>
<p align="left" class="style18"><span class="style58">Below: Doug Holland's recent images of IC405 and IC1848</span></p>
<p align="left" class="style18"><img src="doug1.jpg" width="525" height="438" /></p>
<p align="left" class="style18"><img src="Doug2.jpg" width="520" height="478" /></p></th>

Note the serious case of classitis not to mention the extraneous <th> and empty <p> elements which appear to be used for spacing. Using the keyboard, whether it is the spacebar or enter key for a new paragraph can result in very inconsistent rendering cross browser. After cleaning up the page the same code above looks like:

<p><img src="colorlin.gif" width="540" height="4" /></p>
<p><img src="dwarf.jpg" alt="" width="500" height="300" /></p>
<p><a href="http://astrobeck.com/__oneclick_uploads/2011/11/moon-venus-fort.jpg">Becky Ramotowski's wonderful picture at Ft. McKavett</a></p>
<p><img src="colorlin.gif" width="540" height="4" /></p>
<p>Below: Doug Holland's recent images of IC405 and IC1848</p>
<p><img src="doug1.jpg" width="525" height="438" /></p>
<p><img src="Doug2.jpg" width="520" height="478" /></p>

After removing just the formatting from the code and inappropriate mark-up such as

<div>
    <div>
        By Jim Barnett, CNN</div>
    <div>
        updated 3:52 PM EDT, Sat October 6, 2012</div>
</div>

Where divs were used instead of <p> and <h1> apparently used for text size when no other headers were used on the page. This reduced the HTML code from 22k down to 8.5k not exactly enough to break the bank but each of those bits of HTML code that was eliminated makes the page easier to maintain in the long run.

Step 2 – Basic Layout

Once the site’s code was cleaned up and removed the duplicate image (doug2.jpg) the page now looks like this. Which lets me view the content without being distracted by all the graphics and scattered placement. It appears that the page content is broken into two categories: information about the club, and astronomy related news – photos.  Your site layout should reflect the content so to me this means that a two column layout would be natural for this site.

Step 3 – Restructuring

Next the decision to fix the page size was made and a black background applied to everything except the content section. Then using a color picker the sidebar color was chosen. Since astronomy is the focus of both the club and the site club information was put in the smaller sidebar to keep the primary focus on the astronomy related content.  How this will play on the internal pages will likely require a bit of content restructuring as well but is essential on the home page. However, a consistent appearance in layout, color scheme (shocking to go from the home page to the newsletter page for example), page width – only the home page is so wide means that restructuring is something that needs to be done anyway.

Finalizing the Color Scheme

Next thing to do is decide on a color scheme. Typically, I’ll take the logo or other image and use it to choose a color scheme. If you want help coming up with a color scheme based on an image you may want to check out Adobe Kuler.  I liked the colors in some of the images on the home page but none were a good shape/size for a masthead image. Fortunately for an astronomy related website there is a good free source of royalty free images. – NASA and if you enjoy astronomy you may want to bookmark their image of the day site. Though ultimately after looking at available options the 3 of us at by-expression.com decided to go with a solid background and one of the NASA images for the masthead. Using this image we created a simple color scheme for a two column layout by adding #F9F7EE to the container to create a left colored sidebar.

Note: This method of coloring a sidebar requires that the content of the larger column be longer than that of the sidebar. To get equal height columns without using JavaScript with current browser support of CSS 3 this is the simplest method.

Fixing the Heaven Above images by removing the information about the period and orbit covered in the table to text and trimming each image to remove the click to follow information not only makes it less confusing but also reduces the size of the image for faster download. For example the image above is a 41.7k jpg. Replacing everything but the table and saving as an 8bit gif brings it down to 4.98k.

Jan2014HST

Unless we change the hyperlink color it would still be somewhat confusing with the blue links. So it might be best to make it a gray scale image like:

Jan2014HST-bw

Which is what we decided to go with leaving the hyperlink color its default blue. The final result is:

SNAGHTML48ef850e

Alternative

imageInstead of having a series of images on the home page use an image rotator to cycle through a few selected photos. This would have the benefit of shortening the page but would make it heavier to load. In this example the free Easy Rotator from DWUser was used to create a simple slideshow. If you use Dreamweaver they have an extension to integrate it into Dreamweaver or you can use the standalone version.  We used the free version for the sample page which is available for use on non-profit sites but there are more options available with the Pro version should you want to use it.

If you know jQuery you can easily build your own slideshow but for the purposes of this week of redesign we chose options that minimize the amount of scripting you need to know and are free or very low cost are being used.

Finished Design Links

Tags:

CSS | Expression Web | Web Design

Pingbacks and trackbacks (1)+

Comments are closed


Outstanding Hosting