Monday, April 30, 2007

To Jump on a Bandwagon

Let’s cut to the chase. The big players (MSN, Myspace, Windows, ABCnews, etc.) are all using blue-themed websites. Skies are blue. Water is blue. Blue Gatorade is blue, and so is archrival and nemesis blue Powerade. Slime Volleyball’s background is blue. Even my favorite color is blue. (Note: bluegrass is not blue, despite the misleading name)

I want to be with the in-crowd. And so I began the quest for a redundant blue webpage.

I started off with an all-encompassing wrapper, in order to wrap everything up. I also made a container to contain the content and navigation, and a content box so that my visitors would be content. My biggest challenge was choosing different shades of blue. After mere seconds of deliberation I felt ‘deep ocean blue’ was the best color for the background. I applied an original and underrated technique – the gradient. Powerful and underused. (I kid I kid).

Despite being a joke website, it actually turned out very nicely. I even went as far as to give it a slogan from Sloganizer. I know, I went out on limb for that one, but I think in the end it was totally worth it, man.



blue website screenshot

Saturday, April 28, 2007

Sad but true

My web design class is a bit of a joke. No one knows anything about web design save for me and a friend of mine. In fact, the person that knows the least about web design is the teacher.


But at least the class gives me practice. Our latest ‘project’ is that of the “Preservation Society of Rural Texas”, a fictional organization made up (probably stolen, actually) by our teacher. He plays the part of the client, wanting a website for his organization. Our job is to come up something with that meets the demands of his ‘society’. It is probably the closest assignment to real freelancing or company-based web design we’ve done, of which I am grateful.


I started off with my empty code template, and began the wireframing process. In class we had to produce storyboards for each page, which was a huge waste of time because each page was basically going to look the same as the others. Each page would have the initials ‘PSRT’ up top, along with the slogan. Then there’d be the content box, and on the left side would be a sidebar for navigation and then finally a footer below. The home page would be slightly different, with a quick header designed in Fireworks at the top of the page. Minutes later and I had a design I felt very comfortable with, a design that would work well most importantly.





Next I added in the actual header, and some filler text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Oh, oops, that was supposed to go into the content box. Anyways, after the text I began adding colors, much to the dismay of any of my color-blind blog readers. Sorry, guys. To everyone else:







The website is already ‘good’ enough for my classmates to gawk at it, so I guess it isn’t too bad. But I’m not too excited about my website being different shades of human waste.

Thursday, April 26, 2007

This hurts my eyes

The internet has often been compared to an ‘information superhighway’. I thought of a different analogy. The internet is like my dirty room. My room contains half-empty bottles, dirty cereal bowls, books strewn about, clothes in awkward places, and wads of paper in places where I am forced to question how they got there. Not unlike the internet, I’d say. In the realms of web design, what does all this talk mean? Some sites are just very low quality. They’re dirty, unclean, unkempt. I bet they’re fun to make though.

I started off with my regular web design time-saving template. Then I picked matching colors, designed a basic layout, thought of a theme for the website, and wrote a little bit of content.

Next, I threw all of that in the trash. I began to put together a site that resembled a clown school gone awry. I made sure to use colors that didn’t match, the mark of any good website. Together, the colors formed ‘Wacky Fun World!’, a name I felt was appropriate to the overall feel of the site. Oh and by the way, here was what I laboriously churned out after careful consideration to positioning, structure, color, and quality content.



Not bad, huh?

Monday, April 23, 2007

Pagination Domination: Reiteration

Clever title, eh? I thought so too. This is part two of Pagination Domination, a particular style of navigation that I’ve incorporated into a new website I’ve designed. The fruits of my labor will be explained and shown below.


Where did we leave off, anyway? Oh yes, we had a wireframe - a boring, bland wireframe, but a wireframe nonetheless. I don’t know about you, but I am not too fond of shades of gray. It needed to be kicked up a notch, so I headed over to ColorSchemer. After browsing for what was probably too long, I did manage to pick out a set of colors that I felt would work nicely in conjunction with the site theme. I quickly decided colors for each section of the site (i.e. the lightest color on the template for content) and a few copy-and-paste’s later my design had been brought to life.





Colors are often the central part of a design, but they are not the final part. Text and image effects are important too. Bearing this in mind, I set out to experiment with fonts and background effects. While the earlier phases had gone very smoothly, it was at this point that I started to hit the road bumps. These road bumps eventually became road blocks, as like a true nerd I was torn between two fonts for the header. While it may seem like it isn’t a big deal, you’re right. Upon that premise, I randomly picked one and continued on my way.


I felt a logo was needed to help accentuate the presence of the header. With a bit of experimentation into Photoshop I was able to come up with a rough idea for a logo – several boxes that correlated to the pagination-style navigation I had in place. After a brief conflict with colors I reverted back to ColorSchemer to settle upon another color theme for the logo.





After formatting the logo into the header, changing the text, and mixing in a gradient here and there, I was finished. Overall, the design work was very easy compared with ways I’ve done it in the past.


I will definitely be wireframing and ColorSchemer’ing in the future.

Saturday, April 21, 2007

Pagination Domination [part 1]

"Pagination Domination" is an idea for a website that I derived from FOX network’s "Animation Domination", a two-hour segment of new shows. Pagination is a web design term where, well, I can best explain only by example. Look at the navigation on Ellis Labs, where the current page button stands out from the rest of the links. I have never done a pagination-style navigation before on a website, and I knew I wanted to try it. Plus, I had recently learned of a new technique for planning the layout of a webpage and I wanted to try my hand at that too. At this point, I knew there would probably be only two possible outcomes: I would cry myself to sleep at night, haunted by the hideous monster I had created, or I would rejoice to the angels of web design. I wasn't too fond of the first choice.

Planning


The planning phase began yesterday afternoon. My first step was to head directly over to Dynamic Drive's CSS library, to pick up a free pagination example. Wow, that was a lame first step, wasn't it? I can only agree, but I do have some defense here – it was my first time and I needed a bit of a push in the right direction. So take that.


The next step was to make a copy of my template, a folder with only two mostly-empty files. But these files are a huge time saver for me, as most of my websites begin with me typing the same exact thing each time. The template I have created (continue to tweak) has set up most of the beginning work for me, so I can dive right into getting the harder parts out of the way. I would recommend this practice to anyone who builds multiple websites or plans to in the future – saved time is saved money.


After inserting the pagination code into my blank template files, I began the new technique I namelessly mentioned in the introduction: wireframing. This is something I’m sure most web design professionals have been doing for years, but I've just now picked up on it and in hindsight, it does work well. This is where elements of a website, such as the header, footer, content boxes, sidebars, logos, etc., are just roughly sketched out via an image editing program. I decided I wasn’t going to use Photoshop for this though, and would instead code everything directly into my template. I don't think it was necessary for me to attempt to draw out a website I would not even be publishing online. After some simple editing, I came up with this:


Pagination Domination: Planning
Tune in on Monday for part two of the design!


Link of the Day


Today’s Link of the Day belongs to SEORat.com – “A new way to track Web 2.0”. I could try to explain, but their introduction puts it nicely: “SEORat is a website that monitors, tracks and displays several different types of backlink related information for any given web site. The purpose of SEORat is to actively monitor sites rather then having to do manual lookups on other websites.” Check it out!

Friday, April 20, 2007

Site Update

Now, I'm not a huge fan of cliches, but I'm about to pull one out.

Quality over quantity.

Yes folks, I regret to inform you webdivine will be switching to an every-other-day blog, so you will no longer be able to expect updates every day. This is for the good of the site. I can't churn out worthwhile articles every single day, so to remedy this I will create my blog posts over two days.

This will begin tomorrow, so check back tomorrow.

Wednesday, April 18, 2007

Weekly Site Spotlight

Time for the... Weekly Site Spotlight!

This week's spotlight goes to: EnergyRace - "Make a Difference. Measure it here."





I'll be using the 4 C's grading scale for this one.

Creativity: 8 (nice little wavy top thing eh?)
Cleanliness: 9 (very clean!)
Color: 9 (decent mix/blend)
Code: 9 (logical and whitespace used well)
Total: 35/40

Not bad! Beats out last week's site spotlight by only one point.

Link of the Day


Ah, yes! Behold WebDivine's newest web design related feature: Link of the Day. In every post from now on (yes, until the end of time), I will be showing off a web design or web development link most deserving of the title of "Link of the Day".

I decided to start it off right, so I decided to choose a highly-qualified site.

Tuesday, April 17, 2007

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!

Sunday, April 15, 2007

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.

Saturday, April 14, 2007

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?

Friday, April 13, 2007

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.

Wednesday, April 11, 2007

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, April 10, 2007

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?

Monday, April 9, 2007

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.

Sunday, April 8, 2007

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.

Saturday, April 7, 2007

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.