Archive for October, 2009


Site Maps: Keep Your Web Projects Profitable

It can be tough managing a website project. You discuss a price for the project and then meet with your client for hours to determine how their website should look like and what should be on it. Then at the end of the design phase, you find out that the project has doubled in size and the client is asking for way more than you originally promised.

How do you keep your project costs in line, but still allow the client to get the website that he wants? And how do you keep your sanity in the process? Here are some guidelines for keeping your project organized:

1. Set up you client’s expectations properly.
Make sure that your client knows exactly what he will be paying for. Don’t just come up with a number that you think is “high enough”. If you quote $8,000 for a website, what does that include? What happens when the client wants to add 10 more pages, how much will you charge? What happens when the client argues that he mentioned those 10 pages in your first meeting and they should have already been included? What happens if the website is so advanced that you can’t program the website for less than $8,000?At Flip Studios, we price out projects in terms of the design, the number of pages in the site as well as each advanced feature that the website will require. This helps the client realize exactly what he’s paying for and which features are more costly. It gives him control to determine if he wants to add more pages or think about consolidating some sections. It sets the expectation that additional pages and features will cost extra.

2. Use a site map to list out all pages in the site.
This will help to determine the actual page count for the entire website. So when you create the site map thinking “About Us” will be a single page, when you sent it to your client for review, he will mention that he thinks it should have 3 sub-pages in that section. Include the site map in your proposal so that the client agrees to the scope of the project.

Your site map doesn’t have to be super complicated to be effective. It needs to keep track of the site structure and organization and the overall page count of the website. The following is an example of what your site map could look like.

sitemap-example-550

3. Talk about what will be on each page of the site.
If the client says he wants to add a property list section, you might be thinking a single page with static text and images, but your client might be thinking of an interactive zip code search, the difference between these features can end up being thousands of dollars and who will be left footing the bill?

Make sure you spell out each feature in your proposal so that it is clear as to what the customer is paying for. If you don’t know what the client wants on each page, include an assumption in the proposal like the following:

“15 website pages as specified on the site map diagram, all pages will include static text and images.”

Then if your client says he meant something different, your proposal will be clear on what was included and you can create a new proposal for the new features.

4. Check on your costs before you provide your client a price.
Don’t give your client a price for something without determining what it will really cost you. Sure that dynamic mouse-over feature will look great and will “wow” all of the website visitors, but don’t throw it in for free and don’t tell the customer it will cost less than it will. Some whiz-bang features look great and seem easy to develop, but they can actually take a lot of time to implement and cost you a lot. Your client won’t mind if you need to look into the cost of adding certain features and your margins on the project will stay profitable.

Take a Sneak Peek at Adobe Photoshop CS5

Check out what’s coming up in the new version of Adobe Photoshop!

What size should I design my website?

Today we got asked this question, and thought it would be worth posting:
What size should I design my website?

The answer varies depending on who is going to be viewing the website and, more importantly, what size screen they are using.  As a general rule, your website should be as small as it has to be to fit comfortably in your viewer’s smallest screen resolution without creating a horizontal scroll bar.

As of today, the average website visitor (typically more than 90-95% of your visitors) is using a screen resolution that is at least 1024 x 768 (according to http://www.w3counter.com/globalstats.php).  This is the standard resolution for a 17monitor.  The larger the screen, the larger the resolution that can be displayed.

To find out what size screen resolutions your visitors are using, you can install Google Analytics on your website.  This code will also tell you what browsers they are using and other helpful information.  The following is a screenshot from the Google Analytics for FlipStudios.com.  You can see the break down of the various screen resolutions for our website visitors.

analytics-screenshot-550

Rule of Thumb
A good rule of thumb is that you create your website design with a width of 960px. This will allow for some space on either side of your site design, which will give your website visitor a sense of balance to the design. This also allows you some additional benefits that we’ll cover in a future article.

The height of your site really depends on how much content you have and how much you want your website visitors to scroll up and down to view your website content.  Generally 1500px is a good standard height for your website content, but keep in mind that the less scrolling that has to take place, the more likely your website visitors are to see the content you are providing.

Display Important Info “Above the Fold”
As with print design, it’s a good idea to display the most important text or images “above the fold” or “above the scroll line”.  A website user at a resolution of 1024 x 768 will see about 550px of your design without having to scroll down to see more, so try to design the important elements of your design within the top 550px.

Design Templates
Click below to download a Photoshop or Illustrator design template to help structure your website design files:

Download Adobe Photoshop template
Download Adobe Illustrator template