by on December 29, 2010

Free eBook : ultimate list of WordPress plugins

Ultimate WordPress Plugin list

To download your free copy, just fill in the form in the sidebar, which will take you to the download page.

I never cease to be amazed by the quantity, quality and diversity of WordPress plugins. There are several ways to find the right plugin for the task at hand such as searching on google, on WordPress.org or reading a blog post which lists the most popular WordPress plugins.

Over the past couple of years, I have developed many WordPress websites, and I’ve found myself relying on the same list of core must-have plugins. Through trial and error, I have selected the most reliable, powerful, less resource intensive, most actively developed plugins to use on all the sites I develop for clients.
And now, I am sharing this list with you, so go download it already!

I’d love to read your comments about the ultimiate list of WordPress plugins, feedback and suggestions are welcome, just leave a comment below.

Filed Under: Article, WordPress Tagged With: , , , ,
by on December 6, 2010

HTML5 template

This weekend, I created an HTML5 document that contains all the elements that are currently valid in the specification. I hope this can be helpful if you want to test your CSS styles.
Let me know if it you find it useful or if you have any feedback!

Filed Under: Article Tagged With: ,
by on December 2, 2010

Success Story: Brian Gardner of StudioPress interview

Discover how a WordPress designer launched a successful premium theme business with practically no investment

Filed Under: Article Tagged With: , , ,
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

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

Filed Under: Article Tagged With: , , ,
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!

Filed Under: Article
by on June 18, 2010

My favorite web design related apps

Here is a list of the applications that I use in my day to day web design work.

When I’m collaborating with other independent web designers or programmers (I don’t use the term freelancer), I need a tool to centralize all our activities and communication regarding the project at hand. While Basecamp is an excellent project management app, which I use on some client projects – usually when they have a subscription and add me as a user – it doesn’t have a good free plan. I use TeamBox, which is a great online app, similar to Basecamp, and allows to manage 3 projects concurrently. You can archive projects, which will free a slot for new projects.

I use the free plan on Freshbooks, which also limits the number of clients, but allows all the functionality of the paid plans.
It also has a time tracking tool which you can use to create an invoice from the logged hours. Which leads me to time tracking.

I recently discovered Toggl, which seems to be a great app. I use the free plan limited to 5 users, so perfect for me.
It has a desktop utility which seems to be very clever.

I use Balsamiq mockups.
I use the free plan for getsignoff or notableapp for getting feedback on the design.

I use Photoshop. Of course, it’s not free, but it’s an industry standard, so there are many resources for learning how to use it. Also clients usually give me Photoshop files to work with.
I might move to Fireworks in the near future for creating my designs.

I use PhpStorm for coding HTML, CSS and Php.
Unfortunately the current version doesn’t permit to edit a unique file via FTP, you first have to download the whole project to a local copy, which is actually better. It means you work on a local copy and synchronize to the server. But sometimes, you just need to quickly edit a file so I use NotePad++ with the FTP plugin which is very buggy, it disconnects often or gives errors.

For keyword research, competition analysis, promotion,etc.. I use Market Samurai. It’s a free tool that’s really powerful to quickly get the information you need.
I first discovered Market Samurai during the Thirty Day Challenge, it’s a free course to learn how to start an online business, how to promote it, how to optimze it for SEO, etc. It’s really fun and I encourage you to participate this year, it starts in August, with a ‘pre-season’ in July.

Filed Under: Article Tagged With:
by on June 5, 2010

JetBrains PhpStorm IDE is awesome


I thought I’d post a quick word about PhpStorm, a new programmer’s editor that has just been released as version 1.0
It was featured on Nettuts a while ago while still in Beta, so I decided to give it a try.

Also, there is WebStorm which is specific for front end development, but PhpStorm has the same features plus PHP support. So for WordPress developers it’s recommended to get PhpStorm.

Anyway the price is 39$ for WebStorm and 59$ for PhpStorm, so I’m not sure if they’ll sell many licences for WebStorm.

The best features are:

  • Native integration of Zen Coding, which allows to rapidly code HTML
  • Version control (git,subversion,…)
  • Automatic synchronization of remote files (see this screencast for a detailed explanation)
  • code completion for php, css, html, js
  • javascript debugging

    • and more!

I’m still discovering the many features that it offers. I’ve been waiting for such an IDE for a long time. And it’s really a bargain, 59$ until September.

Filed Under: Article Tagged With: , ,
by on February 6, 2010

IE transparency and font rendering

While designing a website, I wanted to add some semi-transparent backgrounds using CSS rgba.
In this article, the author suggests using a PNG as a fallback for browsers that don’t support the rgba declaration.
Having read about Internet Explorer’s proprietary filters, I decided to use that instead, to avoid having to download another image.
I added the following declarations to the IE stylesheet with conditional comments:

.content, #primary {
       background:transparent;

     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ebe7e7,endColorstr=#80ebe7e7);

	}

.page-title, .singular-page-title {
	       background:transparent;

                  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80146ea4,endColorstr=#80146ea4);
}

This is the result:

You can see that the result is not very pretty! The font doesn’t seem to render very well.

I suspected that the IE filters were the culprit, so I removed the declarations, and here is the result:

Much better!

Conclusion: I’ll use the PNG fallback method.

Have you experienced this issue? Is there a fix?
Leave your comments!

Filed Under: Article Tagged With: ,
by on January 19, 2010

I made the switch to Hybrid framework

After reading this post, I decided to give Hybrid a try, and I liked it so much that I have just finished migrating this site to the Hybrid framework!
I didn’t have to create any custom page templates, however, I did have to dig into the functions.php file and play around with filter hooks and the likes.
It was hard work but worth it.

Filed Under: Article
by on January 15, 2010

Magento theme design

I haven’t posted any designs in the last two days, but that doesn’t mean I’ve been doing nothing! I plan on adding another service to my offering soon, that is Magento theme design.
The reason: I feel that although I enjoy very much working with WordPress as a CMS, I don’t want to put all my eggs in one basket, and it will allow me to reach more potential customers.
I spent all day yesterday reading up on Magento’s theme design process, and the least I can say is that it’s a steep learning curve!
What’s more, the documentation is not very easy to read, nor is it complete.
I also read the book Magento 1.3 theme design, but I have the same gripes as with other books by this publisher, they are not easy to follow, the examples don’t always work, so I’m still not satisfied.
Then I stumbled upon this screencast series which is very recent, only two episodes have been published, but it looks promising and I can’t wait for the next episodes.

Here is another resource : http://www.designdisclosure.com/2009/07/how-to-magento-ecommerce-tutorials/

Filed Under: Article