This is a guest contributor article. Please support them by visiting their site.

Many first time webmasters automatically assume that once their website has launched with a bit of content on it, they will get some hits and regular readers. This is quite untrue. You won’t get any traffic if no one knows about your website. In this article I hope to tackle these problems and discuss some of the common ways webmasters drive more traffic to their site by understanding the user and utilizing various web services. All of the tactics discussed can be applied to blogs or websites.

Website Usability

Before I get into getting your website’s name out there, your site has to have some style. Most web users are instantly turned off by tacky site designs or extreme colors. I know I won’t stay at a website too long if the layout or navigation annoys me. The goal is to have a unique site, different than all the other websites on the net. The one thing I really stress to others is making it easy for your readers to contact you. It shouldn’t take a reader more than a click, if any, to find your email address or a contact form. This makes the reader feel like someone actually runs and cares about the website. An about page is also a great asset to have on a website. The more a reader knows about you or your company, the more they trust your content.

Decide on one main form of navigation and stick with it. Users often find it disconcerting when there are masses of links on the top of the website as well as the sides. If need be, create a sitemap page to help users find their way around and make that one of the primary links.

I highly recommend taking a look at usability guru Jakob Nielsen’s Usability 101, Top Ten Design Mistakes in Blogs and Top Ten Design Mistakes articles. Another thing to consider is how wide to make your website. Think about your readers on laptops that can only handle 1024×768 resolution or those readers that use 800×600 resolution due to bad eyesight. Try to accomodate them as much as possible. If you cannot make your website that thin, consider including buttons for increasing font sizes or width, as seen on Anandtech.

After you have sorted these matters out, take a look at the background framework. Ideally, you want your website to comply with W3C’s web standards, even if it only complies at the Transitional level and not Strict. I’m talking about things like using alt tags for images. Roger Johansson has a great article discussing reasons to use web standards. His website is a fine example of website following all usability and standards

Content

Your site’s usability goes hand in hand with its content. You can specialize in a niche subject as long as you have an idea of how many people might be interested in that subject. If you do well with your niche subject matter, you could get some crazy traffic for being the only decent blog or website online with that type of content. On the other hand you could have widely used content, such as some aspect of technology, but add your own twist with your opinion or comparing/contrasting from other tech analysts. People won’t go to your site to read something they could have read on CNet or Tom’s Hardware, they want a unique take on it. If you learn anything from this article, I hope its that reblogging is a very bad thing. The one thing to kill your traffic is having identical content to another several hundred blogs. I suggest taking a glance at Mr. Veloso’s Evils of Constant Reblogging to get a better idea. Finding out what your content should be is a key element of your blog’s identity and the type of image your blog will ultimately emit.

Along with the notion of unique content comes keeping the reader at your site for as long as possible. Most of your users at first will be drifters, or users that find your site through Google, glance around and then leave. They generally don’t land on your homepage, but a specific page, so all of your efforts on the homepage will be bypassed. In this case you want to have something on each individual page that can keep users tuned in. This might be a block of related articles or recent entries in the sidebar or a list of your top articles that would be viable for first timers. A more extreme approach but still very realistic, would be including a primary link named something like “First Time Here?” and link it to a page with some general info on how to navigate, what the site is about, etcetera. However, this is generally the same concept as an about page.

Technorati for Bloggers

Technorati is one of the best traffic providers for bloggers. It makes your blog much easier to find when people search by technorati tags. Technorati is also a large blog ranking engine. Based on the number of links to your blog from various websites, your blog is given a rank. The higher your rank the easier your blog is to find when people search for things. A higher rank gives your blog greater credibility in technorati. If you don’t already have a technorati account, get one. After you have setup the main settings, such as your profile, you need to claim your blog. Go to Account and then down the page to Your Blogs. Enter the URL of your blog in the URL field and then hit “Claim this weblog.” Once you’ve done that go to “Configure this Blog” and fill in what you can. Click the checkbox to select “Include this blog in Technorati’s Blog Finder” and fill out as many tags or keywords that accurately represent the content in your blog. When you’ve done that, click “Save Changes” and then grab your claim code. There are two types of codes that you may put somewhere in your blog for technorati to verify that your blog exists and keep track of it.

If you have a blog that is Blogger powered or some other blog host that does not give you direct control of your blog files you will want to use the “Link Code” and post it somewhere on your blog. If you are using a more versatile blog publishing system, such as a custom WordPress or Movable Type installation you should copy the “Embed Code.” You can edit your sidebar, header, or footer file and put it wherever you like. You also have the option of posting a Technorati search box or various links on your blog without altering the code you just pasted. Select the options you like and click “Save Changes.” Everything is done by automatically by Technorati.

You will also want to search for a plugin for your publishing platform that supports Technorati tags. For WordPress users, I recommend Ultimate Tag Warrior. Installation can get a bit complex, so moving to a WordPress theme that has support for UTW, such as K2, is a good idea. Basically, when you post an entry you can supply it with Technorati tags.

All content has been restored, and we cleared up that nasty bug code. I’ll make sure the xhtml is validator on my own now, I don’t need plugins playing tricks on me.

It was not long ago that simply taking a design, slicing it up in your favorite graphics program and uploading the pre-created html could pass as a perfect website; times have long since changed.

CSS has been around for a while, but it wasn’t until recently that CSS became part of the new trend hitting the net. With the introduction of Firefox, Opera, and other browsers supporting web advances and standards, CSS became the new way of styling all aspects of a site – from backgrounds to link colors and more.

Enter today, where we have a combination of a more cleaned up version of HTML and CSS being used together to build and style entire sites. They are today’s “standards”, a far different looking standard then the tables of years past. The hardest part for someone new to design is learning how to design using what’s out there today.

Leave the dust on the tables

Tables are old news. Many experienced designers pay a lot more attention to code these days. No matter how great your design is, everyone is looking for how many errors you have under a W3C validity checker. Leaving tables behind isn’t as easy as you think. It’s not as simple as finding all tags and replacing them with DIVs.

Styling with style sheets

How’d they get that rollover text effect? How do their links change colors link that? Chances are everything you see done today on good websites is coded in the cascading style sheet, or CSS. CSS files are simple pieces of code that can define text colors, sizes, font, borders, height and width or content boxes, and many other aspects of a site. CSS is also now being used in rollovers. Rather then having two separate pieces of code for a regular image state and a rollover image state, CSS is being used to control all the various states. If you can learn CSS, you are on the road to building better and cleaner sites.

Teach yourself

One thing I found to benefit myself a lot was learning on my own. If you have any basic HTML knowledge, learning XHTML and CSS is amazingly easy; programs such as Dreamweaver or TopStyle Pro aren’t there to intimidate you – they’re there to assist you and increase your output time by helping along with the coding process. The latest version of Dreamweaver will also clean up your html for you, making it valid XHTML. CSS is another thing, but it’s amazingly easy to understand once you view the source of another site.

View source is the key

When you stumble upon a site that has a layout making you say “how’d they pull that off?” the View Source feature of most browsers is irreplaceable; while I was learning, I visited many sites listed on cssvault and other CSS gallery sites. By copying the HTML code into your favorite coding program, and doing the same for the CSS, you can see exactly how the site was built. At first, the jumble of code may seem confusing and very hard to understand, but take things slowly and one part at a time. Look for things like DIVs with specific names (ID’s and/or classes) and find the corresponding information on the style sheet. It’s important to switch back and forth between code, CSS and design view(s); it makes it much easier to see what’s going on and how things are happening. You can experiment by changing values in the CSS like width settings and see how things change on the HTML. It’s all up to you to play around with different settings until you feel comfortable with it.

One, two or three column(s)?

There are many different ways of laying content out on a page. Some people want one column, some want two, and some want an unlimited amount. They won’t stop until they are content that they have a separate column for every different piece of information on their site. However you like it, there are ways to archive it. Bluerobot contains some excellent examples and detailed explanation of various layout types.

Lokesh Dhakar, the developer of the revolutionary Lightbox JS image script, and owner of huddletogether.com stops by to “enlighten us” with the bigger picture of lightbox and his life.

DL: Hey Lokesh! Before we get things going, mind introducing yourself?

I’m a 24 year old web developer/designer living in Worcester, MA (roughly 40 miles west of Boston). I am mainly a frontend guy, so I tackle these acronyms: XHTML, XML, CSS, RSS, JS and spend most of my time in Photoshop and Dreamweaver (code mode! relax). I also enjoy crafty arts and small adventures.

DL: Javascript was once looked at as a staple for a bad design. It slowed down page loading times, and could create various errors; Javascript has made a comeback. What do you think of Javascript’s return to the internet and design?

I think it’s great that Javascript has quickly matured over the past year or so into a useful and simpler tool for creating cool interaction on the web. Unfortunately, it’s still a bit cumbersome and coding with it can still cause lots of headaches. Expect things to continue to change quickly as libraries improve and newer browsers remove current cross-browser headaches.

DL: How do you manage to keep your code so efficient and develop your script so it’s lightweight?

Keep your code well structured and thoroughly commented, efficiency and lightweight will follow. On a side note, if you are serious about learning Javascript, code something from scratch before you get too accustomed to using Javascript libraries. It’s a great way to understand the core concepts which, if you miss, will haunt you later, particularly in debugging (there will be lots of debugging!).

“Keep your code well structured and thoroughly commented, efficiency and lightweight will follow.”

DL: Lightbox is a prime example of Javascript at work in a fast loading, clean image script. What inspired you to create the script and then release it?

When inserting images into my blog posts the width of the column hindered me from posting the large size image I wanted and posting thumbnails to popup into a new window was bad for many reasons. One thing led to another?

DL: Do you have any future plans for any more free release scripts, or expanding on the lightbox script?

There are a couple of new scripts in the works. I have been very busy as of late so things on the personal/non-commercial end have been a bit slow. One script I have written about on my blog is Lightshow (a version of Lightbox with better gallery viewing features), which I have finally gotten back around to continue coding on. And, just like everyone else should be, I am also working on a secret web app.

DL: We don’t only want to talk about the development of Javascript. Why don’t you tell us a bit about your interests and hobbies?

Too many, really. Here are a quick list of some things that have been occupying my time as of late: biking, New York Mets, audible.com, my new camera (Digital Rebel XT), and some miscellaneous sewing.

DL: Lightbox is great script for photos, and it really helps compliment great photography. That you’ve taken care of. What camera do you use?

I own a Canon EOS Rebel, Digital Rebel XT, and an older Kodak Polaroid. I don’t get out with my camera as close to as often as I would like though. It’s a time thing.

DL: Your site has a pretty unique name. Any special reason you came up with Huddle Together, or did you just like the sound of it?

Originally the domain was setup to showcase the collaborative works of my friends and myself. The name Huddle Together described the teamwork, share ideas ethos I had in mind. This idea quickly turned into a fleeting thought.

DL: Thanks for letting Devlounge interview you. Good luck with your Lightbox project and keep up the excellent work.

Most of you have probably heard of Matt Brett, whose blog (http://www.mattbrett.com) is very popular and is part of the 9rules Network. Although recently, Matt Brett has become more known after starting a popular standard for feed icons which is currently being spread and used everywhere.

DL: Hey Matt, please introduce yourself and tell us something about your background.

Yo! Well, besides that stuff you mentioned in the intro – I’m 25, live in Ontario Canada and currently working from home as an independent contractor. I’ve been working for the Participatory Culture Foundation since July on the Democracy Internet TV platform, but will be shifting gears to work for a small design firm based out of California as of March 13. In my spare time, I play a lot of video games and am totally into Battlestar Galactica and currently catching up on Lost.

DL: You have a great site with a very beautiful design. Where do you get your inspiration from and could you share a couple of tips and techniques for web designers?

Thanks for the kind words! I keep an eye on the various design showcase sites. You can see some of the sites in particular that caught my eye here. As far as techniques go. I get a lot of emails asking how I did some of the grungy edges on my site and some others I’ve done. The secret is Photoshop brushes. Find some good blotches and scratches and just play around until you have something that suits your needs. Deviant Art is a good place to start looking.

DL: What inspired you to create the feed icons? After Firefox adopted them as the official rss symbol, much of the web is catching on, and recently Microsoft agreed to continue using the same icons.

Just to be clear, I didn’t create the icon at all. I merely took the adapted icon that Microsoft had created and made a vector version and start distributing it. And Microsoft’s adoption of the icon was precisely what motivated me to jump on this and get the ball rolling. It’s not often MS does the right thing in a situation like this. In fact, they had released a series of mocks of the icon they were going to use in IE7 and asked for feedback on them. Some people had tossed the idea to them of using the already recognizable icon that Mozilla introduced in Firefox which prompted MS to get in touch with Mozilla and it all came together from there. We all know what power Microsoft has in this industry and there’s point in ignoring that. Millions of people are going to continue using Internet Explorer because it’s built into their operating system and it’s ‘good enough’ for what they’re using it for. It’s because of this that Microsoft’s adoption of the feed icon struck me as a very important step in the world of syndicated content. I figured, why wait for IE7 to be released to start using the icon? Let’s get things headed down the right path. And as such, FeedIcons.com was born and the standardized feed icon initiative is now in full force.

DL: How important to you think RSS is the future of the web and having syncronized content?

Extremely! I think we’ve barely scratched the surface in terms of how we utilize RSS. It’s exciting to see software like Democracy taking such a simple format and turning it into full blown tv channels. I’m sure we’ll see more of this and beyond in the near future.

“I think we’ve barely scratched the surface in terms of how we utilize RSS.”

DL: On a design related question, people always like to know if you went to school to learn graphics, or if you taught yourself. Did you find it hard, or did you just keep playing around until you got some good results?

I did a year of College back in 2000 and found it to be a complete waste of time. Mind you, it was only the second year for the ‘Multimedia’ course, which was the closest thing to web design at the time. I’m sure there’s better, more focused and specific courses out there now. I learned from doing. I simply jumped into HTML and starting changing tags to see what they did and it evolved from there. Over the past couple years, I’ve read some solid books (Web Standards Solutions, Bulletproof Web Design, The Zen of CSS Design to name a few) that have really helped in terms of understanding Web Standards to the fullest and the capabilities and greatness of CSS design.

DL: Now, we could continue asking many questions related to design and everything else, but we’re all about going beyond. You used to be in a band, and you proudly display your latest last.fm tracks right on your homepage. Obviously, music is an important part of your life. What kind of music do you like the most, and what role does music play (if any) while designing and writing?

Nice! Yes, music is a huge part of my life. There’s hardly a time I don’t have something playing. While I’m working or writing something for my site, I tend to have more low-key stuff on. Traditional reggae and orchestral stuff comes in nicely here. But some times, if I’m working on something that doesn’t require attention to detail, I’ll have on some louder stuff – I mostly listen to punk rock and ska. Some good conscience hip-hop thrown in the mix once in a while.

DL: You’re also into gaming. What are you’re favorite games?

I’m a huge first person shooter fan and I play mostly on my PC. I’m currently really into Star Wars Empire at War and The Battle for Middle-earth 2, which are both real time strategy games. It’s a nice change from simply running around shooting dudes.

DL: From a regular users standpoint, what are some of your favorite sites (love the design, love how it was put together, content, etc) that you?d recommend?

You know, I don’t really have any favourite sites, so to speak. I don’t have any bookmarks I check on a regular basis, besides Digg, Flickr, Technorati, etc. I think that’s because I subscribe to everything I’m interested in, so it’s kind of eliminated the need to repeatedly visit sites. And as far as the feeds I’m subscribed to – there’s a couple hundred right now. Just did a big ‘purge’ and nixed some that I don’t value any more.

DL: Now that we got some really “in-depth” questions down, I got one more. You’re part of the Democracy Player project (http://www.getdemocracy.com). What made you get involved with this, and how will it’s usage of rss to form playlists (podcasts) benefit it?

I had been a long time reader of Downhill Battle and when PCF (founds of DHB) announced they were hiring for a web manager, I jumped at the opportunity to work with them. I’ve always felt like I was on the same page as them in regards to beliefs and how things should be. They’re a very passionate bunch and simply do the things they feel are the right things to do. Coming from a corporate environment, this was a refreshing change of pace and just had to go for it. At the time, there wasn’t a lot of details out there in regards to the player, let alone the entire platform that’s been released now. So I can’t say that had a lot to do with my decision. I think I’ve pretty covered the second part of the question previously.

DL: Any last words or advice you’d like to give to anyone?

One of the most important things to being a good designer/developer is that you keep learning. Stay on top of new and developing technologies and trends and always try and improve and expand on your skills.

DL: Thanks for taking the time to answer some questions for us. Keep up the fantastic work.

Not a problem! Thank you!

While using a wordpress plugin to validate the xhtml, the plugin actually flushed out all the posts with large error code. I am in the process of putting all the articles back (yes, that means reformating too ) and putting the pages back. Sorry about this.