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

Pingbacks and trackbacks (1)+

Comments are closed


Outstanding Hosting