So today morning, I spent some hours digging through my back-up data in CDs and got some old stuff. For those who are interested, here is my story.

“What is a computer?”
I am one of those very few ‘youngsters’ out there who have actually used Windows 3.1 OS in 1996. Windows 95 had appeared by that time, but my village in India was far, far away from the latest technology (Now it is better!). For a long time, computer for me was the CRT Monitor. I never really observed the box with a power-ON switch near that monitor. Yes, yes, now I know how a Mac looks like.

Going digital
I bought a ‘Dummies’ book and started learning Adobe Photoshop 5.5 in August, 2000. Since it was a limited day trial version without the ‘save’ command, I couldn’t save the early designs I did. I vaguely remember making a composition of a straw in a glass of yellow fruit juice. At that time, I was not a technologically advanced guy to think about ‘Print screen’ and ‘MS Paint.’ Alas!

This is the oldest Photoshop work I could get from the archives. The time stamp of the file says 28-Nov-2000. I created this on my friend’s PC while I was staying with him in Bangalore, in search of a job. You can see the influence of Hollywood in my earlier works.
I followed it up the next day with the ‘Perfect storm’ scene, a space shuttle and a satellite and some logo renderings of DOLBY Digital and DTS.

Animation
I started to learn Macromedia Flash 4.0 in August, 2000. I made a DTS trailer and fortunately I have the original file with me. It is fun to see it now. It even had a typo – ‘Aiso featuring…’ instead of ‘Also featuring…’ — just after the appearance of DOLBY logo! And, there is no audio in this file.

Then I made a ‘Jurassic Park-Lost World-Godzilla’ inspired short animation. After a couple of years, I lost interest in animations completely.

Website
As per records, on 03-Sep-2001, I made an htm file to use in a server for my colleague’s project. I don’t have that file with me, but I remember placing the LINUX logo in it. The project was called ‘Peripheral Sharing Device (PSD),’ I cannot remember what it was. I may have used Microsoft FrontPage to design the page.
The first website I made is for my own use and it was hosted in a FreeServers domain. The date of upload is Saturday, 22-Sep-2001. This domain is still active and what you see there now is an updated version I did in 2005. Click here to see the original version. If possible, view in Internet Explorer to see the gliding effect of the background. I designed it in Macromedia DreamWeaver.

I also had a mirror of this website in the now defunct Geocities account.

Back to 2009
That was a nostalgic journey. I am surprised to see how much design I was doing back then. I took a mental note to design more diverse stuff from now onwards.
So, what is your story? What was your first design? The below space for comments is all yours…

Operation tinyurl.com

Once I got the opportunity to look behind the closed doors of tinyurl.com. It was highly dangerous. A split second’s mistake, I am done for. Anyway, I took the chance. And do you know what I saw? A goat!

Yes, a goat is their secret. The long urls are fed to the goat which chews and chews and chews it until it becomes a tiny URL. It is then picked up by an employee who posts it on the internet. That’s how tinyurls work.
Jokes apart the charm of tinyurls stop the moment you tame the beast. The beast is called – metarefresh. Let’s say hello first.

Meta refresh

Meta refresh is a part of Meta tags. They are called Meta because they provide structured data about a web page, particularly to the search engines.

<meta name=”description” content=”A blurb to describe the content of the page appears here” />

Meta tags are placed inside <meta> tag as shown above. There exist two more valid Meta tag in addition to the ones listed above– scheme and http-equiv. Of which, http-equiv will help us understand how tinyurls work.

How to redirect a page?

Would you believe me when I say all it takes is a single line?

Here is the magic line.
<meta http-equiv=”refresh” content=”0;url=http://www.fullfx.antzfx.com”/>

This line instructs the browser to redirect to http://www.fullfx.antzfx.com immediately. The zero inside content makes the redirect instant.

How does tinyurl.com use this?

When analysed closely, you can see that there are two parts for a tinyurl – a base part and a random part. Like this:

This tinyurl redirects you to “www.fullfx.antzfx.com”

“ptl29z” is the name of a folder (unique name randomly generated), that resides inside the root of “tinyurl.com”, with a single file called “index.html” containing the following data.

<html>
<head>
<meta name=”description” content=”redirecting to the following url”/>
<meta http-equiv=”refresh” content=”0;url=http://www.fullfx.antzfx.com”/>
</head>
<body bgcolor=#ffffff>
</body>
</html>

What does this leave you with?

Nothing. Except an idea to make a fortune. Tinyurl.com has grown from mere redirection to toolbars, APIs and more. If you have the shortest URL in the world, well, this is your game.

Epilogue : Eventhough tiny urls can be interesting, there has always been an ongoing debate upon its shady nature. In this Blogoscoped article, the pros and con are discussed in detail.

This is a Disclaimer

A commonly mouthed phrase in advertising field is that “Yes, we know the ad is just an average one. It is because the client does not share our vision and the budget was not enough. It is a pity. When are we going to have a perfect client?”

Go out and see (that means, do a ‘Google’) a self-promotional ad done by an agency. I am 90% sure that you will find it equally bad and non-creative. Tell me, what is the reason for this ‘no-show’?

Just now I designed and uploaded a website promoting myself. I am 100% sure that you will find it as boring, lacks content, lacks animated stuff and not a ‘new-age’ thing. And the website claims that I am the only designer in this whole universe who is capable of doing wonderful and creative designs. Blah!

The beginning

I start every design on a white paper. So, for the website, I fixed the background color as White (#FFFFFF). I decided that I will have a simple and clutter-free interface. All the text and graphics will be static (no roll-over images and no flash animations). The text and images will be laid out in tables of fixed row heights and column widths. There will be minimum text and most of the website content will be images. The colors used for text and background will be: Red, Black, Green, Yellow and White. No images will be used in the navigation bar and in the name/logo.

If you are still interested, read on…

Layout

The widescreen format fascinates me. Technically speaking, the aspect ratio is 16:9. That means, for a width of 16 units, the height of the screen will be 9 units. I wanted the website in such a way that it looks like a projected image on a widescreen. To represent the curvature of the screen as seen in cinema theatres, I decided to add upper and lower shadows leaving the right and left edges for the viewer’s imagination.

Many people are still using 800X600 pixels of screen resolution in their PCs. So I fixed the maximum width as 750 pixels. Applying the 16:9 rule, the height will be 400 pixels approximately. A three column X three row table with 750 X 400 pixels is used as the template. Other parameters are: CellPad = 0; CellSpace = 0 and Border = 0.

The first row is designated for the name/logo. The second row has a Green background color where images will appear and the third row is where the text content will appear. The three columns of the second row can feature three images.

Navigation Bar

Navigation bar is placed in the bottom of the widescreen table. No rollover images. So I added the following code to the pages.

A:link { color: #009900; text-decoration: none; }
A:active { color: #009900; text-decoration: none; }
A:visited { color: #0066FF; text-decoration: none; }
A:hover { color: #FF0000; text-decoration: underline; }

This piece of code simply tells the browser that all the links are in Green color. When the cursor hovers over it, the style should change to Red underlined text. A visited link should appear in a pale Blue color.

Internet Explorer obeys these commands faithfully, but it seems that Mozilla Firfox has its own way.

The first row shows the navigation bar in Internet Explorer (Ver.6). ‘Newsletter’ is an unvisited link in Green, ‘Blog’ is a visited link in Pale Blue, ‘Contact’ is Red underlined text because the cursor is stationed over it.

The second row shows the navigation bar in Mozilla Fiefox (Ver. 2). All links are blue and are underlined in default. There is no distinction between an unvisited link and an active link. Cursor hovering effect is OK.

Links denoting a page are disabled in the corresponding pages only. The white text appears in a red background which visually conveys the idea to the viewer. When he is in a submenu page showing one example of work, links are retrained in a Yellow background. See the third row in the above image.

Vertical Scroll Bar

One page has some text in a table cell that is too long to contain in the designated height of 200 pixels. The following code ensures that a vertical scroll bar appears for the rescue.

<td width=”500″ td height=”200″ colspan=”2″ class=”style4″> <div style=”width: 500; height:200; overflow: auto”> <p>

/* The long text appears here*/

</p> </div> </td>

An attempt was also done to alter the look of the scroll bars by placing the following code.

SCROLLBAR-FACE-COLOR: #FFFFFF;
SCROLLBAR-HIGHLIGHT-COLOR: #D9D9D9;
SCROLLBAR-SHADOW-COLOR: #808080;
SCROLLBAR-3DLIGHT-COLOR: #D9D9D9;
SCROLLBAR-ARROW-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #FFFFFF;
SCROLLBAR-DARKSHADOW-COLOR: #808080;
SCROLLBAR-BASE-COLOR: #FFFFFF;

Again Explorer and Firefox responded differently.

The scroll bar on the left appears in Internet Explorer and the other is in Mozilla Firefox.

It is voting time!

That’s all folks! Visit the website and I am ready for the brickbats. I am an average person in the art of dodging, though. Yes, you may find one or two Easter eggs…

Second thoughts

A flash based version of this website is under construction.

Useful links for the ‘really interested’ people

A Favicon is a small icon that appears in the address bar of your browser along with the website address. It is an icon with a dimension of 16 X 16 pixels and is also displayed in the saved website links in your ‘bookmarks’ or ‘favorites’. Steps on creating a favicon in Photoshop, the plugin needed to save the icon in *.ico format and the html coding needed to make the browser display the favicon are explained in detail at:

• ‘Mysteries Of The Favicon.ico — How To Create A Favicon In Photoshop.’

A feedback form is used widely in websites to establish an instant communication link between the website visitor and the website owner. To add this feature to your website, you need:-

1. An html page showing the feedback form
2. A feedback form script in PHP that collects, formats the data and e-mail to an ID specified by you
3. A web hosting service who allows to run the script in their server. This is usually a paid service.
4. An html ‘Thank you!’ page indicating a successful submission
5. An html ‘Error!’ page asking the visitor to re-enter the data

Since I am not at all good in explaining technical stuff to you, it is better to visit the pages:

• ‘Dreamweaver Tutorial: How to Add a Feedback Form to Your Website in Dreamweaver CS3 (Part 6)‘
• ‘Free Customized Feedback Form Wizard‘

Software: Macromedia Dreamweaver MX 2004, Adobe Photoshop CS2, GIMP 2.4.5
Design date: 29-June-2008