Cascading Style Sheets were introduced 13 years ago, and the widely adopted CSS 2.1 standard has existed for 11 years now. When we look at websites that were created 11 years ago, it’s clear that we are a thousand miles away from that era. It is quite remarkable how much Web development has evolved over the years, in a way we would never have imagined then.

So why is it that, when it comes to CSS, we’re stuck in the past and so afraid of experimenting? Why is it that we still use inconvenient CSS hacks and JavaScript-dependent techniques for styling? Why can’t we make use of the rich CSS3 features and tools available in modern Web browsers and take the quality of our designs to the next level?

It’s time to introduce CSS3 features into our projects and not be afraid to gradually incorporate CSS3 properties and selectors in our style sheets. Making our clients aware of the advantages of CSS3 (and letting older deprecated browsers fade away) is in our power, and we should act on it, especially if it means making websites more flexible and reducing development and maintenance costs.

In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects.

Please also consider reading our previous, related article:

• Push Your Web Design Into The Future With CSS3

Using Browser-Specific Properties

To use most CSS3 properties today, we have to use vendor-specific extensions together with the original properties. The reason is that until now, browsers have only partially implemented new CSS3 properties. Unfortunately, some properties may not even become W3C recommendations in the end, so it’s important to target browser-specific properties by differentiating them from standard properties to (and then replacing them with the standardized ones when they become superfluous).

The disadvantages to this approach are, of course, a messy style sheet and inconsistent design across Web browsers. After all, we do not want to revive the need for proprietary browser hacks in our style sheets. Internet Explorer’s infamous <marquee>, <blink> and other tags were employed in many style sheets and became legendary in the 1990s; they still make many existing websites inconsistent or even unreadable. And we don’t want to put ourselves in the same situation now, right?

However, websites do not have to look exactly the same in all browsers. And using browser-specific properties to achieve particular effects in certain browsers sometimes makes sense.

The most common extensions are the ones used for Webkit-based browsers (for example, Safari), which start with -webkit-, and Gecko-based browsers (for example, Firefox), which start with -moz-. Konqueror (-khtml-), Opera (-o-) and Internet Explorer (-ms-) have their own proprietary extensions.

As professional designers, we have to bear in mind that using these vendor-specific properties will make our style sheets invalid. So putting them in the final version of a style sheet is rarely a sound idea for design purists. But in some cases, like when experimenting or learning, we can at least consider including them in a style sheet together with standardized CSS properties.

Useful Links

• Vendor-specific extensions and W3C
• Vendor-specific extensions to CSS3
• Vendor-specific properties

1. Selectors

CSS Selectors are an incredibly powerful tool: they allow us to target specific HTML elements in our markup without having to rely on unnecessary classes, IDs and JavaScripts. Most of them aren’t new to CSS3 but are not as widely used as they should be. Advanced selectors can be helpful if you are trying to achieve a clean, lightweight markup and better separation of structure and presentation. They can reduce the number of classes and IDs in the markup and make it easier for designers to maintain a style sheet.

Attribute selectors

Three new kinds of attribute selectors are a part of CSS3 specs:

• [att^="value"]
  Matches elements to an attribute that starts with the specified value.
• [att$="value"]
  Matches elements to an attribute that ends with the specified value.
• [att*="value"]
  Matches elements to an attribute that contains the specified value.

tweetCC uses an attribute selector to target links that have a title attribute ending in the words “tweetCC”:

a[title$="tweetCC"] {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 140px;
    height: 140px;
    text-indent: -9999px;
    }

Browser support: The only browser that doesn’t support CSS3 attribute selectors is IE6. Both IE7 and IE8, Opera and Webkit- and Gecko-based browsers do. So using them in your style sheet is definitely safe.

Combinators

The only new kind of combinator introduced in CSS3 is the general sibling selector. It targets all siblings of an element that have the same parent.

For example, to add a gray border to all images that are a sibling of a particular div (and both the div and the images should have the same parent), defining the following in your style sheet is enough:

div~img {
	border: 1px solid #ccc;
	}

Browser support: All major browsers support the general sibling selector except our favorite: Internet Explorer 6.

Pseudo-Classes

Probably the most extensive new addition to CSS are new pseudo-classes. Here are some of the most interesting and useful ones:

• :nth-child(n)
  Lets you target elements based on their positions in a parent’s list of child elements. You can use a number, a number expression or the odd and even keywords (perfect for Zebra-style table rows). So, if you want to match a group of three elements after the forth element, you can simply use:

  :nth-child(3n+4) { background-color: #ccc; }

• :nth-last-child(n)
  Follows the same idea as the previous selector, but matches the last children of a parent element. For example, to target the last two paragraphs in a div, we would use the following selector:

  div p:nth-last-child(-n+2)

• :last-child
  Matches the last child of a parent, and is equivalent to

  :nth-last-child(1)

• :checked
  Matches elements that are checked; for example, checked boxes.
• :empty
  Matches elements that have no children or are empty.
• :not(s)
  Matches all elements that do not match the specified declaration(s). For example, if we want to make all paragraphs that aren’t of the class “lead” to appear black, we would write:

  p:not([class*="lead"]) { color: black; }

  .

On his website, Andrea Gandino uses the :last-child pseudo-selector to target the last paragraph of each blog post and apply a margin of 0 to it:

#primary .text p:last-child {
    margin: 0;
    }

Browser support: Webkit-based and Opera browsers support all new CSS3 pseudo-selectors. Firefox 2 and 3 (Gecko-based) only support :not(s), :last-child, :only-child, :root, :empty, :target, :checked, :enabled and :disabled, but Firefox 3.5 will have wide support of CSS3 selectors. Trident-based browsers (Internet Explorer) have virtually no support of pseudo-selectors.

Pseudo-Elements

The only pseudo-element introduced in CSS3 is ::selection. It lets you target elements that have been highlighted by the user.

Browser support: No current Internet Explorer or Firefox browsers support the ::selection pseudo-element. Safari, Opera and Chrome do.

Useful Links

• Selectors Level 3: W3C Working Draft
• CSS3: Attribute selectors: CSS3.info
• Compatibility table: CSS3 Selectors
• CSS selectors and pseudo selectors browser compatibility
• CSS3 Attribute Selectors
• ::selection
• General Sibling Selector
• CSS3 Pseudo-classes

2. RGBA And Opacity

RGBA lets you specify not only the color but the opacity of an element. Some browsers still don’t support it, so it’s good practice to specify before the RGBa color another color without transparency that older browsers will understand.

Tim Van Damme uses RGBA colors on hover effects on links

On his website, Tim Van Damme uses RGBA colors on hover effects; for example, on the network links on his home page:

#networks li a:hover,
#networks li a:focus {
    background: rgba(164, 173, 183, .15);
    }

When setting an RGBA color, we must specify the red, blue and green values either with an integer value between 0 and 255 or with percentages. The alpha value should be between 0.0 and 1.0; for example, 0.5 for a 50% opacity.

The difference between RGBA and opacity is that the former applies transparency only to a particular element, whereas the latter affects the element we target and all of its children.

Here is an example of how we would add 80% opacity to a div:

div {
	opacity: 0.8;
	}

Browser support: RGBA is supported by Webkit-based browsers. No Internet Explorer browser supports it. Firefox 2 does’t support it either, but Firefox 3 does, as does Opera 9.5. Opacity is supported by Opera and Webkit- and Gecko-based browsers, but is not supported by either IE release.

Useful Links

• CSS Color Module Level 3: W3C Working Draft
• RGBA colors: CSS3.info
• RGBa Browser Support
• RGBA color space
• Is CSS3 RGBa ready to rock?
• Super-Awesome Buttons with CSS3 and RGBA

3. Multi-Column Layout

This new CSS3 selector lets you achieve multi-column layouts without having to use multiple divs. The browser interprets the properties and create the columns, giving the text a newspaper-like flow.

tweetCC uses CSS3 multi-column selector on its home page

tweetCC displays introductory text in four columns on its home page. The four columns aren’t floated divs; instead, the Web designer uses the CSS3 multi-column layout as follows:

.index #content div {
    -webkit-column-count : 4;
    -webkit-column-gap : 20px;
    -moz-column-count : 4;
    -moz-column-gap : 20px;
    }

We can define three things with this selector: the number of columns (column-count), the width of each column (column-width, not used in the example) and the gap between columns (column-gap). If column-count is not set, the browser accommodates as many columns that fit in the available width.

To add a vertical separator between columns, we can use the column-rule property, which functions pretty much as a border property:

div {
    column-rule: 1px solid #00000;
    }

Browsers that don’t support these properties render the content as simple text, as if there were no columns.

Related properties: column-break-after, column-break-before, column-span, column-fill.

Browser support: Multi-column layouts are supported by Safari 3 and 4 and Firefox 1.5+.

Useful Links

• CSS3 module: Multi-column layout: W3C Working Draft
• Columns
• CSS3 - Multi-Column Layout Demonstration
• CSS3 Columns
• Designing tweetCC
• Introduction to CSS3 - Part 5: Multiple Columns

4. Multiple Backgrounds

CSS3 lets you apply multiple layered backgrounds to an element using multiple properties such as background-image, background-repeat, background-size, background-position, background-origin and background-clip.

The easiest way to add multiple backgrounds to an element is to use the shorthand code. You can specify all of the above properties in a single declaration, but the most commonly used are image, position and repeat:

div {
	background: url(example.jpg) top left no-repeat,
		url(example2.jpg) bottom left no-repeat,
		url(example3.jpg) center center repeat-y;
	}

The first image will be the one “closest” to the user.

A more complex version of the same property would be:

div {
	background: url(example.jpg) top left (100% 2em) no-repeat,
		url(example2.jpg) bottom left (100% 2em) no-repeat,
		url(example3.jpg) center center (10em 10em) repeat-y;
	}

In this case, (100% 2em) is the background-size value; the background image in the top-left corner would stretch the full width of the div and be 2em high.

Because very few browsers support it, and because not displaying backgrounds on a website can really impair a website’s visual impact, this is not a widely used CSS3 property. However, it could greatly improve a Web designer’s workflow and significantly reduce the amount of markup that would otherwise be needed to achieve the same effect.

Browser support: multiple backgrounds only work on Safari and Konqueror.

Useful Links

• Layering multiple background images
• Multiple backgrounds with CSS3 and CSS3.info
• Introduction to CSS3, Part 6: Backgrounds

5. Word Wrap

The word-wrap property is used to prevent long words from overflowing. It can have one of two values: normal and break-word. The normal value (the default) breaks words only at allowed break points, like hyphens. If break-word is used, the word can be broken where needed to fit the given space and prevent overflowing.

The WordPress admin area uses word-wrap in data tables.

In the WordPress admin area, the word-wrap property is used for elements in tables; for example, in lists on Posts and Pages:

.widefat * {
    word-wrap: break-word;
    }

Browser support: word-wrap is supported by Internet Explorer and Safari. Firefox will support it in version 3.5.

Useful Links

• Force Wrapping: the ‘word-wrap’ property — CSS Text Level 3: W3C Working Draft
• word-wrap: CSS3.info
• CSS word-wrap
• word-wrap: Mozilla Developer Center

6. Text Shadow

Despite existing since CSS2, text-shadow is not a widely used CSS property. But it will very likely be widely adopted with CSS3. The property gives designers a new cross-browser tool to add dimension to designs and make text stand out.

You need to make sure, though, that the text in your design is readable in case the user’s browser doesn’t support advanced CSS3 properties. Give the text and background color enough contrast in case the text-shadow property isn’t rendered or understood properly by the browser.

Beakapp uses the text-shadow property on its website: for the content area.

BeakApp.com uses the text-shadow property for the content area, adding depth and dimension to the text and making it stand out without the use of an image replacement technique. This property is visible only in Safari and Google Chrome.

The CSS for the website’s main navigation shows the following:

.signup_area p {
	text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

Here, we have the shadow color (using RGBA, see above), followed by the right (x coordinate) and bottom (y coordinate) offset, and finally the blur radius.

To apply multiple shadows to a text, separate the shadows with a comma. For example:

p {
    text-shadow: red 4px 4px 2px,
		yellow -4px -4px 2px,
		green -4px 4px 2px;
    }

Browser support: Webkit-based browsers and Opera 9.5 support text-shadow. Internet Explorer doesn’t support it, and Firefox will only support it in version 3.5.

Useful Links

• Text Shadows: the ‘text-shadow’ property — W3C Working Draft
• Text shadows: Web Style Sheets CSS tips and tricks
• Text-shadow, Photoshop like effects using CSS — CSS3.info
• Make Cool And Clever Text Effects With CSS Text-Shadow
• Safari’s Text-Shadow Anti-Aliasing CSS Hack
• text-shadow
• text-shadow: Mozilla Developer Center

7. @font-face-Attribute

Despite being one of the most highly anticipated CSS3 features (even though it’s been around since CSS2), @font-face is still not as widely adopted on the Web as other CSS3 properties. This is due mainly to font licensing and copyright issues: embedded fonts are easily downloaded from the Web, a major concern to type foundries.

However, a solution to the licensing issues seems to be on the way. TypeKit promises to come up with a solution that would make it easier for designers and type foundries to agree on licensing issues that would significantly enrich the typography in Web design and make the @font-face attribute usable in practice.

Mozilla Labs JetPack website resorts to the font-face rule to use the DroidSans typeface

One of the few websites that use the property is the new JetPack MozillaLabs.

@font-face{
    font-family: 'DroidSans';
    src: url('../fonts/DroidSans.ttf') format('truetype');
    }

To use embedded fonts on your websites, you have to declare each style separately (for example, normal, bold and italic). Make sure to only use fonts that have been licensed for such use on the Web and to give the designer credit when required.

After the @font-face rule, you can call the font with a normal font-family property in your style sheet:

p {
    font-family: "DroidSans";
    }

If a browser doesn’t support @font-face, it will revert to the next font specified in the font-family property (CSS font stacks). This may be okay for some websites, if the @font-face font is a luxury for supported browsers; but if the font plays a major role in the design or is a key part of the visual identity of the company, you will probably want to use another solution, such as sIFR or Cufón. Bear in mind, though, that these tools are more appropriate for headings and short passages of text, and copying and pasting this kind of content is difficult and not user-friendly.

Wouldn’t it be nice to have such type for body copy on the Web? Dave Shea experiments with Cufón and Museo Sans. Beautiful!

Browser support: @font-face is supported by Safari 3.1+. Internet Explorer supports it if EOT fonts are used. Opera 10 and Firefox 3.5 should support it.

Useful Links

• Font Descriptions and @font-face — W3C Working Draft
• Web fonts with @font-face
• @font-face — Sitepoint
• Fonts available for @font-face embedding
• @font-face
• beautiful fonts with @font-face
• Introducing Typekit

8. Border Radius

Border-radius adds curved corners to HTML elements without background images. Currently, it is probably the most widely used CSS3 property for the simple reason that rounded corners are just nice to have and aren’t critical to design or usability.

Instead of adding cryptic JavaScript or unnecessary HTML markup, just add a couple of extra properties in CSS and hope for the best. The solution is cleaner and more efficient and can save you from having to spend a couple of hours finding clever browser workarounds for CSS and JavaScript-based rounded corners.

Sam Brown’s blog using border-radius on headings, categories and links.

On his website, Sam Brown uses the border-radius property heavily on headings, links and divs. Achieving this effect with images would be time-consuming. This is one of the reasons why using CSS3 properties in our projects is such an important step towards efficiency in Web development.

To add rounded corners to category links, Sam uses the following CSS snippet:

h2 span {
	color: #1a1a1a;
	padding: .5em;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	}

We can go one step further and add the original CSS3 property and Konqueror proprietary extension, making it:

h2 span {
    color: #1a1a1a;
    padding: .5em;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    }

If we want to apply the property to certain corners of our element, we can target each corner separately:

div {
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    }

Browser support: border-radius is supported by Webkit- and Gecko-based browsers but not by any version of Internet Explorer or Opera.

Useful Links

• border-radius: W3C Working Draft
• Border-radius: create rounded corners with CSS! — CSS3.info
• Introduction to CSS3, Part 2: Borders
• An Ode to border-radius
• CSS3 Border-Radius and Rounded Corners

9. Border Image

The border-image property allows you to specify an image for the border of an element, freeing you from the usual solid, dotted and other border styles. This property gives designers a better tool with which to consistently style the borders of design elements, being better than the background-image property (for advanced designs) or rigid default border styles. We can also explicitly define how a border should be scaled or tiled.

The SpoonGraphics blog uses the border-image property for its images borders

On the SpoonGraphis blog, border-image is used for the images borders as follows:

#content .post img {
    border: 6px solid #f2e6d1;
    -webkit-border-image: url(main-border.png) 6 repeat;
    -moz-border-image: url(main-border.png) 6 repeat;
    border-image: url(main-border.png) 6 repeat;
    }

To define the border-image, we must specify the image location, which part of the image should be cropped and used for each side of the element and how the image should be scaled and tiled.

To create a div that uses the image below as its border, we would use the following code (we will add in the Opera and Konqueror extensions for this example):

div {
    border-width: 18px 25px 25px 18px;
    -webkit-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -moz-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -o-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -khtml-border-image: url(example.png) 18 25 25 18 stretch stretch;
    border-image: url(example.png) 18 25 25 18 stretch stretch;
	}

The last value of this property can be stretch (default), round (only a whole number of repeated images will fit the space allowed) or repeat. In our example, the top, bottom, left and right border images are stretched. If we want only the top and bottom sides to stretch, we would use this CSS:

div {
    (...)
    border-image: url(example.png) 18 25 25 18 stretch repeat;
	}

We can also target each corner separately if we want to use a different image for each:

div {
    border-top-image: url(example.png) 5 5 stretch;
    border-right-image: url(example.png) 5 5 stretch;
    border-bottom-image: url(example.png) 5 5 stretch;
    border-left-image: url(example.png) 5 5 stretch;
    border-top-left-image: url(example.png) 5 5 stretch;
    border-top-right-image: url(example.png) 5 5 stretch;
    border-bottom-left-image: url(example.png) 5 5 stretch;
    border-bottom-right-image: url(example.png) 5 5 stretch;
    }

If a browser doesn’t support the border-image property, it will ignore it and only apply the other defined border properties, such as border-width and border-color.

Browser support: border-image is currently only supported by Webkit-based browsers. Support in the next release of Firefox is not certain.

Useful Links

• The ‘border-image’ property: W3C Working Draft
• Border-image: using images for your border — CSS3.info
• border-image in Firefox
• border-image demonstration page
• Replicating iPhone Buttons the “webkit” way!

10. Box Shadow

The box-shadow property adds shadows to HTML elements without extra markup or background images. Like the text-shadow property, it enhances the detail of a design; and because it doesn’t really affect the readability of content, it could be a good way to add that extra touch.

10to1 uses the box-shadow property for its navigation background and hover states.

10to1 adds a simple shadow to its navigation area and uses the property for a hover effect on the navigation links:

#navigation {
	-webkit-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	}
	#navigation li a:hover,
	#navigation li a:focus {
	-webkit-box-shadow: 0 0 5px #111;
	-moz-box-shadow: 0 0 5px #111;
	}

The box-shadow property can have multiple values: horizontal offset, vertical offset, blur radius, spread radius and shadow color. Horizontal and vertical offset and shadow color are the most commonly used.

To apply a red shadow positioned four pixels to the right and bottom of a div, with no blur, we would need the following code:

div {
    -moz-box-shadow: 4px 4px 0 #f00;
    -webkit-box-shadow: 4px 4px 0 #f00;
    box-shadow: 4px 4px 0 #f00;
    }

Browser support: box-shadow is currently supported only by Webkit-based browsers, but the upcoming Firefox 3.5 will very likely support it as well.

Useful Links

• The ‘box-shadow’ property — W3C Working Draft
• Box-shadow, one of CSS3’s best new features — CSS3.info
• Apple’s Navigation bar using only CSS
• Box Shadow — Surfin’ Safari blog

11. Box Sizing

According to CSS 2.1 specifications, when calculating the overall dimensions of a box, the borders and padding of the element should be added to the width and height. But legacy browsers are well known for interpreting this specification in their own and quite creative ways. The box-sizing property lets you specify how the browser calculates the width and height of an element.

WordPress uses the border-box property in all input fields (text type) and text area elements in the admin panel.

The WordPress admin area demonstrates this property in all its input tags with a text type and textarea tags (among other elements):

input[type="text"],
	textarea {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	}

The third property (-ms-box-sizing) only works in Internet Explorer 8. With other selectors, the WordPress style sheet also adds the Konqueror property: -khtml-box-sizing.

The box-sizing property can have one of two values: border-box and content-box. Content-box renders the width as specified in CSS 2.1. Border-box subtracts the padding and border from the specified width and height (as done by legacy browsers).

Browser support: box-sizing is supported by IE8, Opera and Gecko- and Webkit-based browsers.

Useful Links

• ‘box-sizing’ property: W3C Candidate Recommendation
• Box-sizing, box-model fixes for the simple people: CSS3.info
• CSS3 box-sizing attribute

12. Media Queries

Media queries let you define different styles for different devices based on their capabilities. For example, you may want your website’s sidebar to appear under the main content when viewed on devices with a viewport narrower than 480 pixels, in which case it shouldn’t be floated and displayed on the right side:

#sidebar {
	float: right;
	display: inline; /* IE Double-Margin Bugfix */
	}

@media all and (max-width:480px) {
	#sidebar {
		float: none;
		clear: both;
		}
	}

You can also target devices with color screens:

a {
	color: grey;
	}

@media screen and (color) {
	a {
		color: red;
		}
	}

The possibilities are endless. This property is useful because you no longer have to write separate style sheets for different devices, nor do you have to use JavaScript to determine the capabilities and properties of each user’s browser. A more popular JavaScript-based solution to achieve a flexible layout would be to use an adaptive fluid layout, making the layout more responsive to the user’s browser resolution.

Browser support: Media queries are supported by Webkit-based browsers and Opera. Firefox plans to support them in version 3.5. Internet Explorer currently doesn’t support them and doesn’t plan to support them in upcoming versions.

Useful Links

• Media Queries: W3C Candidate Recommendation
• Extensions to CSS 3 Media Queries
• Media Queries: CSS3.info
• The bleeding edge of web: media queries
• Safe media queries
• Media types

13. Speech

The speech module in CSS3 lets you specify the speech style of screen readers. You can control various aspects of the speech, such as:

• voice-volume
  Set a volume using a number from 0 to 100 (0 being silence), percentages or a keyword (silent, x-soft, soft, medium, loud and x-loud).
• voice-balance
  Control which channel sound comes from (if the user’s sound system supports stereo).
• Speak
  Instruct the screen reader to spell out particular words, digits or punctuation. Available keywords are none, normal, spell-out, digits, literal-punctuation, no-punctuation and inherit.
• Pauses and rests
  Set a pause or rest before or after an element’s content is spoken. You can use either time units (for example, “2s” for 2 seconds) or keywords (none, x-weak, weak, medium, strong and x-strong).
• Cues
  Use sounds to delimit particular elements and control their volume.
• voice-family
  Set specific types of voices and voice combinations (as you do with fonts).
• voice-rate
  Control the speed at which elements are spoken. This can be defined as a percentage or keyword: x-slow, slow, medium, fast and x-fast.
• voice-stress
  Indicate any emphasis that should be applied, using different keywords: none, moderate, strong and reduced.

For example, to tell a screen reader to read all h2 tags in a female voice, from the left speaker, in a soft tone and followed by a particular sound, set the CSS as follows:

h2 {
	voice-family: female;
	voice-balance: left;
	voice-volume: soft;
	cue-after: url(sound.au);
	}

Unfortunately, this property has very little support now but is definitely worth keeping in mind so that we might improve the accessibility of our websites in future.

Browser support: Currently, only Opera browsers for Windows XP and 2000 support some of the speech module properties. To use them, use the -xv- prefix; for example, -xv-voice-balance: right.

Useful Links

• CSS3 Speech Module — W3C Working Draft
• CSS3 Speech — CSS3.info
• Aural CSS: Support for CSS 2 Aural Style Sheets / CSS 3 Speech Module

Conclusion

CSS3 properties can greatly improve your workflow, making some of the most time-consuming CSS tasks a breeze and allowing for better, cleaner and more lightweight markup. Some properties are still not widely supported, even by the most recent browsers, but that doesn’t mean we shouldn’t experiment with them or give visitors with modern browsers advanced features and CSS styling.

In this regard, keep in mind that educating our clients is both useful and necessary: websites don’t have to look exactly the same in every browser, and if a difference doesn’t negatively affect the aesthetics or usability of a website, it should be considered. If we continue to waste valuable time and money making every detail pixel-perfect (instead of adopting more flexible and future-oriented solutions), users won’t have an incentive to upgrade their browsers, in which case we would have to wait a long time before older browsers become legacy browsers and robust modern browsers become the standard.

The earlier we experiment with and adapt new CSS3 properties, the earlier they will be supported by popular browsers and the earlier we’ll be able to use them widely.

Further Reading And References

• CSS3 Previews: CSS3.info
• CSS 3: Exciting Function and Features: 30 Useful Tutorials
• 5 CSS3 Techniques For Major Browsers using the Power of jQuery
• Introduction to CSS3 - Part 1: What is it?
• Comparison of layout engines (Cascading Style Sheets) and Wikipedia
• Progressive enhancement
• Five CSS design browser differences I can live with
• Progressive Enhancement with CSS
• CSS support in Opera 9.5

About the Author

Inayaili de León is a Portuguese Web designer. She has a true passion for Web design and front-end coding and loves beautiful and clean websites. She lives in London (and blogs about it), and enjoys pizza and “skyping” her cats. You can see more of her articles at Web Designer Notebook and follow her daily ramblings on Twitter.

(al)

© Inayaili de Leon for Smashing Magazine, 2009. |
Permalink |
112 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: CSS, css3

WordPress needs no introduction among designers and writers. It’s usually known as a synonym for blogging. Now days every other WordPress blogs look more or less similar, to stand uniquely out from the rest, you need to tweak it a little bit by using quality hacks.

You all must’ve known that the new version v2.8 is already arrived and most of you going to update your WordPress to v2.8 anyway. So, it’s a right time to implement some new hacks also.

Of Course, WordPress Codex is always the best place to learn about WordPress and its tweaks. But unfortunately, it’s too much for a simple WordPress user. This the only reason we compiled this fairly comprehensive list of the Quality WordPress Hacks to unleash the power of your favorite blogging engine.

One of the greatest things about blogging is the immediate feedback a blogger can get from his or her readers. Still it’s often possible that your readers don’t give you a wink about their likes and dislikes. Unfortunately, there is no way for you to find out about visitors thinking towards your blog or its design. It’s always essential to play safe and give others what they like. Out of many solutions the inspirational one is only promising and optimistic way to achieve desired changes. This article focuses on organized collection of some of the Most Wanted WordPress Hacks which will definitely make your blogging life easier.

You may be interested in the following tips and tricks related articles as well.

• 10 Twitter Hacks For Your WordPress Blog
• 30 Most Wanted WordPress Comments Page Hacks
• 11 Tips to Reduce Server Load and Save Bandwidth
• How to Increase Web Traffic through Search Engines!
• 21 Reasons Why Readers Don’t Like Your Blog

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to other tips and tricks that our readers may like.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

<div id="zukunft">
  <div id="zukunft_header">

Future events
  </div>

 <?php query_posts('showposts=10&post_status=future'); ?>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <div>
  <p class=""><b><?php the_title(); ?></b><?php edit_post_link('e',' (',')'); ?>

 <span class="datetime"><?php the_time('j. F Y'); ?></span>
  </p></div>

 <?php endwhile; else: ?>

No future events scheduled.

<?php endif; ?>
</div>

<h2>Popular Posts</h2>
  <ul>
  <?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5");
  foreach ($result as $post) {
    setup_postdata($post);
    $postid = $post->ID;
    $title = $post->post_title;
    $commentcount = $post->comment_count;
    if ($commentcount != 0) { ?>

<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
    <?php echo $title ?></a> {<?php echo $commentcount ?>}</li>
    <?php } } ?>

</ul>

<?php
//for use in the loop, list 5 post titles related to first tag on current post
$tags = wp_get_post_tags($post->ID);
if ($tags) {
  echo 'Related Posts';
  $first_tag = $tags[0]->term_id;
  $args=array(
    'tag__in' => array($first_tag),
    'post__not_in' => array($post->ID),
    'showposts'=>5,      'caller_get_posts'=>1
  );
  $my_query = new WP_Query($args);
  if( $my_query->have_posts() ) {
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
      <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
    <?php endwhile;
  }
}
?>

<?php
function recent_comments($src_count=10, $src_length=60, $pre_HTML='<ul>', $post_HTML='') {
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved, comment_type,
SUBSTRING(comment_content,1,$src_length) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND post_password = '' ORDER BY comment_date_gmt DESC
LIMIT $src_count";
$comments = $wpdb->get_results($sql);
$output = $pre_HTML;
foreach ($comments as $comment) {
$output .= "<li><a href=\"" . get_permalink($comment->ID) . "#comment-" . $comment->comment_ID . "\" title=\"on " . $comment->post_title . "\">" . strip_tags($comment->com_excerpt) ."...</a></li>";
}
$output .= $post_HTML;
echo $output;
}
?>

<?php recent_comments(); ?>

<h2>Most commented posts from 2008</h2>
<ul>
<?php
$result = $wpdb->get_results("SELECT comment_count,ID,post_title, post_date FROM $wpdb->posts WHERE post_date BETWEEN '2008-01-01' AND '2008-12-31' ORDER BY comment_count DESC LIMIT 0 , 10");

foreach ($result as $topten) {
  $postid = $topten->ID;
  $title = $topten->post_title;
  $commentcount = $topten->comment_count;
  if ($commentcount != 0) { ?>
    <li><a href="<?php echo get_permalink($postid); ?>"><?php echo $title ?></a></li>
  <?php }
} ?>
</ul>

<?php foreach ($comments as $comment) : ?>

<?php $comment_type = get_comment_type(); ?>
<?php if($comment_type == 'comment') { ?>

<?php endforeach; /* end for each comment */ ?>

<?php } else { $trackback = true; } /* End of is_comment statement */ ?>

<?php else : // this is displayed if there are no comments so far ?>

<?php if ($trackback == true) { ?>
  <h3>Trackbacks</h3>
  <ol>
  <?php foreach ($comments as $comment) : ?>
    <?php $comment_type = get_comment_type(); ?>
    <?php if($comment_type != 'comment') { ?>
      <li><?php comment_author_link() ?></li>
    <?php } ?>
  <?php endforeach; ?>
</ol>
<?php } ?>

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img .+src=[\'"]([^\'"]+)[\'"].*/>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

 if(empty($first_img)){ //Defines a default image
  $first_img = "/images/default.jpg";
  }
  return $first_img;
}

<?php echo catch_that_image() ?>

<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>

<?php
  $szPostContent = $post->post_content;
  $szSearchPattern = '~<img [^\/>]*\ />~';

// Run preg_match_all to grab all the images and save the results in $aPics
  preg_match_all( $szSearchPattern, $szPostContent, $aPics );

// Check to see if we have at least 1 image
  $iNumberOfPics = count($aPics[0]);

if ( $iNumberOfPics > 0 ) {
  // Now here you would do whatever you need to do with the images
  // For this example the images are just displayed
  for ( $i=0; $i < $iNumberOfPics ; $i++ ) {
  echo $aPics[0][$i];
  };
  };

endwhile;
endif;
?>

$num = rand(1,10); //Get a random number between 1 and 10, assuming 10 is the total number of header images you have
<div id="header" style="background:transparent url(images/.jpg) no-repeat top left;">
</div>

<?php the_content('Read More'); ?>

<p class="attachment">
  <a href="<?php echo wp_get_attachment_url($post->ID); ?>"><?php echo wp_get_attachment_image( $post->ID, 'medium' ); ?></a>
</p>
<div class="caption">
  <?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the "caption" ?>
</div>

<div class="imgnav">
<div class="imgleft"><?php previous_image_link() ?></div>
<div class="imgright"><?php next_image_link() ?></div>
</div>
<br clear="all" />

/****************Image Gallery *********************/
.gallery {
      text-align: center;
}
.gallery img {
      padding: 2px;
      height: 100px;
      width: 100px;
}
.gallery a: hover {
      background-color: #ffffff;
}
.attachment {
      text-align: center;
}
.attachment img {
      padding: 2px;
      border: 1px solid #999999;
}
.attachment a: hover {
      background-color: #FFFFFF;
}
.imgnav {
      text-align: center;
}
.imgleft {
      float: left;
}
.imgleft a: hover {
      background-color: #FFFFFF;
}
.imgleft img {
      padding: 2px;
      border: 1px solid #999999;
      height: 100px;
      width: 100px;
}
.imgright {
      float: right;
}
.imgright a: hover {
      background-color: #FFFFFF;
}
.imgright img {
      padding: 2px;
      border: 1px solid #999999;
      height: 100px;
      width: 100px;
}

<a href="javascript:window.print()" rel="nofollow">Print this Article</a>

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" target="blank">Share on Facebook</a>

<?php $turl = getTinyUrl(get_permalink($post->ID)); ?>
<a href="http://www.facebook.com/sharer.php?u=<?php echo $turl;?>&t=<?php the_title(); ?>" target="blank">Share on Facebook</a>

<a href="http://twitter.com/home?status=Currently reading <?php the_permalink(); ?>" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a>

.authcomment {
      background-color: #B3FFCC !important;
}

<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
</li>

<li class="<?php if ($comment->user_id == 1) $oddcomment = "authorstyle"; echo $oddcomment; ?>"
</li>

.postauthor {
}

<?php the_content('Read the rest of this entry »'); ?>

<div class="postauthor ">
    <?php the_author_description(); ? >
</div>

.postauthor {
      color: #222222;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      font-weight: normal;
      background: #EAEAEA;
      border-top: 2px solid #000000;
      border-bottom: 1px solid #000000;
      width: 640px;
      padding: 3px;
      margin-bottom:5px;
}

<?php wp_list_authors('exclude_admin=0&optioncount=1&show_fullname=1&hide_empty=1'); ?>

//get cool feedburner count
$whaturl="http://api.feedburner.com/awareness/1.0/GetFeedData?uri=feedburner-id";

//Initialize the Curl session
$ch = curl_init();

//Set curl to return the data instead of printing it to the browser.
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

//Set the URL
curl_setopt($ch, CURLOPT_URL, $whaturl);

//Execute the fetch
$data = curl_exec($ch);

//Close the connection
curl_close($ch);
$xml = new SimpleXMLElement($data);
$fb = $xml->feed->entry['circulation'];
//end get cool feedburner count

echo $fb;

function publish_later_on_feed($where) {
  global $wpdb;

 if ( is_feed() ) {
    // timestamp in WP-format
    $now = gmdate('Y-m-d H:i:s');

    // value for wait; + device
    $wait = '5'; // integer

   // http://dev.mysql.com/doc/refman/5.0/en/date-and-time-functions.html#function_timestampdiff
    $device = 'MINUTE'; //MINUTE, HOUR, DAY, WEEK, MONTH, YEAR

   // add SQL-sytax to default $where
    $where .= " AND TIMESTAMPDIFF($device, $wpdb->posts.post_date_gmt, '$now') > $wait ";
  }
  return $where;
}

add_filter('posts_where', 'publish_later_on_feed');

function myFilter($query) {
  if ($query->is_feed) {
    $query->set('cat','-5'); //Don't forget to change the category ID =^o^=
  }
  return $query;
}

add_filter('pre_get_posts','myFilter');

<?php
  /*
  Template Name: Custom Feed
  */

$numposts = 5;

function yoast_rss_date( $timestamp = null ) {
  $timestamp = ($timestamp==null) ? time() : $timestamp;
  echo date(DATE_RSS, $timestamp);
  }

function yoast_rss_text_limit($string, $length, $replacer = '...') {
  $string = strip_tags($string);
  if(strlen($string) > $length)
  return (preg_match('/^(.*)\W.*$/', substr($string, 0, $length+1), $matches) ? $matches[1] : substr($string, 0, $length)) . $replacer;
  return $string;
  }

$posts = query_posts('showposts='.$numposts);

$lastpost = $numposts - 1;

header("Content-Type: application/rss+xml; charset=UTF-8");
  echo '<?xml version="1.0"?>';
  ?><rss version="2.0">
  <channel>
  <title>Yoast E-mail Update</title>
  <link>http://yoast.com/</link>
  <description>The latest blog posts from Yoast.com.</description>
  <language>en-us</language>
  <pubdate><?php yoast_rss_date( strtotime($ps[$lastpost]->post_date_gmt) ); ?></pubdate>
  <lastbuilddate><?php yoast_rss_date( strtotime($ps[$lastpost]->post_date_gmt) ); ?></lastbuilddate>
  <managingeditor>joost@yoast.com</managingeditor>
  <?php foreach ($posts as $post) { ?>
    <item>
    <title><?php echo get_the_title($post->ID); ?></title>
    <link><?php echo get_permalink($post->ID); ?></link>
    <description><?php echo '<![CDATA['.yoast_rss_text_limit($post->post_content, 500).'<br /><br />Keep on reading: <a href="'.get_permalink($post->ID).'">'.get_the_title($post->ID).'</a>'.']]>';  ?></description>
    <pubdate><?php yoast_rss_date( strtotime($post->post_date_gmt) ); ?></pubdate>
    <guid><?php echo get_permalink($post->ID); ?></guid>
    </item>
  <?php } ?>
  </channel>
  </rss>

<div style="padding:5px; background-color:#FFF8AF;">
  If you enjoyed this post, make sure you subscribe to our RSS Feed
</div>

In the U.S., most outdoor signs made between 1890 and and 1950 were constructed of a base of heavy rolled iron, which was die cut into the desired shape, then coated with layers of colored powdered glass and fired in a kiln. This process made them durable and weather-resistant. Signs made this way were known as porcelain enamel signs or simply enamel signs.

Porcelain enamel signs originated in Germany and were imported into the U.S. They quickly became a staple of outdoor advertising across the country. Around 1900, designers experimented with bold colors and graphics on the signs and they were used to advertise everything from cigarettes and beer to farm equipment and tires. Early designs were stenciled, but American designers switched to silkscreens and started using a steel base instead of iron. Later, when porcelain enamel became too costly, tin bases were used instead of steel.

Now it is difficult to find antique porcelain enamel signs in excellent condition. Collectors pay hundreds and even thousands of dollars for each addition to their collections. Many of the signs were vandalized, discarded due to etching or crazing in the finish or melted down for the metal during World War II. After the war, the signs were too expensive to manufacture, so we are left with only the dazzling pieces that remain from the era.

Signs were later made of tin and other materials and painted with enamel paint. More of these types of signs remain, but they are often rusted, scratched and distressed. After WWII, "enamel" signs were simply enamel paint on a metal, usually tin, base.

There is a huge market for vintage signs and collectors must be wary of distressed reproductions. Often vintage signs are stamped with the date they were manufactured, while other times research and knowledge about antique signs may be required to discern a real antique from a knockoff.

You may also enjoy these previous articles:

• Celebration of Vintage and Retro Design, which features ads, illustrations, book covers, pins and posters from the 1920s to the 1980s.
• Retro and Vintage in Modern Web Design, which highlights websites with a nostalgic atmosphere.

Rare and Unusual Antique, Vintage and Retro Signs

Vintage Tin 7up Display Sign
This vintage 7up sign was made to be attached to the rods of a wire display inside a store. It is believed to have been manufactured in the 1950s or 1960s by the Indiana Wire and Specialty Company of Indianapolis, Indiana and measures 12" x 12".

Vintage 7up Enamel Painted Store Sign
This 7up sign is stamped metal and is painted with enamel paint. It measures 20" x 18" and was manufactured in 1963 by Stout Sign Co. in St. Louis.

Southwestern Bell Porcelain Sign
This is a large metal Southwestern Bell sign, measuring approximately 28" to 30" tall and 19" to 20" wide. This sign is still faily shiny, but does have a few chips and some rust spots.

Chevrolet Bel Air Dealer Poster
In the 1950s, car dealerships used posters like this one as indoor signage. These posters were eye-catching and colorful and could be easily changed when new models were introduced.

Vintage Tin Hrobak’s Beverages Sign
This is a rare sign from Hrobak’s Beverages in Philadelphia. It is believed to have been made in the 1940s and measures approximately 20" x 9".

Blue Bell Tobacco Porcelain Sign
This is a heavy steel and porcelain double sided sign. It measures 14" x 22" and is in great shape for its age.

Antique Buick Dealership Sign
This is an antique neon sign from a Buick car dealership. It was likely manufactured in the 1950s.

Cadbury’s Chocolate Enamel Sign
Cadbury’s chocolate is a favorite in Europe, which is likely where this antique painted enamel sign was made.

Canada Dry Beverages Porcelain Sign
This vintage sign is porcelain over metal and was manufactured for Canada Dry Beverages. It measures 24" x 7" and has chips in the porcelain and rust on the base. Despite its flaws, it is still a valuable collectors item.

Chesterfield Cigarettes Sign
This vintage Chesterfield Cigarettes sign was found hanging on the side of a shed at a gas station in North Carolina. Its age is unknown, but it is authentic. It measures 34" x 12" and was likely manufactured in the 1930s or 1940s.

Stothers Chest & Lung Mixture Sign
This vintage sign was likely made in the 1940s. While is is slightly warped along the bottom, it is still in good condition for its age.

Large Vintage Coca-Cola Sign
This 1939 Coca-Cola sign remains in the wooden frame in which it was originally shipped. It measures 71.5" x 35.75 and has some dents and surface rust, but is still a nice piece for a collector.

Rare Coca-Cola Cardboard Sign
This Coca-Cola sign is printed on cardboard and measures 20" x 36". It was shrink wrapped onto an acid-free backing board. Printed during the war in 1944, it features two young woman pointing to the area on the globe where their men are serving.

Post-WWII Cardboard Coca-Cola Sign
After WWII, signs had to be made more inexpensively. One option used by Coca-Cola were cardboard signs. This Coca-Cola sign was made in 1948 by Edwards & Deutsch Lith Co. in Chicago and measures 27" x 16".

Congress Beer Pressed Tin Sign
This pressed tin sign advertises Congress Beer, which was made by the Haberle Congress Brewing Company in Syracuse, New York. Age has yellowed the lettering on the sign, but it is otherwise in good condition and is a nice collectors item.

Wolf’s Head Oil & Lubes
This unique sign was produced in the 1940s and is 22" x 17". It is an original piece and has been preserved over the years so that it remains in excellent condition. This type of sign in this condition is rather rare and is sought after by the choosiest collectors.

Crown Gasoline Double Sided Porcelain Sign
This Crown Gasoine Standard Oil Company sign is double sided, which is somewhat unusal for a porcelain sign. It measures 26" square and is showing signs of its age, but is still extremely valuable.

Dad’s Root Beer Tin Sign
This is a 1950s Dad’s Rootbeer sign measuring 27" x 13". It is enamel paint on a tin base and has rusted a bit around the edges.

Delaware Quality Feeds Metal Sign
This vintage Delaware Quality Feeds sign doubled as a public service announcement to warn of an upcoming cow pass. This unique piece measures 12" x 15" and is extremely weathered.

Vintage Dr. Pepper Metal Sign
This style of Dr. Pepper sign was introduced in 1958 and discontinued in the early 1970s. It measures approximately 20" x 7" and is constructed of thin sheet metal and enamel paint.

Extremely Rare Eldredge Brewing Company Sign
This antique sign was produced in the 1800s for Eldredge Brewing Company in Portsmouth, New Hampshire. It is marked "Wells & Hope Co. Pat Metallic Advertising Signs, Philada, P.A." and features an image of a man and a woman enjoying Eldredge lager beer. It measures 20" x 29" and aside from some minor wear around the edges, is in wonderful condition.

"Standard" Esso Porcelain Sign
The essense of vintage Americana, this large porcelain Esso sign is a valuable collectors item. Esso stations were the original ExxonMobile gas stations and these signs were once very common along U.S. roadways.

Vintage Foot Rest Hosiery Sign
This vintage sign measures 11.25" x 17.25 and is constructed of tin with a cardboard backing. The image of the child holding the sign is one example of classic antique advertising.

Vintage Coca-Cola Fountain Service Sign
This porcelain sign was made in 1933. It measures 25.5" x 23" and shows some signs of its age, but is still a sought-after collectors item.

Mitchell’s "Golden Dawn" Cigarettes
Made in an era when smoking cigarettes was glamorized, this tin enamel sign is was designed to be simple and shiny. The name of the company and little else is displayed on the face, which is now chipped and rusting with age.

Unique Good Year Tire Porcelain Signs
These winged Good Year Tire porcelain signs are embossed on the back with "Property of Good Year Rubber Company W-73". These are large signs, with the larger one measuring 64" x 23" and the smaller measuring 46.5" x 17". Both signs were originally white, but a clear lacquer has yellowed the smaller one.

Hi-Plane Tobacco Sign
This 1940s tin store sign advertises an all but forgotten brand of tobacco. It measures 35" x 12" and is a colorful collectors item.

Vintage Hires Root Beer Sign
This vintage Hires Root Beer sign measures 9.5" x 27.5" and was manufactured by Press Sign Co. in St. Louis.

Merry War Lye Sign
This vintage Merry War Lye sign was made in the 1940s. It was found in the back room of an old general store and measures 14" x 11".

Kool Cigarettes Sign
This store sign was made in the 1950s to advertise Kool cigarettes. It measures 26" x 11" and has raised letters and design.

Leaf Spearmint Gum Sign
This Leaf Spearmint Gum sign was made in the 1940s and measures 25" x 9" and is in fairly good condition for its age. Its colorful design makes it a popular collectors item.

Miller "High Life" Beverages Sign
This sign is an original advertisement for Miller "High Life" Beverages. It was made in the 1940s and measures 20" x 13.5".

MobileGas Porcelain Restroom Pledge Sign
This heavy porcelain sign is measures 7.5" x 7.75". It is a rare and nostalgic piece, bound to bring back memories of the time when customer service was everything.

Vintage Mr. Cola Sign
This unique Mr. Cola sign was made in 1945 by Stout Sign Co. of St. Louis. It measures 11.75 square and the lettering is embossed.

Muratti’s Cigarettes Sign
This colorful tin sign is an antique lithographed advertisement for Muratti’s cigarettes. A collectors item for sure, the sign promotes cigarettes for "young ladies."

Old Virginia Cheroots Sign
This turn of the century sign measures 8.5" square and is extremely rare. The graphic is lithographed onto a tin base

Green Spot Orange Drink Sign
This vintage Green Spot Orange Drink sign was used on an in-store advertising rack. It measured 22" x 19" and was manufactured by Arnamac Products Inc. in Cincinatti, Ohio.

Pabst Blue Ribbon Sign
This is a 1940s Pabst Blue Ribbon beer sign constructed of tin over cardboard, which advertises beer for 15 cents.

Pee Gee Paint Sign
This double sided porcelain Pee Gee Paint sign was made in the early 1920s. Although it is definitely showing some age, it is sitll very valuable to collectors.

Vintage Cardboard Pepsi-Cola Sign
This vintage Pepsi-Cola sign was made in the 1950s and measures 8.25" x 15". During this time period, companies were tring to save money and printing on thick cardboard was cheaper than making metal signs.

Phillips 66 Porcelain Sign
This porcelain Phillips 66 sign was made in 1945. It is a double sided sign and likely one of the last porcelain signs of its kind. It was manufactured by Veribrite Signs in Chicago.

Red Coon Tobacco Sign
This brightly colored vintage sign measures 10" x 14".

Vintage Redman Tobacco Die Cut Paper Sign
This original die cut Redman Tobacco sign is believed to have been made in the 1950s. It measures 20.5" x 15.5," is made of paper and is in remarkably good condition.

Antique Railroad Sign
This antique railroad crossing sign is stamped on the back with "National Colortype Co. Signs and Signals, Bellvue, K.Y." It is constructed of metal and has cat eye marble reflectors.

Antique Railroad Stop Sign
This antique railroad stop sign has cat-eye marbles spelling out the word "Stop," making it a unique collectors item.

Vintage Salvation Army Sign
This original Salvation Army Thrift Store sign measures 18" x 16" and has some chipping, but is in good condition overall.

Senior Service Tobacco Sign
This unique sign is believed to have been made in the 1930s and measures 12" x 4".

Porcelain No Smoking Gas Station Sign
This vintage porcelain "No Smoking" sign came from a gas station. It is still in very good condition and measures 18" x 5.5".

Vintage Squirt Soda Sign
This tin sign advertising Squirt soda was made in 1958. It features an embossed design and measures 27.5" x 9".

Standard Feeds Metal Sign
This old metal farm sign measures 23.5" x 11.75". It is an original made by Stout Sign Co. of St. Louis, Missouri.

Porcelain Star Tobacco Sign
This is a very early porcelain sign, likely made at the turn of the century. Signs this old and in this condition are rare and quite valuable.

‘

Double Sided Star Motor Gasoline Sign
This double sided flange metal sign is measures about 12" in diameter. It is an original sign, likely produced in the 40s.

‘

Raybestos Brake Service
This rare vintage sign is double sided and flanged and measures 18" x 13.75". It is believed to have been made in the 1950s.

‘

Sunbeam Bread Door Push Plate
This is a door push plate measuring 4" x 12". It was produced in 1953, but never used, which makes it a rare item for the serious collector.

‘

Vintage John Graf Sylvan Dry Soda Sign
This is a vintage tin sign that measures 20" x 11.5". It was manufactured by Donaldson Art Sign in the 1940s.

‘

Allied Mills Inc. Wayne Feeds Sign
This is an original die cut Allied Mills Inc, Wayne Feeds tin sign. It measures 14" x16" and is believed to have been made in the early 1930s.

‘

Vintage Whistle Soda Sign
This 19" x 27" tin Whistle soda sign is believed to have been made in the 1930s. It features embossing on the entire design and lettering on the sign state it was manufactured by "The American Art Works, Inc., Coshocton, O."

‘

Sweet-ORR Porcelain Sign
Sweet-ORR produced Union Made pants, shirts and overalls. This 23.5" x 10" porcelain sign has some wear, but is still in relatively good condition and would be valuable to a collector.

‘

Dairy Queen License Plate Topper
This metal 6.25" license plate topper was made in the 1960s. Because this one was never used, it remains in perfect condition.

‘

Antique Beech-Nut Tobacco Porcelain Sign
This is an original Regina Beech-Nut tobacco 12" x 9" porcelain sign, showing signs of its age on the edges.

‘

‘

Further Resources

• 35 Beautiful Vintage and Retro Photoshop Tutorials
• Vintage and Retro Typography Showcase

About the Author

Gerri L. Elder is an associate editor at Webist Media, a Web content producer/manager and social media strategist. She can frequently be found on Digg and Twitter.

© Gerri Elder for Smashing Magazine, 2009. |
Permalink |
54 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: retro, signs, typography, vintage

Folks! Are you interested in creating animated effects (flash intros, banners and headers in particular) for yourself or your clients? We have something to give you that can perhaps fulfill your design related needs (or maybe not). We are giving out 5 Premium Unlimited License of FlashEff (worth $199/year) to InstantShift readers.

FlashEff is an advanced Flash effects component for easing the animation/transition process.

You will be surprised to see what you can do with this powerful tool: from spectacular text effects to some smooth animations.

So Hurry up, read the rules and comment below to enter in this contest.

Every website has to perform maintenance at some point or another. Whether it’s just to upgrade a portion of the site or because of some problem with the site, it’s an inevitable fact of website ownership. And in many cases, maintenance requires taking your site offline for at least a few minutes.

So what should you do if your site is going to be down for maintenance? You don’t want users coming to a 404 or other error page. And hopefully you’d like to encourage them to come back to your site sooner rather than later, right? If that’s the case, you’ll need to build a custom maintenance page. Below we present a list of best practices to building effective maintenance pages that will help keep your visitors, whether new or returning, happy.

You may want to take a look at the following related posts:

• 404 Error Pages
• 404 Error Pages: Reloaded
• 404 Error Pages: One More Time

1. Keep you maintenance pages simple and useful.

The entire point of a maintenance page is to let visitors know that your site is still around and that the maintenance is only temporary. It doesn’t need to do anything beyond that. Make sure it’s immediately apparent what your page is about and provides your visitors with the information they’re interested in.

Another useful function for simple maintenance pages is to include your maintenance message in multiple languages. The Web is global, and while many of your visitors are likely to speak at least some English, providing multiple languages is helpful. Just be wary of using online translators, as sometimes they’re less-than-accurate. The last thing you want your maintenance page to do is further confuse people, or worse – offend them.

Delicious with a simple and clear message (via).

This Twitter maintenance page gives the bare minimum of information and keeps a simple design while still being inviting and friendly toward users.

Google’s Adsense page offers a simple maintenance message in a huge number of languages…

…and sometimes Google Adsense just explains in plain language what is happening and when the page will be online again. Notice that Google also reassures the users that earnings will continue to be tracked as normal, and ad targeting will not be affected during this downtime.

This maintenance screen from the Apple Store get to the point while still remaining casual.

MobileMe with a visually appealing maintenance screen in multiple languages (via).

2. Realize it’s an inconvenience to your visitors.

When your site is down, your regular visitors are inconvenienced. It’s a simple fact. But don’t let inconvenienced visitors turn into alienated visitors. Simply acknowledging that your site’s downtime is a pain for your visitors is often enough to satisfy them. Apologize for the downtime, give them information that’s useful to them, and make them feel like you realize what this means to them.

Last.fm puts a big apology right at the top of their maintenance page.

Twitter takes a more light-hearted approach but still acknowledges that users might be getting impatient with the downtime.

3. Don’t be afraid to use humor.

There’s no need to get all serious just because your site is down. Using a bit of humor or otherwise making your maintenance page entertaining helps to improve your site’s image in the eyes of visitors inconvenienced by the downtime. Think about different angles related to your site’s content that could be portrayed in a humorous light. Whether it’s doing something with your site’s logo or mascot, or even something seemingly unrelated to your site, there’s surely an angle out there for making your maintenance page funny.

Etsy shows Halm working on the current technical problems. Notice that Etsy also communicated what’s happening and the estimated downtime.

Soundcloud promises to be up soon and uses a pun to make the maintenance page stand out (via).

Ning uses a cute illustration and claims that its experienced technicians (pictured) are currently hard at work so as to bring Ning back online shortly (via).

Reddit’s maintenance page could use more information; Reddits probably shouldn’t have stopped using Lisp…

…and YouTube seems to be busy pushing out some new concoctions and formulas (via)

Mozilla: “Repairs in Progress” (via).

Revver (via).

Flickr’s maintenance page is not very informative, but funny. Flickr is having a massage.

FlashDen claims a 10 second downtime and offers up a cartoonish character doing maintenance on himself to make visitors smile.

Bloglines uses an image of a plumber to lighten things up when their site is down.

Apartmentguide.com: another instance of using a maintenance worker on a maintenance page.

4. Give your maintenance page the same look and feel as your regular site.

You want visitors to immediately realize that they have arrived at the correct place, even if your site doesn’t quite look the same as always. If your maintenance page bears no resemblance to your regular site, many visitors may just assume they’ve gone to the wrong URL without bothering to read what your page says.

Make sure your maintenance page includes your logo and keeps the same general color scheme as your site. Even these two simple things can make visitors feel more at ease when they reach an unexpected page.

Grooveshark keeps their header and basic color scheme in tact.

StumbleUpon also keeps their header and logo in tact, and even the colors used in the illustration echo their brand colors.

Naturalinstinct uses the same color scheme and provides users with alternative contact options.

5. Let visitors know when your site will be back.

Maintenance times can vary greatly. Sometimes a site might be down for only a few minutes. Other times it could be an hour or two, or even longer. Let your visitors know what time you expect to be back up and running. This way they’ll have an idea of when to come back. An open-ended maintenance page encourages them to put a return visit off for hours or even days. Something that says you’ll be back in five minutes encourages them to do the same.

iStockPhoto’s maintenance page informs its visitors about the estimated time when the site will be back.

Blogger uses a simple page that includes the time the site is expected to be back up.

Linkedin lets the users know when the site will return online (via).

StudiVZ suggests to drink a cup of tea and informs the visitors that the site will be online at 8am (via).

6. Provide recommended content.

Keeping a few articles from your site on a static page for maintenance downtime is one way to offer your visitors something to look at while you’re performing maintenance. Other sites even recommend content from other websites, generally that they think would be of interest to their visitors. Giving your visitors something else to do while they wait for your site to come back online is a great way to show them that you care, and that you realize it’s inconvenient for them (see number 2 above).

Librarything’s “downtime” image suggests to read a couple of books while the site is down (via).

Digg offers a list of other sites they thing their visitors might be interested in.

Github offers an entertaining YouTube video for visitors to watch while their site is down.

Mixx provides a few of their favorite “Mixxed” stories for visitors to check out.

Sears had to be closed for site enhancements during the Black Friday. The maintenance page provides users with further navigation options – such as Lands’ End, Parts Direct and Sears Credit (via).

7. Invite your visitors to come back when the site is online again

Since your users actually have visited your service during the downtime, they, of course, would like to use the service. Therefore it makes sense to notify them when the site is online again. Obviously, you wouldn’t want to notify all users of the service that the site is back online. So it’s a good idea to make it possible for users to get notified when the service can be used again. The latter can be done either via e-mail, SMS or a tweet.

Soindustry makes offers its users to submit their e-mails to get notified when the site is online again.

8. Inform your visitors about the progress of the maintenance

Of course, many unexpected problems can occur during the maintenance, and it’s a good idea to keep your users informed about the progress. An instant feedback is important and let the user know that everything is going just fine and someone on the other side is working on the problem and that just a little portion of patience is required.

Habbo, a virtual world where you can meet and make friends, provides a sweet illustration on its maintenance page and also inform the visitors about the maintenance progress.

37signals also keeps the users updated about the status of maintenance (via).

Further Resources

• Create a Memorable Maintenance Page
  Offers a brief overview of good maintenance pages as well as examples.
• Rails Maintenance Pages Done Right
  Tutorial for creating Rails maintenance pages.
• Creating a Down for Maintenance Page
  From the Pylons Cookbook.
• Maintenance Mode Plugin
  Creates a splash page for maintenance in WordPress.
• Web 2.0 Error Pages Flickr Pool
• Web 2.0 Offline Sightings Flickr Group

Related posts

You may want to take a look at the following related posts:

• 404 Error Pages
• 404 Error Pages: Reloaded
• 404 Error Pages: One More Time

About the author

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She also writes for a number of blogs, including her own, Cameron Chapman On Writing.

© Cameron Chapman for Smashing Magazine, 2009. |
Permalink |
46 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: error, maintenance, pages

Have you ever wonder how the first Automobile or Motor Car looks like? Did you know Volkswagen was Hitler’s idea? Or the founder of Ford Company use to work for Thomas Edison? Or the Cadillac was Henry Ford’s second automobile company?

There are many such interesting facts existing behind every automobiles industry. Now days, It’s very hard to underestimate the beauty of cars. However, It can be very amazing to look at the top websites from a particular industry to see how they relate to their target audience.

In this showcase, we’ll explore some great designs of popular automobiles websites to see the current trends as a wheeled motor vehicle is a valuable and often expensive purchase.

You may be interested in the following related articles as well.

• Showcase of Excellence Celebrity Websites
• 45 Top Sites For Tech Information
• List Of Top Social Media Network Sites
• 50+ Beautiful Website Designs Using Office Stationery
• 80+ Perfect Ending of Modern Website Design- Footers!

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to your favorite automobile brand that our readers may like.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

How many times have you been completely confused at how that ’small’ project turned into such a big one costing double and taking three times the length you estimated? Many of you will say estimating time for web projects accurately is an oxymoron, but by applying a few effective techniques it’s possible to dramatically increase the accuracy of most web project estimates.

1. Why Underestimating Is So Common

There are several reasons, which are freely admitted amongst freelancers and web agencies, as to why web projects are so commonly underestimated - they include:

• The technologies required by the project have never been used before
• At the time of estimating, there are grey areas or complete unknowns
• The client operates in a specialized industry and the solution needs bespoke features that are not familiar to the supplier
• Splitting the project down into the detail would require as much as work as the requirements gathering phase that is chargeable

However, there are also some secret reasons why web projects are commonly underestimated:

• The client needs an estimate for their project tomorrow or they will go elsewhere
• Revenue needs for cash flow now trump the effects of not winning the new work now
• No previous project ‘estimated vs. actual’ data analysis has been conducted to draw on
• Estimating time for a project is not fun

Despite being true, rarely do we admit these reasons to others or even ourselves! The fact is, when working as a web professional, as a one man band or as part of a small busy web team, the secret reasons are an everyday reality that shouldn’t be hidden away.

By first identifying and admitting why underestimating is so common, can you then set about implementing changes to your estimating process that will reduce the barriers each reason creates and increase your accuracy.

Technologies Not Used Before

There are three approaches you can take when confronted with a brief that requires a technology you have minimal experience with:

1. Negotiate a paid for functional specification phase as a first step
2. Consider hiring an expert
3. Research in your own time and make your best guess

Try to negotiate with the client a mini-project where you are paid to conduct a research and functional planning stage before committing to the whole project. This way you can research the unfamiliar technology and deliver a functional specification to the client.

Best case scenario
You give the client confidence, have a much clearer understanding of the work required, re-estimate and are hired for the rest of the project.

Worst case
You have completed foundation learning of a technology you previously didn’t know that you can sell to new clients, you generate revenue and the client has a comprehensive specification they can use in their tender process.

Added bonus
You, and the client, get to find out how you work together, giving both the opportunity to part company before being locked into a lengthy project.

If you’re not able to convince the client to pay for this initial functional planning stage, and can’t find a suitable expert in the technology, but want the work and have confidence in your ability and passion to learn what needs to be learnt, then the best advice is to do some initial research in your own time and just take your best guess!

Estimating Takes Too Long

Thorough web project estimating takes time, but it tends to inherit all the same rules that apply to coding, the more thorough you are, the more accurate you’ll be.

Is it possible you will spend time working out the features required only to learn you haven’t won the work? Will you have given the client a free and detailed breakdown of their project for free? Absolutely, but this is the just nature of sales, some you win, some you lose - don’t get disheartened, try to get feedback from the client on why you didn’t win and use the advice given to refine your next estimation.

Estimate Is Needed Tomorrow

If a client is demanding an estimate tomorrow after briefing you on the project today you should immediately try to assess if the project is right for you by:

1. Determining if the response rate being demanded by the client, and any previous communication, is a sign of the type of client they will be to work with
2. Assessing if the potential gain to your business from the project (high profile client or long-term repeat business) is worth the risk of underestimating and going over budget
3. Trying to confirm a ball park budget range with the client so you can estimate realistically, or politely decline if far too low. The best kind of clients are experienced enough to know this is not someone looking to use up all their hard earned cash but someone looking to provide the best solution they can for the budget

If the results of these quick steps are favorable, be positive and go for it! There will be another chance to decline if you later find out the project is not right for you, and then you may utter the words “Into the garbage chute, flyboy!”

Cash Flow Dilemma

Cash flow is the life blood of any freelancer or small web agency, without they don’t survive.

Occasionally a situation may arise where work will be taken on with the knowledge it may not be profitable. As gut wrenching as this can be, and despite all the comments you will hear how you should never do this, the reality is the bills and wages have to be paid!

When a freelancer or business owner is presented with the choice of committing to a project for a price they know is low, but by taking on the project means they live to fight another month, or risking not taking on the work on in the hope more profitable leads appear - empathise with and respect them.

It is a tough and gutsy decision that only they can make but rest assured they have their bills or your wages at the forefront of their mind when they make it and estimating low for a project isn’t always as naive a decision as it may appear to those not on the frontline.

Estimating Is Not Fun

Ok, so it’s not as sexy as adding that beautiful grunge effect to your design, and it’s not as exciting as tweaking that jQuery plugin to work just the way you want, but estimating time for a web project more accurately is almost certainly more important than both when it comes to sustaining a freelance or small web agency business.

However, while few will disagree as to its importance, many will continually find it difficult to muster up the passion and diligently estimate time for a web project, but why!? Here are more secret reasons:

• It’s hard work and takes many outside their comfort zone
• Estimating usually has to be completed alongside your plans for your already fully booked week
• It forces you to try and predict the future
• It makes you largely responsible for the business’s sales success, solution offered, project profitability and growth and survival of your business (scary stuff!)

Web agencies often have the edge here because they will have dedicated salespeople or project managers who are used to the rigors of estimating, but freelancers will generally be more inclined to find the whole process rather boring and just want to get on with the fun stuff.

While we can all no doubt empathise with this, the harsh truth is that, when running a small business or operating as a one man band, one or two badly estimated projects in quick succession can ultimately lead to the demise of both!

So what other techniques can be used to further increase the accuracy of your estimates?

2. Consistent Project Phases And Tasks

As previously mentioned, when being asked to provide an estimate for a project, it is invariably not something anyone has allocated time to do. As a result of this, estimates are often put together quickly and if compared to past estimates it’s not uncommon to see the same project phase or task classified in many different ways, and for similar sized projects the estimates for each to be completely different.

If you win the work you may think “so what?”, and to some extent you would be right, however, the first step in creating more accurate estimates on a long-term basis is to always break down the project phases and tasks in a consistent manner. Web projects can generally be broken down into the following phases:

• Research and planning
• Solution design
• Design
• Front-end development
• Back-end development
• Content entry
• Testing
• Go-live

By always beginning to compile estimates using a consistent high-level breakdown means you can have a re-usable template eventually and track the time spent on each.

But don’t stop there! Consistently breaking each phase down further will not only increase the accuracy of the estimate, but again, also result in valuable data over time.

3. Getting Granular

Now the project estimate is broken down into high-level phases, it’s time to get more granular and break each phase into tasks. This is where the estimate begins to become more tailored to the specific project, but also includes common tasks that you can add to your estimating template and use again and again. For example:

• Research and planning
  • Requirements gathering
  • Project planning
• Solution design
  • Sitemap
  • Wireframes
  • User workflows
  • Functional specification
• Design
  • Initial homepage look and feel
  • Content page
  • Master content page template
  • News main page
  • News item
• Front-end development
  • 5x Templates build XHTML/CSS
  • JavaScript and AJAX
  • Cross-browser fixes
• Back-end development
  • CMS Setup and configuration
  • News feature
  • Contact us form
• Content entry
  • Homepage copy
  • Addition of 10x News items
• Testing
  • Internal functional testing
  • Client User Acceptance Testing (UAT)
• Go-live
  • Live server setup
  • 301 re-directs from old site URLs to new

The page templates and features specific to the client’s project can be listed at this stage, alongside the tasks required in all web projects.

Once you get into the habit of compiling estimates in this way you will find yourself envisaging the phase and tasks lists during the pre-sales initial communication with the client and this invariably:

1. Refines your requirements gathering skills to quickly get the information you need in order to put together a thorough estimate
2. Forces you to think the project through in a step-by-step fashion and minimises the chances of missing a large, or several small, tasks that could end up putting you over budget because you didn’t factor them in

So, you now have a pretty solid phase and task list for the project and all that’s left is to estimate hours for each and send it off to the client right? Maybe, but wait, what exactly does the News feature consist of? Is your interpretation of a News feature the same as the client’s?

Now is the time to investigate and define it, as opposed to after the contracts have been signed.

Getting More Granular

While it’s tempting to estimate hours for the News feature and submit to the client, if possible, try to nail down exactly what the client wants from this feature at the estimating stage, after all, if you look around, you’ll be able to quickly find different variations of the same feature that have a huge differences in terms of size, features and complexity, and thus cost.

Using the News feature as an example, talk to the client and determine what it needs to do so that you can again minimise the chances of missing something in your estimate that could, when added to the other ’small’ missed tasks, amount to a serious budget overrun situation.

You may find out the News feature requirements are:

• News feature
  • Add/edit/delete news item
  • Upload image
  • Attach PDF
  • Auto-archiving
  • RSS

Excellent, you have now defined the News feature and can confidentially estimate the time you think it will take to implement. But hidden in even the most basic and common of features lay more ’small’ things that if not captured, considered and quoted on, can add to the likelihood of overrun.

For example, the client has specified they need to be able to upload images to news items, but do they need any of the following:

• Auto-resize capability?
• Auto-thumbnail generation?
• Full-screen viewing?
• Caption addition facility?

Any of the above News features could add a few hours to the overall project and thus need to be ideally catered for in your estimates - a few missed ‘couple of hours’ tasks and suddenly the project is two days over budget.

Getting granular and mentally trying to build the solution means you are able to identify and address these issues early on, making sure to cater for them in your final estimate.

“A Web Project Manager knows how to design and develop most of the project on his own, even if with poorer results compared to his team. This allows him to estimate projects with good approximation and to understand his team’s problems and difficulties”

Introduction to Web Project Management, Antonio Volpon

Advantages Of Getting Granular, For You And The Client

By getting granular with project phases and tasks for estimates you are also able to tweak them very quickly if you discover the estimate you have submitted is above the client’s maximum budget.

For example, how often have you been told by a client they want to go with you but your quote is ‘just a little too high’ and ‘if you could reduce it by five hours we can business’? Usually this means you have to do one of two things; drop the hours you estimated for the News feature and hope you can explain later down the line how the budget does not allow for image uploads and thumbnail generation etc., or remove the News feature altogether.

But, if you have a granular estimate for the News feature, you can confidentially, and at this crucial expectation setting stage, simply remove a couple of sub-features of News and the News image upload functionality in order to align with the client’s budget.

When communicating this to the client they will clearly see what you are proposing to drop and why and they will still get the News feature they need, but perhaps with a few less nice to haves. Using this approach is usually well received by clients as they have full and transparency on the reasoning behind the changes to your proposal.

This kind of transparency during the sales process will invariably give the client confidence in you because it demonstrates to them you:

1. Are an expert in your field
2. Can envisage the project in its entirety
3. Adopt a diligent and methodical approach and more than likely will continue to work this way on their project

Best of all, if you are successful with your estimate and you are hired you already have the foundations of:

1. An instant statement of work
2. A defined project scope
3. The timings you need to put together an accurate project schedule with milestones
4. Client expectations settings very early
5. Demonstrated your thoroughness and understanding of their business and requirements to the client

So what now? Well, now you have won the work, it’s time to start collecting the data that will enable you to create even more accurate estimates in the future.

4. Consistent Time Tracking And Analysis

Before starting the work, you should first replicate all of the phases and tasks, along with their time estimates, into your time tracking tool of choice. Once this is done, you can then begin work and make sure to be disciplined and track everything you do and log it under the right category.

Of course many of you will do this by default as it allows you to:

• Know how long you have to complete each phase
• View how long you have for each task and sub-task
• Reporting on how long everything actually took

But the real value of keeping a consistent set of high-level phases, from estimate through to time tracking, is that after a few projects you can begin toanalyse the data and start to identify averages and trends that you can use to refine your next web project estimate.

Analyse Estimated vs. Actual Time

This is where the real magic happens! By breaking down and tracking your time for multiple projects into consistent phases and tasks, you will have valid comparable data to analyse, for example, after five projects, once you average out the numbers, you may well discover the following:

• Research and planning took around 5% of the total project time to complete
• Solution design: 5%
• Design: 25%
• Front-end development: 15%
• Back-end development: 30%
• Content entry: 8%
• Testing: 10%
• Go-live: 2%

The more projects completed that use a consistent estimating and time tracking structure, the more real your averages will become.

With this valuable information you can then set about increasing the accuracy of your next estimate by being able to, assuming you can get a budget range from the client:

• Immediately allocate the estimated hours you need for each phase
• Determine the best solution you can offer the client for their budget

It even allows you to accommodate the client that ‘needs an estimate tomorrow’ when you don’t have time to break it down in detail.

Conclusion

Estimating time for a web project accurately is something many attempt everyday but few manage to succeed at. There is no one formula that will satisfy every situation and the chances of estimating what a project will cost exactly are almost zero.

But it is possible to drastically increase the accuracy of your web project estimates by:

1. Identifying the reasons why underestimating is so common
2. Understanding why it is so important
3. Resisting the temptation to get granular
4. Creating a consistent, methodical and re-usable estimating process
5. Analysing the estimated versus actual data from multiple projects to identify trends

“The Devil is in the detail: When people say that the devil is in the detail, they mean that small things in plans and schemes that are often overlooked can cause serious problems later on.”

Further Resources

Here are further articles and related resources that may help you to increase the accuracy of your web project estimates:

• Web Development Project Estimator
  A neat little online tool that allows designers and developers to quickly create cost estimates for web projects.
• Schedule and Cost Summary
  This Cost Estimate and Scheduling spreadsheet provides a lightweight method for learning to estimate time to complete a web design project, and calculating cost for completion.
• Tick
  Simple to use time tracking tool that makes it easy to keep track of project budgets.
• How to Estimate a Web Site Project
  Patty Ayers discusses a five-step process for estimating web projects.
• Simple process to estimate times and costs in a web project
  Antonio Lupetti describes his process for creating web project cost estimates.
• How to Accurately Estimate a Web Design Project
  John Reeve talks about catering for the usual missing elements in estimates; project management, contingency time and margin for error.
• Estimating Resource Time for Web Development Projects
  Bill Breen explains one way to approach estimating time for web projects, and how the size of the project should influence you estimate ranges.
• How To Estimate Time For A Project
  A Sitepoint article by Alyssa Gregory.

Related posts

You may be interested in the following related posts:

• 15 Useful Project Management Tools
• 10 Harsh Truths About Corporate Websites

About the author

Sam Barnes is a Web Project Manager at Rawnet. Although a little short for a Stormtrooper, he can be found posting articles at thesambarnes.com, a blog dedicated to the subject of Web Project Management.

© Sam Barnes for Smashing Magazine, 2009. |
Permalink |
102 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: estimation, management, project, scheduling, time

As Web developers, we never stop hearing about the Mac. A lot of people love to talk about their Macs, but despite the “elite” status of the Apple computer, is there any need for a Web developer to splash money on one? A few weeks ago, Mark Nutter wrote here on Smashing Magazine in favor of swapping your PC for a Mac, and while some of his reasons are good, there are plenty of reasons to stick with (or switch back to!) Windows.

This article explores the best aspects of the Windows PC and, more importantly, the different apps that Web developers can use to become more efficient in their work. Every piece of software mentioned here is free to use.

Developer Tools

Notepad++ (code editor)

After looking at many text editors, Notepad++ is by far the best I’ve found. On top of the standard features you would expect from a great text editor, you can extend its functionality by installing any of the free plug-ins that suit you.

Some of the things that really make Notepad++ shine:

• FTP Synchronize
  Allows you to connect to a server by FTP and edit files in Notepad++. Then when you save the file, it is automatically uploaded back to the server. No more saving files in an editor and then firing up a separate FTP client! Bonus: the FTP sync has “Keep Alive,” which pings the server at regular intervals to stop the connection from being closed.
• Document Compare
  Open two versions of the same document and the differences between them are automatically highlighted. Great for finding out where a coding change has gone wrong!
• Code auto-completion
  Auto-completion is a fairly standard feature, but with Notepad++ the code libraries can be downloaded from the website and updated manually. Keeping up to date with changes in the languages is easy then, and you can even write your own library file.
• Panel Views
  Allows you to see two files at once, side by side. Hugely useful if you have a large monitor and want to make better use of all the space.
• Ctrl + D to duplicate a line
  It may sound simple but is surprisingly useful. As an example, it took two seconds to write out all the <li></li> tags for this list!

Texter (text expander)

Texter is a free app from Lifehacker. It allows you to type a few characters, then hit Tab and have those characters replaced with a string of text. This is great for a lot of computer tasks (answering email most of all!), but the real advantage for developers is that Texter lets you specify key presses. For example, {HOME} is interpreted as pressing the Home button.

Take the following hot string:

{BACKSPACE}{HOME}<p>{END}</p>

When coding, I type the text of my paragraph, then add a space, press “p” and hit tab. Texter automatically puts the <p> at the start of the line and </p> at the end.

That’s just one example. I have about 35 different strings saved for use in coding, so the number of possible uses is huge.

WampServer (Apache, PHP and MySQL)

Installing a Web server on your local PC is great for development because you can test everything easily and instantly. No waiting on Web servers and dodgy Internet connections. WampServer packs an Apache, PHP and MySQl install all into one simple executable file, so your server will be up and running in five minutes tops.

Clipboard Manager

Clipboard Manager is a sidebar widget for Vista. It displays a snippet of the most recent items that you’ve copied. If you click one of the snippets, it is brought to the top of the clipboard, so when you hit Ctrl + V, you’ll paste that instead of what you copied last.

This is extremely useful when you are working on a document or script for re-arranging chunks of the page or copying properties from one object to another. Clipboard Manager cuts down drastically on the amount of time spent re-copying the same snippet again and again.

AutoHotkey (write your own shortcuts)

AutoHotkey allows you to create your own hot keys or remap existing ones. The scripts can be either extremely simple or quite complex. The Quickstart Guide walks you through everything you need to know.

One of the hot keys I use most is simple: pressing Caps Lock + W to close the current window. Anyone who is used to using Ctrl + W to close a tab in FireFox will find this very handy!

; Close Active Window
Capslock & w::
WinClose, A
return

Syncback (automatic back-ups)

Everyone’s hard drive fails eventually. Online tools like Mozy and Dropbox are ideal for backing up critical files that you’re currently working on, but backing up everything on your hard drive to one of these tools just isn’t feasible for most people.

Syncback is a free tool from 2BrightSparks that automatically backs up all your files to an external drive. (A paid version is available as well, but the freeware is more than enough.)

You select which folders to back up, set when you want back-ups to take place and let Syncback do the work. Back-ups can be done manually or automatically, and only files that have changed will be copied, so it is very efficient after the first run. It will even email you a report if any errors occur during the backup, such as certain files not being able to be copied.

Windows Live Writer (blog posting)

Not every developer needs this, but many of us have our own blogs now. Windows Live Writer is a free tool to help you write blog posts.

The main advantage of this is that it accesses your website and re-creates your design in the program. You can then write your post directly onto the website background, so you can see everything about your post’s presentation and fix it easily.

Image source

Is that image too big? Or that paragraph too long? Seeing it for yourself is the best way to catch these flaws.

The Best Parts Of The Mac

OS X does some things very nicely. Thankfully, the best bits can all be re-created in Windows free of charge.

The Dock → RocketDock

The Dock is probably the most distinctive Mac feature. The large icons and easy access to them appeal to a lot of people

RocketDock brings the Dock to Windows beautifully. Drag and drop to re-arrange, position on any side of the monitor, minimize windows to the dock and more. The demo video from its website below shows RocketDock in action:

Quicksilver → Launchy

Launching applications from your keyboard is an extremely fast way to work. Mac users use Quicksilver for this, but Windows users can use Launchy. Launchy can be set to index only programs or include files as well. You also choose which directories it indexes. One of the best uses for it is to set up a directory of utility scripts that you can execute from a few quick keystrokes in Launchy.

For example, iTuny is a set of free scripts to control iTunes from Launchy. Now, if I want to skip to the next song, I hit Alt + Space to bring up Launchy and type “inext” to launch the iTunes Next script from iTuny. You can set up scripts for whatever you like, including shutting down and locking your machine.

Leopard Stacks → Stand-Alone Stack

Stacks are a great way to easily access your most commonly used files and programs.

Image source

Standalone Stack allows you to create your own stacks in Windows, either in the taskbar or on your desktop. And you can display the files in either a list or a grid, just like in Leopard. For anyone using Rocketdock, you can install the Stacks Docklet from Matonga to get stacks into your dock.

More Control Of Your Machine

Custom Visual Styles

VistaGlazz allows you to control the appearance of your Vista installation. You can create your own custom styles or download them for free. One of the best sources of styles is DeviantArt (which has some OS X styles, though they’re not as polished as the Vista versions!).

Another popular application for theming is WindowBlinds from Stardock, but you need to pay for it. You’ll find plenty of themes for it on DeviantArt as well.

More Hardware Options

Macs come with very few variations in hardware. You have a small selection and just have to choose whichever one is closest to what you need. Because anyone can develop hardware for Windows, the selection is much greater. And because of this competition between manufacturers, companies are forced to offer good value for your money.

That doesn’t just mean better specs for about half the price. Check out this new multi-touch HP laptop, which comes in under the cost of any MacBook. Search around and you will find the perfect machine for your needs.

Huge Range of Devices

On top of the core hardware, you have thousands of peripherals to choose from. For graphics designers, that means a massive selection of tablets. But there are a lot of other devices as well, right down to your mouse. I have a five-button mouse and just hit the extra buttons on either side for small tasks like going backward and forward in a Web browser and Windows Explorer. For developers who have to give regular presentations to clients, this nifty wireless mouse/remote control is ideal.

Conclusion

There are a lot of good things about the Mac, and it’s hard not to get a little excited about them each time you watch one of Apple’s big developer conferences.

What you have to remember is that at the end of the day, the operating system is a means to an end, not the end itself. Whichever system you choose should make your daily work (and play!) easier and more efficient. Windows combined with the great free software and tips I’ve found online allows me to work exactly the way I want. I wouldn’t dream of going back to a default Vista installation with no extras: the customized installation is worth so much more to me than either Windows or OS X on its own.

We would love to hear what aspects of your operating system made you choose it (but not the flaws in the other one that made you not choose it!) and how you use it to work at your best.

About the author

Michael Martin writes about Web design, WordPress and coding at Pro Blog Design. You can subscribe there for advice on making the most of your blog’s design, or follow him on Twitter.

(al)

© Michael Martin for Smashing Magazine, 2009. |
Permalink |
622 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: mac, tools, win

The loop is a very important aspect of WordPress blogs. In fact, the loop is what allows you to get posts from your WordPress database and print them on the screen. A set of useful and user-friendly functions, the loop is incredibly powerful. With it, you can get a single post, a list of posts ordered by date, title or category, a list of posts written by a specific author and much more.

In this article, we’ll show you 10 useful things you can do with the WordPress loop to make your blog even more powerful than it is right now.

You may be interested in the following related posts:

• 100 Amazing Free WordPress Themes For 2009
• Custom Field Hacks For WordPress
• 10 Exceptional WordPress Hacks
• 15 Useful Twitter Hacks and Plugins For WordPress
• Mastering WordPress Shortcuts

1. Get Posts Published Between Two Dates

Image source: Shutterstock

The problem.
The loop and the query_posts() WordPress function allow you to easily retrieve a list of posts published in a specific week or month. Unfortunately, getting posts published between, for example, March 17 and May 3 isn’t that easy. Let’s solve this problem.

The solution.
Simply paste the following code wherever in your theme you’d like to display the list of posts published between two dates. Don’t forget to replace the dates in the example with yours.

<?php
  function filter_where($where = '') {
        $where .= " AND post_date >= '2009-03-17' AND post_date <= '2009-05-03'";
    return $where;
  }
add_filter('posts_where', 'filter_where');
query_posts($query_string);
while (have_posts()) :
      the_post();
      the_content();
endwhile;

?>

Code explanation.
To achieve this hack, I first create a function named filter_where(), which contains an SQL “WHERE” condition. Then, before starting the loop, the filter_where() function is hooked into WordPress’ post_where() function.

As a result, the “WHERE” clause contained in the filter_where() function is added to the end of the SQL query contained in the post_where() function, which means that the loop will return posts published only between the two dates specified in the filter_where() function.

Source

• WordPress loop: Get posts published between two particular dates

2. Use More Than One Loop On A Page, Without Printing Duplicate Posts

The problem.
Most modern themes and all “magazine” themes display at least two loops on the blog’s home page; these can be used, for example, for a “featured posts” section. While using two loops is very easy to do, preventing duplicate posts from displaying is not… until, that is, you learn this easy method of preventing them.

The solution.

1. Let’s start with the first loop. Nothing hard here: we’re just going to get the eight most recent posts using the showposts parameter. Open the index.php file, and paste the following code to output your “featured” posts:

   <?php
   query_posts('showposts=8');
   $ids = array();
   while (have_posts()) : the_post();
   $ids[] = get_the_ID();
   the_title();
   the_content();
   endwhile;
   ?>
   

2. Once that’s done, it’s time to apply our second loop and get all posts, excepted the ones we have already outputted in the first loop:

   <?php
   query_posts(array('post__not_in' => $ids));
   while (have_posts()) : the_post();
   the_title();
   the_content();
   endwhile;
   ?>
   

3. Save your index.php file and admire the results!

Code explanation.
The first loop starts with the very useful query_posts() function, which allows you to specify a wide range of parameters to be used by the loop. The showposts parameter allows you to get the specified number of posts. Just before the loop starts, I create a PHP array named $ids, which will receive all IDs of the posts returned by this loop.

Like the first one, the second loop uses the query_posts() function with the post__not_in parameter. This parameter allows you to specify a list of posts that you don’t want to be displayed, in the form of a PHP array. As you probably saw, I passed the $ids array to this parameter so that any posts returned by the first loop would be returned again by the second loop.

3. Insert Ads After The First Post

The problem.
Advertising is a good way to monetize your blog. But to get advertisers, your ads must receive clicks by your visitors. Many bloggers display ads on the blog sidebar, footer or header, which isn’t always great with click-through rates. To obtain more clicks on your ads and make your advertisers happy, inserting them after the first post is a good idea. Let’s see how to do this in the WordPress loop.

The solution.
Simply use the following loop instead of your current loop. Don’t forget to insert your ad code on line 6:

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
  <?php if ($count == 2) : ?>
          //Paste your ad code here
          <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
          <?php the_excerpt(); ?>
   <?php else : ?>
          <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
          <?php the_excerpt(); ?>
  <?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

Code explanation.
Since the early days of programming, integer variables have been a common operation to use as a counter. This is exactly what I’ve done here: just before the loop starts, a $count variable is created. This variable increases by an increment of 1 with each result returned by the loop.

Then, you just have to add an if structure (line 5) and see if $count is equal to 2. If it is, it means that the first post has already been returned and we can display the ads.

Source

• How to: Insert AdSense after the first post

4. Get Posts With A Specific Custom Field And Specific Value

The problem.
Because of the popularity of WordPress’ custom fields, you will often want to be able to output a list of posts with a specific custom field and specific value. While so simple for advanced WordPress users, beginners continue to ask me about this on my blogs. So, here’s the correct and easy way to achieve this.

The solution.
Not hard at all. We only have to use the query_posts() function with the meta_key and meta_value parameters:

<?php query_posts('meta_key=review_type&meta_value=movie');  ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

Code explanation.
Definitely nothing hard here. To get only posts with a specific custom field and specific value, you have to use the query_posts() function with the meta_key and meta_value parameters. The meta_key value is the name of the desired custom field, and meta_value is the desired value.

Source

• How to Only Show Posts With a Specific Custom Field
• Easily get posts with a specific custom field/value on your WordPress blog
  

5. List Upcoming Posts

The problem.
Thanks to the “schedule post” option, our favorite blogging platform allows us to write a post and schedule it to be published later. To make sure your readers come back to your blog or subscribe to your RSS feed, listing your upcoming posts is a good idea.

The solution.

<?php query_posts('showposts=10&post_status=future'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<h2><?php the_title(); ?></h2>
		<span class="datetime"><?php the_time('j. F Y'); ?></span></p>
<?php endwhile;
else: ?><p>No future events scheduled.</p>
<?php endif; ?>

Code explanation.
To achieve this, I used the query_posts() function with an interesting parameter called post_status. The post_status parameter allows you to get posts according to their published status (”published,” “draft” or, like in this example, “future”). Because I also added the showposts=10 parameter, this code will not return more than 10 upcoming posts.

Source

• How to: List future posts
• Image credit

6. Display Posts Published One Year Ago

The problem.
Many blogs have so much content and some very good older posts that should not be ignored. But most visitors end up seeing only the freshest content.

The solution.
If your blog is relatively old, why not showcase posts that were published over a year ago? Doing this is simple. Just insert the following code in your blog sidebar or single.php file.

<?php
$current_day = date('j');
$last_year = date('Y')-1;
query_posts('day='.$current_day.'&year='.$last_year);
if (have_posts()):
    while (have_posts()) : the_post();
       the_title();
       the_excerpt();
    endwhile;
endif;
?>

Code explanation.
The first thing was to get today’s number, which we did on line 2, using the PHP date() function. Then, we had to get last year’s number, which we easily did by taking date('Y') (which returns the current year) and subtracting 1, giving us last year’s number.

Once that’s done, we only have to pass the $current_day and $last_year variables to the day and year parameters of the query_posts WordPress function.

As an aside, if for some reason you want only today’s posts, just delete line 3 and replace line 4 with the following:

query_posts('day='.$current_day);

Source

• How to: Get posts published exactly one year ago

7. Use The Loop To Create An “Archive” Page Template

The problem.
As noted in the previous hack, a common problem on blogs is that it is hard for readers to find content published a while ago.

To help my readers finding what they’re looking for, I created a WordPress page template that displays a list of all posts ever published on my blog. You can see a live demo of this hack on WpRecipes.

The solution.
If you don’t know what a page template is or how to use one on your blog, you should first read this quick post to get started.

<?php
/*
Template Name: Archives
*/
?>

<?php get_header(); ?>

	<h2><?php $numposts = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->posts WHERE post_status = 'publish'");
if (0 < $numposts) $numposts = number_format($numposts); ?>
<h2><?php echo $numposts.' recipes published since October 06, 2008'; ?>
	</h2>

	<ul id="archive-list">
		<?php
		$myposts = get_posts('numberposts=-1&');
		foreach($myposts as $post) : ?>
			<li><?php the_time('m/d/y') ?>: <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
		<?php endforeach; ?>
	</ul>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Code explanation.
The first thing to do is create a “page template.” A page template is created by adding the following lines to the top of the file:

<?php
/*
Template Name: Archives
*/
?>

An interesting part of this code is the post counter (line 8). This is done by creating a PHP variable named $numposts and using the $wpdb object to get the result from the SQL query sent to WordPress database.

Once that’s done, we simply have to display the $numposts variable, and the total number of posts on your blog will be printed on the screen.

Now, let’s have a closer look at the loop used in this code. As you probably saw, this code doesn’t use the classic loop but rather uses the get_posts() function. get_posts() is a simple tag for creating multiple loops. We first take all posts from the engine and for each of these posts we present the date, the link and the title of the post. Simple and effective.

Source

• fahirsch asked: “How to list ALL posts on a page?”

8. Create Your Own WordPress Loops Using The WP_Query Object

The problem.
The classic WordPress loop, which is used in most hacks in this post, is both useful and user-friendly. However, particularly when using a lot of custom loops (for example, in complex “magazine” layouts), you risk problems with resetting, offsetting, invalid conditional tags and other annoyances.

The solution.
The solution is to use the WP_Query object and create your very own loop:

<?php
$myPosts = new WP_Query();
$myPosts->query('showposts=5');

while ($myPosts->have_posts()) : $myPosts->the_post(); ?>
   the_title();
   the_content();
endwhile;

?>

Code explanation.
The code above displays your five most recent posts. Here is what this code does in detail:

• On line 2, I created a new WP_Query object, named $myPosts.
• On line 3, I executed a query using the showposts parameter to get only the five most recent posts.
• On line 5, our custom loop starts.
• On line 6 and 7, we simply print some basic post information (title and post content)
• On line 8, our custom loop ends.

If you want to display more or less than five posts, simply change the value of the showposts parameter on line 3.

Source

• Define Your Own WordPress Loop Using WP_Query

9. Get Only The Latest Sticky Posts

The problem.
Introduced in WordPress 2.7, sticky posts are a very cool feature of our favorite blogging platform. A lot of WordPress users ask how to get only sticky posts in the loop.

The solution.
To display your five most recent sticky posts, just paste the following code anywhere in your theme files. If you want to display more or less sticky posts, just change the 5 to the desired value on line 4.

<?php
$sticky = get_option('sticky_posts');
rsort( $sticky );
$sticky = array_slice( $sticky, 0, 5);
query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) );

if (have_posts()) :
    while (have_posts()) : the_post();
        the_title();
        the_excerpt();
    endwhile;
endif;

?>

Code explanation.
The first thing was to get all sticky posts (line 2). Then, we re-ordered them, displaying the most recent ones at the top, using the PHP rsort() function (line 3). On line 4, we got the five most recent sticky posts. As mentioned, you can change the amount of posts retrieved by changing 5 to any other value.

Once that’s done, we use the query_posts() function to control the WordPress loop. Using the post__in parameter, we can make sure that the retrieved posts are contained in an array of values. This array is indeed our $sticky variable. Then, we just set up a basic loop and display the desired information from the post on the screen.

Sources

• Get the latest sticky posts in WordPress
• How to: Get latest sticky posts
• Image credit

10. Create A Loop Of Images

The problem.
Nowadays, most blogs display post excerpts on the home page along with an image. How about being even more original and providing readers with a nice “gallery” page, listing however many of your recent posts, and displaying each post’s lead image? Of course, we can easily achieve this with custom fields; but believe it or not, custom fields aren’t necessary.

The solution.
To create our loop of images, we first need a PHP function that can grab the first image from each post and return its URL. To do this, paste the following function in your functions.php file. Don’t forget to define a default image on line 10.

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ //Defines a default image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

Once you’ve saved the functions.php file, you are now ready to display your image loop.

<?php
if (have_posts()) :
    while (have_posts()) : the_post(); ?>
        <a href="<?php the_permalink();?>" title="<?php the_title(); ?>" class="img-loop">
        <img src="http://media2.smashingmagazine.com/wp-content/uploads/images/wordpress-loop-hacks/<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" />
        </a>
    endwhile;
endif;
?>

Code explanation.
The first part of this code is the catch_that_image() function that we inclued in our functions.php file. Basically, this function parses the post’s content using the $post and $posts global variables as well as a PHP regular expression. If no image is found (i.e. the post doesn’t have one), the default image URL is returned. Otherwise, the function returns the URL of the first image in the post.

The second part of the code is the loop itself, and there’s absolutely nothing hard about it. In fact, it is just a basic loop with no text content is displayed. Instead, the first image from the post is displayed, using the catch_that_image() function.

Sources

• Retreive First Image From Post
• How to: Get the first image from the post and display it

Related posts

You may be interested in the following related posts:

• 100 Amazing Free WordPress Themes For 2009
• Custom Field Hacks For WordPress
• 10 Exceptional WordPress Hacks
• 15 Useful Twitter Hacks and Plugins For WordPress
• Mastering WordPress Shortcuts

About the author

This guest post has been written by Jean-Baptiste Jung, a 27-year-old blogger from Belgium, who blogs about WordPress at WpRecipes, about Photoshop and webdesign at PsdVibe and about everything related to web development at Cats Who Code. You can stay in touch with Jean by following him on Twitter.

(al)

© Jean-Baptiste Jung for Smashing Magazine, 2009. |
Permalink |
75 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: coding, hacks, loop, wordpress

One of the interesting trends which I noticed recently is to showcase your work in single page design. It’s kind of ironic to see what designers can do with single pages as modern age designers love to experiment with things and observe how people interact with their work. Even though this is not a common trend to follow but still as the new design styles come up, and as more and more designers notice them and make use of them in their work, this kind of trends emerge.

In this presentation, you’ll find a variety of highly-creative, beautiful and most importantly inspirational designs which is following the same trend of single page designs. We don’t want you to follow any specific trend as the aim here is to stimulate your creativity and to inspire your imagination to create your own design trend because your website represents you and your brand.

You may be interested in the following modern age trends related articles as well.

• 50+ Beautiful Website Designs Using Office Stationery
• Grid Style In Modern Web Design: Showcase and Resources
• 80+ Perfect Ending of Modern Website Design- Footers!
• 80+ Incredible Designs with Bird’s-eye View
• Creative 404 Error Pages Around for Inspiration
• 20 Corporate Brand Logo Evolution

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to other trends that our readers may like.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.