Site Redesign Winners

A few weeks ago, Cheryl Wise offered to redesign one page of a site you could submit to Site Makeover Week. The offer was advertised on a number of mailing lists and groups. It was surprising to me that not more folks took advantage of this offer. The sites chosen were:

Redesign Day 1

Site: Johnson Space Center Astronomical Society

Redesign: http://wizerways.net/jscas/

Write UpRedesign Day 1

Redesign–Day 2

Site: John McGhie (This is a copy of the original site as John has already implemented the changes suggested.

Redesign: John McGhie

Write UpRedesign–Day 2

Redesign–Day 3

Site: The Alamance County Genealogical Society

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

Write UpRedesign–Day 3

Redesign–Day 4

Site: Elko-Lander-Eureka County Library System  in case the original is made over either using our redesign or another here is the original.

Redesign: http://wizerways.net/wizerways/elko/

Write UpRedesign–Day 4

Redesign Day 5

Site: TADA Productions

Redesign: Finished version with slideshow

Write UpRedesign Day 5

Redesign Day 6

Site: Foster, Colenso, Drummond, Leeman and Ussher

Redesignwizerways.net/mandx 

Write Up: Redesign Day 6

Redesign–Day 7

Site: Need Help 4 MAC

RedesignNeed Help 4 MAC (Redesign has already been implemented)

Write UpRedesign–Day 7

It will be interesting to see how many of the sites submitted take advantage of the suggestions Cheryl made and actually implement the redesign. So far, only two sites have.

Site Makeover Week

Cheryl Wise had a new post on her blog that those of you who are still using FrontPage and thinking of moving to Expression Web might be interested in. She will be selecting a site a day to do a makeover of. The site should be an  old FrontPage site or other at least a 5 year old design   The first redesign will be posted on her site and the byexpression 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. You can read all of the details and what is required of you to enter your site on her post Site Makeover Week.

Remember that Expression Web 4 is now available as a FREE download from Microsoft.

Remember The Order of Margin/Padding Shorthand with TROUBLE

Quite often when I am working on a site or designing templates for others, I use the following set of style rules which is considered css shorthand.

.imgrgt {
	padding: 5px 0px 5px 10px;
	float: right;
}

The question came up recently on one of the forums as to what do each of these px’s refer to? 

Remember The Order of Margin/Padding Shorthand with TROUBLE is an old article by Chris Coyier, but it remains a good reminder.

Use the word TROUBLE to remember the order of padding/margin amounts in CSS shorthand. The trick is that the first four consonants in the word are the first letters of "Top", "Right", "Bottom" and "Left". He even includes a small graphic you can print out as a reminder.

If all of the units of measurement are the same, you can use the following shorthand:

padding: 5px;
 

What Makes a Website Look Dated?

While browsing around the web this morning, I came across an interesting article that I would pass on to my readers. The article was written by James George and posted on the Design Festival website.

Having an outdated style for your website can leave a negative impression with your visitors, reduce your overall traffic, and lower the interest and credibility of your site. Retro or vintage designs are great, but retro/​vintage and outdated are two entirely different concepts, and no visitor will interpret an outdated site as a purposeful throwback to an earlier time.

He calls our attention to the following "pitfalls."

  1. Having Anything that is Flashing or Blinking – The flashing and blink icons and banners still turn up on occasion especially on hobby sites. To my way of thinking, there is nothing more annoying that flashing and blinking items on a page. This is especially true if you are trying to sell something to your viewer.
  2. Generic Colors -  for hyperlink states. I’m not sure I totally agree with this as sometimes the generic colors work well with a site. However, I do use CSS to style hyperlinks on my site with colors that match the rest of the site.
  3. Generic Typefaces -  Google Web Fonts makes it easy to integrate custom typefaces as part of your website. You don’t have to stick with Arial, Helvetica, Verdana and the other “web safe” typefaces. You might also consider the CSS3 @font-face Rule. The @font-face rule is only supported by newer browsers.
  4. Using Tables for Your Design – Tables are meant to be used to present data NOT for site layout. You can and should construct all of your layout ideas using CSS. Add dimension to your websites by using the text shadow and box shadow CSS properties. Remember though, these properties are only supported by newer, modern browsers
  5. Using Images Where You Could Use CSS – One of the most common uses of images was the ability to use "fancy fonts" for typography since not everyone might have the font you chose to use on their computer. With Google Web Fonts and @fontface integration, you can find almost any style of typeface that will match what you are looking for.
  6. Not Taking Advantage of CSS at All  – Using CSS will make your site much faster to load and much easier to update and maintain.
  7. Not Using Transparency in Logos & Images That Require It – Is yours a site that uses a certain background color with a logo image pasted against it? Looks kind of haphazard. Create your images with a transparent background and it will look so much more professional.

It’s important that you the web designer stay up-to-date on the latest practices so that YOUR website doesn’t look dated. Ask yourself if YOUR website has any of the qualities mentioned above. If so, you might want to consider redesigning it or at least updating it.

You can read What Makes a Website Look Dated? by visiting the Design Festival site.

Roots and Branches Mobile Friendly Site Template

There are two new mobile friendly templates available for you to use in your genealogy websites – or any site for that matter.  The Roots and Branches site template is available in two color combinations – shade of blue and brown. Both are fixed width, equal height columns AND mobile friendly.  Each package includes the DWT and all supporting files and folders for a small site. You can add pages, change the names of the pages or delete any pages you do not need.  Both templates are based on one of the newest templates offered on our sister site Expression Web Tutorials & Templates. Both templates will work with Expression Web. Don’t have Expression Web? You can download Expression Web (free version)  that is fully functional and has no time out date.

roots-and-branches-mobile

The Roots and Branches template (shown above) is available for download as a personal web package that can be imported directly into Expression Web.

roots-and-branches-screenshot

The Roots and Branches template (shown above) is available as a zipped file which includes not only the DWT but a blank template as well as a blank  template that uses server side includes for the top menu, the left sidebar and the footer. The DWT works with Expression Web and FrontPage 2003. The blank template and the template using ssi’s can be used with any web editor.