Here is my environment:

• CentOS 5.2
• MySQL 5.1.36
• PHP 5.3.6
• Sphinx 1.10

To do all this, login to your server via SSH with your favourite Telnet/SSH client. I prefer to use PuTTY. Oh, you must login as root so have root access!

How Does Sphinx Works

In brief this is how Sphinx works. Sphinx creates a separate index of the table you want to search. Your PHP scripts calls the Sphinx API to search connecting to a specific port where Sphinx is listening to. Sphinx then searches its own index and does the search returning the result. Yes, the index has to be updated every time your update your original table. On my live environment I have a cron job setup to reindex with Sphinx every so often.

Step 1 Extract and Prepare Conf File

First of all you have to download the Sphinx package and extract it on your server. Here are the command lines for that. Note that the package I'm downloading is the newest (1.10 Beta at this moment). If you're downloading the older stable version or newer ones since this article is written then you have to change the URL. BTW don't type in the ($).

$ wget http://sphinxsearch.com/files/sphinx-1.10-beta.tar.gz
$ tar xzvf sphinx-0.9.8.tar.gz
$ cd sphinx

To Summarize, the first line downloaded the Sphinx package to your server. Second line untarred it and lastly you went into the directory of your new download.

You can do the configuration if you'll like to edit the installation process. Here's an excerpt from Sphinx's site:

$ ./configure

There's a number of options to configure. The complete listing may be
obtained by using --help switch. The most important ones are:

--prefix, which specifies where to install Sphinx; such as
--prefix=/usr/local/sphinx (all of the examples use this prefix)
--with-mysql, which specifies where to look for MySQL include and
library files, if auto-detection fails;
--with-pgsql, which specifies where to look for PostgreSQL include
and library files.

Once you're done then all you have to do is make the binaries and install the software:

$ make
$ make install

Once you have installed Sphinx you'll need to prepare the configuration file. This is the most important part as Sphinx actually acts based on the settings and parameters defined in this single document. Let's say we've installed Sphinx into /usr/local/sphinx. Copy the sample configuration file from the downloaded package into the Sphinx installation folder:

mv /sphinx/sphinx-min.conf.in /usr/local/sphinx/sphinx.conf 

I named it sphinx.conf for ease, but you can call it anything you want. Now you want to edit sphinx.conf with your favourite editor. I like to use VI editor. Here's what the initial open of the file looks like and I'll run through each section of this script.

#
# Minimal Sphinx configuration sample (clean, simple, functional)
#

source src1
{
	type			= mysql

	sql_host		= localhost
	sql_user		= test
	sql_pass		=
	sql_db			= test
	sql_port		= 3306	# optional, default is 3306

	sql_query		= \
		SELECT id, group_id, UNIX_TIMESTAMP(date_added) AS
		date_added, title, content \
		FROM table

	sql_attr_uint		= group_id
	sql_attr_timestamp	= date_added

	sql_query_info		= SELECT * FROM table WHERE id=$id
}

index test1
{
	source			= src1
	path			= @CONFDIR@/data/test1
	docinfo			= extern
	charset_type		= sbcs
}

index testrt
{
	type			= rt
	rt_mem_limit		= 32M

	path			= @CONFDIR@/data/testrt
	charset_type		= utf-8

	rt_field		= title
	rt_field		= content
	rt_attr_uint		= gid
}

indexer
{
	mem_limit		= 32M
}

searchd
{
	listen			= 9312
	listen			= 9306:mysql41
	log			= @CONFDIR@/log/searchd.log
	query_log		= @CONFDIR@/log/query.log
	read_timeout		= 5
	max_children		= 30
	pid_file		= @CONFDIR@/log/searchd.pid
	max_matches		= 1000
	seamless_rotate		= 1
	preopen_indexes		= 0
	unlink_old		= 1
	workers			= threads # for RT to work
}

These settings should cover most of what you're looking for in terms of setting up Sphinx. I'll try to run through everything as much as possible. There are more parameters and customization you can do by reading their documentation here.

source src1

This section defines your SQL settings and what is needed to be index. So the first few lines sql_host, sql_user, sql_pass, sql_db is exactly your local host MySQL settings. The sql_port is defaulted to 3306. I haven't changed this setting for Wamp so that's where my port sits.

The sql_query is actually crucial. This is the query that you want Sphinx to do and build an index on. Its just like an SQL query you would do. Say my table people had columns: id, name, address, city, age, and joined (stored as time stamp) as follow:

I want to be able to search for the people's name and address only so thats all I care about, but I have to include the id and the timestamp. You can also defined unsigned integer attributes. So my sql_query will be:

sql_query		= \
		SELECT id, id AS id_attr, name, address, joined  \
		FROM people

sql_attr_uint		= id_attr
sql_attr_timestamp	= joined

sql_query_info		= SELECT * FROM people WHERE id=$id

I've defined the sql_attr_uint, sql_attr_timestamp, and sql_query_info. The sql_attr_uint is the unsigned integer attribute and it can't be the first column which is to define your id. The sql_attr_timestamp is the UNIX timestamp in your column. You can convert if you want but I usually store my dates in timestamp anyways. The sql_query_info is for testing purpose only. It is the query that retrieves the actual row after searching. You have to do this yourself in your PHP Script.

index test1

You can change the name of test1 to anything you want but for the sake of it I'll just leave it. The source is just the name of the section we did above. If you changed the name then you have to change it here. The path is where you want to store the indexed file on your site. So I'll store it in the site directory in a folder called sphinx: /var/www/vhosts/site.com/sphinx/test1. The remainder I left the same. I've taken out the real time indexing because I'll be doing my own thing and I heard there were lots of limitations to it at this point, so its not my thing. If it floats your boat you can do some more research and look into it. Here's my index:

index test1
{
	source			= src1
	path			= /var/sphinx/test1
	docinfo			= extern
	charset_type		= sbcs
}
indexer

This section defines the indexer. My database is big so I increased the mem_limit to 64M. Don't just go for a high or low number. Too low can hurt your searching and too high can hurt your server. Find the balance based on the size of your database.

searchd

This part defined the searchd which is the search application from Sphinx. Besides the log paths I didn't change anything else. The listen port is where you want searchd to listen in on for search queries. I left it at 9312 which is where I'll point my PHP script to later on.

Here is my sphinx.conf file:

#
# Minimal Sphinx configuration sample (clean, simple, functional)
#

source src1
{
	type			= mysql

	sql_host		= localhost
	sql_user		= test
	sql_pass		=
	sql_db			= test
	sql_port		= 3306	# optional, default is 3306

	sql_query		= \
		SELECT id, id AS id_attr, name, address, joined  \
		FROM people

	sql_attr_uint		= id_attr
	sql_attr_timestamp	= joined

	sql_query_info		= SELECT * FROM people WHERE id=$id
}

index test1
{
	source			= src1
	path			= /var/sphinx/test1
	docinfo			= extern
	charset_type		= sbcs
}

indexer
{
	mem_limit		= 64M
}

searchd
{
	listen			= 9312
	listen			= 9306:mysql41
	log			= /var/log/sphinx/test1searchd.log
	query_log		= /var/log/sphinx/test1query.log
	read_timeout		= 5
	max_children		= 30
	pid_file		= /var/log/sphinx/test1searchd.pid
	max_matches		= 1000
	seamless_rotate		= 1
	preopen_indexes		= 0
	unlink_old		= 1
}

Getting Sphinx Ready

Now that you have the conf file setted up, save and close the file. Now we're ready to install.

First, we're going to build the index by typing in indexer -config /usr/local/sphinxsphinx.conf test1. Replace test1 if you changed the name of your index. If you don't get any errors and see some numbers run then you're fine.

Once the index is build you want to prepare Sphinx's service on your machine. Type in searchd -install -config /usr/local/sphinx/sphinx.conf. It'll prompt you that the installation was successful.

Testing Sphinx Out

Let us try out the new nifty search. So say I want to search my table for john doe I'll type search /usr/local/sphinx/sphinx.conf "john doe". That should return something for me. I can define the matching modes and which column to search as well such as search -ext2 -config /usr/local/sphinx/sphinx.conf "@name john @address awesome". If you are getting the results you want then you are ready to move forward into your PHP script.

Sphinx and Your PHP Script

You need the Sphinx API in your script for it to work so go to c:\sphinx\api and copy sphinxapi.php to your site directory. Include this file in your script and call on the class:

Noticed I have setServer pointing to the port I told Sphinx to listen to. The setMatchMode is just the matching mode you'll like to use. In my case I'm using extended 2.

Now you can query search your Sphinx index with:

The $result returned will not include the rows and columns of your actual table. It'll return the follow parameters (taken from php.net):

This means that $result['total'] will tell me how many results were found and $result['matches'] is where the id of the search results are stored. So here's a simple line to return all of the results:

Notice that the mysql_query is the same as sql_query_info in sphinx.conf. What a coincidence eh? LOL. That is all and now you have a working Sphinx search system setup on your local machine. If you need to reindex your Sphinx you can do so without restarting the service. In command prompt just run indexer -config /usr/local/sphinx/sphinx.conf -rotate test1.

The future means resume working on a site after a long break. Often, when you're working on a site you'll know where every single line of code is. It's just like when you leave your keys or wallet somewhere, chances are you'll remember where it's located, but leave it there for a year and try to find it – unless it's in hindsight you'll forget where you've put them. Train yourself to be organized and let it be a habit. Coming back to a site that you have left for months or years will natural as your organization skills haven't changed.

Folders

The first and simplest thing you can use is folders. Everybody knows how to create them and place files inside. Use them to group files together. One thing most developer will do is place all images in a folder, so that is a good start. Do this for everything. You can group css, images, functions, javascripts, and templates in their own folders. The first two maybe obvious and probably done by most developers already. As for functions, these can be scripts that are mainly classes and specific funtions. Javascripts can be all javascripts or specific ones like JQuery related codes. The last group, templates, can hold files that affects the aesthetics of the site (non-css files).

You can also use subfolders if you have a lot of files within each folder. If your site is composed of thousands of images, group them based on their location or their function of the site. Location based could be broken down as header, footer, landing page, content page and etc. Function based grouping can be something like user profiles, navigation, products and etc. I'd like to keep it to the rule of third which is no further than three levels deep as then it starts to get messy again, but this really depends on your site. If your site is composed of thousands or files, then be my guest.

Code Structure

The structure of your code within each file is more of an art than science. Do what you need to do but ensure you're organized. Use comments as much as possible and don't be afraid to be descriptive. You can be creating with your comments as to highlight sections and create titles for individual sections. On certain files such as CSS you can code a based on hierarchy of your site, which means the top of your file defines the HTML then the BODY all the way to the FOOTER which is at the bottom. This type of structure can only work on certain files. Try and see what works best.

Naming Conventions

Organizing your files based on name is a really good skill too. If multiple files work together in a certain way you can name them to group them together without necessarly creating a folder for them. Say three files work together to make up the product update module you can have them named prod_update_delete.php, prod_update_edit and prod_update_info.php. That way when you need to edit the product update module you can quickly find the three files and know where to go. If the module has its own folder you can still combine the two for a quicker find, such as:

• [FOLDER] administrator
  • [FOLDER] products
  • [FILE] _class_prod.php
  • [FILE] _class_search.php
  • [FILE] _class_template.php
  • [FILE] images.php
  • [FILE] prod_update_delete.php
  • [FILE] prod_update_edit.php
  • [FILE] prod_update_info.php
  • [FILE] search.php
  • [FOLDER] shopping_cart
• [FOLDER] css
• [FOLDER] images
• [FOLDER] javascript

Underscores can be used to bring files to the top of the list. You can use this for important or commonly shared files within the module such as classes and functions.

Structure and organization is good skills and habits to have especially if you work with multiple sites at a time or you often leave and come back to sites. Like everything else you do, you'll need practice to get better. Chances are you won't be comfortable with the way you did things on your first try, keep changing and perfecting it until you're where you prefer. As you deviate and evolve try to be consistent, it'll keep your style flowing. Good luck.

To be honest, web development is all about practice and understanding, of course creativity as well (I'll get to this later). Here's a little scope about how I picked up on web development. I started making websites through FrontPage when I was 13, using only a bit of HTML and mainly the WYSIWYG (what you see is what you get) editor. It wasn't until I was 15 that I started developing with HTML and using CSS. When I was 18 I felt the need for more power in my websites which is when I picked up PHP and MySQL. About a year ago was finally when I started picking up on Javascript.

Basically, I learned everything through every resource except taking classes. I would search through the web, read books from the library or just pure trial and error. It wasn't insanely hard to gather all the information but the only times when I really learn was through projects and experiments. Web development is definitely a hands-on type of thing. Point is, if you want to learn web development you'll have to spend 30% reading and 70% doing.

The Program/Software

Web development can be accomplished through a few languages and most of them don't require any special software to write. The basic notepad that came with your Windows is capable of completing the task. I prefer to use a software that color codes coding to mitigate headaches. Here's a list of software that you could choose from.

• Notepad++ (Free)
• KompoZer (Free)
• Amaya (Free)
• SeaMonkey (Free)
• Microsoft Expression Studio ($149)
• Adobe Dreamweaver ($399)

I personally use Dreamweaver on my computer as I have been using it since I was young so I have a nostalgic feeling to it. When I'm on the go I have notepad++ on my USB.

Learning HTML

Before you learn anything else, you have to be really good at HTML (hyper text markup language). The basic of websites all boils down to this language. HTML is the markup language containing markup tags that creates the webpage document. Every website requires HTML to make it work, yes even Flash websites.

Your basic website is wrapped in an opening and closing HTML tag. Opening tags are surrounded by arrow brackets while closing tags are the same but there's a front slash immediately after the first arrow bracket like such

Within the HTML tags there will be a HEAD and BODY tag. The head tags will describe items related to the website but will not be produced in the content. Items such as site title, meta tags, CSS, and Javascripts can be defined in the HEAD tag. The BODY tag will describe content that will be outputted to the user. A code like this:

Will output "Hello world!" on the browser with the title Test Page in the browser title bar. Once you get this down you're ready to start building the website. The goal following this is to output the content you wish to show, it could be paragraphed text, images or tables. Everything you wished to use requires a markup tag to make it work. It'll be redundant for me to give you a tutorial on all the tags but here are two resources that are great.

• w3school – HTML
• HTML.net

w3school is great, as they are short writeups but concise so you can digest all of the content quickly. HTML.net is more detailed and a great read too but they incorporate a bit of CSS so its better to read it after w3school to cross-reference some of the ideas and undestanding. Once you've got this down you're ready for some CSS.

Learning CSS

CSS (Cascading Style Sheet) is a language that focuses on the style and layout of your markup language. Its a common standard now generate the accurate aesthetic results of many websites. There are a few ways to include CSS in your website.

Once you have your website linked with some CSS you can start controlling your website. Here are some example of CSS controlling a webpage.

Here are the resources to read to learn all about CSS.

• w3school – CSS
• HTML.net

Again its good to go over the basics with w3school first then head to HTML.net.

At this point you should practice making a few websites with HTML and CSS. Try to envision something and then build it. The best practice is to try to design something in Photoshop then try to build a web site from it. As I always tell developers, just design it and I'll make it into a template, because I don't believe there's many design limitations that can't be built with HTML and CSS. By doing this exercise it'll help you learn different methods of building different elements.

Notes and Reminders

There are some things you should keep in mind when building with HTML and CSS though.

Using tables for design

This is a no and not recommended. A lot of people argue over this topic. Some believe that tables are good for design because its easier to control and it holds the shape of the original design better. The problem is tables are clunky, heavy in coding and not very flexible. Tables have specific standards to them so if you have two rows and two columns, the columns have to be equal width while rows have to be equal height. In order to work around that you'll have to nest your tables, imagine dealing with that. Its also less flexible for future expansions. You should use a table for tabular data though. Extreme non-table believers will argue that you don't, they can produce the same effect with other elements. They sure can but when it comes down to the user extracting your data (copying to word or excel), copying for a table is much easier than anything else. It just makes sense.

Avoid absolute positioning of everything

Many developers when they start will notice the amount of control with absolute positioning. It is not until their design gets more complicated that it all falls apart. Absolute position provides more flexibility but will sometimes diminish your control, use wisely.

Test in multiple browsers

There are various browsers on the web. It sometimes depends on who your website caters to but mind as well cover the major users. Test on desktop machines with Internet Explorer 6, 7, 8, 9, Chrome, Firefox, Safari. On mobile devices with Android, Opera Mini, iOS. Just make sure everything's consistent. This is a good chance to test how good your skills are too.

The USB

Before you can get started you'll have to get a USB flash drive (if you don't have one already). For the capacity, you'll want something 4 GB or more. The apps won't take up the whole 4 GB but having the extra space will be beneficial. As for the physical size, you'll want something easy to carry but hard to lose, so find something that you'll be comfortable carrying around all the time.

The Setup

First of all you'll want the launcher to organize everything on your USB. The launcher is a free software called PortableApps and can be found at: http://portableapps.com/apps.

The Apps

After you have installed the launcher you can get all the apps. Here's a list of all the apps I used. You can pick and choose as you may have your own preference.

HTML Editor – Notepad++
http://portableapps.com/apps/development/notepadpp_portable
The first and most important thing to have is a HTML editor. I vary between Dreamweaver and Notepad++ on my desktop so using Notepad++ on my USB was no surprise. Its light and has a nice color scheme.

Server – XAMPP
http://portableapps.com/apps/development/xampp
If you're coding with a database or using server-side scripting you'll need a server to do so. I'm used to WAMP but using XAMPP is not bad either. A great portable alternative.

Browser – FireFox
http://portableapps.com/news/2010-08-12_-_firefox_portable_4.0_beta_3
Should I explain more? This is Firefox, FIREFOX!

FTP – Filezilla
http://portableapps.com/apps/internet/filezilla_portable
If you need to FTP your files there's the great Filezilla. I use Filezilla on my desktop already because its free and easy to use with constant updates. Its pretty much the same for the portable version.

FTP – Filezilla
http://portableapps.com/apps/internet/filezilla_portable
If you need to FTP your files there's the great Filezilla. I use Filezilla on my desktop already because its free and easy to use with constant updates. Its pretty much the same for the portable version.

Graphic – GIMP
http://portableapps.com/apps/graphics_pictures/gimp_portable
Working from graphics to coding cannot be easier with the great Photoshop alternative, GIMP!

Optional Apps

Compression – 7 ZIP
http://portableapps.com/apps/utilities/7-zip_portable
Zip and unzip files with ease on the go.

Tablet – On Screen Keyboard
http://portableapps.com/apps/accessibility/on-screen_keyboard_portable
If you're working on a tablet machine that doesn't have a native on screen keyboard, this is the right tool for you.

The Design Aspect

I always tell myself and people who design for me to not worry about the design. I can always code it and optimize it for the web. Although this maybe true I don't always design with that mentality. I usually keep the user of the website in mind. I never try to overkill the design just because I want to, but this is coming from a developer's thoughts.

Regardless, if you are one who is highly concerned about the graphical load time then design with that in mind. You can cut down on size by using design elements that you know can be replaced by CSS 2.0 standard coding. So we're talking about solid boxes, solid lines and etc. We'll go further into that in the CSS section. Using heavy graphics and lots of blending will add up in size. Something like that looks like Crankberry will cost you around 700 KB in image size with the whole page loading around 1 MB. I cater to designers and developers so fairly average for today's standard.

With that, keep those thoughts in mind when designing because if you design first then noticed that the site bogs down then you'll be going back many steps just to make revisions to that.

Keeping the Balance

As mentioned in the beginning of the article that there are many things that dampens the load time of your site. The way your content is drawn onto the pages is also a factor that may affect the speed. Static contents won't pull you down much unless you're uploading novels and encylclopedias on one page but then you have other problems to worry about don't you. Anyways, if your website pulls a lot of content from your database per page with lots of joins and queries then your content is also factored in. In these scenarios I usually recommend keeping a balance to mitigate high load times. So if you have a lot of heavy database interaction I would recommend keeping the design and graphics to a lower end. On the contrary if you don't have a lot of database interaction I may not recommend super heavy design just means that you're more flexible. Refer back to the last section as to how to optimize your design.

JPEG vs GIF vs PNG

Now that you're done your designing its time to slice the images up and start structuring your HTML and CSS. When saving your image files you have so many options as to which file format to save it as. You've got JPEG, GIF, PNG, Bitmap, TIFF and the list goes on and on. Just to shorten your list down, I would stick to three primary formats: JPEG, GIF, and PNG. All the other formats for development wise can be forgotten. Now some people like to consistenty use one format throughout their whole website but I like to switch it up. I prefer to use JPEG, GIF and sometimes PNG. I'll go into further details about which I use and when I use it in a bit. First of all you should understand the difference between all these formats. There has been many articles written over this topic so it would be super redundant to do it again. I'll spare you the theatrics and give you the highlights.

JPEG

• Lossly compression
• Compresses colors and grayscale
• Used for complex images

GIF

• Lossless compression
• 256 Colors
• Good for line and simple drawings
• Supports animation
• Supports transparency

PNG

• Lossless compression
• Patent-free GIF
• Supports transparency with opacity setting

Which to Use

After reading the above part you maybe wondering how this infomation reflects on your files format and which one you should use. Here's how you look at it. Lean towards GIF and JPEG and if necessary then use PNG.

Lets start with why minimal use of PNG. PNG is a nice format format in replacement of GIF. When saving the same simple GIF file in PNG you can end up with a smaller file size as PNG does a better job in compression. The reason I still don't use PNG much is because some of the older, non-main stream and mobile browsers don't have a good support for PNGs. There are ways to go abouts for this but to accomodate for all browsers would be very timely. As I always focus to present a cross-browser compatible website I stay away from this format.

Now then, we're left with the JPEG and the GIF. It is very simple when it comes down to these two contenders. If the image you're saving has lots of colors and blending then go for the JPEG if it has simple lines and text and solid color go for the GIF. Your sizes will optimized this way.

Here I took a screenshot of my currently portfolio (top design) which should most of the images should be saved in JPEG due to the complexity of the images and colors. The second screenshot is of FusedEffects which should mostly be saved in GIF due to the simple lines and large blobs of solid colors.

Good Practice

Obviously if you've got all that down you can quickly decide which format to use and how much compression you may want to do. If you're lazy like myself and you have Photoshop the best thing to do is to use their [Save as for Web] setting. The window it popups up with will give you the image size before you even save it.

This way you can switch between JPEG, GIF, PNG and different settings until you get the quality and size that pleases you.

The Role of CSS

Ok ok ok, I mentioned a few times (at least I think) that you can replace certain elements with CSS to eliminate the use of graphics where necessary. I always prefer this method when possible as I tend to think a few lines of code is always smaller than an image size.

Now a days, developers have come up with many creative ways to achieve graphical effects with just a few lines of coding. Such as rounded corners. The trend right now seems to be using rounded corner boxes instead of plain old square. Since CSS 2.0 has no support for rounded corners on div tags people rely on images and positioning. As I have released months ago a script that is purely css, cross-browser compatible and image-less for rounded corners.

That's only one of the many examples in which graphical elements can be replaced by CSS coding. I will be doing a full article on this in the near future so stay tuned for that.

If You Can't Replace The Image, Work With It

In certain cases some pure CSS solutions aren't as stable yet such as gradient effects you can combine images with CSS to create the effect. So for a full stretch gradient instead of making an image 5000px x 10px just save it as 1px x 10px and use the background: repeat-x; This will save you lots.

In summary, how much can you save by going through so much optimization. This really depends on how heavily you designed your site. As you can tell by my style I like to go heavy with personal designs and light on business designs. Sometimes its not up to you. I work with a designer who over does gradients and shadows everywhere so its up to me to optimized the images. Sometimes I can save up to 500+ KB by doing the right optimization. You maybe thinking that with the advancement of cable internet and the cost of bandwidth going down it doesn't really matter. Remember its all about the user experience. There are lots of factors involved that contibutes to your site's load time, try to optimized everything so there's is minimal lag time. You should also understand that with the advancement of technology more and more people are surfing with their mobile phones or laptops tethered through their mobile phones. Its always a plus for your users when they get the things they're looking for, faster.

Website Name

When I was a younger starting a website or a project was easy. Just come up with a name that I liked and then just purchase the relevant domain after. Today, its not the case, we name websites and projects based on domain availabilities and possibly price. Just to give you a scope there are 112,961,783 active domains currently, with 83,320,335 of that being a .com domain (1). Although the combination of words for domain is near endless, it'll be harder and harder to get the name you want.

It will eventually boils down to resorting to a longer domain name, unique play on words or purchasing pre-owned domains at a premium pricing.

The Design

Once you're ready to start designing your website you'll have to put into perspective how big or small to design it. Just because you have a 14" or a 36" monitor doesn't mean that everybody does as well. As of January 2009 57% of detectable users are displaying at higher than 1024×768 px. There are 36% users at 1024×768 and 4% less than that (2).

Understanding your target users is very important. If you cater to teenagers than a higher percentage of your user will end up in the 1024×768+ category. If you cater to an older or well aged audience then you'll probably have more users in the 1024×768 or below category. If you cater to graphic artists and designers then you most like have a much higher resolution to work with.

I tend to use a 1400×1100 canvas for my design and keep content within a 1200×1100 or 1000×1100 box, the remaining area is for the design of the background. Just like shown below:

Color Wise

You shouldn't have to worry too much about colors as 95% of users has 24bit or 32 bit hardware supporting up to 16,777,216 colors.

Developing

The biggest concern that you should have is how the users view your website once its made into HTML. The most recent stats indicate that 47.5% users online are using Firefox and a collective percentage of 37.5% of users are using IE6, 7 and 8 (3). As you can see a significantly outstanding of majorities use Firefox and IE.

When developing offline I like to test and view my scripts in Firefox and IE7. Once done, I like to view it in IE 6 and tweak things. This step should be the biggest tweaking stage. If everything works in Firefox and IE 6 and 7 the probability (and this is not a probability of 1) of it working on other browsers is pretty good.

When I have time I also like to test the page on different machines and different mobile devices to get a glimpse of how its working out.

The Money

With that, lets get to where some of you are truly interested in – the money. Is there money to be made making websites? Yes, but the competition as said before is high. With 112,961,783 active domains and 50 million blogs (detected in 2006) there arena is just too crowded (4). Ask yourself what you want to do and how that can be done in a unique way.

Who to Target

Defining your target market is a key to a good business and marketing plan. Which demographic do you want to be your key audience? Currently 72% of advertisers find it beneficial to target the 35-44 and 25-34 year old category with them making up 29% and 28% of users online, respectively (5). Don't let age be the only determining factor for you though, targeting a common interest amongst a group of users could be a break-through factor as well. This may be people who loves sour candies, office interiors or just residing in the same local area. A combination of criteria may make it more unique for you as well such as people aged 16-24 who likes sour candies or people of aged 35-44 living in the same city.

By detailing and being more specific about your target market may give you a bit of a competitive edge but understand that by adding more criteria to the list you are shrinking the size of your target. Ask yourself, if you have a smaller market to serve can you still sustain? If you sell a product that's $1 and you target 25-34 y/o male residents a suburban area you may not have enough potential clients to survive. Do some math and see where you want to end up, that should give you a scope of how many people you may potential need to target.

Making Money Through Advertisement

Some of you webmasters are planning to make money through advertisement, this maybe through a 3rd party company such as Google Adsense or Adbrite or just handle advertisement internally. You should know that there's still plenty of advertising dollars floating around the internet for you to make, it all just depends if you know how to get it.

Focusing on North American market here, despite the depression and economic downturn organizations are keeping a budget ready for internet advertisement. There's many factors why this is, which is slightly irrelevant here but keep in mind that this dollar amount will continue to grow proportionate to the growth of how many and how often people access the internet on a daily base.

The outlook for 2009 was an 8.9% growth in overall internet advertisement spending which equates to $25.7 billion US dollars. This is a good enough motivation for those who wishes to make a career out of websites and advertisements (6).

I am just so tire right now so I suppose I'll edit and update this article as I go.

1. http://www.domaintools.com/internet-statistics/
2. http://www.w3schools.com/browsers/browsers_display.asp
3. http://www.w3schools.com/browsers/browsers_stats.asp
4. http://www.cyberjournalist.net/news/003674.php
5. http://www.eiaa.net/ftp/casestudiesppt/EIAA_Marketers_Internet_Ad_Barometer_2009_PR_Presentation.pdf
6. http://www.emarketer.com/Article.aspx?R=1006813

Typetester

Typetester is a website which allows you to test out fonts to see how they compare to to each other. This will allow you to test the font live and choose the one you want to use on your site.

BrowserShots

This is the resource for ultimate cross-browser compatibility building. BrowserShots allows you to take screenshots of your website so you can see what it looks like through various browsers and operating systems.

W3C Validator

Run your site through W3C validator and it'll tell you if your HTML and Javascript codes are well structured. Good for building clean and proper codes.

View Like Us

View Like Us complements BrowserShots very well. This web tool allows you to quickly test your website viewport in various resolution sizes including Wii and iPhone screen resolutions.

Lorem Ipsum

If you're just starting to build new sites, the best thing to have to fluff up your site is dummy text. Use the Lorem Ipsum generator to create various length of text to fill in those pages.

Shaboopie

If you're not designing your own site and have no resources to hire somebody to do so then you should check out Shaboopie as they have a large selection for free vector logos to use.

Icon Archive

Just like the excuse you have above, if you have no time to draw and you need great icons, just go to Icon Archive. They have a huge selection of free icons and the site is so easy to navigate.

Best Web Frameworks

Best Web Frameworks is one of my favourites. Just select the web language you're using and check popular frameworks and compatibility.

Pixlr

If you ever need to edit any images but don't have Photoshop handy, or Photoshop at all then you should use Pixlr. It is practically a tamed version of Photoshop online.

What great things do you have in your pocket (nothing disgusting ok!)? Comment and share with the rest of the group.

The result is really just… a rounded div box. Here's an example I quickly generated from the tool.

Have you opened the link yet? No? Open it up and I'll give a quick tour of it. The tool's very simple to use. All you have to do is configure four settings and it'll do the rest for you. The four settings are:

1. Class Name
2. Background Color
3. Font Color
4. Roundness

I'll just briefly touch on the class name and roundness. The remaining settings is kind of obvious. So the class name does not really need to be set UNLESS you have multiple rounded corner boxes that are different. If you're using the same boxes over and over again, that's fine but once you change style you'll have to create new classes so they don't over lap.

The current roundness settings are 1, 2, 4, 8px. These are the settings I believe looks best with most web design. Anymore will make your template look like a lot of circles.

So that's it, that's the tool I created for all of you. If you have any questions or feedback leave a line here and I'll attend to it. Cheers!

If you didn't find the link in the Article here it is again.
The Tool: CSS Rounded Corners Generator

Now this method is not recommended for those who are not comfortable or disturbed by the thought of "editing code". Its really not all that complicated but if you're really not comfortable stop reading now and quit while you're ahead, I'm sure there's other people out there ready to help.

What will you get from this?

In the end you should be able to successfully remove the bullets in the Pages, Archives, Categories, and Bookmarks inner section. These are what I've named them, yours could vary. I'm calling it the inner section because I didn't talk about how to remove the bullets in the title here, at this point I haven't gone through everything so I'll update every one when it happens.

So, with that said lets get started. Here is a list of files that we'll be editing so I recommend you make a backup prior to beginning just in case something goes wrong.

• wp-includes/classes.php
• wp-content/themes/default/sidebar.php
• wp-includes/bookmark-template.php

Got that? Backed it up? Good! We'll start from the top, so the first bullets we'll remove is the Pages section. These are links to pages that you can create outside of your blog postings.

Removing Bullets from the Pages Section

Open wp-includes/classes.php, if your editor has a find function use it now. Find the line class Walker_Page. This is the class that we need to work in.

In line 3 you can find the <ul> we need to remove. So remove it. Now the we removed the opening tag we have to remove the closing tag. Scroll down a little bit and the closing tag is on line 3 of:

Ok, now stay where you are. Scroll down a little more and you'll come across the function start_el. Within the function look for a line that looks or is exactly like:

In this code here you'll have to remove the following code. Note: Don't remove the ' in the beginning.

What we just did was remove the opening <li> lets find and remove the closing one. Take a guess at where it is, you're right! Scroll down a little more and you'll find the missing piece of the puzzle. Within the func end_el you'll notice the </li> in line two.

Instead of just removing this one, replace it with <br />. This will add a line break between page listing.

Removing Bullets from the Category Section

At this point you should have already removed the bullets for the page section. Has it happened? If not you should spend some time in the first part of the article first. Next we will work on the category section, so in the same file find:

and change that to

Basically what we have done is passed on the argument that the style is none (default is list).

Removing Bullets from the Archive Section

If you've gotten this far, congratulations you have successfully removed the bullets in the categories section. If you have already guessed it by now yes the next step is pretty much the same but in this case they named it something else. To remove the bullets from the archive list find (also in sidebar.php):

and change it to:

Basically they changed the argument from style to format.

Removing Bullets from the Links Section

Now you're only left with removing the bullets in the links section also known as the bookmark section. This one was hard to pass the argument, maybe somebody could suggest a way, but here's what I did. Open up wp-includes/bookmark-template.php. Find function wp_list_bookmarks. We'll remove the <li></li> tags first since it comes up first. The first thing that comes up in the function is an array.

The last two lines you'll see category_before => and category_after =>. Clear everything inside of the single quotes that they are pointing to. So you should be left with 'category_before' => " and 'category_after' => ". Go down a bit further and you'll find this piece of code:

Do not be scared of its ginormous size. You can either go through and remove the two pairs of <ul></ul> or just comment them out. As I said they occur twice for different situations. Commenting it out will make it look like so:

Scroll up a bit in the same file and you'll find the last piece of the puzzle. Just edit the code in function _walk_bookmarks().

Change the <li></li> to " or for me I changed the 'after' => " to 'after' => '<BR />'. Just to have the space in there.

And there you have it you have successfully hard coded the bullets out. If you ever want them back just replace all of your files with the backed up ones. Once again I just want to remind you that I've only used this method because the modifying the styles didn't work for me. Do whatever is easiest and works.

Bonus: Removing Bullets from the Register Panel

As a bonus feature I'll throw in "how to remove bullets from the register panel" for free. Its very simple, in your sidebar.php file find:

Just put into the brackets "," like so: