Drupal is an excellent choice for a content management system (CMS). However, many people only see it as a simple CMS, a site to build a landing page or two. But Drupal is much more than that. Not only is Drupal easy to theme, it’s got a wide range of built in functionality and a large community powering the popular CMS.

One of the great things about Drupal is that you can build almost any sort of site that you can imagine, with the help of a couple modules. Want to go beyond the basics of a simple CMS? Drupal has an excellent API that allows you to extent nearly any aspect of the software. In fact, many people have started to talk about using Drupal as a framework, as it’s robust, well written, handles lots of traffic, and has a large and helpful community.

So, if you’re thinking about building your next big site, here are a few ways that you can take existing modules and turn a project quickly, without needing to make any custom modules.

A quick note: I don’t think it’s a great idea to make exact clones of existing sites and slap a new name on them. Clones hardly become as popular as the original site. This article is merely to show the power of Drupal and what can be done with limited time and no development budget.

1. Digg Clone

There’s plenty of Digg clone software out there, but it’s pretty simple to make a site that allows users to submit links to content, vote, comment and moderate the submitted links. It’s even easier when that functionality is all wrapped up into a single module. Drigg creates an identical voting site that allows users to add web links, vote on them, share stories, and many more features.

2. Blog

This is one of the most obvious and common uses for Drupal, but that doesn’t mean it’s not important. Drupal comes primed for blogging straight out of the box, and there are many modules available that can enhance the commenting and overall blogging functionality.

3. News Portal

For those of you wanting a site that can showcase lots of information like Yahoo! or some of the other news portals, Drupal has you covered. Thanks to an excellent module called Views and some custom categories, you can quickly create many different types of content and display them in different ways on the homepage. Views is an indispensable module for a Drupal site. It’s a rare occasion that I’m not using the module on a site that I’m developing.

4. Robust user site

Here is where I think Drupal shines brighter than most (if not all) content management systems. Drupal has an excellent user management system, user profiles and even OpenID right out of the box. It also has modules that can connect to Twitter, Facebook, and it’s easy to connect to other authentication gateways with the use of custom modules.

Drupal also has a stellar module called Organic Groups that allows users to “organize” themselves into groups. Each group can have it’s own homepage, blocks, themes, taxonomy and more.

5. Awareness site

If you’re wanting to build a site specifically for a cause or organization, Drupal makes that easy as well. Aside from the Organic Groups plugin and other community-friendly features, there’s a donation module that accepts payments from Paypal, and shows the donating users on a donation page.

CiviCRM (demo) is a constituent relationship management solution module that was specifically created for advocacy and non-profit groups. Over 5,000 organizations use CiviCRM, and it’s well-supported and has many sub-modules for more specific advocacy needs.

Another great Drupal module for developing an awareness site is the Connect module. Connect allows you to easily create petitions, emails or fax campaigns.

6. Twitter Clone

Yeah, yeah… the world doesn’t need another Twitter clone, right? Well, I tend to disagree. The concept of sites and communities built around short, cross-platform messaging systems are a phenomena that just aren’t going away any time soon. With Drupal, it could be just as easy. Drupal’s Microblog module copies most of the features of Twitter. Micro-messaging, following users and public timelines.

7. File Storage Site

File storage sites like Drop.io or Box.net could be created with Drupal and the help of a module like Media Mover. Media Mover allows you to take uploaded files and copy them over to Amazon S3, the highly-scalable data storage system.

8. Flickr Clone

Photo sites like Flickr and Photobucket could also be created with the Image module and Views. The Image module gives users the ability to upload images, and then creates thumbnails and galleries from the uploads. Users could also comment on the photos using the built-in commenting functionality.

9. Delicious Clone

It turns out that making a bookmarking site like Delicious is fairly trivial in Drupal. There are several options for modules that give users the ability to post bookmarks to their Drupal account.

10. YouTube Clone

If you’re wanting to build a video sharing site like YouTube, Drupal has some modules that can greatly help with that. FlashVideo adds functionality to convert uploaded files to flash, and then moves them over to Amazon S3 if desired. FlashVideo also provides the ability to embed the videos, just like the big boys.

11. Amazon Clone

Trying to recreate the powerhouse’s ecommerce dominance is a tall order, but if any CMS is capable of it, Drupal is. Drupal has a few stellar ecommerce modules like Ecommerce and Ubercart. Both of these modules have an extensive feature list that make it easier to create an ecommerce powerhouse.

12. Tumblr Clone

Creating a social aggregation site with Drupal is easy enough with the excellent Activity Stream module. Activity Steam allows you to pull in user’s activity on social sites like Facebook, Twitter, YouTube, Qik, StumbleUpon and many others.

13. Blogger Clone

If you’re wanting to start a blog host like Blogger or Wordpress.com, Drupal is easily equipped to do that. Drupal has a blog module that comes shipped with the package, and it allows every site member the ability to have a blog.

14. Blog network

Blog networks like Performancing and WiseBread rely on Drupal to power their networks. This requires the use of the built-in blog module. Member’s blog posts all end up on the homepage of the site by default, and you could modify how the member’s blogs looked with the help of the Views module.

15. News Aggregator

I built the LifeRemix network site with Drupal and a single module to aggregate all of our blogger’s posts. The site updates itself without any monitoring from me.

16. Friendfeed

By utilizing the excellent Activity Stream module, it would be quite easy to build a FriendFeed clone. As Drupal already comes shipped with an awesome set of user and profile modules, a quick Friendfeed clone could be made in a matter of hours, depending on your design skills.

Use your imagination! These are by no means the only uses for the popular CMS. I’d love to hear more examples of sites built with Drupal, or possible sites that I’ve left off the list.

Signup forms have long irked the casual visitor. During the process of discovery, nobody wants to stop and fill out details before they can “unlock” the rest of the site’s potential. As web users become more and more fickle, signup forms are becoming an increasingly large barrier that repels many prospective visitors from great sites.

Fortunately there’s a new signup system in town that is making it much easier for the visitor to interact with the site and it increases signups. I give you: Lazy Registration.

Lazy Registration

Helping the web visitor only helps your site. One great trend that we’re starting to see in web development that helps visitors is “lazy” registration. Lazy registration is a process that allows the prospective user to test out many of the core features, save her sessions and data, and then when she’s ready to sign up everything is ported to her “new” account. Lazy registration is a way to allow users to try the site out before they sign up, no strings attached. Really clever sites have even found a way to bypass the signup form altogether. They slowly ask for data along the visitor’s path of discovery, and pretty soon she’s a member of the site, without having to fill out a form!

The Old System

So let’s contrast the lazy registration system with the crufty old signup forms most sites use today. Using the traditional method, users have to fill out a form (most of the time with too many fields), check their email, verify their email address, and only then are they allowed to start using the web site. The process creates a wall between the visitor and the user. You’re either in or you’re out, as the movies say.

Contrast the antiquated signup form method with lazy registration. Lazy registration almost always bypasses the traditional signup form and instead takes the data in other methods, without making the user fill out a long, unwieldy form. Lazy registration removes the barrier of entry into the site, as registered and non-registered are able to do the same things.

Increasing Engagement and Trust

Think about what kind of engagement sites would get if the user could get his hands dirty playing with the site’s features, and then later ask for his registration details? Or even better, the user just provides information sporadically, and the smart registration system figures out how to keep him into the system.

Also, when a site has a registration wall that the user can’t see over, it creates a level of distrust. How do you know that it’s worth your time to sign up? What is it like? What will they do with my data?

If the site allows users to easily start using the site, the trust barrier instantly topples. People will more than likely sign up for a product or site that they trust, and a great way to add trust is to drop a cumbersome registration barrier.

Great Examples of Registration Systems

Some sites have already implemented systems like this, and have definitely increased engagement. Here are 12 awesome examples of innovative registration systems that are leading the way in terms of usability for the visitor.

1. StackOverflow

StackOverflow is bar-none the best question/answer site for web developers. What’s amazing about StackOverflow is that new visitors are able to answer a question right away, without having to deal with a pesky signup form. StackOverflow relies on the community to report spam or irrelevant questions. Engagment = +1.

2. Magdex

The makers of the Magdex (used by The Guardian, The Times & about 150 other sites worldwide) have actually shared a video on how they used lazy registration in their job boards. Essentially, whenever a user fills out a job application, they take the information and create an account with it when the user clicks a checkbox that says “save my data”. All of the data is there in the first place, it only makes sense to store it without requesting the user to fill out a redundant form.

3. Picnik

Picnik is a wonderful online image editor that requires no registration to start using their editing tools. It’s only at the very end of the editing process is the user asked to save his edited picture by creating an account. It’s brilliant, and Picnik gives compelling reasons why the user should save the picture which undoubtedly increases signups.

4. Netvibes

Netvibes has long since been the pioneer in allowing people to try their product before registering. You can create a start page, and your information is saved in a session until you register. The Netvibes mindset is that if you keep exploring the product, you’ll eventually find value and want to register with the site.

5. Picamatic

While Picamatic might not be the most well-known site in the world, it is an excellent and simple image hosting site that allows you to upload your images without having to create an account. You can even opt to have your persistent image link emailed to you, but you never register for an account. It’s a simple and non-intrusive way to quickly share images.

6. Blummy

Blummy is another dead-simple application that allows you to make a quick bookmarklet to your favorite web services, consolidating them into one bookmark. While it isn’t the most complicated application, Blummy does a great job of not asking for user information when it doesn’t need it. You can always sign up for an account, but most people don’t need that kind of “commitment” from a bookmark manager, and Blummy has recognized that.

7. Kayak

Kayak is one of the cleanest lazy registration systems around. When you search for vacation, car or flight prices, it saves your data and always keeps your recent searches on the right-side of the page, until you login or register.

8. Drop.io

My favorite file sharing site is Drop.io because of the clean interface and because I never have to register to use the full features of the site. In fact, they really don’t even have a user registration system until you decide to pay for an extended feature set (that most normal users wouldn’t need). The fact that Drop.io gets out of the way and lets users user their product unhindered only increases their brand and encourages referrals.

9. Doodle

Doodle is easily the best way to schedule an event with a bunch of people. It kind of fuses a poll with a calendar application to allow prospective event attenders to pick the best dates/times for them to attend. Then it smartly decides the best time to host the event, based on the polling. But the best part about Doodle is that you don’t have to register, even to administer the polling results. Another great example of unfettered access for the user.

10. Fusecal

And last, but certainly not least, is Fusecal. You can find, add, update, modify calendars and export them to your calendar system of choice, all without having to register. The site keeps you coming back because it gives so much away. Once you create an account, your session data is automagically ported into your account.

Other Registration Resources

If you’re wanting to see a real example of an ajax cart that utilizes the lazy registration system, Ajax Patterns has created a demo shopping cart that stores data without users creating an account. It’s a great way to look under the hood to see what kind of resources it takes to start user data in sessions with ajax.

If you’re wanting more information about how to create better webforms, we highly recommend Luke Wrobleski’s book Web Form Design: Filling in the Blanks. The book goes into much detail about how to get the most out of signup forms, and other best practices.

Google Web Toolkit is a monumental project for Java developers. Java is a language that isn’t usually associated with web development. PHP, Ruby, Python and others are typically seen as the languages of choice when building web applications. At least until recently. Google’s steady development and improvement of the GWT is a major step towards bridging the gap between ajax-driven web applications and Java. And it works well.

GWT: Three Years in the Making

Google Web Toolkit was released in 2006 at the Java One conference, and since then has shaken both the Java world and web development worlds. GWT is an open source Java development framework that essentially allows Java developers to quickly build JavaScript apps in Java. Essentially, GWT makes developing Ajax applications much easier. No more stressing over browser differences and other quirks that developers have to deal with. These quirks are compounded when you’re trying to wield AJAX applications. Just like the GWT official description states, developers spend 90% of their time working around these browser-specific issues.

So now that Google Web Toolkit has hit it’s stride with the latest release of 1.5, it might be time for you to check out GWT as a platform for your next rich Internet application. Here’s a roundup of resources that will help you get on your way to quickly developing in the GWT environment.

Official Google Web Toolkit Resources

GWT Blog
The latest news and updates about GWT as provided by the Google team.

Official Google Web Toolkit Discussion Group
If you’re wanting to find answers to specific GWT questions, this should be your first stop. It’s a fairly large community, and the questions are monitored by the GWT team.

GWT Product Overview
Learn how the toolkit works, the development workflow and the features of the toolkit.

GWT Quick Start
Ready to try your hand at a quick GWT application? Here’s a guide from the official documentation on starting the GWT application environment and creating your first demo app.

GWT API Reference
Roll under the Google Web Toolkit hood. Functions and calls galore.

GWT Showcase of Features
Google provides a demo application that allows you to play with GWT functionality and look at the source code so you can implement the features in your own app. Quite handy for learning the basics.

Official GWT Tutorials

Photo by Alain Bachellier.

Google offers (at the time of this writing) 4 tutorials related to GWT development.

DOM Events, Memory Leaks, and You
How GWT prevents Ajax memory leaks in their applications.

Security for GWT Applications
Different attacks your application might expect, and how to combat them.

Using GWT for JSON Mashups
Different ways to interoperate JSON data to build mashups and other JSON services.

Put Your GWT Application on Facebook
A few easy steps and your GWT app is now interfacing with Facebook.

Google Web Toolkit Books

Google Web Toolkit: Taking the Pain Out of Ajax

Google Web Toolkit Applications

Pro Web 2.0 Application Development with GWT (Expert’s Voice in Web Development)

GWT in Action: Easy Ajax with the Google Web Toolkit

Google Web Toolkit Solutions: More Cool & Useful Stuff

Accelerated GWT: Building Enterprise Google Web Toolkit Applications

GWT in Practice

Google™ Web Toolkit Solutions (Digital Short Cut): Cool & Useful Stuff

Google Web Toolkit Tools

Google Web Toolkit Hacks
A large collection of Ajax applets, games, plugins and widgets for use in blogs, CMS, and more.

GWT Components
Collection of components that add extra functionality to GWT like drag-n-drop, as well as interfacing with existing Javascript libraries.

GWT Component Library
Autocompletion, rounded corners, Scriptaculous integration, and more.

GWT Widget Library
An entire library of widgets to use with the Google Web Toolkit platform.

IDE Plugins

Photo by Nano Taboada.

Already using an IDE for development? Here are a list of plugins for working with GWT.

GWT Designer
Plugin for the IDE Eclipse.

GWT4NB
A Netbeans plugin on web applications.

GWT-Java
Another Eclipse plugin for GWT.

GWT Resources and Reference

Stack Overflow: GWT Tags
Stackoverflow is an amazing resource for developers, and many questions about GWT have already been asked. If not, there’s a huge community to help with you find your answer.

gwt site
A collection of GWT links, libraries and resources.

GWT Blog
The most frequently updated of the GWT blogs.

An Unofficial GWT Blog
Blog written by some of the GWT engineers.

GWT Articles

Photo by Thomas Hawk.

Odds are there are plenty of people smarter than us writing about GWT. (A quick Google search confirms this.)Learn from other people smarter than us with these articles on GWT.

Ajax for Java developers: Exploring the Google Web Toolkit
An extensive article from the IBM developerWorks showcasing some sample code that can be used with GWT.
http://ajaxworld.com/node/609633

Supercharge your Ajax development with Google Web Toolkit (GWT)
A quick overview on how the toolkit can help with your application development.

Hands-On Google Web Toolkit
An excellent 5-part tutorial on how to create a Flickr photo album mashup.

Working with the Google Web Toolkit
Another 5-part intro intro with many code examples and applications.

Online Sample Applications built with GWT
An extensive list of applications built with the toolkit. Lots of functionality is explored in these applications.

Developing Web 2.0 Apps with the Google Web Toolkit
A nice, comprehensive tutorial on how to build Ajax apps without tearing your hair out. From the article:

Ajax development hurts, and is not recommended without a bottle of analgesics by your side. Luckily for us there are tools that can make developing Web 2.0 apps a breeze.

Chords of Dissension

Photo by k is for kristina.

No resource list should be complete without a few chords of dissonance. Here are a few of the naysayers of the Google Web Toolkit framework.

Why Google Web Toolkit Rots Your Brain
Ryan Doherty goes into extensive detail as to why he thinks GWT isn’t all that fantastic. He believes that the toolkit is too bloated, doesn’t handle browser sniffing correctly, and many other details. His follow up to the post is a tad more forgiving.

Why I Dumped GWT
Pieter goes into details as to why he doesn’t develop with the Google Web Toolkit after one and a half years with the toolkit. He goes over reasons like SEO, Adsense customization, and others.

Social media websites have made a huge splash on the Internet as we know it. No longer do editors dictate what is news, and what is important. The power belongs to the masses on social news sites, which is a huge reason for their traction and loyal users.

It’s no surprise that developing a niche social media site is a popular job request for web developers. When I first learned about brand new social site for financial news, ideas, and tips Tip’d, I was immediately impressed with the clean, sophisticated design and impressive functionality. Yet what was truly amazing about Tip’d was how fast the site was assembled by it’s rockstar development team.

Quick Turnarounds

Most developers know that sites involving social media features are hard to do right. Features like voting, comments, account creation and moderation take a long time to get right. The Tip’d team bypassed a lot of that coding and used a CMS specifically for social news sites, Social Web CMS, which had many of the features that they needed right out of the box.

Here’s an interview with the Tip’d team of Andy Hagans, Chris Pearson and Jimmy (”Jimbeaux”) Atkins.

Planning: Interview with Andy Hagans, Tip’d Founder

WJ: What sparked the idea behind Tipd?

AH: A couple weeks ago, I was reviewing all of the ‘niche social media sites’ (Ballhype for sports, Lipstick for celeb news, etc). I simply couldn’t believe (2 years after social news hit it big) that there still wasn’t a financial social news site with some real presence. So I ran the idea by Jimbo, and that night, around 2 AM, we got the first (very ugly) version of the site up and running.

WJ: What were planning meetings like to get everyone together and organized? Just email, or did you use something like Basecamp to get organized?

AH: Email, Basecamp, and IM, depending on what needed communicated. We work virtually as we all live in different areas.

WJ: Do you have any goals or expectations of the site? Big future plans?

AH: Goals- We want to have 2,000 members by the time we move out of beta in early December. Long term, we want to be THE place people set as their homepage for financial news. We want to have 50,000 members and get 5 million pageviews per month. I think it’s do-able–not because I’m a genius or anything, but because our team is so good at what they do, and because so many bloggers and finance junkies have been craving a more social place to find and comment on financial content.

Development: Interview with Jimmy Atkinson, Tip’d Developer

WJ: What was the total time taken to get the site from concept to launch? Can you kind of give a general idea of the breakdown of time spent?

JA: Andy and I first discussed the concept of Tip’d on September 24. We purchased the domain name and began working on the site that day. Our beta launch occurred just three weeks later, on October 14. Here’s how we got there: The first steps we took was to install Pligg to our server on day 1, September 24. After a few days of customizing it as best we could, we decided on October 1 to contact Ash, the a former Pligg developer and current lead developer on the SWCMS team, to see if he would be interested in working with us. He began working with us later that day, and this gave our development productivity a much needed shot in the arm. It was on this day that we made the change from Pligg to SWCMS. Since then, we’ve constantly been tweaking and adding new features on an almost daily basis. This will likely continue for a few more weeks until we reach a stable point.

WJ: Caching/Performance- What hardware do you guys use to host the site?

JA: Currently the site is hosted on a Media Temple grid server. We use a caching plugin designed specifically for Pligg/SWCMS.

WJ: I hear that you guys had a doozy of a time hacking the socialwebcms. Can you give us a little background about this? What were you changing from the source code?

JA: As I explained in the first question, we did spend a few days configuring (I’m not sure I would quite call it hacking) Pligg after we first installed it on September 24. A few days later, we reached the point where we decided we needed some outside expert help on the system. That is when we decided to reach out to Ash. And since October 1, Ash has been handling all of the really complex stuff (i.e. adding new features and working out bugs).

WJ: I noticed that you guys use a redirect script to track outgoing clicks, as opposed to just linking to the story normally. Are you going to be providing any statistics or analytics in the future?

JA: We are not planning on providing any stats at this point; although this could be something we’ll discuss in the future.

WJ: What tools did you guys use to speed up your development process? Any IDE’s, collaboration tools, etc.?

JA: No IDEs, but we did use NotePad, PsPad, WinMerge, and Windows Grep in development. We love using 37signals’ Basecamp as our collaboration tool.

WJ: 6. Any tips for developers wanting to hack a CMS and create a social news site?

JA: If you’re going to hack a CMS, don’t hesitate to talk to the developer if possible. Doing this has worked out great for us so far. If you’re going to create a social news site, remember that the most important thing is the community. You can have a fantastic CMS with all sorts of great features, but if no one is using it, what’s the use? The community is the most important aspect of any good social news site. The fact that we recognized this before we began work on the project is one of the main reasons for the success of Tip’d so far.

Design: Interview with Chris Pearson, Designer for Tip’d

WJ: Designing a community site is much, much different than designing a website like a blog. Can you explain some of the ways that the Tip’d design is different than a typical blog or website?

CP: Sites like Tip’d exist primarily to steer people in the direction of articles that they want to read, and because of this, the design/usability goal is simply to get people the information they need as clearly and as quickly as possible. In environments like this, users tend to process information in visual chunks, and this means that certain details (headlines, submission data, usernames, links, etc.) must be both obvious and quickly discernable.

On a community site like Tip’d, it’s extremely important to give users the context they need to process information and then to get the hell out of their way. Unlike a blog, people tend to use community sites over and over again in search of new and rewarding content, and this places an even higher premium on usability (which is really the hallmark of any great community site).

WJ: The Tip’d’s theme is very nice, clean, and reeks of Chris Pearson’s excellent design work Did you guys create a theme from scratch, or did you just modify an existing socialwebcms theme?

CP: In order to reduce development time, we simply used the HTML from an existing SocialWebCMS template to build the site. In truth, the existing code was so bad that we had to make lots of little customizations, but when you look at the big picture, most of the HTML is stuff that was there before I got my hands dirty with the styles.

The CSS is a completely different story, though. I rewrote everything from the ground-up and basically breathed new life into an HTML structure that makes me want to pull out my hair. As a result, I don’t really know what to call this… I guess it’s sort of a hybrid re-design, and even though we started with an existing template, the final product looks, feels, and behaves differently than the original.

WJ: What features in the design did you try to do differently than other major social news sites, like Digg or Reddit?

CP: Not that it’s all that “different” from other major social news sites, but with Tip’d, I simply tried to guide users directly to the meat of the site. In this case, the “meat” consists of three main things—article headlines, article summaries, and vote buttons. These are the three most important elements users rely on when scanning, and I wanted to make sure that they didn’t have to put forth any effort whatsoever to locate them.

To accomplish this, I employed some very basic typographical conventions in combination with a limited color scheme to emphasize both important elements and visual breaks. The end result is a layout that is almost devoid of visual fluff, and this makes scanning a more intuitive, less confusing process. The idea is that you want to avoid forcing users to learn a proprietary navigation system or new usability conventions when they visit your site—just give ‘em the keys and let ‘em drive.

WJ: Were there any restrictions designing the theme of a CMS as opposed to a blog or a regular website?

CP: CMS platforms like Pligg exist because they run a very particular type of Website, and naturally, there are little nuances that are unique to each type of site. Aside from that, though, most sites share common elements that constitute a vast majority of both the design and functionality. For instance, the primary content column of Tip’d really isn’t that much different from a stream of blog posts; it’s just been adapted to display the specific blurbs and meta data that are important to this type of site.

WJ: Do you have any tips/advice for anyone wanting to design a killer social news site?

CP: The biggest thing to watch for with any type of site built on a CMS is the core template system that you use as a foundation. Before you get started, make sure you’ve got a sensible markup structure and a stylesheet setup that isn’t overly complicated—it’ll make your life MUCH easier as you trudge through the intricacies of the design process!

Find this post helpful? Support it by saving it at Delicious.

With Thanksgiving only a couple days away, it’s appropriate to look back on the things that we appreciate best about our jobs. Let’s face it: Web Developers have the best jobs around, right? We’re incredibly lucky to have the professions we do.

Here are 15 things that we all should be thankful for. These are the technologies that we couldn’t live without, or that have previously paved the way and allowed us to be web developers.

1. Mosaic

Graphic designers everywhere should reserve a day in November to give thanks to the software that’s enabled our careers. Without Mosaic’s picture support, the Internet doesn’t need good design. The 1993 launch of this web browsing software opened up a brand new world to web developers and web browsers alike.

Photo by Marc_Smith.

2. Firefox

Firefox ended the long tyranny of IE oppression for experienced web users. The extension-enabled browser has forced IE to play catch up and improve their lukewarm browser, which hadn’t seen an update for 5 years.

Aside from pushing a standards-based browsing initiative, the ability to extend Firefox has made the developers life much easier. There are oodles of extensions that are nearly essential to the developer.

Photo by psd.

3. Browsershots.org

Every web developer knows the awful pain that is making designs constant across different browsers. Thanks to Browsershots, we can easily see a screenshot of any page across a multitude of different browsers, showing potential problems that might arise across different browsers, and giving new reason to invent curses for legacy IE versions.

4. Firebug

Thanks to Firefox, we now have a browser that is also an important tool for the web developer. Firebug is a must-have extension for the web developer. With this nifty little extension you can view just about any aspect of the web page, visible or behind the scenes, and modify it real-time. It’s incredibly useful for designers and programmers alike.

Photo by zeroK.

5. Google Code

If you’re trying to find a useful snippet of code, there’s no place better than Google Code. Not only is it a great place to search for entire libraries, you can find useful bits of code that might be hard to find otherwise. If you’re wanting to house a project, you’ll be especially thankful for G Code, as it’s a free and easy way to have a working community for a project without hosting costs.

Also, with Google Code you can use Google’s bandwidth for the javascript libraries included in your projects. Using jQuery? Just call Google’s hosted version and be on your way. No need to slow your own server down with Google’s gracious offer.

6. Frameworks

Frameworks have given developers a major reason to be thankful. Gone are the days of building websites around repetitive code. Using frameworks like Rails, Django or CakePHP on websites needing database interaction and user permissions takes a major burden off of the programmer. They can spend less time on common, tedious code and more on the interesting and unique. It’s a powerful paradigm shift in programming.

Here are some of the major frameworks used today, in no particular order.

• Ruby on Rails (Ruby)
• CakePHP (PHP)
• Django (Python)
• Zend (PHP)
• CodeIgnitor (PHP)
• Symfony (PHP)

Photo by Nathan Borror.

7. Open Source projects

Mad props should be bestowed upon the Open Source Initiative and all the software it promotes. It is a fact that we wouldn’t have a) the Internet or b) much of the technology that it runs on without open source projects. Most of the biggest and best projects are open sourced software, and they all run on the basis that the people building and contributing to them are doing it for free. Granted, these folks might make a hefty profit on consulting services and other opportunities around the projects, they’re still opening up the code base for developers to modify and improve, as they see fit.

Open Source is the Internet’s best contribution yet. The free exchange of ideas encouraged by Open Source is the best thing that’s happened to the web, especially for web developers. Show of hands: Who hasn’t ever used open source software to build a site or project? I’m guessing none of us. That is plenty to be thankful for.

Photo by Josh Parrish.

8. Creative Commons

On the heels of Open Source is Creative Commons licensing. You can modify, reuse and redistribute Creative Commons-licensed material, in exchange for (at the most) attribution. Ultimately, Creative Commons protects the original work, but allows people to modify and reuse at will.

Creative Commons is a very big benefit for designers and bloggers alike. The pictures seen in posts on this blog? Creative Commons licensed. There is absolutely nothing better for content producers than free media that can be reused and remixed.

9. Paypal

Love ‘em or hate ‘em, Paypal and other payment gateways have made collecting payments a much friendlier task on the web. Sure, there are horror stories and bad experiences using their product, but Paypal has revolutionized the way money is exchanged on the Internet. They have an easy to use API, and if you’re wanting something even simpler, they offer a painless web interface to receive money from.

If Paypal has done you wrong in the past and you’re looking for a better alternative to send and receive money, you might check out a CNN article on five Paypal alternatives. Definitely worth the read.

10. Javascript Libraries

Javascript is always one of the most popular aspects of web development, and a big reason for that is the advent of Javascript libraries. Javascript libraries, (like frameworks), have eliminated the much of the need for custom Javascript programming. Aside from the fact that the core files in the Javascript libraries do a great many functions themselves, the ability to use custom plugins gives even more functionality to the library.

Not having to do custom Javascript programming for specific effects has given me a much greater respect for Javascript libs this holiday season. Here are some of the more popular Javascript libraries:

• jQuery
• Dojo
• Scriptaculous
• Prototype
• MooTools
• MochiKit

11. Amazon S3 and EC2

Amazon’s on demand services S3 and EC2 have developer’s lives a lot simpler. Not only do they not have to worry about traffic influxes and scaling headaches, they don’t have to spend buckets of cash on reserve servers. The pay-what-you-use business model to web hosting and file serving is a godsend for developers.

The launch of these “cloud” services has also spawn the change of many hosts to move to the pay-as-you-go model. Amazon’s innovation has helped spurn change for the betterment of web development.

Photo by Nicholas T.

12. Anti-RSI software

There is no friend like RSI-preventing software. RSI (or Repetitive Strain Injury) is typically in the form of carpal tunnel for web developers and typing zealots. Because the typical developer or designer spends at least 8 hours sitting in front of a computer screen all day, there is a likelyhood that RSI will creep into the wrists, hands, forearms, elbows, shoulders, back… and the list can go on and on.

Thanks goodness for RSI software that forces you to take breaks on a regular basis. Many times I’ll find myself fixated at the computer until I finish xyz, and consequently it’s over 50 minutes before I’ve gotten out of my chair away from the computer. With RSI software, you can have a reminder flash on your computer at set intervals that ensures you’re moving your limbs and warding off RSI. If you’re on a Mac, try AntiRSI, Windows and Linux users can try Workrave.

Photo by Dave Parker.

13. Advanced Text Editors

Advanced text editors have sped up the development time by adding a myriad of useful features that can benefit nearly anyone who writes in code, blogger to advanced programmer. Whether you prefer Textmate, Emacs, Vim or some other editor, text editors can save plenty of time on the development cycle.

Photo by D’Arcy Norman.

14. CSS

CSS seems to be one of those technologies that is taken for granted. Can anyone remember what the pre-CSS days were like? It wasn’t pretty. Modifying a web layout’s design meant going through each page and changing each inline style. Ugh. Thanks to the wonderment that is CSS, we can make one change in a single file, and Poof!, it’s reflected across the entire site. Simple, clean, and much less involved.

There are times when I’m not that thankful for CSS (see: Internet Explorer), but for the most part it’s a technology that we’re much better off having.

CSS editor CSSEdit.

15. Coffee

Ah, coffee. I don’t think I’m in the minority when I say that coffee is a staple to my day. Web workers in general crave the bean, and without it the day doesn’t go as well. There’s something about the smell of a fresh pot of coffee that makes the senses come alive. Many a cup of joe has sustained me through long nights of writing and coding deadlines. I doubt I would have made many of those deadlines without the aide of our caffeinated friend.

Photo by Chris Owens.

Bonus: Laptops

Laptops can completely change the effectiveness of a developer. Instead of being confined to the same room, chair, keyboard and monitor each day, the laptop allows for a much-needed change. While the screen real estate may not be as big as your office setup, it offers one thing the other can’t: Variety. Laptops enable you to work from anywhere.

I’ve found that since switching to a laptop, my RSI (see #12) has essentially gone away. I’m constantly working in different chairs and have my hands resting in different positions, which in turn is continuously working different muscle groups. I’m extra thankful for laptops.

Photo by Johan Larsson.

How About You?

What are you thankful for? What should be included on this list? Reply below!

Widgets are excellent for adding unique functionality to a web site. However, as the we becomes more “widgetized”, it’s starting to add strain on the web browsing experience for our users. The more widgets we add to our web pages, the worse it makes the web.

Widget Blindness

Banner blindness was discovered in the late nineties, and it shocked many people that users weren’t actually focusing on ads when a website was teeming with ad banners. Yet 10 years later, the problem isn’t so much with banners (that problem will always be around), but with web designers and site owners going out of control with adding widgets to their pages.

A widget for everything

These days you can find a widget for just about anything. Literally. It seems that every community website or interactive website has a goal to create widgets for their users, and users in turn place all of them on their blogs or personal websites.

Photo by manoellemos

In theory, widgets are awesome additions to websites. They add relevant information and showcase what the community or blog is doing. It’s not like a stale ‘ol banner asking you to hit a target for a prize. However, the problem doesn’t lie with the widget makers. The problem lies with website owners who try to add too many to their layouts. Just like banner blindness, users are starting to not notice widgets. And even worse: Widget blindness might even turn visitors away from your site.

6 Reasons widgets are worse than banners

The negative effects of adding too many widgets to your layouts and pages can have an even worse effect than banners for multiple reason.

1. Slow loading pages

Typically banners are a fraction of the size of widgets. Depending on the type of banner you’re using, they’re typically smaller than the average widget. usually jpegs or animated gifs, and some like adsense use small javascript. Widgets on the other hand typically use larger javascript files or flash.

2. It only takes one bad widget…

While widgets will slow down the rendering of the page in the browser, a slow or unresponsive widget can drastically increase the page load time, if it even finishes loading at all. Popular blog TechCrunch had to remove widgets due to them crashing the site.

It only takes one unresponsive widget to bring a site to its knees. The more widgets you have on your site, the more places you rely on to keep your site’s speed and response times fast.

3. Widgets take attention away from the most important part: Content

You need to ask yourself a fundamental question: Why are users coming to your Web site? Is it because of the widgets in your sidebar? Hopefully, users are coming to your site because of the stellar content.

Content is still king on the web. However, when page has 28 widgets in the layout all begging for your attention, it takes the user’s focus away from the hard-worked content and places it on content that someone else has created.

4. They take up ad space

Most site owners want a part of their layout to be designated for ads. If you’re trying to sell ads, the best spots are above the fold. If you’ve got widgets everywhere, you’re taking up crucial ad space. There is only so much space in your layout that you can devote to things other than your content. Adding a bunch of widgets to your pages only makes less space for the ads that make you money.

5. They can frustrate users

If the page doesn’t load quickly (or at all), and is crowded with cheesy widgets, the user will be prone to leave the site quickly. Unappealing site designs add to the user experience, and bad experiences can turn users away. Overcrowding a site with widgets is an easy way to add to a negative site experience for a visitor.

6. Does anyone still look at them?!

Now that the initial hype of widgets has died down, there seems to be less interest in people looking at widgets. When MyBlogLog rose to popularity and were acquired by Yahoo!, it seemed that people couldn’t get enough of widgets. Now that nearly every online community or similar website offers widgets to their users, the space has become crowded and widgets are everywhere. People have developed widget blindness.

Note: The excitement certainly hasn’t died down for widget makers and web developers. Just the people use them on the web sites.

Widget self-control

There is a temptation to add every widget you come across to your website. There are plenty of great widgets out there, and the possibilities are endless.

So how do we know how many widgets are too many? That’s ultimately a personal decision, based on the type of site you have and how your audience interacts with your site. Widgets can be great compliments to your site. There is one hard-and-fast rule that I use when deciding whether or not to add or remove a widget on any of my sites.

As long as the widget is improving the user’s experience, keep it. Otherwise dump any widgets that don’t achieve that goal.

This method usually separates the separates the wheat from the chaff. The widgets have to “prove themselves” before they can stay on the site.

You can be very critical when deciding what stays and goes. Always remove the widget if you’re wavering between keeping or dropping it. If it’s not instantly clear as to why it’s still on your website, the widget probably isn’t worth it.

Every web developer has their own favorite platform to create in. Some prefer Linux, while other prefer Windows or Mac. One thing is for certain though: each platform has a passionate rabid community behind it. Those web developers who prefer the Mac are no different, and for good reason:

The Mac boasts some excellent software for web development.

Here are some essential bits of software that every Mac-owning web developer should have in their toolkits. From text editors to command line tools, here is the best Cupertino has to offer to aid the web developer, soup to nuts.

Text Editors

When it comes to text editors, there are quite a few choices to choose from. Some are free, some are paid, but like any bit of software it all comes down to the developer’s preference. The same is true between the two most popular text editors for the Mac, Textmate and BBEdit.

Textmate

Textmate is one of the most popular of the text editors. It has a bevy of features, like file tabbing for having multiple files open in a project, works with xcode, and integrates with FTP clients. It also comes equipped with “bundles” that allows you to have multiple different configurable languages. (This post is actually being written and published in Textmate.)

Textmate isn’t free, however, and costs $59. Check out Textmate’s manual to get a better feel for how Textmate works.

BBEdit

BBEdit is another full-featured text editor that is very similar to Textmate in terms of features. The BBEdit product page even has a section for web developers to see the benefits of BBEdit. For those Mac users who think BBEdit is better than Textmate, it’s usually because BBEdit is a Cocoa application, and TextMate is a Unix application. Without getting into the nitty-gritty between the two editors, the main differences between the two applications are 1) look-and-feel and 2) price. BBEdit is a steep $125, more than double the price of TextMate.

Test Environments

It’s important to have a good test environment on the mac, especially if you’re programming with a dynamic language. Since the majority web development is done in PHP or Rails, it’s best to set up a test environment with the likes of Apache and MySQL. There is one tool that makes this all very easy.

MAMP

MAMP is a quick and painless way to set up Macintosh, Apache, MySQL and PHP in the same environment. What used to be a tedious process now literally takes just a few seconds between downloading MAMP and installing the software. Instantly you’ve got a fully-functional web testing environment for your PHP applications. It also comes locked and loaded with PHP extensions like Zend, and you can specify different cacheing types like APC, eAccelerator or XCache.

You can apparently use MAMP to run a Rails environment as well.

Update: Thanks to some savvy commenters, I’m adding Aptana to the list. Aptana is a programming environment for languages like PHP, Rails, Java, Ajax, Javascript and others. The software also comes with optional plugins like Adobe AIR and an iPhone environment. The community edition is 100% Open Source, and they have a Pro Edition with paid support and a few extra features.

FTP

Cyberduck

Photo by ClausM

Cyberduck is an incredibly user friendly FTP client that’s provided for free and licensed under GPL. It can be used in many different settings, like FTP, SFTP, WebDAV and Amazon S3 straight out of the box. Cyberduck also integrates seamlessly with essential Mac functionality, like Bonjour, iDisk, Growl, AppleScript, Spotlight and even Quick Look to instantly see the guts of the file with a tap of the spacebar.

My favorite aspect of Cyberduck (aside from the free-ness), is the fact that it integrates easily with many text editors like Textmate. As an added bonus, Cyberduck also allows you to use Quicksilver to access your FTP bookmarks. Very handy.

Transmit

If Cyberduck is a cadillac of FTP clients, than Panic’s Transmit is a Rolls-Royce. It offers almost all of the same functionality as Cyberduck, but adds a little more robustness for advanced user. For example, you can edit any remote file (even a picture or graphic) in any software using Transmit.

The only downside to Transmit is that it costs $29.95, whereas Cyberduck is free.

Code Editors

Text editors offer a simple, no-frills approach to programmers. However, sometimes developers prefer to use software that has more of an interface than the traditional text editor. Here are some code editors that allow you to do things with more of a visual approach and allow for greater functionality.

cssedit

cssedit is a CSS editor with a fantastic user interface. It has the look and feel of a Mac application, which makes the experience of editing CSS much more enjoyable. It has nice built in features like being able to extract stylesheets and learn from other other websites, an inline visual editor, and you can even edit css inside of ajax.

cssedit will cost you almost $43, but if you’re a sucker for beautiful interfaces, this software might be exactly what you’re looking for.

Coda

If you’re building a site from scratch, it’s nice to have a program like Coda where you can manage all the files and FTP functionality from within one program. Built by Panic, the same guys who develop Transmit, Coda is a one-stop solution for web developer. Within code you can manage files, ftp to a server, preview the code, use a css editor (like cssedit), and even use Terminal all from within Coda. And if that weren’t enough, they’ve thrown in a copy of The Programmer’s Desk Reference from within the software.

Changes

Changes is a nifty application that lets you visually browse changes to your code base. Instead of having to use a subversion to manage your code base (though Changes works with svn and other repository software), you can use Changes. This is great for sites that have multiple developers working on them and want to make sure their code is up to date. You can use your favorite text editor like Textmate or BBEdit to edit files.

Collaboration

Any web developer knows that collaboration is a huge part of web development.From asking questions in forums or IRC channels, to working in a code base that is shared among other developers, programmers need fraternization with other developers.

Colloquy

IRC is an old skool method of chatting online, and has been the method of choice for programmers and developers to communicate. Many major projects like Wordpress use IRC to provide support for their open source projects.

Colloquy is an extremely helpful IRC client for the Mac. It’s open source, allows for plugins and styles, and even has an iphone interface. Robust, elegant and powerful.

SubEthaEdit

SubEthaEdit is a collaborative text editor for the Mac. You can use the software as a text editor, note-taker and for co-writing text. It integrates with Bonjour, iChat and Mail, but isn’t limited to those integrations. SubEthaEdit also has a fairly robust editing syntax for many different languages. So really, this is a swiss-army tool for developers that work in a collaborative environment that share code often. It’s not free (around $54), but SubEthaEdit could be well worth the price given its usefulness.

Skype

Photo by Huasonic.

While it’s not typically thought of as a web developer’s tool, Skype can be a lifesaver. Not only can it save lots of coin on your cellphone bill, Skype adds a lot of features that a traditional phone can’t touch. For example, Skype has a pane for text messaging and sharing files. The ability to share snippets of code while you’re talking is essential. While the video feature might not be that useful to web developers (who’d want to see my ugly mug?!), some might find it useful as well.

Oh, and did I mention it was free?

Command Line

The command line is not for the faint of heart. It can be incredibly useful, and incredibly frustrating for new users. So much functionality and power in one little window, yet the learning curve can be steep.

Terminal

The built-in Terminal is a great place to start when working with the command line. There’s a great guide to learning Terminal, but essentially Terminal is a bare-bones tool that allows you to do just about… anything. I’d recommend you read the tutorial for a better explanation (as it’s outside the scope of this article). I’d also recommend snagging the Quicksilver plugin for Terminal to help speed your usage.

iTerm

If you’re looking for a way to ease the pain of using the command line and Terminal, try iTerm. iTerm is a “Terminal emulation program” that adds a bit more functionality and user friendliness to Terminal. It offers features like multiple tabs, bonjour support, bookmarks, and much more.

Database Managment

Managing databases can be a pickle for the casual developer. If you’re just wanting a simple install of Drupal, creating a database is a necessary evil. It’s nice to have software that can add an interface that doesn’t require you to know SQL to help with functions like creating a database, adding users, or creating tables and rows.

phpMyAdmin

Photo by jeromejtk

phpMyAdmin is the kindly old grandfather of database management scripts. Not necessarily hip to an attractive user interface, phpMyAdmin still has the skills to pay the bills. You can manage your databases locally using this stable script. It ships with MAMP, so installation is a breeze. If you’re not MAMP, then you’ll have to configure PHP to run on your Mac, which is a much more involved process. Still, phpMyAdmin is a tried and tested solution for managing databases with a UI.

CocoaMySQL

CocalMySQL is a database tool developed specifically for Mac with Cocoa. It has the elegant look and feel of a true Mac application, and is laden with features. CocoaMySQL is much easier than phpMyAdmin on almost all fronts; it’s easier to setup, has a much more intuitive interface, and runs more like a Mac program. The software is also licensed under the free GPL license.

Image Editing

Photo editing and design creation may not be at the core of a web developer’s responsibility, but there are some instances where it’s handy to have a solid photo editor that is nearly comparable to Photoshop, but won’t break the bank.

Gimp

Gimp used with Aperture

Gimp is the closest thing to Photoshop that Mac users can get with a $0 price tag. It has many features and has the ability to be extended with Gimp plugins.

Gimp is an application application for developing for web development. While it isn’t quite as useful and feature-rich as Photoshop, it comes pretty close. Note: You’ll need Apple’s X11 environment installed.

Seashore

Seashore is equivalent of a little brother to Gimp. While it’s code base is based off of Gimp, it doesn’t aim to be as robust or functional. Seashore is meant to meet the needs of “normal” computer users, not to be a replacement for a professional image editor. The software is only a tiny 5.4 MB in size and unlike Gimp doesn’t require having X11 installed. If your image-editing needs are modest, try Seashore.

Pixelmator

Pixelmator is a beautiful image editing program for the mac. It’s incredibly intuitive and useful, but doesn’t have all the features of a Gimp or Photoshop. It’s got all the layer editing and retouching tools that we’ve grown to love, and the interface is gorgeous. The only downside to Pixelmator is the $59 price tag, which is still a drop in the bucket compared to Photoshop.

Miscellaneous

Here’s a collection of tools that every web developer should have on their Mac, but don’t necessarily fit into one category. These programs are just as useful as the other applications in the list, just harder to categorize.

Firefox

Firefox 3 on a Mac. Photo by hawkfb

Unless you’ve been living under a rock for the last few years, you’ve probably heard of Firefox. Not only is Firefox an excellent web browser, the real power of the browser lies in the ability to add extensions that aid in the web development process. Here are a few must-haves for developers and programmers.

• Firebug - A swiss army extension that provides diagnostics of all kinds on web pages, javascript, css and more.
• Web Developer - Another swiss-army extension for developers. You can do just about anything with this tool, like disable scripts and styles, find broken links and images, check Whois of websites, display form information, and so much more.
• YSlow - this is a Fiebug extension (yes, an extension of an extension), YSlow adds diagnostics that show what’s slowing your webpage down. It provides a “report card” of sorts to help you work on issues that slow your site down.
• Greasemonkey - Greasemonkey is a gateway extension of sorts. With Greasemonkey, you can add literally just about any sort of functionality via userscripts.

There are any number of web developer extensions that one could add to Firefox. It’s just a matter of finding the right one.

Quicksilver

Quicksilver photo by bwana.

Quicksilver is a launcher tool that does so much more for developers. If you’re wanting to save time and keyboard strokes, consider giving Quicksilver reign over your computer. For more information as to what Quicksilver is, check out Lifehacker’s introduction to the Mac launcher.

The real beauty of Quicksilver lies in the countless plugins with software that many web developers already use.

Xcode

Photo by barcoder96

Xcode is Apple’s development package. This gi-normous 900mb download adds tons upon tons of system mojo that you’ll probably have to eventually install to your system that you’ll probably use down the line. Many serious development software like SVN and the like use dependancies that Xcode takes care of. Xcode is free for the taking.

Isolator

While Isolator isn’t a crucial application for developers, it’s quite handy for blocking out distractions while you’re getting work done. Isolator is a free program that blocks out everything but the single application you’re working on. This gives a distraction-free environment for writing, programming, or whatever else needs your attention. Just tap the keyboard command cmd + shift + I (or use the toolbar menu) to start/stop Isolator.

Spaces

Spaces is a handy built-in application for Leopard users. It allows you to set up virtual “spaces” for different screens on your computer. This is helpful for developers because you can separate your work flow into different panes. For example, you could have ftp and terminal open in one space, Textmate in another, Firefox in the third and Gimp or Photoshop in the fourth. It’s easy to toggle between the spaces using the command ctrl + arrow, or you can use ctrl + the number of the space you want to switch to.

Nobody likes to toggle through tons of different applications at a time. Spaces effectively clears up much of your work area, allowing you to segment your applications into whichever configuration you’re most comfortable with.

While more and more people are using faster Internet connections, there seems to be less emphasis by web developers on optimizing pages for faster load times. We’re seeing more and more widgets and javascript-heavy pages that take a long time to load, even on fast Internet connections. It’s a breath of fresh air when a website loads quickly and cleanly.

Web developers sometimes neglect some simple rules when it comes to developing a fast website, which really hurts the user’s experience. Fast page load times are crucial for keeping users happy. This is especially true for ecommerce websites. Here are a few reasons why quickly loading websites are critical to the web developer.

• Faster pages make a better user experience. The user notices page load times, either consciously or subconsciously. Load times are a lot like the kicker on the football team: they’re only noticed when they’re not good. There’s something refreshing about a snappy-loading web page.
• It’s possible that page load times are directly associated with search engine rankings. Google has made it clear that they’re paying attention to load times when they’re indexing Adwords pages, so it wouldn’t be too much of a stretch to assume that page load times might be a factor in how sites are ranked.
• Slow pages lose money - Sites lose money when users click away from a slow-loading website. It’s estimated that the ecommerce industry loses $1.1 to $1.3 billion yearly on slow load times.

Slow load times can be a killer to even the best web design. Here are some great methods and tools to ensure your site is running quickly and smoothly.

1. A basic site analyzer

There are a lot of these tools, but I’ve always used the Web Page Analyzer to check for general errors and seeing the “health” of my site in terms of load times. The analyzer shows tons of information about how many scripts you have, total file size, and many other things that factor into load time.

2. Pingdom

Pingdom is a nifty site that allows you to check for broken images and paths, as well as loading time for all of your images and scripts. Broken paths and images can be a major load time killer. For example, I ran my blog LifeDev through the pingdom checker, and found that I had 1 script and 2 images that weren’t loading because of bad paths. Once I fixed the errors, it split my load time in half

.

Another nifty feature of Pingdom is being able to see the lengths of the different stages of loading. Pingdom shows a different color for each stage of the loading process, like initial connection, first byte downloaded and last byte downloaded, so you can see where the image or script is taking the longest to load.

3. Host files locally

While this may take a bit more bandwidth for your servers, you’ll gain a lot of speed by not having to go out into the web to find the image. Instead of using services like Flickr to host your images, put them on your own server and save the time spent for the browser to travel to flickr.com and download the image. Local files almost always load faster than external files

.

4. Use image heights and widths

Here’s a sample of a correctly tagged image with height and width tags:

<img src="images/mine.gif" border="0" alt="my image" width=”125″ height=”250″ />

Adding width and height tags to images can make a huge difference when the web browser loads the page. If the browser knows the width and height, it can go right on past the image and let it load in the background while it renders the rest of the page. If an image doesn’t have these tags, the browser has to wait until the image loads before it can go on loading the rest of the page.

5. Reduce widgets

It’s easy to forget that even though widgets are cool and add some functionality to a website, the benefits of having a slew of them on a page hardly outweigh the slow load times. If the site is down that is serving the widgets, it could keep your site from loading properly as well.

6. Use static caching

Caching is a There are many different solutions for caching. Essentially, caching is this: Taking pages written in dynamic languages like php and turning the result into a static web page. Web servers are incredibly good at serving static files. By turning your dynamic pages into static pages, you’ll reduce load on your server and greatly improve page loading times. Here are some great primers on caching for a few popular languages:

• PHP
• Rails
• Perl
• Java
• ASP

7. Accelerators

Dynamic languages typically have scripts that can help accelerate how fast the language is run. If you develop in PHP these scripts might help: , APC, Zend cache, Xcache

.

8. Firebug

Firebug is a Firefox extension that offers tons of reporting tools for a Web site, right inside the browser frame. One of the main features of Firebug is the ability to analyze all the aspects of a given web page. It’s especially helpful for figuring out slow load times and

9. CSS shrinker

Smaller external scripts like javascript and CSS can make a big difference in load times. Try using online services like CSS clean to take your CSS source and strip things like

• white spaces
• line breaks
• remove unnecessary charachters
• and many more things, depending on the level of compression that you’ll want.

10. Server from multiple domains

If you’re serving a lot of web objects on a page, it might be a good idea to utilize multiple domains for serving the content, like server.example.com, server2.example.com, etc. You can only have a limited number of connections sent to the web browser at a time. By using multiple domains (even if they’re using the same IP address) you can download objects at the same time, where on a single server you’d have to load one at a time.

11. Cut back on cookies

Much like in our diets, cookies should be cut back from if the goal is to have healthy page load times for our websites. Extra cookies that are set on the user’s browser adds time to each page load. Make sure that you’re only using the smallest possible number of cookies, and also try optimizing cookie usage

.

12. Use a different domain for cookie-free resources

In an attempt to optimize cookie usage, try using a different domain for resources that don’t need to have cookies set. This is helpful when you’re using top-level cookies (yoursite.com). Everything downloaded from yoursite.com will have a cookie attached to it. Sites can get around this by using a completely different domain to store the resources that don’t need a cookie attached to them. For example, Yahoo! uses the domain yimg.com to store their resources that don’t need a cookie attached to them.

13. Shrink your javascript

Much like you should reduce your CSS sizes (#9), it’s a very good idea to compress your javascript files as well. Using services like Dean Edward’s packer can strip out unwanted line breaks, characters, and other redundant code in your javascript files.

14. Combine javascript files

As a general rule, downloading lots of small scripts takes longer than downloading one large script. If you can combine your javascripts into one large file, you’ll see faster download times. The easiest way to do this (without using programming knowledge) is to physically open your javascript files and copy and paste all of the javascript into one file. However, this isn’t always the easiest option, so here are a few resources that show how you can merge javascript files dynamically.

• PHP
• Smarty (PHP templating language)
• Rails
• ASP

15. Use a content delivery network

If you’re starting to get some serious international traffic to your website, it might be a good idea to start thinking about using a Content Delivery Network (CDN). CDNs allow you to use servers from around the world, depending on where the user is from. For example, it takes a lot longer for a user from Australia to download a webpage served from New York than it does a user from within the USA. Content delivery networks would recognize that the user was from Australia and would serve the page from a server within Australia, or close nearby. This results in much faster page load times.

Conclusions

Sometimes it’s easy to get carried away adding extra functionality when building a website. As a general rule of thumb with web development, less is more. Having less images, external scripts and widgets to load mean that your pages will load faster. A few small changes can make a major difference to page load times for the user. Remember: Quickly loading pages mean happy users.

Other Page Load Resources

• Best practices for speeding up a website by Yahoo!
• Optimizing page load times
• Serving Javascript Fast

It appears that the glory days of the homepage are almost over. Jakob Nielsen has been finding that web users are becoming more and more fickle. Instead of going to the homepage and nosing around the site using categories and site searches, people are instead using Google to find everything and landing on a very specific page. Web users have learned how to master the interactive environment of the web, and are becoming very good at finding what they want. So instead of doing this:

1. Go to site homepage
2. Use navigation or site search to find product
3. Go to product page

Users have completely cut out the need for going to the homepage by doing this:

1. Search for a product/page on Google
2. Go directly to that page

Are you designing for the shift?

This poses an interesting problem for the web developer. How do we get smart, Internet users to go to our homepages when they don’t necessarily need to?

In order to start sending people back to the homepages of our Web sites, a few things have to happen. For starters, we need to ultimately gain the web users’ trust so that they’ll want to see more of the site. Once they trust the Web site to give them excellent, informative information without plastering them with popups and ads, then we encourage them to complete a goal for the page they’re on.

Every Page Needs a Goal

Each second that that the browser spends on your web page is precious. Every page on your Web site should work towards an actionable goal. A goal could be:

• Buying a product
• Signing up for an rss or email subscription
• Signing up for a free account
  
• Clicking on a link to get them closer to one of the above actions
• … and many more

Each page should at least move the user closer to completing that goal. If you can funnel your users into a goal quickly and easily, they’ll also benefit because they’ve found useful information quickly. Completing goals is a good indicator that the user has built trust with your site

Keep ‘em Coming Back

Now that you’ve built the user’s trust, there’s a great chance that the user will want to check out other pages on your site, like the homepage. In order to keep them coming back to the usually neglected homepage, you’ll essentially need to do three things:

1. Make the visit worthwhile
2. Capture their attention
3. Keep their trust

Here are a few ways to make sure the user is stimulated and feels comfortable on the homepage of your site.

1. Offer quality content on the homepage

Content is King. A savvy web user is going to see pretty quickly through snake oil copy, or even content that’s fluffy and doesn’t add value to the site. Use high-quality content that is updated frequently to get people back to the homepage. The user has to find value in what you’re providing before it makes a decision to become a loyal visitor.

2. Get to the point

More often than not, homepages aren’t always explicit in what the site is about. Don’t waste your visitor’s time by adding Web users have little patience for content that doesn’t help them. Meandering, long-winded content on the homepage is a sure way to turn away site visitors. Nielsen thinks most web developers haven’t figured this out yet.

3. Use Promotions

Sites like Threadless use promotions every week that keep people coming back every week to check out the new winning T-Shirt designs. It also helps that the contest results are changed every Monday, so users know to come back every week on Monday.

Promotions done at timed intervals are great for keeping interest and excitement centered not only on your site and products, but also on the homepage as well. However, it’s crucial that the promotions aren’t cheesy or un-authentic. Authenticity is key when it comes to keeping the trust of the web user. Be sure to stay away from gimmicky promotions, and only do promotions that add value to the user’s experience.

4. Weigh every link in the navigation

Navigation systems are crucial to allowing the user to quicky find more information, once on the homepage. Giving the users lots of links to different parts of the website only clouds the mission of the smart web user. Make sure your navigation system is simple, but has enough information.

5. Make sure the design doesn’t break

This falls in the “duh!” category, but I’ve created many sites that IE wasn’t compatible with. Compatability between browsers is a tricky thing to master, but if you can ensure that if your site looks great in modern browsers (IE 6 and above, Firefox, Safari), you’ll do fine. You can check browser compatibility for free using Browsershots.org.

6. Don’t go overboard with Ads

There’s nothing wrong with ads. Ads help alleviate some of the costs associated with hosting and bandwidth. But sometimes web developers think it’s a great idea to litter web layouts with all sorts of ads. This strategy doesn’t pay off because it adds banner blindness and most importantly, it takes away from the user experience. If your ads aren’t helping the user in some way or are, even worse, trying to trick them, the user is as good as gone. It’s beter to err on the safe side and have less ads or none altogether.

7. Speed - Make sure the site is snappy

If your site takes a long time to load, a new visitor who has no loyalty to your site won’t hang around to wait for it. Odds are there are plenty of Web sites other than yours that can help the visitor, and they’re just a Google search away.

Use good practices for fast-loading page design, and check it with web page analyzers to ensure that the pages are loading as quickly as possible. If your site is heavy with css and javascript, you might try out this nifty script that combines your files and reduces load time drastically.

8. Keep the design clean and clutter-free

If you’ve ever stayed with a friend who’s house is really messy and cluttered, you’ll know what I’m talking about. It’s not fun. Cluttered, unorganized surroundings are stressful and make us anxious. This holds true in the web world as well.

Keeping your page design clutter-free is a great way to help the user find the content quicker. If your site’s design is clean and relaxing, the user will be more inclined to stay longer.

9. Give them just enough information

Only show the user what they need to know, and nothing more. This is one of the most difficult aspects of development and design, but also one of the most important. Giving visitors too little information confuses them, so they leave. Giving them too much information bores the visitor, and they leave. So it’s incredibly important to give them just enough information, and never more.

10. Checking validation helps

It’s always, always a good idea to check your html and css validation. Sometimes bad validation means that there are errors in your code that might not be affecting the page when you view it, but it might affect visitors on different browsers and computer platforms. Many web developers overlook the validation stage, but stopping validation errors early on mean that your site design will stay consistent and unbroken.

11. Create awesome product pages

If you can create compelling, beautiful product pages that a web searcher really appreciates, there’s a much higher chance he’ll want to check out other parts of your site. Also, you’ll most likely have to attract the visitors to individual pages (like product pages or blog posts) before they’ll give your homepage a chance.

12. Keep their trust

Now that you’ve gotten the web surfer to your homepage and they trust you, don’t do anything to compromise that trust. The second that the visitor smells something fishy (lots of ads, tricky wording, etc.), she’s gone for good. Don’t compromise a valuable repeat visitor by adding unethical or questionable aspects to your Web site. These usually come in the form of ads designed to trick users into clicking on them. In the end, it’s not worth it to scare away potential repeat visitors and subscribers.