The Redesign of aheram.com
After four weeks and more than a hundred hours poring over code, reading various documentation, navigating help forums, editing content, and making a lot of mistakes along the way, the website project that is aheram.com is finally complete.
My website’s old design was something I was proud of. It was clean, it was readable, and it did what I intended it to do. The only problem was that it was completely static. I attempted to rectify that by utilizing MagpieRSS to parse feeds from my blogs onto my static index.htm to create an appearance of dynamic content. But beyond that, it lacked the functionality that I needed.
Then there is the small problem called my existing main blog, Aheram Takes On…. It was hosted on Blogger and it was visually very different from the website. While I am quite proud of the design, the blog being hosted on Blogger made it very difficult to integrate it with my main website.
A proposed redesign of aheram.com.
Earlier this year, I created a draft of a design that is an homage to the original Aheram Takes On… template. I was really excited about it up until I tested to see how it will look like with text and some photography. It was a disaster. The design’s very strength makes it a poor companion to text and photography. Though, only occupying the header and the footer, it became a distraction. It will be a challenge to make my existing content fit the design and if I am going to do that, I am already heading the wrong direction.
Inspiration
It was Felicia Day’s website that finally jumpstarted me into redesigning my website. Unlike other famous celebrities’ websites, hers made sense. It was clean, it was professional, and it was easy to find whatever it is you want to find out about her. A lot of her ideas, I had adopted, particularly the styling of the main page, the projects page, and the press page. While I adopted some of her really great ideas, the code that built it, however, was entirely my creation.
It was also what convinced me to switch to WordPress. I did not realize I could style templates according to the category a content belongs to. That functionality makes it more than a blogging platform. Through clever coding and styling and category exclusion, I can make WordPress into a full-fledged CMS. I started reading more into it and became more convinced at how powerful WordPress is. At this point, I knew nothing about PHP. That, however, did not discourage me.
Drafts and Notes
Several sheets of drafts and notes.
Most of everything I do first manifests itself inside the pages of my various notebooks as tiny notes, doodles, or rough sketches. Sketches helps me conceptualize a layout idea. I would draw and redraw an idea over and over until I am satisfied with it. Lists help me prioritize. They represent goals that must be met in order to continue to the next challenge. Without my various lists, I would end up disorganized. Worse, I might end up pursuing a piece of code that has tenuous relation to getting my website up and running. I like novel pieces of code. It is just unfortunate that very few them are actually useful.
Tools
The website is created with Espresso 1.0.1 on a Mac Book, powered by WordPress, hosted by Dreamhost, and tested extensively on Firefox with the Web Developer plugin.
WordPress plugins used:
- Akismet
- Archives for a category
- Contact Form 7
- FD Feedburner Plugin
- Get Recent Comments
- Head META Description
- Simply Exclude
- Ultimate Noindex Nofollow Tool
- Google SiteMap
Typography
There are only three fonts used in this website: Base02 for the logo, Georgia for blockquote elements, and Trebuchet MS for everything else. For great typography ideas, I looked to I Love Typography for inspiration. I adopted their use of bylines, faint bottom border, and ample use of space. My main focus was readability. I want the text to stand out on its own and for the right reasons. I have also started to use the heading tags for their intended purposes, though, more for a structurally sound document than for search-engine optimization.
