Redesign 2008 By Chicken

Between October 2007 and February 2008 I've spent most of my time re-coding the whole site. I had spent about 6 months up until that point developing a content management system, and learning a lot through trial and error. This set the foundation for me to take on a project of my own: in this case, FlashStuf.

This redesign started as a simple desire for a categories list to better organize the Flash games and animations. I thought about the categories I would want; how to group them and so on, and then about how I'd go about moving all those files that were at the time just static links on an HTML page. I needed a dynamic site; where I could update one field to a movie and reflect that change anywhere that movie was linked. This soon evolved into what you see now.

I first addressed the backend of the site, and creating a platform that allows me to easily and much less painfully make general updates to the site. Any design changes to a specific section are also simplified because only one page needs to be edited. Everything is intertwined, so related files and categories are automatically added to pages, even as new content comes in.

Site Styles

The site has been designed with the most-recently created style, Flow, in mind. However, I wanted to take it a step further. I created a core stylesheet, that provides the entire site layout and default fonts, colors, and sizes. So for any newly created stylesheets (such as Flow), I only modify the values I want changed and leave out everything that I don't need to deviate from the core stylesheet. This will keep any new styles up-to-date with future design changes because they can be added to the core stylesheet and previously made styles will pick up on the changes automatically.

Page Structure

FlashStuf's HTML got a remake this time around. Now, more symantically-correct markup is used. For the most part, this is just good practice. But it also helped clean up the stylesheets and the pages themselves because the code is easier to read and more planned in its structural layout. For example, page headings are now surrounded by <h1>'s instead of <div>'s. When looking just at the code, h1 means a lot more than div (especially when everything else on the page is a div)

FlashStuf Extended

I've always wanted to have a completely customizable site that really lets the visitor pick what they want to see. Ever since I created FlashStuf Favorites I've wanted to build on that, and offer even more features. I created the FlashStuf Pass, which maintains any previous users' Favorites information, but also allows them to get to any other services developed. For example, the newly-created FlashStuf Apps features web applications that allow visitors to access their information from any computer, but also integrate with other FlashStuf features, like Favorites. For example, Todo List allows you to keep a simple to-do list on the internet. At any time you can download it in text form, make any changes, and upload it again. Your todo items will also show up on FlashStuf.

It's created an integration between all sites, but allowed for the greater customization I've always wanted. It's also given me the ability to have moderators that can post on the site, and offer special privilages to artists who register. But no matter who you are, it allows for a much more personal experience.

Subtle Differences

I've also converted the entire new site to cleaner URLs. It's a lot cooler than it might sound, but actually serves a purpose by giving search engines a friendly URL (friendly as in, without "?variable=afile&nonsense=792390103&somemore=randomstuff" at the end of every page). So instead of something like http://www.flashstuf.com/text/index.php?filename=redesign2008, you get to see http://www.flashstuf.com/text/redesign2008.

And for the Internet Explorer users out there, you no longer have to click on a Flash game or movie to "activate" it. 

Related: Redesign 2006