Main » About » Site » How I made this?

I started working on this final design layout on June 19, 2003. I had the whole thing in my mind alot before that, so what I had to do was put it in code. That was the hard part, since this time around I had to make sure it worked in Mozilla and complied [mostly] with web standards. Man was all this hard or what?

Layout

My first step was to make the front index, that would incorporate content from all portions of the site. This was the first time I was working with an entirely CSS-based (read: tableless) layout. Every pixel mattered here. Using Owen Briggs' 3 column box lessons layout as a starting point, I went through at least five modifications before settling on the the final design.

Later on December 29th, after just a few hours of labor, I had a base page ready. This is the page that is basis of almost all pages at my site. It uses the simple and unobstrusive 2 columns - right menu layout from bluerobot.

Still I didn't have enough brains to figure out the photoblog layout, so I just took QuixoticPixel's photoblog templates and modified it extensively according to my taste, so that it ends up using the same column layout for the rest of the site.

Content

Mostly my everyday life events logged as I get time and energy to post them, along with photos, researched answers and interesting news and other links from accross the web, seperated into different blogs.

Almost the entire content of the site is saved in a MySQL database using MovableType. This gives me the freedom to use the data anywhere on the site, and add and remove any other accessories like comments, pings etc. to any page I want. Of course this couldn't have been done without using the numerous MT plugins I discovered first at the MT Support Forum and then at the comprehensive MT Plugins Directory. So now, [almost] the entire site text is searchable through the MT's internal search engine, which also hooks to the Google API for web search results.

Site Hierarchy

I gave all site sections (blogs) their own folder of the main html folder. I think this gives a more logical look to the site. Also, all blog categories have their own subcategories, which makes everything simple for people who might one day want to remember a URL to a page on my site. URL are almost entirely cruft-free, and thanks to both Mark & Már I've gotten rid of those kinda ugly file extensions.

Graphics and Photography

Almost all graphics work was done in Macromedia Fireworks, the rest being done in Adobe Photoshop. I'm not very good at graphics so I kept things to the simplest. A lot of graphic guru sites provided inspirational resources, among them Spoono and Blue Vertigo (collection) where the best help.

Photographs in the PhotoLife section are mostly taken with my Canon A40, and then edited on ACD's FotoCanvas to increase brightness and reduce file sizes. The rest of 'em are from borrrowed Automatic SLRs, disposables, autofocus' or cellphone cameras like my SGH-e715.

Interactivity

Comments on posts, photos, writings etc. are all managed through MT. Most of the content can also be 'pinged' using MT's trackback capabilities, which provide anyone oppurtinity to place a link to their site on pages here at haydur.com if the content shares the same subject. Other forms, like 'ask a question' are coded in PHP, with simple mailing and flat-file archiving of submitted data. Client side verification is done with simple Javascripts.

Testing & Browser Support

I did estensive testing in both Mozilla Firefox (formerly Firebird) and MSIE 6.0 to make sure all content appears as intended. This was actually the first time I paid attention to another browser besides IE, and the in the process found myself liking how Mozilla has developed Firefox, which is indeed a great browser... although IE still has 85% percent market share, and is still my browser of choice.

The site should be fully visible in 800x600 resolution and everypage has been carefully pixel-built to make sure it fully expands to resolustions greater than 800. My base testing resolution was actually 1024x768, which I believe will stay the most common screen res. for sometime to come. Thanks also to BrowserCam's free trial offer for testing my site on Linux and Mac with different browsers and screen sizes, that was a great help.

Posted in Site . Last modified on November 16, 2005 6:58 AM