Jamie Le Souef

Superb reference posts on what happened in the design year of 2007, covering everything from the basic principles of design, via typography and colour to advanced design tips & tricks.

Highly recommended!

The 50 Most Popular Web Design Blog Posts, Resources & Cheat Sheets of 2007

Post Tags : Art, blog, designer, stylesheet, typography, Web Design, xhtml
Filed under CSS, Design, General, Web Design

The following is from a post from Webmaster World.

The following will build a successful site in one years time via Google alone. It can be done faster if you are a real go getter, or everyone’s favorite, a self starter.

1. Prep Work & Begin Building Content

Long before the domain name is settled on, start putting together notes to build at least a one hundred page site. That’s just for openers. That’s one hudred pages of real content, as opposed to fluff pages like copyright information and about us pages.

2. Domain Name

Easily brandable. You want Google.com and not MyKeyword.com. Keyword domains are out—branding and name recognition are in—big time in. The value of keywords in a domain name has never been less to search engines.

Learn the lesson of Goto.com becomes Overture.com and why they did it. It’s one of the most powerful gut check calls I’ve ever seen on the internet. That took serious resolve and nerve to blow away several years of branding.

3. Site Design

The simpler the better. A general rule of thumb to follow is that text content should outweigh the HTML content. The pages should validate and be usable in everything from Lynx to leading edge browsers. Keep the HTML clean and stucturally sound, it makes it easier for spiders to eat up your content.

Stay away from heavy things like Flash, Document Object Model (DOM), Java, and JavaScript. Go external with scripting languages if you must have them—there is little reason to have them that I can see—they will rarely help a site and actually stand to hurt it greatly due to the many factors most people don’t appreciate, such as search engines’ distaste for JavaScript being just one of them.

Arrange the site in a logical manner with directory names hitting the top keywords you wish to hit. You can also go the other route and just throw everything in root. This is a rather controversial method, but it has been producing good long-term results across many search engines.

Don’t clutter and don’t spam your site with frivolous links. Keep it clean and professional to the best of your ability. Learn the lesson of Google itself. Simple is retro cool. Simple is what surfers want.

Speed isn’t everything, it’s almost the only thing. Your site should respond almost instantly to a request. If you get into even three to four seconds delay until “something happens” in the browser, you are in trouble.

Those few seconds may vary for someone living in a country other than your native one. The site should respond locally within three to four seconds tops! Any longer than that, and you’ll lose ten percent of your audience for every second. That ten percent could be the difference between success and failure.

4. Page Size

The smaller the better. Keep it under 15k if you can. The smaller the better. Keep it under 12k if you can. The smaller the better. Keep it under 10k if you can. I trust you are getting the idea here. Over 5k and under 10k. Yeah, it sucks, and it’s tough to do, but it works. It works for search engines, and it works for surfers.

5. Content

Build one page of content with 250 to 500 words per day. If you aren’t sure what you need for content, start with the Overture keyword selector tool and find the core set of keywords for your topic area. Those are your subject starters.

6. Keyword Density & Position

Simple old fashioned search engine optimization from the ground up. Use the keyword once in the title, once in the description tag, once in a heading, once in the url, once in bold, once in italics, and once high on the page. Try to hit a keyword density of five to twenty percent.

Use good sentences and speel check it. Spell checking is becoming increasingly important as search engines use auto-correction during searches. There is no longer a reason to look like you can’t spell—unless, of course, you really are phonetically challenged.

7. External Links

From every page, link to one or two high-ranking sites under that particular keyword. Use your keyword in the link text, as this is ultra important.

8. Internal Links

Link to on-topic, quality content across your site. If a page is about food, then make sure it links to the fruits and veggies page.

Specifically with Google, on-topic internal linking is very important for sharing your PageRank value across your site. You do not want one “all-star” page that out performs the rest of your site. You want fifty pages that produce one referral each a day, not one page that produces fifty referrals a day.

If you do find one page that drastically out performs the rest of the site with Google, you need to balance some of that PageRank value by moving it to other pages. It’s the old share the wealth thing.

9. Put It Online

Don’t go with virtual hosting. Stick with a hosting plan that offers a static IP address. Make sure the site is “crawlable” by a spider. All pages should be linked to more than one other page on your site, and not more than two levels deep from the root. Link the topic vertically as much as possible back to the root. A menu that is present on every page should link to your site’s main “topic index” pages.

Don’t put it online before you have a quality site. It’s worse to put a “nothing” site online, than no site at all. You want it flushed out from the start.

Go for a listing in the Open Directory Project (ODP). If you have the budget, then submit to Looksmart and Yahoo. If you don’t have the budget, then try for a freebie on Yahoo—but don’t hold your breath.

10. Submit It

Submit the root to Google, Fast, AltaVista, WiseNut, DirectHit, and HotBot. Now comes the hard part: forget about submissions for the next six months. That’s right. Submit it and forget about it.

11. Logging & Tracking

Get a quality tracker that can do justice to inbound referrals based on log files. Don’t use a lame graphic counter, you need the real deal here. If your host doesn’t support referrers, then back up and get a new host. You can’t run a modern site without full referrals available all day, every day, and in real time.

12. Spiderlings

Watch for spiders from search engines. Make sure those that are crawling the full site can do so easily. If not, double check your linking system to make sure the spiders find their way through the site. Don’t fret if it takes two spiderlings to get your whole site done by Google or Fast. Other search engines are pot luck and it is doubtful that you will be added at all, if not within six months.

13. Topic Directories

Almost every keyword sector has an authority hub on its topic. Go submit within the guidelines.

14. Links

Look around your keyword sector in Google’s version of the Open Directory Project (ODP). This is best done after getting an ODP listing. Find sites that have a links page or that freely exchange links. Simply request a swap. Put a page of relevant content and links up for yourself as a collection spot.

Don’t freak out if you can’t get people to swap links. Just move on. Try to swap links with one fresh site a day. A simple personal email is enough. Stay low key about it and don’t worry if a site won’t link with you. Eventually they will.

15. Content

One page of quality content per day. Timely, topical articles are always the best. Try to stay away from to much personal, blogging type stuff, and look more for article topics that a general audience will like. Hone your writing skills and read up on the right style of “web speak” that tends to work with the fast and furious web crowd.

Lots of text breaks. Short sentences—lots of dashes—something that reads quickly.

Most web users don’t actually read, they scan. This is why it is so important to keep low key pages today. People see a huge overblown page, and a portion of them will hit the back button before even trying to decipher it. They’ve got better things to do than waste 15 seconds trying to understand your whiz bang flash menu system. Just because some big support site can run flashed out motorhead pages, that is no indication that you can. You don’t have to do what they do.

Use headers and bold text liberally on your pages as logical separators. I call them scanner stoppers, where the eye will logically come to rest on the page.

16. Gimmicks

Stay far away from “fads of the day” or anything that appears spammy, unethical, or tricky. Plant yourself firmly on the high ground in the middle of the road.

17. Link Backs

When you receive requests for links, check the site out before linking back with them. Check them through Google and their PageRank value. Look for directory listings. Don’t link back to junk just because they asked. Make sure it is a site similar to yours and on topic.

18. Rounding Out The Offerings

Use options such as email a friend, forums, and mailing lists to round out your site’s offerings. Hit the top forums in your market and read, read, read until your eyes hurt because you read so much. Stay away from “affiliate fads” that insert content on to your site.

19. Beware Of Flyer & Brochure Syndrome

If you have an e-commerce site or online version of bricks and mortar, be careful not to turn your site into a brochure. These don’t work at all. Think about what people want. They aren’t coming to your site to view “your content,” they are coming to your site looking for “their content.” Talk as little about your products and yourself as possible in articles.

20. Build One Page Of Content Per Day

Head back to the Overture keyword selector tool to get ideas for fresh pages.

21. Study Those Logs

After 30-60 days you will start to see a few referrals from places you’ve been listed. Look for the keywords people are using. See any bizarre combinations? Why are people using those to find your site? If there is something you have over looked, then build a page around that topic. Retro engineer your site to feed the search engine what it wants.

If your site is about “oranges,” but your referrals are all about “orange citrus fruit,” then you can get busy building articles around “citrus” and “fruit” instead of the generic “oranges.”

The search engines will tell you exactly what they want to be fed—listen closely, there is gold in referral logs, it’s just a matter of panning for it.

22. Timely Topics

Nothing breeds success like success. Stay abreast of developments in your keyword sector. If big site is coming out with a new product at the end of the year, then build a page and have it ready in October so that search engines get it by December, e.g. go look at all the PlayStation 3 and Nintendo Wii sites in Google right now. Those are sites that were on the ball last summer.

23. Friends & Family

Networking is critical to the success of a site. This is where all that time you spend in forums will pay off. Here’s the Catch-22 about forums: lurking is almost useless. The value of a forum is in the interaction with your fellow colleagues and cohorts. You learn long-term by the interaction—not by just reading.

Networking will pay off in link backs, tips, email exchanges, and it will put you “in the loop” of your keyword sector.

24. Be Social

Social bookmarking and networking sites can be used to your advantage if the content is right. Places like Digg, Delicious, Technorati, StumbleUpon, and so on, can really expose your site to those that truly are interested. Expect some great backlinks and traffic if you use this to your advantage.

25. Notes, Notes, Notes

If you build one page per day, you will find that a brainstorm like inspiration will hit you in the head at some magic point. Whether it is in the shower (dry off first), driving down the road (please pull over), or just parked at your desk, write it down! Ten minutes later and you will have forgotten all about that great idea you just had. Write it down, and get detailed about what you are thinking. When the inspirational juices are no longer flowing, come back to those content ideas. It sounds simple, but it’s a life saver when the ideas stop coming.

26. Submission Check At Six Months

Walk back through your submissions and see if you are listed in all the search engines you submitted to after six months. If not, then resubmit and forget it again. Try those freebie directories again too.

27. Build One Page Of Quality Content Per Day

Starting to see a theme here? Google loves content. Lots of quality content. Broad based over a wide range of keywords. At the end of a years time, you should have around four hundred pages of content. That will get you good placement under a wide range of keywords, generate reciprical links, and overall position your site to stand on its own two feet.

Do those twenty-seven things, and I guarantee you that in ones years time you will call your site a success. It will be drawing between 500 and 2000 referrals a day from search engines.

If you build a good site with an average of four to five pages per user, you should be in the ten to fifteen thousand page views per day range in one years time. What you do with that traffic is up to you, but that is more than enough to “do something” with.

Post Tags : Google, SEO, Standards, stylesheet, Tips, Tutorial, W3C, Web 2.0, Website, xhtml
Filed under CSS, Design, General, Web Design

If you are anything like me, and most of the Web Design industry, you’ve run into CSS bugs that in IE that just don’t make any sense. You’re building the perfect site with W3C valid CSS and XHTML1, you test it in Firefox, Opera, Netscpae and even Safari beta for Windows only to find that IE6 just makes a total mess of your hard work.

According to these the stats at W3 Schools IE6 still controls 36.9% of the market (IE6 and 7 combined have 57%) so unfortunately ignoring the issue is just not an option.

We all know about CSS hacks, tips and tricks but this can make your CSS files really messy. Also you might find that you are using the same techniques over and over again on different sites.

One way that I’ve found to create reusable CSS code is to use Conditional Comments. I’ve had a number of people ask me about them so i thought i would write a introduction to them.

Conditional Comments are only available in the Windows version of Internet Explorer from version 5 onwards. The conditional comments are wrapped in the html comment tag ( <!– –>) which means that all other browsers treat the content within these tags as normal comments and ignore what’s within. GREAT!

You can include CSS files within the comments, javascript, images and - most importantly - a link to Firefox

One of the best features of Conditional Comments is that you can target individual version of IE (5.0, 5.5, 6.0 and 7). You can also specify multiple version.

Here is a run down of the available syntax:

<!- -[if IE]>This is Internet Explorer<![endif]- ->

<!- -[if IE 5]>This is Internet Explorer 5<![endif]- ->

<!- -[if IE 5.0]>This is Internet Explorer 5.0<![endif]- ->

<!- -[if IE 5.5]>This is Internet Explorer 5.5<![endif]- ->

<!- -[if IE 6]>This is Internet Explorer 6<![endif]- ->

<!–[if IE 7]>This is Internet Explorer 7<![endif]- ->

<!- -[if gte IE 5]>This is Internet Explorer 5 and up<![endif]- ->

<!- -[if lt IE 6]>This is Internet Explorer lower than 6<![endif]- ->

<!- -[if lte IE 5.5]>This is Internet Explorer lower or equal to 5.5<![endif]- ->

<!- -[if gt IE 6]>This is Internet Explorer greater than 6<![endif]- ->

Nothing really tricky here, the if statement is self explanatory. Begin with an if statement (if x=true then) and end with endif.

There are two special syntaxes used here.

• gt: Grater than
• lt: Less than
• gte: Greater than or Equal to
• lte: Less than or Equal to

Example of this used in xhtml

PNG Javascript fix

<!- -[if lt IE 7.]><script defer=”defer” type=”text/javascript” src=”includes/pngfix.js”></script><![endif]- ->

Loading multiple CSS files

<link href=”css/main.css” rel=”stylesheet” type=”text/css” />
<!- -[if IE 6]><link href=”css/ie6.css” rel=”stylesheet” type=”text/css” /><![endif]- ->
<!- -[if lte IE 5.5]><link href=”css/ie55.css” rel=”stylesheet” type=”text/css” /><![endif]- ->

Hope that helps. I now have reusable CSS files that I use in any sites that require them (hostly all). Makes life easier and a good place to bunch all those workarounds (CSS hacks?!) into one easily accessible place.

PLEASE NOTE: I have added a space between the “-” because for some reason word press converts them to “–” you need to remove the space to make html comments

Have fun

(and please comment.. no one comments on my Blog! :))

Post Tags : Firefox, IE, Internet Explorer, Microsoft, PNG, Standards, Tips, Tutorial, W3C, Web, Windows, xhtml
Filed under CSS, Design, Microsoft, Web Design

You may call it Lightbox, or Greybox, or Thickbox, but it’s always the same effect.
When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fades the pagein the background to show you new content in the foreground.

read more | digg story

Post Tags : CSS, Design, JavaScript, Tips, Tutorial, Web 2.0, xhtml
Filed under CSS, Design, General, Web Design

Jamie’s Pure CSS round Corners

There have been many solutions on the internet on how to those funky round corners everyone loves. And, in the right application, I love them to. Cutting up image slices in Photoshop and then trying to get them to place correctly in most, if not all, browsers is a pain in the arse! Pixel differences with browsers (namely the dog of a browser -IE6) kills me every time.

I stumbled along a solution a while ago, using CSS can not recall where from, but I’m constantly using it, and thought it best to give out to the re rest of my audiance.. current 5 people (none of which are web designers…).

Anyways, here it all is.

The CSS

/*START RND CNR CSS*/

#sidebar{
width:15em;
background: #9BD1FA
}

#sidebar b.rtop,
#sidebar b.rbottom{
display:block;
background: #FFF
}
#sidebar b.rtop b,
#sidebar b.rbottom b{
display:block;
height: 1px;
overflow: hidden;
background: #9BD1FA
}
#sidebar b.round1{
margin: 0 5px
}
#sidebar b.round2{
margin: 0 3px
}
#sidebar b.round3{
margin: 0 2px
}
#sidebar b.rtop b.round4,
#sidebar b.rbottom b.round4{
margin: 0 1px;
height: 2px
}
/*END RND CNR CSS*/

The HTML

<div id=”sidebar”>
<b class=”rtop”>
<b class=”round1″></b>
<b class=”round2″></b>
<b class=”round3″></b>
<b class=”round4″></b>
</b>
<h1>CSS Rounded Corners without using Images. Works in IE6, IE7, Firefox</h1>
<b class=”rbottom”>
<b class=”round4″></b>
<b class=”round3″></b>
<b class=”round2″></b>
<b class=”round1″></b>
</b>
</div>

The Result

Check out this page to see the above sweetness in action.

Post Tags : CSS, Design, Standards, stylesheet, Tutorial, W3C, Web 2.0, xhtml
Filed under CSS, Design, General, Web Design

I have added a bbPress blog for discussion of anything that I post about. Mainly for my xhtml, css, asp, web ect stuff.

Have anything to add!? Please feel free to post away at my form ([Tag]Comments from this Blog will be added to my forum… I believe…)

Post Tags : bbpress, Wordpress, xhtml
Filed under CSS, General, Web Design

As a web designer and developer, this is a fantastic tool!
Introducing a way to check your stylesheet selectors for redundancy, optimizeCSS andserve cleaner files to the end user.

read more | digg story

Post Tags : CSS, Tutorial, xhtml
Filed under CSS, General, Web Design