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

Taking Advantage of CSS Inheritance

by cdwise 19. December 2011 21:45

I've been seeing a lot of posts asking for help with link styles on several of the mail lists and forums I belong to and thought I'd mention the benefits of using inheritance to slim down your CSS and make it a little easier to manage.

What I've been seeing is things like:

#menu a:link {
color: #CC0000;
text-decoration: none;
font: .85em Geneva, Tahoma, sans-serif bold;
}
#menu a:visited {
color: #808080;
text-decoration: none;
font: .85em Geneva, Tahoma, sans-serif bold;
}
#menu a:active {
color: #800000;
text-decoration: none;
font: .85em Geneva, Tahoma, sans-serif bold;
}
#menu a:hover {
color: #CC0000;
text-decoration: underline;
font: .85em Geneva, Tahoma, sans-serif bold;
}

Notice that you are repeating a lot of the same style property/definitions in each pseudo class when in most cases only one of the style definitions change. You can simplify this and make it easier to spot what changes in each pseudo class by using:

#menu a {
color: #CC0000;
text-decoration: none;
font: .85em Geneva, Tahoma, sans-serif bold;
}
#menu a:visited {
color: #808080;
}
#menu a:active {
color: #800000;
}
#menu a:hover {
text-decoration: underline;
}

By using the a instead of the a:link all of the properties you define are inherited by all pseudo classes so that you only need to change the properties that vary in the state you are defining. This cuts down on your CSS code AND has the added benefit of making it far easier to see what the differences are in that state from the default link.

Tags:

CSS

CSS Based Menus

by cdwise 23. April 2009 23:34

Today’s live meeting on CSS menus:

Join the meeting.
Audio Information
Computer Audio
To use computer audio, you need speakers and microphone, or a headset.
First Time Users:
To save time before the meeting, check your system to make sure it is ready to use Microsoft Office Live Meeting.
Troubleshooting
Unable to join the meeting? Follow these steps:

1. Copy this address and paste it into your web browser:
https://www.livemeeting.com/cc/mvp/join

2. Copy and paste the required information:
Meeting ID: BS7CG2
Entry Code: g'nRQ;P8k
Location: https://www.livemeeting.com/cc/mvp

If you still cannot enter the meeting, contact support

This is the zip file for the menus discussed and created during the April 22, 2009 Live Meeting on CSS menus. All of the code as well as a text based tutorial on using the images and code to create three types of menus are included in the zip file. Download it and extract to your hard drive.

Types of menus:

  1. Simple horizontal CSS menu with image based rollovers
  2. Simple vertical (suitable for sidebar or floated) CSS menu with image based rollovers
  3. Tutorial on using the Project Seven CSS Express Menus with Expression Web

Tags: ,

CSS | LiveMeeting | Web Design



Outstanding Hosting