In a previous post, I wrote about 10 creative ways to use Drop.io. Drop.io is a free online file sharing/collaboration service.

One of the ideas was using Drop.io’s voicemail as a way to let visitors leave audio comments.

Audio Blog Comments—A New Idea?

Short answer, no.

The idea of audio comments isn’t new.

Paul Boag, of the excellent Boagworld, allows (or allowed–can’t seem to find it now) visitors to post audio comments. Paul also has posted audio responses to text comments on some of his posts (via AudioBoo).

This is logical because of the podcasts they publish. Audio comments could be used in future podcasts.

People could record a message to MP3 and then save it to their computer. Boagworld gave visitors an option to upload the saved MP3 file to their site right from the comments section.

This is a nice idea, but unless you’re really motivated, you’re probably not going to go through the hassle of doing all this just to leave a comment.

Easier Audio Comments By Phone With Drop.io

So far, I haven’t really found any sites implementing audio comments on their site besides Boagworld (though I’m almost certain to be proved wrong ;) ).

How could you make it easier for visitors to leave audio comments on your blog?

Every drop you create with Drop.io has its own phone number and extension.

The simplest idea would be to create a drop, then place the phone number and extension at the end of the post or right in the Leave a Comment section.

Visitors will find this to be fairly easy:

1. Simply dial the drop’s phone number from any phone
2. Type in the extension at the prompt
3. Start talking and hang up when finished

Since all comments are automatically converted to MP3 by Drop.io, a lot of comments could be left on a 100MB drop.

Site Admins

For site/blog admins, email alerts can be setup in Drop.io. When new audio comments are left, the admin knows within seconds.

1. The site admin can listen to the message
2. Copy the embed code for the MP3 from Drop.io
3. Create a new comment on the blog post
4. Paste the embed code into the comment

Using the embed code allows a player to be added right in the comment itself so others can listen to the comment right on your blog without the need to download the file or go to Drop.io to listen to it.

Another option could be to set Drop.io to tweet links to the audio comments to your Twitter account. Though this is automatic, so you wouldn’t have any control over the comments and couldn’t really moderate them.

See It in Action

How does it work? You can see hear it in action, by going down to the end of this post to the comments section and listening to my sample audio comment.

You can also try it out for yourself—Leave us an audio comment—call this blog post: (646) 495-9246 ex: 62621

Pros

• Setting up a new Drop.io account is a piece of cake and takes practically no time
• Simple to implement on your existing blog
• Dead-simple for visitors, which means they’re more likely to leave audio comments
• Most people have mobile phones with free long distance, so the call would cost nothing

Cons

• Only useful if most of your visitors are from the United States. The drop’s phone number is a New York number
• If the phone number or extension is mis-dialed, the comment will either be lost
• No option for the commenter to redo or delete an audio comment once they start
• More work for site admins since they will have to listen to each message and manually add the link to a comment
• No easy way for people to add a link to their site or email address in their audio comments

Actually, Drop.io has an API that could be used to automate a lot of these things. Maybe set up a button similar to a Google Voice call widget?

It would require more work for the site/blog owner to initially set this up. But it would also make it easier for people and easier for themselves in the long run.

Other Ways To Add Audio Comments to Your Blog

The Drop.io option is an easy way for people to record their audio comments even if they don’t have a mic handy.

Here are some other options for adding audio comments to your blog.

• Riffly–Free online service for adding audio comments to your blog. There’s also a Riffly WordPress plugin to make adding it to your blog even easier. There’s a Drupal plugin too.
• Wagwire–Paid voicemail service that can be used for audio comments and feedback. There’s a dialing widget available as well.

Pros

• Specifically designed for audio comments
• More automated that the Drop.io option
• Both of the above services offer either plugins or widgets, so adding them to your site is pretty hassle-free

Cons

• Visitors must have a microphone
• What if the service goes belly-up? Do you have the option to download the MP3s to your computer like you do with Drop.io.

Suggestions?

Have you implemented audio comments on your site, or do you know of sites that do?

Have a better solution for audio comments?

Tell us about it in the comments.

Better yet, leave us an audio comment—call this blog post: (646) 495-9246 ex: 62621

Note: This is a New York number. Long distance fees may apply.

Have fun!

Photo credits: Silver Microphone Near Laptop by Yevgen Timashov. Sound Waves Oscillating by clearviewstock. Stock photos from Shutterstock.

Somehow, Sumo Paint missed the list.

Sumo Paint is a great online graphics editor. I’ve been using it since version 1 and it just keeps getting better.

Sumo Paint is now in version 2 with some great new features, tools and a desktop app.

If you’ve never used Sumo Paint, it’s about the closest thing to an online app version of Photoshop. The tools, menus and some of the shortcuts all work pretty much like Photoshop.

Sumo Paint Desktop App

Now, if you sign up for a Pro account, you can download a desktop version of Sumo Paint.

The desktop version of Sumo Paint is an Air app that lets work locally without an internet connection. You can also save your work to your computer in Sumo Paint format.

Not bad for $19/year.

New Sumo Paint Filters

Besides some of Sumo Paint’s UI improvements, it’s also getting some brand new effects and filters.

New Sumo Paint version 2 filters:

• Kaleidoscope (filter)
• Triangular Patterns (filter)
• Wavelab (filter)
• Liquid Waves (filter)
• Spherical Mapping (filter)
• Camouflage (filter)
• and tons more filters

Sumo Paint Tutorials

If you want to get up to speed with Sumo Paint, check out some of the great Sumo Paint video tutorials on the Sumo Paint site.

These video tutorials show you how to use some of the new filters as well.

User Gallery

If you want to get an idea of what you can do with Sumo Paint, here’s just some of the great artwork that’s possible:

Aaro

Andreabianco

Tulikki

Livingyourlife

These are just some of the images you can make with Sumo Paint.

Sumo Paint User’s Gallery

Give It a Try

Sumo Paint is a powerful Photoshop-like online graphics app. If you haven’t tried out Sumo Paint, give it a try today and sign up for a Pro account.

Drop.io, an online file-sharing, storage and collaboration tool, is very flexible.

I’ve been using Drop.io for almost a year as a project site and repository for various projects. No doubt many of you are doing the same.

But what other ways can you make use of Drop.io?

Here are 10 creative ways to use Drop.io:

1. Memo pad when on the road
2. Record audio podcasts from anywhere
3. Let visitors add audio comments on your blog
4. Let users add files from your site
5. Create an online store
6. Store, send and share photos from your mobile device
7. Extra harddrive for a netbook or Linux system
8. Conference and symposium resources
9. View photo slideshows on your TV
10. Project Sites
11. Collect Design Inspiration
12. Backup Your Website and Blog (Updated 09/15/2009)

1. Memo Pad When on the Road

Great ideas can strike when you least expect them.

Question: What happens when you need to make a note for later and you’re driving or don’t have access to paper?

Answer: Leave yourself an audio message on your drop that can be easily retrieved from any computer.

How It Works

Each Drop.io drop comes with its very own voicemail number and extension.

1. Create a drop for your memos
2. Add your drop’s voicemail number and extension (found in the sidebar on your drop) to your cellphone
3. Call the drop’s number, enter your extension and leave yourself a message

All audio left through the drop’s voicemail number will be automatically converted to an MP3 and placed as a file in your drop.

To make this even easier, add your drop’s phone number, then add a pause (usually ‘p‘) and then enter the extension, followed by the # symbol.

Example:

600-600-6000 x 11111

would become:

6006006000p11111#

2. Record Audio Podcasts From Anywhere

You could also use this technique for making podcasts on the go from anywhere. Just call your voicemail, and talk away.

With a 100MB drop, you can record loads of audio in MP3 format (~400 mins of talk).

3. New Blog Commenting System

Want to set your blog apart? Instead of just providing visitors with text comments, give them the voicemail number of your drop and allow them to leave actual voice comments for you.

Approved comments could then be linked to from your drop and placed on your blog.

Audio comments might be fitting to use on multimedia sites, or blogs that accompany podcasts.

Radio stations or individual radio shows could let listeners phone in and record their song requests.

4. Let Users Add Files Right From Your Site

Drop.io also comes with a widget / code snippet (found under Add > More) that can be added to just about any site; allowing site visitors to upload files to your drop through your website.

This could be handy for people running a photo or music site. This could also be used to let clients add files to your drop without having to log into Drop.io.

How about teachers? Let your students upload their assignments/essays/homework via a website and the Drop.io widget.

There are lots of things this feature could be used for, so use your imagination.

5. Create an Online Store

Drop.io also contains PayWall–allowing you to charge people for access to your content.

This makes setting up an online store pretty easy.

Want to set up paid subscriptions for your podcast or blog? Want to sell a one-time item? All of this is simple with Drop.io.

6. Store, Send and Share Photos From Your Mobile Device

Since Drop.io gives each drop its own email address, you can send, store and share photos from a mobile device like your cellphone, iPhone, PDA or netbook.

Drop.io’s email system works similar to Posterous–attach images to an email, send it to your drop’s email address, and Drop.io pulls out the images and adds them to your drop.

Note: Any text that’s included in the email is added to each image as a comment.

Imagine working with a team–snap some pictures, email them to only one address (the drop’s), and everyone subscribed to your drop can view them in Drop.io–even Gary, who doesn’t have an iPhone yet.

7. Extra HardDrive For a Netbook or Linux

Even though most netbooks are coming with more generous harddrive space these days, having an extra bit of storage space never hurt anyone.

Drop.io has a Firefox extension that lets you add files and photos to your drop just by dragging them into your browser window.

Using this extension, it’s possible to save images and files directly to your drop without saving them to your computer first.

This would make adding files from any netbook simple as pie.

Drop.io FUSE

Drop.io FUSE is a project for mounting a drop as a usable drive space in Linux (or other UNIX-based OS).

It’s still in early development, but looks very promising.

8. Conference and Symposium Resources

This idea’s from the Drop.io API Google Group.

This can also be easily applied to conference/symposium material distribution, possibly using location. For example, a presenter can direct the audience to the app where they have full access to notes, media, etc. Additionally, the conference itself can have geo-fenced material for attendees.

Source:Drop.io API Google Group

9. View Photo Slideshows on TV

Drop.io handles viewing photos from within your drop decently enough. However, you can’t view your photos as a slideshow within Drop.io.

However, you can view your drop’s media fullscreen on your TV or monitor using Boxee and Dropboxee.

Boxee is, simply put, a media center–letting you hook your computer (Win/Mac/Linux/Apple TV) to your TV and watch video, music and photos.

Dropboxee is an application for Boxee that lets you link to your Drop.io drop. Dropboxee pulls in all your media from the drop and lets you view images full screen and run slideshows on your TV.

You can also listen to audio and view video that’s been added to the drop.

10. Project Sites

While using Drop.io as a project site is probably the purpose for which most people initially use Drop.io, I thought I’d touch on some of the benefits and clever things others are doing with it.

Using Drop.io as a project site, you can:

• Keep project files all in one place (no more searching emails for a specific file)
• Accessible from to all subscribers on any computer with internet access
• Ability to comment on individual files
• Less emails required for communication (alerts can be sent to everyone via email when files are added or commented on)
• Built-in text chat (instant team chat and file sharing) and presentation tools, as well as ability to use 3rd-party chat programs
• Receive faxes and conference calls

Here are some apps made using Drop.io and the Drop.io API:

Collab.io

Collab.io lets you create quick digital meeting rooms on the fly, using Drop.io.

Collab.io uses the Drop.io API to make creating meetings simple and painless.

USend.io

USend.io is a web app that offers a nearly effortless way to send and share files.

Just pick files on your computer, enter the email addresses of those you want to view the file, and click the Send it out! button.

11. Collect Design Inspiration

With Drop.io’s Firefox extension and other built-in features like dedicated drop email address, collecting design inspiration and snippets from the web or via your camera phone would be a piece of cake.

12. Backup Your Website and Blog

Updated (09/15/2009):
You can use Drop.io along with plugins to backup your self-hosted WordPress site or blog.

There are a few WordPress backup plugins that you can install on your site.

WP-DBManager and WordPress Backup let you set scheduled backups and have your database and theme, plugins and upload directories emailed to you at specific times.

Your theme, plugins and upload directories can get pretty big over time. Because of their size, this can pose problems for attaching these to emails, so you could use the email address for your drop instead, since there’s no size limit (except the size of the drop itself).

A 100MB drop wouldn’t hold too many backups, but it could be a decent enough option if you backup once a week or so.

Drop.io Resources

These are just a few ideas of what Drop.io could be used for. With the release of the Drop.io API, there’s the potential for even more creative uses of Drop.io in the future.

Here are some resources to get you started:

• Drop.io
• More Drop.io Uses (Includes sample demo drops)
• Drop.io API (learn how to use Drop.io’s API)
• Official Drop.io API Developer’s Blog (Developer news as well as programs/services using the Drop.io API)
• Drop.io API (Google Groups)

How Do You Use Drop.io?

Tell us in the comments below how you use your Drop.io drops.

There may be an occasion where you’re out of town and need to know where to find hotspots.

Where can you find wifi hotspots? We’re gonna look at some common and less common places to look for wifi hotspots.

Note: As with anything concerning important files and wireless internet connections, always use SSL and other safe computing practices. Most free wifi connections are not encrypted and do not have any security.

Where Can I Find WiFi Hotspots?

Here are some common places that are usually safe bets for finding a wifi connection.

Public Libraries

Often times libraries offer wifi. If you have a library card, you can access it for free.

If you’re not sure, just ask at the desk about their internet options.

Restaurants, Coffee Shops, Malls and Book Stores

Many coffee shops and eateries offer wifi for their customers.

If you live near a college, you may find that more businesses provide wireless internet in order to draw in busy students.

Malls sometimes offer wifi throughout the building and specific businesses may offer it as well. Just be sure the connection you’re using is actually coming from the mall or the business and not somebody “providing” a fake hotspot.

Bookstores like Barnes & Noble offer free wifi access (and comfy seating) to customers.

Many restaurants now offer free wifi. If you’re really desperate, McDonald’s offers wifi (ask for a wifi coupon at the counter).

Internet Cafes

I’m not really going to say much about internet cafes, except: consider your security and the possibility that the info you transmit is being monitored (and not necessarily by the owners of the cafe).

Hotels and Airports

Most major chain hotels offer either complimentary wifi access, or have wired connections in your room. This is handy if you’re out of town.

However, many hotels do not have a dedicated wifi connection for every single floor of the hotel.

Say you’re on the 3rd floor, you may be connecting to a signal coming from the 1st floor or the 4 or 5th floor. Obviously, the closer you are to the signal, the better your connection.

Try asking at the desk before booking your room so you can choose a room on a floor with a healthy signal.

Airports are a bit iffy when it comes to wifi connections. Some airports offer wifi, others don’t at all, and still others you have to specifically ask for a coupon or pay for a specific amount of time.

Update: If the airport you’re at charges for wifi, you might try just asking for free wifi.

For a better idea of which airports have free wifi, look at the list at OpenWifiSpots.

I also noticed an ad in Fast Company for in-flight wifi on some American Airlines flights.

Other Places to Try

You may also find free wifi at these locations:

• Public Parks
• Public Transportation
• Camp Grounds and RV Parks

Call Your Chamber of Commerce

Since most of the places that offer wifi are businesses, the Chamber of Commerce should have information businesses that offer hotspots.

Give them a call and see if they can help you.

Search Online

A faster option than the ones mentioned above, may be online wifi hotspot locators.

These work great if you know you’re gonna be out of town and in a different area.

OpenWifiSpots

OpenWifiSpots.com is a directory of free wifi hotspots in the United States.

It currently shows the locations of nearly 34,000 hotspots, and uses Google Maps to show the physical location/address of other free hotspots nearby as well.

It’s an open community project, so if you find a wifi hotspot not listed, you can easily add it to the site. You can also rate and add details and notes about the location, including the strength of the signal.

JiWire

JiWire boasts a registry of over 270,000 free and paid wifi hotspots in 140 countries.

They also have an iPhone and iPod touch app available.

Update: LifeHacker posted an article similar to this one a few days after we published this (great minds, eh?). It does include some links to nice web, iPhone and desktop wifi apps for Windows and Mac users.

Wifi User Beware

As mentioned before, always use safe computing tips when accessing the internet via a wifi connection–you never know who’s ‘listening in’.

Some quick tips:

• If logging into an account, use sites that offer SSL
• Always log out of sites when you’re done
• Never enter credit card or banking info if at all possible
• Be extra careful if you’re dealing with client information (obviously)
• Switch off your wifi/disconnect when not using the internet
• If a place/business/location looks like a dive, beware
• Remember that most wifi hotspots have no or limited security

More wifi security tips can be found at OpenWiFiSpots.com.

In our final post in our ‘Must-Have’ trilogy, we’re going to look at online tools and services for graphic designers.

Other articles in the series:

• 15 Must-Have Programs and Services For Freelancers
• 24 Must-Have Online Tools For Web Designers

Photo and Image Search

Cyclo.ps

Cyclo.ps lets you can search 8 of the top stock and royalty-free photo sites: BigStockPhoto, Cutcaster, Flickr, Fotolia, Photos.com, Shutterstock, stock.xchng, and stockvault.

Compfight

Search Flickr photos easily with Compfight. It returns about 300 results in a very easy to navigate site. You can also filter results to show only photos with Commercial licenses.

EveryStockPhoto

EveryStockPhoto lets you search stock photos from other sources and filter by size, orientation, resolution, license and more.

Icons

IconFinder

Iconfinder lets you search through tons of icons from many free icon sets. You can search by term, tag, icon size or license.

Image Editing Tools

Sumo

Even though it was included in our earlier freelancer tools list, Sumo is one darn impressive online editing app. You may even forget that you’re not using Photoshop.

Aviary Suite

This list wouldn’t be complete without mentioning the graphic and image tools from Aviary:

• Phoenix (Image Editor)
• Toucan (Color Editor)
• Peacock (Effects Editor)
• Raven (Vector Editor)
• Falcon and Talon (Image Markup)

Vector Magic

Convert raster-based images (JPG, GIF, PNG) to scalable vector formats: EPS, SVG or PDF.

Resize Magic

Resize your images easily in 3 simple steps. Very useful for resizing pictures quickly.

Generators

Ajaxload

Generate AJAX loading animations with this simple online tool. There are tons of different styles and colors to choose from and customize your animation.

Font Generator

Create OpenType fonts based on your own handwriting. You can use the fonts on Windows, Mac OSX and Linux.

You can test it free online, but to actually get the working font, it’ll cost you $9.95. Not a bad price.

ColourLovers

Find, create and share color schemes and palettes as well as patterns. You can export your palettes to Photoshop and GIMP.

3D-Box Maker

Create product boxes, CD and DVD cases, and books with this simple online tool.

Provide the images in JPG, GIF or PNG and the app does the rest. You can even drag and rotate to get the right angle/perspective on your image.

Due to the popularity of last week’s list of programs and services for freelancers, we’re bringing you 24 must-have online tools specifically for web designers.

Testing

Xenocode Browser Sandbox

Run and test your sites in IE6, IE7, IE8, Firefox 2 and 3, Safari, Google Chrome and Opera without having to actually install the browsers on your system.

This unfortunately seems to only work on Windows.

BrowserShots

View screenshots of your render webpages in multiple browsers and operating systems. You can even test different screen resolutions.

Favelets

Validate and test your sites using this collection of favelets. Validate microformats, HTML and CSS. Test your pages at different screen sizes (iPhone, Blackberry, etc) and lots more.

Are My Sites Up? (Website Monitoring)

Get alerts when you or your clients’ sites go down or experience hiccups. Alerts can even be sent to your mobile phone.

Page Code Generation

gridr buildrrr

Create CSS grid-based layouts easily with gridr buildrrr.

Project Deploy

Project Deploy makes it faster to get a site up and running by letting you select the type of information you want. Deploy then generates common folders, standard HTML and CSS files and even jQuery–all in a zip file for easy download.

Web Form Generators

Icebrrg

Icebrrg lets you easily create all kinds of forms and embed them on your site. There are paid plans, but the free version still allows 3 forms and up to 100 per month.

WuFoo

WuFoo makes creating forms a piece of cake. Adding forms to your site is simple as well with a great web-based user interface.

Web Form Factory

Another great web form tool. You can create forms linked to a database or to generate emails.

Typography

Typechart (CSS Typography)

Browse, compare and grab the CSS code.

PXtoEm.com

Convert pixels to ems quickly. The generator even creates the CSS all for you.

sIFR Generator

Even if you don’t have Adobe Flash installed on your system, you can convert font files (TTF) and create your own Flash files (SWF) for use with sIFR.

Web Code

XHTML Character Entity Reference

Find UTF-8 character entities for XHTML.

View other XHTML character entities resources.

ecoder (Web-Based Code Editor)

Ecoder makes it easier to write and edit code. All your coding can be done right in your browser.

Ecoder sports a beautiful UI, plus real-time code syntax highlighting and line numbering. You can also edit multiple documents at once.

As far as I’m concerned, this one beats out Mozilla Bespin (especially as far as ease of use goes).

BuiltWith

Check websites and see what technologies are being used. See what your favorite websites are running on–databases, CMS, hosting, etc.

Other Online Tools

Unix Permissions Calculator

No more trying to remember Unix permissions codes when updating file permissions.

SlimTimmer

Keep track of the time you spend on projects.

The interface is extremely simple and easy to use. You can also manually add time and filter by date, client and other options.

Media Convert

Convert just about any type of file into just about any format that exists. Just upload and Media Convert takes care of the rest.

Privacy Policy Generator

Easily create privacy policies for sites by just filling out and simple, quick form.

Hohli (Online Charts Builder)

We wrote about Hohli earlier. This is a great tool for generating embeddable charts and graphs. Choose the type of chart, size, data and colors–Hohli does the rest.

Validifier (Flash Embed Code Generator)

A lot of the code generated by sites for embedding Flash content is not valid markup. Validifier turns Flash embed code into valid XHTML (using the object tag).

Genfavicon

Generate favicons from GIF, JPG or PNG files in just 3 easy steps.

Favicon Generator

Create favicons (ICO) for Internet Explorer from images (GIF, JPG, PNG).

CSS Sprite Generator

Improve your site’s performance. Upload images and the CSS Sprite Generator will create the code for your CSS sprites.

What Online Tools Do You Use?

Be sure to check out our 15 Must-Have Programs and Services For Freelancers for other great tools.

There are tons of online tools for web designers out there. Which ones do you use? Tell us in the comments.

Here’s a list of 15 free or inexpensive programs / online services for freelancers.

The list is broken down into 5 main categories:

1. Backup and Syncing
2. Finances and Invoicing
3. Communication and Project Management
4. Programs and Working With Filetypes
5. Graphics Programs

Backup and Syncing

Freelancers many times need to be able to work in different locations and have access to their files wherever they are. Having a good backup and syncing plan can help.

1. Mozy (Online and Off-Site Backups)

Mozy is a great service that, through an application for Windows and Mac OSX, automatically backs up your files and uploads them to their secure site.

In the case of an emergency, you can simply log into your account and download the files. You can also request a DVD(s) be mailed to you with all your files.

The MozyHome version lets you backup 2GB for free. Use our special link to get an extra 256MB of storage free. You can also get unlimited storage for about $5/month.

You can read more about Mozy in our previous post.

2. Dropbox (Online Backup and File Syncing)

Drop your files into a folder in your My Documents folder (or equivalent for your OS) and all the files will be updated and synced to any computers linked to your free account.

The great thing about Dropbox is that it works on all major operating systems–Windows, Mac OSX and Linux.

Sync your files between your home, work, laptop and other computers and as soon as they are saved, the files are uploaded for all your computers–whether they’re turned on currently or not.

Dropbox gives you 2GB of free storage. Get an extra 256MB free.

3. Xmarks (Bookmark backup and syncing service/plugin for Firefox, Safari, Internet Explorer)

This plugin and free service synchronizes your bookmarks (and site passwords if you want) between your browsers and computers. Xmarks (formerly FoxMarks) has plugins for Firefox, Safari and Internet Explorer.

You can even set it to only sync certain bookmarks to certain computers.

Finances and Invoicing

One of the least exciting and most dreaded parts of being a freelancer is managing finances. These next 2 services help you spend the least amount of time dealing with billing, invoicing and general finances.

4. CurdBee (Online billing and invoicing)

We already have written about CurdBee before, but it’s such a great service, it deserves another mention.

CurdBee is an online service that lets you create and manage invoices and accept payments via PayPal, GoogleCheckout and 2CO (paid version).

When invoices are created, your clients get to choose which payment gateway to go through to pay your invoice.

Simply click Send and a link to the invoice is emailed to you and your client.

CurdBee is free (no limits on clients or how many invoices you can send).

With the CurdBee Pro version ($5/month), you get extra features like recurring billing, PDF invoices, accept 2CO payments and some other niceties.

5. Mint.com (Manage your finances and spending)

Mint is a free service that lets you track checking, savings and other financial accounts and assets for your business. It provides an easy way to keep track of your spending, and reports can be emailed to you weekly.

Communication and Project Management

Freelancers often need to communicate and manage projects easily and while on the go.

6. Drop.io (Project management / file and document sharing)

Drop.io is a free service that lets you upload and share files via your browser.

With Drop.io, you can add images, documents, audio and video files for others to view (up to 100MB per drop).

Comments for each file can be added, so this works well as an easy means of working remotely with clients and getting their feedback.

Drop.io even provides special phone numbers for conference calls, voicemail and faxes. There is also a live chat option for simple chatting through the browser, and a web presentation option.

Drop.io can send alerts via RSS, email, Twitter, etc when new files and comments are added, making it great for organizing projects.

There are also several apps as well as a Firefox plugin that use the Drop.io’s API to connect and interact with your drop.

7. Zenbe (Check multiple email accounts from anywhere)

Zenbe basically lets you check and manage emails from all your email accounts through your browser without going to several different sites.

Emails can be easily and automatically tagged so it’s simple to keep track of which messages came from which account.

Zenbe also has a collaboration tools (ZenPages/ShareFlow). You can also import existing address books, and integrates with Google Talk, Twitter and Facebook.

Though the free account option doesn’t seem to exist anymore (I got mine early on), paid accounts start at $5.99/month.

To learn more, you can read our earlier post about Zenbe.

8. Collabtive (Project management)

Collabtive is an open source, self-hosted project management system (cloud-based groupware).

Manage projects, tasks and milestones easily with a simple web-based interface.

Collabtive provides messaging and instant messaging, file management, time-tracking, iCal syncing, can import Basecamp files and is available in over 25 languages.

Programs and Working With Filetypes

9. OpenItOnline (Open and edit files online without having the program installed)

With OpenItOnline, you don’t have to have a bunch of proprietary programs and applications installed on the computer you’re using in order to view and edit files. No more having to have Microsoft Office installed just because a client sends you a .doc file.

Open and edit documents, spreadsheets, presentations and images within your browser with OpenItOnline.

There are even extensions for Firefox, Flock and Internet Explorer.

10. PortableApps (Carry all your programs with you on your thumbdrive)

PortableApps lets you install and run portable versions of programs from a thumbdrive—giving you access to your programs no matter what computer you’re using.

11. LOOP Apps (Online PDF creator)

LOOP Apps is a free online tool lets you upload and convert files into PDF format, or convert a webpage into PDF. Your files can be sent to others and electronically signed.

Also worth checking is Zamzar.

Online Graphics

Whether you’re a web designer or a graphic designer or some other type of freelancer, there’s a good chance you will need to do some, at least basic, adjustments to photos and images.

12. Picnik (Basic online graphics program)

Picnik is a simple to use web-based graphic editor. Picnik is perfect for resizing images, adjusting colors, tone, contrast and applying other effects to your images and photos.

Picnik works with Flickr, PhotoBucket, Picasa and many other image sites; letting you share your images with others, are well as save them to your computer.

Picnik is free and you don’t even have to sign up for an account to use it.

Our previous post has more details about Picnik.

13. Smush.it (Online image optimizer)

Smush.it is a free online tools for optimizing (shrinking file sizes) your images. Simply upload or provide the URLs of the images you want shrunk and Smush.it will take care of the rest.

This can even shrink images that have already been optimized in Photoshop and Fireworks–all without noticeable hits to image quality.

14. Sumo Paint (Online graphics manipulation / Photoshop alternative)

If you need more than just simple image resizing and color correction, Sumo Paint steps up to handle the job.

Sumo Paint 1.1 is almost like using Photoshop. The only differences: it’s free, and it runs in your web browser.

Sumo lets you import images from your computer or a URL, or you can create a whole new image from scratch.

You have all the basic tools found in Photoshop: you can create layers (with blending modes and layer effects), typography control (leading, tracking), and much, much more. In fact, if you’re familiar with Photoshop, you’ll be using Sumo like a pro in no time.

Your resulting work can be saved to your computer, emailed or saved to your Sumo account if you’ve signed up for one.

15. Pixlr (Graphics manipulation / Photoshop alternative)

In a similar vein as Sumo, Pixlr is a good alternative to Photoshop.

There are many things you can do with and to images, just like you can with Sumo, so we won’t go into much detail here. For more details about Pixlr, take a look at our previous post about Photoshop alternatives.

Font Squirrel just added a new @font-face filter to their site – letting you view just fonts that are available for embedding on a site via the CSS3 rule @font-face. Woo-Hoo!

So far, there seems to be 148 free fonts on Font Squirrel that allow @font-face embedding.

For a larger list of other sites featuring @font-face embedding, view my previous post:

Embedding Web Fonts: 5 Free @font-face Resources

Let the embedding begin!

Now WordPress has announced the ability to post to your WordPress.com blog easily through email–either from your desktop, webmail or your mobile/cell phone.

This is a huge improvement on the very limited WordPress ‘Post via email’ option previously available.

Now you can add images, video and MP3 audio to your email and have it added to your post.

Introducing Post by Email for WordPress.com

This doesn’t replace all the functionality of Posterous, but if you only need to update your WordPress.com blog, this is a nice option.

I’m sure more than a few people are chomping at the bit for this to be included in the self-hosted version of WordPress.

Has anyone tested this out yet? What are your thoughts?

CurdBee is a free online service that lets you organize, create and send invoices to clients for payment via both PayPal and Google Checkout.

Read my original post about CurdBee and what it does: Free Online Billing and Invoicing – CurdBee

Now, the CurdBee team has released an update to the free billing service, as well as a new paid PRO version.

Making Invoicing Easier

I’ve been using CurdBee to invoice clients for several months and I’ve really enjoyed using it.

It makes my life a lot easier. I can work up an invoice, send it and allow my clients to pay by credit card, PayPal or Google Checkout. They can even print and mail payments. I can do all this through CurdBee without having to create different invoices in PayPal, Google Checkout, OpenOffice.org etc.

The folks at CurdBee have just released an update to their service, as well as a new paid version (CurdBee PRO at $5 USD/month).

New Features

In addition to the features previously offered, CurdBee has added new options and features such as :

CurdBee PRO features marked with (*)

• Track activities and actions via a new dashboard and/or RSS feed
• Export invoice list in CSV
• Custom emails and notifications *
• SSL encryption *
• Dedicated support *
• Manage and edit common invoice items

More Invoice Options

• Download and save individual invoices as PDFs *
• Send acknowledgments of payments *
• Send payment reminders for overdue bills *
• Taxes and discounts *
• Unbranded invoices and emails (removes CurdBee branding from invoices) *
• Multiple contacts per client *

Improved User Interface

Even though the former CurdBee user interface was simple and easy to use, new additions and improvements make it even easier to find the information you’re looking for.

• Streamlined interface makes using CurdBee faster
• Filter invoices by client, invoice number or status
• Filter clients by client name, address or email

Additional Add-on Modules

For an additional $5/month, you can add additional feature modules to your CurdBee account:

• Create and Manage Estimates
  When you want to invoice a client, then you can turn the estimate into an invoice to send through CurdBee
• Recurring Billing
  Send automatic invoices on a recurring basis
  
• 2CO Payment Gateway
  Adds the 2Checkout payment gateway to CurdBee

For an overview of all of CurdBee’s features, take a look at CurdBee Features & Add-ons.

CurdBee Keeps It Simple

I have to thank the CurdBee team for adding all these new features, but at the same time keeping it just as simple to use as before.

CurdBee’s user interface is refreshingly simple, uncluttered and easy to use.

Try CurdBee

CurdBee is still free and you can get a lot of nice features with the free version.

If you need/want some of the other features mentioned above with an (*), upgrade to the PRO version for only $5 USD/month–not a bad deal at all.

• Website: www.CurdBee.com
• CurdBee Features
• Follow CurdBee on Twitter: @curdbee

Now you can search all the web and graphic design posts on the Es Developed Blog right from your search bar in Firefox and Internet Explorer 7+.

We’re going to learn how to create your own custom OpenSearch search engine plugin for your site.

The search plugin will work in both Firefox 2+ (including Firefox 3) and Internet Explorer 7+ (including IE8).

OpenSearch and Your Site or Blog

OpenSearch is a collection of simple formats for the sharing of search results, created by A9.com.

In the context of your browser’s search bar you can use OpenSearch to help visitors find information on your site or blog even when they’re not currently at your website.

An OpenSearch plugin will work in both Firefox and Internet Explorer 7+.

Online Search Plugin Generator

One of the simplest and fastest ways to create your own search plugin is to use MozDev.org’s Mycroft Project Search Plugin Generation Tool.

The tool is a relatively short form you fill out and it does all the heavy lifting for you.

You supply:

• Icon for use in the search bar of the browser (can be your site’s favicon)
• Your details (used to register the plugin to you in the Mycroft database)
• Plugin name and description
• Search URL
• Category (where to place your generated plugin on the Mycroft database), plugin language, etc

It’s a good idea to tick the ‘Show full instructions?‘ box at the top of the form. This explains the type information to place into each field. Most of what you need is explained.

If you need more information about what to put in each field, take a look at Creating OpenSearch Plugins in Firefox.

The code for the search plugin is generated. You can either copy and paste the code into a blank XML file on your computer (recommended), or you can just install it in Firefox and test it first.

Once you’re sure it works, you can submit it to the Mozilla/Mycroft search plugin database using the same form.

Linking the Search Plugin

Now that you have the search plugin generated, you will want to provide a link to it in your website.

The easiest way is to copy the generated code from the Mycroft Search Plugin Generator and paste it into an XML file on your harddrive. Then upload the file to your site and link to it in your <head>:

<link type="application/opensearchdescription+xml" rel="search" title="searchTitle" href="pluginURL/fileName.xml" />

This line of code allows your custom search plugin to be autodiscovered by browsers that support OpenSearch. Be sure to change ’searchTitle’ and ‘pluginURL/fileName.xml’ to the actual values you want for your plugin.

Automatic Updates in Firefox 3.1+

Beginning with Firefox 3.1, OpenSearch plugins can be automatically updated. To support this, you need to add another line to the <head> section of your site as well:

<Url type="application/opensearchdescription+xml" rel="self" template="pluginURL/fileName.xml" />

Notice also the ‘rel=”self”‘. Be sure to change ‘pluginURL/fileName.xml’ to the actual URL of your plugin.

More info about automatic search plugin updates can be found here:

Mozilla Developer Center (Creating OpenSearch Plugins For Firefox)

Works in Firefox and IE

Even though you’re going through all the steps here using Mozilla’s site, the resulting search bar plugin is in OpenSearch format, so Internet Explorer 7 and 8 can use it as well.

See the Plugin in Action

If you’re using Firefox or IE 7+, you can see the search plugin that I made for this site in action.

Click on the dropdown on your browser’s search bar and select Add “Es Developed Blog”.

Add the Es Developed Blog Search plugin and give it a try.

You can search through our collection of web and graphic design:

• Tutorials
• Articles
• Online tool and services recommendations, and
• Design inspiration and resources

OpenX 2.8–the newest stable release of the open source ad server has just been released. If you haven’t heard of OpenX before, check out the OpenX site to learn more.

With the new version of OpenX, I’m releasing an update to our free icon set (version 2.0) for the OpenX 2.8 admin.

221 Reworked Admin Icons

The release of OpenX 2.8, which brings a lot of performance, functionality and visual changes also includes a lot of new icons and images in the admin section.

Since I was going to add new icons to the set anyway to make it compatible with OpenX 2.8, I decided to rework the entire set. This version moves away from the Silk-based icons used in v1.0 to icons based on the Fugue icon set.

That ended up being 221 newly reworked icons for this set.

What Does This Icon Set Do?

The EsDev OpenX Admin Icon Set (EDOA) is a drop-in replacement for about 98% the images and icons used in the default OpenX 2.8 admin section.

It basically helps the admin section look more professional, and the icons match the rest of the user interface better than do the default icons.

Who Is This Icon Set For?

The EDOA icon set is for anyone running a self-hosted (as opposed to the hosted version on OpenX.org) version of OpenX; version 2.8 and above.

How Do I Use This Icon Set?

To install the new admin icons:

1. Make a backup of your OpenX images folder (and sub folders) located at: [openx-directory]/www/admin/assets/images/
2. Extract the EsDev-OpenX-Admin-Pro-Icons-v2.0 ZIP to your harddrive
3. Copy the images folder (and sub folders) to [openx-directory]/www/admin/assets/images/ — thus replacing the entire images directory (and sub directories)
4. Clear your browser cache and log into the OpenX admin to see the new icons in use

License and Use

EsDev OpenX Admin Icon Set v2.0 is licensed under a Creative Commons 3.0 Attribution-Share Alike license.

Based on a work at OpenX.org and the Fugue Icon Set, Silk, Tango and the Crystal Project icon sets.

Linking Info

All we ask is that you don’t redistribute the zip file on any other site, but rather link to this post.

When providing a link, do not link directly to the icon set–instead, link to this post:
http://esdev.net/free-openx-admin-icon-set-v20/

Show Your Appreciation

If you use this icon set and enjoy it, show your appreciation by giving a small donation. Any amount is appreciated.

I want to thank John Linden, CTO of OpenX for giving me a heads up about the upcoming release of OpenX 2.8 and the encouragment to update the icon set.

Aviary has just released Raven—the first online vector editor.

Raven lets you create, edit and save vector images online for free.

With Raven, you can create and edit:

• Logos
• Shirt designs
• Icons
• Print-ready graphics

Raven’s User Interface

If you’ve used any of Aviary’s other online graphics tools, you’ll be pretty much familiar with the user interface in Raven. Raven features a very stripped-down interface with simple controls and tools.

If you have any experience with other vector editors like Illustrator or Inkscape, you’ll have little trouble creating something in a short time with Raven.

Raven’s basic UI contains: Toolset on the left side of the screen, Layers panel on the right, Fill and Stroke/Style panel also on the right and a Menu bar, undo/redo and zoom controls along the top.

There are some things that don’t quite work the way you expect (I couldn’t get alpha transparency in the Layers panel to work) and there’s the occasional glitch. I’m sure those will be ironed out soon though.

File Formats

Raven uses SVGs (Scalable Vector Graphics) as its main file format, similar to Inkscape. In Raven, you can import and export a file as SVG (or BMP – export only). You can come back and edit previously created SVGs as well.

You can import SVGs from a URL or from your computer. It doesn’t support all the options that some vector editors support (such as certain alpha transparencies and gradients), but it does a decent job of importing the shapes, paths and basic colors.

Layers

What would a vector graphics editor be without the ability to create layers? Raven allows you to create layers and groups of layers just as you would when working in Illustrator or Inkscape.

Paths and Curves

Editing paths on a logo in SVG format with Raven

Raven supports paths and Bezier curves. Layers in imported files are honored and display as well.

However, I found that while the Bezier and lines tool works as you would expect, its response and the results you get when using it leave a bit to be desired.

My first few attempts at creating paths met with mixed results. You may have to go back and smooth out some of your curves a bit more than usual after you’ve made your curves.

Working With Gradients

Working with gradients is simple in Raven and you’ll be creating gradients and editing them in no time. Adjusting direction and colors is very easy, fast and intuitive.

Seeing is Believing

Vector Showcase

Aviary’s blog post about Raven showcases some nice vector artwork created in Raven.

You can also check out the over 1,000 vector images created by Raven users already.

Demo Video

Here’s a video showing the creation of some sweet Aviary eggs. Enjoy!

Aviary vector icons from mpeutz on Vimeo.

Conclusion

Raven is a promising online vector editor. It’s certainly worth taking for a test drive.

Also check out the vector graphics work that others have created with Raven already.

Article Update: The steps outlined below are for use with Thunderbird 2. A newer post for Thunderbird 3 users has been written more recently. Thunderbird 3 makes syncing with Gmail 100×’s easier than the method below.

I originally used the Gmail option in Thunderbird 2’s Account Wizard to set up my Gmail account (almost 2 years ago). Looking at my settings in Thunderbird, I noticed that my Gmail account was set up for POP3 and not syncing at all (due to some changes Google made in late November, 2008).

POP3 vs IMAP

With POP3, you only get 1-way syncing. IMAP, not POP3, is what you will need if you want 2-way syncing with your computer and your online Gmail account. We want our Gmail account to be up-to-date on both our web account and the Thunderbird account on our computer.

Why Thunderbird 2’s Gmail setting still uses POP3, I don’t know. Maybe there will be an update for this soon.

I use Gmail as 1 part of my backup plan for work files. Copies of my site’s DB backups are emailed (via a handy WordPress plugin) to my Gmail account. But I also wanted a local copy available on my hard drive.

Fortunately, a little searching did me good and I found the solution.

Syncing Gmail and Thunderbird (The Solution)

I’ve recorded some notes and a few extra steps to help you (especially if you’re making the switch in Thunderbird from POP3 to IMAP).

Note: Before doing the following steps, make a backup of your Thunderbird profile in case something glitchy happens in the process.

If you already have a Gmail account set up in Thunderbird, I would also make a separate, new Gmail account/folder in Thunderbird for the IMAP version. Make the following changes to that new account. You can delete the original (POP3) account in Thunderbird once you’re sure everything’s been copied over.

Setting Up IMAP in Gmail and Linking to Thunderbird

Now, setup your IMAP/Gmail:

1. First, make sure you have IMAP set up in Gmail: Enabling IMAP in Gmail
2. Then, set up IMAP access to Gmail in Thunderbird 2.0
3. Also change your account settings based on the recommended Thunderbird settings (see note below)
   

Important: In the Recommended Thunderbird settings (step 3 above), your Gmail subfolders may not show up immediately. This will make it impossible to set the destination folders properly.

If your Gmail account in Thunderbird does have subfolders already (see illustration), you can skip down to Moving Missed Emails.

However, if your Gmail subfolders don’t appear in Thunderbird and you can’t properly set your destination folders, try this:

1. I recommend not enabling the Check for new messages at startup (Tools > Account Settings in Thunderbird).
2. Close Thunderbird without checking your email and then restart Thunderbird.
3. If there are still no subfolders ([Gmail], Drafts, All Mail, Sent Mail, etc… see screenshot) under your newly created Gmail account, you may need to write a new message from your new account in Thunderbird and save as a draft.
4. You should then see a [Gmail] subfolder with the following subfolders under it: Drafts, All Mail, Sent Mail, Spam, and so forth. If still nothing shows, then just restart Thunderbird again.

Now you should be able to go back into your account settings for your new account in Thunderbird and set the destination folders (according to the recommended Thunderbird settings).

After I finished all the above steps, I went back in and enabled Check for new messages at startup.

1. Go to Tools > Account Settings in Thunderbird and choose your newly setup Gmail account.
2. Re-enable Check for new messages at startup.
3. Save your settings.

Depending on your settings, Thunderbird should have already downloaded and synced your former emails that were on your online Gmail account to your newly created Gmail account folder (it will show the progress in the status bar).

Moving Missed Emails to New Gmail Folder

If you’re missing some recent emails that are in Thunderbird but not on your online account (like I was because of my former POP3 settings), here’s what you do:

1. Go to your old Gmail account folder in Thunderbird and select all the affected email.
2. Then right-click and choose Move To > [and select the Inbox of your new Gmail account].

Depending on how many files you’re moving, it may take some time to sync everything up. After it’s completed, your online Gmail account and your Gmail account in Thunderbird should all be syncing.

Cleaning Up

Once you’re sure that all the emails you need are copied to your new Thunderbird Gmail account, you can safely remove the old Gmail account; leaving your brand new, sparkling IMAP-enabled account.

Syncing With Other Email Clients

The same basic formula for syncing Gmail to Thunderbird should also work whether you’re using Outlook, Apple Mail, etc. Your settings may be different depending on your email client though, so use the IMAP help in Google Gmail Troubleshooting and choose the desktop client you use.

Troubleshooting > IMAP (For a list of all the topics under IMAP troubleshooting)

I hope this helps you. If you have any questions or comments, drop me a line or leave a comment below.

A month or so ago, I stumbled across a post that led me to Posterous—a free online service that lets you post to your blogs and other sites by email.

Posterous also lets you autopost—posting to multiple sites/blogs with a single email.

Last month, I wrote a step-by-step tutorial about using Posterous and its autopost feature to post to WordPress (hosted and self-hosted), Flickr, MySpace, Facebook, etc, etc.

This is extremely useful because WordPress’ built-in email posting system is very limited. Posterous makes it easy for people with a web-enabled cellphone or BlackBerry to post on the go. The autopost is great for anyone who wants to make posting the same information/photos to several sites a 1 step process.

More Tutorials and Features

Posterous also has a few more features and capabilities that’s been released since I wrote my original tutorial in January. These features make it even easier to control which sites you autopost to and control the information you can post to your blogs.

Official Posterous Tutorials and Features

The Official Posterous blog shows a simple way to select which blogs and sites to autopost to on the fly using the #url@posterous.com syntax.

It also explains how to assign WordPress categories to your posts with Posterous. For example, add your categories to the end of your Subject like so: ((tag: apple, gadgets))

Thanks to Posterous

I want to thank Posterous for making it simple for non-technical people and those with mobile devices to still post to their sites with as little effort as possible.

I also want to thank the guys at Posterous for linking to my earlier tutorial on their blog and newletters.

I look forward to seeing where Posterous will go in the near future. They seem to be adding new features about every other day lately:

• New Posterous Bookmarklet
• Password Protect Your Posterous Site
• Official Posterous Blog

Introducing Bespin from Dion Almaer on Vimeo.

In the Cloud(s)

You can access your files from anywhere you have a browser and an internet connection. All your files and projects are synced and automatically updated.

Extensible

Bespin and its interface can be extended and customized by use of plugins; similar to how Firefox and Thunderbird allow you to add functionality and options.

Customize Bespin With Themes

You can customize the appearance of Bespin using themes and JSON.

Look at the Bespin Themes documentation for example theme code.

A Look a Mozilla Bespin’s Interface

Bespin is pretty bare bones at the moment and consists of 2 main screens:

1. Dashboard
   Currently acts as a file manager and contains your projects, as well as details about currently open files.
2. Code Editor
   This is where you actually edit your files. Contains a simple menu bar, editing window and a command line.

Bespin Dashboard

You can view all of your files; sorted by project. At the bottom, you can view details about the projects you have open currently.

One interesting note—the file manager doesn’t use a file tree system for navigation, but rather panels that open horizontally as you progress through each folder. This is similar to Grooveshark’s interface, but, in my opinion, Bespin is much more user-friendly.

When panels are resized and filenames can’t be fully displayed, Bespin intelligently truncates the names by adding a … in the middle so you can still read the 1st and last bits of the filenames.

Bespin Code Editor Interface

Bespin’s code editor screen consists of:

• A menu/nav bar that contains the name of the project and the file you’re working on, and a simple menu (Save, Undo, Redo, Cut, Copy, Paste, View in Browser and Change Font Size)
• Main code editing screen
  
• Command line
  

The main editor screen features:

• Syntax highlighting
• Line numbers
• Non-obstructive scrollbars

Scrollbars

The scrollbars in Bespin’s code editor window stay out of your way until you need them.

When the scrollbars appear, they are mostly transparent; allowing you to still see the most amount of code possible. When you hover over a scrollbar, it becomes solid so you can see it better.

This is accomplished, according to the developers, using HTML 5’s new <canvas> tag, which is supported by most of the major browsers (except Internet Explorer, of course).

Bespin’s Command Line

You can access additional commands from the command line instead of going through several tiers of menus.

To use Bespin’s command line, you just start typing in the text field (just to the right of the small arrow) and it will filter down the available commands as you type.

Some example commands:
export [project] [archivetype]

Exports the current file to the project and archive type you specify (.zip or .tgz).
goto [linenumber]
Go to a certain line in your code.

import [project] [url]
Import the URL you enter as a project in Bespin.

help
Shows a list of all available commands.

These are just a few of the commands that come with Bespin. You can also extend Bespin by creating your own Bespin commands and using them from the command line.

Note: The command line is also available from the Dashboard; but contains other project-related commands.

Bespin’s command line may take a bit of getting use to, but if you’re already familiar with using command prompts/terminals, this helps.

For instance, you can use your up and down arrow keys to toggle recently typed commands and scroll through other commands.

A Good Start

Mozilla Bespin is currently in an alpha stage, but it’s a good start.

One upcoming feature is Collaboration—allowing multiple developers view and edit code in real-time.

I look forward to seeing how Bespin progresses.

It seems pretty fast (even when editing large files) and has a very simple interface.

The fact that everything is on the cloud and you will have access to all your projects/files from wherever you are makes it great for those working across several computers.

Grab a free account and give it a whirl.

Bespin Links

• Mozilla Bespin
• Bespin Developer Tools
• Bespin Documention
• Bespin Google Group

Jeff Chandler wrote a post on Web Blog Tools Collection yesterday called Do You Post By Email? In the post, he asked if anyone was actually using the post by email ability that WordPress has had since at least version 1.5.

From the comments on Jeff’s article, most people have not used it because it’s incredibly limited in what can be posted—no images, HTML, video or formatting. So basically, you can only post text.

Also, it’s of limited use since most people who have access to email also have access to a regular computer. Since the blog posts that can posted by email are only text, typing on your cellphone’s keyboard takes forever.

Post by Email With Posterous

However, a free online service called Posterous was also mentioned. This lets you post not only text, but also images, videos, etc by email.

Posterous also allows you to link to your Flickr account, WordPress blogs, Blogger, Movable Type, Typepad, Twitter, Facebook, LiveJournal and more. This means not only can you post via email to those sites, you can post via email to ALL those sites simultaneously. No more making individual posts one by one to every site you have.

Benefits are pretty obvious for those with camera phones and a connection to the internet. Imagine being able to post directly from your phone or BlackBerry.

Posterous also gives you 1GB of space and a free blog on their site.

Posterous Tutorials

I couldn’t find any tutorials for Posterous, so let’s walk through:

• Posting via email with Posterous
• signing up for a Posterous account (optional)
• Linking your Flickr, WordPress, Facebook, etc accounts
• Posting to all account at once

Posting Via Email

This is seriously easy. It could not be simpler. Really.

1. Go to www.posterous.com
2. You don’t have to sign up for an account at this point, so click on Step 2: Email anything to post@posterous.com
   
   
   
3. Your email client will open with post@posterous.com as the recipient. If you use Gmail, Hotmail, etc, just log into your webmail account and create a new email addressed simply to post@posterous.com
   
4. Type your post as you want it. You can use HTML formatting in your posts and drag and drop photos, files or videos into your email. If you add more than 1 image, Posterous will create a simple gallery for you.

2 things to note at this point:

1. If the email address you are sending from attaches a signature, you will want to highlight and remove it or this will be included in your posts.
   
   Edit: If you don’t want to remove your signature by hand each time or are posting from an online service that adds a signature/ad at the end of your emails, type #end where you want your post to end and Posterous will ignore the rest. (Thanks, Alan)
2. Posterous will use the first name in your email address as your name on their site. Make sure the email address you’re sending from contains your name. If you sign up for an account with Posterous, you can change your profile later though, so it’s not really a big deal

After you’ve written your post and attached/added your files, send your email and you’re done!

Editing and Removing Posts

After you send in your post, Posterous will send you a link to your new blog on Posterous.

You also have the option to edit your post or delete it altogether.

You can set a password for your blog as well. This requires signing up for an account though, but it’s free. This also lets you to choose your own username and address for your Posterous account and allows you to link to your blog(s), Flickr, Facebook, etc.

While you don’t have to create a Posterous account to post by email to your Posterous blog, if you want to follow the rest of the tutorial, you will need to sign up for an account.

Signing Up For a Posterous Account

Now, let’s password-protect your new blog and sign up for a Posterous account.

1. In the email that Posterous sent you after your first post, click the link Click here to set a password for this site. This takes you to the Set a Password page.
   
2. Choose a name for your site (ex: yourblog.posterous.com) and a password and click Sign Up
   
3. You’re now at the Manage page where you can change your profile, set up more email addresses or mobile phones to post from, and set up your Autopost accounts.
   

Posting to Other Sites and Blogs With Autopost

Now, we can link other sites to your Posterous account and when you post to Posterous, all those other sites and services will be posted to as well.

Linking WordPress to Posterous

Let’s begin by linking our WordPress blog to Posterous

1. Choose Autopost to Everywhere in the sidebar on the right
   
2. You can now add an account to your Posterous account and link it
3. On the Autopost to Everywhere page, click Add a service
   
4. Let’s choose WordPress by clicking the More Blogs link
   
5. Go to your WordPress blog and make sure XML-RPC is enabled in your WordPress settings
6. Back in Posterous, type in your blog’s address and username/password
   
7. Click the Advanced options link. By default, Posterous adds in a blurb at the bottom of every post. If you want to remove it, just highlight and delete.
   
8. Click Save to complete

You will now see your WordPress blog listed in your linked services.

Link to Your Flickr Account

Now, let’s link a Flickr account to Posterous.

1. Click Add a service and choose Flickr from the next screen
2. Click Click here to authorize Posterous to access your Flickr account
   
3. This takes you to Flickr’s site to sign in and confirm giving access to Posterous
   
4. Click OK, I’ll Allow It and you’ll be returned to Posterous where you’ll see that it’s added to the Autopost to Everywhere page
   

Now you can follow the same basic steps to add more services and sites to Posterous if you want. All the sites that are linked to Posterous will be updated when you post to Posterous.

The neat thing is that when you write a post and send it to Posterous, the complete contents of your post get posted to WordPress, but only the photos will be added to your Flickr account. Neat, huh?

Our post is published to both Flickr and our WordPress site with a single email

WordPress note: The thumbnails and galleries Posterous generates are 500 pixels wide, so make sure that your theme has at least 500px in width in the post area. Otherwise, it may throw off your layout.

Hopefully WordPress will improve their posting by email system soon. It would be nice if something like this was included right in WordPress. I guess we’ll just have to wait. Until then, Posterous seems like a great solution for posting by email.

Last week we learned how to save time and file size by using CSS shorthand in our CSS code. This week we’re looking at a tool to speed up creating your XHTML pages and files.

Each time you get ready to begin a site, you have to add certain things to each page:

• Document Type Declaration (DTD – XHTML Strict, Transitional, etc)
• Page encoding (UTF-8, etc)
• Link your stylesheets (CSS)
• Import/link your javascript library or choice

You may also add folders in your work directory for:

• PHP includes
• Images
• Flash
• etc

All of these things are pretty standard. Even those these things are pretty straightforward, making a new file, or copying and pasting from a previous project can take up valuable time better spent on the meat of the site code.

Generate Code With Deploy

I’ve been using an online tool called Deploy. This gives you a dead-easy way of choosing your DOCTYPE, linking CSS, importing the jQuery library (and common plugins) and creating common file folders.

It then generates the code in a nice ZIP for easy download. You can also bookmark the page and regenerate the code again without having to choose the options all over again.

Project Deploy is a great time-saving tool for any web designer.

Other Quick and Dirty Tips

• CSS Shorthand Tips
• Lightning Fast Page Setup

Subscribe to our RSS feed and look for a new installment of Quick and Dirty Tips.

What would you do without email? Email is one of those things that’s a necessity when working on most projects. So it’s not surprising that most of us (designers and non-designers alike) have at least 2 email accounts.

How do you keep track of all your email accounts when you’re out of the office?

With work-related responsibilities, I have 6 email accounts that need to be checked throughout any given day. I manage those email accounts with Thunderbird and an array of folders and rules that I’ve set up when I’m at my computer. However, when I’m not at my work computer, I have to sign into 4 or 5 different webmail accounts to check my email.

A Better Way to Manage Your Emails

A while back, I heard about Zenbe, a free online service that allows you to manage multiple email accounts from one single Zenbe account. I’m going on vacation in a few days, so I finally got around to setting up an account and playing around with it.

With Zenbe, you can:

• Manage and keep track of emails from multiple email accounts (with tagging)
• Collaborate and share files, emails, calendars, agendas and chat through private ZenPages
• Update Facebook and Twitter accounts
• Chat through Google Talk
• Easily view and sort attachment files

Not Just Webmail

More than simply checking multiple email accounts; you’re able to actually manage all of your email from multiple accounts. Big difference.

If you’re pulling emails from multiple email accounts into a single inbox, you’d better have a good way to organize them. Zenbe does an amazing job of this with very minimal input from you.

Zenbe’s main window and interface is easy to use and intuitive.

When you set Zenbe to link to an email account , you can enter tags for that account. When Zenbe pulls emails from that email account, it then automatically tags them so you can see what account they belong to in a glance—even without opening the email.

These tags are also automatically applied to the emails you send from Zenbe—letting you keep track of which emails you sent from which account.

If you want even more control over your emails, you can setup rules and apply tags based on criteria such as who the email’s from, the recipients, subject, etc. This lets me tag emails from specific clients and is a nice alternative to the folders I currently use in Thunderbird.

You can also tag individual emails manually if you want.

Also note that Zenbe doesn’t reroute your emails—they still get delivered to your regular email accounts and thus to your desktop email program of choice.

Collaboration With ZenPages

Zenbe has something called ZenPages that lets you communicate with others easily. You can add:

• Sets of emails (by email address or tags)
• Files
• Calendars
• Agendas and more

After you create a ZenPage, you invite people by email address to share the ZenPage with you (Note: the people you invite don’t need a Zenbe account to use the ZenPage). New emails, files and such are added to the ZenPage automatically as they come in.

You’re able to collaborate and share files back and forth on a secure page. Only those who you choose to invite get a link to your ZenPage. You can even chat live right from the ZenPage.

ZenPages Video Overview

Subscribe to the RSS feed for the ZenPage and you’ll be able to see when people add content to the page.

ZenPages are great solutions for those who are collaborating on a project and want to have related information easily accessible to everyone involved.

Contacts and Your Address Book

Another great feature is that you can easily import your address book into Zenbe. I just opened my Thunderbird address book, exported to CSV and imported the file in Zenbe. Zenbe makes it easy to organize those contacts as well.

I have a huge list of email contacts in my address book. After importing them into Zenbe, I can check the star next to each one that I want to make a favorite. Then, I can choose the option to show the full list of contacts, or only my favorites. I use this to show only the people I contact the most.

Zenbe lets you add unlimited email accounts and phone numbers to a single contact. You can enter and add more details such as more than one address (if for instance there’s an office address and a residental one).

If you don’t have any email rules setup, you can also search for emails from specific contacts right from the address book.

Zenbe also pulls in Gravatar icons for the contacts in your address book when available.

The handling of contacts is nicer and feels more like an actual desktop app than any other web-based app (including Gmail) that I’ve used.

More Than Just Email

Even though managing multiple email accounts from one account is simple with Zenbe, and sharing information almost fun with ZenPages, there’s lots more that you can do.

Calendar

Zenbe has its own calendar. You can also import calendars (.ICS and .ICAL formats) or subscribe to web calendars.

It’s important to note that the events that are imported from other calendars are editable, but do not sync back to the original. This may not be a deal-breaker for some, but if you just want to keep track of your agendas and upcoming events, this works just fine.

Zenbe also sports agenda and todo sections in the sidebar. These, like most of the features in Zenbe, are simple to learn and pretty intuitive.

Social Networking

You can link to your Facebook, Twitter and Google Talk accounts right from the Zenbe sidebar.

For example, the Facebook tab lets you:

• Change your Facebook status message
• See updates from your friends
• Get notified of new messages and friend requests

A Powerful Tool For Email and Communication

Zenbe is a full-featured tool for communicating with your clients across multiple email accounts, Facebook, Twitter, Google Talk and more. If you have more than one email account and you’re looking for a better way to manage and organize your email, give Zenbe a try.

Remember: it’s free and it doesn’t take over your existing email accounts (meaning all your emails will still be sent to your desktop app).

If you have logged into Google Reader this afternoon, you may have noticed some subtle drastic changes.

Ex-nay on the Rounded Corners

The biggest and most obvious changes involve the Google Reader interface. No more rounded corners. Also the light blue in the sidebar and elsewhere has been replaced with plain white and a more subdued color scheme.

Personally, it seems as though they are realigning their design to match the basic look of the Google Chrome browser.

But beyond the visual look, there’s some added functionality as well.

More Room

You can now expand and collapse the navigation sections in the sidebar to show and hide information. This is a welcome addition for those (like me) who have a huge number of feeds and don’t always use the Home and Shared sections. This gives more room for your list of feeds.

Edit: The search has been improved as well. Now when you go to choose which tags to search through, you can start typing and the tags are filtered as you type. This helps speed things up if you have a huge list of tags.

The Refresh button has been moved from the sidebar and now resides at the top of the main Reader window.

I haven’t had time to tinker and explore yet, but I’m looking forward to it.

For a more in-depth list of the changes to Google Reader, see Google’s Blog post.

What do you think about the new design? Love it? Hate it? Meh?