Redesign–Day 7

by cdwise 15. March 2014 19:29

Okay, I initially said we weren’t going to do any WordPress themes but after consideration and looking at some of the sites submitted I decided to show how a few simple changes to a Wordpress preinstalled template can personalize a site.

Site is:  needhelp4mac.com

Which uses the twentyeleven theme. As submitted it looked like

image

By uploading a custom image for the header it already looks different:

image

But that sure takes up a lot of space so scrolling down from where uploaded the image to where it says Header Text and uncheck the option to display it:

clip_image001 Results in:

 image

Finally, by adding the following CSS to a custom stylesheet:

.custom-background {
    background: rgb(249,249,251);
/* Old browsers */
    background: linear-gradient(45deg,rgba(249,249,251,1) 0%,rgba(215,214,219,1)
19%,rgba(249,249,251,1) 49%,rgba(215,214,219,1) 87%,rgba(249,249,251,1) 100%); } #page { box-shadow: 10px 10px 5px #A7A7A9; }

We get a nice drop shadow effect on the page with a diagonal gradient background, all done with CSS :

image

Not including the time to create or edit the image used you have a custom look in less than 10 minutes.

Tags:

CSS | Web Design | Training | Mac

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 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 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



Outstanding Hosting