Cool Video Tool - for Fun or for Business

I’m always on the look-out for great tools and gizmos to use in our client sites and I’ve come across one I really like.  Animoto lets you take your photos and turn them in to a video with music all with the click of a few buttons.

There are really only 2 steps to the process:

1. select and upload your photos
2. select your music - yours or one from the Animoto library.

While you go top up your coffee or feed the cat, Animoto analyzes your pictures and music, creates a professional video and sends you a link to it when your done!  They also make it easy to embed your video into your website, make it iPhone ready, post to YouTube and more.

I signed up for the free version to create my video but they also offer products for business, photography, education and facebook.  Be sure to check out the case studies to see how folks have been using it.    I think the possibilities are endless.  What are you waiting for?

CSS Style Sheets - 1 or Many?

I’ve been setting up a few blogs for clients lately.  For blogs, I like to start with a template that’s ready to go for widgets and other niceties and then customize it to work with the client’s visual designs.

For the latest one, I based it on Abstractia, a beautiful template by Robin Goodlatte (btw, love the last name).  I had anticipated keeping most of the extras including the footer mod but opted out of them in the end.  I did update the sidebar template to make it widget ready - the only shortfall of this design in my estimation.

Robin’s theme uses 4 style sheets - style, typography, colors and layout.

Abstractia Style Sheets

I recognize that many designers prefer this method - helps to keep things organized.  I often use separate style sheets for resets or specific plug-ins.  But for the general element styling, I found it much more difficult to work with, perhaps because it wasn’t something I had built from scratch.  It wasn’t completely intuitive to me where to look to change the styles for elements.

In the end, I consolidated everything in to 2 sheets - style and typography.  For the curious, here’s the finished blog for our organic gardening client.

The process of building a website

Finally have a bit of breathing room to write a new post.  We’ve been busy here - no complaints.  Some of our recent projects have helped me stream-line the development process and others have pointed out where our processes still need improvement.

Since we started in the web development business, we’ve followed this basic process:

1. gather client requirements
2. create the visual design for the site
3. get sign-off on the visual design
4. build the site
5. launch the site

For the most part, this process has worked well for us.  We’ve found that clients really need to see the visual concept to get a handle on what the final product is going to look like.  On the down-side, we get visual sign-off, build the site structure then wait for content.  That waiting can take a long time with some clients - they don’t relish the idea of put words on a blank page (as a blog writer, I can empathize with them whole-heartedly) - sometimes months and even longer.  We’re left with projects just hanging.

So, that’s made me wonder if we’ve been taking the best approach.  Should we switch the process?  Get the content first then develop the design and build the site?  Will that speed things up at all?

That said, I have found ways to speed up the development process at the back-end by creating libraries of common code clips, standardized css files, favourite plug-ins, etc.  Once we have visual sign-off and content in hand, we can turn around some simple sites quickly.  This also opens the door to handing-off development to a new employee or outsourcing development when we need to manage an overloaded production schedule.

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!