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.

After working for five incredibly long days and producing several pages of code revisions, an updated version of Creativist Pursuits went live early Monday morning. It is nearly identical to its previous incarnation, but this time it has dynamic content.

Anatomy of a website.

My friend Stacy Wiedmaier was the one who originally implanted the idea into my head of turning Creativist Pursuits into one-stop shop for everything Aheram. The goal is to create a sort of web portal that follows everything I do in the online medium and publishes snippets and previews of every content produced by me. A sort of supra-MySpace that is more than twice as fun to create and with an underlying code that looks as good and clean as its graphics.

Not a Vanity Page

One thing Creativist Pursuits is not is a vanity site. I believe it offers something more than your usual vanity page. It is a self-updating website that pulls from various sites the content generated by me. It is not static and people can actually find new content everyday, from Twitter updates to newest Flickr uploads to recently published articles from my blogs. However, it is not my intention to keep the casual visitor in Creativist Pursuits. My goal is to funnel them as quickly as possible to my content.

An overwhelming number of visitors to Creativist Pursuits landed there not because of direct traffic, but rather were referred there by external sites.

1. Most people do not type the address of my website into their address bar from memory in order to access my site. Most are referrals. A lot of it from outside sites like MySpace and Flickr. Some are referred to the website by other people talking about me in blogs or news articles. And a few are referred to my website by the Moo cards I hand out. In many of the social networking profiles I have, I link to my main website.
2. If they are interested enough, they will usually click the link and land…
3. On Creativist Pursuits. Successful implementation of the ideas I am putting forward in this post will ensure that people are
4. ..properly funneled to my…
5. …content. Whether it be my blog, my about me page, my contact information, my Flickr photographs, or one my many social networking profiles, the goal of Creativist Pursuits is to guide people to those pages.

It is the digital middleman, the online concierge, the traffic warden in a world of Aheram-generated content.

User Interface

If it is takes more than five seconds for people to find what they are looking for in this website, I have failed. User interface does not apply to just iPods and computers, it also applies to the website. One of the challenges I faced was how I can best make sure that the design of the website complements its function in streamlining the user experience of the casual visitor. I made generous use of obvious navigational graphics. They are displayed in a very easy-to-read font, yet remain aesthetically consistent with the design scheme. Also, I made sure that the graphics I use worked for me and the website. They are not merely there to look pretty, they actually do serve multiple important functions. Not only do they provide a preview of the content they link to, they also serve to attract the attention of the casual visitor to the information that surrounds it. The visitor’s eyes are drawn to the distinctive graphic that accurately represents the content the graphic itself links to.

The interface of my website should not be a hindrance between my audience and my content. I utilized white-space to effectively compartmentalize each block of information so that the casual visitor can easily navigate and separate different kinds of content from each other.

Social Networking and Feeds

There is a bit more emphasis now with social networking in Creativist Pursuits. My Twitter and Flickr, as well as my profiles in MySpace, Facebook, and LinkedIn are prominently linked to in the index page. Joining those are links to various RSS feeds of my regularly updated content. Clicking » SOCIAL NETWORKS will lead the visitor to an even larger list of social networks I am a part of.

Dynamic Content and XML Parsing

One of the biggest changes implemented in the site is the addition of an XML parser. Using a Magpie derivative called Feed2JS, I am able to republish snippets of my blog posts in my website. Unlike the original Magpie RSS (which was quite unwieldy), Feed2JS was painless to install. It parses RSS feeds from FeedBurner and converts it to a simple JavaScript code that I am able to include in my website’s source code. It looks clean, it is painless to edit, and it just works. The republished feeds joins the Twitter and Flickr badges in providing new content to Creativist Pursuits.

Thinking Ahead

I created a mock up of what I intend to do if I were to announce an important event or news like an upcoming gallery exhibition or something. Of course, it will be temporary and will most likely go up and remain up from a week prior to the event until the duration of the event. I am debating if there is some way I can automate this to make this as painless as possible for me. Most likely, just adding the HTML snippet is a lot simpler and easier.

The Purpose of All of This

The purpose of Creativist Pursuits two-fold and quite simple. Create an audience of my work and then facilitate opportunities by exposing audiences to my work. By providing ways to easily contact me, friend me on MySpace, drop me a line, follow me on Twitter, or view my work while making it very easy to do so, I am creating a base of audience that will appreciate and enjoy my creativist pursuits. ]]> http://aheram.com/blog/web-design/web-design-dynamic-creativist-pursuits/feed/ 0 http://aheram.com/blog/web-design/web-design-redesign-of-cats-eye/ http://aheram.com/blog/web-design/web-design-redesign-of-cats-eye/#comments Sun, 23 Mar 2008 12:26:00 +0000 aheram http://localhost:8888/?p=101 Adventures in Web Design

Design by Jayel Aheram.

The redesign of Cat’s Eye was very straight-forward once I made the decision to make the photography the lone and focal point of the design. The new design possesses a simple black-and-gray background that do not distract from the photographs I choose to exhibit. The three column layout I adopted is not as rigid as it seems. Compared to last design, I can display as many photographs and content as I can if I so choose.

The design aesthetic is meant to be reminiscent of a photography magazine. Each box suppose to be like a mini-page of that magazine. Because it is the goal of the overall template to not overwhelm the photography, font colors were limited to just two tones: light gray and yellow. The yellow is meant to be striking as it will be the font used for links and headers. It is meant to be noticeable and it achieves that purpose. I had thought of other colors to use, but in the end it was yellow that I went with.