First things first. This website now validates for both CSS 2.1 and XHTML 1.0 Strict. That took quite a bit of scrubbing of my previous markup of silly things I did, like not nesting input elements within a block-level element or having improper markup for ampersands in the HTML (like using & instead of the correct &). Most of the errors in my markup were very minor and most can be attributed to the Twitter and Flickr widgets I was using. My CSS was nearly spotless except for a single error, my defining the list-style-type with an erroneous value of bullet as oppose to the correct disc.

I got so giddy in excitement that I walked down to Isaac’s room to announce to him that my blog’s CSS and HTML markup validates. But apparently, there are other things I can still do to make my website even more kick-ass in the back-end.

Which led me to the Yslow plugin for Firebug. Developed by Yahoo!, the plugin allows web developers to run tests on their websites based on a set of rules for high-performance web pages. I managed to improved my score from a very lousy 64 percent (a big fat D) to a very respectable 89 percent (B). I can raise that easily and gain an A-rating by reducing the number of my DNS lookups. I am, however, unwilling to part with either Google Analytics, Flickr, or Twitter. I can attempt to find a way to force my server to GZIP the Javascript, but it is rather difficult. On the other hand, I managed to find a way to use GZIP site-wide which has resulted in at least 1.5 seconds difference in load times.

CSS and Plugins

Did you notice that I changed the styling of my h4 tags? No, well, that is good as you are not supposed to notice it.

One thing that separates a good designer from a bad one is his attention to details. The devil is very much in the details, especially in web design. Except that I get a bit carried away sometimes with CSS and I find myself spending 30 minutes switching between two different font-sizes with just .05em of difference between them. And footer at the bottom? I reduced the extra space by 75px. Not really important, but I spent tens of minutes tweaking the code until it felt just right.

I recently installed µAudio Player, WP-PageNavi, Post Template, GZIP Output, WP CSS, WP JS, and WP Super Cache plugins for WordPress. All of the are quite nifty with the first three providing a functionality that I needed and the rest working in consort with each other to provide my website with boosts in speed.

Internet Explorer 6

I hate that stupid browser. That being said, for the most part my website looks somewhat similar in IE6 as it is with IE7, Firefox, and Safari. There were a few minor discrepancies (the logo is not completely showing) and a major one (mostly an issue with padding-left), but all in all it degrades quite beautifully.

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:

1. Akismet
2. Archives for a category
3. Contact Form 7
4. FD Feedburner Plugin
5. Get Recent Comments
6. Head META Description
7. Simply Exclude
8. Ultimate Noindex Nofollow Tool
9. 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.