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: