I have designed the functionality to look and feel like a private messaging solution. This is perfect to implement on a user profile page or author’s page in a blog. We will be using some handy CSS3 techniques along with coding the page structure in HTML5. You don’t need to be a master jQuery artist to understand this tutorial, but it wouldn’t hurt to brush up on the basics. Check out my live demo example and download the project source code below.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Try It Out

View Live Demo – Download Source

The HTML Structure

Before we dive into jQuery let’s examine a bit of the HTML first. If you’re interested in examining the whole document layout I suggest downloading from the source code. But I’d like to focus on the modal box HTML code for further explanation.

I split the template using HTML5 <section> tags. Inside I have a div with the class .containmsg which holds our modal box and button to show/hide the contents. The modal container uses the class .mainCompose. This is also how we target in jQuery – let’s look at the HTML code for this below.

<!-- begin modal msg box -->
<div class="containmsg">
	<p><img src="img/compose.gif" alt="compose" class="compose" /></p>
 
	<div class="mainComposeD">
		<div class="calloutUp">
			<div class="calloutUp2">
			</div>
		</div>	
		<div>
 
		<form name="sendprivatemsg" action="#" method="post">
			<label for="tofield">To</label>
			<ul class="userslist clearfix">
			<li><a href="http://designshack.net/author/jakerocheleau/" target="_blank" class="recipient">Jake Rocheleau</a></li>
			</ul>
 
			<div class="break"></div>
			<label for="mymsg">Message</label>
			<textarea name="mymsg"></textarea>
			<p>**Enter some text!</p>
			<div><a class="sendbtn">Send Message</a><img src="img/ajax-loader.gif" class="loader" /></div>
		</form>
		</div>
	</div>
</div>
<!-- @end modal -->

Inside our form element there aren’t any surprises. A small label and input message field. Also a to: field with a link to the user’s page. In this demo I linked to my DesignShack author page. It’s not required, though. You could even remove the link altogether and still keep the CSS styles in-tact. The users list is coded as a UL element so you could support messaging to more than one person.

Now before we dive into jQuery there’s one more technique I wanted to cover. If you click the compose icon you’ll notice our modal box has a small triangle tip at the very top. You could use images for this technique, but there is a simpler alternative using strictly CSS.

Cool CSS Tooltip Triangles

There is a small div which appears directly above the message form. This contains two classes labeled calloutUp and calloutUp2. The former behaves as a continuation of our outer border (the darker tan) while the latter connects to the center of our form area. Using both we can create matching triangles in a tooltip style connector.

This works because of a setting in CSS that makes all borders come together in center as a triangle. So we can set both of these divs to have no height or width, but massive borders. If we only give color to one of the borders and the rest are transparent we create the triangle effect seen here. Check out the CSS classes for both of the callouts.

.calloutUp { height: 0; width: 0; border-bottom: 12px solid #f0ecd0; border-left: 12px dotted transparent; border-right: 12px dotted transparent; left: 0px; top: 0px; margin-left: 30px; z-index: 10; }
 
.calloutUp2 { position: relative; left: -12px; top: 8px; border-bottom: 12px solid #faf7e3; border-left: 12px dotted transparent; border-right: 12px solid transparent; z-index: 11; }

I’m also setting details for the surrounding borders because this keeps the div block looking square. Otherwise our shape would turn rectangular, and then our triangles would come out lopsided with jagged edges. The z-index property is also important so that our inner tip will stay above the outer tip. The other styles are used to mockup our fonts in the demo example, certainly nothing extraordinary.

Developing Interactions with jQuery

Now we can delve into the good stuff! If you have used jQuery before you’ll likely be familiar with starting off a new document. First include the latest version of jQuery into your page. If you don’t wish to download and host the file yourself Google offers all versions of jQuery live for developers. The latest I’m using is library 1.6.2 mini.

Once that’s included you should open another script tag for JavaScripting. I decided to write my code within the head block of the same HTML page. But you could alternatively move this to the body, footer, or even into an external file. The first snippets of code I’ve added below.

$(document).ready(function() {
    $(".mainCompose").hide();
    $('.loader').hide();
    $('#errortxt').hide();
 
 
    $('.compose').click(function() {
    	$('.mainCompose').slideToggle();
    });
});

We call our $(document).ready() function to hold off on any actions until the page is finished loading. The first task is to hide 3 page elements right away. These are .mainCompose to hide our modal box, .loader to hide the ajax loading gif, and #errortxt which only displays if the user hasn’t entered anything and tries to submit the form. Each of these elements will only be displayed under certain conditions so it’s best to keep them hidden immediately.

And finally our first scripting action is checking for a click event handler. The .compose class is actually tied to our compose image even though there is no anchor link to be clicked. jQuery can handle the click events and call slideToggle() either way. Now the last bit of code to examine is how we can pull data out from user input.

Processing the Modal Form

We are only checking for one more final event handler. This is tied to the click event of our .sendbtn, which is actually tied to an anchor link in our modal box. Directly next to this is our animated ajax .gif image which was hidden right after the page loaded.

$('.sendbtn').click(function(e) {
	e.preventDefault();
	$('.sendbtn').hide();
	$('.loader').show();
 
	if($('#mymsg').val() == "") {
		$('#errortxt').show();
		$('.sendbtn').show();
		$('.loader').hide();
	}
	else {
		$('sendbtn').hide();
		$('.loader').show();
		$('#errortxt').hide();
 
		var formQueryString = $('#sendprivatemsg').serialize(); // form data for ajax input
		finalSend();    		
	}

The execution function right after our button is click now has a parameter. function(e) just passes the instance of our click event right into the function as a variable. We use this event selector to call the preventDefault() method so that our link doesn’t behave as a link. We also immediately hide the .sendbtn and replace it with our .loader image.

Next we pass into a standard if/else clause checking the #mymsg textarea value. If this contains no text then we know the user hasn’t entered anything. In this case we display our error message and re-hide the loading image while displaying our button again. Otherwise we enter the else{ } clause which assumes we can send the message!

I haven’t written any Ajax/PHP code since it jumps out of range of this tutorial. But you should check out the jQuery ajax() function which can speed up backend development tenfold. I have set aside a variable formQueryString which can be used to pass the form data into an Ajax call. Instead I’ll be just finishing up the aesthetics in a small function finalSend();

	// possibly include Ajax calls here to external PHP
	function finalSend() {
		$('.mainCompose').delay(1000).slideToggle('slow', function() {
			$('#composeicon').addClass('sent').removeClass('compose').hide();
 
			// hide original link and display confirmation icon
			$('#composebtn').append('<img src="img/check-sent.png" />');
		});
	}
});

What we want to do now is close our modal box and display a small check icon to let the user know everything is fine and dandy. I’ve used .delay() to keep the modal box open for 1 second before calling our final slideToggle() method. This was added solely for appearances in this tutorial so you can see how it looks waiting for the server to load. If you want to keep your users waiting an extra second you could leave this – but it serves little point otherwise!

After the slide animation I’ve added a callback function. It only includes 2 lines of basic code. First we target the compose icon and change its class from .compose to .sent, then hide it from view. Finally we target #composebtn which is the container div of our icon and append a new check mark icon. Now our users know the message was sent and we’ve barely used any screen real estate!

View Live Demo – Download Source

Conclusion

This tutorial should have gotten you a bit more comfortable building a scalable modal box in jQuery. We have built some great CSS styles and used some basic form processing to enhance the user interaction. There is certainly a lot you could add on but our example lays the ground structure and paves the road for higher possibilities.

If you’re still looking to check out my demo or download the source code you can do so below. Reading code can be confusing after long periods of time, so I recommend downloading the source directly to get a better idea of how this small app functions. Similarly if you have any questions or ideas you can offer them in the discussion area.

The next time you’re faced with the task of designing an interface, why not learn from those who have already succeeded? Below we’ll take a look at the interfaces of ten beautiful and fairly new Mac applications and discuss what went right.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Wunderlist

The wizards at 6Wunderkinder are quietly taking over the productivity app industry with a killer combination: great design, simple functionality and an unbeatable price tag (free). Both their iPhone and desktop app look just excellent.

The key to the awesomeness of the Wunderlist interface is something extremely simple that we just don’t see enough of in Mac application interfaces: customization. Wunderlist comes built in with a whole bunch of gorgeous backgrounds like the wooden one shown above. Since the UI elements are actually fairly minimal, swapping out the background changes the entire personality of the application!

Why spend hours scratching your head wondering what your users will like the most when you know that every user is different? Providing your users with a number of equally attractive but very different options is a solid way to increase customer satisfaction. One important hint: make sure it’s easy to switch between the options. As a rule of thumb, if you have to write a tutorial on how to do it, it’s too complex. Wunderlist simply provides a row of icons at the bottom of the window. When you click on one, the background changes. It’s that simple.

The one killer feature that I think would make this even better is if users could use their own images as a background. Sure, plenty of your users will choose something hideous but there will also be a ton of users who come up with something that’s actually better than the built-in options.

I’m making a prediction that lots of developers will follow in the footsteps of 6Wunderkinder and begin offering users the ability to personalize their application interfaces to fit their unique personalities.

Reeder

Reeder for Mac is making a big splash in the Mac design community. Most of us have used NetNewsWire for ages and are definitely sick of the stagnant and boring interface. By contrast, Reeder is a breath of fresh air offering a notably clean and non-cluttered looking interface for an RSS reader.

The awesome thing about Reeder is that it represents another growing trend you can expect to see on the rise in the next few years: Apple iOS design on the desktop (Reeder began life on iOS). The iPhone lit a wildfire under interface developers who began churning out buttery smooth interfaces unlike anything we’d ever seen. This fire has recently been lit anew with the arrival of the iPad and innovative new interactive experiences like Flipboard.

Gradually, we’ve been seeing these design trends trickle back to the Mac. Even Apple has realized the benefits of iOS-like interfaces and is incorporating many of these benefits into OS X Lion, the next major release of Apple’s legendary desktop operating system.

Sparrow

I hesitated to add Sparrow because it is quite controversial among designers. The reason for this is that it represents a shameless ripoff of the UI of another popular application: Tweetie for Mac.

On one side of this debate you have legitimate claims that Tweetie has been stagnant in development for quite a while now and will likely stay that way because of its acquisition by Twitter (who really just wanted the iPhone app). Designers on the other side claim that it’s pretty uncool to rip off another man’s interface no matter the circumstances.

Regardless of which side of the debate you’re on, Sparrow is an interesting example for one important reason. It took a format that we were used to in one category (Twitter apps) and sought to apply it in a completely different context (email). This type of thinking is a stellar source of innovation. Take a look at all the apps you use every day, now take a look at the competing apps in that category. Chances are, they’re all about the same because someone innovated the category and everyone else simply followed. If you want to create something truly different, ask yourself how you could take the concept of that app and fit it into the structure of an app from a different category. You might just revolutionize an entire category.

Kiwi 2

Though the functionality still doesn’t feel quite as smooth as Tweetie, Kiwi has to be one of the most attractive desktop Twitter clients on the market.

As with Wunderlist, the key element here is customization. Kiwi offers users a number of themes to choose from that radically alter the appearance of the application. Wunderlist takes the simple route and offers different backgrounds, but in Kiwi, everything in your stream changes. This includes the shape and color of the tweets, the background and the appearance of the icons. Even the functionality alters pretty dramatically from one theme to the next. For instance, one theme simply shows you a list of usernames and hides the actual tweets until you click on a user to see what they said.

The execution here is very important. Kiwi doesn’t require you to choose a specific theme or walk you through some advanced setup process. The app has all the default settings worked out for you. In fact, if you never poke around in the preferences menu, you could use Kiwi for quite a while before even finding the customization options. They’re not exactly hidden, power users will find them in the first place they think to look. However, users who want a simple experience aren’t being hit over the head with intimidating decisions that they’re not prepared to make.

The lesson here is that customization should be both simple and optional. Don’t force your users into it or they’ll close the app and turn elsewhere. Let your users love your app for what it is and work their way up to making it look how they want as they become more familiar with how everything works.

DaisyDisk

Daisy Disk is the most attractive hard drive storage visualization I’ve ever seen. The retro futuristic charts look so good you’ll want to print them and use them as office art.

The important question to ask here is whether or not you have to sacrifice usability in your quest for aesthetics. The crazy pie chart shown above looks quite complicated and is probably enough to scare away a lot of users. However, the implementation is actually quite solid. Next to the graph is a simple list showing the types of data on your hard drive and how much space is being eaten up by them. All the information you need is in this list. It’s simple, straightforward and easy to understand. The visualization is there for visual thinkers like us designers who are crazy enough to favor this representation over a list.

Most importantly, the two representations of the data are linked in an interactive way. When you hover your mouse over the “Applications” line item, that part of the chart begins to glow. So even if you don’t remotely understand the chart at first, it will suddenly begin to make sense as you hover over each item in the list and see how the proportion of glowing space relates to other sections.

The lesson here is that eye candy isn’t for everyone. If you want to set your application apart as the one with crazy beautiful visualizations, go for it. But don’t neglect the users who would rather use Excel than Photoshop. Make sure your attractive graphics have a strong foundation in easy-to-use controls and understandable communication methods.

Transmit 4

Transmit 4 is the latest update to the reigning patriarch of Mac FTP clients and represents one of the most significant aesthetic boosts to the application to date. I never thought I would drool over an FTP client but Transmit now has a ton of really nice screens, animations, buttons and more.

The most noticeable tactic used here is increased contrast. FTP clients are notably bright and white; every screen, every list of files, nothing but white and, if you’re lucky, a little gray and/or blue. The folks at Panic decided to tackle this monotony with a number of really beautiful dark screens for setting up servers, navigating favorites, etc.

The important lesson here is that they really didn’t mess with the meat of the app too much. The file lists are still on a white background and function just like they always have. Anyone familiar with FTP software will be able to pick the app up and run with it immediately. Any time you want to update a UI to give it some visual flair, don’t be afraid to be extremely choosey about what parts do and don’t get updated. If you’re working with a product made popular by its simple functionality, keep it that way. Instead, take the time to focus on all the little details that really polish off a UI and make it feel like a major step up from the competition.

Courier

Courier has to be the most beautiful tool on the planet for quickly sharing multimedia files using social media. Would I ever pay $20 for a Facebook image uploader? No way. Has this one made me seriously consider changing my mind? Yep.

The lesson here is one I’ve discussed countless times in a web design context: visual metaphors rock. The first thing RealMac did was focus on core functionality. They made sharing files to all kinds of networks at once a ridiculously easy task powered by the drag and drop experience Mac users know and love. With an unbeatable workflow in place (always make sure to focus on content first!), they were able to wrap the whole thing in a beautiful and appropriate theme: the daily mail. This takes a fairly technological task and brings it into a very real and familiar experience for the user. Suddenly the mundane task of uploading files looks and feels like a virtual mail-sending video game where you can choose what envelope you want to use and where to send it.

1Password

Open up Keychain Access on your Mac. This is a typical password manager, designed by none other than Apple inc. It’s quite usable but also quite boring. Now take a look at a very different visual approach to the same basic functionality in 1Password.

Quite the difference no? 1Password possesses a simply outstanding interface for managing your logins, passwords, form data, etc. I don’t know about you but this makes me question every single database application on my hard drive. Why has the norm become to make such plain presentations of database information? What if applications like Evernote (already one of the more attractive database apps out there) looked a little more like 1Password or Bento? Would that be so bad? I submit that it would not.

Great aesthetics don’t complicate usability, they improve it. Believe it or not, you can present tables, rows, cells and fields of information in a really attractive manner without adding so much superfluous fluff that it ruins the functionality. If you don’t believe me, download 1Password and give it a shot.

SweetFM

In contrast to all this discussion of adding visual interest to your your interfaces, SweetFM, a wonderfully simple Last.fm client, does the exact opposite. Just take a look at how compact and attractive it is!

Now, compare that screenshot you just saw to the official Last.fm client for Mac:

Admittedly, many people will like the official client better. It seems more robust and puts everything in front of you at once (a highly efficient approach). However, there’s definitely something to be said for drastic simplification. Back to a point that we made earlier, blindly following the UI conventions of a given category is no way to innovate. Sometimes you can snag a ton of users that no one else is targeting simply by stripping out everything but the absolute bare necessities. Take a page out of Chocomoko’s book, sometimes less really is more.

Cockpit

Cockpit is an awesome menu bar app that you can use to control all kinds of stuff on your Mac. It’s not only super functional though, it also happens to look pretty stellar.

In this case, I’m not sure where the developers are drawing their inspiration from. The typical textures are here: metal, glass and rubber. Yet, the iTunes controller above doesn’t look anything like iTunes and it sure as heck doesn’t look like any other menu bar app I’ve ever seen (it looks more like a Dashboard widget). There’s a lot to be said about drawing inspiration from all of the examples you’ve seen today, but always remember that there’s no substitute for blazing your own path and intentionally trying to be completely different than anything else you’ve seen before.

Pull up Photoshop, crank some music and spend a few hours dishing out ideas as they come to you. Instead of focusing on what’s been done elsewhere, try to discover what hasn’t been done and explore the possibilities with that goal in mind.

Conclusion

I hope the ten awesome applications above have both provided you with a few new apps for your Mac and taught you a thing or two about interface design. Mac developers and designers continually wow me with their ability to continually push the envelope for the level of beauty we expect from desktop applications. You guys are my heros.

Leave a comment below and let us know what you think of the interfaces above. Also be sure to point out any other new Mac apps you’ve come across that serve as an excellent example of UI design.

CSS3 brings some great new properties relating to resizing elements, cursors, outlining, box layout and more. We’re focusing on three of the most significant user interface enhancements in this tutorial.

The examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers:

View the live examples page

Resizing

The latest version of Safari has a feature which allows resizable text areas. This is a great addition and one I find myself using daily. CSS3 allows you to easily apply this to any element, eventually to become cross-browser compatible. The code is the resize:both; line:

1
2
3
4
5
6

.ui_resizable {
padding: 20px;
border: 1px solid;
resize: both;
overflow: auto;
}

Box Sizing

The ‘box model’ CSS3 module is one of the more extensive areas, and full information can be found at the official specification. The box sizing aspect allows you to define certain elements to fit an area in a certain way. For example, if you’d like two bordered boxes side by side, it can be achieved through setting box-sizing to ‘border-box’. This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.

At present, additional prefixes are required to support this in all browsers – you can see the full list on the example page’s code. Here’s a basic possibility:

1
2
3
4
5

.area {
width: 300px;
border: 10px solid #ddccb5;
height: 60px;
}

1
2
3
4
5
6
7
8
9

.boxes {
box-sizing: border-box;
width:50%;
height: 60px;
text-align: center;
border: 5px solid #897048;
padding: 2px;
float:left;
}

Outline

Setting an element outline is already available in CSS2, but in CSS3 includes the facility to offset the outline away from the element – by a value you define. It differs from a border in two ways:

• Outlines do not take up space
• Outlines may be non-rectangular

They can be created as follows:

1
2
3
4
5
6
7
8

.ui_outline {
width: 150px; 
padding: 10px;
height: 70px;
border: 2px solid black;
outline: 2px solid #897048;
outline-offset: 15px;
}

In conclusion…

These features aren’t revolutionary, and are not likely to cause a stir in the design community. It can’t be denied that they’re useful – in particular giving the reader the ability to resize elements.

The next article in this series will be looking more in-depth at one much more revolutionary feature of CSS3 – multi column text. Remember, to see live examples of these features, take a look at our CSS3 example page.

Other posts in the series

• Introduction to CSS3 – Part 1: What is it?
• Introduction to CSS3 – Part 2: Borders
• Introduction to CSS3 – Part 3: Text Effects
• Introduction to CSS3 – Part 4: User Interface
• Introduction to CSS3 – Part 5: Multiple Columns
• Introduction to CSS3 – Part 6: Backgrounds