Brennan’s Blog

In the past year I have been learning how to better use modern techniques with CSS and HTML to produce semantic oriented web pages which are both small in size as well as tuned for search engines. I use tags like H1 for headings instead of the bold tag with the font size increased because it help search engines know what the content is about. For example, if I have a heading of "Alternative Music" and in the following paragraph it mention the Smashing Pumpkins the search engines could assume that Smashing Pumpkins refers to the band. If instead the heading was "Halloween Pranks" the text "smashing pumpkins" in the following paragraph would not implicitly refer to the band. A user searching with the keywords "pumpkins band" would find the first example closer to the top of the list than the latter.

Another generally unused tag is ADDRESS, which is meant to indicate the included text is a postal address. In light of new search resources like Google, Local it does help to tip off the search engines which parts of the page are addresses so they can be easily identified. If your company sells widgets to your local area it would make sense to place your address inside this tag on your web site.

Today a designer asked me to help put together the layout of a few columns listing addresses and related states. She knew how she could do it with a table but I have encouraged her to consider using CSS layouts lately. What she needed was a way to list a few cities with an address along with a list of states related to each city. She wanted each city to show up as a separate column across the page.

She wanted to try producing the multiple column display with a bulleted list, so I sketched the concept down on some paper along with the semantic structure. At first I was not sure exactly how I would do it so I created a crude sketch on paper of the various elements on the page. By using the Box Model I decided how the UL and LI tags would be manipulated with CSS to achieve the desired result...
(more...)

I was browsing my websites stats and noticed I was getting traffic from philringnalda.com. I am finding that sites which link to mine have a great deal of worthwhile content. So I am glad to find this website.

In a lot of ways it is a normal website, but if you wait for the page to load and then put your mouse pointer over the links on the top right it will provide a little surprise. Normally you can set the title attribute of a link and it will cause a tool tip to appear when your mouse is over the link, but this website uses Javascript to further enhance that ability. First it shows the title of the linked document and then the full URL. It is all displayed in a rounded container which is semi-transparent.

Now the beauty of this effect is that it provides a useful feature, but more importantly, if the Javascript fails and this effect does not work it does not detract from the functionality of the website. Kudos go to the author. Too many times I have been to websites which use poor Javascript to implement a critical field which eventually breaks the usability of the website.

(more...)

Based on reading up on modern Javascript/DOM and CSS capabilities in the currently popular browsers I have created a simple page with a slick UI with DIV tags but I have one minor problem with the widths in MSIE on Windows. I checked my math in the CSS to make sure everything should be lined up but only Mozilla and Safari handle it correctly. My test page is here...

http://www.offwhite.net/projects/glarc/
(more...)

I have put together a stylesheet for this blog which matches the previous designs that I have used in the past. What is different here is that I relying heavily on the stylesheet to control everything. The MovableType templates provide structural HTML with DIV tags with ID and CLASS attributes so that the CSS can be used to control positioning and the color and graphics.
(more...)