A warning for all you iPhone jailbreak enthusiasts: Apple’s newest OS software update contains quite a stink bomb—10.5.6 disables the Pwnage tool, making you unable to jailbreak or unlock your iPhone or iPod Touch.

The update prevents jailbreaking by disabling the software at the computer level, a step up from what the company usually does: release a firmware update that re-locks the iPhone. Now it’s stopping your Mac from recognizing the device in DFU (device firmware update) mode by inflicting new code on the USB ports on Apple computers.

While the iPhone Dev Team is no doubt working to figure out a new hack around this, some are reporting that the simplest way to work around the update for now is to copy some of the 10.5.5 framework files over the newer ones… or not update. [Information Week and Spaziocellulare]

By Dmitry Fadeyev

Web design consists, for the most part, of interface design. There are many techniques involved in crafting beautiful and functional interfaces. Here’s my collection of 10 that I think you’ll find useful in your work. They’re not related to any particular theme, but are rather a collection of techniques I use in my own projects. Without further ado, let’s get started.

1. Padded block links

Links (or anchors) are inline elements by default, which means that their clickable area spans only the height and width of the text. This clickable area, or the space where you can click to go to that link’s destination, can be increased for greater usability. We can do this by adding padding and, in some cases, also converting the link into a block element. Here’s an example of inline and padded links, with their clickable areas highlighted to show the difference:

Obviously, the larger the clickable area is, the easier it is to click on the link because there is less of a chance of missing it. Converting links into block elements makes the text area span the whole width of the container, unless the width is specified otherwise. This makes it ideal for links located in sidebars. We can do it with the following code:

a {
	display: block;
	padding: 6px;
}

Make sure to also add a healthy dose of padding to the links, because converting a link into a block only affects its behavior and width; adding padding ensures that the link is high enough and has some room to breathe.

2. Typesetting buttons

Attention to every detail is what separates a great product from a mediocre one. Interface elements such as buttons and tabs are clicked on many times a day by your users, so it pays to typeset them properly; and by typesetting I mean positioning the label. Here’s a couple of examples of the kind of misplaced labels I sometimes notice:

At first glance they look okay, but notice that the text is placed too high because the lowercase letters have been used as a guide to align the text vertically in the center, like so:

However, if we use uppercase letters as well as lowercase letters with ascenders (”t,” “d,” “f,” “h,” “k” and “l”), the balance shifts upwards, making the label appear too high on the button. In such cases, we should set the type using the uppercase height as a guide — or set it a little bit higher if most of the letters are lowercase. Here’s what I mean:

This gives the whole button a more balanced look and feel. Little touches like this go a long way towards making your interface more polished and satisfying to use.

3. Using contrast to manage focus

Similarly, you can also manage the focus of your visitors’ attention with contrast between elements. Here’s an example of a post headline and some meta information underneath regarding who posted the article and its date:

All the text is set in black. Let’s decrease the contrast between the meta information (the date and author’s name) and the background by putting the text in a light shade of gray:

The highest contrast element here is the headline, so it literally pops out at us. The other elements fade into the background. Here, I’ve chosen the author as the second-most important element, and the date as the least. The font also differs in size and style, but the contrast level can be very powerful. Let’s reverse the order of importance to date, author and headline:

You can see how effective it is in shifting focus: the date now pops out at you, while the headline fades away. This technique comes in very handy for information-heavy websites, such as blogs, forums and social networks, in which you want to make a lot of information easily scannable while still showing a lot of additional things, like dates. Fading the extras allows visitors to easily focus their attention on the most important pieces of text.

4. Using color to manage attention

Color can also be used to effectively focus your visitors’ attention on important or actionable elements. For example, during the US presidential election, pretty much all of the candidates’ websites had the donation button colored red. Red is a very bright and powerful color so it attracts attention, and it stands out even more when the rest of the website is blue or another colder color.

Warmer tones like red, yellow and orange are naturally bright and so tend to attract the eye. They also “expand” when set against colder colors like blue and green. This means that an orange button on a blue background looks like it’s flowing outwards and taking the front seat. Conversely, a blue button on an orange background contracts inward, wishing to stay in the background. Here’s a picture to illustrate:

Here’s a couple of examples of websites that use color effectively to direct users’ attention to the important elements:

Function features a “We’re Hiring” link on its jobs page. To ensure the link is not missed, the designers set it against a red background that pops out from the dark background header, effectively grabbing attention.

Causecast use color effectively. Four bright pink elements pop out at you: the logo, the feedback link, the donate link and the website description message.

Want the “About” blurb on your website to grab the visitor’s focus? Make the background yellow. Want to make the “Join” button stand out? Color it orange. Make sure not to highlight too many elements, though; if you do, they may get lost in each other’s company.

5. White space indicates relationships

One of the most crucial elements in an interface is the white space between elements. If you’re not familiar with the term white space, it means just that: space between one interface element and another, be it a button, a navigation bar, article text, a headline and so on. By manipulating white space, we can indicate relationships between certain elements or groups of elements.

So, for example, by putting the headline near the article text we indicate that it is related to that text. The text is then placed farther away from other elements to separate it and make it more readable. Here’s an example in which white space could be improved:

The text looks all right and is certainly readable, but because the spaces above and below each heading are equal, they don’t separate each piece of text clearly. We can improve this by increasing the white space between each section and also by slightly tightening the line height of the paragraphs:

This results in more clearly defined blocks; we can easily tell which headings go with which pieces of text and can see the separate sections clearly. Good designers often squint or glance at their work from a distance, which lets them see the blocks of elements separated by white space as they merge together. If you cannot see these groups clearly then you may need to tweak your white space.

6. Letter spacing

Web design is pretty limiting for typographers. But while there are only a few safe Web fonts and not a great many things you can do to style them, it’s worth remembering that we do still have some level of control. “Tracking” is a term used in the field of typography to describe the adjustment of spacing between letters in words. We’ve got the ability to do this with CSS using the “letter-spacing” property.

If used with restraint and taste, this property can be effective in improving the look of your headlines. I wouldn’t recommend using letter spacing on the body text because the default spacing generally provides the best readability for smaller font sizes.

Here’s an example of letter spacing in use:

And here’s the CSS code used for the above examples:

h1 {
	font-family: Helvetica;
	font-size: 27px;
}

h2 {
	font-family: Helvetica;
	font-size: 27px;
	letter-spacing: -1px;
}

h3 {
	font-family: Georgia;
	font-size: 24px;
	letter-spacing: 3px;
	font-variant: small-caps;
	font-weight: normal;
}

The effect can be useful when you want to craft a more aesthetically pleasing or more original heading. Here, I’ve used only a couple pixels for letter spacing, but already it makes a big difference to the style of the font.

7. Auto-focus on input

Many Web applications and websites feature forms. These may be search forms or input forms inviting you to submit something. If this form is the core feature of your application or website, you may want to consider automatically focusing the user’s cursor on the input field when the website loads. This will speed things up because users can start typing right away without having to click on it. A good example of this is Google and Wikipedia’s websites.

Upon arriving at Wikipedia.org, the search box is already highlighted, ready to accept text.

To automatically focus on input fields, you’ll need a little bit of JavaScript. There are various solutions, and the one you should use depends on the functionality you want to achieve. The simplest way to do it would be to add the following to your body tag:

<body onLoad="document.forms.form_name.form_field.focus()">

Your form code should look something like:

<form method="get" name="form_name" action="#">
	<input type="text" name="form_field" size="20" />
	<input type="submit" value="Go" />
</form>

Now, every time the page loads, the text field called “form_field” will be automatically selected, ready for input.

The only problem with this is that if your users want to return to the previous page using the Backspace key, they will be out of luck because they’ll just be deleting characters in the input field. Thankfully, Harmen Janssen has another simple JavaScript solution you can find here. Harmen’s script allows the Backspace key to go to the previous page when there are no characters left in the input field to delete.

8. Custom input focus

While the default look of form elements suffices for most functions, sometimes we want something a little prettier or a little more standardized across various browsers and systems. We can style input fields by simply targeting it with an “id,” “class” or plain old “input,” like so:

input {
	border: 2px solid #888;
	padding: 4px;
	font-size: 1em;
	background-color: #F8F8F8;
}

What’s more interesting is also being able to style the input field when it’s in focus; that is, the state it’s in when it has been clicked. To do this, we need to attach a “:focus” after the “input” property:

input:focus {
	border-color: #000;
	background-color: #FFFE9D;
}

If you’re using custom backgrounds to style your input field, they may clash with some browsers and operating systems’ default focus styles. For example, here’s a screenshot of a custom-styled form clashing with the default blue OS X glow effect:

In such cases, you could also use the “input:focus” property to remove the default styling. The default blue glow in the screenshot above can be removed by disabling the “outline” property:

input:focus {
	outline: none;
}

The blue glow effect will now be gone:

Obviously you would only want to remove the outline if you’re replacing it with your own styling, so that you don’t negatively affect the accessibility and usability of your forms.

9. Hover controls

Some Web applications have extra utility controls, such as edit and delete buttons, that don’t necessarily have to be shown beside every item at all times. They can be hidden to simplify the interface and focus visitors’ attention on the main controls and content. For example, these hover controls are used in Twitter when you hover over messages:

These hover controls can be achieved with some simple CSS code, without any JavaScript. Simply style the <div> with the controls when its parent <div> is in a hover state. Here’s the code to hide and show the controls (using a <div> with the class “controls” inside a <div> with the class “message”):

.message .controls { display: none; }
.message:hover .controls { display: block; }

When you hover over the “message” <div>, the “controls” <div> inside it will appear, along with all of its content, giving you the same functionality as shown in the Twitter screenshot above.

There may be an issue with accessibility because screen readers may not be able to read the hidden <div>. There are plenty of other ways to hide the inner <div>, such as offsetting it with a negative margin that takes it off the page (e.g. “left-margin: -9999px”), coloring its text the same color as the background or simply placing another <div> on top of it.

This technique should of course be used with restraint because you don’t want to hide your important controls; but if used correctly, it can be useful for cleaning up your interface by removing those extra utility links that you don’t want to show up at all times.

Note that this doesn’t work in IE6, so you’ll need to override the hiding property in your IE6-specific style sheet or, if you don’t have one, simply use the following IE6-specific code inside the <head> section of your code:

<!--[if lt IE 7]>
  <style type="text/css" media="screen">
    .message .controls { display: block; }
  </style>
<![endif]-->

10. Verbs in labels

You can make options dialogs much more usable by thinking through the labels you use on buttons and links. If an error or message pops up and the options are “Yes,” “No” and “Cancel,” you have to read the whole message to be able to answer. Seems normal, right?

But we can actually speed things up by using verbs in the labels. So, if instead of “Yes,” “No” and “Cancel,” we have “Save,” “Don’t Save” and “Cancel” buttons, you wouldn’t even need to read the message to understand what the options are and which action to perform. All the information is contained in the button labels.

Using verbs in labels on buttons and links makes the options dialogs more usable because the labels contain all of the information the user needs to be able to make a decision.

To Conclude

Hopefully, you’ve found a few new techniques that will be useful in your work. As always, using them effectively comes down to restraint and thoughtful implementation. For example, controls that appear on hover may clean up your interface, but they will also increase the learning curve because people may not notice these controls at first. But showing all controls at all times may not be the best strategy either because users would need to scan more things to find what they’re looking for.

Striking the right balance between what you show and what you hide is a delicate art and is completely in your hands as the designer. Don’t use a technique just because it exists: use it if it makes sense in your context.

About the author

Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability.

(al)

Google’s universal sign-in system, Friend Connect, which just opened to all Websites two weeks ago, now accepts Twitter IDs as a sign-in option. That means when you visit a participating Website that accepts Friend Connect as a log-in option, you can sign in using your Twitter account. If any of the people you follow on Twitter are also members of the third-party site, they will automatically be added as your friends.

Friend Connect also supports IDs from Google, Yahoo, AIM, and OpenID. For instance, I tried this on the Go2Web2.0 blog, which has implemented Friend Connect, and it gave me the option to use my Gmail or Twitter accounts (I could also use Orkut or Plaxo). I used my Twitter sign-in without a hitch. (Update: Actually, this is a little confusing, but it signs you in first using one of the four credentials above and then asks you if you want to add Twitter).

The race is on between Friend Connect, Facebook Connect, and MySpaceID to sign up the most third party sites. Adding Twitter as an issuing party is a big win for Friend Connect because sites are going to choose the sign-in system that gives their visitors the most options and broadest reach.

There is nothing stopping sites from implementing more than one sign-in system, but at some point presenting visitors with too many options becomes confusing. For instance, we use Facebook Connect, in addition to our own sign-in system. Should we add Friend Connect? Probably. MySpaceID?

It’s only been a couple weeks since these have become widely available, and already universal sign-in is anything but. Here is a list of sites that are live with Facebook Connect, and some example Friend Connect sites can be found here (if anyone has a more comprehensive list of sites live with Friend Connect, please add to comments).

Crunch Network: MobileCrunch Mobile Gadgets and Applications, Delivered Daily.

By Steven Snell

Photoshop users are able to benefit from the vast amount of high-quality resources that are freely available to the community. Brushes get a lot of attention, but custom shapes are also extremely useful in the right situations. Finding a custom shape that has already been created can save you some time and headaches in your design, and fortunately there is a very wide variety of custom shapes available.

This post highlights 80 different sets of custom shapes (over 2,500 individual shapes) in several different categories. If you plan to download and use any of these shapes be sure to check to terms and conditions set by the creator of the shapes.

1. People

People Silhouettes (306 shapes)

Costumes and Characters Shapes (56 shapes)

Skateboarding (9 shapes)

Skater Collection (3 shapes)

Skateboarders (8 shapes)

Stock Girls (8 shapes)

Businessman Silhouettes (12 shapes)

Business Girls (12 silhouettes)

Jumping People Silhouettes (104 shapes)

Break Dancing (8 shapes)

Hoops (57 shapes)

Presentational Shapes (10 shapes)

Random People Shapes (11 shapes)

People Shape Set (25 shapes)

Hot Babes (7 shapes)

Go-Go Girls (18 shapes)

Sexy Stances (13 shapes)

Ladies (7 shapes)

Sexy Girls (47 shapes)

2. Animals

Birds (12 shapes)

Butterflies (38 shapes)

Horses (9 shapes)

Horses (15 shapes)

Zebras (6 shapes)

Sea Creatures (27 shapes)

Animals (10 shapes)

Animal Patterns (13 shapes)

Bugs (20 shapes)

Weathered Flying Bugs (21 shapes)

3. Planes and Boats

Aircraft (21 shapes)

Maritime (27 shapes)

WW2 Planes (13 shapes)

4. Guns and Weapons

Guns (30 shapes)

Guns (26 shapes)

Ray Guns and Laser Blasters (15 shapes)

I Love Weapons (12 shapes)

5. Halloween Shapes

Halloween Shapes (23 shapes)

Halloween Shapes (10 shapes)

6. Trees

Trees (17 shapes)

Dead Trees (24 shapes)

Live Trees (21 shapes)

Plan Trees (20 shapes)

7. Circles

Retro Circles (10 shapes)

Circles (10 shapes)

Circles, Lines and Sunlights (108 shapes)

8. Random Shapes

Stars (200 shapes)

Sunbursts (30 shapes)

Splats and Drips (15 shapes)

Splat Shapes (8 shapes)

Stains & Blots (34 shapes)

Drips (25 shapes)

Paisley (24 shapes)

Kiddy Stuffs (72 shapes)

Ribbon Collection (3 shapes)

Voters Collection (2 shapes)

Surfing Themed Shapes (6 shapes)

Hero Shapes (13 shapes)

Flames (5 shapes)

Markers (23 shapes)

Vector Shapes (13 shapes)

Arrows (10 shapes)

Speech Bubble Shapes (42 shapes)

Cartoon Shapes (25 shapes)

Assorted Logos (38 shapes)

CD & DVD Logos (7 shapes)

Foliage Shapes (371 shapes)

Tools (9 shapes)

I Love Skulls (12 shapes)

Urban Shapes (31 shapes)

World Map (3 shapes)

Banner and Scrolls (28 shapes)

Art Supplies (16 shapes)

Skyline Collection (6 shapes)

Arabeski (23 shapes)

9. Combination Packs

Custom Shapes Pack v. 1.1 (100 shapes)

Custom Shape Pack (45 shapes)

50s Custom Shapes (14 shapes)

Revolution Collection (6 shapes)

Custom Shape Mix (24 shapes)

Vector Shape Mix (50 shapes)

If you’re interested in learning more about the basics of custom shapes, how to load them, and how to create your own, try the following resources.

• What are Photoshop Custom Shapes?
• Loading Custom Shapes
• Creating Custom Shapes
• Create Your Own Photoshop Custom Shapes
• Creating Photoshop Custom Shape Sets

About the Author:

Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag. (al)

RSS and syndication are the veins that the new social web flows through. Countless products and services have been built on top of RSS in the past few years but there are always a few that stand above the rest.

As part of this year’s Top 10 Products series, we offer below the Top 10 RSS and Syndication Products of 2008. These are the feed tools we and the people we know use day in and day out – we love them, we hate them, we wouldn’t want to work without them.

Sponsor

This is the fourth in our series of top products of 2008:

1. Top 10 Semantic Web Products of 2008
2. Top 10 International Products of 2008
3. Top 10 Consumer Web Apps of 2008

About the Selections

These aren’t all new products from 2008. They are the products in the RSS and syndication world that we think made the biggest impact or were the most useful.

To be honest, this was not a particularly good year for innovation in the RSS space. Too many of the products listed below are incumbents, several of which drove us crazy this year. They remain on the list, however, because they are incredibly useful and nothing topped them.

Some honorable mentions are deserved as well. We talked to many people who like RSS magazine-style start page Feedly, though we found it overly constrictive and don’t feel that it’s made a big market splash yet. We also found the Associated Press’s AP Member Marketplace very interesting. Had we gotten a chance to get to know it better, it could very well have been on this list. Finally, we love African social media aggregator Afrigator – it’s a great way to learn about what’s happening all over the continent and it’s a great use of RSS. We named it one of the Top 10 International Products of 2008 but we think it deserves an honorable mention in this category as well.

And Now the RWW Top 10 RSS and Syndication Products of 2008

Postrank

Formerly known as AideRSS, Postrank is simply the most useful RSS related application we’ve seen in a long time. Plug in any RSS feed and Postrank will rate each item in the feed on a scale of 1 to 10, by number of comments, inbound links, saves in Delicious, etc. You can then subscribe to a filtered feed of just the 10% most popular items in that feed.

We use Postrank all the time, in all kinds of contexts: from monitoring break-out stories in niche markets we don’t follow closely, to finding out about the bread and butter of new blogs we discover to running search feeds through Postrank to surface hot conversations on any topic.

Postrank has been around for about a year and a half, but we write about it over and over again.

This year Postrank opened an API, made a bunch of deals with other companies, improved its service, raised a round of funding and just generally rocked.

FriendFeed

Social “life streaming” service FriendFeed is making syndication a more social activity than anything else has yet. The service aggregates your activity data from all around the web, lets your friends comment on it and shows you the activities of all your friends’ friends when someone you know comments on something and exposes it to their network.

If RSS readers will change your life and work through their awesome usefulness, FriendFeed is a service that makes syndication fun. It’s one of the first places we go on the web every morning.

We interviewed the ex-Googlers who founded FriendFeed last February and that interview is still the best place to learn how the service works under the hood.

If you’d like to connect with the ReadWriteWeb crew on FriendFeed (and we hope you will) we’ve posted a tour of our FriendFeed profile pages here. Please join us also in the ReadWriteWeb FriendFeed Room.

Gnip

Gnip is a social media ping server, a service that other services ask for user data updates from all around the web. There’s nothing here for users, but almost every developer we talk to these days who is aggregating content in order to add value to it (and that is the name of the game) has Gnip on its radar. The company aims to make aggregation more timely, scalable and efficient than it is today.

We wrote about Gnip at length when the service launched in July.

Snackr

Snackr is a simple little RSS ticker built in Adobe AIR. Its frenetic and unstopping delivery of news is too much for many people, but the rest of us love it. It’s where our eyes wander during page loads and other down times. Many of the stories you read here at ReadWriteWeb were based on things we first caught wind of through Snackr.

Snackr was built in-house at Adobe by Flex team member Narciso Jaramillo. We reviewed it in May and have been using it ever since.

Google Reader

Google Reader is the market leader in full featured RSS readers, having pulled ahead of the troubled Bloglines in recent months. This year Google Reader has made their sharing feature much more transparent, added the ability to translate any feed into a number of different languages and recently redesigned.

It hasn’t been a super exciting year for the product, and there are still basic problems like very infrequent caching of rare feeds, but Google Reader’s incredible dominance in the field makes it a required part of this list.

Google Reader RSS Subscriber Count Greasemonkey Script

One of the simplest little changes we’ve made to our browsers lately is the addition of this greasemonkey script that shows the number of readers in Google Reader that any page’s RSS feed has. You can usually multiply that number by 2 to 4 times for an estimate of how many total readers a feed has across all readers, but either way it’s a great little indication of a site’s popularity.

The script was written by an anonymous user named “uncv” and we’d like to thank them. We love what they’ve done! This was one of the 7 coolest browser tweaks from the last month that we wrote about earlier this week. It’s already won a permanent place in our hearts!

Dapper

Dapper.net is a point and click interface for data extraction – a nice way to say scraping an RSS feed. We continue to depend on Dapper for all kinds of research, we’re always finding new ways to use it around here. We love it.

Unfortunately, some sites don’t like us to have access to links back to them available in our RSS readers (like Facebook, for example) and that really upsets us. In many cases those feeds that we created ourselves are the only way we’d be drawn back to a site, so it’s their loss as much as ours.

Dapper has been around since 2006, but they recently launched a semantic ad platform that we included in our list of the top 10 semantic web products of 2008.

Twitterfeed

Love it or hate it, Twitterfeed has made a big impact on the web in 2008. It’s the service people use to publish an RSS feed right into Twitter.

Some people argue that twitter is all about conversation and that publishing an RSS feed there is grating and inappropriate. We like getting our local newspaper story links on Twitter, though, and everything from disaster monitoring to traffic conditions are now available via Twitterfeed.

Feedburner

Google’s RSS publishing service Feedburner hurt our ability to break news first, can’t be used in many corporate environments because it gets blocked in China and only made 6 posts all year to its company blog, none since May. That’s compared to 28 posts in 2007. Apparently once you get your Google money there’s not much point in communicating with the people who depend on you every day.

Why would we call Feedburner one of the top 10 RSS products on the year then? Because despite how frustrating it can be, the service is still so incredibly useful that we don’t know what we’d do without it. Not just for publishing and analytics for ReadWriteWeb feeds – from numbers to email delivery to FeedFlare links, Feedburner will work magic easily on any feed you work with. I’ve got 68 different feeds in my account and I’ll probably publish several more before the year is up.

Pipes

Yahoo! Pipes is another RSS based service that is really frustrating, hasn’t innovated substantially in the last year – but is still so powerfully useful that it deserves a spot as one of the top products in this market.

Splicing and filtering RSS feeds is the simplest thing to do with Pipes, but there’s much more you can do with it as well. It’s great for us pseudo-geeks, we can work all kinds of magic with it. We’ve used Pipes throughout the year to do things that we (ok I) don’t have the technical chops to do otherwise. For that I thank the Pipes team a whole lot.

Those Were Our Favorites This Year – How About You?

Did we miss anyone you think should have been on this list? We hope you’ll share your favorites in comments below. What RSS and syndication products impacted you the most in 2008?

Discuss

The last time WordPress – the popular open source blogging platform – changed their user interface, they got a reaction. And it wasn’t positive. Even diehard fans were questioning the reasoning behind the changes, trying to figure out ways to work within the new construct, or simply throwing their hands up in despair. So, it comes as little surprise that the latest release, WordPress 2.7 – codenamed “Coltrane” – has had a great deal of time and energy focused on improving that interface. But could the WordPress development team win back the adoration of those angry users with yet another interface change?

Sponsor

If the initial reactions are any indication, the answer would be yes. Now, those same users who were hating WordPress 2.5 are gushing that WordPress 2.7 interface “reeks of pure awesome.”

Personally, I experienced a similar reaction when I saw Coltrane demoed in front of the WordCamp Portland crowd in September. Jaws were dropping. I swear there were “Oohs,” “Ahs,” and spontaneous applause. (Which I guess is appropriate for a release named after a jazz legend.) Everyone – from new user to WordPress developer – was downright giddy.

WordPress 2.7 delivers an interface that is nearly impossible to hate – because each user has ultimate control over the way the interface is arranged. Practically anything you can touch on the interface can be changed. Don’t like something? Put it away. Drag it somewhere else. Resize it.

The new release also offers features that users have been requesting, including things like “sticky posts” – posts that remain stuck as the first post on a blog even as additional posts are published – and the ability to do more from the dashboard. If the first word to describe Coltrane is “customizable,” then the second word is definitely “thoughtful.” Across the board, users can complete more activities with fewer clicks.

All the shiny newness on top hints at changes to under-workings, as well. There have been several changes to APIs, bug fixes, and inline documentation added to assist in development and support.

But for as impressive as the new release is, I’d offer that the positive reception has less to do with the technology and the functionality. I think it’s far more visceral than that. I’d say it has more to do with the fact that users felt that the WordPress interface team – led by recent Automattic addition Jane Wells – listened to their concerns and worked to resolve them. What’s more, they allowed users to be involved throughout the development process.

With WordPress 2.7, WordPress users feel like they’re part of the team again. And that goodwill could gain WordPress far more ground than any of the new features.

To read more about the new release, see the WordPress blog. Or take our word for it and download WordPress 2.7.

Discuss

We love useful stuff. For months, we have been bookmarking interesting, useful and creative CSS tools and related resources. We have been contacting developers, encouraging them to improve their tools and release their handy little apps to the public. Last year we prepared and published some of them in a series of smashing posts about CSS. Now again is the time to give these tools the attention they deserve. Big thanks to all designers and developers who contributed to the design community over the last months and years. We — our community and the design community — truly appreciate your efforts.

Below, we present 50 extremely useful CSS tools, generators, templates and resources. We did not include “traditional” CSS tools, such as Firebug or the Web Developer extension, but tried to focus on rather unknown tools that are definitely worth a look. Some tools are new and some are old, but hopefully everybody will find a couple of new useful or at least inspiring tools.

We strongly encourage you to develop these tools further, build on the ideas presented here, release new tools for the public and let us know about them. We would love to feature your handy tool in our next review.

Please take a look at the following related posts:

• Powerful CSS-Techniques For Effective Coding
• 53 CSS Techniques You Couldn’t Live Without
• CSS: Techniques, Tutorials, Layouts
• 75 (Really) Useful JavaScript Techniques

CSS and Typography

• Hyphenator
  Hyphenator.js brings client-side hyphenation of HTML documents to every browser by inserting soft hyphens using hyphenation patterns and Frank M. Liang’s hyphenation algorithm commonly known from LaTeX and OpenOffice. The goal is to provide hyphenation in all browsers that support JavaScript and the soft hyphen for at least English, German and French. Here is the server-side script that does the hyphenation.
• CSS Type Set
  CSS Type Set is a hands-on typography tool that allows designers and developers to interactively test and learn how to style their Web content.

  

• Typechart
  Typechart lets you flip through, preview and compare Web typography while retrieving the CSS.

  

• CSS-Typoset Matrix and code generator
  A matrix table that presents font sizes and (symmetrical and asymmetrical) margins for various base font sizes — in pixel and em units. It also generates the source code on the fly. Created by Jan Quickels.
• Em Calculator
  Em Calculator is a small JavaScript tool that helps you make scalable and accessible CSS design. It converts sizes in pixels to relative em units, which are based on a given text size.

  

• Facelift Image Replacement (FLIR)
  Facelift Image Replacement (or FLIR, pronounced “fleer”) is an image replacement script that dynamically generates image representations of text on your Web page in fonts that might otherwise not be visible to your visitors. Written by Cory Mawhorter. How To Use Any Font With FLIR: Tutorial.
• Vertical rhythm calculator
  This tool converts pixel values to em values depending on the font size of the text. You can also set margins and paddings automatically, depending on the line height you’ve defined. Very useful.

  

• typeface.js
  Instead of just creating images or using Flash to show your website’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

CSS Online Tools

• PSD2CSS Online
  A free online service that generates Web pages from Photoshop designs. By following the guidelines and naming conventions, you can precisely choose how the transformation from PSD to (X)HTML and CSS is done.
• Conditional-CSS
  Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements for both individual browsers and groups of browsers.

  

• MoreCSS
  MoreCSS is a design-oriented JavaScript library that allows you to write code for applying automatic hyphenation and creating pop-ups, tool tips, tab menus, zebra tables, advanced list styling and cross-browser opacity style. But the really special thing is that you can do these things as you would with regular CSS.
• px to em
  This tool is what its developers call “px to em conversion made simple”. Type a base font size in pixels, and the tool will produce a complete pixel to em conversion table, making elastic Web design much easier to produce.
• CSS Frame Generator
  This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure – each selector and all of its properties and values in one line. This may be a bit strange for you at the beginning, but if you get used to it you’ll find it much better.

  

• CSS Redundancy Checker
  You can use this tool to find CSS selectors that aren’t used by any of your HTML files and that may be redundant.
• CleverCSS
  CleverCSS is a small markup language for CSS, and inspired by Python, that can be used to build a style sheet in a clean and structured way. In many ways, it’s cleaner and more powerful than CSS2. You can also work with variables.
• WordOff
  WordOff applies some rules to strip the cruft that is pasted into WYSIWYG editors from Word. For example, attributes are removed for all elements except <a>, <span> and <div>, empty elements are removed and consecutive line breaks are reduced to two. It also contains an API.

  

• Postable
  “I absolutely hate having to switch all the ‘< ‘ and ‘>’ signs in my code to ‘<’ and ‘>,’ respectively. I also hate having to write “&” any time I want to include an ampersand. It makes including code snippets on my blog and whatnot extremely annoying, and today I finally got fed up.” This handy tool is a little app that will do all that for you. Created by Elliot Swan.

  

• Kotatsu
  Kotatsu is a simple HTML table generator. The tool lets you attach classes to cells in the same column easily.

  

• htmldevelopertools
  This tool allows you to update your CSS files on the server in a browser window. Currently works only under IIS + .NET 3.5. An interesting idea. Could someone create a similar script for Apache? Let us know, and we’ll support your both financially and with the broad coverage of our magazine.

  

• Deploy
  Deploy is a free open-source Web application that allows you to choose the name of a project, the Doctype, whether you want a CSS reset or jQuery integration, and it creates a zipped, ready-to-use package with all specified files and folders. The tool has been optimized for Fluid, the Mac application that creates SSBs (site-specific browsers) for websites.

  

• CSS Evolve
  CSSEvolve lets you play with many properties of a website, including the website’s color scheme, fonts, borders and more. CSSEvolve works through a process of simulated evolution in which you select website features that you like and refine them through multiple generations.”It uses a traditional blind watchmaker, user-driven genetic algorithm to drive CSS changes on a website of the user’s choosing. Basically, a set of mutated CSS variants are produced, the user selects changes that he or she likes, the algorithm randomly combines those changes through crossover and mutation and the process continues.” [ via ]
• Lorem 2
  This tool provides you with an “all around better Lorem experience.” It contains short paragraphs, long paragraphs, short list items and long list items to use in your wireframes.
• SelectORacle
  A small script that explains CSS selectors in plain English or Spanish. Particularly useful for CSS3 selectors.
• JS Bin
  A Web app specifically designed to help JavaScript and CSS folk test snippets of code in a particular context and debug the code collaboratively. It allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code: new tabs don’t). Once you’re happy, you can save and send the URL to a peer for review or help. They can then make further changes, saving anew if required. Alternative: CodePaste or EtherPad.

  

• CSS Text Wrapper
  The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.

  

• Writing Tests Against CSS
  CSS is hard to test automatically. Do font sizes meet expectations? Does the layout width correspond to the initial mockup? This tool helps you spot changes in unexpected areas of a website’s layout and design. It can also extract rendered DOM values, such as text size, from a given Web page and compare them against expected values. This could be useful for both regression testing and assertion-based, test-driven development. Written in Python by Gareth Rushgrove.
• CSS Sprite Generator
  With this tool, you can upload all of your images (you have to place them in a .zip file first) and it will combine the uploaded images into a single sprite and generate the CSS for you.
• Sky CSS Tool
  An online CSS authoring tool, Sky CSS allows you to create CSS classes almost without using handwritten code. A JavaScript-compatible browser is needed for proper functioning.
• CSS Tidy Online
  An online version of CSS Tidy, a tool that allows you to keep your code clean by compressing the code.
• Web-Based Tools for Optimizing, Formatting and Checking CSS
  A huge compilation of some of the best free Web-based CSS optimizers/compressors, code formatters and validation services. By Jacob Gube.
• Grid Designer 2.4
  This tool enables you to create a grid by specifying the number of columns and the widths of the columns, gutters and margins. You can also specify typography in the same tool and export the final CSS and (X)HTML markup. You can also bookmark your grid and typography settings and create designs with spanning columns. Created by Rasmus Schultz.

  

• Yahoo’s Secret Text-Sprite Generator
  Basically this is a URL you can hit that creates a perfect sprite-ready PNG graphic of text you add to the URL.
• Replace CSS Colors – Editor
  This tool enables you to change the entire color scheme of your website without going through the CSS code. You choose your local CSS file, replace colors and then download the new CSS file.
• The Box Office
  The Box Office lets you wrap, float or contour text around free-form images using CSS for (X)HTML pages.
• MinifyMe
  A small AIR application that can compress multiple CSS and JavaScript files into one and runs on your desktop.

  

• cssdoc
  CSSDOC is a convention for commenting in CSS to help individuals and teams to improve writing, coding, styling and managing CSS files. It is an adoption of the well known JavaDoc/DocBlock-based way of commenting in source code by putting style, DocBlocks and tags together.
• CSS Menu Generator
  This tool generates vertical, horizontal and drop-down menus online. Various color schemes are available, and you can also customize the menus online.
• sheetUp – DOM Stylesheet Library
  Simplify the tedious task of manipulating style sheets contained in document.styleSheets. You can use the sheetup bookmarklet to integrate a built-in CSS/HTML-editor in your browser.
• CSS SuperScrub
  This tool claims to significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls and intelligently grouping the remaining element names.
• DrawAble Markup Language
  Drawter Beta 2 gives you the possibility of literally drawing your website’s code. It runs on every single Web browser, which makes it really useful and helpful. Each tag is presented as a layer you have drawn.

  

Handy Kits For Designing With CSS

• Regex Patterns for Single Line CSS
  If you are formatting your CSS style sheets single-line, you may find Dan Rubin’s Textmate macro useful and helpful. “This macro retains a single blank line where your original contained two or more blank lines (helpful if you group your rules) and adds white space that matches my standard formatting preferences (which I find makes it easier to scan quickly).” And if you don’t use Textmate, you can use a regular expression instead; it is also provided in the post.

  

• 21 Excellent Dreamweaver Extensions for CSS Productivity and Standards
  An extensive overview of various Dreamweaver extensions, such as CSS Sculptor, CSS Menu Writer, Link Fader, CSS Layouts, Format Table, Style Switcher, etc.
• Graph Paper
  This graph paper is made for visual designers, interactive designers and information architects. You’ll find styles for wireframing user interfaces, storyboarding interaction and plotting values on a two-by-two grid. Plus, you’ll get a basic grid for drafting sitemaps or anything else that might come up.
• Starter Kit For Developers (PSD)
  This starter kit is a free Photoshop template that includes forms, grids, ad placeholders, dummy copy and other design elements (13 MB).
• CSSHttpRequest
  CSSHttpRequest (CHR) is a method for cross-domain AJAX, using CSS for transport. Similar to JavaScript, this works because CSS is not subject to the same-origin policy that affects XMLHttpRequest. Like JSONP, CSSHttpRequest is limited to making GET requests. Unlike JSONP, untrusted third-party JavaScript cannot execute in the context of the calling page.

In-Browser CSS Tools

• Collection of Web Developer Tools, by Browser
  Sometimes it is not easy to keep track which tools are at a developer’s disposal (and which ones are actually useful). This article lists the best tools available and quickly describes how to activate, install and use them.

  

In-Browser CSS Tools: Firefox Extensions

• Dust-Me Selectors
  A Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all of the selectors from all of the style sheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they’re encountered.
• Aardvark Firefox Extension
  With Aardvark, you can: clean up unwanted banners and surrounding “fluff,” especially prior to printing a page; see how a page is created, block by block; and view the source code of one or more elements.
• CSSViewer
  A CSS property viewer that displays all information about a design element.
• Dummy Lipsum
  This Firefox extension dynamically fills a selected field with Lorem ipsum text; the function is called via the context menu.
• Firefox: Test- und Entwicklungstools für Webentwickler | Dr. Web Magazin
• GridFox
  GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize and allows you to create the exact grid you based your layout on.

  

• 20 Firefox Add-Ons To Enhance Your Web-Development
  Yet another overview of useful Firefox add-ons that can help developers create websites more efficiently. Among them are Codetch, Pixel Perfect, Link Checker and ColorZilla.

Coding and Programming With CSS

• CSS Extra Coda Plug-in
  CSS Extra is a plug-in for Coda that gives you access to some dynamic CSS. Although it is not truly dynamic in that it will not force Coda to process the variables and settings, it gives you the commands to process the CSS instead. What this means is that you can have constants, bases and a layout module within your CSS.
• Edit in Place with JavaScript and CSS
  This tool offers you more intuitive editing (in-place editing) of your documents and style sheets. The idea: in a selected area, the user can enter the markup or change the current value directly.
• Simple CSS
  Simple CSS is a free CSS editor that runs on Mac, Windows and Linux. It allows you to create CSS from scratch and modify existing sheets, using a familiar point-and-click interface. Freeware.
• AWK
  AWK is a very powerful programming language that you can use on the command line for advanced text processing.
• cssutils
  A Python package for parsing and building CSS.



• RESTful CSS
  A new method for organizing CSS that better maps on to the way that popular Web application frameworks are built. The examples are based on Ruby on Rails, but the concepts should be easily transferrable to other MVC frameworks. By Steve Heffernan.

  

New CSS Frameworks

• CSS Drop-Down Menu Framework
  A cross-browser, modular framework that contains 14 customizable templates for designing drop-down-menus.
• BlueTripCSS Framework
  A full featured and beautiful CSS (Cascading Style Sheets) framework which combined the best of Blueprint, Tripoli (hence the name), Hartija’s print stylesheet, 960.gs’s simplicity, and Elements’ icons, and has now found a life of its own. The framework contains 24-column grid, sensible typography styles, clean form styles, a print styleshet, an empty starter stylesheet, sexy buttons and status message styles.
• Hartija – CSS Print Framework
  Hartija is a CSS print framework that attempts to unite the best CSS printing practices into one single CSS file.
• AM framework
  This framework contains six basic templates: for fixed, fluid, one-column, two-column and three-column layouts, as well as a jQuery template.
• Introducing SenCSS
  A clean, minimal CSS template for new projects.
• Typogridphy
  Typogridphy is a CSS framework constructed to allow Web designers and front-end developers to quickly code typograhically pleasing grid layouts.
• formy-css-framework
  A CSS Framework for better form management.
• emastic
  Emastic is a CSS Framework. Its continuing mission: “to explore a strange new world, to seek out new life and new Web spaces, to boldly go where no CSS framework has gone before.”

CSS Bookmarklets

• Design Bookmarklet
  Design is a suite of Web design and development tools that can be used on any Web page. Encompassing utilities for grid layout, measurement (rule) and alignment (unit, crosshair), Design is a powerful and useful JavaScript bookmarklet.
• ReCSS: Reload your CSS
  This little bookmarklet makes refreshing your CSS a breeze. It comes in quite handy when you’re developing dynamic applications. Tested in IE and Firefox.
• XRAY
  A bookmarklet for Internet Explorer 6+ and Webkit- and Mozilla-based browsers (including Safari, Firefox, Camino and Mozilla). You can use it to see the box model of any element on any Web page.
• MRI
  MRI is a bookmarklet for Internet Explorer 6+ and Webkit- and Mozilla-based browsers (including Safari, Firefox, Camino and Mozilla). You can use it to debug and test selectors.
• CSSFly
  A tool for editing websites easily, directly and in real-time in your browser.
• 15 Must-Have Bookmarklets For Web Designers And Developers
  An extensive list of 15 handy Web designer and developer bookmarklets. The whole pack can be downloaded and imported into Firefox.

Tools For Generating CSS Layouts

• Construct Your CSS
  A visual layout editor based on Blueprint and jQuery. A video tutorial is available as well. You can use the keyboard to create layouts on the fly. By Christian Montoya.
• XHTML/CSS Markup Generator
  Markup Generator is a simple tool created for XHTML and CSS coders who are tired of writing boring frame code as they just begin slicing work. Its main purpose is to speed up your work by generating (X)HTML markup and a CSS frame out of very intuitive, shortened syntax, so that you can jump directly to the styling of elements.

  

• Dynamic Layout Generator
  This tool generates cross-browser multi-column liquid designs and enables you to visually change the width and colors. You can drag the sliders to choose the width you want in your layout and preview the layout online. The CSS code is generated automatically.
• iStylr – Online CSS Template Generator
  An advanced WYSIWIG online CSS-editor with syntax highlighting, drag’n'drop-functionality, template import/export, image manager, stylsheet sharing option and a visual DOM tree. A registration is required (OpenID-login is supported).

  

Blank CSS Layouts

• The Only CSS Layout You Need
  A collection of basic cross-browser layouts.
• Faux-Column CSS Layouts
  There are a total of 42 faux-column CSS layouts for downloading. All markup has been validated against a strict Doctype.

  

• Fixed-Width CSS Layouts
  There are a total of 53 fixed-width CSS layouts for downloading. All markup has been validated against a strict Doctype.

  

• ___layouts
  The foundational ___layouts file offers five preset page widths, the option to have a fixed width or a text “zoom”-style scaling effect and two core templates that give you the ability to nest subdivided regions of one to four columns. The framework supports fluid-width layouts and fixed-width layouts.

CSS Layouts

• 100 Free High-Quality XHTML/CSS Templates
  In this post, we showcase 100 free high-quality templates. Hopefully, some of them will save you some time in your design and development. While they are generally free for personal or commercial use, always remember to check the license first for any restrictions or guidelines.
• 45 Excellent Free Web Templates

Would you like to see more similar posts?

Should SM publish more similar posts? (JavaScript, Ruby, PHP etc.)
( polls)

Related Posts

Please take a look at the following related posts:

• Powerful CSS-Techniques For Effective Coding
• 53 CSS Techniques You Couldn’t Live Without
• CSS: Techniques, Tutorials, Layouts
• 75 (Really) Useful JavaScript Techniques

(al)

MySpace, in an all out war with Facebook over this year’s prize (socializing the web), is relaunching their Data Availability product today under a new name and announcing some snazzy new partners.

Goodbye, Data Availability. Hello MySpaceID.

Along with the renaming ceremony, MySpace is also announcing two new partners: Netvibes and Vodafone (the latter is an interesting mobile play for MySpace).

MySpaceID is roughly analogous to Facebook Connect, which had their own coming out party last week. Sites can add various elements of MySpace ID to allow their users to log in via their MySpace credentials, display their profile information, and find MySpace friends who are using those sites. Starting early next year, MySpace says, they will add the other features that Facebook Connect has now, such as publishing activities from partner sites to MySpace, and syndicating MySpace activities to partner sites. MySpace will also allow partner sites to take new user registrations beginning with their MySpace credentials and basic profile information.

The crucial difference between MySpaceID and Facebook Connect is the software stack. Facebook uses proprietary software and methods, although they say they will open up over time. MySpace has embraced open standards across the board, including OpenID, OAuth and Open Social. The benefit, they say, is that sites will be able to implement other competing services that are also on the open stack with few implementation changes. Yahoo, for one, is rumored to be taking a similar approach.

MySpace also plays nicely with Google Friend Connect, allowing users to log in to sites that have implemented Friend Connect with their MySpace ID. Facebook stubbornly refuses to play ball with Google – they seem to want that direct software connection with partner sites.

It’s clear that small sites are eating this stuff up (hey, we launched Facebook Connect the first chance we could). But the larger guys are taking their time. MySpace’s original launch partners – Twitter, eBay and Yahoo – are yet to implement it. And few of Facebook’s original launch partners have shipped the service, either (Digg is rumored to be waiting until at least the middle of next year).

But one key feature of both products – the ability to tell MySpace or Facebook a user’s email address and get back all of their friends on those services – is likely to quicken the adoption rate by large partners. They want to fill out their social graph as quickly as possible and link up all those users as friends. Both of these services make that happen.

Screen shots of the details of MySpaceID are below. I’ll be interviewing MySpace COO Amit Kapur on Tuesday morning in Paris at the Le Web conference as well, and MySpaceID will be one important area of the discussion.

Crunch Network: CrunchBoard because it’s time for you to find a new Job2.0

Seam 2.1.1 adds OpenID support as the first of, we hope, many external authentication options in Seam. Since this is fairly new, I’ve put together a mini-FAQ on our OpenID support.

What is OpenID?

OpenID is a community standard for external web-based authentication. The basic idea is that when a user comes to your application, instead of registering and maintaining a username and password for your application, the user can register and login with his OpenID. Think of it as a user-controlled single sign-on. Instead of trying to explain OpenID here, I recommend watching OpenID According to Dave for a quick overview or Simon Willison’s Google Tech Tech for a more technical introduction.

Does OpenID replace my current authentication mechanism?

OpenID can be used in a lot of different ways, and we’ve tried to keep our support as flexible as possible to support a wide variety of uses. To do that, we’ve made OpenID a supplemental authentication mechanism. The OpenID component doesn’t replace your existing identity component; it sits along side it. After validating an OpenID, the OpenID component can immediately log the user in with no additional work on behalf of your application. Or, you handle the
validated OpenID in an application-specific manner.

Do I still need to maintain an entity for the user?

You don’t have to use any form of local identity. No local identity might make sense for some uses, like blog comments or voting in a poll, but for most applications you’ll probably want to maintain a local user object to attach user-specific data to.

Does OpenID mean you give up control over the login proces?

No. OpenID is about authentication and not authorization. The OpenID provider can tell you that the user trying to access your application is who he claims, but that doesn’t necessarily mean the user should be allowed to access your application. Blindly accepting OpenID credentials could open your application to spammers and other internet cretins, so you’ll almost certainly want to impose the same registration and login requirements as you would for a non-OpenID login.

Do we support attribute exchange?

Not yet, but that’s very high on the list of things we’d like to add.

How do I use OpenID in Seam?

Look in examples/openid for a simple Seam application that uses OpenID. This application demonstrates the simplest form of OpenID usage with no local user. For a more thorough look at how to configure OpenID, have a look at the docs. If you have any questions, problems or suggestions regarding the OpenID support, post a message to the forums.

RFID tags are everywhere these days, from your passport to your anti-theft devices, but now you can use them for your own good or evil projects with this easy-to-use kit.

The TikiTag RFID Tag Programming Kit is a simple kit that includes a USB RFID reader and a bunch of RFID stickers. You can program each sticker to trigger any number of actions on your computer, allowing you to do things like swipe your phone over the reader to bring up your address book or your iPod to open iTunes. Really, it’s up to you to come up with the most creative ways to use this thing. [ThinkGeek]