If you stop by Devlounge today, you may notice that the articles index has been revamped, making it much easier to find things and giving you more ways to find what you’re looking for. Previously, the articles index was rather confined. It showcased the last three posts from each category, which not only slowed down the loading time because there were so many WordPress loops running at once, but it also may have turned people away from digging deeper into the archives. Some people who looked quick may have been under the impression that all we had was those three articles from each category, and wouldn’t even notice that we actually have a whole slew of content available for your reading pleasure.

The new index is broken down into three sections:

• Browse by Category
• Browse by Popularity
• Browse by Year

The popular section is running off of a newly installed plugin, so it has started calculating the most popular posts as of right now. Because of this, watching the page is like watching Digg spy, because old posts are making it onto the popular list even though they might not be the most popular of our posts. Give this section some time and it will be able to spotlight our best and most read content. If you have any other suggestions for improvements we could make to the Articles index, please feel free to let me know in the replies.

This will in fact be a whole week of updates, a “pre-spring” cleaning of sorts. Other areas I hope to tackle this week include; refresh the interviews page, style the contact form (we had to update it with an anti-spam question to eliminate a recent surge of trash), as well as other improvements and tweaks here and there.

Welcome to the first “team” edition of Friday Focus, in which Ronald and I will each be contributing our own favorites of the week, adding more variety and more spice to your Fridays.

Sites of the Week

AJ’s Picks:

First up from my choices this week is Contraband. Utterly simple, this design makes the cut thanks to the illustration work in the header.

Next is RadioCinema. This dark design also makes the list because of it’s use of header imagery, in this case, with flash effects.

And finally for my picks of this week there is Silverpoint. Silverpoint designs sites mainly for schools, and they do a good job at it. This clean company site is sleek and efficient, with a good combination of colors.

Ronalfy’s Picks:

This next design is from a web design portfolio/blog called Blue Anvil. The design is highly professional and makes good use of the top-level navigation and sidebar. The footer design is superb as well. While you’re checking out the design, make sure you check out some of the well-written content.

Although I’m not too fond of animals (I do own a cat), this next design captured my attention for its out-of-the-box design. The designer makes excellent use of background images for the layout, and link hover effects for the navigation. The site is for a local store in Minnesota, but it’s definitely worth looking at if for the inspiration alone.

Digg Weekly

AJ:
Design – 83 WordPress Themes You Probably Haven’t Seen
A large list with thumbnails of 83 WordPress theme that are free (excluding Soxnest). Includes some of ours, and a great resource if you’re looking for the perfect pre-made WordPress theme.

Programming – Add Opensearch to your site is 5 minutes
A quick and easy method for adding Opensearch to any site (IE7 and FF2 compatible) with little work.

Ronalfy:
I didn’t get a chance to get my feet wet with Digg this week, but I did find these links this week:
Design
- 8 bits of Colour Inspirations
A wonderful list of color resources/inspirations for the color-challenged people such as myself.
- Why You Should Create a Wireframe First
The engineer inside of me loves diagrams and charts. This article talks about setting up a wireframe to assist in creating a holistic view of a site’s design. The article also has an Adobe Illustrator wireframe template for you to download. The article assumes the reader has Illustrator available, but you could create a wireframe using any diagramming (or vector) tool.
- Famous Logos Converted to Web 2.0
Also from Inspiration Bit is this hilarious post about popular logos being converted over to Web 2.0. Awesome stuff.

Important Reminder

Remember, we need your questions for our upcoming interview with Digg! Right now we don’t even have enough submissions to formulate the interview. We’d really like to have enough that we can’t take them all, so please submit away and tell your friends to contribute their questions!

Bes Zain — a former Gravatar moderator — helped contribute to this article.

As reported earlier, the Gravatar Public Beta is live. Within this review, you’ll find screenshots and my opinions of Gravatar’s new features. Please note that Gravatar is a paid service ($10) if you want more than two gravatars and/or more than one e-mail address.

Registration

Since I was already registered for Gravatar, I didn’t need to re-register which was nice. And my old Gravatar was there as well. The main screen — dubbed My Gravatars — shows which gravatars you have and allows you to add additional gravatars and/or e-mail addresses.

Adding a Gravatar – Image Uploading

Since I didn’t particularly like my old gravatar, I decided to add in another one. Gravatar allows you to upload a picture from your computer (the file I used was 1.55 MB) and crop it from there.

One thing I’d like to see here is a status indicator for the image upload and also a limit on the file size uploaded.

Cropping the Gravatar

Now that I had my spiffy picture uploaded, I wanted to crop it. Gravatar conveniently has a cropping tool that allows you to easily do this. One thing I did notice is that the cropping tool gives you much more control when the picture is at a higher resolution.

Rating the Gravatar

Once my gravatar was all cropped and ready, I got to rate it. As tempted as I was to rate my gravatar “X”, I decided to give my gravatar the Disney friendly “G” rating.

There is a potential for abuse here, but I’m glad Gravatar decided to allow users to rate their own gravatars. However, I foresee a problem with the reporting mechanism for abuse. What if it takes too long for an offending gravatar to be taken down? What if the admin is on vacation or something?

When reporting an “under-rated” gravatar, all you can enter in is the offending URL and an explanation. What I think should happen here is that the user can enter in the gravatar’s URL and give the gravatar a suggested rating. If enough users change the rating (say from G to X), then the offending gravatar is automatically changed to a neutral image until the owner of the gravatar changes it and/or the rating.

The owner of the offending gravatar would get a message telling him/her that the gravatar has been labeled as offensive. The owner can then appeal the offensive rating or change the gravatar and/or rating, which will then go into an admin queue. This takes the admin mostly out of the loop and makes the users the moderators.

Select Which Gravatar to Use

After uploading, cropping, and rating my gravatar, I had way too many choices to chose from. However, if I want to add one more gravatar, I would have to pay $10 a year. Rather than do that, I selected the gravatar I just uploaded.

Removing a Gravatar

Removing a gravatar is simple as well. Just hover over the gravatar you wish to delete and click the bright and shiny red “X”.

The Future of Gravatar?

It sounds like from this WordPress Podcast that Tom Werner is planning on turning Gravatar into a pseudo-MyBlogLog.

I’m not incredibly convinced Gravatar will be able to pull it off, especially since Gravatar has had such a shaky start. MyBlogLog can almost be a full competitor since it offers a full profile, community, and avatars for comments as well. Gravatar will be playing catch-up for a while if anything.

However, MyBlogLog is bloated and Gravatar (right now) is extremely easy to use, especially for those who don’t own blogs. If Gravatar starts turning into MyBlogLog and still has the admin/server difficulties, there will be nothing to stop people from flocking to MyBlogLog for good, especially since MyBlogLog offers a great amount of services for free.

I also don’t personally see Gravatar surviving very long unless the service secures some serious funding, and right now ten dollars is a little much to pay for more e-mail addresses and gravatars.

Conclusion

I suggest giving Gravatar a second chance and checking out the beta. The service is much improved over what it was before and very easy to use. I foresee a significant problem with Gravatar as far as abuse goes, however.

My skepticism is high as far as the survivability of what I think is a valuable (but not ten dollars worth) service. MyBlogLog is a viable competitor, but it carries a lot of baggage that Gravatar doesn’t have at the moment.

Right now the service is still in beta and is having its ups and downs. If Gravatar cannot reliably stay online and functioning past the beta, I predict that the Gravatar launch will not be a success, especially since the service has already left a bad taste in a lot of people’s mouths.

Gravatar is having a public beta right now. The site was down earlier, but appears to be up right now. I truly hope this is the beginning of the new Gravatar and not the end. I’ll try to write a review (no promises) this weekend after I’ve been able to adequately test out Gravatar’s new capabilities.

I just wanted to make this clear, that not every theme on the Astereo testing ground is available for download. Many of you are probably aware of Smashingmagazine recent list of 83 WordPress theme you probably hadn’t heard of. They kindly included two of ours right at the beginning: Iceburgg and Soxnest. The problem is soxnest is not a public theme. It was client work that was than sold off, so it will not be released and there are no plans for a release in the future. I’ve been getting a lot of requests asking “where can I download it” and “is it available?”. While we thank SM for the link, the theme is not a free theme, so I’m sorry for any trouble that might have cost you if you’ve spent the last few days looking for it. We do have plenty of other WordPress themes and other goodies, so head over to our list of extras if you’ve never seen them before. I’m sure you can find something good.

We will be hosting an upcoming interview with the crew behind Digg, and we need your input! This will be a user-generated interview, where will take the best 6-8 questions and send them in to Digg for response. Multiple digg staffers will be contributing, so nows the time to ask away! Please leave your questions in the replies. Later this week or early next week we’ll be sending in the best ones, and the interview will go up shortly after that (it may take a few weeks as the digg crew is busy, but we’ve already got the ok, so this is a definite interview!).

Working from home as a full-time freelance web developer I’ve encountered some absolutely stunning lines from clients and so have friends of mine. This is a small collection of those lines to watch out for if you choose to go into the field yourself.

1. If you do this one for free…

This has to be one of the most popular. People always want something for as little as possible, the notion of ‘you get what you pay for’ normally doesn’t register until at least eighteen years old, but the notion can be ignored at ages high above this.

2. This will be great exposure…

This usually comes before number 1, ‘If you do this one for free you’ll get great exposure’. The problem is great exposure isn’t a link in the footer and it isn’t a mention in the launch post. Great exposure is guaranteed jobs afterwards, and lots of traffic for your own personal site – that and possibly free advertising in a prominent placement.

3. Deposit?

Some clients want you to effectively work for free. No deposit and lots of free work = one starving freelancer. To be free to accept work that doesn’t involve deposits be sure to have some money stored away to eat away at until the client pays in the end. Make sure they are trustable and will pay in the end. Be sure to do your research.

4. Can I put this on my GeoCities?

It takes the breath out of you, working on something for a long time and then a client asking you if they can put it on an incompatible hosting platform that won’t support it. It makes for some difficult explaining but makes one great entry on a ‘ten things you hope the client never says’ article.

5. I’ve changed my mind, I don’t want it anymore

This is always an annoyance, and is sometimes a requirement in order to progress onto other projects. But it’s always something that will affect you on a personal level.

6. Ok can you just add this, and this

“You want money for the additions? You said you’d do everything for a set price!’. This one starts a lot of arguments and can affect your relationship with the client dramatically depending on how you react. To prevent this one blowing up on you always outline a clear feature set before starting work and outline exactly what you’ll deliver. Also outline what additional costs will be monetarily to the client. Will they be by the hour? Or a fixed fee? Discussed on arrangement? Whatever it is – it’s always best to plan these things out beforehand.

7. I just need you to look the other way whilst we break this law..

Whether it be tax law (it usually is) or some kind of pass the parcel – breaking the law is bad, um kay? Be sure to brush up on your tax laws that apply to you – make sure that if your hired to do a job for a company as an employee that they are handling your taxes, and if you are a contractor that you sort out your own. It always helps to know a small amount of law, and to consult an accountant when you aren’t sure of something.

8. My mum says that she won’t let me use her credit card so I can’t pay you

Funny, but a huge cringe worthy moment. It happens to all of us once in a blue moon, and it makes a fun entry.

9. Yahoo! will buy us

This is normally followed by number 1 and/or 2. People get bought all the time – but it’s simply not the case that millions are involved with every purchase of another site. Yahoo! may buy anywhere between one and tens of sites a year, but that’s between one and tens of several million websites out there.

10. Nothing at all

The client disappears, drops off the face of the earth. It’s your worst nightmare, they get you started on a project and leave, they give you a brief about a project tell you the deposit is coming and then you never hear from them. To avoid this make sure you always have a backup plan and if you can get a secondary contact for your client – that’s even better.

I’d like to thank Ronalfy for giving me the idea for this article. If you have any other things you’d like to see me write feel free to leave a comment or use my contact form to send it directly.

I would also like to mention that this article is also available on my blog JHuskisson.com where my articles will always appear first. To keep up to date with my blog be sure to subscribe to my RSS feed.

I finally updated the comment form today to break up trackbacks and comments to prevent trackbacks from breaking up responses. It appears (at least to me) that the comment area is now taking longer to load. This could be because of cache issues, or the comments code may need to be optimized and cleaned up. Please let me know if the comment areas are loading slow(er) for you than the rest of the site. I’ll try to get it sorted out tomorrow.

Feed Styler logo courtesy of Brett Terpstra from Circle Six Design.

The Feed Styler plugin has been updated to allow images to show up styled in feed readers (such as FeedDemon) that strip styles. I will dedicate the rest of this post detailing the significance of this feature.

How WordPress Positions Images

For anybody using the WYSIWYG (or Visual) Editor on WordPress, you can easily add and position images. The attributes that WordPress adds to position the images, however, are deprecated.

The deprecated attributes that WordPress adds are:

• hspace – Specifies the white space to the left and right of the image.
• vspace – Specifies the white space to the top and bottom of the image.
• border – Specifies the size of the border around the image.
• align – Specifies the alignment of the image

For each image, you must manually specify a border width, horizontal space, vertical space, and alignment. These are hard-coded into each image.

Now what if you wanted to change the border width for all images? You would have to go into each page where images are added and modify the code for every single image. The same is true for vertical and horizontal space.

Why the Deprecated Tags are Still Relevant

The deprecated tags are still relevant because in the feed readers that strip styles, the images show up correctly. However, these deprecated tags should be kept out of your main content.

The Solution

How do you keep the deprecated tags out of your content, but still allow the image to show up correctly in the feed? By using your WordPress CSS file to position the image, and using Feed Styler to make sure the image shows up correct in the feed.

In your code, you’ll be able to specify a generic style (such as class=”right”), and have the image show up correctly in your content and in your feed without having to add any extra markup to your code. This will save you a lot of time in the long run, especially if you include a lot of images in your feeds.

For those interested, I have set up a tutorial on how to style your images using Feed Styler.

Another Friday, another Friday Focus. This is the last edition where I’ll be flying solo, because as of next week Ronald and I will begin both contributing to the Friday Focus content. This means double the favorite designs of the week, double the favorite Digg Links you may have missed, and even more web related goodness! Ronald did have enough time to contribute to this weeks with the results of his “Best Footer Design” question from earlier in the week. Also, starting next week Friday Focus will now be credited to the “team” (as the author), meanings it will be a multi-staff effort to sum up the best of the best each Friday.

Sites of the Week

The next entry got my vote because of the illustration in the header. Not only that, but the site flushed well with it, and minor touches of flash only helped to smooth it all up.

Finally this week is the Happycog design. For makers of ALA, Events Apart, and many more happenings, they can still put out great looking designs.

Digg Weekly

Design – 8 Web design tricks to help you when your stuck
This SEOMOZ article outlines 8 ticks to help you when you run into a rough patch in your designer journeys.

Programming – Good coding habits
This article explains some “good” coding habits that they believe if you follow, you’ll be able to be much more organized and successful.

Best Footer Design?

Written by Ronalfy (a.k.a. Ronald Huereca)
Earlier this week, I asked what the readers what they thought was the best footer design. I also asked what you thought about content in footers.

Some of the replies to support content in the footer were as follows:

• A good footer can lead the user to other site content.
• A good footer aids the user in navigation.
• A good footer can help unclutter a web site.
• A good footer shouldn’t contain too much because after a while, it stops being a footer.

Because every site is different, it is tough to give practical advice on what makes a good footer and what doesn’t. However, two of the readers pointed out some footers that I wanted to share. I also included one from the examples I gave simply because I really liked the concept.

Several of the readers pointed out that they liked last.fm‘s footer. I am not a user of the site, but the footer definitely aids the user in navigating the site.

The next footer is from Makesitgood. This footer has a nice listing of categories, recent posts, and other standard footer information. This footer is a good example of how to give readers a place to go when they are finished reading the content. One suggestion I have for this footer is to fix the dates in the ‘Recent Entries’ section so that everything appears flush with the left.

This next footer I am absolutely in love with. If I could marry a website footer, this would be the one I would take back home to my mom. The footer comes from The Propaganda Party blog. I love the design and I love how it enables users to easily navigate the site after reading the content. The only suggestion I have for the footer is that it might benefit from a ‘Recent Posts’ section.

Weigh in! What do you think?

Feed Styler logo courtesy of Brett Terpstra from Circle Six Design.

In this short tutorial, I will show you how easy it is to float an image in your feed. Here are the steps necessary to style images using Feed Styler. It should also be noted that Feed Styler is only for WordPress users. The following example assumes the user is not using the visual editor.

Let’s write a post

The following post contains some sample paragraph text and is what the post would look like in a feed reader.

Let’s add in an image

The following image is the same post with an image added. Again, this is how the post would look like in a feed reader unstyled.

Here is the code to add in the image. Please note that I gave the image a class name of right.

<p><img class="right" src='http://www.domain.com/wp-content/uploads/2007/02/baloons.jpg' alt='Balloons - iStockPhoto' /></p>

Let’s add in the style to Feed Styler

Shown below is the code to enter into Feed Styler. A screenshot is also shown of the same code entered into the plugin.

img.right { float: right; margin-bottom: 5px; margin-left: 5px; border: 2px solid #000; } 

Re-save the post

Because WordPress caches its feed, it is necessary to force WordPress to re-cache the feed in order for the styles to be reflected. This step isn’t necessary, but it allows you to have your feed styled right away. If this step is skipped, the feed will be styled after you publish your next post.

View the result

Conclusion

I hope this post demonstrated how easy it is to style images in Feed Styler. Thanks for reading.

Uberlook is a freshly launched site that aims to be your one destination for finding quality design and development related resources (cough, other than Devlounge of course ). We first mentioned the site a few weeks back in an edition of Friday Focus. At the time, Uberlook was still purely speculation. There was a blog and screen shots, but no backbone and no demo.

Falling just a little short of its expected January launch, UL went live on February 4th.

Another One…?

Uberlook enters a field thats fairly populated with similar resource collections. The one that comes to mind the most is Protolize, but their a vast number of them out there. Still, Uberlook takes Protolize a step farther by allowing users to submit just about anything. You can submit an article, site, pdf, podcast, video, application, and a variety of other resource medians.

Because of this, Uberlook does not limit you to linking directly to a site. Find a great script but don’t know exactly what site it comes from? Link directly to the file download itself and describe it, and the resource will be stored for others to find and use.

Tagging

The site implements the use of tags to create a better and more organized site wide search. You can assign multiple tags to each submitted resource. This makes finding what you’re looking for much easier, because you can simply enter in a relevant keyword and come up with close results.

Amount of Resources

While UL may be the new kid of the block, its resource list is expanding quickly. Since UL has the ability to list and link to multiple types of resources, the possibility of thousands upon thousands of submissions in the coming months is definitely out there. I really believe UL has the ability to be a designers dream, eliminating the need to use many sites to find a particular resource because all the resources will be in one place.

The Design

The design behind UL is simple and efficient. Using a combination of blue and tans, the site is straight and to the point. Your presented with a large search box, which can also open up to include advanced search options as well as a submit form. Below that there are a few recently submitted ideas. No clutter, just straight links to a multiple of resources.

Practical Use?

Yes, I believe UL will only continue to become a better resource with time. It is definitely a site to have in your bookmarks to keep a growing collection of resources close to you at all times.