Dreamweaver CS4 does not support HTML5 tags however, you may add this functionality yourself fairly easily.

To do this go to Edit > Tag Libraries

Click the + button on the top right and select New Tag.

The select the tag library: HTML Tags and enter the tag you wish to add there.

Tip: You may enter multiple tags at once by separating them with commas like this:

article, aside, audio, canvas, command, datagrid, datalist, details, dialog, figure, footer, header, hgroup, mark, meter, nav, output, progress, rp, rt, section, source, time, video

Using CSS sprites is a great way to speed up your web pages and web applications. The concept is simple: bundle up all your icons into one image and use the background-position property to display the correct icon. By doing this you avoid having to download multiple image files and minimize your HTTP requests. Using sprites is especially useful for rollovers since it avoids having to preload images altogether. An example of a CSS sprite is shown below.

The sprite above has all the icons laid out in a grid with the icons 20px apart. If I wanted to show the Linux penguin in a div I would use to following style:

.penguin {
background-image: url(sprites.png);
background-position:  -80px 0px;
}

This style rule places a background-image at a position that’s -80 pixels from the left and 0 pixels from the top. It’s simple enough with a small graphic like the one above, but when you begin using more complex sprites you need to begin doing some math, and being a designer true to my creed, I hate math. Fortunately, using LESS makes things much easier. All you have to do is setup the width and height of your grid cells like this.

@xwidth: 20px; //cell width
@ywidth: 20px; //cell height

Then all you need to know is the column and the row for your icon and set the background position like this:

background-position: @xwidth*-5 @ywidth*0; //remember the first column or row is 0

The image below illustrates the rows and columns of a sprite. the background-position property always uses a negative number when positioning a sprite.

An alternative method is to set your icons in the beginning of the document like this:

@xwidth: 20px; //cell width
@ywidth: 20px; //cell height
@penguin: @xwidth*-5 @ywidth *0;

and then just call the css as follows:

background-position: @penguin;

Either way the result is the same, and as our good symfony friends from France would say, Voila! CSS sprites made simple.

Special thanks to Mark James for his FamFamFam icons.

OK, we know that 100 downloads in 3 days is not earth shattering, and there is still a long way to to reach Firefox download levels, but at least we did not bring down Graffletopia’s webserver and they thank us for that (I think).

We are glad to know it helped some people out there. Keep suggestions coming, I’ll update the template as soon as I have enough. In case you are a OmniGraffle user and have not seen it: http://graffletopia.com/stencils/485

So I’ve reached a point that every app I am wireframing these days is based on symfony. While the front end on our symfony apps usually has a custom design, the backend is pretty standard. I decided to design a stencil for wireframing the symfony admin to save  time and to be able to accurately represent what we are building. This has helped us allot and we hope it helps you. The stencil only works with OmniGraffle since that’s what we use here. It’s a great wireframing software in case you don’t know it. If you think I missed something please send a screenshot of the UI element you think I should add to kim [at] servergrove [dot] com.  You can download it for free at: http://graffletopia.com/stencils/485

Screenshot of the stencil

Enjoy!

Before starting to build a website there is a fair amount of groundwork I usually do that will make my life easier down the road. For example, setting margin and padding to 0 on all elements, turning off borders on images and tables, left aligning all text, etc…This is standard procedure in my workflow and often I find myself adjusting this as I move forward. Recently I found a little gem, part of the YUI CSS framework that does all this for me in one swoop. The YUI CSS framework is great, but it has a bunch of stuff I don’t normally use, nor want to have my users download. Fortunately the developers at Yahoo! were smart enough to give this little piece of CSS enough importance to separate it into it’s own file. YUI Reset CSS “…removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions.” Which is exactly what I want to do before starting any project: level the browser playing field.

To include the CSS is fairly simple:

<!-- Source File -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css">

Now lets take a look at the contents of the css file:

/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:

http://developer.yahoo.net/yui/license.txt

version: 0.11.3
*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,p,blockquote,th,td {
          margin:0;
          padding:0;
         }
table {
          border-collapse:collapse;
          border-spacing:0;
          }
fieldset,img {
          border:0;
          }
address,caption,cite,code,dfn,em,strong,th,var{
          font-style:normal;
          font-weight:normal;
          }
ol,ul {
          list-style:none;
         }
caption,th {
          text-align:left;
          }
h1,h2,h3,h4,h5,h6{
          font-size:100%;
           }
q:before,q:after{
          content:'';
          }

While it’s not sexy nor earth shattering, it is unarguably practical.

Article by the BBC “How we make websites” written by Michael Smethurst, an information architect at the BBC, contains a workflow could be used for any website regardless of size. It is an interesting read even for seasoned web designers.