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.

Instead of working on a new version of Creativist Pursuits, I had been tinkering with my photography website (Cat’s Eye: Photography by Jayel Aheram). After four straight days of struggling with CSS, HTML, and Javascript, I finally got it to work on all major browsers.

Cosmetically, few things have changed. It has the same color scheme, nearly identical layout, and identical content from the previous versions. Structurally, it is now a fully horizontally-scrolling website. I originally experimented with it with the portfolio pages, but I have decided to implement it across the entire website. I have installed both Central Scrutinizer’s The Horizontal Way and Particle Tree’s Lightbox Gone Wild. There were problems, of course. For one, Lightbox Gone Wild was not made for horizontally-scrolling websites. There were some problems I ran into:

I have implemented Lightbox in this mockup (http://www.aheram.net/photos/) of my photography website. In IE 7, when you activate lightbox, the page in the background scrolls to the very beginning (left), whereas in Firefox and Safari it stays put. This is unacceptable behavior from IE7.

I need the page to stay where it is at so that when the user exits the Lightbox, he will be right back where he started. This discrepancy in behavior between the browsers is quite upsetting.

But I eventually figured it out on my own.

I was looking at the lightbox.js and for the IE part of the code, there is not a snippet in the code to get what the page’s current X-position.

Just add this:

if (self.pageXOffset) { this.xPos = self.pageXOffset; } else if (document.documentElement && document.documentElement.scrollLeft){ this.xPos = document.documentElement.scrollLeft; } else if (document.body) { this.xPos = document.body.scrollLeft; }

After this:

if (self.pageYOffset) { this.yPos = self.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop){ this.yPos = document.documentElement.scrollTop; } else if (document.body) { this.yPos = document.body.scrollTop; }

And replace this:

if (browser == "Internet Explorer"){ this.setScroll(0,this.yPos); this.prepareIE("auto", "auto"); this.hideSelects("visible"); }

With this:

if (browser == "Internet Explorer"){ this.setScroll(this.xPos,this.yPos); this.prepareIE("auto", "auto"); this.hideSelects("visible"); }

Now, you can implement Lightbox Gone Wild with Horizontal Way websites.

The great thing about this is that I did not need to resort to Flash to achieve the slideshow-like scrolling.

Next project involves merging this blog with Creativist Pursuits (and phasing out my almost four-year old template to be more consistent with Creativist Pursuits) and utilizing a heavily modified Sweetcron for my lifestream (it is the future of blogging). You can check out my test lifestream in aheram.net. I have other web-based projects in the works, but my military commitments is getting in the way. ETA for the launch would be at least the next Marine Corps Ball.

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/journal/web-design-dynamic-creativist-pursuits/feed/ 0