Why I charge a lot for a website

Googling “web design price” returns so many price variations it would drive anyone — especially a newbie freelance web designer/developer — up the wall.  It’s not funny.  You’ll see prices like “$299 for a 4-6 page website,” $350 a homepage & $75/page,” etc.

This is cheap, but usually they’re also ugly because these websites use already-made, boilerplate templates, which, in the end, makes the website just like the 50,000 others already out there.

Designing and developing a website takes a lot of time and effort, especially if the person working on it has his/her reputation on the line.  Being a believer of “you get what you pay for,” I believe this also applies to web design/development.  You can either buy a Toyota Corolla (cheap and like everbody else’s car) or get a Ferrari (expensive but unique).

A passionate and good designer/developer would employ the following (at the least):

  • Best practices
  • Standards-compliance
  • Use optimal CSS/XHTML structure and adaptation
  • Compose professional-looking graphics
  • Create a clean, unique, and striking feel of the website
  • Be so detail-oriented as to having OCD (e.g. looks at pixel spacing)

I’m writing this blog not to preach or rant, but to share my experience and explain why I charge $1,500 and up to design/develop a website.  I’ll say it again, it comes down to “you get what you pay for.”  Heck, I put in a lot of time and effort, not to mention the time I’m losing from spending time with my family, to create that quality website.

Creating a favicon in WordPress

You’ve probably noticed some websites having an image in the address bar, like so:

image

These are called favicons (short for “favorites icon”) and in this post I’ll show you how to add one into your website.

  1. Create an image you want to represent your website (most likely you already have a logo for your blog).
  2. If the image is not square (i.e., the width and height are not the same), convert it into a square image, either by cropping or adding whitespace (or blackspace) to the sides or top and bottom.  You can use GIMP or PhotoShop.
  3. Resize the image to 16 x 16 pixels.
  4. Save the file as favicon.ico.
  5. Copy the favicon.ico into:
    1. Your current theme’s main folder (i.e., wp-content/theme/themename)
    2. In your website’s main directory (i.e., http://sitename.com/favicon.ico).
  6. You might as well add this line into your current theme’s header.php file for older browsers to see it:
  7. <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

    Note: If a line already exists that ends with /favicon.ico,overwrite it with the line above.

  8. Save your changes.
  9. Reload your website and that’s it!

Enjoy!

P.S. The favicon on my website is a headshot of me.  =0)

WordPress plugin to create Google XML-Sitemaps

Here’s a WordPress plugin that will create an XML-Sitemap that can greatly enhance your website’s presence, which is supported by Ask.com, Google, Yahoo! and MSN Search.

Here are also some links to help you with SEO (Search Engine Optimization) ranking:

http://www.google.com/support/webmasters
http://search.yahoo.com/info/submit.html
http://about.ask.com/en/docs/about/webma…
http://search.live.com/docs/submit.aspx

Hope you find this post helpful.

Web 2.0: Gray out the screen

This snippet grays out the screen and allows you to create a modal environment. A gray out is useful for creating a DHTML dialog box, or showing off a picture or video. While a gray out is active, most interactive elements on the page (links, etc.) are inactive – you’ve probably seen this on the new My Yahoo! page.

function grayOut(vis, options) {
  // Pass true to gray out screen, false to ungray
  // options are optional.  This is a JSON object with the following (optional) properties
  // opacity:0-100         // Lower number = less grayout higher = more of a blackout
  // zindex: #             // HTML elements with a higher zindex appear on top of the gray out
  // bgcolor: (#xxxxxx)    // Standard RGB Hex color code
  // grayOut(true, {'zindex':'50', 'bgcolor':'#0000FF', 'opacity':'70'});
  // Because options is JSON opacity/zindex/bgcolor are all optional and can appear
  // in any order.  Pass only the properties you need to set.
  var options = options || {};
  var zindex = options.zindex || 50;
  var opacity = options.opacity || 70;
  var opaque = (opacity / 100);
  var bgcolor = options.bgcolor || '#000000';
  var dark=document.getElementById('darkenScreenObject');
  if (!dark) {
    // The dark layer doesn't exist, it's never been created.  So we'll
    // create it here and apply some basic styles.
    // If you are getting errors in IE see: http://support.microsoft.com/default.aspx/kb/927917
    var tbody = document.getElementsByTagName("body")[0];
    var tnode = document.createElement('div');           // Create the layer.
        tnode.style.position='absolute';                 // Position absolutely
        tnode.style.top='0px';                           // In the top
        tnode.style.left='0px';                          // Left corner of the page
        tnode.style.overflow='hidden';                   // Try to avoid making scroll bars
        tnode.style.display='none';                      // Start out Hidden
        tnode.id='darkenScreenObject';                   // Name it so we can find it later
    tbody.appendChild(tnode);                            // Add it to the web page
    dark=document.getElementById('darkenScreenObject');  // Get the object.
  }
  if (vis) {
    // Calculate the page width and height
    if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) {
        var pageWidth = document.body.scrollWidth+'px';
        var pageHeight = document.body.scrollHeight+'px';
    } else if( document.body.offsetWidth ) {
      var pageWidth = document.body.offsetWidth+'px';
      var pageHeight = document.body.offsetHeight+'px';
    } else {
       var pageWidth='100%';
       var pageHeight='100%';
    }
    //set the shader to cover the entire page and make it visible.
    dark.style.opacity=opaque;
    dark.style.MozOpacity=opaque;
    dark.style.filter='alpha(opacity='+opacity+')';
    dark.style.zIndex=zindex;
    dark.style.backgroundColor=bgcolor;
    dark.style.width= pageWidth;
    dark.style.height= pageHeight;
    dark.style.display='block';
  } else {
     dark.style.display='none';
  }
}

Thanks to Peter Hunlock for sharing this.