SlickMap CSS

Posted on August 1st, 2009

From its website, SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

Awesome tool! You can download it at http://astuteo.com/slickmap/

Mega Menus: the Next Web Design Trend

Posted on March 31st, 2009

SitePoint’s Craig Buckler blogged yesterday about what he sees as the next big thing in web design: mega drop-down menus. They’re cropping up everywhere, and best of all, usability guru, Jakob Nielsen thinks they’re quite good — so you can expect to see even more of these very soon. Here’s what he had to say about this new trend:

Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other.

Of course, Nielsen’s article includes some solid advice on the most usable way to implement these. Here’s what he recommends, in a nutshell:

So how would we go about implementing these? While it’d be great to do all of this in pure HTML and CSS, it’s impossible at the moment to get those nice half-second delays — and of course there’s a pesky problem with Internet Explorer 6, which only supports :hover on anchor elements. Instead, I’ve whipped up a solution using jQuery and a very nifty plugin called hoverIntent.

The Design

Let’s imagine we have a client, Mega Shop. Their designer has sent us a mockup that includes some mega drop-down menus. You can see the relevant part of that mockup below (full sized version here).

Our mockup shows a menu with a mega-drop-down activated.

The Markup

First: the markup. I started out with a fairly simple menu based on an unordered list. The markup looks like this:

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Stuff for him</a></li>
  <li><a href="#">Stuff for her</a></li>
  <li><a href="#">Stuff for kids</a></li>
  <li><a href="#">Stuff for pets</a></li>
</ul>

I’ll add a div after each of the drop-down links — these will contain the contents of the menu. Also, I’d like to have a way to indicate that there’s a drop-down choice on those items, so I’ll also add a class, mega, to those list items. Finally, I want to make sure that this menu makes sense when viewed without styles, and since each category will act as a kind of heading, I’ll add some heading markup to the items. Here’s a single list item:

<li class="mega">
  <h2>
    <a href="#">Stuff for him</a>
  </h2>
  <div>
    <!-- Contents here -->
  </div>
</li>

Next, let’s add some content to those divs. Here’s one:

<li class="mega">
  <h2>
    <a href="#">Stuff for him</a>
  </h2>
  <div>
    <h3>Menswear</h3>
    <p>
      <a href="#">Shirts</a>,
      <a href="#">T-shirts</a>,
      <a href="#">Accessories</a>,
      <a href="#">More...</a>
    </p>
    <h3>Gifts</h3>
    <p>
      <a href="#">Sporting goods</a>,
      <a href="#">Gadgets</a>,
      <a href="#">More...</a>
    </p>
    <h3>Clearance!</h3>
    <p>
      40% off all photo accessories
      this weekend only.
      <a href="#">Don't miss out!</a>
    </p>
    <a href="#" class="more">
      More stuff for him...</a>
  </div>
</li>

Of course, I’ll need to add the markup to represent the site’s heading. Unfortunately, we’re out of time to discuss that in detail, but you can see what I’ve done in our first example, unstyled.html.

Style

Next, I’ll lay on some style. For now, we’ll just concentrate on the most pertinent parts of styling the list elements and the drop-downs. However, if you’re curious to see the entire stylesheet, you can view it in full in our second example, styles.css.

Each mega list item is set to display inline to achieve that nice horizontal bar. We’d like the drop-down menus to overlay the page, immediately under the list item; to achieve this we’ll use position: relative on each mega list item, and later we’ll use position: absolute on the divs:

ul#menu li {
  display: inline;
  position: relative;
}

Each div is styled up to resemble the mockup we received from the designer. I’ve used position: absolute here to align them flush left with each list item, and place them just underneath. I’ve also used display: none as a catch-all for all divs that are descendants of that menu, which will help to hide the one that’s sitting underneath the homepage link:

ul#menu div {
  display: none;
}

ul#menu li.mega div {
  width: 18em;
  position: absolute;
  top: 1.6em;
  left: 0em;
}

I’ll add another class for those list items, hovering, and make its child div elements visible with display: block. Later, using JavaScript, I’ll add the hovering class to the list item when the mouse hovers over it, and remove the class when the mouse leaves the area:

ul#menu li.hovering div {
  display: block;
}

Script

Now, let’s add the JavaScript. I’ve chosen to use jQuery for this example; of course, you’re welcome to write your own scripts or use a different framework. You might be thinking it’s a bit of overkill to use all the overhead of a huge library for one little menu. This is just one part of our hypothetical ecommerce site, however, and I’d almost certainly be planning to use jQuery for other parts of the interface as well.

First, of course, I’ll include the jQuery library. Next, I’ll also include a very nifty plugin called hoverIntent. jQuery has its own hover event, but it fires as soon as the mouse touches the target area. Instead, we want to implement the delayed effect Jakob Nielsen recommended: that is, we’d like to wait for the user to stop moving their mouse. The hoverIntent plugin provides for this by taking the mouse movement speed into account.

First, we’ll need to write a couple of functions to add and remove the hovering class — that’s the class which switches on the display of the mega item:

function addMega(){
  $(this).addClass("hovering");
}

function removeMega(){
  $(this).removeClass("hovering");
}

And then, we’ll use the hoverIntent function to fire off those functions when we hover over an item or leave it. First, we need to set some configuration variables:

var megaConfig = {
  interval: 500,
  sensitivity: 4,

The interval parameter specifies a number of milliseconds (that is, thousandths of seconds) which hoverIntent uses to check on the mouse’s movement. The sensitivity parameter specifies the number of pixels a mouse should have traveled during the interval parameter in order to be considered moving. If the mouse has moved less than that, the mouse is considered to be hovering.

  over: showMega,

The over parameter specifies a function that will be called when the mouse has stopped.

  timeout: 500,
  out: hideMega
};

The timeout parameter specifies how long we’d like to wait in milliseconds before performing the mouse out function. The out parameter specifies what to do once that delay has passed — so in this example, the hideMega function will be called after 500 milliseconds.

Finally, we’ll attach the hoverIntent function to the mega list items, telling it to start looking for hovers and mouseouts, using the configuration we set up:

$("li.mega").hoverIntent(megaConfig)

And that’s about it!

Testing Time

Time to test out our menu! You can see the completed demo with the markup, style, and script in our final example, completed.html.

What Now?

There’s a lot more that can be added here — for example, a drop-down menu can have some accessibility problems, so it’d be good to find a way to also add keyboard actions to this menu. It’d also be nice to add some more interesting design elements to these menus, like icons or column arrangements. For now, though, this newsletter is quite long enough, and what we have here is quite a solid start!

Battle of the Python Frameworks

Posted on February 28th, 2009

Over the next week, I will be designing a workorder management system system that will be used by my application development business, Mega Input Data Services, Inc., in order to track projects done on retainer with our clients.

As many of you may know from reading my posts here lately, ive become an avid fan of Python and have been testing its many frameworks to decide on which one I like the best.  With that being said, here are the frameworks that I will be utilizing for my test:

  1. Django – Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design.
  2. webpy – web.py is a web framework for python that is as simple as it is powerful. web.py is in the public domain; you can use it for whatever purpose with absolutely no restrictions.
  3. web2py – Free and open source full-stack enterprise framework for agile development of fast, secure and portable database-driven web-based applications.
  4. CherryPy – CherryPy allows developers to build web applications in much the same way they would build any other object-oriented Python program. This results in smaller source code developed in less time.

Each system will utilize the same web template and will be judged on the following criteria:

The last point is pretty subjective, however, it will allow for my point of view to be expressed on the use of the framework.

As a baseline, I will develop the application in PHP to which the Python equivalents will be judged.  Let the games begin!!!!

Keep all things simple

Posted on April 6th, 2008

They say, a “Picture is worth a thousand words”.  Well, here ya go:

Simplicity Collage

Scrambled Eggs Media Website Launched!

Posted on March 21st, 2008

After going through a few custom designs, sketches, revisions, and 3 months of deliberation, the Scrambled Eggs Media website has finally launched.
Scrambled Eggs Website
With this design, I wanted to showcase the work that Scrambled Eggs has done for its clients on each page of the website but in way that wasnt distracting to the sites visitors. I also wanted to use a limited amount of Flash on the site thus the rotating banner that is on the front of the site that was designed by my business partner JurJuan Walker.

The site also features a custom designed quote generator. The resulting quote gets sent to our design team for processing with our custom quote management system. This allows for the "quess work" to be taken out of charges to be given to the client. It tells the sales representative if the client is available for any discounts and what adjustment, if any, we are willing to make on the price and how this affects their commission. This way, everything is known up front to all parties.

To see what we are able to do for you, please visit Scrambledeggsmedia.com!

About the New Design

Posted on March 5th, 2008

The photography from this Blog was done by Ron Walton from NapSolutions, LLC here in Indianapolis, Indiana. Ron has fantastic rates and attention to detail. I was very impressed and decided to show off some of the work he did along with some of my graphics work on this site.

If you are interested, please visit his website.

This template was my first using the WordPress platform. My previous blog used one of the many WordPress templates available and I felt that I owed it to myself to showcase my design skills and utilize them on my personal site. The idea from the header came from the old cliche’ in business where the owner “wears many hats”. Because I do wear so many “hats”, it feels as if im not myself at times; so the many faces of me design was created.

My graphics design studio, Scrambled Eggs Media, will base most of its development strategy around the WordPress CMS (content management system)

Older POSTS