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

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

Replacing FP Hover Buttons

by cdwise 22. May 2013 09:55

This tutorial was created to show how easy it is to use buttons without using the deprecated FP Hover buttons. You can continue to use the button styles you are currently using but reduce your page code and speed up load time by replacing them with simple css and 3 buttons reused for each menu link. View the finished menu.

First create a hover button using the spacebar for the maximum number of letters you expect to use for your link text.

The person I created this tutorial for used the "glass" style button in blue so I'm also using it.  I generated three states for the button which look like:

link state over state  active state

Then I created an unordered list of links since lists are the proper mark-up for most menus. By default the menu now looks like:

To set these links apart as a menu the first thing I will do is to assign the list in an ID of menu. This allows me to target only those links in the menu for the new link styles.

#menu {
width: 7em;
margin: 0 auto; }

First thing I will do is create a #menu div to center the new menu in the #sidebar and provide a way to target just those links in the menu using descendent selectors and inheritance.

T to remove the list-style-item and remove all default margin and padding applying the following css:

#menu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

Which leaves me with a clean list that looks like:

list default styles removed

Next we create the default link style setting the background image to the link state image created above. Before I do that there is a choice I have to make. The traditional one which is to set the sizes for the image in pixels and text also in pixels so that they will match what the old hover buttons did however that will make it impossible to scale the text very well.

The alternative is to scale in ems which means we need to convert the pixel size of the image to ems. To do that you divide the width by 16px. That means that our 100px images above are 6.5em but since that was rounded of a bit I increased the width slightly to 6.75em and centered the image. I also set the line height to 1.25em (20px in the image) so that the text would be vertically aligned properly.  It also means that the image quality will degrade if they are scaled up too high but the text will remain sharp. I'm going for the second approach.

So now my menu link css is:

#menu a {
text-align: center;
line-height: 1.25em;
font-size: .9em;
width: 6.75em;
display: block;
color: #000080;
text-decoration: none;
margin-bottom: .75em;
background: url('images/over.jpg') center no-repeat;
}

Which looks like:

default menu

To get our rollover state we need to define the hover pseudo class for the menu which would be:

#menu a:hover {
background-image: url('images/over.jpg');
}

That's all it takes since we are not changing the link text or color. If you wanted to change the text color to say black on rollover you would simply add "color: #000;" to the style definition.

The final step is to create an active class that you would apply to the link for the current page. In this case I'm going to use black as the text color and the active image created earlier. So my active class would look like this:

.active {
background-image: url('images/active.jpg');
color: #000000;
}

To demonstrate its use I have added the "active" class to the link for this page to the menu in the left column. You will notice that it has black text and a darker button.

You now have the look of the buttons without the overhead of multiple states for each link and no JavaScript is required.

Tags:

Tutorial | Expression Web | CSS

I DON’T HATE VISUAL STUDIO

by cdwise 21. December 2012 20:31

I don't hate or despise Visual Studio, ASP.NET, IIS, Azure or any of the other products no matter what my comments in yesterday’s post may seem to imply. Nor do I think they suck. I think that Visual Studio is an excellent IDE for DEVELOPERS. You can create very good applications that do extremely complex tasks well with ASP.NET and Visual Studio but that isn't my space. Sure I can write real code but frankly, I've never enjoyed doing so not even back when I had my very first programming class in Basic back in 1974-5. Classic ASP did everything I needed and was easy to use. PHP fulfills that function for me now but I'm digressing.

There are a few developers who can produce a useable functional website with good user experience but they are few and far between just like there are some designers who can create elegant clean server side code. They are the exceptions. I know enough code not to screw up what a developer does and even rewrite some of it so that it better suits the ux/usability/accessibility needs. That actually makes me more skilled than most who work on design. I'm a member of a private community, invitation only of professional web designers/front-end developers. Less than 10-15% can or want to do more than integrate a form or address output from server side processing. That is pretty typical of the small design businesses demographics from what I've seen.

I had really high hopes that Microsoft had "got it" with the Expression toolset but even Microsoft’s choice of words confirms that I was wrong. There is a real need for web tools that are not "web development" in the sense that Microsoft has used it. The words are design, UX - User eXperience, UI - User Interface and even IA - Information Architecture. Those are what make people comfortable and able to effectively find/use the information in websites and web applications. I got into this field because back in the 90s I was a member of a group of women who all had babies about the same time. Prodigy Internet had a "beta" internet web program going on that included subscriber websites. I took all the stuff that had been circulating between our group in a envelope mailed from person to person with the latest baby pictures and scanned the photos. Then I created a site and published it to the beta hosting. Over the years I used several different programs to maintain it including AOLPress, which was the only decent piece of software that came from AOL.

I was creating sites for others by 1998 and commercially shortly thereafter using Dreamweaver. My introduction to FrontPage came because a client used it and wanted me to remake their site with it so they could maintain it. FrontPage wasn't ever as bad as many made it out to be but it was never as good as it should have been. Given its target market of information workers it was a decent enough product but always require care in using it if you were concerned about not Microsoft browsers.

Visual Interdev was a joke, Visual Studio is its successor and much better but it is still  a developer’s tool.

I joined HAL-PC when I found out they were starting a "Web Technolgies SIG" somewhere around 1999. The SIG leader had over 200 people show up for the first meeting. He started it because he wanted to learn more about creating database driven websites. He was an Access developer and was using Visual Interdev. Now Visual Interdev created truly horrible code with no usability at all using as it did the the worst bits of FrontPage “no need to know” anything about what you are tying to do canned themes and up/down, next/back navigation. The one thing he did do right was have a speaker at each session on CSS but he didn't use it himself. He relied 100% on the themes and navigation available in Visual Interdev. It was so bad I ended up creating a parallel site with a UI that would let visitors find the very useful code examples and FAQs the leader created as well as tutorials and articles contributed by various presenters. Eventually, I ended up taking over the site and as leader when he lost interest in writing code for the web.

Over the years I've tried, really tried to use Visual Studio but it doesn't make sense for what I do. It has a steep learning curve for someone who isn't a serious back-end developer. Its complexity and methodology is a good thing for programmers. It is not a good thing for whatever it is you want to call people who are design oriented. Drop a programmer into Photoshop or even Fireworks and tell them to use curves to correct white balance, use Bezier curves and do a comp with 256 layers then output with cmyk separation for the prepress and rgb optimized for the web or to css3 gradients and they will feel just as lost as your front-end designer/developer when they open Visual Studio.

EW was a breath of fresh air. Something that did a better job in many respects than any other available program. No longer did I need to use TopStyle for my CSS, Dreamweaver my HTML but there was one tool that I could use from start to finish.

When I criticize Visual Studio and/or any other of Microsoft's development tools it isn't because I think they are bad. They aren't, and some of them are extremely good but they are not design tools and never will be.

Tags:

Expression Web



Outstanding Hosting