Real Free Websites’ New Look
Monday, March 10th, 2008This past weekend Real Free Websites had a major redesign, moving from a more traditional design to a design more in-line with the Web 2.0 look. See what changed and what we kept!
What we dropped
The design on Real Free Websites is created through Cascading Style Sheets (CSS), which are separate files from the XHTML code. By separating design from the structure and content in this way, the process of changing appearance is much easier. To make wholescale changes in the design of the site we only had to alter one file: style.css and make the relevant graphics.
The colour scheme
The colour scheme was sampled from the colours in the header’s photos. By using a handful of colours we were able to give the website some life and improve the ease of use by putting more important content or areas in stronger colours.
The cramped look
By changing the size of margins and padding between elements of the website, there is now a much greater impression of space. Also, by replacing the tiled background with white space, the website feels a lot “lighter” and less oppressive.
The elastic width
The old website had a flexible width, which means that the width of the website area, expanded or contracted depending on the size of the browser window being used. While this provided some benefits for those with larger monitors, the extra effort to maintain the code was not considered worthwhile. Additionally, the design’s appearance was not optimized for a very large width, and so advantages of an elastic design were minimal.
The header
We used Photoshop CS3 (our image editing software of choice) to create a new customized header, which is one of the main design focal points of any website. The header uses freely available pictures from the Stock.xchng photo library.
The logo
The old logo was just what a logo should be:
- Sizeable
- Simple
- Relevant (comprised of the tags used to write XHTML: <>)
- Easily printable
Unfortunately, it just didn’t fit in with the new design, so we had to replace it. The new logo meets all of the above criteria as well, so although we are sad to say goodbye to the old logo, we are happy with the replacement!
The <HR> tag
This HR (“horizontal rule”) tag is coded in XHTML and creates a line like this:
While this is still valid strict XHTML, it is clearly an element of design. If we are aiming to keep design and structure and content separate, then it is best to keep this tag out of the code. So it’s gone now.
What we kept
The content
We made minor changes to our content, but we’re pretty happy with the way things are. We have had positive feedback about our copy and how it is clear and simple to follow.
The structure
The structure of Real Free Websites is very flat and minimal, and again we didn’t feel there was room for improvement here.
The valid XHTML
We are proud that we produce valid strict XHTML. This is helps to ensure websites appear consistently across different web browsers, is important for accessibility, “future-proofing” a website and may even improve search engine ranking. “Validity” is determined by the W3C, an international consortium that is the accepted web standards authority. Check this page now:
What do you think?
Have we replaced something that should have stayed? Have we overlooked a design feature that should have gone? We’d love to hear your comments.
If you’re thinking of a redesign yourself, don’t miss this article about website redesign in our resource section.
March 13th, 2008 at 4:44 pm
[…] hundreds of different designs applied to the same content. Real Free Websites recently underwent a redesign which was straightforward as the design and the content are coded entirely […]