Expressive Web typography: useful examples and techniques

Wherever we turn online, typography jumps out at us — sometimes literally, with the assistance of some clever coding. And now more than ever, we are seeing greater focus on this design element and its varied implementations around the Web. With the growing popularity of font embedding services and @font-face, typography is the talk of the town, but even though it is a regular topic among communities, not all of our typographic efforts are successful. Sometimes we swing for the fences, only to miss or fall short.

This is what brings us together today. We have looked around the Web and checked some of the many typographic choices of website owners — some of which are successful, others not so much. Below is a selection of some elegant and interesting websites. We will critique the typography on them, in order to explore how we can improve the type on our own websites. Look through them to see whether you spot any typographical trespasses that you may have committed yourself.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Denise Chandler
When we look at the portfolio of Denise Chandler, right away the typography begins talking. The original hand drawn sans-serif offers a personal, artistic yet professional feel at the same time. Denise focuses on the most important information and presents it in a relatively simple one page layout. The hover effects offer a great element of interactivity to the site for sure, while the large, bold caps type along with the intricate ampersand for the header works well to playfully complement the page.

The only critique really would be in the contact area. A slightly larger font and line-height, along with some extra spacing between the paragraph and the social media links would have made the area feel as open as the rest of the site. Also, it’s a pity that the “Submit”-button in the contact form doesn’t change on click — a nice :hover and :active-effect could make the experience even more pleasant.

Jessica Hische
Using a good type that doesn’t detract from the content is imperative. Jessica does a tremendous job with this, opting for a simple thin sans-serif font. Even in its simplest form, the italic type adds a flourish to the design. Perhaps for readability, though, the designer could have broken from the italics for the description of the featured pieces. Also, the type could stand to be a bit larger, and not only because the headers appear to blur a bit at that size.

MCQ
The portfolio of Mike McQuade has a truly remarkable interactive page change effect that really grabs your attention. The site is set up as a grid with each square changing position and/or size to accommodate the content that opens with each selection. Also, because the layout is fluid, content squares appear on different positions when you resize the window and hence ensure the proper alignment of the content. It is a very clean, minimalist design that uses a unique combination of a thin and quirky serif and a clean and bold sans-serif to complete the tone and attitude of the portfolio.

The classic color scheme, a monochrome black and cream with just a splash of mint green thrown about, give the site a very attractive overall look. Though the contrast between the gray text and the dark gray background could be brought up by making the text just a tad bit lighter for sharper text.

Cooper Type
The large illustrated ampersand on Cooper Type is a perfect mascot for this typography website, and it works well with the big bold header. A bit more space between the illustration and the rest of the content would make it feel less cluttered. Some of the body type is too small to be readable, and a few of the paragraphs could use a wider letter spacing. Larger type or an alternate font would improve this greatly. The navigation looks a bit misaligned as well; it might work better aligned to the right over the main content.

Hype Nation
Hype Nation uses a stylized font in the header which works really well for the funky feeling of the site, as does the bright orange and gray color scheme. And given that they went with such an unusual header font, the follow-up choice of a simple sans-serif for the rest of the site was a wise one. Though the header is certainly complementary to the site feel, it might have benefited from the contrast of the footer rather than the black on orange that they went with.

The footer is beautiful and perhaps working the header to match the footer a bit more would have been very beneficial to the overall look of the site. The ‘Projects’ section is a bit confusing to use: there is no separate, detailed portfolio or project pages which isn’t good for what is essentially a simple portfolio site. Though overall, the page has excellent type spacing and a good use of white space.

Wing Cheng
Wing Cheng is a uniquely styled portfolio that uses hand drawn effects along with a script font on an accordion sketchbook background to bring together the entire presentation. Using the wireframes look to preview each project instead of the finished product is a very interesting choice, and it certainly adds to the uniqueness of the portfolio. The classy serif font used in the sidebar contrasts well to the hand drawn effect of the rest of the site, and plays into the finished designs you receive when you click on the wireframe of a project.

Though the handwritten, cursive font used to describe each of the projects is a little bit hard to read, and it could stand some tweaking. Also, because the whole website feels a bit more like illustration, it’s a bit difficult to see what elements are clickable, partly also because various elements are underlined. This problem is particularly apparent in the footer of the page where a contact form is displayed. Tooltips or striking button-like appearance of some elements could improve the user experience a bit.

Stephen Caver
Stephen Caver’s portfolio is another site where the typographical presentation strongly stands out as soon as you arrive. The layout of the site is truly remarkable: the font size of the main header and position of elements change when you resize the browser window. The big, bold header with a very subtle letterpress effect, as well as the combination of thin and bold type, creates a great look.

However, the main site navigation on the top is far too small, especially for the font used, and as a result, has some readability issues. The same goes for the vast majority of the body text. Also, the large part of the ‘Vitals’ section has some really low contrast to deal with that creates some issues too. The overall layout of the site is really good with a really strong focus on the work which is great for a portfolio, but so much of the site is hard to read which could end up just driving visitors away.

Kaleidoscope
This web app website has an appealing combination of circular script and squared-off sans-serif font. The typographic choices really add versatility to this single-page website, a testament to the imagination of the designer. The type sets off each distinctly styled section, making the page easily scannable. The contrast could stand to be a bit stronger in a few places on the website (e.g. the section “Complete your workflow” and “Details”), to keep things readable and flowing.

Trent Walton
Trent Walton has a minimalist black and white website with heavy typography. Each article on the website has an original design that features a number of typefaces, but always as large blocks of sharp text, thus maintaining consistency. The most recent article is always the landing page for the website, which gives the recent article a prominent position on the site. The “Articles” page has generous white space and solid alignment, although post illustration do appear to be position a bit too far away from the excerpts. The typography carries the page, filling in the white space and fleshing out the design quite nicely.

Barley’s
This bar website combines serif headers with sans-serif body type well, a combination that tends to be used quite often on the Web. The entire home page could use a bit more white space; the elements feel a bit stacked on top of one another. The type and content need room to breathe. The “News & Events” and “Contact” pages are a much better example of how spacing for the whole website could have been handled.

They feel much less compressed, which only makes the other pages feel that much more confined. One can argue if it is necessary to employ the letterpress effect for navigation items, as it does not quite match the rest of the website. A hidden highlight: the food menu page is a pleasure to look at, but it is not clear what the column “Beer pairings” stands for, especially because it’s always empty.

New Deal Festival
Right off the bat, the header on the home page for New Deal Festival really grabs attention. The script, combined with the block-style sans-serif, gives a clean sharp look. For some reason, though, the company changes the header on interior pages, and these headers are squished together and distorted, making the rest of the website feel a bit unfinished and unpolished.

New Deal Festival could have kept the home page header throughout the website. Also, the typography would benefit from a wider letter spacing. And the main content area would look better with more padding between the edge and the type; 40 pixels would probably do it.

Futu
The clean classic look created by the big bold type stands out right away on the Futu website. There is a bit too much animation, distracting you from the text. A better approach might have been to make the header ad either different or static and then just scroll the featured content. Also, the leading on the body type could stand some work. Some of the paragraphs have an uneven rag, which could rub some users the wrong way. As it stands, the website has a bit confusing hierarchy, and the reader could have difficulty figuring out what to focus on.

Design 977
The sans-serif type works really well for this website, which is clean, minimalist and to the point. Only the most important information is presented, and it’s done straightforwardly. At first glance, the letter spacing might seem a bit small, but in this case it complements the overall design. The website has a sharp angular look, and the tightness of the type sets this off. But while the social media link area is original, the constant animation in the corner is distracting. The text on the profile page could use more leading, and so does the contact form.

Robots Are Friends
Here, the texture works quite well behind the bold serif font, although the type could use a wider letter spacing. Sans-serif fonts seem to work wonderfully for these kinds of minimal websites with big bold typography. However, the sudden solid-gray footer feels a bit out of place here, and the black and gray text on the “About” page has a low contrast against the dark blue, making it a bit difficult to read. Also, the font size in the “Design” section on the front page is way too small, and we are not quite sure if the choice of type for the body copy is optimal.

Louise Fili Ltd.
The script and sans-serif type that Louise Fili Ltd. has selected for its website make for a classic and elegant look. The all-caps serif in the sidebar works well visually, but the sidebar would be more scannable if it were not in full-caps (although the full-caps everywhere else on the website do not detract from the design). The “About” page integrates a drop-cap beautifully into the typographical presentation, setting it apart from the other websites we’ve reviewed so far.

The flourishes between menu items really tie in with the logo script in a whimsical way. The main problem with the design is that the text is embedded into images almost throughout the site, making it impossible to copy. Also, on some pages the embedded text appears a bit blurry. Using plain text would be an improvement of this website.

Attack of Design
The font on Sacha Greif’s website blends really well with the retro feel of the rest of the website. And there is plenty of white space, making the content a pleasure to read. The subtle hover effects on headlines and icons make for a pleasant user experience. The headings in the sidebar are a bit difficult to read, though; perhaps a bigger font size or different font altogether would help. The navigation and hover effect for the different categories are clean and original.

Overall, another great example of type spacing: easy on the eyes and legible. The dates on the comments could use some extra padding around them to feel less constricted. Also, the “Read more” links could stand out a bit stronger. The highlight of the site is a beautiful comments design. The hover effect on the logo is a nice touch, too.

Process Type Foundry
Process Type Foundry uses a combination of serif and sans-serif type, which works really well. The clean minimalist design really highlights the big bold typography. The main body type could use higher contrast, and the relatively small light-gray type is not easy on the eyes. Still, the type throughout the website has a very good leading and letter width, making for a pleasant reading experience.

Also, the large bold headings combined with the thin, evenly kerned sub-heading make the website welcoming and engaging. The “About”-page is a beauty of simplicity and clean, sharp design with generous leading and whitespace.

Chipotle
This restaurant website has a grungy handwritten look for its font, which, combined with the other hand-drawn elements, fits well with the brand and the ‘industrial’ design of the restaurants. However, the typography on the website is almost completely embedded in images, to the point that the little bit of HTML type looks out of place because the other fonts are so distinct.

Also, the paragraph text (as seen on Chipotle’s story page) would look much better with a bit more attention paid to leading. As it is, it seems a bit squeezed together. Also, the main drawback of the site is the audio that starts playing automatically on page load. Notice: the footer contains some hidden treasures for typography lovers.

Worry Free Labs
Another fine example of a subtle texture working with the type instead of against it. As has been demonstrated a number of times, script and sans-serif fonts can complement each other well, especially on websites with the kind of retro look of Worry Free Labs. However, the letterpress effect on the type looks rough and unattractive, while the script font does look attractive and playful. If a font does not scale properly, then finding an alternative is better than forcing it into your design.

One site highlight that stands out, even though it is not necessarily type related, is in the portfolio section, the fluid scrolling through their work with the click of the ‘Next’ navigation button is — sorry for the wording — extremely awesome. We don’t really know why the company uses the German greeting “Willkommen” in the header of the page, though. But it is a nice touch for German visitors!

Made By Water
The first thing that jumps out at us from this website was the oversized type for “Running Water,” bold and eye-catching for sure. Spreading “Running” out some and bringing “Water” closer together could improve the introduction of the site. The uneven, almost sketchy, font establishes the website’s character well, and the background works well, too.

The gray and yellow color scheme works well with the font, and the minor yellow highlights stand out… except when you mouse over the header, the yellow is blindingly bright; a darker tone would work better. The contrast of the light-gray link and the subheading color could also use a bit of tweaking.

The Design Cubicle
TDC has a minimalist theme, with a heavy focus on typography. The squared-off sans-serif fonts complement the rest of the design, with their diversity of italic, bold and all-caps. A fine example of well thought out spacing in the body text, making for optimum readability; you can tell a lot of attention was paid to this aspect. Much of the text in the footer feels a bit small; the difference between 11 and 12 pixels may not seem much, but as you can see here, it can make a huge difference in readability. The beautiful drop-down menu in the top navigation is subtle, but looks great and even has nice hover effects.

Dubbed Creative
In the header, the thin red font of “Creative” gets lost next to the bold white of “Dubbed” and could use better balance. At first glance, the user is overloaded with information. An easy fix for this typographical barrage would be to move the description of the website from beside the header to under it. The site has a very promising structure, yet feels way too overwhelming because of the lack of whitespace. There are too many colors, too many icons, too much text, too much buttons. An example of a site where nice typography doesn’t necessarily lead to optimal results.

The Combine 2010
The designers of this website do a good job of establishing visual hierarchy by combining font types. Combining serif, sans-serif and script typefaces is no easy task, no matter how simple they make it look here. All of the calls to action are visible and attractive. The texture in (rather than behind) the heading type sets off the solid background well; this texture is different than most of the other ones we’ve seen.

It is pretty obvious that the designers know their typography. On the “Schedule” page, “2010? would look better with a bit tighter letter spacing; also, the logos on the Sponsors page present so many different colors and fonts that it looks a bit sloppy.

Edgar Leijs
As soon as you land on Edgar Leijs’ portfolio website, you are met with a bold oversized typographic header. The mouse-over effect in the logo is certainly nice, but the light yellow on white in the “LeIJs” is visually grating. Perhaps the yellow could be replaced by a more muted color, or the white could be softened to more of a gray. The yellow text in the main content area looks really good there, but it is not compatible with the white behind it.

Also, increasing the contrast between the dark-gray background and light-gray text would improve readability. When you hover over a portfolio item, a clever text box pops up that offers details unobtrusively. The screenshots of the works in the portfolio don’t have to be greyed out though, making them clearer and more vibrant (at least on hover) would make them a bit more attractive. Very original, distinctive and interesting design.

Rouse
Rouse employs a letterpress effect for the sub header which looks great on the textured background, really carving out the letters sharply. The combination of the sans-serif headers with the serif body text plays well into the slight retro look of the site. Though the effect that was used on the word ‘Rouse’ looks a bit strange. It is easy to see that it is supposed to be a 3D-effect, however it is pretty poorly rendered. The line length and leading of the body copy are done beautifully.

A couple of negative remarks: the footer could use some extra top padding to balance it out and give the overall design a symmetry, and too much text is embedded in the images, making it impossible to copy and paste.

Below are a few related posts you might want to check out. Also leave your thoughts in the comments section below.

(al) (vf)

Tweet

View the original article here

Five useful CSS coding techniques for jQuery dynamic sites

Interactivity can transform a dull static website into a dynamic tool that not only delights users but conveys information more effectively. In this post, we’ll walk through five different coding techniques that can be easily implemented on any website to provide a richer user experience.

The techniques will allow you to better display difficult content, help users find information more effectively and provide meaningful UI cues without overwhelming the user.

On-page text searchDrag controls for oversized contentSubtle hover effectsComment count barsFull-page slider[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Websites often have search boxes to allow users to find content from their archives. But what if you want to find content on the given page? Information Architects has had on-page text search that provides a great user experience. Let’s recreate this using jQuery.

First let’s build an input box for the search:

Next we’ll need jQuery to attach a listener to track changes to the input box:

$(function() { $('#text-search').bind('keyup change', function(ev) { // pull in the new value var searchTerm = $(this).val(); )};});

Here we bound our function to both the keyup and change events. This ensures that our operation fires regardless of whether the user types or pastes the text.

Now, let’s turn to Highlight, a useful and lightweight jQuery plug-in that handles text highlighting. After including the plug-in source, let’s add a highlight() call to our JavaScript:

$(function() { $('#text-search').bind('keyup change', function(ev) { // pull in the new value var searchTerm = $(this).val(); // disable highlighting if empty if ( searchTerm ) { // highlight the new term $('body').highlight( searchTerm ); } });});

In addition to highlighting the given text, we’ve also added a check to make sure the search term isn’t empty (which causes an infinite loop).

This snippet highlights the search query throughout the page, but we can also limit the scope to a given id:

$('#myId').highlight( searchTerm );

Or we can search only within a certain element:

$('p').highlight( searchTerm );

This text highlighting by default is case insensitive. If you’d prefer case-sensitive highlighting, remove the .toUpperCase() on both lines 21 and 41 of the Highlight plug-in.

Now that the JavaScript is attached, we’ll need to style our highlighted items. The Highlight plug-in wraps the highlighted terms in , which we can style with CSS.

First, let’s change the background color and then add rounded corners and a drop-shadow for all browsers except IE:

.highlight { background-color: #fff34d; -moz-border-radius: 5px; /* FF1+ */ -webkit-border-radius: 5px; /* Saf3-4 */ border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */ -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */ -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */}

Although the highlighting is now visible, it still appears a bit tight around the text and could use some padding. But we’ll have to be careful not to adjust the layout of text. These spans are inline elements, and if we simply add padding, the text will shift around on the page. So, let’s include padding with a negative margin to compensate:

.highlight { padding:1px 4px; margin:0 -4px;}

Last but not least, let’s make sure to remove the highlighted text whenever the user edits text in the input box:

$(function() { $('#text-search').bind('keyup change', function(ev) { // pull in the new value var searchTerm = $(this).val(); // remove any old highlighted terms $('body').removeHighlight(); // disable highlighting if empty if ( searchTerm ) { // highlight the new term $('body').highlight( searchTerm ); } });});

Here we added a call to remove any text highlighting, which is performed outside of the empty field check. This ensures that the highlight is also removed if the user clears the field.

Although removeHighlight() works well in most browsers, it will crash IE6. This is due to an IE6 bug with node.normalize().

We can get the Highlight plug-in working in IE6 by rewriting this function. Simply replace lines 45-53 of highlight.js with the following:

jQuery.fn.removeHighlight = function() { function newNormalize(node) { for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) { var child = children[i]; if (child.nodeType == 1) { newNormalize(child); continue; } if (child.nodeType != 3) { continue; } var next = child.nextSibling; if (next == null || next.nodeType != 3) { continue; } var combined_text = child.nodeValue + next.nodeValue; new_node = node.ownerDocument.createTextNode(combined_text); node.insertBefore(new_node, child); node.removeChild(child); node.removeChild(next); i--; nodeCount--; } } return this.find("span.highlight").each(function() { var thisParent = this.parentNode; thisParent.replaceChild(this.firstChild, this); newNormalize(thisParent); }).end();};

This new function replaces the standard Javascript normalize() with a custom function that works in all browsers.

Download the complete example.

When layout constraints bump up against the need for large images, finding a quality solution can be difficult. Mospromstroy uses a creative technique to handle this situation: a "drag and drop" control bar that allows users to pan through images.

We can accomplish something similar using jQuery UI's draggable behavior.

First let's set up some mark-up for the content and controls:

Your content here

Next, let's apply some basic CSS:

#full-sized-area { position: relative; overflow: hidden; width: 800px; height: 400px;}#full-sized-content { position: absolute; top: 0; left: 0;}#drag-controls-area { position: relative; width: 300px; height: 50px;}#drag-controls { position: absolute; top: 0; left: 0; height: 48px; border: 1px solid white;}

Here we applied an absolute position to both the #full-sized-content and #drag-controls, and we also hid any overflow from the large image. Additionally, we applied some arbitrary dimensions to the content and drag controls wrappers; make sure to adjust these as needed.

Now, let's use jQuery UI to build the interaction. Begin by including jQuery UI with the draggable module.

Before attaching the controls, let's resize the drag control box to the right dimensions:

$(function() { var $fullArea = $('#full-sized-area'); var $fullContent = $('#full-sized-content', $fullArea); // find what portion of the content is displayed var contentRatio = $fullArea.width() / $fullContent.width(); // scale the controls box var $controlsArea = $('#drag-controls-area'); var $controls = $('#drag-controls', $controlsArea); $controls.css('width', $controlsArea.width() * contentRatio);});

Here, we've determined what portion of the content is visible in the content area and then scaled the width of the control box accordingly.

Next, let's attach the draggable behavior:

$(function() { var $fullArea = $('#full-sized-area'); var $fullContent = $('#full-sized-content', $fullArea); // find what portion of the content is displayed var contentRatio = $fullArea.width() / $fullContent.width(); // scale the controls box var $controlsArea = $('#drag-controls-area'); var $controls = $('#drag-controls', $controlsArea); $controls.css('width', $controlsArea.width() * contentRatio); // determine the scale difference between the controls and content var scaleRatio = $controlsArea.width() / $fullContent.width(); // attach the draggable behavior $controls.draggable({ axis : 'x', // confine dragging to the x-axis containment : 'parent', drag : function(ev, ui) { // move the full sized content $fullContent.css('left', -1 * ui.position.left / scaleRatio ); } });});

Here, we've attached a draggable event and set a couple options. First, we set axis to restrict dragging to the x-axis, and then we set containment to confine dragging to the parent element (i.e. the controls wrapper).

Finally, we set up a drag listener to move the full-sized content according to how far the user has dragged the control. For this, we negatively positioned the content to the left by the drag amount multiplied by the ratio of the controls to the content.

The draggable content is working, but we still have room for improvement.

First let's add some more styling to the control box to make it more interactive. jQuery UI's draggable attaches two class names that we can use for this: ui-draggable and ui-draggable-dragging.

#drag-controls.ui-draggable { cursor: -moz-grab !important; cursor: -webkit-grab !important; cursor: e-resize;}#drag-controls.ui-draggable-dragging { cursor: -moz-grabbing !important; cursor: -webkit-grabbing !important; border-color: yellow;}

In addition to applying a new border color to the active controls, this snippet also attaches a number of cursor properties, which use proprietary UI cursors available in Firefox and Safari, with a back-up for IE.

Because of the implementation of the cursor property, we had to "bootstrap" this together using !important. This ensures that the proprietary cursors are used if available, while allowing the default cursor to overwrite them in IE. Unfortunately, Chrome does not currently support -webkit-grab, so we leave it out of this implementation. If you'd prefer to use the back-up e-resize cursor in both Chrome and Safari, just remove the -webkit-grab and -webkit-grabbing properties.

Let's make the sliding animation more three-dimensional by adding a two-layer parallax effect. To do so, we simply add a background to our full-sized content area and animate it at a slower rate.

Add the mark-up first:

Your background here

Your content here

And then some basic styling:

#full-sized-background { position: absolute; top: 0; left: 0;}

Here, we use absolute positioning to lock the background in place. Note that we did not need to attach a z-index, because we placed the background element before the content area in the mark-up.

Finally, let's add the background animation to our drag event:

$fullBackground = $('#full-sized-background'); $controls.draggable({ axis : 'x', // confine dragging to the x-axis containment : 'parent', drag : function(ev, ui) { // move the full sized content var newContentPosition = -1 * ui.position.left / scaleRatio; $fullContent.css('left', newContentPosition); // move the background $fullBackground.css('left', newContentPosition * .4); } });

Here, we simply used the new position that we calculated for the main content and applied 40% of that change to the background. Adjust this value to change the speed of the parallax.

Download the complete example.

Veerle's blog uses subtle transitions to create a natural feel for mouse interactions. These can be easily accomplished using CSS3's transition property (and a jQuery back-up for unsupported browsers).

First, let's attach some CSS with the class subtle to all elements:

.subtle { background-color: #78776C; color: #BBBBAD;}.subtle:hover, .subtle:focus { background-color: #F6F7ED; color: #51514A;}

Here, we've styled these elements with a background and text color and included a hover state using the pseudo-class :hover. Additionally, we included the :focus pseudo-class for active input and text-area elements.

This CSS causes the style to change immediately on hover, but we can apply a smoother transition using CSS3:

.subtle { -webkit-transition: background-color 500ms ease-in; /* Saf3.2+, Chrome */ -moz-transition: background-color 500ms ease-in; /* FF3.7+ */ -o-transition: background-color 500ms ease-in; /* Opera 10.5+ */ transition: background-color 500ms ease-in; /* futureproofing */ background-color: #78776C; color: #BBBBAD;}.subtle:hover, .subtle:focus { background-color: #F6F7ED; color: #51514A;}

Here, we've attached a CSS3 transition that works in all modern browsers except IE. The transition property consists of three different values. The first is the CSS property to animate, and the second is the duration of the animation—in our case, background-color and 500 milliseconds, respectively. The third value allows us to specify an easing function, such as ease-in or linear.

Our subtle transitions now work across a variety of browsers, but let's include support for all users by leveraging a jQuery back-up technique.

First we'll need to detect whether the user's browser supports transition:

// make sure to execute this on page load$(function() { // determine if the browser supports transition var thisStyle = document.body.style, supportsTransition = thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.OTransition !== undefined || thisStyle.transition !== undefined;});

Here, we check whether the body element can use any of the browser-specific transition properties that we defined above.

If the browser doesn't support transition, we can apply the animation using jQuery. However, jQuery's animate() function does not natively support color-based animations. To accommodate our background-color animation, we'll have to include a small chunk of jQuery UI: the effects core.

After including jQuery UI, we'll need to attach the animation to the hover and focus event listeners:

// make sure to execute this on page load$(function() { // determine if the browser supports transition var thisStyle = document.body.style, supportsTransition = thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.OTransition !== undefined || thisStyle.transition !== undefined; // assign jQuery transition if the browser doesn't support if ( ! supportsTransition ) { var defaultCSS = { backgroundColor: '#78776C' }, hoverCSS = { backgroundColor: '#F6F7ED' }; // loop through each button $('.subtle').each(function() { var $subtle = $(this); // bind an event listener for mouseover and focus $subtle.bind('mouseenter focus', function() { $subtle.animate(hoverCSS, 500, 'swing' ); }); // bind the reverse for mouseout and blur $subtle.bind('mouseleave blur', function(ev) { if ( ev.type == 'mouseleave' && ev.target == document.activeElement ) return false; $subtle.animate(defaultCSS, 500, 'swing' ); }); }); }});

Here, we recreated the transition using jQuery's animate(). Notice how we used values that are to the CSS3 transition—500 specifies 500 milliseconds, and swing specifies an easing method that is close to ease-in.

While the mouse-over and focus event is fairly straightforward, notice the difference in the mouse-out and blur event. We added some code to end the function if the element is in focus. This retains the active state even if the user moves their mouse. jQuery's is() method does not support the :focus pseudo-class, so we have to rely on DOM's document.activeElement.

Download the complete example.

IT Expert Voice uses a nice method for displaying the "Most commented" posts in its sidebar. Let's recreate this using WordPress and a bit of CSS and jQuery (non-WordPress users can skip the first section).

Let's start by pulling in the top-five most-commented posts:

Here, we used WP_Query and a custom variable name so as not to disrupt any other post loops on the page.

Next, let's loop through the posts we've selected, outputting each as a list item:

have_posts()) : $most_commented->the_post(); ?>

Here, we used a while() loop to run through each post. First, we output a link to the post using the_permalink() and the_title(), and then we output the comment count using comments_number() and some additional mark-up for styling.

Let's style the basic layout of the comments list using CSS:

#most-commented li { list-style: none;}#most-commented a { display: block;}

We've removed any list styling and defined the links as a block element so that they stay separate from our comment bar visualizations.

Let's set up some base styles for the comment bar and comment count:

#most-commented .comment-bar { display: inline-block; position: relative; height: 30px; width: 0; margin: 5px 0; padding-left: 20px; background-color: #999;}#most-commented .comment-count { display: inline-block; position: absolute; right: -20px; top: -5px; width: 34px; height: 34px; border-width: 3px; border-style: solid; border-color: #FFF; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; text-align: center; line-height: 34px; background-color: #6CAC1F; font-size: 13px; font-weight: bold; color: #FFF;}

Most of this styling is arbitrary, so feel free to attach a background image or otherwise tweak it to fit your theme. The main thing is to align the comment count to the right of the comment bar so that we can adjust the width of the bar at will.

Pay attention to the total width of the comment count, in our case 40px (34px wide plus 3px for the left and right borders). We're using half of that value to position the comment count: 20px of negative positioning so that the count hangs on the right, and 20px of left padding so that the comment bar reaches the center of the comment count.

Finally, let's use jQuery to set the widths of the individual bars. We'll start by looping through the comments after the page loads:

$(function() { $('#most-commented li').each(function(i) { var $this = $(this); var thisCount = ~~$this.find('.comment-count').text(); });});

We loop through all of the

elements, pulling out the comment count from the mark-up. Notice that we've used the primitive data type ~~ to convert the text to an integer. This is significantly faster than alternatives such as parseInt().

Let's set up some key variables in the first iteration of our loop:

$(function() { // define global variables var maxWidth, maxCount; $('#most-commented li').each(function(i) { var $this = $(this); var thisCount = ~~$this.find('.comment-count').text(); // set up some variables if the first iteration if ( i == 0 ) { maxWidth = $this.width() - 40; maxCount = thisCount; } });});

Here, we started by defining variables outside of the each() loop. This allows us to use these values in every iteration.

Next, we subtracted 40 pixels from the width of the list item to define a maximum width for the comment bar. The 40 pixels compensate for the left-padding and negative position that we applied above.

We also set maxCount to the first value. Because we initially pulled the posts according to their number of comments, we can be sure that the first item will have the highest count.

Finally, let's calculate the width of each bar and animate the transition:

$(function() { // define global variables var maxWidth, maxCount; $('#most-commented li').each(function(i) { var $this = $(this); var thisCount = ~~$this.find('.comment-count').text(); // set up some variables if the first iteration if ( i == 0 ) { maxWidth = $this.width() - 40; maxCount = thisCount; } // calculate the width based on the count ratio var thisWidth = (thisCount / maxCount) * maxWidth; // apply the width to the bar $this.find('.comment-bar').animate({ width : thisWidth }, 200, 'swing'); });});

If you'd rather style the elements without any animation, simply replace the animate() with a static css().

Download the complete example.

Sliding animation is an interactive way to show related content. But JAX Vineyards takes the standard sliding gallery to the next level by animating across the entire page. Let's create a similar effect using jQuery.

Start by adding the mark-up:

Panel 1 content here

Panel 2 content here

Panel 3 content here

We set up the basic mark-up and wrappers that we need for the animation. Make sure that the full-slider-wrapper is not contained in any element that is narrower than the browser window—we'll need the full width of the browser to pull off the effect.

Now, let's add some basic CSS to handle overflow and to position the panels:

html { min-width: 800px;}#full-slider-wrapper { overflow: hidden;}#full-slider { position: relative; width: 800px; height: 600px; margin: 0 auto;}#full-slider .slide-panel { position: absolute; top: 0; left: 0; width: 800px; height: 600px; visibility: hidden;}#full-slider .slide-panel.active { visibility: visible;}

We defined absolute positioning and set up some arbitrary dimensions for the panels and wrapper. Feel free to tweak these dimensions to your content.

We also attached overflow: hidden to our wrapper element, which will prevent scroll bars from appearing when we animate the panels. Because we hid the overflow, we also had to assign a min-width to the html document. This ensures that the content will get scroll bars if the browser window is too small.

Finally, we used the active class that we established in the mark-up to show the first panel.

Let's build the interaction using jQuery. We'll start by defining some variables and then create a function to handle the sliding animation in both directions:

$(function() { var $slider = $('#full-slider'); var $sliderPanels = $slider.children('.slide-panel'); function slidePanel( newPanel, direction ) { // define the offset of the slider obj, vis a vis the document var offsetLeft = $slider.offset().left; // offset required to hide the content off to the left / right var hideLeft = -1 * ( offsetLeft + $slider.width() ); var hideRight = $(window).width() - offsetLeft; // change the current / next positions based on the direction of the animation if ( direction == 'left' ) { currPos = hideLeft; nextPos = hideRight; } else { currPos = hideRight; nextPos = hideLeft; } // slide out the current panel, then remove the active class $slider.children('.slide-panel.active').animate({ left: currPos }, 500, function() { $(this).removeClass('active'); }); // slide in the next panel after adding the active class $( $sliderPanels[newPanel] ).css('left', nextPos).addClass('active').animate({ left: 0 }, 500 ); }});

Here our slidePanel() function accepts two arguments: the index of the panel that we want to slide into view, and the direction of the slide (i.e. left or right).

Although this function looks complicated, the concepts are fairly simple. We determined the amount of offset necessary to hide the panels on the left and right sides. To calculate these values, we used jQuery's offset() and the slider and window widths. These offsets represent the left position values needed to hide the content on either side.

Next, we have a switch based on the direction of the animation, which uses the two values we defined previously.

Finally, we trigger the animation using jQuery's animate(). We slide the active panel out of view and then remove the active class once the animation completes. Then we set the new panel's left position off the screen, attach the active class to make it visible and slide it into place.

Our function now handles the animation, but we still have to build controls to leverage it.

Append navigation elements to the slider object that we defined previously:

var $navWrap = $('

').appendTo( $slider ); var $navLeft = $('

').appendTo( $navWrap ); var $navRight = $('

').appendTo( $navWrap );

We could have included this navigation in the initial mark-up, but we're appending it with JavaScript for two reasons: it ensures that the navigation won't appear until the JavaScript is loaded, and it keeps the navigation from being displayed on the off chance that JavaScript isn't enabled.

Let's style the navigation:

#full-slider-nav { position: absolute; top: 0; right: 0;}#full-slider-nav-left, #full-slider-nav-right { display: inline-block; height: 0; width: 0; margin-left: 15px; border: 20px solid transparent; cursor: pointer;}#full-slider-nav-left { border-right-color: #BBB;}#full-slider-nav-left:hover { border-right-color: #999;}#full-slider-nav-right { border-left-color: #BBB;}#full-slider-nav-right:hover { border-left-color: #999;}

Here we absolute position the navigation to the top right. We also use a CSS triangle trick to quickly style the controls.

Let's attach our new slider navigation to the slidePanel() function that we defined previously:

var $navWrap = $('

').appendTo( $slider ); var $navLeft = $('

').appendTo( $navWrap ); var $navRight = $('

').appendTo( $navWrap ); var currPanel = 0; $navLeft.click(function() { currPanel--; // check if the new panel value is too small if ( currPanel < 0 ) currPanel = $sliderPanels.length - 1; slidePanel(currPanel, 'right'); }); $navRight.click(function() { currPanel++; // check if the new panel value is too big if ( currPanel >= $sliderPanels.length ) currPanel = 0; slidePanel(currPanel, 'left'); });

This snippet assigns click events to the left and right navigation. In each, we change the value of currPanel according to the direction. If this new value falls outside of the available panels, we loop to the other end of our set. Finally, we trigger the slidePanel() function with the new panel and appropriate direction.

In our example, we built controls only for left and right navigation, but you could easily tweak this to have buttons for each panel. Simply pass the correct panel index to slidePanel.

Let's bring all the jQuery code together:

$(function() { function slidePanel( newPanel, direction ) { // define the offset of the slider obj, vis a vis the document var offsetLeft = $slider.offset().left; // offset required to hide the content off to the left / right var hideLeft = -1 * ( offsetLeft + $slider.width() ); var hideRight = $(window).width() - offsetLeft; // change the current / next positions based on the direction of the animation if ( direction == 'left' ) { currPos = hideLeft; nextPos = hideRight; } else { currPos = hideRight; nextPos = hideLeft; } // slide out the current panel, then remove the active class $slider.children('.slide-panel.active').animate({ left: currPos }, 500, function() { $(this).removeClass('active'); }); // slide in the next panel after adding the active class $( $sliderPanels[newPanel] ).css('left', nextPos).addClass('active').animate({ left: 0 }, 500 ); } var $slider = $('#full-slider'); var $sliderPanels = $slider.children('.slide-panel'); var $navWrap = $('

').appendTo( $slider ); var $navLeft = $('

').appendTo( $navWrap ); var $navRight = $('

').appendTo( $navWrap ); var currPanel = 0; $navLeft.click(function() { currPanel--; // check if the new panel value is too small if ( currPanel < 0 ) currPanel = $sliderPanels.length - 1; slidePanel(currPanel, 'right'); }); $navRight.click(function() { currPanel++; // check if the new panel value is too big if ( currPanel >= $sliderPanels.length ) currPanel = 0; slidePanel(currPanel, 'left'); });});

Download the complete example.

In this post we walked through a variety of methods for adding dynamic functionality to your websites. These techniques can be easily adapted to work with almost any site. The majority of these techniques rely on jQuery to provide interaction, but there are plenty of other approaches, both with and without jQuery. Please post any alternate solutions in the comments below, or fork the example files on github.

Furthermore, these five methods represent only a small portion of interactive techniques. Please post any links to other dynamic techniques and functionality in the comments below.

You may be interested in the following related posts:

(al)
Tweet

View the original article here