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

Redesign–Day 3

by cdwise 10. March 2014 23:59

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.

 topborder_4

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.

<html xmlns: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

<td height="1" align="left" valign="bottom" bordercolorlight="#0000FF"
 bordercolordark="#00FFFF" bordercolor="#5C5E8B" bgcolor="#C0C0C0" 
 style="width: 163px">
   <font size="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><font size="5">The 1850 and 1870 Census</font>
<font color="#800000"><br>
Go to <a href="alam_cen.html"><span class="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:

header

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:

SNAGHTML581e307c

http://wizerways.net/acgs/index.html

Tags:

CSS | Review | Web Browsers

Redesign–Day 2

by cdwise 10. March 2014 02:56

Our first site redesign was a busy old school style site with a background image behind the text, scrolling marquee and plenty of colors.

jm-originalFor our second site we choose its polar opposite, a one page resume site for a document engineer.  A screen capture of the original site is to the left.

As you can see being too busy isn’t exactly the issue with the site.  The author wanted something that would load quickly and serve as a place he could point potential clients to for an overview of the services offered.

While those are worthy goals the unconstrained width of the page can lead to long line lengths making it harder to read.

The Goal

For this redesign the object was a professional, fast loading resume. We also decided that since this was the only page and the primary purpose of the page is to get clients a responsive design that would work on a small screen like a phone would be advantageous.

Clean-up

Since the original page is so simple clean up was pretty quick consisting of removing some deprecated formatting and background color.

Layout & Colors

The focus on this site is on words and using text effectively with a fast loading page that works on a wide variety of browsers and devices. This is a site that needs to be effective even on IE 6. So our layout is very simple even though it uses some CSS 3 elements that will not render in IE 6. So we started with a basic two column layout not that much different from the site we did yesterday but without the backgrounds and allowing the MVP logo to drop below the masthead to minimize the size of the header.

This created a vey plain page, perhaps too plain so what could we do to make it pop without becoming cluttered or adding much weight to the page with graphics? The answer was a simple border and drop shadow. The entire CSS for laying out the page and styling the content consists of:

body {
    font-family: Calibri, "Segoe UI", Tahoma, Geneva, sans-serif;
    margin: 0 0 1em 0;
    padding: 0;
    background-color: #ccc;
    background: linear-gradient(to bottom, #ccc , #fff); 
} #container { width: 950px; margin: 0 auto; background-color: #fff; box-shadow: 10px 10px 5px #bbb; border: 1px solid #aaa; } #header { margin: 1px 10px; padding: 0; font-weight: bold; } #header .sitename { font-size: 3em; margin-bottom: 0; padding-bottom: 0; } #header p { margin-top: 0; padding-top: 0; font-size: 1.25em; } #leftcol { float: left; width: 260px; margin: 0; padding: 10px; } #mvp { width: 100px; text-align: center; float: right; font-size: .8em; } #rightcol { margin: 10px 10px 10px 300px; } .fltleft { float: left; margin-right: 1em; } .fltright { float: right; margin-left: 1em; } #footer { border-top: 1px solid #aaa; font-size: .8em; padding: 1px 10px; margin: 0; } a { text-decoration: none; color: #333; } a:hover { text-decoration: underline; }

That’s it, redefining a couple of HTML elements, using IDs for structural blocks and classes with easy to understand class names that help you know what the class does.

Responsive

But this is a resume site, shouldn’t it also work on a mobile device like a potential client’s phone?

Of course, and because we are using such simple mark-up it is very easy to add an @media section that reflows the content to eliminate horizontal scrolling on small screens (in this case defined as under 480px but you can choose the size where the page reflows.) Just add before the closing </style> element since a one page site does not need an external stylesheet, and no the double }} is not a typo but part of the @media style.:

/* max device width */
@media screen and (max-width: 480px) {
#container {
    width: 98%;
}
#leftcol {
    float: left;
    width: auto;
    margin: 10px;
}
#rightcol {
    margin: 10px;
}
}

Testing

Whenever you are concerned about browser compatibility you should test in multiple browsers and at different screen resolutions. Most modern browsers have the ability to test at various sizes and some browsers like Firefox and IE have the ability to change the user string and test emulating phones and other mobile devices. However, that doesn’t help when you need to test in multiple versions of Internet Explorer. Fortunately, Microsoft makes available Virtual Machines (time limited but you can always download a new one when the one you have expires) that will let you test in different versions of IE. These images and the virtualization software to use them are available free of charge at modern.ie for use on Windows, Mac and Linux platforms. Using various testing tools I was able to get screen shots like the ones below. First on a mobile screen then in a modern web browser.

SNAGHTML49795f38SNAGHTML497c4f0c

Finally, when viewed in Internet Explorer 5/6.

SNAGHTML498bb4d2

So what did we lose in older versions of Internet Explorer?

We lost the drop shadow in anything older than IE 10.

Centering in Internet Explorer 6 and below.

However, the basic site layout and design are there and the site is still attractive and functional.

John was so pleased with the redesign that he immediately updated his photo and availability making it live at http://www.john.mcghie.name/ 

Final Redesign

How it looked using the original site images and text John McGhie

Tags:

CSS | Dreamweaver | Expression Web | Training | Web Browsers | Web Design

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

Site Makeover Week

by cdwise 4. March 2014 09:54

It has been awhile since I’ve posted much primarily because I was in an accident last year that put recovery and learning to walk again to the top of my agenda. Now that I’m more or less back to normal it is time to return to adding to this site. When I started thinking about how to do that the idea of making over one old FrontPage or other at least 5 year old design a day for a week came to me.   The first redesign will be posted on this site and our facebook page on Sunday March 9 and the last one Saturday March 15.

So if you would like to have your site’s home page to be redesigned with modern HTML & CSS at no cost here is your opportunity.  Here are the rules:

  • You must request that your site be selected by posting the url to our facebook page https://www.facebook.com/byexpressioncom (If you like our page it will increase your chances of being selected.) Just to be clear, the site has to be your personal, non-profit that you created the site for or your own small business. It cannot be a site for a paying client.
  • There is no guarantee that your site will be selected since choosing the site will be at our sole discretion.
  • We will make over only one page of your website.
  • You are responsible for having copyright permission to use all graphics, text and any other content on the page on the existing page we makeover.
  • While you may indicate something that particularly troubles you in the current site design how the page is redesigned is solely up to by-expression.com
  • You will be able to use the redesign on your site as long as you acknowledge http://by-expression.com as the designer. You are under no obligation to use the redesign.

Good luck if you choose to participate.

Tags:



Outstanding Hosting