A Survey of URL Sharing Debris

As a loyal follower of Tufte, I believe in removing all unnecessary junk and debris from the visual design of a website. (The layout for this blog is a preselected template from Blogger; don't hold it against me). I'm going to point out a trend I'm noticing everywhere, and you will either start being irritated by it, or disagree with me. I call it URL Sharing Debris, and it is best described with examples. I surfed to random websites to collect a few samples.


huffingtonpost.com


Here's your classic example. Since it's too hard to copy and paste a URL, the user is provided with approximately 8-10 icons to share the URL.


indecisionforever.com


At least they realize the icons detract from the content and gray them out.


www.dailymail.co.uk


Since most users won't know what the icons mean, this example adds labels.


youtube.com


More space is wasted on the sharing section than on the video control. Am I the only one who knows how to copy and paste the URL displayed in my browser?


failblog.org


Finally, a site that makes fun of the sharing links.


scm.jadeferret.com


In my quest to find the worst offender, I came across the above winner.


Final words

I think a lot of site developers responsible for this are simply copying popular sites who started this trend. Putting a Digg button on your site does not make it popular. It needs to be popular in the first place.

It is difficult to fit content on a page. It is difficult to design clean aesthetics. I believe this fad will eventually die, and join the graveyard with webrings.

5 new CSS features you can use if you drop IE6

It is time for most sites to drop IE6, especially for projects that are just getting started. If you do make this choice, it is important to realize that there are some new CSS features that you can begin using, and some old habits worth dropping. While there are many sites that describe CSS bugs in IE6, I found no websites that describe working examples to improve your CSS and HTML if you simply drop support for it.

Here are 5 examples from my own project, Haiku Village.

1. Attribute Selectors

You can use attribute selectors for any arbitrary attribute, but I have used it exclusively for form elements.

<style>
input[type="submit"] {
  margin-top: 5px;
}
</style>

<input type="submit" value="Save" />

This will help you delete those arbitrary class names you made up to select certain types of inputs.


2. Multiple Classes on a Single Element

This is best described with an example:

<style>
.icon {
  background: transparent url(/images/icons.png) no-repeat scroll 0 0;
  padding: 2px 0 0 20px;
}

.icon.trash {
  background-position: 0 -80px;    
}
</style>

<span class="icon trash">Delete</span>

With IE6, you either needed to make a class name of "icon-delete", or nest one element inside of the other.


3. Sibling Selectors

There are many ways to use sibling selectors. My most recent use of them is to add borders between the list items in a sub menu:

<style>
ul.menu li + li {
  border-left: 1px dotted #DADADA;
  padding-left: 8px;
}
</style>

Normally, you would need to introduce a "first" or "last" class name to make the borders only appear between items, and not on the outside.


3. Child Selectors

If you know that a certain style should only apply immediately within an element, then simply insert a ">" into your stylesheets:

<style>
ul.menu > li {
    float: left;
    margin-right: 7px;
    padding: 3px 0 1px;
  }
</style>

This will ensure that other list items within this list item do not receive the style. It also prevents the necessity to define a new class name, such as "menu-item"


4. Use :hover on any element

I started web development in 1995, and until recently, I never considered using the :hover meta selector for anything besides the "a" tag. Remove this from your mind, because it is no longer the case. I use :hover to expose some icons when you mouse over a haiku:

<style>
.haiku .actions {
  visibility: hidden;
}

.haiku:hover .actions
  :visibility visible
}
</style>

Most of us have probably worked around this by either introducing an arbitrary "a" element with an "href='#'", or by adding a class name during a 'mouseover' event.

5. New properties available

There are plenty of new properties that you can start using. The most significant are:

• min-width/min-height
• max-width/max-height
• background-attachment - You can use a value of 'fixed'

There are hacks to make all of these work in IE6, but that's the point: You should stop the hacking. Also, did I mention transparent PNGs?