We had several workarounds to hide the columns, but they all were little “hacks” that didn’t fulfil the real need, so we decided to do the real thing, and here’s what we got.

Now, below the items table you’ll notice the “Configure Columns” link. Once clicked, the menu will be shown where you can disable/enable one column. The change will be immediately applied in the items table and the corresponding column will be hidden/shown.

For example, in the table below the “Discount” and “Tax” columns are unchecked so they won’t be displayed in the editor and in the final invoice.

Like this? Share your thoughts in the comments below.

Author information

Dimitar Stojanov

Co-founder at Invoicebus

Dimitar is co-founder of Invoicebus, an online invoicing tool for easy invoice management. He's passionate about creating beautiful and simple web applications and occasionally writes on this blog about web design, online business, and fighting the status-quo. Follow him on Twitter and Facebook.

| Twitter | Facebook | Google+ |

The post Custom columns display appeared first on Garage.

You wanted this, we wanted this, so here it is. The document custom fields give you the flexibility to include additional data to the document besides the data that Invoicebus supports by default.  For example, this feature allows you adding various custom fields such as: project description, tax details, client contact details, shipping info, etc, and displaying them anywhere you need throughout the document.

Adding a custom field to your invoice is easy. All you need to do is:

1. Define a custom field in the invoice editor
2. Apply the custom field to the HTML invoice template

1. Defining custom fields in the invoice editor

To make it even more flexible, we separated the document data from the client data, thus when you add a client to a specific invoice, all custom fields associated with the client will be applied to the invoice as well. Now let’s see how to add your first custom field.

Adding custom fields to the documents

The document custom fields should first be added within the invoice editor (see section “Document Custom Fields”). In the left column enter the field name (this is a unique identifier which will later be used as a placeholder in yout html template), and in the right column enter the field value.

You can notice the middle column with the values “Constant” or “Variable”. So what this means? If you choose “Constant”, the value of the custom field will be saved for future re-use. That way when you create a new invoice this value will be pre-populated automatically. In the image above, the tax number is considered to be permanent for all future invoices, thus it is set to “Constant”.

And if you choose “Variable”, the value won’t be saved so when you create a new invoice the value field will be left empty (you should manually populate it). In the previous example, the project name and the project description are considered to be invoice specific, thus they are set to “Variable”.

Adding custom fields for the clients

Adding a custom fields for the client is almost identical. All you need to do is click the “Manage Client Custom Fields” link within the client section.

A new window will pop up where you can add client custom fields:

The values entered in the client custom fields will be always saved for future re-use, so there’s no need of specifying “Constant” or “Variable”. In the example above, you can see we’ve specified the client’s shipping address.

2. Applying custom fields to the HTML invoice template

So you’ve added your custom fields, and now you should tell Invoicebus where you would like this information to be displayed in your final document. For this, you’ll need to edit your HTML invoice template. The easiest way to do this is to:

• download your current invoice template (within the template window click download template),
• extract it from the archive,
• edit the template.html file with any text editor,
• add your custom fields to the HTML template as described below,
• zip the modified template and re-upload it again to Invoicebus.

Adding custom fields to the HTML template

Probably you’ve noticed that the names of the custom fields are in the form {document_custom_[name]} and {client_custom_[name]}. So these are the actual placeholders you should use in your HTML template, where [name] is your custom name for the placeholder. You can find more info on how to edit or create your own invoice template here.

From our previous example, the custom fields define the following placeholders:

• {document_custom_project_name}
• {document_custom_project_desc}
• {document_custom_tax_number}

And the custom client placeholder:

• {client_custom_shipping_address}

In the final invoice, these placeholders will be replaced with actual values you enter in the invoice editor.

And don’t forget! If you need any help with the template customization you can always contact our support.

What’s on tap for our next update?

We think it would be great if you’d be able to use any invoice field (including custom ones) as a placeholder in your default email templates + your default terms & notes. Currently, the terms & notes section doesn’t support placeholders while the email/reminder/thank-you templates support only pre-defined placeholders such as {client_name}, {doc_number}, {total_price}, {paid_sum}, etc.

By giving you the flexibility to use any placeholder, you can easily create more specific terms & notes and write even more personal emails (for example, you can add a contact person and then address him by his first name only).

We haven’t officially started developing this feature as we first wanted to hear what you think about it. Feel free to leave your thoughts in the comments below. We’d love to hear from you!

Author information

Dimitar Stojanov

Co-founder at Invoicebus

Dimitar is co-founder of Invoicebus, an online invoicing tool for easy invoice management. He's passionate about creating beautiful and simple web applications and occasionally writes on this blog about web design, online business, and fighting the status-quo. Follow him on Twitter and Facebook.

| Twitter | Facebook | Google+ |

The post How to use custom fields in your invoices appeared first on Garage.

We already have quite positive experience with 2Checkout so we decided to integrate it in Invoicebus. Available in 197 countries, with 26 currencies supported, 2Checkout for sure is one of the best options for accepting payments online today. So if you love 2Checkout like we do, here’s how to set it up in Invoicebus.

Setup Guide

I. Setup in 2Checkout

First thing, of course, is to get a 2Checkout account if you don’t already have one. Once you activate it you need to configure several things to make sure it works properly with Invoicebus.

1) Login to your 2Checkout account, and from the top menu navigate to “Account”, then “Site Management”. Here in the section “Direct Return” select “Header Return (Your URL)” and in the “Approved URL” text field enter this URL: https://invoicebus.com/webhooks/2checkout/. Be careful to enter it exactly as displayed here, with lower case letters and trailing slash at the end, otherwise the invoice payments process might not work as expected.

2) After you set the return process, you need to set the notification URLs. From the top menu click the “Notifications” button, the circle located on the right. On this page click on the green “Enable All Notifications” link to mark all notification events. In the “Global Settings” section for the “Global URL” enter the same URL from above: https://invoicebus.com/webhooks/2checkout/ and click on the “Apply” button.

This will copy the global URL to all notification events text fields. And don’t forget to save the setting at the end. With these notifications, Invoicebus will know if any payments are made to your invoices.

II. Setup in Invoicebus

1) To set it up in Invoicebus, the first thing you need to do is enter your 2Checkout “Seller Id” (also known as Account Number) and “Secret Word” in the Invoicebus “Settings” section.

If you wonder why we need the “Secret Word”, it’s because we use it to verify whether the payments for your invoices are legit or not. We store all your info encrypted in our database so you can sleep tight when using the 2Checkout payments with Invoicebus.

2) Next thing you need to do is to create (or edit) an invoice where you can enable 2Checkout payments for that invoice. As you already know all payments are enabled per invoice.

If you already have connected Stripe than you can choose which payment gateway you’ll use for processing credit card payments for that particular invoice. We’ll even give you the estimated fees charged by 2Checkout just like we do for PayPal and Stripe.

After enabling 2Checkout payments for the invoice, a button will be shown to the client invoice preview page, similar to Stripe and PayPal.

When clicking on “Pay with Credit Card” button, the 2Checkout pop-up will be shown (see image below), where your clients will need to enter their credit card or PayPal details in order to pay the invoice.

To avoid this redirection, you should follow these rules when entering a client in Invoicebus:

• Full name (first and last) or full company name for the client
• Complete client address
• City, State, Zip, Country (in this order comma separated)
• Phone (and/or Fax, comma separated)
• Valid email address

If your client address doesn’t have a State/Province then you can exclude that info and enter just “City, Zip, Country”. And if you prefer, you can use a semicolon (;) for separating the “City; State; Zip; Country” and the “Phone; Fax” information.

Example:

Fred Flintstone
220 Rocky Way
Bedrock, 30321, CO, US
+1 7 123-5555; +1 7 100-5454
fred@slaterockgravel.bed

When entering the country we suggest you use the standardized 2-Letter or 3-Letter Country Codes to make sure 2Checkout accepts them properly. Same applies for the states in the USA and the provinces in Canada.

If you need further assistance with setting up 2Checkout payments in Invoicebus, contact our support at support@invoicebus.com.

Author information

Dimitar Stojanov

Co-founder at Invoicebus

Dimitar is co-founder of Invoicebus, an online invoicing tool for easy invoice management. He's passionate about creating beautiful and simple web applications and occasionally writes on this blog about web design, online business, and fighting the status-quo. Follow him on Twitter and Facebook.

| Twitter | Facebook | Google+ |

The post New payment gateway: 2Checkout appeared first on Garage.

This was a feature that many of you have requested, but we didn’t want to rush it and gave it some time to mature enough before we started with the implementation. As you already know partial payments could be made in Invoicebus only if the invoice payment was manually recorded within the app.

But this wasn’t the case with the online payments. If you wanted to receive online payments, your client needed to pay the whole invoice amount. We knew sometimes this can make your clients feel uncomfortable, and sometimes even frustrated. So we wanted to make the online payments more flexible and decided to introduce the partial online payments.

The best part is, with the partial online payments, it will be easier for your clients to pay you back. This will for sure incentivize the client to pay you promptly and iInstead of paying one big amount they can split it in a more comfortable smaller amounts. Yay to building great client relationships.

Enabling partial payments

The partial online payments are enabled on per invoice basis. As you can see now in the invoice editor, in the “Payment Options” section at the bottom you’ll notice the “Enable partial payments” checkbox. To enable partial payments, the only thing you need to do is, check this box and save your invoice. Ta-da, now you can receive partial payments for that invoice.

And this is what your clients will see when they’ll click on the payment buttons on the invoice preview page. For convinience here’s displayed the basic info about the invoice, the payee (your company name) and the total, paid and due amounts.

Note that the partial payments functionality is unified and work for both Credit Card and PayPal payments. After entering the amount, the payment flow continues same as before.

We know this is one more step in the payment process, so if you don’t need partial payments you can go back to the old payment way, which requires payment of the whole amount. You can even combine the two of them for different invoices.

Bonus: Improved payments reversal

The way the old payment reversal worked was by removing the payment record without any prompting. And if you undo some payment it will be gone for good. This is a serious operation, so to prevent accidents we added a new layer of protection with a confirmation dialog box.

Also instead of removing the payment record we decided to keep it and added a new “Reversed payment” note for that invoice.

This way you can keep complete payments log for your invoices, see how much is paid and how much is reversed.

Next, we have some interesting ideas for Invoicebus on our minds, but let that be a surprise.

Top photo credit: Got Credit

Author information

Dimitar Stojanov

Co-founder at Invoicebus

Dimitar is co-founder of Invoicebus, an online invoicing tool for easy invoice management. He's passionate about creating beautiful and simple web applications and occasionally writes on this blog about web design, online business, and fighting the status-quo. Follow him on Twitter and Facebook.

| Twitter | Facebook | Google+ |

The post Partial payments in Invoicebus appeared first on Garage.

It’s one thing to send email but another thing to actually deliver email. Given the fact that more than 90% of all daily emails are spam, Email Service Providers are constantly changing their policies. A small deviation from the ESP rules can easily throw completely legitimate email into the spam folder.

As the email is core functionality in Invoicebus, we have to be on top of the game to ensure your emails always land in the right inbox.

In the past few years, many popular ESPs like Yahoo, Hotmail, and others, have imposed extra restrictions to lower the spam they get. New types of email authentication and verification like DMARC policies were set in place. These rules started to cause email deliverability issues in Invoicebus.

Problem

Few years ago, Invoicebus was sending emails on behalf of our customers by specifying their original email address in the “From” field. This was working well until many ESPs decided to adopt the DMARC policy. Simply put, DMARC policy doesn’t permit the address in the “From” field to be on a different domain than the sending server domain:

Example:

From: peter.griffin@yahoo.com
Reply-To: peter.griffin@yahoo.com
Server: invoicebus.com

To solve this, we implemented a small hack – instead of putting the customer’s original email address into the “From” field we specified a permanent email address registered under our domain (notifications@invoicebus.com). As the customer’s original email address was specified into the “Reply-To” field, all email replies would go to the right inbox without a problem.

Example:

From: notifications@invoicebus.com
Reply-To: peter.griffin@yahoo.com
Server: invoicebus.com

This was working quite well until we started receiving complaints from customers that some of their emails are mistakenly marked as spam.

The problem became even more serious when a few customers reported that their emails are not delivered at all. We weren’t sure what’s happening because Invoicebus was receiving delivery confirmations from the remote servers, yet the emails were somehow dropped by their internal mechanisms. After an exhaustive investigation, we found out that this was caused by a new spam rule introduced by the popular spam software SpamAssasin. The rule requires the addresses specified into the “From” and “Reply-To” field to be on the same domain as the sending server domain. Who would have thought? Just solved one problem another one appears.

Solution

There was no quick solution nor any possible workarounds to this. We had to completely migrate our email infrastructure and the way Invoicebus handles emails. This resulted in developing two new features for handling emails:

• dedicated Invoicebus mailbox for each customer (for example username@mail.invoicebus.com)
• optional setting that allows specifying custom SMTP server

1. Dedicated Invoicebus mailbox (default option)

Note: All customers will receive a dedicated Invoicebus mailbox automatically.

Invoicebus will generate a unique email address from your original address and set it as a default “from/reply-to” address for all outgoing emails you send. For example, if your login email is peter.griffin@yahoo.com your Invoicebus email will be peter.griffin@mail.invoicebus.com. The username before the @mail.invoicebus.com part is required, and you can change it to whatever you like (if available).

Example:

From: peter.griffin@mail.invoicebus.com
Reply-To: peter.griffin@mail.invoicebus.com
Server: mail.invoicebus.com

This ensures any messages sent via Invoicebus to pass even the most restrictive spam filters.

Your clients can also directly reply to any email you send. Invoicebus catches the replies and automatically forward them to your original email address. If the conversation relates to a document, the entire message thread will be saved under the document’s activity history as an incoming email (depends on the plan). This way you can keep all your important conversations in one central place (see image below).

2. Custom SMTP email server

Specifying a custom SMTP (depends on your plan) gives you the flexibility to send emails via your own email server/mailbox. This way your clients will get emails from your original email address (or address on your domain), rather than the one assigned by Invoicebus.

Please note that if you specify custom SMTP server, Invoicebus won’t be able to track any email events such as delivered, bounced and opened (“opened” is a new event that shows when an email is opened by the client. This is different from “document opened”, which fires only when an online document is opened).

Last but not least is the customization of your Display (From) Name, where you can specify the name your client sees when they get an email from you (see image below). If you leave this empty it will default to the last saved company name.

The new infrastructure should significantly improve the email deliverability. It should also give you a better insight of what’s going on with your emails almost in real-time. The easiest way to keep track of your emails is to take a look at the dashboard and see the status of each email, reminder, and thank-you note. Here’s a quick reference:

Author information

Dimitar Stojanov

Co-founder at Invoicebus

Dimitar is co-founder of Invoicebus, an online invoicing tool for easy invoice management. He's passionate about creating beautiful and simple web applications and occasionally writes on this blog about web design, online business, and fighting the status-quo. Follow him on Twitter and Facebook.

| Twitter | Facebook | Google+ |

The post New Email Infrastructure appeared first on Garage.

The idea for custom invoice templates in Invoicebus was on our minds even from the early days. We wanted to make Invoicebus in a way that everyone will be able to customize their invoice design and layout as they want without any limitations. Most of the time we took mental notes on how we would like such invoice templates to work but we didn’t feel comfortable to start with the realization. We knew something was missing so we let the idea distill itself and after the summer last year we finally started coding and iterating through different concepts.

We wanted the invoice templates to follow two major things:

1. To be easily imported and used in Invoicebus without modifications
2. To be used standalone without any dependency from Invoicebus

Few months ago we silently launched this in beta as we were still fine tuning the details. Now we believe it’s time to announce its official launch.

Custom Templates

Without hesitation we knew the templates should be made with HTML and CSS. That way they can be used in Invoicebus without converting from one format to another. We finally put to realization our collected notes and made our invoice templates framework. Some rules were also set to make sure the templates are compatible with the new version of Invoicebus.

However, one of the most interesting parts was making the templates work standalone. It’s easy to imagine Word or Excel invoice templates working standalone, well not really standalone as MS Office is still required, but who doesn’t have one right? But to make working HTML/CSS template we had to somehow make it dynamic and usable on the fly. That’s when we decided to make the HTML Invoice Generator. This is a simple script that can be included at the bottom of an HTML invoice template, and it’ll transform it to fully functional invoice editor with the following features:

• Ready to fill out and print on the fly.
• Can be easily customized with your own logo and colors.
• Support any language and currency.
• Support multiple taxes.
• Auto calculate subtotals, totals, taxes, and discounts.
• Configurable columns, date format, and symbol position (left/right).
• Manipulate rows with simple drag and drop.
• Run directly in a browser on your local computer (PC, Mac, Linux).
• No setup or additional software needed.
• Hassle-free integration with Invoicebus.

We’ve never really liked Word/Excel invoice templates as they’re pretty hard to work with. The layout can get messed-up easily and the calculations are hard to tweak with all that item rows and totals. We’re pleased we can offer something new, something fresh in the invoice templates world. Actually we got so excited that we made a decision to open the technology for the invoice generator. If you’re tech savvy and know your way with web technologies you can grab the code yourself at GitHub and tweak it to your needs. We even prepared a guide you can follow if you want to create your own invoice template. If you decide to use the script as is, no more than basic HTML & CSS knowledge is required to create your own invoice template.

The best thing about the templates is their seamless integration with Invoicebus. You can pack your custom template in a zip file and upload it to Invoicebus, or even simpler – we embedded “Save” button that will do all the heavy-lifting for you (described at the end of the post). It’s great to know that not only your online invoices, but also the PDFs you generate will have the new invoice design you applied.

Interactive example

Here’s a live example of an invoice template you can play with:

Note: this is a scaled-down version for demonstration purposed only and it lacks some of the actual features. The real templates are with bigger size and are more usable.

Templates Store

We made the template framework and the invoice generator, but we didn’t want to leave our users hanging in that state. No matter how simple and straightforward everything might seem, designing a template can be a burden and time consuming task for many people. That’s why beside the 6 basic templates already included in the bus we decided to include another 4 premium templates, all ready to use*.

The icing of the cake is our newly launched Template Store, where you can browse over a dozen creative designs and choose the one closer to your brand and colors. There you can find different styles of templates – generic, corporate, retro, handwritten, etc., that will amplify your professionalism when presented to your clients.

Cool thing is that you can use this invoice templates independent of Invoicebus. They are standalone and autonomous so you don’t need an Invoicebus account to create invoices with them. However, because they’re HTML/CSS based there’s no easy way to save the invoice locally on your computer. That’s why we added “Save” button that saves the invoice data and the template to Invoicebus with a single click. Of course this is completely optional and you can always print or save the invoices to PDF (with Google Chrome) for future reference.

So go ahead and check out the amazing templates we have in the store.

* Custom and premium invoice templates in Invoicebus are available for Single-decker and Double-decker subscription plans.

Author information

Dimitar Stojanov

Co-founder at Invoicebus

Dimitar is co-founder of Invoicebus, an online invoicing tool for easy invoice management. He's passionate about creating beautiful and simple web applications and occasionally writes on this blog about web design, online business, and fighting the status-quo. Follow him on Twitter and Facebook.

| Twitter | Facebook | Google+ |

The post Custom invoice templates have arrived appeared first on Garage.

I’m going to reveal some extraordinary numbers and facts for which even we weren’t aware of until we started preparing this post. Sounds crazy I know, but it’s true

Time Spent

We haven’t tracked our working hours, but our estimation says more than 5.700 hours so far, or approximately:

• 2.100 hours – design (Interface & UX, Mock-ups, Graphics)
• 1.500 hours – development
• 1.100 hours – copywriting
• 1.000 hours – testing

Longest & Shortest Times

• Longest time spent in the office – 19 hours
• Longest time spent working from remote locations – 6 months
• Longest time spent on crafting a simple sentence – 165 min
• Longest time spent on staring at a same interface with no idea what to do next – 18 hours
• Longest average time for customer support – 4 hours
• Longest server downtime – 40 minutes
• Shortest time spent on developing a killer feature – 16 hours
• Shortest time spent on writing a blog post – 20 minutes
• Shortest time spent on testing a new feature – 6 hours
• Shortest average time for customer support – 15 minutes

Best. Worst. Hardest. Easiest.

• Best decision ever made – The story behind our brand, the attitude, the mascot, the name
• Worst decision ever made – Not taking too much risks from the very beginning
• Hardest thing to do – Beat the blank state
• Easiest thing to do – Mess the read-write permissions of the blog folder

Source Code

For the codebase we are using SVN source control versioning system hosted on Assembla, and to date we count totals of 671 code commits;

We’ve written about 52.243 lines of code from which:

• 21.067 lines C# code
• 12.717 lines JavaScript
• 5.830 lines CSS
• 12.169 lines HTML and
• 460 lines in configuration files

All time system errors count – 130

Guys that Keep our Back Safe

These are few amazing services we cannot live without:

• Rackspace – hosting
• Sendgrid – sending transactional emails
• MailChimp – email newsletters, announcements and promotions
• Basecamp – collaboration, ideas sharing and bug tracking
• Intercom – customer engagement and communication
• Skrill – processing online payments
• Dropbox – file sharing
• NewRelic – server monitoring and analysis
• WordPress – our blog
• Google Apps for Business – Email, Docs, Analytics, Feedburner

Miscellaneous

• We’ve changed 2 different Cities and 3 Offices
• We’ve eaten about 30 jars of pickles and 56 super delicious “pizzas vegetarianas”.
• We’ve drunk up 1200 liters of water. No coffee at all yet.

Top photo credit: Kevin Dooley

Author information

Dimitar Stojanov

Co-founder at Invoicebus

Dimitar is co-founder of Invoicebus, an online invoicing tool for easy invoice management. He's passionate about creating beautiful and simple web applications and occasionally writes on this blog about web design, online business, and fighting the status-quo. Follow him on Twitter and Facebook.

| Twitter | Facebook | Google+ |

The post Invoicebus Fun Facts appeared first on Garage.

I can’t describe how happy we are today after one year of operating and supporting Invoicebus. In one year of ups and downs, struggles and hustles we managed to finish our first year with positive news. After one year of working we have grown at stable pace with thousands of happy users, and I can’t tell anything but we’re very satisfied with the results.

For anybody who doesn’t know what Invoicebus is, I’ll give you short history about it:

• In October 2010 Stefan and Dimitar gathered together and started with brainstorming a product which will ease the creating and management of invoices.
• In November 2010 the development started and in meantime we put our teaser web page announcing the arriving of the “bus”.
• After one year of development and testing we launched our product on 30^th November 2011, and that is how Invoicebus was born from our ideas, creativity and hard work.
• Today we’re celebrating our first birthday.

As a young product this is a big achievement for us, and this motivates us even more to continue building Invoicebus in the future. We hope with the love and support of our users we’ll bring the invoicing closer to the everyday people, the freelancers and small businesses.

And what is a birthday without a surprise so we prepared one for you, just stayed tuned in the coming weeks. Oh, and if you don’t have account go on and create one, it’s completely free. Well I’m done for today and going to grab a piece of that cake and start partying

Photocredit: Will Clayton

Author information

Dimitar Stojanov

Co-founder at Invoicebus

Dimitar is co-founder of Invoicebus, an online invoicing tool for easy invoice management. He's passionate about creating beautiful and simple web applications and occasionally writes on this blog about web design, online business, and fighting the status-quo. Follow him on Twitter and Facebook.

| Twitter | Facebook | Google+ |

The post Happy Birthday Invoicebus! appeared first on Garage.

You already know about the migration of the database in the cloud and the real-time updates of the activity history, but that is only a scratch on the surface in comparison what we’ve done in the last couple of months. Most of the updates are not noticeable for our users so maybe some will say, “guys, you haven’t done anything new”, and I can’t blame them for that. Anyway we made this changes and improvements because we believe they’ll give the end user more painless experience in his invoice management.

The biggest change we’ve made is in our marketing site so after few months of hard work we’ve reworked the site copywriting, and gave the site layout the simplicity it was begging for. The old saying goes “A picture is worth a thousand words”, so I’ll spear myself from explaining the changes and tell you to visit Invoicebus right away and I’ll be waiting you here. I won’t go anywhere, I promise. In case you haven’t saw our new tour and pricing page go on and see them too. Another change we’ve made is with this blog you’re reading right now. As you can see the design is reworked to be compatible with the rest of the site, and we decided to “rename” it to just Garage.

OK, enough for that. Now I want to tell you something very interesting, and that is… prepare yourself for celebration and cake. Did I have your attention? Hm? Well, both we, Dimitar and Stefan are very excited to tell you we’re celebrating one year of Invoicebus… yup this is true, we’ve made it. On 30^{th November 2011 we officially started the engines on our invoicing software Invoicebus, and after one year we’re very pleased to tell you where we’ve got with the bus. But I’ll leave the interesting stuff for the next post and if you’re afraid of missing the next post subscribe for news in the box below.}

Photocredit: shawncampbell

Author information

Dimitar Stojanov

Co-founder at Invoicebus

Dimitar is co-founder of Invoicebus, an online invoicing tool for easy invoice management. He's passionate about creating beautiful and simple web applications and occasionally writes on this blog about web design, online business, and fighting the status-quo. Follow him on Twitter and Facebook.

| Twitter | Facebook | Google+ |

The post Brief Updates appeared first on Garage.

Headers are the first thing your web site visitors will see, so you must be sure they look perfect. But not always the browser display big sized letters in good quality. If you’re looking to optimize engagement and boost your online presence, it’s also important to find sites to buy youtube comment likes. To see what I’m talking about I’ll show you an example of the biggest text on the front page, and actually the biggest text of the whole site invoicebus.com. The text Fast & Easy Invoices as displayed in Mozilla Firefox browser looks like this:

You can notice all letters that are curved look pretty pixelated, so they are not so appealing to look at, and we need to find a way to display them smoother. The first think we got in mind was to drop a shadow for the text so the letter borders will become smoother, with the CSS3 property text-shadow. Although this property is not supported in all browsers that Invoicebus officially supports, we gave it a shot. After applying a text shadow with radius of 2 pixels we got the following:

The text got smoother but it also became to blurry, difficult to read, and painful for the eyes. On top of that the pixelated curves still were noticeable, so we had to do something different to fix this issue. The thing we got in mind was to replace all big sized text and headers with images, and after a couple of hours in photo editing software (Photoshop) with support of text antialiasing, we replaced our headers with images. The final result we got for the Fast & Easy Invoices was:

Looks better, isn’t it? This “fix” actually is nothing new in the web design sphere, but it is worth design trick. With this you’ll also have cross browser look of the text because you don’t have to worry about the browsers text rendering techniques. Additionally, incorporating Search Engine Optimization (SEO) plays a vital role in boosting organic traffic and enhancing your website’s visibility on platforms like Google and Bing, further improving the user experience across different browsers.

But for every step forward there is a step backward so with this good looking text we lose one of the most important things in the internet world. That is the text scanning of the search engine bots. They simply can’t scan images and the text they contain, so the headers with images can’t be used for increasing of the organic search ranking.

That’s why we have another trick in our sleeves for you. The trick is to leave the text in the

<h1></h1>

tags and apply specific styles. The example is given below:

The header:

<h1 class="header"><a>Fast & Easy Invoices</a></h1>

The header class:

.header {
    background: url("fast_easy_invoices.png");
    text-indent: -99999px;
    ...
}

As you can see we put the background image to be our header, and we give large negative indent for the text of -99999 pixels, so the text won’t be displayed in the browser but the search engines bots can still scan the

<h1></h1>

tag and find the right text. This way you’ll ensure excellent SEO for you site and for even more SEO friendliness we wrap the text in

<a></a>

tag. Plus, with a Trusted conversion optimization team, you can maximize engagement and drive better results.

If you have some SEO and design tricks, use the comments section below to tell us, and if we find them interesting we’ll cover them in the next blog post.

Top photo credit: Anon DePlume

Author information

Dimitar Stojanov

Co-founder at Invoicebus

Dimitar is co-founder of Invoicebus, an online invoicing tool for easy invoice management. He's passionate about creating beautiful and simple web applications and occasionally writes on this blog about web design, online business, and fighting the status-quo. Follow him on Twitter and Facebook.

| Twitter | Facebook | Google+ |

The post Make Smooth Looking and SEO Friendly Headers appeared first on Garage.