Sticky Page Footers

Occasionally you'll be coding out a site, and you want a "sticky footer", a footer that sticks to the bottom of the browser viewport or the bottom of the main content section, whichever is lowest.

There are a few notable sites that have posted methods for doing this, but the short answer is it doesn't work unless you meet certain requirements. Probably the most popular example (which is also the first google result for "sticky footer") is A CSS Sticky Footer. However, as the explanation page shows, the method uses extraneous markup to push the footer down below the content. Also, this method only works with static-height footers.

Another good example comes from AListApart: Exploring Footers. The method involves using relative positioning on a container and absolutely positioning the footer to the bottom of that container. Inexplicably, this works, though for my implementation, I used the body element as my wrapper. Unfortunately, you have to apply appropriate padding or margin to the bottom of the content div, which in turn squashes the idea of having a dynamic-height footer.

Given these examples, which are perfect for fixed-height footers, it seems sticky, dynamic-height footers are not meant to be under current browser implementations. If you're insistent on having a dynamic-height sticky, you'll have to go the way of the faux footer (along the lines of the faux columns, which I've always thought to be cheating :) ). I couldn't find any links talking about faux columns (in this sense, anyway), but one site which currently implements it is KilianValkhof.com. If you look into his code, you'll see that the background of the footer is actually set in the body.

Lists, Useful For More Than Menus

I came across a page recently that uses ordered lists for the entire layout -- not just the menu. The entire layout is in two parts: one ordered list for the header/body/footer, and another ordered list for the three columns inside the body.

I find this to be an interesting approach to multi-column layouts. Better yet, the author claims that it works in all major browsers on the three major operating systems.

However, are ordered lists the proper elements to use in this case? Is it "semantically correct"? What about unordered versus ordered lists? It'd be terribly simple to convert the layout to work with unordered lists, but which is more "correct".

Regardless of correctness, though, "no floats, no divs, no clears" is rather appealing.

Circular Menus and Usability

Circular menus. Ever heard of them? I'm not sure if they have an "official" or "common" name, but this name is pretty descriptive.

Circular menus are superior in usability to the typical rectangular slide-out menu. Why? Because, ideally, each menu item is the same distance from the initial pointer position as each other item. Look at the iPod buttons, for example. Play/Pause, the most common function, is in the middle, and the other functions are equal distances from there.

Also check out the SecondLife context "spin menu". The pie pops up surrounding the cursor, and all the available options are an equal twitch away from the center.

Submenus? Just expand the circle. For example, here's a quick mockup I made converting much of my current FireFox context menu into a pie menu:

But how feasible would such menus be inside a website? WebToolkit.info has a mostly-working demo that uses images exclusively. I tried substituting text for the images, but the menu simply disappeared.

Credit for image: iPod image and SecondLife image

Alternative Link Underlining

Ever seen the odd site that, instead of solid or absent underlining, has a dotted or dashed underline? Ever wonder how it's done? It's really simple: border-style.

All you need to do to get an alternative underlining effect is to, first off, hide the default underline with text-decoration:none, and then specify a bottom border for the affected links: a:link { text-decoration:none; border-bottom: black dashed 1px; } To make the effect stand out, you could also make the link and border separate colors, either on hover or all the time.

Pretty Up Your Forms with CSS

Let's face it: form elements au naturel are NOT pretty. So what do we do with them? We add a border thickness here, a border color there, leaving the whole thing largely unchanged. And still ugly. Time to change that.

I'm going to use the Tableless CSS Forms code provided by DynamicDrive's CSS library contributors. This gives us the basic layout and essential elements without too much trouble:

We'll start with the basics: borders and background. In Web 2.0, simplicity is king. Beveled corners? Sooo Web 1.0. Sooo not pretty. We'll make the borders solid, with uniform color, and thin to keep the simplicity. And we'll specify a white background to avoid any cross-browser issues: .cssform input, .cssform textarea { border:#999 solid 1px; background:#FFF; } A nice, neutral gray tones down the harshness of the input areas' borders, and the solid-1px all the way around eliminates any doubts as to where the areas begin and end.

Next we want to make it a li'l roomier. How do you like cramming text into zero-padding textboxes? .cssform input { padding:3px 5px; } .cssform textarea { padding:5px; } Here's when you start getting into trouble with the disparities in browsers' box models, though as long as the width of the elements isn't an issue, you should be fine.

Now that we've covered the foundation, time to break out the makeup: images! Using a very small, very subtle gradient image, we can add a simple inner shadow to each input field. While this is "adding features", I feel it actually adds to the feeling of simplicity: .cssform input, .cssform textarea { border:#999 solid 1px; background:#FFF url(formgrad.png) repeat-x top left; } The gradient image is a 1px wide by 15px high PNG image with a gradient of hex colors #EEEEEE (top) to #FFFFFF (bottom). The slightest difference in color makes for a very nice effect.

We could very well stop here -- all the form elements are styled nicely, even the submit and reset buttons. But why stop there when you can make the buttons intuitive as well? .cssform .submit { background:#FFF url(submitgrad.png) repeat-x bottom left; } .cssform .reset { background:#FFF url(resetgrad.png) repeat-x bottom left; } Here we use another technique found at DynamicDrive. This simply adds two other colored gradient images to the background of the appropriate buttons. Of course, you must add the appropriate classes to the buttons for this to work. If you want to take full advantage of CSS standards and leave IE6 and below behind in the dust, you could just use the attribute selector: .cssform input[type="submit"] { background:#FFF url(submitgrad.png) repeat-x bottom left; } .cssform input[type="reset"] { background:#FFF url(resetgrad.png) repeat-x bottom left; }

And there you have it. With no more than three images (or one, if you prefer), some very simple CSS, and an eye for simplicity, we've made our form elements nice looking.

Additional links:
Download the example
DynamicDrive: CSS Tableless Forms
DynamicDrive: Stylish Submit Buttons

Promote Standards Awareness with CSS Naked

CSS Naked is a standards-awareness initiative led/organized by Dustin Diaz. On the specified date, April 9th, all participating websites will strip their sites of their CSS, allowing the world to see the underlying clean-code usability:

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good 'ol play on words. It's time to show off your <body>.

While I would love to participate in this, I wouldn't recommend it for Blogger users. The building blocks of Blogger blogs, widgets, produce all sort of irrelevant divs and such that are used exclusively as CSS hooks. Aside from the fact that the underlying code is NOT semantic, disabling styles on Blogger sites (well, this one anyway) is NOT pretty (or, for that matter, usable). If you must see the results of such an inadvisable act as disabling CSS, you can (using FireFox) go to View -> Page Style -> No Style. This will disable styles for the current page (or the current tab, I'm not exactly sure).

So, to reverse Dustin's little play on words -- sorry, you don't get to see my <body> :P

Got Mad Coding Skills?

Think you got what it takes to slice up a PSD file into a valid and usable (X)HTML template? Then check out CSS Off, a contest that gives you the opportunity to do just that. At one minute past midnight CST on April 5, a PSD file will be uploaded for contestants to download. Contestants will have up to 24 hours to submit their completed entry.

Don't have Photoshop? Check out the GIMP! I'm hoping that the PSD file is GIMP-compatible. You could try to convert it one way (using an online service) or another (directly in the GIMP),but there's always the issue of unsupported layer effects getting messed up.

And, no, this is not an AFD trick. At least, I hope it isn't...

Faviconize your blog

Favicons. Those little icons that appear on FireFox's tabs, IE's favorites bar, and various other places in web-related applications. Simple little icons, no larger than 32 pixels square, yet they are a part of your site's identity.

Why have a favicon? Kiseki.co.uk puts it well:

A favicon can help people identify your site quickly and easily in, say, a long list of bookmarks....It is only a small detail, but it can be useful for people to recognise your site.

A favicon is an instant visual cue that, when a visitor sees it, conjures your website in their minds. As AbstractPromotion.com says, "If you don’t have a favicon, your users will forget about you".

Making a favicon is fairly straightforward: churn up your creative juices, fire up the gimp, create a new 16x16px or 32x32px image, brand away, save as an ICO, GIF, or PNG file, then upload the image to a file hosting site. I personally enjoy Village Photos' free account, though there's always PhotoBucket, ImageShack, or Google's own Picasa service. After the image is web-accessible, add the following lines to the <head> section of your blog HTML template: <link href='http://host.com/path/to/image.png' rel='shortcut icon' type='image/png' /> <link href='http://host.com/path/to/image.png' rel='icon' type='image/png' /> And, voila! You should obviously replace the href and type attributes to fit your situation. For type, use image/png for PNG, image/gif for GIF, and image/ico for ICO, in case you were wondering :)

Why two nigh-identical tags? To answer a question with a question, what browser has, in decades past, caused us all so much pain? That's right. It seems that older versions of IE need the "shortcut icon" link just to see the favicon image...whether or not they decide to display it.

According to the W3C, the rel attribute's value should, "officially", be "icon". Interestingly, they also recommend putting a "profile" attribute in the <head> tag, "to define what the ["icon"] value means". Their version: <head profile="http://www.w3.org/2005/10/profile"> <link rel="icon" type="image/png" href="/somewhere/myicon.png" /> Though I don't know for sure how well this will make IE6 behave...if such a thing is indeed possible.

Browsershots: Mass Website Testing

In the world of Web 2.0, cross-browser compatibility is a necessary evil. With different browsers, different versions of different browsers, and different operating systems with different versions of different browsers, you can rarely predict how your visitor might be viewing your site (unless, of course, you're developing for a tightly controlled intranet, where everyone uses the same OS and browser). Unfortunately, it's rarely, if ever, possible or sensible to test your site on even the major browser/OS combinations, let alone every conceivable combination.

Enter BrowserShots (currently version 0.4 beta 2). What is browsershots?

Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

The process is very simple: point your browser to BrowserShots.org, enter your website's URL, check off the browser/OS combinations you want to check it in (there are a LOT of choices!), set any optional settings, and click "submit". Optional settings include screen size, color depth, javascript support, java support, and flash support. Once you click submit, your requests are placed in a queue. In my experience, the wait time to receive all requested snapshots (mainly using the top browsers on all three platforms) varies between 3 minutes (last night) and 30 minutes (estimated time as I write this post :) ), though for $15 (10€), you can get priority processing. The snapshots are available for 30min (or more, if you want to extend it), and can be viewed as they are taken (you don't have to wait for the whole batch to finish). Refresh your "Website Overview" page to see screenshots as they are uploaded. On the Website overview page, you also have the opportunity to download a zip file containing all snapshots that have been taken so far.

Once a screenshot has been taken and uploaded, you can click on its thumbnail to view the details of the browser and OS the snap was taken on, as well as a full-size screenshot of the page. Details include browser, engine, javascript capabilities, java capabilities, flash capabilities; "factory", sponsor, hardware, and OS of the machine that took that snapshot; dimensions and file size of the screenshot; and various timestamps related to the screenshot.

Granted, you can't check website behavior (javascript animations, interactions, and such), but for those without access to different operating systems and different browsers, this is a very useful tool for cross-browser compatibility checking.

Browser Shots

Blue Spring Blogger template

Over my spring break, I decided to spruce up my blog a bit (read: redesign). Unfortunately, I am design-challenged and too cheap to pay someone to create a new design for me. So I started perusing the designs available at OSWD, and found a nice template called Blue Spring.

After finding, downloading, and familiarizing myself with the template's HTML and CSS, I set about hacking it into Blogger XML submission. It was mostly an effort of looking at my existing template, as well as the generated HTML, and revamping the CSS to support the structure produced by the Blogger widgets (mainly the Blog and Header widgets).

After combining HTML and CSS into one XML file and making sure the CSS supported all the widgets one might want in the sidebar, I set about "making it customizable". Not everyone likes to muck about in the CSS code -- some (most?) prefer to use Blogger's "Fonts and Colors" tab to do what they can. Supporting this was a simple matter of pulling out all the major colors and fonts into skin variables. After that, I made sure that all the widget sections had the proper settings.

Now, a "how to" on usage. In the original template, there were designated spots above and below the header for links, namely "navigation" and "other". I have left these as two empty sections, with a limit of one widget each. They are optimized for the "Link List" widget, but, as you can see by the search bar I've placed at the top, you may be able to fit other widgets in them. Beware when putting something other than a LinkList widget in the bottom slot, though -- it can seriously mess up your layout (and can usually be fixed by removing the widget).

The "Page Elements" layout is slightly a mess; as I have no clue how to modify the XML file to fix this -- without melting the layout -- you'll just have to deal with it :) The "edit" link for the top LinkList section is hidden by the logo. To get around this, move the widget to the lower slot (or a slot on the sidebar), edit it, then move it back.

Before uploading the template to your blog, be sure to upload the images to a hosting service, and replace all images used in the template with the appropriate URLs. Searching the XML file for "images/" will show you the images to be replaced. If you have a favicon for your blog, find the following section: <!-- link href='#favicon-url-here' rel='shortcut icon' type='image/gif'/> <link href='#favicon-url-here' rel='icon' type='image/gif'/ --> Uncomment it, and replace "#favicon-url-here" with the URL of your favicon. If you want a small RSS icon to the right of the bottom LinkList section, find this section: <!-- span id='feedlink'> <a href='#your-rss-feed-here'> <img alt='Subscribe' src='images/rss.gif' /> </a> </span --> Uncomment it, and replace "#your-rss-feed-here" with the URL of the feed you want visitors to subscribe to.

As the devil is in the details, you will, more likely than not, come across issues if you try to add custom or third-party code to the sidebar (or any other part of the template, for that matter). The CSS has been tweaked to make most of the official Blogger widgets look good; anything unofficial is just that, unofficial. Please keep in mind that I am not your personal HelpDesk, nor will I likely have time to help everyone "fix" their blog. There are Blogger help forums, as well as HTML/CSS help forums, that will be more than happy to help you, if you ask.

For you web standardistas out there, I don't know if the Blogger engine puts out standards-compliant code or not, but almost any Bloger blog you try to validate will turn out hundreds of errors :) as such, I didn't quite worry about making the template standards-compliant. If it is, it's completely on accident :P The theme does NOT render properly on IE6-. Seems to work fine on IE7, IE8 is unknown.

As always, with anything remotely related to technology, BACKUP!!! Go to your blog's layout, select the "Edit HTML" tab, and click the "Download Full Template" link. Save the XML file to your computer, so you have a backup to restore from if you prefer your old template.

The template's footer (and some comments in the CSS) credits the designer, DCarter, and the one who converted it into a template (Templater?), me. If you do use this template, please leave this info intact.

[ 5/11/08 ] Update: Turns out the first version would break when text size was increased, if you had menu items. Fixed by adding overflow:hidden; to the first #main-wrapper declaration. Still doesn't work in IE6. Also added overflow:hidden; to the #sidebar declaration, and the layout now mostly works in IE6 (there are still a few quirks, but it's usable). The sidebar is strangely displaced in IE5.01 and slightly off in IE5.5 and IE4.01 according to browsershots.org, but the template now supports "all major browsers on all major operating systems".

Additional links:
Download the Blogger template
OSWD: Blue Spring template
Blue Spring WordPress template
Open Source Web Design
The header image I use

This template featured at the The Blogger Templates

I'm Digging...a duplicate of WHAT??

Digg is a great source of traffic and popular news. Quite obviously a very popular website. However, its popularity has resulted in so many stories "getting Dugg" that, while Digging a brand-new story, it is almost inevitable to get a "We think you're duping us" alert. Frankly, it's getting quite ridiculous, if you ask me.

As I was digging the first dent in the ground for one of my recent articles, Add entries to Konqueror's "Create new" menu, I ran into the expected "Submit a New Story - Are You Sure It's Not a Duplicate?" message. I usually take the time to look through the stories to see if my topic has been covered before, but usually it's just a bunch of stories that have nothing to do with my topic. This time, though, it was worse.

The title Dugg was "Add entries to Konqueror's "Create new" menu". The content, you can see for yourself at the article's Digg page. The category was "Linux/Unix" under "Technology". The so-called duplicates?

• MONEY MANAGER
• Today's Menu Online - 100's of restaurant menus New Orleans
• Recover Files in Microsoft windows Vista
• Burger King To Add Mac And Cheese To Menu
• Americans look to Jesus for diet

Honestly, what does altering Konqueror's context menu have ANYTHING to do with BK offering Mac and Cheese?? It doesn't even have anything to do with food, and there were no less than three food-related "dupes" in the list. The only dupe that came close to my content was Empty Applications menu on Ubuntu 7.10

The Digg "Dupes Filter" may have worked fine when Digg was a startup site with only a few thousand stories, but with the multitudinous and growing number of stories Dugg on a daily basis, the Digg duplicates filter needs to be more robust than just picking out a few keywords from the Dugg content. It's time to revisit the design phase.
</rant> :)

A well-designed website: many things to many people

In my Advanced Web Design class at school, my professor asked us to post what we thought defined a well-designed website. I thought I'd share my answer here. I'm sure he wasn't expecting anything so involved as this :D

"What makes a well-designed website?" That's quite a question.

As a dabbler in web design, I would say a well-designed website is "good-looking". It should look somewhat elegant. The "Web 2.0 style" -- glossy buttons, spacious openness, minimalistic simplicity, and copious use of gradients -- comes to mind. I can't think of any sites that strictly adhere to all these points, but DynamicDrive is a good-looking site.

As an HCI-minded individual, a well-designed website is made by more than its layout. A well-designed website makes it obvious what the site's purpose is, what can be done on the site, how to go about doing it, etc. Again, simplicity is king, and clutter is sin. Content is easy to skim and understand. The layout does not make it difficult to navigate. If a feature breaks, the site will either gently tell the user so, and make it easy for the user to report the breakage; or the site will function in such a way that the user doesn't notice the difference, and the developer will be alerted. I think Digg is a fairly usable, well-designed site.

As a web developer at heart, a well-designed website is all in the code. Separation of structure, content, presentation, and functionality is something to be strived for. It should be built as follows:

1. First build a mock page (with the final site's design in mind) which contains either mock or real content, and only structure-oriented HTML markup. Presentational markup is sin :) This page is not design-oriented; its only purpose is to structure the page's content in a semantically meaningful way. Any tags that do not directly relate to the structure and/or content of the page should be struck down with a flaming sword of death. Organize things in such a ay that they flow logically along the page.
2. Develop the CSS in an externally linked file. Introduce any design-specific images through the CSS, if possible (and it should be possible). Strive for cross-browser compatibility within the CSS, making the site look as similar as possible from one browser to the next. If any additional markup is required for the design of the site, the CSS should be developed to make the site look good without it; if still necessary, the necessary markup can be added through the next step. Use what you have to get what you want.
3. Develop the functionality (using JavaScript) in another externally linked file. Nonintrusive javascript should be used, progressively enhancing the site after it has loaded. Nonintrusive javascript should also be used to add any necessary additional markup to be used by the CSS. Again, use what you have to get what you want.
4. If possible, convert the finished page layout into a template, and use a server-side language to fill it with dynamic content.
5. Finally, when all is said and done, pull up the page in a browser, and make sure everything works. Turn off javascript, refresh, and make sure everything works. Turn off css, refresh, and make sure everything works. Then browse the web for a while....and see if it works :)

According to these steps, a well-designed website will work across browsers, degrade gracefully in older browsers, respect the wishes of those with Javascript turned off. There are lots of websites that use this methodology (using only semantically-meaningful html, etc). One well-designed website in this case is Dynamix Labs. It doesn't seem that they use any javascript, and if you turn off CSS, the site is still very readable.

As a user, I want information, and I want simplicity in doing what I want to do. A lot of the time, I want information that I can talk about in my blog. I use google as my main go-to source for finding things. If I find a site that gives me good information on a regular basis, I want to be able to subscribe to its RSS feed, or something similar. If I find a site that I come back to on a regular basis (whether I be forced to, or do so of my own free will), I want to be able to customize my experience on that site. I want to be able to change the colors, the landing page content; anything and (usually) everything, I want to customize it to better serve my way of doing things.
One service that I use on a daily basis is Google Reader (you'll have to sign in to your google account), a web-based RSS aggregator. It features "folders" that you can use to organize your feeds, drag-and-drop re-ordering of feeds, and very easy-to-use methods of subscribing and unsubscribing from feeds. Another service that I use regularly is Netvouz, a social bookmarking site. I chose Netvouz over other bookmarking sites because of its folder organization feature. You can organize your bookmarks according to category (and sub-category) and make certain bookmarks private. It's also easy to delete or edit my existing bookmarks, and really easy to add new bookmarks using the Netvouz firefox extension.

I must say, though, that my most frequently used and favorite thing is FireFox. It is customizable in (almost) every way possible; its functionality is infinitely extendable through extensions, which anyone familiar with XML and Javascript can write. It has excellent support for standards; the upcoming FireFox 3 is said to have passed the Acid2 test, which is huge for web developers.

As you can see, from my point(s) of view, a well designed website can and should be many things to many different people.

So, what do you think? What makes a website "well-designed"? What are some examples of well-designed websites?

Note: References to certain things "being sin" should not be taken literally. Putting presentational markup on your page will not send you to hell. Nor will avoiding clutter send you to heaven. These are just my personal pet peeves :)

Time for a redesign!

I chose the dark design for this blog from the default blogger themes...a looong time ago (or so it seems)! Since then, I've taken a usability course in school, read many things on the web concerning usability, and been active at Deviant Art.

I believe it is time for a fresh look :D
The testing grounds: techknack2.blogspot.com ;)

One of the things I've heard recently is that white text on dark backgrounds is not all that usable. Cool, but not usable. As I've gone back and read a couple of my posts, I've realized that it's true, especially for long blocks of text; the text just seems to fade into the background after a rather short amount of time.

Another issue I've had is clutter; the more I look at my blog, the more clutter I see. Whitespace is good; simpler is better. Keep it simple, stupid.

In my search for templates for the new Blogger, I've found but one that I really like: Azul by karan at Skins4Bogger. Unfortunately, the XML download is for a completely different theme...

As per usual, I appreciate any and all feedback. What do you expect to see in a blog's layout? Where do you expect to see these things? Should the comment count be before the post, or after? Etc :)