Discover how a WordPress designer launched a successful premium theme business with practically no investment
by on December 1, 2010
Free Invoice software : Invoice Bubble
Free Invoice Software
If you’re looking for a free app to create professional invoices and estimates for your clients, then look no further than Invoice Bubble which is free invoice software that I use and recommend.
I’ve tried other invoice apps such as FreshBooks, which is great, but not free. Invoice Bubble allows you to create estimates and invoices and send them to clients by email, just by clicking a link. You can also export them to PDF.
You can upgrade to a 5$/month account to remove their backlink if it bothers you.
There is no affiliate link in this post. This is genuine feedback from a satisfied user 
by on November 30, 2010
7 free time saving applications
Google Reader
As a business owner, it’s vital to keep your finger on the pulse of your industry. Instead of reading your favourite blogs the usual way, harness the power of Google Reader. Subscribe to the RSS feeds of the top sites in your industry, and set Google alerts for your main keyword phrases and have them delivered automatically to your RSS reader. This way, you’ll have all the information you need in one place. An extra benefit is that you can send the articles directly to your twitter account from inside Google Reader if you want to share them with your visitors.
If you’re on a mobile device, use the Reeder app.
Check out these tutorials for making the most out of Google Reader and Google alerts:
Producteev
I love this app for it’s simplicity. When you receive a task related email, simply send it to task@producteev.com and it will get added to your list of TODOs. you can even add time keywords in the subject of the email to have it automatically scheduled at a specific date.
Producteev integrates with Google Calendar too, so if you’re using Google Chrome, you can install the Google calendar widget and use your Producteev calendar as the default. That’s streamlining!
Evernote
Do you write down notes of small pieces of paper, then have a hard time finding them when you need them?
Then use Evernote. It’s an app that you can install on your desktop, or mobile phone and it will allow you to syncronize notes between all your devices. You an even take pictures of text and it will be indexed!
This is great when you suddenly have an idea or inspiration and want to write it down for future reference without forgetting it.
Instapaper
I use Instapaper in conjunction with my Google Reader account. When I find an articel that I would like to read later, I send it to Instapaper, or I use the Google Chrome bookmarklet to save it to Instapaper.
When I have some time to read the full article, it will be waiting for me in my account. You can organize the articles into subfolders for easy access.
Klok2
When you’re working on a project, it’s important to keep track of the time you spend on specific tasks. This will help you become more productive and manage your time better. Klok is a free adobe airr application that helps you track your time on projects. You can even use it to calculate how much the project is worth.
It helps me fine-tune my estimates, as I know exactly how much time I spend on specific web design tasks.
FocusBooster
If you’re easily distracted, then you’ll find yourself losing a lot of precious time surfing the net, or tweeting or using FaceBook.
Using the pomodoro technique which is to set uninterrupted stretches of work periods, you”ll find yourself instantly more productive.
Focus Booster is a free Adobe Air app that is basically a timer which by default is set to 25 minute periods.
http://www.focusboosterapp.com/
TeamBox
Email is not the best tool for communicating about project tasks. I find it greatly improved communication to use a project management tool where all the resources are in one place.
You don’t have to browse through hunderds of emails, you can share files, chat and discuss all in one place.
Teambox is similar to Basecamp in its ease of use.
by on November 28, 2010
CSS3 background experiments
You know how in Photoshop you can set the borders to be gradients? Well I wanted to replicate that in CSS3.
I couldn’t apply the gradients directly to the border, so I used the background-clip and background-origin to control multiple background positioning.
These are some of my experiments:
by on November 20, 2010
Most important factor in choosing a WordPress designer?
I’m following my own advice and I am running a little experiment to make my blog more interactive, in order to engage with my visitors and gather some valuable information in the process.
Being a WordPress designer myself, I’d like to know what criteria are most important in deciding who to work with.
If you selected Other, please leave a comment! Thanks.
by on November 19, 2010
8 ways to make your site more appealing to your target audience
start a blog
this may seem obvious, but many website owners don’t have one, either because they don’t see the value in it, or maybe they don’t have the time to update it regularly.
Maybe you have a static website, and don’t know how to add a blog. The fact is that search engines love fresh content, so if you have something that you feel will be valuable t your audience, you shoul publish it on your blog.
Free ProBlogger course for getting started blogging
Create a FaceBook page for your business
Millions of people visit Facebook everyday, at the office, on their mobile device,…. So don’t underestimate the medium. all the big companies now have a Facebook page
Setting up a page for your business is not that difficult, I’ve linked to a tutorial video for you. By the way, it’s taken from The Challenge, an excellent marketing course for beginners.
Facebook by the numbers
How to start a FaceBook page
Interact with your visitors (polls, competitions,…)
The days of static brochure-like content are gone. Users want to experience and interact on the web. A great way to do that on your site is to integrate Twitter and Facebook widgets.
Even better is to use polls and competitions with prizes. You can do this via your WordPress site with a plugin, or on your Facebook page. Hold a Twitter competition to encourage visitors to follow you. There are many more ways to interact with your audience.
PollDaddy for your WordPress site
Add an about page to your site
Let your visitors know who you are, as a person. Talk a little bit about yourself, write a short bio, post a photo of yourself,…
Putting a face on your website will make visitors feel they can trust you, and communicate with you more easily.
Guidelines for Writing a Good About Page
target popular keywords
When writing any content for your website, keep in mind the main objectives and audience that you want to reach. Focus on one or two main keyword phrases and if you’re using a WordPress blog, make use of tags.
You’ll need to do some research to find relevant and popular keywords to rank for. You can use the Google adwords tool for that. Here are some resources to get you started.
Keyword research guide from Copyblogger
ask for feedback
So you are getting a steady stream of traffic to your site, great. Now you want to analyse their behaviour and understand what they find valuable, and identify problems. By doing this research, you can increase conversions and return visitors.
There are many options to get insights from you site visitors, such as click heat maps and of course analytics such as Google Analytics.
I also like to have a simple feedback form that’s not too obtrusive, see the link below called Kissinsights.
Sometimes you’ll find you need to modify the layout to make the call to actions easier to find, for example.
Instant Customer Feedback with KISSinsights
I hope this article will help you make your website better and get more conversions and traffic!
Feel free to leave a comment below.
by on October 30, 2010
Designing in the browser
Open Firefox, activate the Firebug panel, open text editor, place both windows side-by-side, tweak CSS in Firebug, copy and paste code into Notepad++, save, refresh browser, rinse, repeat…
Sound familiar? The part when you CTRL+s, then F5 in the browser is a pain for me, so I spent most of yesterday looking for a solution.
First of all, I’m on a PC running Windows 7, so no, I can’t use Coda or CSSEdit. Anyway these don’t offer all the features of my ideal software.
Features that I want from my ideal software:
- Target elements like with the Firebug inspect element tool to rapidly select element for which I wish to change the CSS
- Layout and typographic grid overlays with easy controls for resizing, and as an added bonus, remember the settings per document
- Embedded browsers for instant preview like Firebug does, but be able to select any rendering engine I want.
- FTP editing
- some kind of integrated version control, but with a GUI, not command line
- a graphical interface for setting CSS3 properties such as gradients, borders, colors,etc… that will generate vendor extension syntax if necessary
First I tried several Firebug extensions that allow to save changes, but they all fail in some respect because they work on calculated CSS, which means that they will only save the CSS used in that particular rendering. You’ll lose the webkit specific declarations, media queries, etc…
I also tried using the Web developer toolbar which has an edit CSS panel with a save button. It has several bugs that make images and backgrounds disappear and other rendering problems.
I also gave Stylizer a try, which comes very close to what I need, except it relies heavily on a GUI for nearly everything, so it’s not up to date with the latest CSS3 properties. If they had a more basic version, which would allow manual coding instead of using the GUI, it may be a winner.
TopStyle also came very close, except the preview browser is internet explorer 8. They tried to include support for Safari and Gecko, but it’s experimental, not supported and I couldn’t get it to work anyway, it crashed everytime.
During my research, I found this article by Jason Santa Maria : http://jasonsantamaria.com/articles/a-real-web-design-application/, which comes to the conclusion that there is a need for a web design application for designing in the browser.
I also found a web app called quplo , but it’s very buggy at the moment, I couldn’t make it work.
another web app called buildorpro :
It isn’t open to sign up yet.
by on September 16, 2010
Semantic Star rating with the meter tag
Here’s a nice semantic way to markup and style a star rating. In this case, it represents the designer’s skills in different areas, but it could be used for a dynamic star rating system, as you’ll only need to update the value attribute of the meter tag.
semantic star rating with HTML
here is the markup:
<section id="skills"> <h3>skillset</h3> <p><abbr title="HyperText Markup Language">HTML</abbr>/<abbr title="cascading stylesheets">CSS</abbr>: <meter class="ir" min="0" max="5" value="4">4 out of 5</meter></p> <p>adobe photoshop: <meter class="ir" min="0" max="5" value="3">3 out of 5</meter></p> <p>javascript: <meter class="ir" min="0" max="5" value="3">3 out of 5</meter></p> <p>web standards: <meter class="ir" min="0" max="5" value="4">4 out of 5</meter></p> <p>mobile development: <meter class="ir" min="0" max="5" value="3">3 out of 5</meter></p> </section>
and the CSS:
#skills meter{
float: right;
background-image: url(../images/skillstars.gif);
background-position: 0 0;
height: 20px;
overflow:hidden;
width: 114px;
}
#skills meter[value="0"] {
background-position: 0 0;
}
#skills meter[value="1"] {
background-position: 0 -22px;
}
#skills meter[value="2"] {
background-position: 0 -44px;
}
#skills meter[value="3"] {
background-position: 0 -66px;
}
#skills meter[value="4"] {
background-position: 0 -88px;
}
#skills meter[value="5"] {
background-position: 0 -110px;
}
To see a demo : demo
The original design is from Design Kindle
by on September 4, 2010
Customize your FaceBook fan page
I recently created a FaceBook Fan page for my website. I wanted to incorporate my portfolio design into it so I started looking for ways of customizing it.
For the page profile image, I suggest a 200px width with 12 pixels margins on both sides. This will allow for cropping which Facebook does automatically.
You can also create a custom tab, using the static FBML application.
Once you’ve added the application, you’ll be able to use custom CSS and HTML to style the page.
At the moment, I only added a banner and a call to action button, as an experiment.
Are you a freelancer and you’ve customized your page? Let me know in the comments!
by on June 26, 2010
WordPress 3.0 custom menus hidden settings
CSS classes for menu items
let’s say that you want to add a new custom menu to your WordPress site. For example, a list of social media links. You want these links to be icons. (Facebook, twitter, RSS)
You are going to need to add a unique CSS class to each link so that you may be able to assign the icon to each of them.
In the default view of the custom menus screen it doesn’t seem possible to add a CSS class to a link. The trick is to pick on the screen options button at the top right of the WordPress admin panel. This will bring down an extra menu where you can options for your menus. The difference of the font menu properties include CSS classes, link targets, link relationship, description.
Now, when you add a link to your menu, you will be able to add a custom CSS class.
custom menus hidden options
Custom taxonomies
Another hidden option in the screen options menu is the ability to display your custom taxonomies for adding them to your menus. So if you have registered custom taxonomies and you want to add them to your menu you will need to check them in this screen options.