Cool new tool for Bloggers

I’ve just added a cool new tool to the blog that’s a must have for anyone who likes toys. Woopra provides easy to use, real-time tracking, live chat and analytics for your blog. And it does it with a visually appealing design that makes you want to spend all your time watching the live show.

Woopra is still in beta testing at the moment so the service is free. You need to request an account to get access to the beta. If you work on a Mac, don’t go with the general download release. Instead, go with this release candidate that gets you around the Java issues. It worked like a charm for me.

Once Woopra is officially released, they’ll be offering free and paid plans - no word on the price points though. Not sure if it will still be as cool when plans are announced but it’s worth experimenting with it in the meantime.

Web Page URLs

Every page we create for the web needs a name.  If you’re using a CMS or Blogging software such as WordPress, the task of creating urls might be done automatically for you.  There really isn’t a standard for urls - or at least not one that I’ve come across - so you need to create your own naming conventions for the site that you build.

The way I’ve named pages has changed since I first started developing sites.  With search engine ranking becoming more and more important to our clients, I now name pages with search optimization in mind.  With this medical associates site , I choose to match the names of the sub-pages to the navigation.   For example, the General Surgeons page is named general-surgeons.php, the Office Policy page is called office-policy.php, and so on.

Now, it can be very easy to get carried away with the number of words that you use in an url and that may have an impact on a site’s SERP (search engine results page).  Try to keep the length to 3 to 5 words and you’ll probably be fine.

Word length is just one of the things to keep in mind when you create your naming convention.  Follow these other best practices if SEO is important to your client (and it probably is) to help boost their rankings with the likes of Google.

Stylish Forms without Tables

Building websites with CSS is pretty easy once you get the hang of it.  Letting go of tables when it comes to forms can be tough.  Tables make it easy to lay out orderly, nicely styled forms but they’re not accessible making form-filling difficult for anyone using a screen reader.

Enter CSS and semantic HTML.  Of course, before you do anything with CSS you need to get your HTML in order.  This has to be the definitive article on good HTML form design without the use of tables .  Adams first walks you through the necessary elements of a good form.  Once that’s in place, he provides a step-by-step guide to styling that form.  The end result is stylish and user-friendly at the same time.

Firefox and Web Design

I’ve long been a fan of Firefox both as a browser and as a web developer. If you haven’t jumped on the Firefox bandwagon yet, get yourself a copy of the latest release here and start having fun.

If you’re just starting out with CSS, the Firefox Web Developer toolbar is a must have. Like a lot of web developers out there, I start my browser testing in Firefox and then tweak for the others after. Once I’ve got my basic code in place, I fire up Firefox and start the fine-tuning.

The beauty of the Web Developer toolbar is the ability to edit your CSS file directly in your Firefox window and see the changes immediately. This is great for fine-tuning font sizes, div sizes and other core components. But I also find it handy for diagnosing issues I’m having with the CSS.

For example, with the Firefox Web Developer toolbar, I can outline my divs or images to see why my floats aren’t working as expected - it’s great for highlighting oversights I’ve made in my pixel settings.

The toolbar also has built-in validation tools to make sure your code is up to snuff with web standards. Nothing like seeing that green ‘congratulations’ bar show up!

Cross Browser Compatibility

Thanks to my buddy Nate for passing this one along.  As my co-workers can attest to, testing for cross-browser compatibility is not my idea of fun.  Well, Anthony Short has done a bang-up job of sharing some best practices for achieving cross-browser compatiblity on the first go-around.

Some of the tips are pretty straight-forward - using a doc-type and resetting your css at the top of the file (Eric Meyer’s reset is an excellent choice).  Others I hadn’t considered - avoiding Lucida (although that is really just common practice for us) and using some clean-up techniques for font rendering.

Anthony’s article is a must-read - clean, concise and useful!

CSS Web Design Tips and Resources

Building websites using CSS has been my common practice for a few years now.  I’m not a guru (yet) but I’ve accumulated hints, tips and tricks to make web development easier.

What you’re not going to find much of here is talk about the visual side of web design - that’s not my schtick.  I take the lovely designs that professional, graphic designers create and turn them in to code.

Stay tuned for CSS hints and tips that I hope will help make your web design life easier and more fun!