Atelier Winsonli

Received an email from the Computer Science department about a web design contest called CityU eXtreme Web Designer Award, also known as the “CityU Web Hacker” Award. The contest goes this way:

1. Create a webpage themed cats and dogs following standards
2. Make it look web 2.0
3. Make it rank high in Google.

The top 15 results from Google and Yahoo would be shortlisted and their design, content and accessibility would be assessed. The best ones win the award. Please read the official instructions here on their webpage.

The competition is not easy to win. There are a lot of students in the University who possess superior skills in designing. Most Computer Science students like me have limited creativity. So the way to win is to win technical-wise. But then, the source code is available to anyone, so any secret recipe could not be kept secret.

The page has to be ranked high in Google before it is even considered. I am not sure, but I think this would not be a major problem, considering I have a winsonli.com to build on. My page gets crawled almost everyday so the page should be properly indexed.

As web is about sharing, I decided to post a walk through of how my entry was created.

Rounded Corners

The rounded corners are basically background images. One for header, one for main body and one for the footer.

The header, main and footer are three <div>s, each with their respective background image.

Title

For the title in the header, I employed the Phark Image Replacement method. The font for the ampersand (awesomepersand) could not be found on Windows. Also, font smoothing in Windows is not as good as Mac OS. Therefore, I decided to show the title as an image.

height: 25px;
text-index: -5000px;
background: url(img/title.png) no-repeat center center;

Basically, the original text would show 5000px to the left, which is out of the browser (i.e. you can’t see it). Then, the image is shown as a background. This way, even if you turn off CSS you still can see the original text.

Form

One would be easily tempted to use a table to position the input fields. I aligned the forms by setting the label and input field as block elements and by assigning them a static width and float property.

As for the submit button, the rounded button is actually a background image which looks like this:

Two buttons in one image. Upper one is the normal button and the lower one is the image to show when the cursor is above it. The advantage is that the on hover image does not have to be preloaded. The on hover effect is achieved with pure CSS:

.submit{
     background: url(img/button.png) no-repeat top center;
     width: 200px;
}
submit:hover{
     background: url(img/button.png) no-repeat bottom center;
     width: 200px;
}

The top part of the image is shown normally. When the cursor is over the button, the hover event would be triggered and the background image would shift upwards so that the bottom image is shown.

Quotes

I love quotes. Quotes are so often used that they have their own html tag <blockquote>. The two quote symbols you see are two separate background images. Here’s how the HTML looks like:

<blockquote cite="http://en.wikipedia.org/Dogs/">
     <p>
          The dog (Canis lupus familiaris) is ...
     </p>
</blockquote>

Then we apply the CSS:

blockquote{
     background: url(img/quoteTop.png) no-repeat top left;
}

blockquote p{
     background: url(img/quoteBottom.png) no-repeat bottom right;
}

The quotes would then show as a background image. All left is to adjust the padding and margin accordingly.

Accessibility

The page is XHTML 1.1 valid and CSS 2 valid. Even when you turn off CSS, the page is absolutely readable.

The page could be properly viewed on IE7+, Firefox 2+, Safari 2+ and all other standard compliant browser.

A Note on IE6: I have decided to drop IE6 support some time ago in response to a Save The Developers Campaign. IE6 is not a standard compliant browser and does not support transparent PNG. Web developers are now discontinuing IE6 support to give users an incentive to upgrade.

Credits and Acknowledgement

1. Awesomepersands from simplebits.com
2. Background pattern derived from Flying Saucers from colourlovers.com
3. Web Standard Solutions by Dan Cederholm

This entry was posted on Monday, October 6th, 2008 at 12:03 am and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.