As part of our feedback post, we promised to review one commenter’s site here on Pro Blog Design. Well, our winner was Liam J Moore, so we’ll be reviewing his site today.

A quick note to everyone who took part in the feedback post though, thank you for all of your suggestions! We’ve gone through every single one of them, more on that to come on Monday!

Now, to the review. Liam is a student completing his Masters project in Multidisciplinary Design this year. The blog currently serves a joint purpose; as a portfolio for his design work, but also as a progress log for the project.

The really interesting thing about Liam’s site is the style he has set it in, have a look:

(click it to view in full size)

What Has Been Done Well?

The most obvious part of this site that has been done well is simply how it looks. The color scheme consists solely of yellow, grey and white, all across the site. There are very few graphical touches, just large blocks of yellow or gray, all laid out to give quite a memorable appearance.

The vivid yellow is one shade you rarely find making up the background of a website. Combine this with simplicity of the setup to get quite a bold feeling from the website.

That leaves a good message about being brave enough to try new things as a designer. Perfect for a portfolio site.

Another unique touch is the picture in the sidebar. You’ll notice I couldn’t resist putting it into the intro image for this post, just because it’s such a cool idea.

A regular picture with a “Hello” speech bubble to welcome you to the site. Another simple effect. Another effective one.

Even the typography on this site is nicely set. The large fonts are effective where they need to be, and reading off the vivid yellow background is a lot more pleasant than I expected it to be. I don’t think it’s a move that any newspaper websites will ever copy, but given that this site is primarily a talent showcase, it might just be worth any small usability loss.

What Could be Improved?

One question I had to ask Liam before I wrote this review was this, “is the site primarily a portfolio, or a blog?”

The answer was that it had become both, but in the long run, the real purpose was to be a portfolio. Sometimes it can be hard to choose between two goals for a website, but to get the most out of it, you will need to make that decision eventually. With that in mind, let’s look at how we could re-assess the homepage.

The two things you will be drawn to first when you load the homepage are the large messages on the grey background in the center, and the “hello” image to the right. That’s fine. The text introduces you to the site, and the photo is a great personal touch.

But underneath that, there’s a large empty space. The sidebar extends 2 or 3 more screen’s worth down the page, stretching out the homepage where it doesn’t need to be. All of the content in the sidebar is useful, but not an essential.

Given the purpose of the homepage to drive readers to particular aspects of your site, we can take out some of this sidebar content on the homepage, and only display it on the blog pages instead:

• Hello – Introduces Liam. Given that this is a site about Liam, it’s obviously going to stay!
• What Am I Twittering? – Twitter is great, but perhaps this would be more relevant to longer term readers? (i.e. the people who will be on your blog page)
• Flickr – The Flickr photos here are great. There’s nothing wrong with keeping them here, or perhaps we could find another way of displaying them elsewhere in the site?
• Archives and Module Blogs – Both of these sections are navigation for the blog. But the reader hasn’t gotten to the blog yet, so let’s take them out.
• Search – Again, the reader hasn’t chosen to visit the blog yet, so a search engine may not be what they’re after. It’s a small part of the page though, so it won’t do much damage in staying either.
• Contact details – Always an essential for a portfolio!
• Blogroll – Nice to have on a blog, but it takes up a little too much room for the homepage.

Now we’ve cut down on the space, how are we going to drive users to the portfolio page?

The first step is the simplest; in the welcome paragraph, link the words “portfolio website” to the portfolio. You could even link “Web & Graphic Designer,” and there’s no need to change the appearance of the text when it’s linked.

Another option would be to display pieces from your portfolio. Displaying the full images might be a little much, but smaller thumbnails of each could be effective.

Some Usability Tips To Consider

Liam’s site looks great, but as I browsed around it, there were a few little things that bugged me occasionally. Nothing major, but when a lot of small things come together, it can make a difference.

• Logo not linked to the homepage.
• The logo shade of yellow is very slightly different to the shade of yellow in the rest of the website. It’s not something noticeable at first, but might be worth looking at.
• There are very few rollover effects on the site. Both the navigation buttons in the header, and the post headlines in particular, would benefit from the interactivity. For the post headlines, some CSS could be used to make the entire grey block into the link, and the effect only needs to be simple. Changing the font color to white would do it.
• White comment fields. Normally white is great to read and write off, but when the white is set against the yellow background here, the contrast turns it almost neon.
• Location of the Earth Divided tweet in the header. This tweet is exactly where I would expect a slogan to be. I was able to work out what it was when I saw the “22 days ago” at the end of the message, but for non-Twitter-addicts, it may be a little confusing.
• The social sharing links at the end of each post are in blue. Given how well the site sticks to the 3 tone color scheme, it would be nice to see these few links fall in line with the rest.
• When visiting the blog, you’re greeted with a lot of titles like “Tutorial #17” and a lot of talk about the Masters project. Given that the Masters is the focus of the blog for now and the next while to come, it would be worth giving a quick overview of what the project actually is at the top of the blog page. That way, new readers won’t be lost when they start to dive in!
• Bonus pointer; it still says copyright 2007 in the footer. Woops!

Conclusion

All in all, I think Liam’s site has a great style to it. It’s boldly different to the norm, which is a selling point for any graphic designer. The stark yellow may not be to everyone’s taste, but striking moves are what it takes to get attention in a crowded niche.

Now it’s your turn, what do you think of Liam’s site?

PS – I just wanted to give a shout out to one of Liam’s projects, Earth Divided. There are some great uses of graphic design in his logos (Plenty of people walking around Belfast will have spotted them before!), but for everyone else, you’ll find the Twitter profile is full of truly fascinating statistics.

There are a lot of free fonts available online. Sites like Dafont and 1001Fonts are invaluable repositories for designers, because they give us such a wide range of font options.

Cartoon fonts are one type of font that rarely get much praise. The problem with them is that by definition, they’re gimmicks. They are never the most legible fonts, I’d never recommend using one for content, and quite often, they just look foolish.

But when it comes to creating a memorable logo easily, a good cartoon font can be a great first step. They’re distinctive, look great in large sizes, and can be easily modified and re-colored in Photoshop to make it that little bit more unique.

Of course, that only works with certain styles of design. If your site is all bubbly and colorful, it’s worth considering. If you’re more minimalist or professional, stay well clear!

So with that in mind, here are 37 of the best free cartoon fonts we could find. Let us know if you put any of them to good use!

Glimstick

Joint By Pizzadude

Mandingo

Smilage

Chachie

Bumbazoid

Baby Kruffy

Letras Locas

MTF Scribblie

Taxidermist

Smartie

Mickey

Chizzler

Umberto

Space Pontiff

Fontdinerdotcom Sparkly

Broken Toys

Ice Age

Army Beans

Chlorinar

LoOse Gangster

Gwibble

Chubby Cheeks

Candy Time

Cosmic Dude

Cactus Sandwich

BabOonjaZzbaSsoOn

Altamonte

akaHoggle

Eyesis

Armor Piercing

Fighting Spirit

Denne’s Aliens

Clink Clank

Pokemon

Oogie Boogie

Burrito

Which was your favorite of these cartoon fonts? Or did I put you off a little too strongly in the intro to the post?

Any others that you would recommend to us?

We all know that our computers will crash someday, and we all know that we need to make backups of our files to keep our work safe.

The hassle is that a lot of backup methods are tedious and time wasting to keep going. We want to have a backup system that we can set up, and then forget about it.

We’ve already shown you how to keep a WordPress database safe, but in this post we are going to look at the rest of your blog and theme files, as well as client files or any other important documents you keep.

Here’s what we’ll be talking about:

• What is Dropbox?
• Securing your blog folder.
• Why use Dropbox for backing up client files.
• Creating symlinks to preserve your current folder structures.
• Collaborating with others on blog posts, design files etc.

What is Dropbox?

There’s a good chance you’ve heard of it already, but anyway, Dropbox is a free service which offers you 2GB of storage space online.

You install the program on your computer, and it creates a “Dropbox” folder in your Documents folder. From then on, anything that goes in the folder gets copied up to Dropbox as well, instantly.

The nice part is that you can install Dropbox on as many computers as you want, so your files are accessible from anywhere (Including a regular web interface).

So, let’s start by signing up. If you use this link, you will get the free 2GB + 250MB of extra space. That’s because of Dropbox’s “Invite a Friend” program, which you may as well take advantage of!

Alternatively, here’s the regular homepage link. Just download and install the program, and you can sign up as part of the installation.

Securing Your Blog Folder and Client Files

When you installed the program, you specified a location for your Dropbox folder (Most likely; My Documents > My Dropbox, if you’re a Windows user). We’re going to copy our blog files into this folder.

With WordPress, upgrades now take place on the server, so the likelihood is, the core WordPress files on the server will always be different to the ones on your computer (Unless you’re very meticulous about keeping the two in sync).

Fortunately, those files aren’t important. You can always re-download them from Wordpress.org if the worst happens. For that reason, we’ll stick to just 3 folders.

Load up your FTP client, and download a copy of the following:

• wp-content/themes/
• wp-content/plugins/
• wp-content/uploads/
• Optional: You may want to download your .htaccess file if you have edited it, and your wp-config.php file for your database options.

These 3 folders combined with your database backup, mean that you’ll always be able to recreate your site exactly as it was.

Now simply copy all of the files into the Dropbox folder on your computer and Dropbox will take care of the rest.

Why Use Dropbox for Client Files

There are some great ways to backup all of the files on your computer, but the problem is that they have to be scheduled, e.g. to happen once a day.

So if your computer dies, you’ve lost at least 1 day’s work.

That can be a costly mistake, but one that Dropbox would avoid. While working on files saved in your Dropbox folder, every time you click save, the saved file is copied up to the server.

Dropbox as a Version Control System

Dropbox also keeps a record of previous versions of the file, so it works as its very own personal version control system.

Check out this screenshot; it’s of the web interface for a WordPress style.css file I’ve been working on. I can roll it back to any previous version I like if anything goes wrong in the current one (Like accidentally overwriting the whole file with a different one…).

Click to see in full size:

Setting Up Dropbox For Client Files

The best way to work with client files within Dropbox is to set up 2 folders for your client files:

• Current Clients
• Past Clients

Current Clients is where you put all of the files you are currently working on. This is the folder that you should put in your Dropbox.

Past Clients can then be backed up to an external disk, or any other normal backup method.

You are unlikely to go over the 2GB freebie limit this way, and Past Clients files won’t change often so a daily backup will cover them 99% of the time.

Creating Symlinks to Preserve Your Folder Structure

A symlink (symbolic link) is like a folder pointer. Let’s say your original folder is here:

My Documents/Work/2009/ABC

But you’d like to be able to access that folder just by going to:

My Documents/ABC

Then you could create a symlinks for My Documents/ABC that would take you to the real folder any time you clicked it (or any time a program accessed it).

Dropbox and Symlinks

If you have a nicely organized folder on your computer for all of your client files, or your blog files, then you may not like the idea of moving the most important folder from each to a separate location.

With symlinks, we can avoid that:

• Cut and paste the folder (e.g. “Current Clients”) from the original location, into your Dropbox folder.

  (Important: the original must be put into Dropbox. If you do this the other way around, files will only be backed up each time Dropbox loads)

If you are a Windows user, continue reading here for how to set up the symlink. For Mac and Linux users, Dropbox themselves have a good guide on setting these up.

• In Windows, go to Start > All Programs > Accessories > Command Prompt.

• Windows Vista and Windows 7 users can then type, for example: (all on one line)

  mklink /D "C:\Users\YOURNAME\Documents\Web\Clients\Current Clients" "C:\Users\YOURNAME\Documents\My Dropbox\Current Clients"

  The first path in quotes is where you would like the symlink to be placed. The second is for the folder in Dropbox that you would like it to point to. And don’t forget to replace YOURNAME with your name on the computer.

• Windows XP users will need to download Junction, and then type a similar command: (All on one line again)

  junction "C:\Documents and Settings\YOURNAME\My Documents\Web\Clients\Current Clients" "C:\Documents and Settings\YOURNAME\My Documents\My Dropbox\Current Clients"

Now you can browse and find your clients folder in the same place it always has been, but you’ll actually be working on files in your safe and secure Dropbox folder!

Collaborating With Others

Folders can be shared with anyone else with a Dropbox account. Every person can edit and add to the files in the folder, and Dropbox will keep a copy of the revisions.

Just right click the folder, and select “Share This Folder” from the Dropbox menu.

You’ll be taken to a screen where you enter the email addresses of the people to share with, and it’s a simple as that.

There are a lot of options for collaborating online (e.g. Google Docs), but here are a few examples of where this could come in useful:

• Working with authors on your blog who prefer to type their posts up in Word first.
• Collaborating with another designer on a PSD for a client.
• Working with another coder on a WordPress theme, so you both always have the most up-to-date versions of every file.

Conclusion

I love Dropbox. I use it primarily for backing up my client files and the occasional reversion to an older version of a file, but I also use it a lot for sharing files with people instantly (both for code files that other people are working on with me, and for sending over small files like images without resorting to emails or IMs).

What do you think of Dropbox? What uses have you put it to, or do you have a different tool we should look at?

Joomla is a CMS (Content Management System) that lets you create websites, blogs, web portals and online applications with a minimal amount of coding. It has a lot in common with WordPress.

We haven’t covered Joomla in any way previously on this blog, so we’re going to start by giving you a taste of the sites that can be made with Joomla. The following 40 themes are all free to use and show you the starting point you could have for your next site if you use Joomla with it.

If you’d like to see more Joomla coverage in the future, just let us know. Or of course, we can stick to good ol’ WordPress!

AdminPraise Lite

Afterrburner

IceMag

Xbox

Xbox Black

Medal Of Honor

Artik

Connect The Dots

Aqualine

Greenera 4.0

Somnia

Droppler

Mercury

News

Ink Kids Land

Manuscript

World War Craft

GetsWider

Sublime

Nuke Red

Elements

Hogwarts

L Cars

Vec Demo

Clean and Clear

Ytw Red Bah

Pink, White and Black

Orange Blog

Word Blog

Black and Orange

Field 2006

Contasi

Music Blog

Sun Burst

Art Colours

Star Craft

The Matrix

Spirit

Youloo

New Horizon

What do you think of the themes? Any great ones, or will WordPress be your steadfast favorite for the foreseeable future?

Splashnology is a community design site. Members join up and submit articles, which are then displayed in blog format on the website.

Today we’re going to take a look Splashnology’s design to see what has been done well, and what we would improve on. Lets start by opening up a new tab, and then on to the review!

NB – This is a sponsored design review. To see about getting one for your own site, email us.

What Has Been Done Well?

The first word that comes to mind when describing this design would be “clean.” The color scheme is largely black and white, and there is ample padding with few visual effects.

The subtle differences in shades of grey, combined with relatively large headlines and photographs take what could otherwise be a very simple appearance, into a nice, minimal design.

In the whole of the website, there are very few “graphical effects” as such to catch your eye. Instead this design relies on its very lack of those effects for its appeal, and some nice touches in smaller aspects of the site.

For instance, the article titles begin by naming their category, and then the title of the post. On a site with such a wide variety of categories, this could be a very nice of quickly scanning for the posts you want.

Another well made section of the website is the “Our Friends” blogroll of the sidebar. It is a simple list, but with the favicons of each website shown. In more colorful websites, this could end up causing clutter, but here it adds a spark of life to the site.

They may want to follow their own advice on these images and use CSS sprites though, cutting down by 19 HTTP requests.

One area of a website which rarely catches my eye is the navigation between results pages (The “1, 2, 3, 4…” etc. navigation at the bottom of a search). That changed on this site however.

The large “previous/next” makes it very easy to use. Too many sites have a tiny little arrow in a box that you have to hunt for (Or worse, a single arrow for the next page and a double arrow for the last page). Splashnology’s setup was very friendly and looks good.

What Could Be Improved On?

One big question needs to be answered; what is this site?

Load the homepage and you will be presented with what looks like a blog. You’ll see a line of tabs saying “Posts Blogs People Jobs Help”, which is a little confusing. You’ll even see the name Splashnology, which could mean just about anything.

You may or may not notice the tiny little slogan tucked under the title, “Web technology society.”

Whilst there is nothing wrong any one of those elements, when you put them all together, they just don’t mesh well. When I began this review I thought I was reviewing a blog with some unusual tabs I should check out later.

It wasn’t until later that I found the site is a community where anyone can sign up and submit articles. They even have rather extensive author pages.

If your site looks like a blog, that’s no problem. But if it’s not a blog and you really want me to sign up, to vote on articles, or anything else your members can do, then you need to make it clear.

We’ll talk about the header in a minute, but let’s just look at the social voting options for now.

Splashnology’s 2 boxes are hidden way down at the end of the post, those decimals could mean anything and even the 2 arrows aren’t that clear on their purpose (And yes, there is actually some sort of text in that blue box…)

Contrast that with Digg. One simple number which is clearly a number of votes, and the thumbs-up vote button is hard to miss.

If people are going to interact, it needs to be as simple as possible for them.

The other major area which could do with a rethinking is the header itself. This is the current header:

There is quite a lot going on here, without any one element truly taking precedence. The content includes the logo, login/register buttons, navigation tabs, a submit button, a search form, and some more navigation.

But what could be done about this all?

Let’s start with the “Login or Register.” The 2 are given equal prominence, but a user will only ever need one or the other. Now let’s assume that a user looking for the login button has been to the site before and knows it better than a user looking for the “Register” button would.

The returning user knows his link is in the top left. The new user doesn’t know where to begin and needs the “Register” to catch his eye. With that in mind, why not make the “Register” larger (or the same size), and the login a lot smaller but nearby to it.

Now onto the navigation. The large tabs divide the site into sections. Most are self-explanatory, except for the “Blogs” tab which instead of showing a list of blogs, it shows a list of topics.

This navigation is useful for people looking to get to other parts of the site, but the majority of users are going to be interested solely in the articles. The “Blogs” section already has a sidebar widget. Something similar could be made for the “Jobs”, and then the rest of the navigation can be moved somewhere less obtrusive.

The sidebar widgets will gather the attention to these sections (Better than the header could, because it will provide content from the sections, e.g. latest jobs), and users can then use the regular header links for navigation if they want to return to them a second time.

Now we’re starting to free up some space!

We’re left with the Submit button, the search bar and the 2nd navigation bar to sort out.

The Submit button is an interesting one though. Currently it is the only indicator of the social nature of this site, but for an un-registered users, it’s pointless because they have to register before they can use it.

That leaves us with a choice; we can remove the “Submit” button for non-registered users (freeing up more space), but we have to find another way to emphasize the social nature of the website.

If we highlight the social voting buttons around the post titles (With a new design, as we talked about earlier), then the social nature will become apparent. We can also use the header to help us out by increasing the size of our slogan. I’ll also take the chance to reword “society” to “community.”

When a user is logged in, they won’t have need of the “Register” or “Login” buttons, which frees up the perfect space for our submit button.

Our next move now is to focus on the second navigation bar. Let’s consider what we currently have.

A “Popular” tab which lists the most popular posts. A “General Blogs” tab which showcases posts from other websites. A “Personal Blogs” tab which shows posts written for Splashnology, and a “Top” tab which display the most popular posts, with different options for date ranges (e.g. Top in 24 Hours etc.).

Each of those then has a “Positive” or “Negative” subnavigation option.

The first thing we can say is that Popular and Top should be the same thing, so let’s strike one off our list.

Now for General and Personal; the purpose of these tabs isn’t clear until you actually click them and try to work it out. And for a new reader, what difference does it make if the article they read was submitted in, or hand-written there on the site? That information doesn’t help them find what they’re after.

We could reduce this list down by putting the main categories in the top navigation, and the actual topics in the subnavigation.

You could experiment with grouping the topics into categories and listing those (e.g. Design would be a main topic, and Inspiration, CSS, Tutorials etc. would be a subtopic), but our goal here is to make it as clear as possible so we’ll keep it simple.

We will have one tab for “Home” and one tab for “Popular.” Both of those will then list the main site topics underneath.

When a user is logged in, this also leaves us with room for a “My Account” tab, giving them quick access to things like their profile, account settings and comments.

Last but not least, the red “Search” text stands out merely by having almost the only color in the header. Let’s take that out and all a little spacing to the header.

Now we’ll compare our finished product with the original.

Original:

vs. modified:

And that was all done without adding any sort of graphic effect or changing the style in any way. It’s amazing what some organization and layout can do.

All in all, the minimal Splashnology design is well done and the style needs no changing. The usability of the site and its clarity of purpose could be strongly improved though. Taking each aspect of the site one at a time and thinking “how could I make this clearer?” will take it a long way.

What do you think of Splashnology? Is there anything you would do differently?

And on a purely Pro Blog Design note, what did you think of the style of this review? Our previous reviews have always been shorter and snappier. A list of the good sides, then a list of the bad. Which do you prefer?

It’s been a while since we last asked for some feedback about who you are and what you think of the site. If you could spare two minutes to answer the polls below, it would really help us make Pro Blog Design even better!

There is also a reward for anyone answering the question at the end! Absar from ShopHTML is offering 20% off their PSD to HTML services to anyone who does!

On top of that, I will choose one random winner from the list and give them a free design review, published here on Pro Blog Design. That means you get all the feedback on your website of course, but also a good bit of publicity as well!

Poll Questions

Competition Question

ShopHTML do PSD to xHTML conversions, but also to systems like WordPress as well. To receive 20% off your next shopHTML order, all you have to do is answer the following question:

“If you could change one thing about Pro Blog Design, what would it be?”

Leave your answer in a comment on this post, and Absar will get email you soon with your discount code! (If you’d rather not, just say in the comment and I won’t pass on the email address).

You’ll also be entered in the competition to have your site reviewed here on Pro Blog Design. One winner will get a full design critique published here.

Thank you for taking the time to answer the polls and the question. We really appreciate it and you’re helping us to build a much better website!

Update (17/10/09): We’re now up to 28 awesome green web designs, thanks to all your comments!

Today is the 3rd Blog Action Day, meaning that you’ll be bombarded by articles from all over the internet on helping our environment. We took part in the first two, and of course we’ll be taking part in the bombardment today as well.

Keeping in line with our regular topic, we’ve pulled together a collection of the best designed “green” blogs and websites out there.

As web and graphic designers, one of the easiest ways we can help out a green organization is to help out with their site’s design. There are a lot of big environmental websites out there with great information which could do with a facelift!

Hopefully the sites below will inspire you with what you can come up with for a “green” website, whether it’s green or not!

And more importantly, the content on all these sites is packed with information on the effects of issues like global warming and foresting, along with tips on how to reduce your impact.

Inhabitat – One of the nicest green color palettes in this list.

Planet Green – With a pretty brave logo! Seems to work though.

Pando.org – No green to be found, which is a nice change! This one’s all in the header photo.

The Greenists – Little details like the leaves in the nav and sidebar headings are done perfectly.

Treehugger – You *must* load up this site and check out their navigation trick on the right side.

World Changing – Organizes its content particularly well.

Ran.org – A lot more striking than most others in the list!

EcoGeek – Very relaxing and easy on the eye.

No Impact Man – The illustration in the header makes this one, great work!

The Daily Green – The header typography across the site looks great.

Apple and the Environment – Like all things Apple, this one is well designed.

Evergreen – The grey and white with the awesome background image give this site a very different feel to the others. Definitely one way to stand out!

Climate Progress – Not as graphically impressive as some of the others here, you still have to give them credit for doing something different with the green color scheme.

Clean Technica – All about green technology. Notice the clever design in the logo?

Alt.Energy – The design here is mostly in shades of grey, but color is used very effectively for splitting up the different sections (blue for hydropower, orange for solar etc.)

Take Part – Very cutting edge design with some great effects!

Greenpeace – Not as impressive as you would have liked from such a large movement, but if nothing else, it is quite neatly done.

Cool Green Science – Extremely minimal, and it works.

Earth2Tech – Another clever play on circuit boards and leaves, Earth2Tech also has a nice layout for posts on the homepage.

Carbon War Room – Stunning graphics work on the planet, and a pretty impressive script as well (Shows the scale of various emissions and green energy generation)

Earth Hour – Another excellent site maintained by the WWF.

Global Warming on Change.org – A social networking design with a lot of character.

What do you think of these designs? Have any favourites? What would you do for a “green” web design?

And if you want to learn more about Blog Action Day and the thousands of articles being written by bloggers around the globe, be sure to check out Blog Action Day’s official site.

Update (15/10/09): Thanks to Gopal Raju and Sunil, we have 2 more awesome green designs to add to the list! Thanks guys.

Green Ideas – A very peaceful design with a fantastic illustration!

Heroes of the UAE – It’s not often I say this, but the Flash video actually makes this design.

Update (17/10/09): You guys are amazing, thanks to Rich Sturim, Michael Hepher, Alex, and milo for sharing what yous have come up with for green web designs. Great work!

Brighter Planet has a very simple design with a perfect color scheme.

CB Green has a very “earthy” feel with the rich brown background, and a pretty cool logo to boot!

Be Green Chic is a theme for a green shopping site with plenty of strong graphic usage.

53 Mondays is an interesting one because it is a web design portfolio site first and foremost, but their unique selling point is that they are eco-friendly. Read more here!

Vector images are a very popular style on designs these days. They don’t have a fixed resolution, instead they are flexible, which means you can still adjust any dimension without losing the quality of the image.

Many designers use them for print ads, flash animation and even web design because it gives awesome flexibility, you can play around with the images and produce quality images for your artwork. If you’re a designer looking for icons, clip-arts or images for your next design project, we’ve compiled a list of the best websites where you can download the vector images for free.

Adobe

Today-Free

Ndesign-studio

Snap2objects

Designers Revolution

Smashing Magazine

Vector Cartoons

Vibr8bros

Free Logotypes

Deviantart

Design Bum

Magic People

Vectorvault

Cool Vectors

Dr-Depot

Createsk8

Vector Stock

Vectors Workshop

The Pixlpusher

All The Flags of The World

SVG-Cards

BrainCorp

VectorJunky

Vector Portal

KeepDesigning

RoundPixel

FreeVectors

QVectors

Bittbox

Vecteezy

Vector4Free

GoMediaZine

Vector Wallpapers

Which sites are your favorites? Any great collections that we’ve forgotten?

Let’s say you want to show thumbnails in your blog’s front page. A lot of blogs do that now and it’s a good way of making the page look more alive.

The only problem though is that using custom fields can be complicated and time-wasting. This post will show you how to make your theme generate thumbnails automatically, based on your post’s first image.

This trick is done by mixing some wordpress hacks and a php script. The PHP script is Darren Hoyt’s timthumb.php, the hack is WpRecipe’s how to get the first post image.

Together, they’ll grab your image and resize it for you! Let’s get started.

1 – Get the TimThumb.php Script

Get the timthumb.php script and place it on your theme directory. You can either download it, or create a blank timthumb.php file on your theme directory, open the script here, copy, paste it into your timthumb.php file, then save it.

2 – Edit Functions.php

Open your theme’s functions.php file (Or create a file with that name if it doesn’t have one), then paste the code below into it. This will retrieve the URL for the first image in your post. The code written here is based on WpRecipe’s original post.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php
// retreives image from the post
function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, '<img');
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, '<img', $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, '>');
$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1;  
 
$cleanF = strpos($image[$num],'src="')+5;
$cleanB = strpos($image[$num],'"',$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);
 
}
if(stristr($image[$num],'<img')) { echo $imgThumb; }
$more = 0;
}
//retreive image ends
?>

3 – The Thumbnail Code

This is the thumbnail code. This code has to be written inside the_loop. Since the most common use of thumbnail is to be shown beside the excerpt, in this tutorial we’ll paste this code above the_excerpt(); or the_content(); in index.php or home.php file.

1
2
3
4
5

<div class="thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php getImage('1'); ?>&w=150&h=150&zc=1">
</a>
</div>

The code above will create a 150×150 pixel thumbnail. If you want to change the size of the thumbnail, just change the ‘w’ and ‘h’ parameters. For more info, read the timthumb post here.

4 – Add some CSS Rules

You can style the thumbnail in any way you like, for example, you might add the following to your style.css file:

1
2

.thumbnail a:link, .thumbnail a:visited {display:block; float:left; padding:5px; background:#e2e2e2; width:150px; height:150px; margin:5px 5px 0 0;}
.thumbnail a:hover, .thumbnail a:active {background:#C4C4C4;}

And the result would be something like this:

No more custom fields, no more uploading images purely for the thumbnails, no more pain. What do you think? Is the time saved worth it, or do you prefer to craft your thumbnails more carefully?

Wordpress plugins are a great way to enhance and optimize your blog. In addition to adding more features to your actual blog, there are also a lot of plugins that can give you more control and power over the wordpress admin area.

Using these plugins you can do everything from hiding unnecessary elements to customizing the look of your admin area.

1. Admin Management Extended:

Traditionally, you would have to open a page/post to edit any properties. This plugin adds certain icons to the Manage post/page view so you can make changes without having to open the edit screen. You can change post/page title, edit post slug and change publication date with a neat pop-out calendar.

This plugin also allows you to toggle post/page visibility, toggle comment status open/close, changing page order with drag and drop, inline category and tag management, hiding draft posts and a lot of other functions that would otherwise need you to go through a number of hierarchical clicks.

Download this plugin here.

2. Pop Menus For WP Admin:

How would you like pop-up menus for all the Wordpress admin features? You can get them with this plugin and speed up your admin area navigation. It adds a pop-up sub-menu to the main WP menu items in your left sidebar and works even when the menu is collapsed. So, no need to collapse or hide the menu items anymore to save space since the plugin takes care of that automatically.

This plugin is based on jQuery and CSS and can be downloaded here.

3. Ozh Admin Drop Down Menu:

This plugin makes you super productive by bringing all the admin links to a neat drop down menu. No need to go through multiple hierarchies any more, now you can jump to any admin page by selecting it from a CSS driven drop down menu.

In addition to smoother navigation, this plugin also saves you a lot of screen real state and makes your admin area simpler. You can further customize this plugin by switching on/off the header, choosing a color scheme,  display/hide icons in the drop down menus and a number of other tweaks that would let you create a compact admin area.

Download this plugin here.

4. Simply Tags:

Get more out of tags with this plugin. It allows you to mass edit tags for a large number of posts, offers an auto-completion feature for entering tags and displays quick tags that you can click to select. The plugin also offers an auto-tagging feature where some tags are automatically entered based on the keywords in your post.

This plugin is specially useful if you want to add, rename or delete tags from a large number of posts. Imagine renaming a tag in hundreds of posts without this plugin, it would literally take hours. Whereas, with Simple Tags it takes less than a minute.

Download it here.

5. Pre-publish Reminders:

A simple plugin that displays reminder items you should consider before publishing. You can put a check-box against each item and check it off as you complete. These reminders are displayed on the write post page. Specially useful if you are running a multi-author blog and people tend to forget one thing or another. Moreover, you can also customize the text color and background to make the reminders more prominent. All these settings can be handled from an administration panel under the Manage Posts section.

Download this plugin here.

6. Wordpress Tweaks Plugin:

A simple yet powerful plugin to control the admin area of your blog. Offers various tweaks including turning off auto-complete for tags, disabling flash uploader, disabling self-pinging , disabling the dashboard and setting various SEO and security options to further optimize your blog . You can also use the plugin to control the nofollow options for your blog.

Download this plugin here.

7. Adminimize:

Adminize lets you get more out of the admin area by visually compressing and hiding many items. You can hide unnecessary items from the main menu, the sub menu and even the dashboard. You can move the dashboard to the menu or even remove it completely from the back-end. Different settings can be selected for different users based on the requirements. All input fields can be scrolled so you don’t need to make them bigger. The plugin also offers various features for tweaking the write page, the media, links and even the plugins.

It is probably one of the most comprehensive admin area plugins that give you complete control over your blog settings.

You can download this plugin here.

8. Wordpress Admin Bar:

Gives you an admin bar similar to Wordpress.com. You can access the admin features of your blog without going to the dashboard. Simply access the desired feature from any page of your blog, as long as you are logged in as the admin. You can display or hide any of the menu options to make it more productive.

You can get the Admin Bar plugin here.

9. Easy Admin Color Schemes:

Customize the colors of your admin interface with this plugin. You can switch between various color schemes without editing a single line of CSS. You can even add or import your own color schemes and the plugin would generate a stylesheet for it. These color schemes can also be previewed, copied and exported to use with a different blog.

While creating a color scheme, all you have to do is choose 4 primary colors from a color chart and the CSS would be edited accordingly. If you like an existing scheme but want to change a couple of colors, you can do so by editing the scheme and choosing new colors.

Download this plugin here.

10. Wordpress Admin Quick Menu:

This plugin adds quick menu items to your wordpress sidebar. Using this, you can access external pages like analytics and shopping carts from within your admin area. It works by adding a new menu to the left side of your control panel where you can add links to various internal and external pages.

To add new item, you simply need to provide the URL of the webpage and give it a menu title. You can also adjust the security level of each menu option for different user-roles.

Download it here.

11. Admin Expert Mode:

Are you tired of the inline documentation included on the admin pages? If you have been blogging for a while you no longer need paragraphs explaining to you what are Excerpts or TrackBacks. If you are familiar with all the different features of wordpress, this plugin can remove the verbose description and text included with different fields.

For example, this is how the write post area usually looks, with inline descriptions for various features.

However, using this plugin has removed all the descriptions and cleaned up the space.

It does NOT remove field labels, section headers or anything containing actual data. Moreover, after you have activated this plugin, every user must go to their profile to enable expert mode.

Download this plugin here.

12. Wordpress Admin Notepad:

This plugin creates a simple notepad in your admin area that you can use to save notes. You can hide/show the notepad with a single button and have different permission settings for each user role. It is a good tool to have if you often jot down things related to your blog.

Download the notepad plugin here.

13. Admin Trim Interface:

This plugin allows you to trim the interface by removing certain elements. You can remove different elements including the visit site button, the dashboard link, the “howdy” greeting, the wordpress version from the footer e.t.c. Each element has to be selected manually in order to be removed. However, all these changes are global and would effect all users.

Download this plugin here.

Have you used any plugins on your admin area? What about any of the above?