In the above screenshot you can check out what I'm trying to achieve. See those stars right under the name of the location? Well, that is done purely with CSS and two images. Let's see the HTML markup required.

1
2
3
4
5

<div class="restaurant-stars">
	<div class="restaurant-stars-rating" title="2.5">              
		&nbsp;
	</div>
</div>

You may ask why am I using two different DIVs instead of one. Let me explain. We need the gray stars that are used to display the maximum rating achievable. We also need orange stars to display the actual rating. The orange stars must lay on top of the gray ones.

To achieve this, the restaurant-stars div has a specific width. Mine is 76 pixels. Moreover, the background image of this div is an image containing all the 5 gray stars. Background image is set not to repeat. The restaurant-stars-rating div has a width that has to be between 0 and the restaurant-stars div's width, which is 76 pixels. The one I used in the example is 38 pixels. The background image of this second div is an image that contains 5 orange stars.

The trick is right here, in the length of the inner div. As its width is lower, the background image will not span all the way to cover up the outer div's background image, resulting in an awesome way to semantically display a star based rating value.

What's the CSS?

1
2

.restaurant-stars { display:block; width:76px; height:20px; background:url('images/rating_default.jpg') no-repeat; }
.restaurant-stars-rating { display:block; width:38px; height:20px; background:url('images/rating_stared.jpg') no-repeat; }

That's all that needs to be coded!

Enhancing it with a bit of jQuery

I don't think that such a feature should be used on a static website, so how do you tackle dynamic content that has different values for ratings? I am using this rating feature on a Google Maps infoWindow. I am using jQuery to dynamically change it based on data I get from a JSON object passed along from a Rails application. Here's the code:

1

   $('.restaurant-stars-rating').width(foundRestaurant.resrating*76/5);

As you can see I am simply computing the width value of my restaurant-stars-rating div as the product between the rating I have in the database with the outer div's width, divided by the maximum rating. Simple as that!

If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Sooner or later, you will forget your password for that one site you haven't used in ages. When that happens, you'll have trouble even recalling what email address you used to register. Happily, you know your username, hit forgot password, and then you get that crazy message that says that the new password was sent to the email address on file. But which email address is it? You have no clues whatsoever.

There are a number of solutions for such an issue. One would be adding a forgot email form that asks you some personal information available in your account, so that you can prove you are indeed... yourself. This won't really work as it would require the user to input more unnecessary information upon registration. This results in bigger forms and lower conversion rates.

A second option would be using the email address to identify the user that requests a new password. Yet again, this isn't perfect as one may have multiple addresses and bad memory. I wouldn't want to go trough my 20 (just a number) email addresses only to figure out the last one I try was the one used with this site.

The perfect solution

I think the best way to fix these problems would be by using either one of the username and email address fields, or perhaps both of them. If one doesn't remember the email address, but knows the username, the form would respond to something like: your new password has been sent to partly**********@********visible.mail. Now when you see part of your email address over there, you know where to look for a new password.

I hope you enjoyed this article. If you have any other solutions, please share them using the comments. You can also stay updated to upcoming articles via the rss feed.

A couple of weeks ago I talked about graceful flash degradation: what it means, issues that arise while developing in flash, and how to fix them properly. This is the second article on the topic. Before we continue, make sure you're familiar with the first article on flash degradation, because this article contains examples to emphasize what the previous article described.

Good flash degradation from New York Times

We previously stumbled upon UEFA's site and a wine company's website. Today we are looking upon a newspaper's website. The name is self explanatory, New York Times being the largest metropolitan newspaper published in the United States. Having that weight attached to their necks, they knew their online presence must be perfect. And it is.

New York Times has an online photojournalism section which is built in flash. It is consisted of a series of posts, each around an image. Each post has apart from the image, a brief paragraph describing the picture, where it was taken and so on. A nice feature is the small sneak peak to the next and previous articles, which are visible in the left and right sidebars of the article you are currently viewing. However, I don't think this was a feature they specifically developed, as the full screen mode lacks it.

What really matters here is that they also have a non flash version of the site which kicks in if you do not have the necessary plugins. They also let you know that if you want to fully enjoy the features of the site, you should install flash player. Flawless solution. Great job for New York Times, but perhaps more congrats should go to the site developers, whoever they are.

If you have any other examples or pointers please leave them in the comments section bellow. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

Original file

Final outcome

To apply motion blur to a graphic element without any dedicated software, here's a few simple steps that will have decent results.

1: Duplicate your graphic element

We will duplicate our graphic element because I want to apply the blur effect to only a portion of the landscape. To be exact, I want a horizontal line that blurs the center of the image.

2: Resize copy A of the element to desired size

Copy A will have to be located underneath copy B because it will be the part that will not be blurred.

3: Resize the height of copy B to same height of A

4: Resize the width of copy B to something smaller than A's width

By resizing the image to a smaller width, information will be lost. Why? The original file was 2500 pixels in width. I am resizing the image to something as low as 150 pixels. More than 10 pixels will be combined to form a new one, and preserve part of the original aspect of the image.

5: Resize the width of copy B to the width of A

During this resizing process, the exact opposite of step four will happen. Out of one sole pixel, many more have to be created, resulting in quality loss of the image, and the blurry effect.

6: Trim excess material, while blurred image on top

In the final step, we trim off the header and footer of the blurred copy of the image, leaving the desired horizontal bar, on top of the original image. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

It has been quite some time since I last wrote an article here, and I hope you all enjoyed the summer and summer holiday. I read a lot of blogs each day and I must say that there's a decent amount of articles about javascript, content, and how to properly code a site when using javascript. You have to be careful because of those people who disable javascript or use old browsers that don't have such features. However, I haven't seen any articles describing some short guidelines as to what you should do when developing a site in flash.

Issues with flash developing

The first issue that has to be taken into consideration here is that while many people have flash player installed, its version may be an older one, and the site or web app you are building with flash 10 may not work correctly, or at all on some people's computers. Moreover, there are individuals that don't have flash player installed, just like the ones without javascript.

How to handle flash generated problems

The easiest option would be to develop a html version of the site. Though this is ok, the costs of such a solution grow as the site grows. This is ok for small sites or sites that are not updated frequently. What happens when you have a big site, with content updated on a daily basis?

One interesting solution, which I definitely like is the one adopted by UEFA (Union of European Football Associations). Their website is not entirely flash, but has many flash sections. One of them is a content slider, which could have been built using javascript. They used flash and that is ok too, but how they fix search engine issue that come by using flash. How can people using mobile devices like the iPhone - which doesn't have flash - browse their website and read valuable content?

The solution is quite simple. UEFA's website displays all content headlines as plain text. Those headlines were previously bundled with images in the flash content slider. Moreover, the headlines appear in the same area of the site, leaving the layout uncrippled. Another important feature is that they also display a small button telling their visitors that if they want to fully enjoy the site they should install flash player. They also link to Adobe's download page.

UEFA does a great job making a well developed website, but they have their own pitfalls. During the UEFA Champions League and UEFA Europa League draws, which took place last week, their live coverage of the event had only flash versions, rendering blank pages for users without flash player. Mobile users had to make phone calls in order to find out the group of their favorite team.

A website that does a bad job about non flash user experience is vinuldenunta.ro . Such users do see something other than a blank page. They are presented with a small paragraph which unfortunately isn't formatted in any way, leaving the impression the site is under construction. No information is provided regarding the cool flash version of the site that is hidden to them.

Pointers for better flash developing

• 1. If possible, provide a non flash version of the site
• 2. If important content is displayed within flash, make sure it is available for users that do not have flash player
• 3. Don't use flash for navigation, and if you do, provide a secondary navigation menu using html
• 4. If you only have flash version, make sure you let non flash users know about that

The above are just some basic pointers, but sticking to them will insure a high quality website. If you have any other examples or pointers please leave them in the comments section bellow. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

Check out red-issue.com, because this site is mind blowing in terms of navigation. What is the most natural way for people to communicate? Gestures. Just like babies do before they learn to speak. Red issue uses them to allow visitors to browse their website. I really like how gestures trigger different features on their website.

Let me know what you think about how the site works, and if you have any similar examples, please post them in the comments. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

The previous spam avoiding post described a nice technique to hide URL input fields from spammer's eyes. It has received decent traffic, making it the second most visited post so far, so I decided to make additions to this topic. Today, we will discuss one more technique. The kind of spammers described in the previous post usually want to get their comment as close as possible to content areas.

Therefore, making sure their comments are by no chance as close to that area will definitely scare them off, or at least a small percentage of them. But how can you achieve this? You can simply show comments in reverse order, and paginate them. This will make the spammers delay their post up to the point nobody will post relevant comments. This usually happens when the post is outdated, or at least old. But when that happens, spammers will probably have forgotten about your site, and it is another victory for you! If you care to see a good way of doing this, you can drop by Web Designer Wall and check it out.

If you liked this post, you can check out the first article on this topic, or you can subscribe to the full RSS feed in order to stay updated.

There are people out there who would spend a lot in order to post comments, sign up in guest books etc, just so that they could add a link to their site while posting that comment. Heck, there are people who get paid by companies to do that on a full time basis. They may try to post relevant comment, related to your page's content, so that is why it is even harder to track down this kind of spammers.

How to fix this?

I have been a reader of Smashing Magazine for a long time, and I think they managed to get away from these spammers easily. If you compare Smashing Magazine's comment areas to Tutorial 9's comment section for example, you will see that Smashing Magazine has little comments with links, while Tutorial 9 has links added to almost 100% of their comments. Those are relevant comments, but there's many spam comments you must deny on your own, because no anti-spam technology will track those messages.

So, how come Smashing Magazine is doing that good, and almost nobody has a link added to their comment? The trick is Smashing Magazine doesn't add a URL input field to the comment posting form. But then, how some people are able to add a link to a comment, while others can't? It is quite simple, actually. All you need to do is to submit your comment, then edit it. While in edit mode, you can add your URL. It is as simple as that. And the best thing is that the spammers described above, when they see no URL input field in your comment form, they will run away.

Of course, this is only a temporary solution. Once the word gets out, everyone will start editing their comment and add their link. However, I think that the spamming percentage will be lower even in that case. You can share your techniques to avoid comment spamming. If you liked this article you can subscribe to the full content rss feed.