• Home Page
• Computer Blog
• Chess Blog
• Exercise & Diet Blog
• Theology Blog
• Islamic Terrorism Blog
• Contact Us

Creating Wordpress Themes from scratch.

This first article is meant to give you a global picture about creating Wordpress themes. Let’s start by answering a few common questions.

Do you need to know PHP to create or edit Wordpress themes?

The short answer is no. It would help to know some PHP but many theme designers don’t, and they do just fine.

Do you need to understand MySQL to create or edit Wordpress themes?

Again, no. Mysql is the database that drives Wordpress and is a key component … nonetheless, it has no impact on creating themes. So don’t worry about it.

What do you need to know in order to be able to edit or create a Wordpress theme?

I would say that you need to know three basic things:

1. HTML/XHTML
2. CSS
3. The Wordpress page hierarchy and behavior.

I think the first two are obvious, but the last needs some more explaining.

(more…)

Flash CS3 Video Tutorial: Nested Animations in Movie Clips

Hi,

This is just the first of many new video tutorials on Flash CS3 (and the upcoming Flash CS4) and Actionscript 3.0.

Video: Nested Movie Clips in Flash CS3

Summary of the video tutorial:

Using Nested Animations in Movie Clips with Flash CS 3
By: Santo Romano
Tutorial level: Beginner to intermediate Flash users.
Flash version: Flash MX, MX2004, CS2, and CS3

When creating simple animations in Flash, the main timeline is often the best place to position your animations. However, when these animations are repetitive, the best way to handle them is to utilize the movie clip symbol in Flash. Unlike the other symbols you’ll find in the Flash environment, the Movie clip symbol is perfectly suited to handle this kind of work. Rather than creating multiple key frames over and over again, it is much better to nest the simple animation inside of a Movie Clip, and to let it handle most of the work.

Thanks,

Stefan Mischook

www.killersites.com

Footer Design Showcase: 75+ Creative Footer Designs

In writing about redesigning the TechCrunch footer I came across many great examples of creative and useful footer design.

So I thought it was about time I created my own showcase of web site footer designs.

Footer design showcase examples (click to view all)

Some are simple and elegant; many are information-rich. But all combine typography, color, layout and imagery to reinforce the brand of the site, engage visitors and drive traffic to other pages. Enjoy!

Cleaner code is better than faster code

I can’t tell you how many times that my programming experience (in Java, PHP etc) has guided me in my web design work … and strangely, even in other aspects of my life not at all related to topics ‘nerd’.

… Ah, nerd wisdom prevails in all aspects of life.

Anyway, here yet again, is another example where programming guides me: this time, it’s all about web design and code.

-

Over the last few years, the consensus in the web design community has been to streamline code. In real terms, that comes down to:

• collapsing html
• collapsing css
• … and consolidating css code into one file, to minimize the number of server hits.

… The idea is to speed up web page load times and to reduce web server loads.

This is an important goal and something all web designers should be concerned about. The problem is that if you are concentrating on optimizing your CSS or HTML to speed things up, you are concentrating on the wrong parts of your websites.

The fact is, that most of the optimization opportunities is actually found in your images, Flash movies and other multimedia content - not the code.

(more…)

Protecting against blog comment spam.

Hi,

First things first: thank you for Akismet!

… I just wanted to offer my sincere appreciation for the Wordpress anti-spam plugin: ‘Askimet’.

This nifty plugin has saved me countless hours (and possibly days) of work by filtering out hundreds of spam post each and every day!

I can easily say that for me, Askimet has proven to be the most important plugin for Wordpress.

… Just in the time it took me to write this post, Askimet has caught 7 spam comments!

If you see a spammer, smack him!

It is clear that blog spammers are among the worst of Web citizens. They are the hyena’s of the Web, trying to steal traffic they don’t deserve.

Blog spam protection tips

Being a high value spam target (the juicier the traffic …), I can offer the following advice:

(more…)

Alexa Rankings - how accurate are they?

One of the Web’s most popular places to get an idea of a web site’s traffic is Alexa.com.

There is one major problem though: Alexa is not accurate at all.

Alexa gets a lot of it’s traffic data from its’ Alexa toolbar and other nebulous source they don’t identify. So that leads me to think that they still get most of their data from the toolbar.

Sounds OK, except for one glaring problem - who uses the Alexa toolbar?

(more…)

Estimating the time it takes to build a website

One question that is put to me from time to time is:

“… how can you budget the amount of time it will take to build a website?”

This can be a tricky thing because there are so many factors involved:

• How fast do you work?
• Is your client going to be really picky and ask for many revisions?
• Are you likely to come across time consuming bugs?

Ultimately, you will have to learn how fast it takes YOU … to build a website.

This comes with practice but there are few things that can make your web design budgets more accurate and that can also help you to control the time you spend building a web site.

Begin timing yourself

Start making time estimates for each website, and then track the actual time it takes you to complete a project. Soon, you will start getting better at making estimates. Be sure to track particular parts of the web design process:

• Time dealing with the client. Phone calls, meetings, writing out contracts etc…
• Time it takes to create the basic look of the site.
• Time it takes to build out the actual pages - after you’ve established the look.
• Time it takes to add in any special functionality. Example: add a blog, shopping cart etc…

Controlling the time by controlling your clients

Often times, how well you manage your clients, will figure into how accurate your budgets are. If you let them, most clients will have you running in circles, as they constantly ask for changes and additions to the website - at no extra cost of course!

… This is all too common and will eat away at your profit and sanity. You must learn to manage your clients. I would suggest the following:

• Set up a maximum of 3 revisions on a fixed price quote. If your client insist on a fixed price for a job (most do), then you must set limits on how many times you will change things for them.
• When a client says ‘yes’ to some piece of work, have then sign off on it.
• Before you start the web design work, be sure you detail in the contract, exactly what you are providing. Count pages, functionality etc.

Complexity in the project can be time traps

In a nutshell: as a project becomes more complex in terms of the functionality (complicated CMS updates, custom e-commerce work etc) you should factor in that you will have a much greater chance of running into unforeseen bugs.

If you have new or complex components in a web design job, you should make your best time estimate and then multiply it by 2.4.

The 2.4 rule of time estimation

This is an engineering rule that I picked up from an uncle of mine who ran huge government projects. Based on his 25 years experience, he found that the best budgets had to be multiplied by 2.4 to get a truly accurate assessment.

Big projects are harder to estimate than little ones, nonetheless, when it comes to unknowns, this multiplier is a nice way to protect yourself.

Thanks,

Stefan Mischook

www.killersites.com

Redesigning the TechCrunch Web Site Footer

I've been a reader of TechCrunch for some time. Although I mainly read it via RSS, I occasionally visit the site — either to post a comment or view something that's not displaying properly in my RSS reader.

I'm always interested to check out the design of popular, content rich sites like this, to see what they are doing to make the full range of their content available to their readers.

The TechCrunch design is serviceable at best, and could probably do with a refresh. However, it is the footer that has always irked me the most.

Before: What Footer?

Currently, the site footer is almost non-existent:

Current TechCrunch footer (click to view full size image)

This seems like a lost opportunity to me as there are so many things you can do with a web site's footer area — blogs in particular — to bring new content to readers' attention.

With this thought in mind I took a shot at redesigning the TechCrunch footer.

After: It's…So…Beautiful!

Bearing in mind that this is the product of about an hour's work and is not intended to be presented as a finished design, here's what I came up with:

Redesigned TechCrunch footer (click to view full size image)

As far as the content to be included in the footer, my rationale is as follows.

TechCrunch Network

The TechCrunch network is quite a large family of sites, some of which may be less familiar to TechCrunch readers.

I thought it would be a good idea to list the sites in the network along with a brief summary of what each was about.

Popular Entries

TechCrunch is updated many times a day, and I don't have the time or interest to read through all the posts.

However, it would be useful if I could see what posts were recently popular — much like Digg does — so that I could make sure I didn't miss out on any major stories.

Recent Entries

This section is a pretty default option for an informational footer like this. It's never a bad idea to make more posts available from the home page.

However, this area could be used for anything, depending on the priorities of the site — advertisers, comments, categories, you name it.

Parting Thoughts

Regardless of what you think of my footer design, the point I'm trying to make is simply to do something with this area.

This is free space to use. It doesn't get in the way of your main content and vie for your readers' attention. It doesn't complicate your information architecture.

However, when done right it just might provide enough of a hook to keep your visitors reading your content rather than heading off elsewhere.

Further Reading

• 35 website footer designs, trends and styles
• Footers In Modern Web Design: Creative Examples and Ideas
• Web Design Elements: Footers
• Geek Trends: 15 Footers with great usability
• CSS-Based Footers: Modern Solutions
• Put Your Best Foot Forward: 19 Gorgeous Website Footers

Dreamweaver CS3 templates save time

Hi,

When I was working on the redesign of the killersites.com, I found (as a starting point) that the templates that ship with Dreamweaver CS3 useful.

Dreamweaver CS3 starter templates

Dreamweaver has a nice collection of bare-bones web templates. One thing I found cool about these templates, is that they contain a lot of notes that describe why they (the web-nerds at Adobe) have certain things in place - like the specific code they used to deal with a given CSS layout issue.

… This is another good way to learn more about CSS.

(more…)

Why Flash CS3 makes Flash important again - and this time, it’s for real!

Up until Flash CS3, I think Flash had been slowly drifting into becoming a niche market technology. But now, Flash CS3 (and the Flash player 9) puts Flash back into the game as an important player.

… This means that it now makes more sense for web developers to learn Flash technology. I go over some of the details below.

(more…)

Do Online Press Releases Serve a Useful Purpose?

In his article Press releases: spin and propaganda, Gerry McGovern recently railed against the practice of posting press releases on web sites, asking the question:

…why do so many organizations still publish press releases prominently on their websites?

I agree in principle that putting press releases on a web site does not serve the purpose for which they were originally intended. That is, providing information to journalists for them to write stories about you (although with the advent of the social media release this might be changing).

However, regardless of whether they are serving their original purpose, I wonder if the practice is now so ingrained that visitors expect to find an archive of press releases in the About or News section of an organization's site, along with a list of the most recent ones on the home page.

I, for one, wouldn't bat an eye if I came across this sort of setup on a web site, and quite often will scan over the most recent ones on the home page.

Under certain circumstances I actually find press releases to be very useful. If I am researching a potential vendor I'll always read through their press releases to see what's been happening with their product and what deals they have landed.

These days, company blogs serve a similar purpose, but there's often too much noise. Press releases are useful because they contain only 'official' news about the organization.

When I'm researching a company as a job applicant I'll always read through the more recent press releases as part of my interview preparation. For example, when I was doing research for my current position, it was invaluable to be able to easily find NCsoft's 2007 financials.

In his article, McGovern decries the spin that is put on press releases. Well, yes, but I think it's generally accepted that an organization will try to present itself in the best light.

However, it's not hard to go beyond that to get at the facts that are being reported — a deal was made, a product launched, an executive was hired, etc.

Also, the absence of recent press releases can be a telling sign of a company's financial health. You certainly don't want to become a customer or employee of a company that might not be in business in 12 months.

Of course, it is true that most press releases are poorly written from a web standpoint.

They are typically not formatted for reading online, use language that requires too high a reading level, and include information about the organization that is unnecessary when read on that organization's own web site.

However, these are issues of implementation and can be said of many other forms of online content. Have you read any web site privacy policies lately?

Although McGovern correctly concludes by saying:

The Web is not where you announce; it's where you do.

I think there's a place for the press release in helping certain audiences easily find out what it is that you have done.

How to organize your css code: the ‘killer’ css structure

I can’t stand articles that make you read two pages before getting to the point. With that in mind, let’s look at how I think css code should be organized.

In a nutshell: css code should be divided up into at least 4 separate pages:

1. page-structure.css
2. text-styles.css
3. misc.css
4. ie-styles.css

How about we call this the ‘killer’ css structure.

Before I go into the details of what each css file contains (if it’s not already obvious), I want to quickly cover WHY you might want to use this basic css structure for all your websites.

Why use the ‘killer’ css structure?

It all comes down to one of the key reasons for using css in the first place:

A common mistake

What I see over and over again, are web designers putting all their css code into one css file. This is indeed a big leap forward from using font tags all over your website … but by having only one huge css file, you’ve created another big messy file to deal with.

To the point

Page-structure.css contains only css that defines the structure of your page. That is to say things like:

- css code that sets whether the page is liquid of fixed.
- css code that sets whether the page is centered or justified left.
- css code that sets up the columns

etc …

I like to put the page structure code in its’ own file because page structure css code is verbose (there’s a lot) and it can get a little black-magical.

What is black-magical css?

We all know that except for the simplest css layouts, it can be a real pain in the ass to get page layout to work in css.

… Especially when floats and Internet Explorer bugs come into the mix.

Anyway, the point is that css for page layout often contains nonsensical (black-magical) code to make it work.

OK, back to page-structure.css:

Another reason to have page-structure.css, is that once you’ve done creating your page structure, you rarely have to go into that code. So why bother having to scroll past it every time you edit other parts of your css?

Personally I find myself tweaking css rules for text, color and images much more than I do page structure css.

Text-styles.css contains css code that only affects text. So I have all my header tags defined along with paragraph tags and classes. Again, when needing to edit some aspect of my text for the hundredth time … I just pop open the very clean and simple text-styles.css.

Misc.css is a style sheet that contains css code that does things other than page structure and text styling. This ultimately is a judgment call, but I typically put in formating for tables, forms, list or special id’s and classes.

IE-styles.css is of course, for your css rules that manage the Internet Explorer bugs. This all ties into the IE Conditional comments strategy.

You may need another ie-styles.css to deal with specific versions of IE. For example, you may have an ie6-styles.css. But thankfully, this is become less and less likely since IE6 use is falling fast.

Thanks for reading,

Stefan Mischook

www.killersites.com

Killersites.com get a facelift.

Hi,

I’ve been a busy little bee lately.

This past week, I finally got around to re-skinning killersites.com. Yes, after about 5 years of using the same basic layout, I finally decided that an update was needed.

I think when someone said:

“… killersites.com kinda looks … 2000 ish.”

… I was pushed over the edge and began the design work. You can see the new layout on the home page now:

www.killersites.com

Later on, I will be rolling this out throughout the rest of the web site and on other sites as well:

- killerphp.com
- how-to-build-websites.com

etc …

To build this new look I spent about 50 hrs and about 15 public revisions. As I went along I released early drafts of the new look for people to comment on in the forums. You can read the thread and see the progress of the redesign here:

killersites redesign discussion

Now that I’ve got this in place, I can go back to creating new videos.

Thanks,

Stefan Mischook

www.killersites.com

Is It Fair To Criticize Bad Design?

Jacob Nielsen recently posted an Alertbox simply titled Four Bad Designs.

While I don't disagree with his observations and his conclusions, I also felt that perhaps it was a little unfair to single out these sites in particular for his scathing remarks:

Following is a modest harvest of design stupidities I've recently encountered.

Ouch!

As one who works in the web design industry I am all too aware of the pressures that cause seemingly poor design decisions to be made.

These causes can include lack of time to properly design and test, internal politics, lack of resources (especially when it comes to writers), and insufficient understanding of the web by those making decisions concerning it.

Web Design Goal Triangle

I like to think of the web design process in terms of the "goal triangle" (thanks Brian) where the design of a web site is influenced by 3 types of goals (each of which can be thought of consisting one side or point on a triangle):

1. Organizational goals
2. User goals
3. Web team goals

For example, the organization (e.g. marketing) may want a site that is highly interactive and uses a lot of bells and whistles.

On the other hand, users may just want a site that's easy to navigate, while the web team wants to develop something they can easily maintain.

These goals often conflict in some way, and the web design process involves balancing them so as to best meet all three.

If one of the goals outweighs the others by too much, the web site will not be successful for the stakeholders of those other two goals.

And if organizational and web team goals outweigh user goals your site may end up in Mr. Nielsen's next writeup.

Why Can't We All Just Be Friends?

It's all too easy to criticize web sites for seemingly stupid design mistakes, and I know I've been guilty of it in the past.

However, I'm generally wary about writing posts that are critical of other web sites because I know how difficult it is to develop a web site in a corporate environment — there are simply too many cooks in the kitchen.

This is why I am reluctant to make snap observations about a web site without knowing the reasoning behind the decisions that were made.

It's also why I recommend that anyone interviewing for a web design-related job not offer a critique of the company's web site without being asked.

On the other hand, it is useful to point out design mistakes so that others can learn from them.

I would prefer to see a more balanced approach that includes some positive statements about the site along with the bad — after all, there are few web sites that are completely without merit.

Those In Glass Houses…

And of course, Mr. Nielsen himself manages to commit two cardinal sins in this article:

1. Not linking to the sites he is discussing. He even goes so far as to write their URLs without making them into links. I hate having to copy and paste a URL instead of click on it.

2. Link hoarding. This practice whereby a site links to other internal pages when it should be linking out to an external page or site is becoming the bane of the internet. Please stop it.

Are newsletters still an effective way to keep in touch with your audience?

I’ve been running the killersites.com newsletter (among a few others) for several years now. Though I’ve found it to effective, with regards to keeping in touch with people, it is clearly not what it used to be.

Stupid Spammers

Yea, the porn and pill spammers have really done a lot of harm to newsletters. These days, if you send out a newsletter, you will have to deal with a few things that just get in the way:

1. Email filters – gone wild.
2. Angry (crazy) recipients.

These days, email filters are really fined tuned to catch just about any type of spam. Unfortunately, they tend to trash real email from time to time. So when writing my newsletter, I have to be careful to avoid certain keywords that might get my newsletter blocked.

(more…)

NCsoft North America is Hiring Web Folks

Want to come and work for a leading computer game developer and publisher? I'm looking for a web producer and a web production specialist to join the web team at NCsoft here in Austin.

Now that I've been in my new position all of three weeks I can say with confidence that this is a cool place to work.

Dress is casual, the atmosphere is very friendly, and people are very bright and committed to creating and supporting great MMO games.

Currently, the web team is three talented professionals and me, so if you like working with a small team you'll fit in well.

I hope to be able to add a few more people to the team over the coming months to flesh out our expertise, so we should soon be a well-resourced and very capable in-house web team.

Which is good, because I, and my colleagues in marketing and the game studios, have some big plans for the year ahead and beyond.

Now, who wouldn't want to be a part of that?!

BBC News Site Redesign and User Feedback

You may or may not be aware that the BBC recently redesigned its news web site. I'm going to comment on the merits of the redesign (well, okay, I like it) — there's plenty of that going on elsewhere:

• Refreshing changes (check out the comments)
• News and Sports Website Refresh: Your Comments
• The BBC News redesign disaster
• BBC News redesign: Can someone powerful please yell at them?
• 60% of Editors Blog comments hate the BBC News redesign

As a web designer, what's interesting to me are the reactions of users to a redesign that was no doubt well-researched and thought out by a team of talented web professionals (take a read through The Glass Wall (PDF 6.7MB) to learn more about their design process).

If you read through user comments, they appear to be largely negative. Therefore, the redesign was a disaster, right?

Well, let's not be too hasty.

Firstly, let's not forget that the online feedback makes for a pretty biased sample. It's a fact that people who feel strongly about something — especially if it's negative — are most likely to make their opinions heard.

What stood out to me in reading through the negative comments and feedback was the overwhelming desire to turn back the clock and return the site to its old design. Basically forget the whole redesign thing ever happened.

Funnily enough, this appears to be the very same reaction that many users had when the BBC News site went through its last redesign, back in 2003.

Comment on the 2008 redesign:

In terms of style, if the old look was the Times, it now looks like the Beano. I thought the old style had more gravitas.

Comment on the 2003 redesign:

Looking at it from the most basic level, nothing stands out and i don't know where to look first.

So, the 2003 design that many users want to return to is the same redesign that initially drew similar criticism to that which is being leveled at the new 2008 design.

It seems to me that perhaps people are reacting more to the fact that the design has changed rather than whether it is inherently better or worse.

E-commerce site redesigns have a similar problem in that sales may initially drop because visitors are unfamiliar with the new design.

So, what's a designer to do? Well, firstly realize that no matter how great your design, some (even many) people are going to hate it initially — and will do so vocally.

But also recognize that this reaction may be due largely to lack of familiarity with the new design more than anything.

Therefore, it's important to gather user feedback once users have had time to get used to the new design — say, after one and three months. This will likely be a truer test of whether the redesign has succeeded than relying on initial reactions.

The top 5 ways to improve your website

On the web presentation is critical, content is king, and placement in search rankings can hinge on the aggregated value of many tiny factors. Many of these items are ones you may not even realize are being observed by everyone from your everyday customer to the crawlers at Google.

Everyone wants to jump in with both feet and get their site up to snuff, but walk before you run, take it in phases - From design, and hosting, to marketing and beyond. Where do you start?

Start here, with the list below. Use these ideas as a catalyst for your first round of fixes, changes, and updates:

1. Ease of use / access to deliverable

a. Organized and Intuitive Navigation
b. Easy, comprehensive information access
c. Priority information within two-to-three clicks

2. Evoke unique and positive user experience

a. Unique & captivating style
b. A working, functional website - seems like an obvious starting point but often it’s missed…
c. Proper mark-up: HTML / CSS design and standards compliance
d. More universal: cross-browser / cross-OS consistency

3. Get Found - Marketing / Promotion

a. Search Engine Optimization - Organic? Pay-per-Click? Both?
b. Start with establishing some back links (a.k.a. one-way links) from topical / relevant 3rd party sites

4. High quality, Relevant, topic-specific content

a. Give people what they came looking for
b. Not too little, not too much information
c. Promote and even encourage contact with a company rep when relevant (e.g. on sales & service sites)
d. minimize contact when relevant (e.g. efficiency-driven sites, information output)

5. Actively differentiate your site from other similar sites (those are your competitors folks!) utilizing various aspects of items 1-4.

A Good Meta Description is Hard to Find

When I look over a web site from a professional standpoint, I'm primarily concerned about three things — the user experience, the aesthetic design, and how well the site is optimized for search engines.

Of the three, I'm regularly surprised at how little attention is paid to SEO, especially the basics.

Everyone knows that the <title> tag is the most important element on a web page for SEO, right?

But what of the meta description, which provides the text summary for each result (the snippet)? It's far more important than many web designers seem to think.

Certainly, the <title> tag, as it forms the clickable link for a search engine result, is key to get right.

However, the snippet provides an opportunity to deliver a targeted call-to-action to the searcher that supports and builds on the text of the main link. It can also differentiate your result from those around it.

Not writing a good meta description — one that at least summarizes the content on the page — means that you're giving up free traffic from organic search engine rankings.

What's all the more surprising to me is that many notable web design-related sites ignore or incorrectly implement the meta description.

For example, the latest A List Apart article (on findability — the irony) has no meta description, even though a summary is provided on the page (although it makes the mistake of being clever rather than useful).

The same is true for Vitamin, Freelance Switch, Graphic Define Magazine, and Boxes and Arrows.

What is especially interesting to me is that these sites are all magazine-format and probably receive a significant proportion of their traffic from search engines. You'd think that they would want to optimize their articles for these important sources of traffic.

Fortunately, SitePoint bucks the trend by actually using meta descriptions, and descriptive ones at that, although they tend to be rather long winded.

Just to drive the point home, here's how that ALA article on Findability looks on Google:

Other than the A List Apart name, a searcher has no idea whether this article is going to be relevant or useful.

Here's how that result looks after spending a couple of minutes rewriting the meta description (based on a more relevant sentence I pulled from the article):

Imagine how good that call-to-action could be if you spent a whole 5 minutes writing and copy editing it. Hopefully I've made my point.

A lot of the business of creating and managing web sites is about getting the basics right. The meta description is one of those basics that you can't afford to ignore.

I’ve Got a New Job

Friday marked my last day as a Web Strategist for AMD.

Although I was only there for a year, it was a great experience — my first working as part of a big multi-disciplinary web team for a large, multi-national organization. I learned a lot.

Why my last day? Because on Monday I start my new gig as Director of Web Production for the US division of NCsoft.

NCsoft's PlayNC web site

For those who aren't into gaming, NCsoft makes massively multiplayer online role playing games (MMORPGs). These include:

• Tabula Rasa
• Guild Wars
• City of Heroes and City of Villains
• Lineage and Lineage 2
• Dungeon Runners (free-to-play! View my character)
• Exteel (also free-to-play)
• Aion (in development)

Yes, that's right. I'm going to be running the web team for a company that makes video games — being an avid gamer it's an understatement to say that I'm excited about the position and the opportunity.

Working for a large corporate web team has certainly been educational, but I'm looking forward to being back on a small web team and being much more hands-on. It suits my working style and makes better use of my skills and experience (at least, I think so).

I'm also looking forward to leading a team again. After managing the web team at Seattle Children's Hospital for 4+ years, moving to the role of an individual contributor felt more limited than I liked in terms of what I could actually get accomplished.

So, expect some MMO-related posts in the future. Is anyone else a fan of this genre of gaming? If so, what are you playing?

I’ve Got a New Job

Friday marked my last day as a Web Strategist for AMD.

Although I was only there for a year, it was a great experience — my first working as part of a big multi-disciplinary web team for a large, multi-national organization. I learned a lot.

Why my last day? Because on Monday I start my new gig as Director of Web Production for the US division of NCsoft.

NCsoft's PlayNC web site

For those who aren't into gaming, NCsoft makes massively multiplayer online role playing games (MMORPGs). These include:

• Tabula Rasa
• Guild Wars
• City of Heroes and City of Villains
• Lineage and Lineage 2
• Dungeon Runners (free-to-play! View my character)
• Exteel (also free-to-play)
• Aion (in development)

Yes, that's right. I'm going to be running the web team for a company that makes video games — being an avid gamer it's an understatement to say that I'm excited about the position and the opportunity.

Working for a large corporate web team has certainly been educational, but I'm looking forward to being back on a small web team and being much more hands-on. It suits my working style and makes better use of my skills and experience (at least, I think so).

I'm also looking forward to leading a team again. After managing the web team at Seattle Children's Hospital for 4+ years, moving to the role of an individual contributor felt more limited than I liked in terms of what I could actually get accomplished.

So, expect some MMO-related posts in the future. Is anyone else a fan of this genre of gaming? If so, what are you playing?

Online Charting Tool for RSS Feeds

If you use FeedBurner to deliver your RSS feed then you’ll want to check out Feed Analysis by BlogPerfume. Plug in your FeedBurner URL and Feed Analysis will spit out a variety of pretty charts of your site's RSS activity.

Whereas FeedBurner only provides reports for the last 30 days, Feed Analysis will report your subscriber count, number of daily views and clicks for up to 50 months.

Don’t forget to mouse over the charts as they are interactive.

Subscriber chart for this blog for the last 12 months

It will also predict the number of subscribers you will have in the next 3,6, and 12 months which could be useful if you’ve actually set some goals around these numbers.

[via Woork]

Classic Dreamweaver MX Videos Released

Hi,

I just released more of my Dreamweaver MX video tutorials.

Thought Dreamweaver MX was released in 2004, not much in Dreamweaver has changed since that time … especially when it comes to the basics.

Anyway, for those new to Dreamweaver, these videos should be useful.

PS: I also have Dreamweaver CS3 videos for those who need the cutting edge stuff.

Thanks,

Stefan Mischook

www.killersites.com

8 Questions You Should Ask on Every Project

In Question Your Work, Jason Fried lists 8 questions to ask yourself (or your team) when you work on something.

This concept of questioning what you are doing is especially relevant to the arena of web design, which is notorious (in my experience) for having few — if any — criteria for success and for not asking these questions.

The questions Jason lists are:

1. Why are we doing this?
2. What problem are we solving?
3. Is this actually useful?
4. Are we adding value?
5. Will this change behavior?
6. Is there an easier way?
7. What's the opportunity cost?
8. Is it really worth it?

Some of these questions seem pretty obvious, but I can assure you that more often than not they have not been asked. Or, if they've been asked they have not been fully answered.

I can recall plenty of web projects where the criteria for success was "getting it done."

Often I've been able to tie the project back to relevant business objectives by writing a creative brief and forcing the client to clearly outline the goals of the project.

However, there have been times — when I've been brought on to a project after it's started and the deadline is looming — where the direction has been set and you don't have time to ask these questions.

All you can do is get the web site/application live within the timeframe and do the best you can. It's pretty disheartening.

So, the next time you start a web project, or are brought into one that's already in progress, or are well into a project that you have started, ask some or all of these questions — it might not be too late to change tack.

Get More Traffic: 17 Social Media Sites for Web Designers

Yes, it's great to get your article on the front page of Digg's design section — you get a huge traffic spike; hopefully your site stays up; you get a bunch of snarky comments — but it's not exactly easy to do.

Fortunately, there are alternatives. Here are 17 web design-related social media sites that are easier to rank well on and will keep sending quality traffic your way.

It's worth pointing out that in the interest of keeping the signal-to-noise ratio high, only submit your best posts to these sites. This will help them to increase their readership and thus send more traffic your way — a virtuous circle, if you will.

Social Media Sites for Web Designers

1. design:related
2. Design Float
3. CSS Globe (Community News section)
4. Pixel Groovy
5. DevelopersNiche
6. Stylegala (Public News section)
7. Behance Network (Tip Exchange section)
8. Markup Tutorials
9. Web Design Library
10. DZone
11. Design Sites Up
12. StyleIgnite
13. Mixx (Design category)
14. tweako (Web Design section)
15. TTiqq (Internet category)
16. Sphinn (SEO-focused)
17. SEO TAGG (SEO-focused)

Bonus: It's worth submitting your very best posts to Smashing Magazine for inclusion in their best of the month digest. Newcomer Posh CSS will let you submit CSS-related articles for inclusion on their site.

Now then, what gems have I missed?

The 3 Master Principles of Web Design

Floating around the universe, are certain universal principles that transcend disciplines. I would like to explore a few of them here, and talk about how they can be applied to web design.

The Three Master Principles

#1 Simplicity

This is such an important principle, that it can easily be made into the top three web design principles, just as location is to real estate:

- location
- location
- location

… we could say the same thing about simplicity in web design:

- simplicity
- simplicity
- simplicity

The important thing to take to heart, is that your web sites should be designed to be as simple as possible. You want to keep it simple for two main reasons:

1. To make it easy for you to update.
2. To make it easy for visitors to navigate the web site.

The simplicity principle applies to design, structure and the code.

What do I mean by ’structure’ of the web site?

I am simply referring to the URL structure. So we are talking about directory structures, page names etc. I’ve detailed this in my article on intelligent paths in websites.

I think the other two (design and code) are self evident.

… Now let’s look at principle number two:

(more…)

Dreamweaver CS3 Video Tutorial - the three editing modes.

I’ve released another video tutorial on Dreamweaver CS3 where I look at the three ways Dreamweaver gives you to edit web pages.

Video: Dreamweaver CS3 Editor Views

You can find all the Dreamweaver CS3 videos in the Dreamweaver section of killersites.com:

Dreamweaver CS3

Thanks,

Stefan Mischook

www.killersites.com
www.killerphp.com

The Evolution of a Button

If you're familiar with my Elements of Design showcase then you know that I am a firm believer in the saying "the devil's in the details."

Seemingly small decision choices — from search boxes to heading typography — can make all the difference to your overall site design, the user experience, and, if you're an online retailer, your bottom line.

Along these lines, GrokDotCom has an interesting article on the evolution of the Amazon add-to-cart button, which also includes a couple of great screenshots of a very early Amazon.com.

I also like the idea that the author has been taking screenshots of Amazon (and presumably other sites) over many years, building up a library of examples of how their interaction design process works. I've often thought about doing this with some of my favorite sites, but have yet to do so.

On second thoughts, perhaps this would be a good idea for a new online service — one that automatically takes screenshots of a web page on a timed basis, stores them for you or sends them to your favorite online storage account, and enables you to edit the screenshots and make slideshows to show how the page in question has evolved over time.

It looks like no one took me up on my last idea — any takers for this one?

Home Page Carousel Showcase: 40+ Carousel Designs

The home page is some of the most valuable real estate on a web site. For many web sites it is still the primary point of entry for the majority of visitors.

Consequently, web site owners want to cram as much enticing content on to the home page in order to attract visitors into the site.

Because of this, the carousel has become a very popular way to showcase multiple pieces of featured content within a fixed promotional area.

Epicurious has a typical home page carousel

I thought it would be interesting to showcase a variety of home page carousel designs to see what common themes emerged and also what different approaches designers took.

I have done absolutely no usability testing on carousels so I won't comment on the pros and cons of the different approaches taken, such as whether to present items horizontally or vertically, to include playback controls, and the ideal amount of content to feature for each item.

IGN's home page carousel

However, it was interesting to note that although the number of items being featured largely varied from three to five, five is clearly the most popular number of items to feature.

I don't know why that should be the case — six or seven doesn't sound like too many to me. Maybe it has just become a convention over time as designers look at what other designers have done and follow suit.

Further Reading

• Yahoo's carousel design pattern library

Intelligent Paths Make Websites Friendlier.

Killersites.com is an old site, nearly 12 years old now! Since web years are worse than cat years … that makes killersites.com one of the oldest websites on the Web today!

Anyway …

Over that time (as we added more articles and tutorials), our directory structures and file naming styles changed as conventions changed. So now I have a huge mess to clean up. There is a lot of information buried in killersites.com that people just don’t find.

Fortunately, over the last 12-13 years of building websites and web applications, I’ve been able to figure out the best way to organize a website:

In this article, I discuss how to create an easier to maintain, more user friendly website by way of using intelligent paths.

-

So what are ‘intelligent paths’?

I’m talking about URL structures of course! So that means a few things:

1. Building a SENSIBLE website directory structure.
2. Using meaningful words in page names and directories.
3. Using lower case text for page and directory names.
4. Using dashes between words in both page and directory names.

… Let’s go over the details.

(more…)