Feature
Post

Category
Webapps

Choosing Web Hosting For Clients: Shared, VPS, Reseller, or Dedicated?

As a web designer and developer, I’m often tasked with selecting the best web hosting plan for our clients. Today I want to take a look at some web hosting options, and what you need to consider when choosing one for your particular client.

Shared

What it is:

The most basic of all hosting types, you’re paying for “shared” space on a server managed by someone else.

Pros:

  • Most affordable option. You can get good shared hosting for $5 to $10 for a single account.
  • No hassles. No worries on managing your account, the company will do it for you.
  • Could be all you need- for now. If your client doesn’t expect to get thousands of hits just yet, starting off on shared hosting might be a good choice. Choose a good, reputable company that will allow you to “grow” through upgrades.

Cons:

Shared hosting is limited, and because you’re essentially sharing one file system with hundreds of other accounts, it’s less secure.

VPS

What it is:

VPS stands for Virtual Private Server and while it is technically “shared” hosting, since you’re on a server with other people, it’s set up like a dedicated server, hence the “private”.

Pros:

A VPS is more secure than shared, and more affordable than dedicated. The account owner also has more power over the account, with the ability to implement secure server configurations, and- of course- root access.

Cons:

You need to know at least a little bit about managing a server- or at least you did in the past. These days, there are many Managed VPS packages that has the web host company doing everything (maintenance, upgrades) for you.

Reseller

What it is:

Reseller packages are popular among business-minded web developers. It usually works this way: rent a large amount of space, market it and resell it to your clients. Different companies have different reseller options, such as white label branding and included tech support.

Pros & Cons:

No worries about setting up or configuring a server- as a reseller, think of yourself more as a marketing arm of the web hosting company, reselling their products. For that reason, you should resell for a reputable host that you believe in and have a good relationship with.

Dedicated

What it is:

One server, completely “dedicated” to you.

Pros:

Obviously, the most secure option of all. A good choice for mission-critical sites, and for those expecting a lot of traffic. Lots more power.

Cons:

With great power comes great responsibility- so unless you opt for a fully-managed account, expect to spend time managing and upgrading your server yourself.

Cloud

What it is:

In all of the above, hosting is done on single server setups. Here, the account is hosted on multiple servers, promising more processing power and the ability to “scale” up anytime (by adding additional servers).

Pros & Cons:

Because of the way it’s set up (think Google), cloud-hosting offers the most power of all, and it should be the answer for mission-critical sites. Its scalability also means that prices can vary widely from very affordable to very expensive. There are concerns about security and privacy.

How do you choose web hosts for your clients?

Feature
Post

Category
Design Focus

Friday Focus 05/27/10: In Your Face Illustrations

This week on Friday Focus: illustrations that appear front and center in these websites, because we want them big, bright, and beautiful.

Designs of the Week

Pieoneers

Highly detailed and scrumptious “pie chart”! The colorful illustration style and metaphors all the way into the footer not only adds interest but are artfully done.

Chopin2010

I just love a design that breaks out of the box. Once again this is a lovely work of art, with touches of calligraphy and fascinating shapes growing out of the swirls. The inside page design is more organized but keeps this look in the header.

xhtmlCafe

It’s great that you can find lots of clickable elements in the illustration itself, and the metaphor really works. The hand-drawn, watercolor style carries over to the other page elements like the icons. I wish the form fields and buttons joined in the fun too.

Protège la forêt - WWF

The center-focused layout works well, as does the bold black text and buttons, greens, and oranges.

The Peach Design

Showcasing your work in the biggest, widest way possible is a surefire way to set the look and feel of your site. In this case it’s spilling with bright pinks and trendy type.

Beraterherz - Anne Schoenemann

Some quieter shades of pink in here but still striking. Notice the recycling of the hearts, stars, roses, and leaves in the rest of this one page site.

Roaaar! INC

Super-wide layout with a sprinkle of parallax, -webkit-transform, and subtle jQuery hover effects. The most exciting portion is the contact form at the footer.

Hull Digital Live 09

I love this sketchy look accompanied by a pattern of ocean waves. (You can actually download it as a wallpaper if you want.)

Creative Sessions

This isn’t a groundbreaking layout or look but it somehow feels different. A case of letting the picture speak a thousand works, perhaps?

André Gonçalves

Topnotch icon work and typography. Just look at it. The vignettes in the corners are a bonus.

Caramel Ink

Fantastic illustrations, but other design details fall a little short of its elegance and whimsy.

Carbonmade

This one, on the other hand, overflows with whimsy! Nothing says it like a unicorn and a mustache sign in icon.

Digiti

I like that the rabbit and its hole is a mini power line leading in to the next section’s boxes. The slanting boxes and buttons are great too.

Social Media Weekly

CSSEfficiently Rendering CSS
“I admittedly don’t think about this idea very often… how efficient is the CSS that we write, in terms of how quickly the browser can render it?”

CSSUsing CSS3 Transitions, Transforms and Animation
“These demos are showing of CSS transitions, transforms (2D and 3D) and animations”

JavaScriptJavascript shorthand for cleaner code
“A few ways to save on some bytes in your Javascript code, as well as making it more readable and quicker to write”

Optimization46 CRO/Conversion Rate Optimization Resources for Web Design, SEO & Social Media Experts

Feature
Post

Category
Code

The Best WordPress Admin Plug-ins

There are many WordPress Admin Plug-ins out there, but with each upgrade WordPress is improved thus rendering plug-ins unusable or the developer stops upgrading the plug-in. It’s a chore to go through the plug-ins to see what is still usable and compatible. The following list contains plug-ins that are still very handy to handle your WordPress website/weblog.

Ozh’ Admin Drop Down Menu

Transforms the admin menu into drop downs saving your some extra clicks. There are optional color schemes and FamFam icons. A very apt plug-in to modify the admin panel.

WordPress

Download

Fluency

Fluency adds more to the admin interface design plus several features like:

  • Hover menus
  • Switch between full menu view and icon-only view
  • Hot keys for menu/submenu access
  • Support for both Grey and Classic/Blue color schemes
  • and more…

WordPress


Download

WordPress Task Manager

This plug-in display a small task manager in the administration menu of WordPress.

WordPress

DownloadPlug-in page

Adminimize

Adminimize is a WordPress plug-in that lets you hide ‘unnecessary’ items from the WordPress administration menu, submenu and even the ‘Dashboard’, with forwarding to the Manage-page. On top of that, you can also hide post meta controls on the Write page and other areas in the admin-area and Write-page, so as to simplify the editing interface.

WordPress

DownloadPlug-in page

Admin Management Xtended

It adds some icons to the posts/pages management panel with AJAX-driven CMS-known functions like toggling post/page visibility, changing publication date and title without having to open the edit screens or reload the page, plus changing page order with drag’n'drop, inline category management and inline tag management, and more.

WordPress


Download

WordPress Tweaks

The WordPress Tweaks plug-in works by adding a “Tweaks” page to your WordPress options. Each individual tweak can be enabled/disabled at will using a checkbox.

Download

Custom Admin Branding

The Custom Admin Branding Plug-in allows you to brand and customize the WordPress administration area for clients or for personal use. You can display custom images and styles for the login screen, admin header and footer.


Download

WordPress Super Cache

WP Super Cache is a static caching plug-in for WordPress. It generates HTML files that are served directly by Apache without processing comparatively heavy PHP scripts. By using this plug-in you will speed up your WordPress blog significantly.

Download

Google (XML) Sitemaps Generator

This plugin generates a XML-Sitemap compliant sitemap of your WordPress blog. This format is supported by Ask.com, Google, YAHOO and MSN Search.

Download

WP-DBManager

Manages your WordPress database. Allows you to optimize database, repair database, backup database, restore database, delete backup database , drop/empty tables and run selected queries. Supports automatic scheduling of backing up and optimizing of database.

Download

WP Security Scan

Scans your WordPress installation for security vulnerabilities and suggests corrective actions.

  • passwords
  • file permissions
  • database security
  • version hiding
  • WordPress admin protection/security


Download

Organize Series WordPress

The Organize Series plug-in helps with the organization and presentation of articles/posts you write as part of a series. It helps make it easier for readers of your blog to discover all the series you’ve written and also to easily find post that are part of the same series.

Organize Series actually adds a new taxonomy to the WordPress taxonomy structure so your blog would have “categories”, “tags”, and “series” as the taxonomy types.

Download

Peter’s Collaboration E-mails

Enhance the “Submit for Review” feature for Contributor users. This plug-in enables automatic e-mails to the relevant users at the different post status transitions: when posts are pending; when they are approved or scheduled; and when their statuses are changed from “pending” back to “draft”.

Download

Peter’s Post Notes

Add notes on the “edit post” and “edit page” screens’ sidebars in WordPress 2.8 and up. When used with Peter’s Collaboration E-mails 1.2 and up, the notes are sent along with the e-mails in the collaboration workflow. There is also a general and private notes system on the dashboard.

Download

Future Dashboard Widget

WordPress plug-in for Administration Panel. Display scheduled posts in WordPress dashboard.

Download

Members

The Members plug-in is a user, role, and content management plug-in. Its purpose is to make WordPress a more powerful CMS by giving you fine-grain control over the users of your site.

Download

Page Links To

This plug-in allows you to make a WordPress page or post link to a URL of your choosing, instead of its WordPress page or post URL. It also will redirect people who go to the old (or “normal”) URL to the new one you’ve chosen (301 Moved Permanently redirects are standard, but you can choose a 302 Moved Temporarily redirect if you wish).

Download

Zen: Distraction-free writing for WordPress

If you’re a fan of WriteRoom, OmmWriter, or similar tools that help you focus on your words instead of the tools you’re using, this plug-in will soon make your wildest dreams come true (and give you a simple clean environment within WordPress to write to your heart’s content)! While Zen does not replace the existing Edit Post/Page screen, it provides a layer on top that will help you focus more on the quality of your words and less on the distracting fine-tuning of minuscule details.

Download

PostRank

Integrate PostRank analytics into your dashboard enabling easy viewing of PostRank scores and social media metrics.


Download

Dashboard: Pending Review

This plug-in shows a list of all posts pending review on the dashboard.

Download

Feature
Post

Category
Design

7 Must-Have Free & Fabulous GUI Vectors

I can spend hours looking through all the free vectors available online- but the truth is that these are the ones I use the most: they’re vectors of various GUI (graphical user interface) elements, and they’re a must-have for any web or app designer for professional-looking presentations.

iPad GUI PSD


One of the very first iPad GUI graphics available, and one of the best. As you can see from the screenshot above, it’s quite comprehensive, and the makers promise to keep it updated with new elements.

Gesture Icons


Great for designing touch-screen interfaces, these vector-based icons are scalable and- because they’re so plain- flexible enough to work with a variety of styles.

iPhone PSD Vector Kit


Great for creating mockups of how an app or website design will display on an iPhone, this “kit” contains six different iPhone interface options as well as several additional elements.

iPhone UI Vector Elements


More iPhone vector elements, from the makers of the USA TODAY iPhone app. They’ve also got an excellent post on why you should build app mockups in vector format.

Firefox & Safari Browser Vectors


When you need a screenshot that’s not technically a screenshot, here are good Firefox and Safari browser vectors that include buttons and locations bars among other elements.

Opera Browser Vector


Here’s a GUI for the Opera browser, fully layered with tabs, icons and so on.

iPad Vector GUI Elements


Some gorgeously rendered iPad elements here, including buttons, tabs, menus, keyboard, chat balloons and more.

Feature
Post

Category
Code

Using Filters With Conditional Tags in Child Themes

On a recent project using a Genesis child theme I found myself in a situation where I wanted to use a filter, but only on certain views, namely the category view and the homepage view. Adding a filter is pretty straight forward, but using that filter in combination with conditional tags you need to add a bit extra instead of just the tags themselves.

Now, the example is for the Genesis Framework, but really the logic behind will work on any child theme using filters. What I wanted to filter was the output of the post meta area, which normally displays both the categories and the tags. I wanted to use a slightly different post meta on the homepage where the tags would be replaced with a Continue reading link.

This is what the filter looks like:

//Customizing Post Meta  
function forsite_post_meta_filter($post_meta) {
$post_meta = '[post_categories], <a href="'. get_permalink() .'" title="'. the_title_attribute('echo=0') .'">Continue Reading</a>';
return $post_meta;
}

As you can see I am just adding a permalink with a ‘Continue Reading’ text. Nothing too fancy. Normally you would add your filter and you’d be all done. Like so:

//Customizing Post Meta  
function forsite_post_meta_filter($post_meta) {
$post_meta = '[post_categories], <a href="'. get_permalink() .'" title="'. the_title_attribute('echo=0') .'">Continue Reading</a>';
return $post_meta;
}

add_filter('genesis_post_meta', 'forsite_post_meta_filter');

Using Conditial Tags with this filter actually requires the use of an add_action statement. The way to do is by declaring another function which handles the conditional tags. Something like this

function forsite_post_meta_conditionals() {
if( is_home() || is_category() ) {
add_filter('genesis_post_meta', 'forsite_post_meta_filter');
}
}

add_action('wp', 'forsite_post_meta_conditionals');

The if statement determines to actually use this filter only whether you are looking at the home page or the category view. Combined the full code looks like this:

//Customizing Post Meta  
function forsite_post_meta_filter($post_meta) {
$post_meta = '[post_categories], <a href="'. get_permalink() .'" title="'. the_title_attribute('echo=0') .'">Continue Reading</a>';
return $post_meta;
}
function forsite_post_meta_conditionals() {
if( is_home() || is_category() ) {
add_filter('genesis_post_meta', 'forsite_post_meta_filter');
}
}
add_action('wp', 'forsite_post_meta_conditionals');

More info on conditional tags can be found in the Codex, and more information on WordPress filters. Have you worked with conditional tags and / or filters before?

Feature
Post

Category
Design

25 Desktop Wallpapers For Designers

When you stare at the same screen for hours and hours, it’s important to have good desktop wallpaper. “Good” can mean useful wallpaper- as in the case of developer cheat-sheets or calendars- or inspiring wallpaper, that can motivate you or give you ideas for your current project.

Here are 25 of my favorite desktop wallpapers, all available for free download. If nothing else, I urge you to scroll down to see the last one, currently my desktop wallpaper on my workstation.

May-June 2010 Calendar Wallpaper

Inside the Rainbow

WordPress Template Tags Cheat Sheet

jQuery Cheat Sheet Wallpaper

Ode to White

World Map of Small Towns

Flying Apple

Mac OSX Snow Leopard (with text)

Constellations

Old Wallpaper

How Internet Works

HD Walls for Windows

Typographic World Map

IANE

Tiger Girl Calendar

CMYK Cassette

Whisper

Helvetica How I Love Thee

Save the Planet

Rediffusion DYR

Room Red

Field

Rainbow Lighter

Dark Desktop Office

Lorem Ipsum

How inspiring is your desktop wallpaper?

Feature
Post

Category
Design Focus

Friday Focus 05/21/10: Neutralized

I’m seeing a lot of sites whose color palette consists almost exclusively of light grayish, brownish hues. Sounds boring? No such thing for a smart designer.

Designs of the Week

Bring it to Fruition

The Waiting Room

Cannolificio Mongibello

elegantweb

Atedrake

Precinkt

Marc Thomas

Monkeyworks Illustration

Project Fedena

Thinking for a Living

Jelle Versele

Dave Redfern

Elliot Swan Designs

Aaron Irizarry

The Theme Foundry

Francesco Fonte

Crush + Lovely

Kenny Meyers

David Hellmann

All for Design

Ammar Ceker

James Charlick

Chris Wronski

Ficly

Social Media Mullet

Social Media Weekly

CSS13 Pure CSS Techniques for Creating JavaScript-like Interactions
“Here are 13 tutorials that teach you how to push the limits of CSS and make it do things that we’re not accustomed to it doing.”

HTMLThe Origins of the <blink> Tag

Typography10 Great Tips For Improving Your Web Typography
“Once a specialist occupation, the digital age has opened typography to computer users and web designers. When creating pages and laying out text with other content there are several guiding principles that designers should bear in mind.”

BloggersThe History of Web Design Blogs
“Although the article may seem rather subjective to you, we hope that it will give you at least some basic understanding of how it all started and evolved into its current state.”

Feature
Post

Category
Design

The Best Social Media Icons

Social Media has become the norm on websites and weblog, if you want more interaction, higher traffic and incoming links your website needs to be social media ready. And with that social media icons are indispensable.

I have listed twenty some top icons divided into two categories, a standard one with icons that will fit in most designs and an artistic category with icons that require a fitting design.

Standard uniform icons

Social Media Network Icons

62 unique icons of 32 by 32 and 16 by 16 in PNG format. The set includes some nice ones of WordPress, Readernaut, Evernote and even Google Voice. Off course it also has the popular ones like Facebook, Stumble and Twitter. These icons go well on a light or dark background and are thus usable in majority of designs.

Get it!

Glossy Social Icons

A set of 20 glossy icons of 82 by 82. This sets comes as one PSD file which means you can
easily customize the icons for your own use. Not handy for people without Photoshop or Photoshop skills but a jewel for others.


Get it!

A Life in Pixels Social Icons

Icons

Sixteen 32 by 32 PNG icons monochromatic which goes with all possible colors in a design.

Get it!

Circular Social Media Icons

Icons


Get it!

Chrome Social Media Icon

Icons


Get it!

Elegant Themes Social Media Icon Set

Get it!

Polaroid Icon Set

Icons


Get it!

Social Media Mini Icon Pack

icons


Get it!

Whitewashed Star Patterned Icons Social Media Logos

Icons

Get it!

Simple Black Square Icons Social Media Logos

Icons


Get it!
Also in red

Matte White Square Icons Social Media Logos

Icons


Get it!
Also in grey

Artistic Icons

The following icons are more artsy/artistic and don’t fit just like that in any design. You’ll need to have a very basic design or build your design around the icons. But these icons are more eye catching and out there then icons that are more uniform.

Yellow Comment Bubbles Icons Social Media Logos

Icons

Get it!

Yellow Road Sign Icons Social Media Logos

Icons

Get it!

Socialize Icons

Icons

Get it!

Pagepeel Social Icon Set

Icons

Get it!

Heart Social Icons Set

Icons

Get it!

Handycons

Icons

Get it!

Handycons 2

Icons


Get it!

Hand Drawn Doodle Icon Set for Bloggers

icons

Get it!

Social Icons

Icons

Get it!

Web 2.0 Origami

Icons


Get it!

Feature
Post

Category
Design

15 Beautiful Examples Of Modern Tabbed Navigation

Remember when tabbed navigation was new? It was the hottest thing around, inspiring classic guides and tutorials such as A List Apart’s Sliding Doors and MaxDesign’s Listamatic. Here’s a screenshot of an early example of tabbed navigation:

Then, of course, jQuery came along and blew everyone out of the water.

Today, tabbed navigation has gotten more creative, more complex, and more beautiful. Here are 15 of my current favorites:


Chris Jennings


Nathan Borror


Expression Engine


Bert Timmermans


Foodtease


Delibar


Aviary


UCSAA


FidesVita


Veer


Andrew Sellick


Idea.org


Think Up


Yorkdale’s 2009 Back to School


Robert Alan

Do you use tabbed navigation?

Feature
Post

Category
Design

Review: BrowserSeal Cross-Browser Screenshot Tool

It’s the part of a web development project I like the least: the testing and retesting, tweaking and retweaking before going live. And yet it’s one of- if not the- most important things to do: making sure that every element on every page looks as correct as possible to as many visitors as possible.

Which is why I was excited to try out BrowserSeal for this review. The makers of BrowserSeal describe it as “the fastest multi browser website screenshot tool available today”. Now, these kinds of services have been around for a while now- BrowserCam, BrowserShots, and Adobe’s BrowserLab for example, are three that I’ve used previously- and I was expecting something similar to these.

From the get-go, though, BrowserSeal is different. It’s a stand-alone program, first of all- which means you download and install it on your PC (no Mac version right now). It’s important to know that it’s a Java program, so you’ll need to have Java installed- and the file you’re downloading is in .jar format.

Installation is pretty painless, although it does take some time. That’s because BrowserSeal has all the major browsers built-in – as you’ll see from this screenshot:

Now here’s the main window of BrowserSeal. Simply type in the URL to begin the test.

It took around 3-5 minutes total for BrowserSeal to open my website in each browser, and take a screenshot of it…

… after which it presents me with all of the screenshots all at once, in separate tabs.

And that, basically, is how BrowserSeal works. See why it’s so neat? No need to install all browsers and keep them running while you test and tweak- the program does it for you automatically. At a glance, I can tell if my site looks awful in IE6, if something’s off in Opera, and so on. It also handles pages with vertical and horizontal scrollbars well, supports authentication and screenshot delay (for example, if you need give that Flash slideshow time to load).

The application is not perfect- I wish the interface design was slicker, smoother and more user-friendly. I also got a few “Time Out” errors, with no specific explanation for the timeouts. Oh, and of course- no Mac version.

The bottom line, though, is that BrowserSeal does what it says: it takes screenshots of your website on multiple browsers, and does this fast. And when you’re chasing a deadline, speed is good.

*Update: I forgot to mention that BrowserSeal also has a BrowserSeal.Robot version, which features a command-line interface and automatic batch mode multiple URL processing. Which translates into even more speed for you. Here’s a screenshot of it in action (learn more here):

BrowserSeal .Robot in action

Disclosure: We were provided a copy of BrowserSeal to use for review purposes. Standard version is $49, .Robot version is $199, and there’s also a trial version available.

Feature
Post

Category
Code

CSS Breadcrumbs In 5 Minutes

Breadcrumbs, which always make me think of Hansel & Gretel using them to find their way back home, are a useful addition to any website, especially ones with levels and sub-levels of content. Not so long ago, I posted about adding breadcrumbs to your WordPress blog, and today I want to talk about the styling of breadcrumbs with CSS. It’s incredibly easy, and I’ve included the files for download at the end of this post.

Here’s a screenshot of how I want my breadcrumbs to look:

I’m going to show you how to do this quickly and painlessly. Now, the best coding for breadcrumbs is also the simplest: use an unordered list, like so:

<ul id="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Major Page</a></li>
<li><a href="#">Sub Page</a></li>
<li>Current Page</li>
</ul>

Unstyled, this looks like this:

The magic snippets are:

ul, li { list-style-type:none; padding:0; margin:0; }

This gets rid of padding and margin, and removes any default bullets- basically resetting your list, giving you a clean slate to work with.

#breadcrumbs { border-bottom:1px solid #ccc; background-color:#fff; line-height: 20px; overflow:auto; font-size:11px; font-weight:bold; }

This creates a light gray border at the bottom, sets the height, and the font details.

#breadcrumbs li { float:left; padding-left:8px; }

Here, you’re floating each list element, so that they line up, like so:

Now the fun part:

#breadcrumbs li a { padding:0 24px 2px 0; background:transparent url(blue-arrow.png) no-repeat right center;}
#breadcrumbs li a:link, #breadcrumbs li a:visited { text-decoration:none; color:#003366; }
#breadcrumbs li a:hover, #breadcrumbs li a:focus { text-decoration:underline; color:#0099CC; }
#breadcrumbs li {color:#FF9900;}

The arrow graphic is presented as a background image- the rest of the styles are link styles, as well as the color orange (#FF9900) for the non-linked text (i.e. the Current Page). And voila:

Yes, it’s that easy. Play around with different images and colors and borders to find a style to best fit the rest of your site. You can also download the files (png and html) I used here to use and/or refer to.

That was less than 5 minutes, wasn’t it?

Feature
Post

Category
Design Focus

Friday Focus 05/14/10: Icon Parade

This week’s Friday Focus will tackle websites for a designer’s best friend: icons. Icon sites have been around for the longest time but we’re seeing a lot of sites pushing the envelope in interface innovation, both with their offerings and the website designs they’re found in. The latest trend so far? Websites created for a single icon set—now that’s a great way to promote work.

Designs of the Week

iconSweets

Excellent one page site with the letterpressed look. I wish the bottom gray area had its text a little more readable.

Goo-EE Icon Set

I really like how wide and open this design is. And custom typefaces are more rampant than ever.

Pictos

A subtle noise effect in Photoshop is popular for a textured effect. So is uppercase text—note the letter spacing for readability.

Glyphish

Even more subtle noise texture here, combined with a touch of woodgrain for extra elegance. I feel the text on the left sidebar is a little cramped compared to the amount of whitespace in the header. And the icon preview, which occupies a large amount of real estate, could be clickable.

Helveticons

Love the folded paper effect combined with a bit of blueprint. I don’t need to tell you how strong the grid is on this layout and the excellent Swiss design sensibilities at play here.

Android Icons

I’m enjoying the hand-drawn, torn effects from top to bottom. Even the arrows in the Services area aren’t overlooked. And scribbled down Android robots—what could be more fun than that?

We Love Icons

Sometimes a narrow layout just works better. Excellent integration of all the navigation tools from the search to the pagination. If the icons won’t make you lick your screen, the wooden panel probably will.

IconDock

Lots of content on the front page compared to the other sites listed here, but it’s not busy at all. Of course the drag-and-drop feature on this site is one of the best interface goodies out there.

Icon Drawer

I like how as you scroll down, it’s one major area, then two, then three.

Iconlicious

Really simple but it’s the details (typography, color, boxes) that stay out of the way that make the design work.

Icon Eden

There’s something compelling about the choice of fonts on this site but I have to say that the bottom half isn’t so refined. The blog post titles could use bullet icons and the sitemap seems to need a bit of serifs.

IconShoppe

We always enjoy Dan Cederholm and his impeccable work as we’ve featured at least one other iteration of this site’s design before. The current one? It just feels so harmonious even with various splashes of color from the different icon sets. I also appreciate a site that lets you scroll, scroll, scroll.

Feed Icons

I feel saddened by the ad placement here. Ads can look beautiful if you can help it, but here they just stick awkwardly out of place.

IconBuffet

I just have to include this site on the list, because no matter how long this design has been around, it still feels current.

Social Media Weekly

DesignCreate Seamless Web Background Textures in Minutes
“Ever wondered how some web designers come up with such great background textures? It’s actually way easier than you might think.”

CSSSexy Interactions with CSS Transitions
“With all browsers except for IE being slated to have Transitions support in the coming months, more and more web designers are turning to this powerful technique as a means to enhance their website’s user experience.”

OptimizationOptimizing Your Website For Speed
“In the world of the Internet, you have mere seconds to capture a visitor’s interest before they leave and find your competitors. Can you afford to have them leave just because of your websites speed?”