Site Redesign

Just a quick announcement, as you have hopefully noticed, the site has undergone a major overhaul. I got tired of Blogger's plain and boring template, so I've started to create my own. If you were viewing the blog at a certain time on Sunday, you may have noticed some very weird things happening to the site layout - everything is back to normal now.

The design is in no way finished, as I am still trying to sort out the widget styling by Blogger, and I fear I will always be restricted by their coding. I'm working hard though to see what I can do.

As always, comments (read: suggestions) are always appreciated and I do take them into account.

Also, here's a few handy links: Blogs Directory and The Web Creator. You know, I might just start a link-of-the-day feature on the site!

How To: improve page load times

No one likes a site that takes 15 or 30 seconds to load. Most visitors won't wait past 15 seconds for a page to load, and that statistic is probably outdated and over-optimistic. If your website takes more than 10 seconds to load, there's a problem. But there's something you can do about it.

Style sheets are cool, but they hurt your page load time. You can't just get rid of them, so what are you going to do? The answer is to make the file size smaller and the loading method quicker.

Examine your own style sheet(s). Does it use attributes like "background-color" and "background-image"? If so, you're using long notation. There's valuable shortcuts out there that can help reduce the character count, in turn reducing file size. The short-hand notation for any background related tags is just "background". They can all be fit into that one attribute. For example:

body {
    background: #000 url('img/background.jpg') 0 100% no-repeat;
}

Notice how that combined background color, position, image, and repeat all into one. I even abbreviated the color. Instead of writing out #000000 or #FFFFFF, only three characters have to be used. Each digit of the three-letter code is duplicated, so that something like #abc is actually #aabbcc. This is an effective way of reducing characters, and it looks better anyways. The only time you have to use the long version is if the "pairs" of letter or numbers are different (ex. #e15a00).

There is plenty more you can do, just search the web.

Your new best friend - Feedburner

You may, or may not, have noticed the little orange icon on the left sidebar. If you were one of those people who said, "No, I have not noticed the little orange icon. What am I missing out on here?", the answer to your question is: You're missing out on a lot.

Feedburner is my new RSS-feed management system. It's a great site that allows dynamic control over RSS feeds. Now you can subscribe to this blog quickly, easily, and uh... efficiently. Just click the little orange button.

For all you web designers and developers out there, Feedburner is a nifty tool. Nifty as in way cool. It allows pinging of your blog to all the popular blog tracking sites, so that you can increase your blog traffic. And once you reach a certain level of site activity, you can place ads on your site to monetize and make some money in the bank. The other sections include other words that end in -ize and rhyme with monetize, such as analyze and optimize. Clever, eh?

Introducing... SiteGen

Get ready for the revolution.

Well, maybe not a revolution. More like just a way cool site.

SiteGen is the project I'm currently working on. SiteGen, short for SiteGenerator. It's exactly as it sounds. I'm creating a comprehensive PHP script page that will be able to output pre-made designed websites.

And by pre-made, I really mean user-made.

On the Create page will be a complex list of input fields, for each major element of a website. It'll have options for choosing background color, text colors, link colors, header text, body text, footer text, multiple columns, multiple rows, and so on. With the click of the "Generate!" button, my PHP script will give you all the necessary code needed for the site.

It's still in the beginning stages, as you can see by the rather plain website so far, but don't worry, I plan on making this big, and bad.

Bad as in good.

Site Redesign

As all you returning visitors (you have the site bookmarked, correct?) might notice, the site now actually looks like it was made by a semi-competent web designer. Sorry, whoever made the blogger template. It was rather boring.

So I changed it. And the beauty of web design comes into play when you discover you can just "borrow" previous designs. WebDivine does not condone blatant site plagiarism. But if it's your own website you're stealing from, who cares? I'm not going to say anything like "I hope that I don't find out I stole my design" or "I would be quite angry if I stole this design from me". It just doesn't work like that.



So what if I use a little bit of copy and paste now and then?

Tuesday: Weekly Site Spotlight

It's time for the... Weekly Site Spotlight!

Every Tuesday, I'll be featuring a new site in my showcase. These will be sites with exceptional CSS coding, HTML formatting, and design. This is a big deal.

This week's spotlight goes to: YouRant.ca



Design: 8/10
Clean: 9/10
Layout: 7/10
Creativity: 10/10
Total: 34/40

The creativity is what really sets it apart from other sites. While the page design is in the typical 'T' format, the colors blend nicely yet stand out well. The layout is also quite clean, with clear-cut sections of the page. The navigation could be a little bit better, but now I'm just nitpicking. Overall, the site is just a cool idea.

Think you can do better? If you know your site is good enough to take the glory, send an e-mail to futuramas@gmail.com with a link to your site. Who knows, maybe you'll win?

How To: improve keyword density

The other day, I was quite surprised at the results of my keyword density and keyword cloud check (courtesy of seochat.com). The keywords on my site had a density of less than 1%, something like 0.73%. So if my keywords weren't taking up much space on the page, what were?

It turns out that the most used 3-word phrase on my page was... "line margin em".

Wait, what? That isn't even a phrase! I checked the source and sure enough, my internal CSS styling was taking up most of the space in my code, deflating the density of my actual keywords. Even though it was in the <head> of my page, the keyword tester was still checking ALL the words in my source code - just as real search engine crawlers do.

The solution was easy: move all the CSS to an external stylesheet. This way, the crawler will mostly be checking your content for keywords. And as you may or may not know, keyword density is crucial in the search engine rank algorithm. SEOChat.com recommends a keyword density of 3-7% per page. That's hard to achieve if CSS coding has taken over your page.

While the above example was remedied with a external CSS stylesheet, the same can be done with JavaScript (.js) or my favorite, using PHP's include command.

Wondering what your site's keyword density and keyword cloud is? Check out the keyword density and cloud tools.

I'm not impressed.

Google. Yahoo!. MSN. These companies are all internet corporate giants. So they probably have top-of-the-line coding and web pages, right?

Wrong.

Check out Google's source code. It's horrible. Why are you still using attributes like bgcolor and vlink? They have cutting edge search engine technology, and yet their own site leaves much to be desired. A quick validation check and Google's source code returns 64 errors. Yahoo's source code is only slightly better, but a site as complex as Yahoo is bound to have a long stylesheet and they didn't bother making an external stylesheet. That thing is huge -- you can scroll for minutes.

No wonder website development standards are so trampled on - "the big players aren't doing it, so why should we?" is probably quite a common mindset among designers. There's no pressure anywhere to change low-quality and error-riddled code into something meaningful.

Google certainly isn't spending their billions of dollars in revenue on attempting to conform to web standards.

Cool websites, part two

Let's face it. As a web designer, you've often experimented with little site features that are, to say in the least, frivolous. Who hasn't tinkered with adding a mouse trail or flaming text? While I can only encourage you to stay away from elements like those, Dynamic Drive has a nice collection of many ridiculous, but some helpful, web design scripts. Beware - most of the scripts on their page are unnecessary. Take some time to browse through though, and you'll find some more tasteful ones that you might be able to incorporate into your site. I've used their Gradual Highlight Script on several occasions.

Dynamic Drive also features a CSS Library for some nifty CSS tricks.

Are you a web designer with not enough time on your hands to make your own graphics? If so, it's time you visit pixellogo and iStockphoto. For under $40, both sites offer almost a limitless supply of logos and images for use on your site. The images on iStockphoto are particularly cheap - ranging from as little as $15 all the way down to just $1.

I've added the links to the Related Links section of the site, and as always, if you have any other websites you'd like to share just post a comment below.

Out of ideas?

The web design industry (it is an industry, right?) is a demanding one. As web designers, we are always pressed to come up with new designs. And while you may be good at making layouts, there's always someone better.

Fortunately, some folks have made a list of these better sites.

Two sites, CSS Remix and Web Creme, have a wonderful archive showcasing many CSS-based sites that are really a beauty to look at. While some are more outlandish than others, it's easy to check a few of them out and get some ideas for your own website. CSS Remix even allows the listed websites to be sorted by many useful factors, such as Redesign or Valid Code. Web Creme is similar, and ironically, has a much more eye-pleasing layout than CSS Remix.

On the right side are links to both. As I find more sites like these, I'll keep that section updated.

Know some other good design-inspiring sites? Post a comment and I'll check it out.

h1>An Introduction</h1>

Oops, the HTML didn't work. Where's my h1 header?

Just kidding.

I did that on purpose.

As you may or not have guessed already, this is a web design blog. As a young enterprising individual, I feel it is my duty, no, my responsibility to record and track all my young and enterprising web design... er... "happenings". Using the mighty power of the blog I can showcase all the websites and scripts I create, along with links to other web design articles and sites. I think there's a strong lack of web design sites, am I right?

And I didn't name it webdivine for nothing.