Redesign: OverClocked Remix ‘Remixed!’
I really admired the transition » OverClocked Remix made when the webmaster and remixer extraordinaire, » David Lloyd redesigned it into the current version 3. His goal was to heighten the sense of community throughout the site, and to add extra resources to each remix, like links to further webpages about a certain game or images etc. The site was also managed through PHP, which made maintenance much easier.
What I wanted to achieve with this redesign (which, as always, I did primarily for my own amusement), was to relax the design a bit, which was a bit graphic and JavaScript-heavy, and create a more functional design, where the important parts of the page stand out more and the overall look is one of greater consistency.
Things I wished to address in » the original, hopefully rectified in » the redesign:
- While the DHTML navigation bar at the top is a nice trick, it's clunky, somewhat missable, and requires two levels of interaction to get to certain core pages (to get to the Chat page, for example, or the submission guidelines). It also gets filtered out by my ad-suppressing software — not good. I simplified it and added more links to some top-level pages. The links were created from a styled unordered list, inspired by a similar design by » zeldman.
- The header graphic is enormous (over 890x340 pixels and a crippling 82kb). Obviously, creating a strong impact was important, but this seems like overkill, taking up the entire screen at 800x600 resolution (still a very popular screen size). This point becomes especially important when you realise that this header graphic is repeated again on every page of the site. It would have to be downsized. At the same time I didn't want to reduce the image so much that it becomes unimportant to the page. In the end, I compromised and allowed the graphic to resize itself depending on the window-size. This went along well with the overall liquid-layout of the page.
The graphic was sized and sharpened to look best at 1024x768, a halfway-house between the lowest and highest resolutions in operation. At certain sizes it doesn't look so hot, but this is mainly because I was cutting up the graphic that I just saved from the original and resized myself. If I could resize the file with its original layers etc. in Photoshop or whatever, I'd imagine this problem would go away. - The overall colour scheme was fine, if a little dark and brooding. I've lightened it up a tiny bit, especially the headings (which flow logically, of course), so that you're focused on, and guided through the text. The contrast between background and foreground has been heightened for increased legibility.
Also, the text was defined in points, a poor unit which makes text un-resizable in IE. At the small size it's at (8pt) this will cause trouble for many users. I've used ems, which are resizable and react to the users' default text size. It's still not a perfect solution, but with text-sizing, there rarely is one. - There was no place for a search form in the original, so I added one at the top. This can easily be added through a site like » Atomz, or a PHP search engine could be written.
- I found the alphabet browsing a little difficult — requiring users to click on links so small is never advisable. I made this somewhat more usable by simply adding some box properties (border and some padding) to the links when hovered on. I'm talkin' about Fitts' Law here, if you can dig it. I also made the purpose of the letters clear with the 'Browse by Game' label and gave the group itself a border to help it stand out more.
- Each of the main boxes on the page were given equal weight in the original design. I tried to differentiate them using colour, borders and position. The header of the page is clearly marked with a black background. Then you move down to the download box on the left, the focus of most pages, and then to the content and supporting links. The navigation is easily found when you need it.
- While I usually don't go out of my way to service Netscape 4, OverClocked looked passable in it, so I wrote a simple stylesheet (basic.css) that organises the page a bit and maintains the same colour scheme. NN4 wouldn't be able to handle the full stylesheet (styles.css), so it's imported into the document, and this solution works fine.
- The 8x845 background image, while small itself, was tiled across the entire screen. This creates a performance problem on many systems, as tiling a graphic is a slow process, and the rest of the page cannot display on top until it's done. Therefore, switching between Remix windows can be very slow. I removed the background entirely and graded the background colours on the page, light to dark from the bottom, which recreates a similar-feeling effect. Incidentally, the fundamental inspiration for this design came from » ledzep.com, with its wonderful horizontal lines.
Design Comparison
- HTML File size
- Original: 15kb (round-about)
- Redesign: 11.27kb, progressive download (no tables to parse)
- CSS File-size
- Original: 2.48kb
- Redesign: 3.12kb
- Graphics (sans banner ad)
- Original: 2 backgrounds, 2 images. Total: 89.52kb
- Redesign: 2 images. Total: 29.25kb
- Standards Compliance
- Original: non-standard, non-declared HTML 4 Transitional
- Redesign: Valid XHTML 1.0 Transitional and CSS-2
- Browser Compatibility
- Original: IE (good), NN6 (good), Opera6 (good), NN4.7 (illegible in places)
- Redesign: IE (good), NN6 (good), Opera6 (good), NN4.7 (functional)
All comments should be sent to me, Ross at yourhtmlsource@f2s.com
Standard Disclaimer: I am not affiliated with OverClocked Remix in any way except being a big fan.