Tutorials

When designed and implemented with usability in mind, the accordion can be incredibly useful when organizing a good chunk of content. Since a lot of people found my toggle tutorial useful, I would like to go over how I approached building an accordion from scratch.

There are many elegant and easy to install modal window (Popup) plugins out there, but there are times where the script interferes with some of the logic processed on the page. I recently had a situation where I was not able to use plugins like fancybox and prettyPhoto so I had to create my own modal window that pulled inline html within the page. Here is how I approached this situation:

With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash. With this in mind, I believe it is wise to build simple widgets like the image slider using HTML/CSS/Javascript, and leave more interactive applications for flash if needed.

This is Part 2 of the Facebook Style Footer Admin Panel, if you haven’t checked out Part 1 this is the perfect time to check it out.

Step 2. Styling the Chat Panel & Alert Panel – HTML & CSS

Just like developing a drop-down menu, have a nested sub-panel within the list item. Look at the image below to get an overview of how this is layed out.

While in the process of redesigning 4wheelparts.com, I decided to explore new methods of working with our huge number of inventory and categories. I did some research and noticed a new trend for ecommerce sites in having what they call “mega drop down menus”.

According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites.

A few months ago, James Padolsey introduced a cool greyscale technique for non-IE browsers. His technique inspired me to come up with a workaround with a similar effect.

My solution relies on CSS Sprites and a few lines of jQuery, but requires a bit of preparation before it can be implemented.

I recently wrote an article for DesignM.ag on how to create a fixed navigation layout with CSS. You can check out the article here!

Today I would like to go over how to create a fixed sidenav layout for your blog or website.

Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling.