18 Invoicing Tools for Web Designers

This post was written by Steven Snell of Vandelay Website Design.

Every web designer has a need to create invoices and track payments that have been received or have not yet been paid. Fortunately, there are a number of tools that can streamline this process, and we’ll look at 20 options here. There is a good deal of variety in terms of features and pricing. Some are better suited for organizations that have several employees, while others may be a good fit for a freelancer. Some of these tools will simply help you to create attractive invoices and other will extend further into the area of accounting software.

PayPalPayPal screenshotPayPal provides a simple invoicing system that will email your invoices to your clients. This system is fairly popular with freelancers because there are no monthly fees, just a small amount taken out of the money that you receive. The PayPal account is then linked to your checking account and you can easily transfer the balance from PayPal to your bank. Personally, I use PayPal for my freelance blogging and I’m very happy with the service.

FreshBooksFreshBooks ScreenshotFreshBooks offers more functionality than many of the other choices. It will create and manage invoices, track your time and expenses, and create reports. You can get started with FreshBooks using a free (and very limited) account, or you can choose from a number of different options to meet your needs. The pricing is pretty reasonable. You can manage up to 25 active clients for $14 per month.

BlinksaleBlinksale screenshot

With Blinksale you can manage unlimited clients, but you are limited in the number of invoices you can send. You can send up to 3 invoices per month for free, or you can upgrade to 50 invoices for $12 per month. The biggest package allows for 1500 invoices for $49 per month.

LessAccountingLessAccountingLess Accounting has taken the approach of targeting small business owners by providing a simple software that will provide the essentials for small businesses without the extras that more complicated systems include. LessAccounting is a simple accounting solution that also allows to create and manage invoices. The cost for LessAccounting is $19.95 per month, and the first 30 days are free.

PaySimplePaySimplePaySimple will help you to create and manage invoices by allowing ACH payments, recurring billing, online payments and credit card processing. Prices start at $34.95 per month with no set up fee and small fees per transaction. Their site does offer a demo and they provide dedicated account management and online customer support.

Invoice PlaceInvoice PlaceInvoice Place offers a free basic service, with monthly subscription options for upgrading. You can create and manage your invoices online for up to 3 clients for free (unlimited invoices are offered on every plan). Prices start at $12 per month for managing 20 clients and go up to $32 per month for managing up to 500 clients. With Invoice Place you also have the option to export to PDF, Excel, or Word.

WORKetcWordetcWORKetc offers a wide range of functions, including contact management, calendars, email marketing, project management, and of course invoice management. The monthly subscription fee is $44.95, which includes access for 2 employees, with additional employees costing $10 per month. There is a 14 day guarantee.

Billing OrchardBilling OrchardBilling Orchard maintains hourly time billing, along with flat fee and recurring billing. It claims to be the ideal solution for web developers, web hosts, and hosting resellers. The price for the basic system with automated invoicing is $14.95 per month. From there prices go up to $69.95 and there is an option to pay $10 per month for a support ticket system.

Bill My ClientsBill My ClientsBill My Clients offers different options and solutions for businesses of different sizes. For freelancers, they offer and invoicing and time tracking service for $11.99 per month. For small businesses, the service includes A/R management, also for $11.99 per month.

Invoices Made EasyInvoices Made EasyInvoices Made Easy is one of the lower-priced options at $5 per month ($15 per quarter). With Invoices Made Easy you can create and email invoices, track payments, accept online payments, and they will also print and mail paper invoices for you if you wish. The cost for having them mail your invoice ranges from $1 – $1.50 per invoice.

InvotrakInvotrak ScreenshotInvotrak is a free option for creating and tracking invoices. You can enter clients and manage invoices accordingly, but there are no advanced options such as receiving online payments, and there are no upgrades to a paid service available.

Simply InvoicesSimply Invoices ScreenshotSimply Invoices will allow you to create invoices for time that you have tracked in More Honey. There is a free option that allows you to 5 different invoice templates with no custom logo, and apparently the invoices will also include their own links. For $9 per month you can get 10 invoice templates with custom logos and no links. Prices go up to $25 per month for infinite templates.

SimplyBillSimplyBill ScreenshotSimplyBill provides a number of options, including creating, emailing, and printing invoices. You can also save invoices as PDF’s, creates quotes that can be converted to invoices later, and track payments and time. There are 3 different pricing plans, ranging from $5 per month to $25 per month. For $5 per month you can create up to 25 invoices for up to 10 clients. For $25 per month these numbers are unlimited. Each plan comes with a trial period.

Time59Time59 ScreenshotTime59 is designed for independent professionals and freelancers. It can handle time and expense tracking as well as invoicing and payments. The price is only $49.95 per year and there is a risk-free 30 day trial (no credit card info is required for the trial).

Invoice2GoInvoice2GoInvoice2Go provides over 300 professional invoice templates to choose from. You can also send the invoices and track payments, and there is a free 30 day trial. The basic product costs $129 per year, and the advanced option sells for $249 per year.

CashboardCashboard ScreenshotCashboard is estimate, invoicing, and time tracking software. With cashboard you can send fully branded and customized PDF invoices and estimates. Like many of the others listed here, Cashboard has both free and paid options. The free account will allow you to manage 2 active projects with unlimited clients and invoices. Prices for upgrades range from $12 per month to $140 per month.

Bill4TimeBill4Time ScreenshotBill4Time is a time tracking and billing system for freelancers and small to medium-sized businesses and it includes reporting capabilities. The first 30 days are free for all plans. Pricing is calculated according to the number of users. For 1 – 10 users the price is $35.95 per user. For larger organizations (100+ users) the price is $14.95 per user.

Free Invoice Templates for ExcelFree Invoice Template for Excel Screenshots.

If you’re looking for a different option, you can download free invoice templates for Excel and create and manage your own invoices.

Steven publishes several posts each week on various aspects of web design at VandelayDesign.com. To stay up-to-date with his blog, subscribe to his feed.

Treating your web site as an advertisement

Let’s face it – most companies love to see business referred through their web site.  When this occurs, it indicates that someone tried to solve a problem (need to find a plumber, need a new car, etc.) and that company’s web site seemed to provide an answer.  That person then chose to do business with the company.

The web site became an advertisement for the company.

I’m currently reading a great book by Andrew Griffiths titled, 101 Ways to Advertise Your Business.  In Section 1 of this book, Andrew offers up five important things everyone should know about advertising.  While reading, I realized that these points adapt quite well to the web, particularly web sites.

So what are these five important things you should know?  Instead of copying Andrew’s list verbatim, I’ll instead paraphrase his five points and tailor them to web sites:

  1. Know what message you’re trying to deliver. Don’t confuse your potential customers with irrelevant information.  Be quick and to the point.
  2. Know your target audience. Being too broad could mean losing business to a competitor.
  3. Make your web site stand out. A great design that’s easy on the eyes does wonders for your company’s credibility.
  4. Make sure people visit your web site. List your web site on all your advertisements and business cards.
  5. Let your web site work over time. Don’t expect results overnight.

Back in the 1990’s, simply having a web site was good enough, and it showed.  Many businesses designed a simple one-page site with a phone number and uploaded it for the world to see.  In this day and age, those types of pages look old and out of date, and businesses using them come off as “behind the times”.  That perception could mean the difference between “new customer” and “no customer”.

Long story short – take your web presence seriously.

Mull over these five points and ask yourself – “Is my company’s web site advertising our business?  Or is it just going through the motions?”  If you answer with the latter, there’s no better day than today to change course.

social media feature

How traditional businesses use social networking

Being an English major, my first instinct when beginning this post was to research the topic and then write about it.  However, the more I thought about it, the more I realized that I didn’t need to.  This is one of those topics I can write about solely by observing what goes on around me.

My discovery?  Traditional businesses near my campus (Indiana University of Pennsylvania) are employing social networking sites on a daily basis, and no offense, but Indiana, PA is certainly not the tech hub of the universe.  Wired (and wireless) college students have taken over this small town and the businesses here have realized that potential customers are only a friend request away.

Here are a few examples of traditional businesses employing social networking technology:

  • Wolfendales, a popular bar for IUP students, sends Myspace friend requests out to pretty much everyone in the area.  I got one my first semester on campus.  They write bulletins informing patrons of special events and post comments inviting everyone to come out.
  • Copper Beech, a community of townhomes (mostly occupied by students) sends Facebook friend requests to IUP students.  They keep those who accept updated on open houses and other special events.
  • The Penn (our college newspaper) runs a web site where the print stories are posted.  They invite readers to comment and discuss the stories after they’ve been published.

If businesses are embracing the social web with success here, imagine what could be done in Harrisburg!  A vast population of Central Pennsylvanians are on Facebook and Myspace.  Some write blogs.  Many are also starting to flock to Twitter, a mini-blogging/update service.  Traditional businesses would be wise to establish an online presence for themselves on all of these platforms, blogs especially.  A company blog allows a business to become more transparent and show that there are, in fact, humans running the show.  When you become more personable, you earn more trust.

If you’re still unsure, ask yourself these three questions:

  1. “Do I want my business to interact with current and past customers?”
  2. “Do I want my business to reach out to potential customers and the community in general?”
  3. “Do I want my business to keep up with the times?”

If you’ve answered yes to all three, it’s time for your business to devise a serious social networking strategy.

30 Exceptional CSS Techniques and Examples

In this article, I’ve pieced together 30 excellent CSS techniques and design examples that showcases the capabilities and robustness of CSS. You’ll see a variety of techniques such as image galleries, drop shadows, scalable buttons, menus, and more – all using only CSS and HTML.

Clicking on the title will direct you to the documentation/tutorial, while clicking on the accompanying image will direct you to the demo page if it’s separate from the documentation.

1. Hoverbox Image Gallery

A pure css-based gallery; hovering over an image enlarges it.

Hoverbox Image Gallery

2. Advanced CSS Menu

A creative and complex navigation scheme.

Advanced CSS Menu

3. Sliding Photograph Galleries

An accordion effect; hovering over an image expands it.

Stu Nicholls: CSSplay- Sliding Photograph Galleries

4. Lightbox Slides

Part of an article entitled “Supercharge your image borders” showcasing how you can use CSS styles to design images look more interesting.

Bite Size Standards - Supercharge your image borders

5. Drop shadow on an image

Aan image effect demo and discussion based on a A List Apart article entitled, “CSS Drop shadows“.

Drop shadow on an image

6. Cross Browser Multi-Page Photograph Gallery

Hovering over the tabs changes the category, while hovering over an image enlarges it.

Stu Nicholls: CSSplay - Cross Browser Multi Page Photograph Gallery

7. CSS Photo Zoom

Uses a single image and adjustment of the background-position attribute.

SimpleBits - CSS Photo Zoom

8. CSS gallery layout—smells like a table

Mimics a table layout, but uses lists. The gallery is also fluid width.

Dnevnik eklektika - CSS gallery layout—smells like a table

9. Sticky Footer

A static footer with very little XHTML required.

Sticky Footer

10. whatever: hover

A navigation menu that mimics Window’s Start menu.

Peterned - whatever: hover

11. CSS-Only Accordion Effect

An accordion effect using div’s and :hover; the accordion effect can be vertical or horizontal.

The CSS-Only Accordion Effect - CSSnewbie

12. Scalable CSS Buttons Using PNG and Background Colors

A technique that addresses vertical scaling, the use of many images, and lack of a hover effect.

Scalable CSS Buttons Using PNG and Background Colors - David’s kitchen

13. Pushbutton Links

links that are styled to look like buttons without using images.

MikeCherim.com - Pushbutton Links

14. Scrollable Table with Fixed Header

The table’s captions stay put which is excellent for long tables.

Scrollable Table with Fixed Header

15. Content Overlay with CSS

When you hover over the image, the container div is shown with more text.

Snook.ca - Content Overlay with CSS

16. A CSS styled table version 2

A beautifully styled, table with semantic mark-up – uses a background image.

A CSS styled table version 2

17. PNG Overlay

Another way to add flare to images (rounds the corners and adds a border and drop shadow) to make and even more effective image.

PNG Overlay

18. Showing Hyperlink Cues with CSS

Simple tutorial on adding icons to different types of links.

Ask the CSS Guy - Showing Hyperlink Cues with CSS

19. Simple Rounded Corner CSS Boxes

Uses only one image and very few lines of code and mark-up.

MODx Content Management System - Simple Rounded Corner CSS Boxes

20. Sitemap Celebration

Tree-like navigation using nested lists, great for sitemap pages.

Zab Design - Sitemap Celebration

21. Easy cross-browser transparency

Opacity technique without the use of JavaScript (but at the cost of using non-valid XHTML code).

Bite Size Standards - Easy cross-browser transparency

22. Curved corners 2

Fluid width and height divs with rounded corners.

HTML Dog - Curved corners 2

23. Creating a graph using percentage background images

List items <li> styled into bar graphs.

Creating a Graph using Percentage Background

24. CSS Bar Graphs: Examples

3 bar graph examples – “Basic CSS Bar Graph”, “Complex CSS Bar Graph”, and “Vertical CSS Bar Graph” using div’s and definition list tags.

CSS Bar Graphs: Example

25. Animated Rollover Arrow

The arrow follows along the entire width of the navigation bar smoothly, without the use of JavaScript or animated gif’s.

Animated Rollover Arrow

26. A CSS-based Form Template

Showcases an accessible web form.

Nidahas - Forms markup and CSS - Revisite

27. CSS Image Text Wrap

Using empty spacer div’s, the page’s text mimics a wrapping effect around the background image.

CSS Image Text Wrap

28. Before your very eyes – a fade-in image

A demo using opacity and a single image that gradually fades in to cover the text.

CSS Play - Before your very eyes - a fade-in image

29. Pure CSS Pop-ups

A pop-up technique that works even in IE 5 Mac.

30. CSS Gradient Text Effect

Uses background image overlays, and empty span tag, and position: absolute to create a gradient effect on text.

Top 6 Internet Explorer Extensions for Web Developers

Lead Image - Internet Explorer BrowserFor Web developers wanting to use Micosoft’s Internet Explorer as their primary browser, there’s some terrific IE extensions/add-ons that can aid you analyze, troubleshoot, debug, and speed up development of web pages.

Here, you’ll find the top 6 free IE extensions for web developers.

Where appropriate (and available), you’ll also find related resources, their download page, and documentation.

1. Internet Explorer Developer Toolbar

Screenshot -Internet Explorer Developer Toolbar add-on for IE

The Internet Explorer Developer Toolbar, developed by Microsoft, offers several features and options to aid web development and design.

It shares many features that we love from Chris Pederick’s Firefox Web Developer extension such as: outline div elements, mark-up validation tools, ruler and measuring tools, resizing the browser window precisely (i.e. to 800×600), and all that good stuff.

It’s an essential tool for analyzing and troubleshooting web pages.

Some features:

  • A Document Object Model inspector pane
  • Multiple validation – automatically opens validation services in multiple browser tabs at the same time
  • Syntax coloring of source code

Related Resources:

Download:

2. Web Accessibility Toolbar

Screenshot - Web Accessibility Toolbar - Internet Explorer Add-On

The Web Accessibility Toolbar, developed by Vision Australia, was designed specifically to assess and analyze the accessibility of a web page, but it’s very useful regardless of whether you’re testing for accessibility or not.

Some features:

  • Greyscale function – renders pages into grayscale so that you can test color contrast.
  • Color Contrast Analyzer – a more detailed test for color blindness accessibility, which provides an analysis of the foreground and background color for "color visibility" as suggested by the W3C consortium.
  • Test Styles – which opens up a dialog box where you can edit existing CSS styles on a web page.

Related resources:

Download:

  • Web Accessibility Toolbar from Vision Australia

Documentation:

  • Toolbar Functions

3. HttpWatch (Basic Edition)

Screenshot - HttpWatch IE Add-On

HttpWatch is an HTTP data viewer and debugger extension by Simtech Limited. HttpWatch comes in two editions: Basic and Professional.

The Basic edition displays plenty of information regarding HTTP data and web page performance such as status codes, total elapsed time it takes a web page to load, amount of downloaded data, and HTTP compression savings (if you use data compression).

Some features:

  • Page Level Time Chart – gives you a visual representation of the web page’s performance
  • Errors Log Summary – notifies you of any HTTP errors encountered.

Download:

Documentation:

  • HttpWatch Features Summary

4. WebCollect

Screenshot - WebCollect IE Add-On

WebCollect is a simple web content capture tool. It allows you to take and save screenshots easily (great tool for design mock-ups and presentation). It also has an eyedropper tool which allows you to sample colors from a web page to extract their color values (in RGB, Dec, and Hex).

Some features:

  • Copy full screen – enabling you to copy a web page without having to crop or resize the image
  • Capture Rectangle Area – which allows you to copy just parts of a web page.
  • Support for most digital image file types such as JPG, PNG, and GIF.

Download:

5. Fiddler2

Screenshot - Fiddler2 IE Add-On

Fiddler2 is a web debugging proxy add-on whichs logs HTTP(S) traffic data. It’s very robust in features and is customizable to your needs.

Some features:

  • Session Inspector – which also provides you with headers and web forms data.
  • Set break-points – so that you can experiment with inbound/outbound data.
  • Performance Statistics – including world-wide estimated download times

Related resources:

Downloads:

6. Web Development Helper

Screenshot - Web Development Helper IE Add-On

The Web Developer Helper is an IE extension targeted towards ASP.NET and JavaScript/Ajax Developers. It has a special set of tools for ASP.NET development.

Some features:

  • Trap script errors – to see call stack errors.
  • Detailed request headers

Downloads:

IE still can’t match the Firefox’s number of extensions for web developers but these extensions help even out the field a little bit.

Got any interesting experiences with any of these tools (or horror stories)? Share it with us in the comment section.

7 Incredibly Useful Tools for Evaluating a Web Design

An effective web design is one in which your users are able to find information quickly and in a logical fashion.

Do they visit the content you want them to visit? Are they looking in the right places of your web page? Are you able to keep your user’s attention, or do they just leave quickly?

It’s not just about the content either. If your design loads slowly – or if moving from one section to another takes a long time – it affects the user’s experience.

These things can be the make-or-break factors between a user clicking on a link to find more information, or the back button to find it elsewhere.

Some things to consider:

  • Are important information being seen by the user?
  • Are the navigation and action items intuitive?
  • Is the user being directed to sections in a logical manner?
  • Does the web page load quickly enough to not turn away the user?

If you’re interested in analyzing and optimizing your page layout – here’s some extremely useful tools that you can use to help.

1. ClickHeat

ClickHeat is an open source visual tool for showing “hot” and “cold” zones of a web page. It allows you to see which spots users click on most, and which spots are being ignored.

It’s very easy to implement on your website, you only have to include an external JavaScript file.

Download:Clickheat on SourceForge.net.

2. Crazy Egg

Crazy Egg offers a myriad of analytical tools to help you visualize what visitors are doing.

Features include: Confetti – allowing you to see what people are clicking on based on certain factors such as their operating system and where they came from, Overlay – providing you with tons of data about particular links, and Report sharing – enabling you to share the data with team members and clients.

The free version only allows 4 pages to be tracked – so use your top landing pages to get the most data.

3. YSlow for Firebug

A key tenet of a strong design is that, not only should information be presented in a logical and elegant fashion, but that it must also be served quickly, with very little delay.

YSlow for Firebug is a free tool for Mozilla Firefox that gives you information about your front-end design to see if it performs well. It gives you a letter grade (A through F) and outlines your web page’s trouble spots.

It’s based on the Yahoo! Developer Network’s “Best Practices for Speeding Up Your Web Site” initially written by Steve Souders, who was once the Chief of Performance at Yahoo! and is now working over at Google on web performance and open source initiatives.

Downloads:Firebug extension for Firefox (required) and YSlow.

4. clickdensity

clickdensity is a full suite of usability analysis tools that will help you assess your web page design.

You can use heat maps showing where users click on the most, hover maps – which shows people scrolling over links but not clicking on them, and A/B Tests which allows you to change certain page elements to see which style is more effective.

The free subscription give you 5,000 clicks and only one page and one site to monitor.

5. ClickTale

ClickTale offers a lot of user data pertaining to how visitors use your website.

There are plenty of things you can look at such as average time it takes for a user to click on a link, a user’s hesitation on clicking a link, hover to click ratio, and much more. It also provides detailed reports and charts on your users’ monitor sizes to better optimize your web page design to cater for the typical visitor.

6. Clicky

Perhaps the most interesting feature that Clicky has is its real-time tracking and monitoring feature, called Spy (check out the demo here).

Besides Spy, there’s a host of other analytics data you can look at such as user Actions – which records click data from your users and Visitors – providing you user data.

7. Google Analytics

One of the best free services that Google offers is Google Analytics and probably the most well-known analytics tool. It’s incredibly easy to install and offers plenty of user and content data to help you learn more about your web pages’ performance.

It has a feature called Site Overlay, which gives you a visual representation of the popular places your users like to click on. It also offers data on bounce rates and your top exit pages (to see what pages make users leave).

So there they are, some of the best tools in the market to help you troubleshoot and optimize your page layout. In the end, it’s a combination of great content, as well as how you present this content — that will lead to an effective design.