Designs « a day in the pit

3Aug/110

You can play music on a locked Mac OS X

At some point today my Macbook Pro, running Mac OS X 10.6.8, locked my screen due to inactivity yet I was still able to control the audio via helper keys on the top row of the keyboard. That's pretty cool. It made me think of my Android phone, and how that too offers audio controls when locked. It made me think of how designing a product requires attention to the most subtle of details.

When beginning a new project, I often start off in total ignorance at the amount of work that will ensue. I think to myself, "sashimi slices, it'll all work out" and then I plug away at writing some code, designing some views, and seeing it all come together. At some point I find myself customizing the little pieces of the Application: the footer. Woah, seriously the footer is valuable real estate but I rarely look at it that way. Yet, in it's tiny form it can hold some of the most important links and people naturally go there. We actually expect a footer on the pages we frequent; we expect it has worthwhile resources that we may need. And what goes into this footer is exactly what I'm talking about: subtle features.

I've tried to come up with a name for these features and I think I'll stick to unoriginality and call them Core Application Functionality - CAFs.

Apple loves their CAFs and it shows. My Macbook Pro understands me. It knows that just because I'm not logged into my computer I still may need to adjust the volume. It knows that physical components of my machine, like sound, need physical controls.

Mac OS X reminds me of how CAFs can make or break an (web) application. For example, looking at user authentication we have a baseline rubric for what we need to use a service. We expect a web application to let us register, login, and logout. That's the basics. Of course we are missing one very important feature: password reset. Unfortunately, not all web apps are created equally and some fail to provide a password reset mechanism. A missing CAF like this highlights the little attention to detail in core functionality of the Application. That's pretty bad and what's worse is how the user is left feeling helpless. A negative experience such as this will have the Application failing -- what a silly way to break the bank!

CAF gaps happens. Trust me. As an avid user of new web applications I find myself stuck more often than I'd like. These gaps creep up on start-ups as well as medium-to-large sized companies. They just happen. And they suck. So my advice is to take a moment and ask yourself this, "does my application get me?"

Filed under: Designs, Hardware, Information, Mac OSX No Comments

30Aug/090

jQuery & Navigation: sliding sub navs

We've all seen those web sites that have navigation links that, when clicked, slide down a sub navigation. I recently put one together for thatwasmean.com and thought I would take a moment to clean up, generalize, and make easily viewable an example. You can find the working example in my examples directory, here.

To make this functionality possible I utilized jQuery's slideUp and slideDown functionality. This is a neat little function that changes the display property from displaying the full element to slowly hiding the top part of it until the whole element is hidden, at which point the display CSS attribute is set to none.

I am going to put the main parts of the example here in this point, but keep in mind you will have to set up the remaining html tags (like body and head) as well as include the jQuery framework. It is encouraged to view the working example to see some of the added styling to make things look a little prettier (since in this post scope I am only including the necessities)

Let's begin with the CSS styles to set things up. We have three sub navigation items and so we need to set those three sub nav items with a display property set to none. You will also note I have modified text alignment in here, since each sub nav requires different aligning. The 'flash_about' is the container for the navigation as well as the sub navigation items. This is easy to change if you wish, but I stuck it all in one place as it suited my needs.

#flash_about {
  text-align:right;
}
.sub_nav_box {
  font-weight: normal;
  padding:0.3em 1em 1em;
  border-top:1px dotted #C1CDCD;
}
#add_new_thing {
  display: none;
  text-align: left;
}
#about {
  display: none;
  text-align: left;
}
 
#browse_by {
  display: none;
  text-align: center;
}
#browse_by &gt; .link {
  margin-left: 0.2em;
}
.nav_link {
  margin-left: 1em;
}

Next we need our JavaScript... using the jQuery functions mentioned above and a little jQuery helper magic we have a toggle_div function that takes a div ID and will toggle that div. This function is cool in the sense that it will hide all other opened sub nav items and only show the one you are selecting. Further, if you click a navigation link and its corresponding sub navigation item is already being displayed then the function will slide up that sub navigation item. (The $ symbol represents a call to jQuery.)

function toggle_div(div_id) {
  var div = $('#'+div_id);
  var divs = $('#flash_about').children('div').not(div);
 
  if(div.css('display') == 'none')
  {
    divs.slideUp(function() {
      div.slideDown();
    });
  }
  else
  {
    div.slideUp();
  }
}

Lastly, let's get the HTML in here to make all of this mean something to the viewer. I have left some content in the sub navigation items to give the overall example some meaning. (I strongly dislike examples where everything is named 'example 1, example 2, examples 3-- show me some content good sir!)

<div id="flash_about">
 
  <a class="nav_link" onclick="return toggle_div('about');" href="#">About</a>
  <a class="nav_link" onclick="return toggle_div('browse_by');" href="#">Categories</a>
  <a class="nav_link" onclick="return toggle_div('add_new_thing');" href="#">Submit something</a>
<div id="add_new_thing" class="sub_nav_box">
<div style="margin-bottom: 0.4em; margin-top: 0.4em;">
      <span id="add_new_thing_title" style="color: #333; font-size: 16px;">Type your thing here... </span></div>
<textarea id="add_new_thing_body" class="thing_input" style="border: 2px solid #666;" cols="40" rows="10"></textarea>
<div id="new_thing_buttons">
      <a class="button" href="#">add new thing</a> or <a onclick="toggle_div('add_new_thing');" href="#">cancel</a></div>
</div>
<div id="about" class="sub_nav_box">
    Welcome to my web site. This is the about us... it is awesome. Feel free to browse the site and check out some of our cool features.</div>
<div id="browse_by" class="sub_nav_box">
    <a class="link" href="#">link</a>
    <a class="link" href="#">link</a>
    <a class="link" href="#">link</a>
    <a class="link" href="#">link</a>
 
    <a class="link" href="#">link</a>
    <a class="link" href="#">link</a>
    <a class="link" href="#">link</a></div>
</div>

And there we have it. Go check out the example to see it in action. I hope you enjoyed this post. If you have any requests on JavaScript/jQuery examples let me know... As I find more time I will put up more examples of common uses of JS & jQuery.

Tagged as: css, html, javascript, jquery, web design No Comments

19Sep/070