" ... Talking of Design ... "
<span>all genres</span>

Welcome. This here is a place where myself and others can gather and type words that hopefully form coherent sentences of some worth (or not) ... [Blog-Home]

Mar 7 Featured in Web Designer MagazinePermanent Link

Web Designer Magazine Imagine my surprise at hearing news from Nick La that I’d been featured on a double page spread in Web Designer Magazine (Issue 141 page 76). Finished imagining? If you can’t imagine, then I would describe my surprise as: “Heh! Sweet! Yep. Good.” or something similar.

The article was written by Steve Jenkins and was titled: “Steve Jenkins finds out what techniques make http://kevadamson.com tick along so very nicely”. So far so good.

My name, URL and design spread across 2 pages of a UK wide web design magazine is a really nice bit of publicity, and I thank those at Web Designer Magazine for doing the feature. It’s also great that a site that is now quite a few years old, and in the process of being re-designed, is still getting kudos and fans on the web.

But …

Upon reading the article, there are a couple of things that aren’t quite right in their breakdown of how I’ve gone about designing and developing the site.

So. On to the corrections …

1. The article suggests I have used animated .gifs in the header design of the site. I haven’t. They are applied to CSS backgrounds on certain H tags on my page – to make the news reader appear to be talking. I have also used this technique on my current re-design (me in the corner – although I have had a haircut since then!).

2. They also describe my navigation menu as using ‘rollover images (with alt tags)’, whereas the method I have used is the standard CSS ‘image replacement’ technique using image sprites set to different background positions to give the rollover effect. I then use a title tag on the ‘a’ element to add further meaning to the link.
The basic principle in HTML and CSS is below. Note the span tag to throw the image replaced text off-page:

CSS:

span { position: absolute; left: -1000em; overflow: hidden; }
a#n-home,
a#n-home:link,
a#n-home:visited,
a#n-home:active { height: 20px; width: 50px; background: url(imagename.gif) no-repeat 0 0; }
a#n-home:hover { background: url(imagename.gif) no-repeat 0 100%; }

(in this example, the image size would be 40px x 50px with the hover state version postioned at the bottom of the image. ‘height: 20px;’ ensures that only part of the actual image is displayed at any one time)

HTML:

<a href="home.htm" id="n-home" title="Home"><span>Home</span></a>

Other than that. It’s all good :)

Hey! You there! Say Stuff :


| Textile Help