Over the Memorial Day weekend I took some time out to explore a new jQuery tool called Glimmer. Glimmer was developed by the crew at Mix Online, and is a jQuery interactive design tool which makes jQuery accessible through a visual tool. So rather than hand-coding the necessary html, css, and javascript, you are presented with a visual interface to create the effect.

I tried Glimmer out on a couple of real-world projects, and for both it was a pleasure to execute the solutions. In my case, I made a quick drop down menu and also an image rotator. I’m already a fan jQuery and find it a comparatively easy javascript language to learn. But Glimmer was still a time saver on these two projects. Glimmer works by taking your input for a given interaction, (links, menu titles, etc. in the case of a menu nav) and then generates the html, css, and javascript that are needed. While the generated files are aesthetically simplistic, its easy to then tweak the html/css/javascript to achieve the results required for your project.

My only real complaint of Glimmer is that it’s a Windows program. I’m a Mac guy and would prefer to stay native, but I think its worth firing up Fusion to run this new toy. I’m intrigued enough by the results I’ve achieved so far to continue experimenting with it. I’m also curious to explore some of the more advanced visual jQuery interactions that are possible.

If you’d like to try it for yourself head over to Mix Online for the download or click here to learn more about it.

I’m writing yet again about web testing. I guess its because testing can be such a frustrating and time consuming part of any web project. Its one of those chores that no one looks forward to, but has to be done. And the bigger the project the more time you have to spend testing.  So I wanted to share my top 5 tools used to shake out the bugs and speed up testing.

Firebug

One of my favorite little tools is Firebug. Its a Firefox add-on that gives us access to tweak css, javascript, html, etc. of a given web page while seeking out those dreaded gremlins. It has saved me many hours and makes debugging (almost) fun. My favorite feature is its access to selecting a given element of a page and seeing its css properties. I use it quite a bit during the development phase to experiment with different css options on the fly.

Firefox Web Developer Toolbar

Firefox Web Developer Toolbar is another valuable Firefox add-on that is extremely useful for the web designer. It installs as a tool bar giving you access to a host of useful tools like css and html validation, multiple source viewing options, line guides, rulers, disable javascript/css, etc. Validation check is probably my most often used feature of this tool. With the click of a button I can quickly find any markup problems and fix them before they become bigger issues. I’ve spent too much time already trying to solve a bug caused not closing an html tag or css selector. Never no more.

IE Web Developer Toolbar

IE Web Developer Toolbar is sort of the IE version of the Firefox Web Developer Toolbar. It isn’t quite as featured, but does provide enough insight to attack a problem.  Its a must have for the toolbox.

VMWare Fusion

I’ve already written a blog post about VMWare Fusion virtualization software, but I need to mention it here because of its importance. I’m on a mac and use Fusion to create two virtual machines for testing IE7 and IE6. And now its time to add a third virtual machine for testing IE8. Read the rest of this entry »

Haircoverings.com is a website that sells, well, hair coverings. That’s hair coverings in more styles, more colors, more shapes, and more fabrics than I would have ever thought possible. Add to that an assortment of hair accessories such as hair clips and sticks and you have quite a major organization, design, and content management challenge. But with the help and vision of the sites owner, we have created a feature rich website that has complete content management and easy marketability.

The Technical Stuff
The website is built on a highly customized installation of Joomla and Virtuemart. Numerous modifications were made to enrich the users experience and give easy access to a large and evergrowing inventory of products. But at the same time, much work went into allowing content areas to be managed via a backend interface. For example, every marketing feature and content item on the home page can be updated and managed by the owner via the web interface. Other technical goodies include, dynamic SEO optimization, automatically generating Sale and Under $5 feature pages, live chat, and add to cart functionality on browse pages as well as product pages.

The Blog
Launched along with the website was a Wordpress blog, www.haircoverings.com/blog, to help keep visitors informed of all thats going on in the hair coveirngs world. The blog uses a custom template design with numerous plugins to help spread the word. The latest blog post is also integrated with the home page of the website to provide more dynamic content and help build up that Google juice.

Thank You
Special thanks to The Hair Coverings Store for there marketing vision and direction in creating such a feature-rich website. Please visit them at www.haircoverings.com right now. And be sure to join their mailing list.

The Hope Gala charity event benefits the cats and dogs of Operation Kindness. Operation Kindness is north Texas’ largest no-kill animal shelter.

Design

The Hope Gala website was designed and built to announce the upcoming charity event. I teamed with fellow designer and good friend Joshua Ege to build a website with a simple elegance and focused on the benefit event and the animals in need.  Josh designed the logo for the event and that became our starting point for the design. We wanted a bright and open design that communicated well with a clear navigation. We also wanted the event details to be visible 100% of the time and to do away with all scroll bars.

Function

With short development time for the website and limited content, we opted for a “one-pager” design. This style puts all the content on one page and through the use of css and javascript, simulate multi-page programming. Developing the site in this manner Read the rest of this entry »

Bart Forbes is a highly acclaimed artist whose career spans over 30 years creating artwork for major events, top magazines, large corporate clients, and many others. He has created artwork for The Kentucky Derby, Indianapolis 500, the Olympic Games, and numerous PGA events just to name a few. So when he approached me about producing a gallery/store for a new venture of his to offer gallery prints, I jumped at the chance.

The New Site

The focus of the new Bart Forbes Gallery is without a doubt the paintings. So the challenge was providing navigation and ecommerce functionality for the website without getting in the way of the fine art on display. Large spaces, white layout, and hidden functions keep the site clean, easy to use, and lets all the great artwork shine through. Joomla and Virtuemart form the foundation of the website and allows for easy content management.

So many thanks to Bart Forbes, his wife Mary Jo Forbes, and son Ted Forbes for helping make this project such a pleasurable experience. And if you haven’t visited the website yet, please visit now, www.bartforbesgallery.com

In my never-ending quest to find the most definitive method for testing websites, I have added a key component, Fusion by VMWare. A couple of months ago I wrote about the excellent website browsershots.org for viewing your website on a wide variety browsers and operating systems. Excellent for its variety, ease of use, and price(free) it has no equal for rapidly exploring how your site performs in the myriad of browsers available. But website testing means more than just a visual inspection. You need the tools to then diagnose and apply corrections for the affected browser. Enter VMWare’s Fusion emulation software.

Being a Mac-based web designer, I can now enjoy the benefits of the Mac operating system for design and development, while using the most prolific operating system in the world, Windows, in all its flavors, for site testing. But the best part is I can do it all on the same computer. I’ve been using this product for about six weeks now and am impressed with its performance and its integration that bridges the worlds of PC and Mac. I am a complete fan of the product and would say its only downside for website testing is that you have to become a registered user of a Windows operating system. But its a Windows world and there’s no way to get around it.

Read the rest of this entry »

Content management systems (CMS) are becoming more and more popular for all sites big and small. With the variety of CMS platforms available for free on the open source market, and the increasing ease of installation and development, its important to know what they are and if they are right for your website.

So what is a content management system? Many websites are built using static html web pages. This means that the content is programmed directly into the web page itself. In order to update the content, the html code of the web page has to be modified. Requiring knowledge of html of course. A content management system separates the content of the website, from the html code of the website. This allows content to be added, updated, stored, or deleted without knowing how to write html code. It also allows the html structure, appearance, or look to be changed without affecting the content. A popular example of a simple content management system is the Wordpress blog. Blog posts are stored in a database separate from the page and thus allows a user to easily apply a new theme to their blog, while leaving the blog posts intact.

Read the rest of this entry »

Lately I’ve fallen into the whole 8mm movie craze thats sweeping the country. In the past month I’ve purchased about 10 8mm movies, 3 projectors, and 1 movie camera (to go with the 3 movie cameras I already own.) Its been another one of those deals where a new interest meshes with an old interest. In this particular case, my love of old 50’s-60’s sci-fi movies. I discovered that there is a whole slew of movies of that era that have been mashed up and put in the 8mm movie format. Movies like When Worlds Collide, 20 Million Miles To Earth, The Day The Earth Stood Still, etc. They aren’t the entire movie, but rather the movie cut down to its most basic highlights and usually run 8-15 minutes in total length. Its the Cliffs Notes version of the movie. And I hope you don’t need sound because they are mostly silent Although, there are a few full length versions, with sound, on 8mm. You’ll need to shell out the bucks for those though. (I’ll be shooting to win a bid on a full length version of War of the Worlds soon.) The movies I’ve typically been purchasing, through Ebay, have run from $5 to $25 plus shipping. So they’re very affordable as a hobby. And the awesome movie artwork on the box is sure to please any designer.

Read the rest of this entry »