Resources have been a key focus in the growth of the world wide web.  The more users engaging on a specific web service means that the service will use more resources.  With that theory in mind, one of the many techniques to reduce HTTP requests to speed up the load of a page is the CSS sprite technique.  To summarize the technique, rather than have a plethora of individual background images, you would combine all of the images into a single image and use CSS to access those portions of the image that are needed.

But on to the meat of this post, I’m plugging a recent article at Smashing Magazine that looks at the technique and discusses potential hardships the technique may cause for some designers.

• Continue on to read “CSS Sprites: Useful Technique, or Potential Nuisance?”
  http://www.smashingmagazine.com/2010/03/26/css-sprites-useful-technique-or-potential-nuisance/

Just thought I’d pass this awesome offer along to those that read the blog.

SitePoint is offering a deal to get 5 of their books in PDF format for only $29.99.

The beauty of it is that the proceeds are going to be donated to the victims of the Australian bushfires.

I’ve read a few of the books and some are hit or miss.  I definitely recommend:

• The Principles Of Project Management

• The Art & Science of JavaScript

• The PHP Anthology: 101 Essential Tips, Tricks & Hacks, 2nd Edition

• The Art & Science Of CSS

Check it out, its for a good cause!

For those that do a lot of work in interface design, this won’t necessarily be a new trick. However this could prove quite useful for those new to designing forms with css.

There is a bug within firefox that turns commonly important fields yellow (such as name, email or phone).

The simpliest way around the matter is to designate your input background as important. In the example below, the style is regarding all input tags.

input {
background:#fff !important;
}

Hope this helps!

Many years ago designers overlooked an important piece of the pie known as efficient web design - the use of lists. As the years progressed, this overlooked portion began to take shape as an art form and started to show the world the power it could harness to make the web a more manageable place.

With that mouthful, let us move on to see how we can use CSS to nest lists!

First and foremost - keep your list CSS in one CSS file

One issue I’ve seen from working with premade layouts is that some have various stylesheets and each have classes and selectors pertaining to the same list items. In reason, it can be assumed that you may want to seperate these stylesheets to operate with different browsers (such as IE6 or IE7 while using the and conditional statements for Internet Explorer 7 and Pre Internet Explorer 7 respectively). However, there really shouldn’t be a big hassle between the browsers in terms of lists. For example:

body {}
ul
{
list-style:square;
}
/*We shall create css to format interior lists, going 3 deep from the root*/
ul li ul,
ul li ul li ul,
ul li ul li ul li ul
{
padding-top:10px;
list-style: url('../images/mapbrack.gif');
}

In our css, we have defined styles for ul selector. From there we have moved on to specify styles for more intense DOM structure, such as nested lists.

The HTML could look like the below example:

<ul>
<li><a href="#"><a href="#">Test</a></a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test Group
<ul>
<li><a href="#">Inner Test 1</a></li>
<li><a href="#">Inner Test 2</a></li>
<li><a href="#"> Inner Test 3
<ul>
<li><a href="#">Inside Inner Test 1
<ul>
<li><a href="#">Last Test 1</a></li>
<li><a href="#">Last Test 2</a></li>
<li><a href="#">Last Test 3</a></li>
</ul>
</a></li>
</ul>
</a></li>
<li><a href="#">Inner Test 4</a></li>
</ul>
</a></li>
<li><a href="#">Test 4</a></li>
<li><a href="#">Test 5</a></li>
</ul>

As you can see we have did quite a number on nested lists. Not only do we have one nested list, but we have created nested lists within nested lists that will gracefully stretch across IE, Firefox, and Safari. The result is that you have optimized your css to limit the amount of code to render and produce the same result. You can look at it as trimming the fat off of the CSS, or you can look at it as just one small step in saving resources.

While scoping Simple Bits the other day I saw that the new MTV.com has officially launched. Granted, I was a huge MTV fan growing up. The web experience though, for years, has simply sucked. Engineered predominantly as a Flash based broadband beast, it kept a lot of dialup users from enjoying the experience (i.e. ME).

Fortunately Dan Cederholm and Simple Bits have put the power of XHTML and CSS to use and have really cleaned up MTV.com. No more do I have to wait 5 minutes for anything to load. It’s clean, it’s simple and it still has that MTV feel. Great job guys!

Plain and simple - web standards the evolution of keeping things simple is finally getting some mainstream attention. What is even more astonishing is that there are a lot of people that don’t even realize it.