Recently, I did a website refresh for a client who requested an updated color scheme and document type, keeping the basic layout, navigation structure, and content. One other major change was an automated method of identifying and displaying the latest uploaded statistical files on associated pages.
If you compare the before-and-after screenshots below, everything is still there, pretty much in the same position. The big differences are more white space, more legible fonts, and a limited color scheme.
Since the site will be maintained using MS Expression Web, I used EW to build it locally and uploaded the files from my PC to the remote server. EW does not require FrontPage extensions, so it’s a reasonable choice for a site owner when moving away from older FrontPage sites.
Expression Web does a great job of tracking file changes and hyperlink status. The search and replace tools are excellent, with support for regular expressions and HTML tags as well as text.
A simple refresh or partial redesign can quickly make amazing differences in the look, feel, and responsiveness of a site. Nevertheless, all sites eventually need a realignment of content and presentation to mesh with the changing ways people look for and use information. Ultimately, a "realign" must deal with the deeper question of what will continue to bring people to the site, followed by a thoughtful redesign that works for the audience and intended use of the site.
The site for this project was RPIRatings.com, which has focused, in-depth, and original content, featuring articles and statistics about collegiate basketball ratings. Interested fans may subscribe to detailed statistical reports. The site has a long history, a large following, and a very respectable Google PageRank of 5. It was fun to work with an open-minded site owner and exciting to see the site’s new look unfold.
It isn’t really possible to achieve an attractive refresh by changing only the colors and doctype, so the path to polished-looking results, while not a redesign, included several related tasks:
- Revision of the banner and logo to harmonize with the new sitewide color scheme.
- Recoding of table-based layouts to use HTML5 elements.
- A fixed-width layout, with three-columns for the home page and two-columns for inside pages. A full-width one-column layout was also needed on one page.
- New CSS-based vertical navigation menus to replace the original horizontal image-map navigation bar and a table-based vertical column of links.
- Updated typography for readable headlines, body text, and pre-formatted statistics. The new text is bigger and bolder.
- Updated and new accent graphics for the home page sidebar.
- A simple PHP script for identifying and displaying the latest text file in each statistics folder.
- PHP "includes" for repetitive information, such as the header, sidebars, and footer.
Screenshots (reduced 50%) of the original and revised home page are shown below:
Original Home Page (3-column fixed 740px layout)
Refreshed Home Page (3-column fixed 1000px layout)
Overall, the revisions created a clean new look, readability, simplified HTML code, and reduced maintenance. Refreshing!