Webmasters Gallery

We had shared a lot of useful resources about CSS/jQuery recently. Today, I am going to share useful resources and plugins to create a stylish chart. Graph and Chart are very effective ways of showing data.

There are a lot of different methods to generate graphs/charts. For example, you can use Flash, Javascript, CSS, or server side script such as PHP or ASP to generate them. Today, we are going to look into Javascript solutions to generate charts.

1. Creating accessible charts using canvas and jQuery

 
This article show you how to use fgCharting, a jQuery plugin to convert HTML table into a stylish chart/graph. This plugin support several different types, such as line, filledLine, additiveLine, additiveFilledLine, pie, bar, additiveBar.

2. Emprise JavaScript Charts

This JavaScript Charts supports a lot of features and has a very good documentations. However, it is only free for personal use.

3. Flot

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.

4. Canvas Pie Chart with Tooltips

This Mootools pie chart class is based on Stoyan Stefanov’s Canvas Pie.The code now requires less html markup than the original.

5. jQuery Google Charts

6. jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

7. moochart

moochart is a plugin for MooTools 1.2 that draws bubble diagrams on the canvas tag. Future versions might include pie, bar & line graphs.

8. JS Charts

JS Charts is a free JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting

9. ProtoChart

ProtoChart is a new opensource library using Prototype and Canvas to create good looking charts. This library is highly motivated by Flot, Flotr and PlotKit libraries.

10. Raphaël—JavaScript Library

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

11. PlotKit

PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.

12. Flotr Javascript Plotting Library

Flotr is a javascript plotting library based on the Prototype Javascript Framework and inspired by Flot.Flotr enables you to draw appealing graphs in most modern browsers with an easy to learn syntax.

13. Yahoo! UI Library: Charts

The YUI Charts Control visualizes tabular data on a web page in several possible formats including vertical columns, horizontal bars, lines, and pies

14. TufteGraph

TufteGraph is a beautiful jquery Chart plugin.

Content Management System, or CMS is an application used to manage news easily so that users can publish, edit and delete articles from the back-end admin system. HTML and other scripting language are not necessary to operate a CMS, though having them will add more advantages.

Since we had looked into 22 open source PHP frameworks, i decided to do a roundup of 20 Open Source PHP Content Management Systems so that readers who don’t have strong PHP knowledge can easily create their website using free and open source CMS.

1. WordPress

WordPress is a powerful yet easy to use content management system. Initially it was designed as a blogging platform. However, it slowly become popular and can be customized into a powerful CMS with some tricks and plugins. I had wrote an article about WordPress SEO plugins and also talked about things that you should know about WordPress 2.8.

2. Drupal

Drupal is a free and open source modular framework and Content Management System (CMS) written in PHP. It is used as a back-end system for many different types of websites, ranging from small personal blogs to large corporate and political sites.

3. Joomla

Joomla is an award-winning content management system (CMS), which enables you to build Web sites and powerful online applications. Many aspects, including its ease-of-use and extensibility, have made Joomla the most popular Web site software available. Best of all, Joomla is an open source solution that is freely available to everyone.

4. Frog CMS

Frog CMS simplifies content management by offering an elegant user interface, flexible templating per page, simple user management and permissions, as well as the tools necessary for file management.

5. SilverStripe

SilverStripe is a PHP CMS built with Sapphire framework, and it uses MVC design pattern. you can view example sites that built with SilverStripe from the official webpage.

6. Mambo

Mambo is a full-featured, award-winning content management system that can be used for everything from simple websites to complex corporate applications. Although some Mambo sites had already migrated to Joomla, but i think i should include Mambo as it is still a great CMS.

7. TYPOlight

TYPOlight is a PHP 5 CMS and it has a lot of features such as live update, cross-browser CSS framework generator(IE7 compatible), templated based front end output, use Ajax and Web 2.0 technologies. You should check out the main page for more info.

8. Concrete5

Concrete5 is an open source content management system with simple administaror interface. You can edit a web page live by using the editing toolbar provided after you log in as administrator.

9. Textpattern

Textpattern is yet another very popular content management system. It requires PHP 4 to run and has a lot of plugins that you can use for various customizations.

10. Symphony

Symphony is a CMS that uses XML/XSLT as its templating language. Symphony lets you customize anything you like, from the website’s URL structure to your publishing environment. For a non programmer, this CMS might be complicated to learn.

11. MODx

MODx is both a PHP application framework and content management system. MODx is the first free PHP CMS to offer an API that fully supports Web 2.0 Ajax technology. It is SEO friendly CMS, and allows you to configure the meta content for each page.

12. Habari Project

Habari is a highly recommended open source blogging platform. It is being written specifically for modern web hosting environment, and uses modern object oriented programming techniques.

13. CMS Made Simple

CMS Made Simple is highly customizable and there are a lot of Modules for you to download. The Documentation is pretty complete and easy to follow.

14. ImpressCMS

ImpressCMS is a community developed Content Management System. It is highly scalable and is extremely useful for managing online communities.

15. Exponent CMS

Exponent uses an intuitive and flexible content editing system that allows website pages to be edited on the page as it is displayed. You can download modules and themes from the official website too!

16. MiaCMS

MiaCMS is a fork of the Mambo CMS. It has a powerful and extensible third party entension system, and also a flexible site theming capabilities. MiaCMS supports OpenID and can consider to be a stable and mature CMS.

17. Jojo CMS

Jojo is a search engine friendly CMS. You will have SEO friendly URL to your article, and Jojo will handle www/non-www domains for you. Beside SEO friendly, Jojo also lets you extend the functionality by adding product databases, blogs, image galleries or whatever takes your fancy.

18. TYPO3

TYPO3 is a free Open Source content management system for enterprise purposes on the web and in intranets. It offers full flexibility and extendability while featuring an accomplished set of ready-made interfaces, functions and modules.

19. Elxis CMS

Elxis CMS comes with a lot of features such as Search Engine Friendly URL, strong security, adjustable member list and complete user profiles. Its automated tasks, modern design, AJAX technology and multi-lingual interface helps you be more productive.

20. Chyrp

Chyrp is a lightweight blogging platform and it uses Twig as the templating engine. The documentation is quite complete and you can download a lot of useful modules from the main site.

Themes? Just what are we talking about here, a blog theme?

theme? Social network page theme? What, exactly?

If you have a page on the web and that page is owned by you, or represents you, you can present a “theme” coupled with the content. This will separate you from the masses and provide some stamp of uniqueness that represents you, or what you are trying to convey.

Now that you have decided that a theme is something that you want. You have the choice of a free theme, or a customized theme. A free theme, of course, is just that, free, and usually comes with the web page, or site you are dealing with. It will be limited in scope and will vary from single color backgrounds to multi-colored backgrounds, but it usually stops there. It may be quite sufficient for you and you need not look any further to get added impact. In fact there are some rich, and warm colors with free themes and you might want to stay with something simple. This will depend on the type of page the theme is going on.

If the page is very shallow in terms of showing the theme, then you do not need to be elaborate. If there is a dearth of space that needs to be filled up, or your entire page background is covered, then you might want to consider something with a little more pizzazz, a little more artistic flair. This you will get from a customized theme.

Now, not all customized themes are created equal. You might only get a choice from a limited package. A theme might be just a “skin”, or it might be more involved and provide buttons, motions and secondary actions when hitting links for instance. So it pays to shop around and look for the best choices based on the theme you are trying to project.

You will almost certainly have the choice of many customized themes when you make your decision.

A contributing actor when making the decision for free or customized is obviously price. A free theme is just that, no cost, and there are a lot of nice free themes available. Some are equal to, or better than premium price themes. For custom, or premium themes, you will get a multitude of choices ranging from a few dollars up to $100. You have to decide whether it is worth paying the premium, and that decision will be based on the audience you want to keep once they get to your site. Premium themes will generally give a clean and more professional look and will likely provide more functionality. The theme developer will usually be able to support the theme, especially the higher price ones. So although there is a cost involved, it may dividends to have that extra professionalism and functionality.

Make your decision based on your need. Don’t throw money away, but neither shy away from paying for a very professional look and feel. You are presenting yourself, your company, or an idea to a global audience. Make it look good and give the visitor a great experience!

You are embarking on a new adventure…your very own website! You may have something to sell, something to tell, or just might want to be on the Internet for some other reason, or just because everyone else seems to be.
Regardless of the reason, there is one thing that all web sites
need, whether it is corporate or personal, and that is an “About” page.about
If you have a corporate, or business web site

, your “About” page will be about the company you have, or the products you are trying to sell. If it is a personal web site
however, the “About” page is usually about YOU.
So, what makes a good “About”, or “About me” page? First of all, I think your audience needs an introduction from you, so I would start with telling everyone, just who you are, and something about your background, and that will include:

   1. Where you came from?
   2. Where you were born and when?
   3. Who your parents were?
   4. What they did (if relevant)?
   5. How you were raised?
   6. You can speak about your religious background if that is appropriate.
   7. Where you are educated?
   8. Did you go to university? If so, what degrees did you earn?

This provides your reader with some idea of where your currents thoughts/ideas might have been formulated.

Try to make these factual statements about yourself entertaining, or at least well-structured and interesting to read. Don’t forget, you are laying the groundwork for someone to read your biography. In doing so, they will continue on reading being interested in what else you have to say on your website.

Now you have provided the reader with your background, begin telling the reader:

    * Why do you have this web site of yours?
    * What are your goals in providing this information?
    * Why information are you trying to impart?
    * What audience are you trying to reach?
    * What message are you trying to pass along to people who reach your web site?
    * Are you interested in trying to convince someone of something?
    * Do you have a cause you are promoting? If so, where in your background would you have reason to promote the cause?
    * Are you published?
    * Are you the creator of some wonderful invention?
    * Are you the son/daughter of someone famous with a need to correct some misconception of your parents?

These are all questions you should ask yourself when writing an “About me” page. The length of the page will depend entirely on your depth of experience in life and what you are representing. I suggest you take a look at as any web sites as you can to get ideas. See what other people have to say about them selves. Check out the “About me” pages for the famous, and not so famous. Which do you like, which “About me” holds your interest, which speaks to you and leaves you with a longing for the life just led. These are the pages that spring off the screen and truly tell you something about the person. Yours should do the very same thing. Good luck and I can’t wait to read all about you!

As Web developers, we never stop hearing about the Mac. A lot of people love to talk about their Macs, but despite the “elite” status of the Apple computer, is there any need for a Web developer to splash money on one? A few weeks ago, Mark Nutter wrote here on Smashing Magazine in favor of swapping your PC for a Mac, and while some of his reasons are good, there are plenty of reasons to stick with (or switch back to!) Windows.

This article explores the best aspects of the Windows PC and, more importantly, the different apps that Web developers can use to become more efficient in their work. Every piece of software mentioned here is free to use.

Developer Tools

Notepad++ (code editor)

After looking at many text editors, Notepad++ is by far the best I’ve found. On top of the standard features you would expect from a great text editor, you can extend its functionality by installing any of the free plug-ins that suit you.

 

Some of the things that really make Notepad++ shine:

• FTP Synchronize
  Allows you to connect to a server by FTP and edit files in Notepad++. Then when you save the file, it is automatically uploaded back to the server. No more saving files in an editor and then firing up a separate FTP client! Bonus: the FTP sync has “Keep Alive,” which pings the server at regular intervals to stop the connection from being closed.
• Document Compare
  Open two versions of the same document and the differences between them are automatically highlighted. Great for finding out where a coding change has gone wrong!
• Code auto-completion
  Auto-completion is a fairly standard feature, but with Notepad++ the code libraries can be downloaded from the website and updated manually. Keeping up to date with changes in the languages is easy then, and you can even write your own library file.
• Panel Views
  Allows you to see two files at once, side by side. Hugely useful if you have a large monitor and want to make better use of all the space.
• Ctrl + D to duplicate a line
  It may sound simple but is surprisingly useful. As an example, it took two seconds to write out all the <li></li> tags for this list!

Texter (text expander)

Texter is a free app from Lifehacker. It allows you to type a few characters, then hit Tab and have those characters replaced with a string of text. This is great for a lot of computer tasks (answering email most of all!), but the real advantage for developers is that Texter lets you specify key presses. For example, {HOME} is interpreted as pressing the Home button.

Take the following hot string:

view plaincopy to clipboardprint?

1. {BACKSPACE}{HOME}<p>{END}</p>

{BACKSPACE}{HOME}<p>{END}</p>

When coding, I type the text of my paragraph, then add a space, press “p” and hit tab. Texter automatically puts the <p> at the start of the line and </p> at the end.

That’s just one example. I have about 35 different strings saved for use in coding, so the number of possible uses is huge.

WampServer (Apache, PHP and MySQL)

Installing a Web server on your local PC is great for development because you can test everything easily and instantly. No waiting on Web servers and dodgy Internet connections. WampServer packs an Apache, PHP and MySQl install all into one simple executable file, so your server will be up and running in five minutes tops.

Clipboard Manager

Clipboard Manager is a sidebar widget for Vista. It displays a snippet of the most recent items that you’ve copied. If you click one of the snippets, it is brought to the top of the clipboard, so when you hit Ctrl + V, you’ll paste that instead of what you copied last.

This is extremely useful when you are working on a document or script for re-arranging chunks of the page or copying properties from one object to another. Clipboard Manager cuts down drastically on the amount of time spent re-copying the same snippet again and again.

AutoHotkey (write your own shortcuts)

AutoHotkey allows you to create your own hot keys or remap existing ones. The scripts can be either extremely simple or quite complex. The Quickstart Guide walks you through everything you need to know.

One of the hot keys I use most is simple: pressing Caps Lock + W to close the current window. Anyone who is used to using Ctrl + W to close a tab in FireFox will find this very handy!

view plaincopy to clipboardprint?

1. ; Close Active Window 
2. Capslock & w:: 
3. WinClose, A 
4. return 

; Close Active Window
Capslock & w::
WinClose, A
return

Syncback (automatic back-ups)

Everyone’s hard drive fails eventually. Online tools like Mozy and Dropbox are ideal for backing up critical files that you’re currently working on, but backing up everything on your hard drive to one of these tools just isn’t feasible for most people.

Syncback is a free tool from 2BrightSparks that automatically backs up all your files to an external drive. (A paid version is available as well, but the freeware is more than enough.)

You select which folders to back up, set when you want back-ups to take place and let Syncback do the work. Back-ups can be done manually or automatically, and only files that have changed will be copied, so it is very efficient after the first run. It will even email you a report if any errors occur during the backup, such as certain files not being able to be copied.

Windows Live Writer (blog posting)

Not every developer needs this, but many of us have our own blogs now. Windows Live Writer is a free tool to help you write blog posts.

The main advantage of this is that it accesses your website and re-creates your design in the program. You can then write your post directly onto the website background, so you can see everything about your post’s presentation and fix it easily.

Is that image too big? Or that paragraph too long? Seeing it for yourself is the best way to catch these flaws.

The Best Parts Of The Mac

OS X does some things very nicely. Thankfully, the best bits can all be re-created in Windows free of charge.

The Dock ? RocketDock

The Dock is probably the most distinctive Mac feature. The large icons and easy access to them appeal to a lot of people

RocketDock brings the Dock to Windows beautifully. Drag and drop to re-arrange, position on any side of the monitor, minimize windows to the dock and more. The demo video from its website below shows RocketDock in action:

Quicksilver ? Launchy

Launching applications from your keyboard is an extremely fast way to work. Mac users use Quicksilver for this, but Windows users can use Launchy. Launchy can be set to index only programs or include files as well. You also choose which directories it indexes. One of the best uses for it is to set up a directory of utility scripts that you can execute from a few quick keystrokes in Launchy.

For example, iTuny is a set of free scripts to control iTunes from Launchy. Now, if I want to skip to the next song, I hit Alt + Space to bring up Launchy and type “inext” to launch the iTunes Next script from iTuny. You can set up scripts for whatever you like, including shutting down and locking your machine.

Leopard Stacks ? Stand-Alone Stack

Stacks are a great way to easily access your most commonly used files and programs.

 

Standalone Stack allows you to create your own stacks in Windows, either in the taskbar or on your desktop. And you can display the files in either a list or a grid, just like in Leopard. For anyone using Rocketdock, you can install the Stacks Docklet from Matonga to get stacks into your dock.

More Control Of Your Machine

Custom Visual Styles

VistaGlazz allows you to control the appearance of your Vista installation. You can create your own custom styles or download them for free. One of the best sources of styles is DeviantArt (which has some OS X styles, though they’re not as polished as the Vista versions!).

Another popular application for theming is WindowBlinds from Stardock, but you need to pay for it. You’ll find plenty of themes for it on DeviantArt as well.

More Hardware Options

Macs come with very few variations in hardware. You have a small selection and just have to choose whichever one is closest to what you need. Because anyone can develop hardware for Windows, the selection is much greater. And because of this competition between manufacturers, companies are forced to offer good value for your money.

That doesn’t just mean better specs for about half the price. Check out this new multi-touch HP laptop, which comes in under the cost of any MacBook. Search around and you will find the perfect machine for your needs.

Huge Range of Devices

On top of the core hardware, you have thousands of peripherals to choose from. For graphics designers, that means a massive selection of tablets. But there are a lot of other devices as well, right down to your mouse. I have a five-button mouse and just hit the extra buttons on either side for small tasks like going backward and forward in a Web browser and Windows Explorer. For developers who have to give regular presentations to clients, this nifty wireless mouse/remote control is ideal.

Conclusion

There are a lot of good things about the Mac, and it’s hard not to get a little excited about them each time you watch one of Apple’s big developer conferences.

What you have to remember is that at the end of the day, the operating system is a means to an end, not the end itself. Whichever system you choose should make your daily work (and play!) easier and more efficient. Windows combined with the great free software and tips I’ve found online allows me to work exactly the way I want. I wouldn’t dream of going back to a default Vista installation with no extras: the customized installation is worth so much more to me than either Windows or OS X on its own.

We would love to hear what aspects of your operating system made you choose it (but not the flaws in the other one that made you not choose it!) and how you use it to work at your best.

oday I’m happy to announce that I have launched a network of five niche gallery sites! Many of us visit design and CSS galleries on a consistent basis for design inspiration, and there is no shortage of galleries to choose from. Some of my favorite galleries are those that exist to showcase work of a specific kind (We Love WP is a good example, it is a showcase of WordPress-powered sites).

Niche galleries are especially useful for designers because they allow you to get the specific type of inspiration that you are looking for without being overwhelmed by too much that doesn’t interest you. You can go to a niche gallery and quickly find helpful and relevant inspiration that applies to your own situation. With that in mind, I have chosen five topics for galleries that I thought would be of use to many designers.

If you have any interest in some of these types of design, please check out what has been posted already and subscribe to the feed or follow on Twitter. Each gallery has been launched with more than 30 showcased items and they will be updated consistently (The amount of new additions will depend partly on how many quality submissions are received, so please feel free to submit your work for consideration. Ideally, there will be about 10 additions each week per gallery).

How many times have you been completely confused at how that ’small’ project turned into such a big one costing double and taking three times the length you estimated? Many of you will say estimating time for web projects accurately is an oxymoron, but by applying a few effective techniques it’s possible to dramatically increase the accuracy of most web project estimates.

1. Why Underestimating Is So Common

There are several reasons, which are freely admitted amongst freelancers and web agencies, as to why web projects are so commonly underestimated – they include:

• The technologies required by the project have never been used before
• At the time of estimating, there are grey areas or complete unknowns
• The client operates in a specialized industry and the solution needs bespoke features that are not familiar to the supplier
• Splitting the project down into the detail would require as much as work as the requirements gathering phase that is chargeable

However, there are also some secret reasons why web projects are commonly underestimated:

• The client needs an estimate for their project tomorrow or they will go elsewhere
• Revenue needs for cash flow now trump the effects of not winning the new work now
• No previous project ‘estimated vs. actual’ data analysis has been conducted to draw on
• Estimating time for a project is not fun

Despite being true, rarely do we admit these reasons to others or even ourselves! The fact is, when working as a web professional, as a one man band or as part of a small busy web team, the secret reasons are an everyday reality that shouldn’t be hidden away.

By first identifying and admitting why underestimating is so common, can you then set about implementing changes to your estimating process that will reduce the barriers each reason creates and increase your accuracy.

Technologies Not Used Before

There are three approaches you can take when confronted with a brief that requires a technology you have minimal experience with:

1. Negotiate a paid for functional specification phase as a first step
2. Consider hiring an expert
3. Research in your own time and make your best guess

Try to negotiate with the client a mini-project where you are paid to conduct a research and functional planning stage before committing to the whole project. This way you can research the unfamiliar technology and deliver a functional specification to the client.

Best case scenario
You give the client confidence, have a much clearer understanding of the work required, re-estimate and are hired for the rest of the project.

Worst case
You have completed foundation learning of a technology you previously didn’t know that you can sell to new clients, you generate revenue and the client has a comprehensive specification they can use in their tender process.

Added bonus
You, and the client, get to find out how you work together, giving both the opportunity to part company before being locked into a lengthy project.

If you’re not able to convince the client to pay for this initial functional planning stage, and can’t find a suitable expert in the technology, but want the work and have confidence in your ability and passion to learn what needs to be learnt, then the best advice is to do some initial research in your own time and just take your best guess!

Estimating Takes Too Long

Thorough web project estimating takes time, but it tends to inherit all the same rules that apply to coding, the more thorough you are, the more accurate you’ll be.

Is it possible you will spend time working out the features required only to learn you haven’t won the work? Will you have given the client a free and detailed breakdown of their project for free? Absolutely, but this is the just nature of sales, some you win, some you lose – don’t get disheartened, try to get feedback from the client on why you didn’t win and use the advice given to refine your next estimation.

Estimate Is Needed Tomorrow

If a client is demanding an estimate tomorrow after briefing you on the project today you should immediately try to assess if the project is right for you by:

1. Determining if the response rate being demanded by the client, and any previous communication, is a sign of the type of client they will be to work with
2. Assessing if the potential gain to your business from the project (high profile client or long-term repeat business) is worth the risk of underestimating and going over budget
3. Trying to confirm a ball park budget range with the client so you can estimate realistically, or politely decline if far too low. The best kind of clients are experienced enough to know this is not someone looking to use up all their hard earned cash but someone looking to provide the best solution they can for the budget

If the results of these quick steps are favorable, be positive and go for it! There will be another chance to decline if you later find out the project is not right for you, and then you may utter the words “Into the garbage chute, flyboy!”

Cash Flow Dilemma

Cash flow is the life blood of any freelancer or small web agency, without they don’t survive.

Occasionally a situation may arise where work will be taken on with the knowledge it may not be profitable. As gut wrenching as this can be, and despite all the comments you will hear how you should never do this, the reality is the bills and wages have to be paid!

When a freelancer or business owner is presented with the choice of committing to a project for a price they know is low, but by taking on the project means they live to fight another month, or risking not taking on the work on in the hope more profitable leads appear – empathise with and respect them.

It is a tough and gutsy decision that only they can make but rest assured they have their bills or your wages at the forefront of their mind when they make it and estimating low for a project isn’t always as naive a decision as it may appear to those not on the frontline.

Estimating Is Not Fun

Ok, so it’s not as sexy as adding that beautiful grunge effect to your design, and it’s not as exciting as tweaking that jQuery plugin to work just the way you want, but estimating time for a web project more accurately is almost certainly more important than both when it comes to sustaining a freelance or small web agency business.

However, while few will disagree as to its importance, many will continually find it difficult to muster up the passion and diligently estimate time for a web project, but why!? Here are more secret reasons:

• It’s hard work and takes many outside their comfort zone
• Estimating usually has to be completed alongside your plans for your already fully booked week
• It forces you to try and predict the future
• It makes you largely responsible for the business’s sales success, solution offered, project profitability and growth and survival of your business (scary stuff!)

Web agencies often have the edge here because they will have dedicated salespeople or project managers who are used to the rigors of estimating, but freelancers will generally be more inclined to find the whole process rather boring and just want to get on with the fun stuff.

While we can all no doubt empathise with this, the harsh truth is that, when running a small business or operating as a one man band, one or two badly estimated projects in quick succession can ultimately lead to the demise of both!

So what other techniques can be used to further increase the accuracy of your estimates?

2. Consistent Project Phases And Tasks

As previously mentioned, when being asked to provide an estimate for a project, it is invariably not something anyone has allocated time to do. As a result of this, estimates are often put together quickly and if compared to past estimates it’s not uncommon to see the same project phase or task classified in many different ways, and for similar sized projects the estimates for each to be completely different.

If you win the work you may think “so what?”, and to some extent you would be right, however, the first step in creating more accurate estimates on a long-term basis is to always break down the project phases and tasks in a consistent manner. Web projects can generally be broken down into the following phases:

• Research and planning
• Solution design
• Design
• Front-end development
• Back-end development
• Content entry
• Testing
• Go-live

By always beginning to compile estimates using a consistent high-level breakdown means you can have a re-usable template eventually and track the time spent on each.

But don’t stop there! Consistently breaking each phase down further will not only increase the accuracy of the estimate, but again, also result in valuable data over time.

3. Getting Granular

Now the project estimate is broken down into high-level phases, it’s time to get more granular and break each phase into tasks. This is where the estimate begins to become more tailored to the specific project, but also includes common tasks that you can add to your estimating template and use again and again. For example:

• Research and planning
  • Requirements gathering
  • Project planning
• Solution design
  • Sitemap
  • Wireframes
  • User workflows
  • Functional specification
• Design
  • Initial homepage look and feel
  • Content page
  • Master content page template
  • News main page
  • News item
• Front-end development
  • 5x Templates build XHTML/CSS
  • JavaScript and AJAX
  • Cross-browser fixes
• Back-end development
  • CMS Setup and configuration
  • News feature
  • Contact us form
• Content entry
  • Homepage copy
  • Addition of 10x News items
• Testing
  • Internal functional testing
  • Client User Acceptance Testing (UAT)
• Go-live
  • Live server setup
  • 301 re-directs from old site URLs to new

The page templates and features specific to the client’s project can be listed at this stage, alongside the tasks required in all web projects.

Once you get into the habit of compiling estimates in this way you will find yourself envisaging the phase and tasks lists during the pre-sales initial communication with the client and this invariably:

1. Refines your requirements gathering skills to quickly get the information you need in order to put together a thorough estimate
2. Forces you to think the project through in a step-by-step fashion and minimises the chances of missing a large, or several small, tasks that could end up putting you over budget because you didn’t factor them in

So, you now have a pretty solid phase and task list for the project and all that’s left is to estimate hours for each and send it off to the client right? Maybe, but wait, what exactly does the News feature consist of? Is your interpretation of a News feature the same as the client’s?

Now is the time to investigate and define it, as opposed to after the contracts have been signed.

Getting More Granular

While it’s tempting to estimate hours for the News feature and submit to the client, if possible, try to nail down exactly what the client wants from this feature at the estimating stage, after all, if you look around, you’ll be able to quickly find different variations of the same feature that have a huge differences in terms of size, features and complexity, and thus cost.

Using the News feature as an example, talk to the client and determine what it needs to do so that you can again minimise the chances of missing something in your estimate that could, when added to the other ’small’ missed tasks, amount to a serious budget overrun situation.

You may find out the News feature requirements are:

• News feature
  • Add/edit/delete news item
  • Upload image
  • Attach PDF
  • Auto-archiving
  • RSS

Excellent, you have now defined the News feature and can confidentially estimate the time you think it will take to implement. But hidden in even the most basic and common of features lay more ’small’ things that if not captured, considered and quoted on, can add to the likelihood of overrun.

For example, the client has specified they need to be able to upload images to news items, but do they need any of the following:

• Auto-resize capability?
• Auto-thumbnail generation?
• Full-screen viewing?
• Caption addition facility?

Any of the above News features could add a few hours to the overall project and thus need to be ideally catered for in your estimates – a few missed ‘couple of hours’ tasks and suddenly the project is two days over budget.

Getting granular and mentally trying to build the solution means you are able to identify and address these issues early on, making sure to cater for them in your final estimate.

“A Web Project Manager knows how to design and develop most of the project on his own, even if with poorer results compared to his team. This allows him to estimate projects with good approximation and to understand his team’s problems and difficulties”

Introduction to Web Project Management, Antonio Volpon

Advantages Of Getting Granular, For You And The Client

By getting granular with project phases and tasks for estimates you are also able to tweak them very quickly if you discover the estimate you have submitted is above the client’s maximum budget.

For example, how often have you been told by a client they want to go with you but your quote is ‘just a little too high’ and ‘if you could reduce it by five hours we can business’? Usually this means you have to do one of two things; drop the hours you estimated for the News feature and hope you can explain later down the line how the budget does not allow for image uploads and thumbnail generation etc., or remove the News feature altogether.

But, if you have a granular estimate for the News feature, you can confidentially, and at this crucial expectation setting stage, simply remove a couple of sub-features of News and the News image upload functionality in order to align with the client’s budget.

When communicating this to the client they will clearly see what you are proposing to drop and why and they will still get the News feature they need, but perhaps with a few less nice to haves. Using this approach is usually well received by clients as they have full and transparency on the reasoning behind the changes to your proposal.

This kind of transparency during the sales process will invariably give the client confidence in you because it demonstrates to them you:

1. Are an expert in your field
2. Can envisage the project in its entirety
3. Adopt a diligent and methodical approach and more than likely will continue to work this way on their project

Best of all, if you are successful with your estimate and you are hired you already have the foundations of:

1. An instant statement of work
2. A defined project scope
3. The timings you need to put together an accurate project schedule with milestones
4. Client expectations settings very early
5. Demonstrated your thoroughness and understanding of their business and requirements to the client

So what now? Well, now you have won the work, it’s time to start collecting the data that will enable you to create even more accurate estimates in the future.

4. Consistent Time Tracking And Analysis

Before starting the work, you should first replicate all of the phases and tasks, along with their time estimates, into your time tracking tool of choice. Once this is done, you can then begin work and make sure to be disciplined and track everything you do and log it under the right category.

Of course many of you will do this by default as it allows you to:

• Know how long you have to complete each phase
• View how long you have for each task and sub-task
• Reporting on how long everything actually took

But the real value of keeping a consistent set of high-level phases, from estimate through to time tracking, is that after a few projects you can begin toanalyse the data and start to identify averages and trends that you can use to refine your next web project estimate.

Analyse Estimated vs. Actual Time

This is where the real magic happens! By breaking down and tracking your time for multiple projects into consistent phases and tasks, you will have valid comparable data to analyse, for example, after five projects, once you average out the numbers, you may well discover the following:

• Research and planning took around 5% of the total project time to complete
• Solution design: 5%
• Design: 25%
• Front-end development: 15%
• Back-end development: 30%
• Content entry: 8%
• Testing: 10%
• Go-live: 2%

The more projects completed that use a consistent estimating and time tracking structure, the more real your averages will become.

 

With this valuable information you can then set about increasing the accuracy of your next estimate by being able to, assuming you can get a budget range from the client:

• Immediately allocate the estimated hours you need for each phase
• Determine the best solution you can offer the client for their budget

It even allows you to accommodate the client that ‘needs an estimate tomorrow’ when you don’t have time to break it down in detail.

Conclusion

Estimating time for a web project accurately is something many attempt everyday but few manage to succeed at. There is no one formula that will satisfy every situation and the chances of estimating what a project will cost exactly are almost zero.

But it is possible to drastically increase the accuracy of your web project estimates by:

1. Identifying the reasons why underestimating is so common
2. Understanding why it is so important
3. Resisting the temptation to get granular
4. Creating a consistent, methodical and re-usable estimating process
5. Analysing the estimated versus actual data from multiple projects to identify trends

“The Devil is in the detail: When people say that the devil is in the detail, they mean that small things in plans and schemes that are often overlooked can cause serious problems later on.”

Further Resources

Here are further articles and related resources that may help you to increase the accuracy of your web project estimates:

• Web Development Project Estimator
  A neat little online tool that allows designers and developers to quickly create cost estimates for web projects.
• Schedule and Cost Summary
  This Cost Estimate and Scheduling spreadsheet provides a lightweight method for learning to estimate time to complete a web design project, and calculating cost for completion.
• Tick
  Simple to use time tracking tool that makes it easy to keep track of project budgets.
• How to Estimate a Web Site Project
  Patty Ayers discusses a five-step process for estimating web projects.
• Simple process to estimate times and costs in a web project
  Antonio Lupetti describes his process for creating web project cost estimates.
• How to Accurately Estimate a Web Design Project
  John Reeve talks about catering for the usual missing elements in estimates; project management, contingency time and margin for error.
• Estimating Resource Time for Web Development Projects
  Bill Breen explains one way to approach estimating time for web projects, and how the size of the project should influence you estimate ranges.
• How To Estimate Time For A Project
  A Sitepoint article by Alyssa Gregory.

’m in a pretty good mood, so here is a bit o’ eye candy to indulge in 😉 Click links to be taken to sources.

 

 

Leafy graphics are often loved by designers for the soothing effect and natural feel. Here are a dozen textures of various types (lush green, partially dry/destroyed, fully destroyed, underside of leaves etc.). Below are previews for two of my favorites from the collection.

Click on the images below to download them (in full size), or visit the Texturewell site linked at the end for the full package (those guys have lots of useful textures).

Grapevine leaf texture

Ficus texture

Leaf Textures pack [T

 

As freelancers, we’re often only limited by our imagination, so it can be difficult to see whether we are progressing in our given field. Sure, we can produce some great logo designs or write an article, but we were able to do that a few months ago as well. In order to stand out in a sea of talent, it’s often the case that you need to take your skills to the “next level,” something far easier said than done.

Today I want to look at plateaus in terms of ability, and four tried and tested methods to help you get through them. The journey of mastery is an on-going process, but there are lots of ways to improve our talents along the way.

1 — Slow Down

I’m not sure if this is common across the board, but I can have periods of a few weeks or more when I’m really productive, I’m firing on all cylinders, and everything is going smoothly. Then, for no known reason, I’ll start putting things off, focusing on the easy work so I can skip the hard and checking my email just to feel busy.

Put simply, the dreaded p-word kicks in. Yeah, you know the one…procrastination.

This type of slowing down is usually due to a lack of self-discipline, and not what I’m referring too here. Instead, in order to improve your skills, one effective technique is to stop rushing through your work habitually, and slow down to focus on specific actions.

Once World Champion speed-typist, Albert Tangora, would intentionally type at half his normal speed for a few weeks whenever he hit a plateau. He took time to get the feel for what he was doing, and once he started pushing himself again, he found that he easily broke his previous records.

Improving your skills isn’t always about frantically trying to push your limits further and further. Sometimes it’s good to slow down, really focus on what you are doing and take everything in.

There are lots of ways you can implement this ’slowing down’ into your routine, depending on what you do:

• Chase the smaller, easier clients for a while instead of the big fish
• Write your articles slowly, with more care and attention
• Obsess over your lines of code and really force yourself to think about what you are doing

The aim here is to try to turn-off the auto-pilot and concentrate on specific actions at a slower speed. You may only need to do this for a very short time-frame to notice improved results.

2 — Go Back to Basics

The process we have each used to build our current ability is quite honestly, just a case of trial and error. Our mind stores our successful actions and over time these successes become natural. You can look at driving to see a good example of this. Once you have been driving a car for a while, you don’t need to think about when to use the clutch or change gear, you just know.

One of the reasons we can hit a plateau (or at least feel like we have) is because we have forgotten what it feels like to succeed. We’ve forgotten what it is like to notice our own improvements and achieve things we have never thought possible. We’re often lacking, what scientists call (seriously), the winning feeling.

The winning feeling is simply an emotion we get when we accomplish certain tasks. This is a huge necessity for beginners, but when you’re very advanced in your field, it can be hard to know that you’re improving. It’s often the case that the better we get at something, the more critical we become of our own work; practically eliminating this winning feeling from our realities.

Just for a while, try going back to basics so you can re-live this winning feeling in your chosen field. Write a simple program that you know will do its job, create a website design that doesn’t have any fancy features or write a basic article for a directory that nobody will see. Go back to basics and recall what it is like to prosper.

When you return to your more important tasks, you can start to see how far you really have progressed.

3 — Practice

I know this point is fairly obvious, but obvious just means most are aware of it, not that it is bad. “Practice makes perfect” has to be one of the most common phrases in the English language and for good reason, it’s true.

I recently read Outliers by Malcolm Gladwell and while he missed out one very important point, it was packed with fascinating information. One point that really struck a chord with me were all the examples of talented and successful individuals (in their field) who had spent at least 10,000 hours honing their skills. (10,000 hours, by the way, equates to working on your talent: 5 hours per day, 7 days per week, for just less than 5 and a half years).

What really interested me was that when looking at current professionals such as violinists and pianists, there was not one exception to the rule. There was nobody who appeared to have some God-given talent and didn’t need to practice that much; they all had to put an extreme number of hours in to get where they were.

I think that this in itself really shows the power of practice.

4 — Look at Finished Results

I am under no illusion that I still have a long way to go in order to improve my skills as a writer, but I have definitely progressed a lot over the last few years. One thing that I can recall being very closely linked to my improvements as a writer is when I started to read more books.

I read about one book every week and whether I enjoyed the content or not, I always felt that even just looking at different styles of writing helps me to better my own. This doesn’t just have to be an idea that writers can use though, far from it.

If you’re a designer, look at logo design books or CSS galleries. If you write Facebook applications, look at the developer forums to see how people are doing things or try to dissect what is already out there. Whatever field it is that you are in, take time to look at the end results from other talent, and you’ll no doubt be inspired to improve your own.

If you keep doing this you’ll start to begin to define what is good to you versus the type of work you wouldn’t want to produce, and then use those good examples to benefit your own output.