Lose weight, get organized, save money… millions of people make resolutions like these at the start of the new year. They’re hard to keep, but some of these same resolutions can improve your personal website or your web design work for clients.

Slim down. You’ve heard this one since you started designing websites years ago, but it still applies today. Your traget audience’s work and home computers may have super high-speed connections, but many mobile devices, like the iPhone, can be slowpokes. Sites often visited on-the-go need to keep the weight off.

Banish clutter. Many frequently updated sites are victims of “content creep.” Your once-minimal homepage suddenly has a news box, added by the PR department. A month later, there are some banner ads you never saw before. Then, some extra SEO terms appear. None of these are necessarily bad things, but with all this additional content, you need to reevaluate the design. See if you can rearrange these things on the page so as to maintain the integrity of the original design, or just redesign to accommodate the new features. Every feature on the page will be more valuable when it doesn’t have to compete with clutter.

Get a new job. Okay, maybe not a new job, but how about finding your niche? What can you do to stand out among all those other web designers? While working on your “usual” jobs, consider the parts you’re really good at and those you really love. Maybe it’s Flash character animations or e-commerce. Over time, build a portfolio that showcasing this specialty. You’ll make yourself more appealing to a specific types of clients, be able to charge more because of your expertise, and enjoy your work.

Be secure. If you haven’t backed up your site or all your great custom actions and plug-ins recently, do it now. Right now. Done? Good. Now, talk to your hosting company about other security measures, like ways to protect your site from hackers. This is particularly important (more…)

Most sites have at least one element, like a navigation feature, a header, or a simple piece of text, that appears on multiple pages. (I really worry about the sites that don’t.) Dreamweaver users can use templates and the library to store repeated elements, and if they do, they need only change the repeated item once, rather than many times on each individual page.

Dreamweaver’s library can store lots of design chunks, but it isn’t always the best solution for repeated elements.

Unfortunately, there are some drawbacks to this method. For starters, all of the library and template code ends up in every page that displays the item. Let’s say your site’s sidebar navigation is a library item. When you build a new page, you can simply insert that item into your design. It’s easy, but check out the page code. It’s long and bulky.

Also, when you change a library item, you have to reload every individual page that features the item. If you have a large site, this can take a long time.

Server-side includes (SSIs) serve the same purposes as library items, but without the drawbacks. Imagine again that your sidebar navigation is a repetitive element. The pages that feature the navigation would only need a line of code that calls or includes code from a separate file. All that’s required is one little line, and if you ever need to update the navigation, you can simply change and upload the include file. (more…)

Last week, we discussed the Diagnostics section of Google’s webmaster toolset. This week, it’s Statistics, where you’ll find lots of information about how your site is indexed and how it appears in Google’s search results.

The various categories and sub-categories of data are discussed below.

Top Search Queries

You can get some of this information no matter what package you use for web statistics, but there are are a few special tidbits available via Google’s tools.

You can see the top 20 searches that returned your site and compare those to the top 20 searches where the user actually clicked through to one of your pages. Are there differences? You can also see how your site ranked on those searches. If you’re seeing numbers higher than 10, you may want to spend some time tuning your site to those keywords.

You can also sort searches by time period, type (what engine was used - Google Directory, Google News, Google Images or good old fashioned Google Web Search), and location (are the search terms different in the US and Canada?). It can be helpful to see how many people found you through the Google Directory as opposed to the main search page.

Unfortunately, none of this tells you what terms return sites similar to yours but not your own.

What the Googlebot Sees

Getting into Google is all about how the Googlebot indexes your site. This page provides some insight that process.

Phrases: The Googlebot looks at the phrases associated with links to your site. This can affect your search results because Google assumes that the links will correctly define the content of your site. Unfortunately, you don’t have much control in this situation, since the links come from outside sites.

Keywords: The Googlebot also looks at the text on the pages, and you can see what search terms will produce high-ranking results. You have some control over these keywords, so make sure the ones you want associated with your site appear in the list. For example, (more…)

If you’ve been reading the blog lately, you’ve probably noticed that I’m on a bit of an “(insert Apple thing here) for Designers” kick. First it was Safari plug-ins, then Dashboard widgets, and now podcasts. The is because I’ve recently discovered that though I’m an early adopter, I rarely take full advantage of the features that come with my new gadgets and software. I bet some of you are the same way!

Podcasts for designers, direct to earbuds everywhere.

I’m like a grandma when it comes to podcasts, (though come to think of it, many grandmas are probably more podcast-savvy than I). I’ve had an iPod since the first generation of battery-eating bricks, but only recently have I started downloading these little audio and video shows. Once I started looking for them, I found many that are perfect for designers. Here are some of the standouts.

There are many podcasts that focus on technology and software, one of the best being Photoshop Killer Tips, hosted by Matt Kloskowski, who also happens to be an instructor at Sessions! Photoshop Killer Tips is updated five days a week, so there’s no shortage of useful information here. But if you need even more Adobe tips in video podcast format, check out Terry White’s Adobe Creative Suite Video Podcast. There’s a new episode at least once a week, and (more…)

So, after reading Part 1 of this series, you signed up for Google’s webmaster tools and added and verified some of your sites. Now what are you going to do? Well, why not start using the tools to understand and improve your Google page rank, and squash some bugs in the process?

Here’s what’s available via Google’s webmaster tools:

Overview –This is Google’s summary view of your site.

Diagnostics – These are the errors the Google robot discovered while crawling the site.

Statistics – This is how your site appears in the Google index, and it tells you which search terms will return your site.

Links – You can see the pages that link to yours and the sitelinks generate by Google.

Sitemaps – A sitemap is a list of all the pages on your site, and it’s useful if you have a deep site that cannot be easily indexed by Google’s robot.

Tools - You can use these to target your site geographically. You can also determine the crawl rate of your site and do other good things.

Using the Tools: The Overview and Diagnostics Sections

Here you can see when the home page was last crawled and check the site’s status in Google. This is helpful when the client asks, “Is my site in Google?”. You can also find out what problems Google has when crawling the site; this is the meat of the Diagnostics section.

The Google robot crawls every link on your site and will let you know if it encounters any problems. The most common error messages and their meanings are discussed below.

HTTP Errors - Have you ever tried to visit a web page and instead received a message about an HTTP error? Well, that’s the outcome the Google robot encountered here. You’ll see (more…)

At the Future of Web Design conference in New York, Ryan Singer of 37 Signals and Jonathan Snook of snook.ca led interesting seminars on web application usability and Ajax design, respectively. These subjects are very much related, as Ajax is commonly used to create web applications and so can positively or negatively affect usability.

Ajax’s biggest benefit to the user is its speed. If well prepared, Ajax apps on a web page will move very fast, because only small amounts of data will update or refresh. The whole page need not reload. The speed makes these applications, in general, more interactive and engaging.

AjaxDaddy.com has a wide range of demos that are both fast and interactive.

However, the speed and the fact that changes often only occur in small areas of a web page can actually pose problems from a usability standpoint. Every morning, I visit washingtonpost.com and read the comics, which are posted in an Ajax-based tabbed list. When I’m done with the comics in the first tab, I move to the second. Sometimes, (more…)

When Mac OS X introduced the Dashboard, we were fascinated by the thousands of available widgets that display news, track stocks, watch the weather, find song lyrics, and so on. But eventually, you run out of words that must be translated to Dutch, and the Panda Cam gets old pretty fast.

Fortunately, your Dashboard can actually help you work, instead of just distracting you. You may have already checked out the Adobe Labs kuler widget, which features tons of user-submitted color palettes. I mentioned it in a post some time ago when it was pretty much one-of-a-kind. Today, there are many other color selection widgets, such Color Theory and ColorBurn. The former works in a manner very similar to Illustrator’s Live Color and helps you choose a color palette, while the latter delivers an inspirational new palette every day.

Color Theory by mudcube lets you choose a harmony type (split-complementary, for example) and build a color scheme.

Designers will appreciate the SeeSS widget by Guy D2, which serves as a great reference for a wide range of CSS properties. It’s a bit buggy but still very useful. I do hope we’ll see a revised version soon, as I like its simple interface. (more…)

I recently attended the Future of Web Design conference in New York, which featured speakers from many disciplines within the web design field. The most futuristic seminar by far was Jina Bolton’s about CSS3.

CSS2 (or 2.1 to be exact) is the version of CSS supported by current browsers, and it’s used by most of today’s designers. Despite some browser inconsistencies with CSS2 rendering, today’s designers benefit from it’s rich positioning features, along with the many design and formatting properties which were introduced in CSS1.

According to Jina, CSS3 will go much further with positioning, letting web designers work in a more flexible, print-like design environment. CSS3 is still in the development phase, so you can’t start testing new features in your favorite browsers just yet. However, css3.info has excellent previews of the new features.

Opacity, like many other new CSS3 features give the designer tons more control. That increased power will have to be used wisely, for it could lead to chaos. Regardless, it’s what most designers have been clamoring for and should be a huge leap forward for web design overall.

css3.info has some of the best previews of CSS3 features and easy to use code samples.

Here are a few of my favorite features, which will be explored in depth in future posts:

1) Multi-column layout. When I said print-like, I meant it. CSS3 includes a special module that allows you to place content in columns, (more…)

So, you’ve created a site for a client (or yourself), and the site is live on the internet. What do you do now? Well, if you want people to find your site, you submit it to Google. Then, you wait. Wouldn’t it be nice if there was a way to find out if your site was in Google and how it was showing up (other than running google searches obsessively)?

There is a way: Google’s webmaster tools. I learned about them when a client was having problems with Google; her site had been blocked for spreading malware (a long story for another post). While researching that problem, I discovered Google’s webmaster tools, a free service from Google that lets you track how Google sees and ranks your site.

In this post, I’ll show you how to sign up for Google’s webmaster tools and how to add sites to your dashboard. In future posts, we’ll discuss what you can do with the various tools.

Sign Up

To sign up for Google’s webmaster tools, go to this page, and log in using your Google Account name and password.

Add a Site

When you log in, you’ll see your dashboard. Once you’ve added sites, they’ll all be listed here. Let’s add a site now:

Type a url into the text box, and click the Add Site button. You should get some interesting information right away. (more…)

Much has already been written about the marketing of Radiohead’s new album, In Rainbows. Bypassing major labels and a fixed pricing scheme, Radiohead invites customers to purchase the album for whatever amount they like (including nothing). The music is purchased and downloaded via inrainbows.com, an e-commerce web site designed by Radiohead’s graphic design mastermind, Stanley Donwood. Just as Radiohead’s distribution scheme is a critique of capitalism and major record labels, the interface design of inrainbows.com is a critique of the rigorous usability guidelines that have become all but ubiquitous on the corporate web.

The traditional goal of an e-commerce site is to separate the customer from her money as quickly and painlessly as possible. Disorienting and thought-provoking interface design has no place in the checkout line of amazon.com. But what if you are a rich band like Radiohead, with little interest in money but a strong desire to tweak culture, provoke thought, and establish a meaningful relationship with your audience? What if you decide to spend the popularity you have earned on a kind of experimental art project? Suddenly e-commerce design becomes less a means of extracting money and more a means of disrupt the customer’s expectations.

Donwood’s design for inrainbows.com is so minimal it’s disorienting. The copy is cheeky and terse, dry and ironic.

inrainbows.com welcome text

Although the FAQ section addresses a number of logistical issues regarding product shipping, it never explains that the album can be had for free. Only when you arrive at the payment do you realize that something is amiss. (more…)