Inerd Hussein - tagged with css

10 Handy WordPress Comments Hacks

Thu, 23 Jul 2009 02:31:00 -0600

Comments sections are neglected on many blogs. That is definitely a bad thing, because comments represent interaction between you and your readers. In this article, we’ll have a look at 10 great tips and hacks to enhance your blog’s comments section and give it the quality it deserves. You may be interested in the following related posts:

5 Useful And Creative Ways To Use WordPress Widgets Power Tips For WordPress Template Developers 10 Useful WordPress Loop Hacks Custom Field Hacks For WordPress 15 Useful Twitter Hacks and Plugins For WordPress Mastering WordPress Shortcuts 100 Amazing Free WordPress Themes For 2009

Add Action Links To Comments

The problem. Whether or not you allow readers to add comments without having to be approved, you will often need to edit, delete or mark certain comments as spam. By default, WordPress shows the “Edit” link on comments (using the edit_comment_link() function) but not “Delete” or “Spam” links. Let’s add them. The solution. First, we have to create a function. Paste the code below in your functions.php file: function delete_comment_link($id) { if (current_user_can('edit_post')) { echo '| del '; echo '| spam'; } } Once you have saved functions.php, open up your comments.php file, and add the following code where you want the “Delete” and “Spam” links to appear. They must go in the comment loop. In most themes, you’ll find an edit_comment_link() declaration. Add the code in just after that. delete_comment_link(get_comment_ID()); Code explanation. The first thing we did, of course, was to make sure the current user has permission to edit comments. If so, links to delete and mark a comment as spam are displayed. Note the use of the admin_url() function, which allows you to retrieve your blog admin’s URL. Source:

How to: Add “Delete” and “Spam” buttons to your comments.

Separate TrackBacks From Comments

The problem. Do your posts have a lot of TrackBacks? Mine do. Trackbacks are cool because they allow your readers to see which articles from other blogs relate to yours. But the more TrackBacks you have, the harder the discussion is to follow. Separating comments from TrackBacks, then, is definitely something to consider, especially if you do not use the “Reply” capabilities introduced in WordPress 2.7. The solution. Open and edit the comments.php file in your theme. Find the comment loop, which looks like the following: foreach ($comments as $comment) : ?> // Comments are displayed here endforeach; Once you have that, replace it with the code below:

//Comment code goes here

Jamie asks: How do I display comments and TrackBacks separately?

Get Rid Of HTML Links In Comments

The problem. Bloggers are always looking to promote their blogs, and spammers are everywhere. One thing that totally annoys me on my blogs is the incredible amount of links left in comments, which are usually irrelevant. By default, WordPress transforms URLs in comments to links. Thankfully, if you’re as tired of comment links as I am, this can be overwritten. The solution. Simply open your function.php file and paste in this code: function plc_comment_post( $incoming_comment ) { $incoming_comment['comment_content'] = htmlspecialchars($incoming_comment['comment_content']); $incoming_comment['comment_content'] = str_replace( "'", ''', $incoming_comment['comment_content'] ); return( $incoming_comment ); }

function plc_comment_display( $comment_to_display ) { $comment_to_display = str_replace( ''', "'", $comment_to_display ); return $comment_to_display; }

add_filter('preprocess_comment', 'plc_comment_post', '', 1); add_filter('comment_text', 'plc_comment_display', '', 1); add_filter('comment_text_rss', 'plc_comment_display', '', 1); add_filter('comment_excerpt', 'plc_comment_display', '', 1); Once you have saved the file, say goodbye to links and other undesirable HTML in your comments. Code explanation. The first thing we did was create two functions that replace HTML characters with HTML entities. Then, using the powerful add_filter() WordPress function, we hooked the standard WordPress comments processing functions to the two functions we just created. This makes sure that any comments added will have their HTML filtered out. Sources:

How to: get rid of links in your comments How to disable HTML in WordPress comments

Use Twitter Avatars In Comments

The problem. Bloggers find Twitter very useful because it allows them to promote their blog and stay connected to other bloggers and their own audience. Because of Twitter’s popularity, why not illustrate comments with Twitter avatars instead of the normal gravatars? The solution.

The first thing to do is get the functions file here. Once you have that, unzip the archive to your hard drive, and then open the twittar.php file. Select all of its content and paste it to your blog’s functions.php file. The last thing to do is open your comments.php file and find the comments loop. Paste the following line in the comments loop:

Code explanation. Some months ago here at Smashing Magazine, an awesome plug-in named Twittar was released. Its purpose is to allow you to use Twitter avatars on your WordPress blog. Because of the number of requests I received from WpRecipes.com readers, I decided to turn the plug-in into a hack, for people who prefer hacks to plug-ins. Of course, you could simply install the plug-in rather than insert its content into your function.php file. It’s up to you. Sources:

Twitter avatars in comments How to: Use Twitter avatars in comments

Set Apart Author Comments With Style

The problem. For blog posts that have a lot of comments, finding the author’s comments and responses to reader questions is not always easy, especially if the blog don’t have WordPress 2.7’s threaded comments feature. Happily, it is possible to give author comments a different style so that readers can always quickly find your answers. The solution.

Open the comments.php file and find the comment loop:

After that line, paste in the following: comment_author_email == get_the_author_email()) { $isByAuthor = true; } ?>

Once that’s done, find the line of code that represents comments (it may vary depending on your theme):

Now we have to output the authorcomment class if the comment was made by the author:
The last thing we do is create a CSS class for author comments. Open the style.css file and insert the code. Replace the example colors with your colors of choice. .authorcomment{ color:#fff; font-weight:bold; background:#068; }

Code explanation. Basically, this code compares each email address left by a commentator to the author’s email address. If they match, the $isByAuthor is set to true. When comments are displayed on screen, the value of $isByAuthor is checked. If it returns true, then the authorcomment class is added to the container. It can be done more easily on Wordpress 2.7+ by just adding comment_class(); to the comment’s DIV, which automatically adds the class bypostauthor when you’re commenting on your own post (Thanks, Nima!). Source:

Highlight Author Comments in WordPress
1. Display Total Number Of Comments And Average Number Of Comments Per Post
The problem. On your blog’s dashboard, WordPress tells you how many total comments your blog has received. Unfortunately, there’s no function for displaying this information publicly. Displaying the total number of comments on your blog and average number of comments per post can be very helpful, especially if you have a page for advertising opportunities. The solution. publish;

$count_comments = get_comment_count(); $comments = $count_comments['approved'];

echo "There's a total of ".$comments." comments on my blog, with an average ".round($comments/$posts)." comments per post."; ?> Code explanation. Introduced in version 2.5, the wp_count_posts() and get_comment_count() functions allow you to easily retrieve the total number of posts and comments, respectively, on your WordPress blog. To derive the average number of comments per post, we have to do a bit of simple math, using the PHP round() function to make sure we end up with an integer. Source:

How to: Display your average number of comments per posts
1. Display X Number Of Most Recent Comments
The problem. By default, WordPress provides a widget that outputs a list of however many of the most recent comments. This is great, but sometimes you want this functionality without a widget. The solution. This hack is very simple: just paste this code wherever you need a certain number of the most recent comments to be displayed. Don’t forget to specify the actual number on line 3 (after the LIMIT SQL clause). comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT 10";

$comments = $wpdb->get_results($sql); $output = $pre_HTML; $output .= "\n
- ".strip_tags($comment->comment_author) .":" . "ID)."#comment-" . $comment->comment_ID . "\" title=\"on ".$comment->post_title . "\">" . strip_tags($comment->com_excerpt)."
"; $output .= $post_HTML; echo $output; ?> Code explanation. As in the last hack, we use the $wpdb object here, too, this time with the get_results() method. Once the comments have been retrieved by the WordPress database, we simply use a for loop to concatenate the comments into an HTML unordered list. The $pre_HTML and $post_HTML variables, initialized at the top of this code, allow you to define which content should go before and after the comments list. Sources:

How to: List most recent comments Huge Compilation of WordPress Code
1. Easily Prevent Comment Spam
The problem. Comment spam is such a pain for everyone. Akismet is a good solution, but why not block spammers outright instead of just marking their comments as suspected spam? This code looks for the HTTP referrer (the page where the request comes from) and automatically blocks the comment if the referrer is incorrect or not defined. The solution. Paste the following code in your functions.php file: function check_referrer() { if (!isset($_SERVER['HTTP_REFERER']) || $_SERVER['HTTP_REFERER'] == “”) { wp_die( __('Please enable referrers in your browser, or, if you\'re a spammer, bugger off!') ); } }

add_action('check_comment_flood', 'check_referrer'); That’s all. Once you’ve saved the file, your blog will have a new level of protection against spam. Code explanation. This code automatically rejects any request for comment posting coming from a browser (or, more commonly, a bot) that has no referrer in the request. Checking is done with the PHP $_SERVER[] array. If the referrer is not defined or is incorrect, the wp_die function is called and the script stops its execution. This function is hooked to WordPress’ check_comment_flood() function. This way, we can be sure that our check_referrer() function is called each time a comment is posted. Source:

Yoast.com
1. Keep WordPress Backwards Compatible With Versions Older Than 2.7
The problem. Released some months ago, WordPress 2.7 introduced a totally new commenting system, allowing you to thread comments and display them on separate pages. Although this is great, keep in mind if you are creating a theme for a client or for online distribution that many users still haven’t upgraded their installation to version 2.8 or even 2.7. This code allows 2.7+ users to benefit from the new commenting system, while keeping the old system functional for people with older versions. The solution. You’ll need two files for this recipe: the first is a WordPress 2.7 compatible comments file called comments.php. The second is a comment template for older WordPress versions called legacy.comments.php. Both of these files go in your theme directory. Paste this code in your functions.php file.
function legacy_comments($file) { if(!function_exists('wp_list_comments')) : // WP 2.7-only check $file = TEMPLATEPATH.'/legacy.comments.php'; endif; return $file; } ?> Code explanation. This code creates a function called legacy_comments(), which is hooked to WordPress comments_template function. Each time WordPress calls comments_template(), our legacy_comments() function is executed. If the wp_list_comments() function doesn’t exist, the code automatically loads legacy.comments.php instead of comments.php. Sources:

Making your theme’s comments compatible with WordPress 2.7 and earlier versions How to: make your comments template compatible with WordPress 2.7 and older versions
1. Display Most Commented Posts From A Certain Period
The problem. Number of comments is a good way to measure a blog post’s popularity and is a good filter for displaying a list of your most popular posts. Another great idea is to restrict a list of your most popular posts to a particular period, like “Last month’s most popular posts,” for example. The solution. Simply paste the following code where you’d like your most commented posts to be displayed. Don’t forget to change the dates values on line 3 according to your needs.
Code explanation. The first thing we did was send out an SQL query to the WordPress database using the $wpdb object. Once we got the results, we used a simple PHP foreach statement to display the most popular posts from a certain period in an HTML unordered list. Source:

How to: Display the most commented posts of 2008

Related posts You may be interested in the following related posts:

5 Useful And Creative Ways To Use WordPress Widgets Power Tips For WordPress Template Developers 10 Useful WordPress Loop Hacks Custom Field Hacks For WordPress 15 Useful Twitter Hacks and Plugins For WordPress Mastering WordPress Shortcuts 100 Amazing Free WordPress Themes For 2009

About the Author This guest post was written by Jean-Baptiste Jung, a 27-year-old blogger from Belgium, who blogs about WordPress at WpRecipes, about practical Web development tips at Cats Who Code and about Photoshop and Web design at PsdVibe. You can stay in touch with Jean by following him on Twitter. (al)

© Jean-Baptiste Jung for Smashing Magazine, 2009. | Permalink | 59 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: comments, CSS, hacks, twitter, wordpress

Design a Beautiful Website From Scratch

Wed, 29 Apr 2009 08:25:00 -0600

Have you ever wanted to design a beautiful website but just didn’t know how? To be honest, a few years ago, that happened to me too. While browsing the web, I saw so many nice looking websites and wished I had the skills to create such designs. Today I can and I’m going to teach you how to do so too! Essentially, it requires a few Photoshop skills and an eye for detail. Through this tutorial, I will point out these tiny details which make a website design look beautiful. Fire up Photoshop and let’s get going!

Step 1 - Download the 960 Grid System Template The designs I create are nearly all based on the 960 Grid System. So, before we begin we need to download the grid system Photoshop templates. You can find them on the 960.gs official website. Simply unpack the zip file and look for PSD templates. You will see that there are two different types of templates: one is 12_col and the other one is 16_col. The difference between these two are, as the name suggests, one is made with 12 columns and the other one with 16 columns. To explain it a bit more, if you have 3 boxes in your design you would choose the 12_col grid, because 12 is divisable by 3; or if you have 4 boxes in your design, you would choose either 12_col or 16_col grid because 12 and 16 are divisable by 4. If you follow this tutorial, you will see this in action. Step 2 - Defining the Structure

Before we open our PSD grid template and begin drawing, we first need to define the structure of our site. This is a bit more of a complicated structure because we have a layout inside a layout. You can see this exemplified in the image above. Step 3

After we’ve defined our site structure we’re ready to move on. Open your 16_col.psd template. Go to Image > Canvas size . Set the canvas to 1200px wide and 1700px high. Set the background color to #ffffff. Step 4

Now pick the Rectangle Tool and draw in a rectangle the full canvas width and about 80px high. Fill it with the color #dddddd. Step 5

Create a new layer above the rectangle and set Layer mode to Overlay. Ctrl+click the rectangle layer. Now the rectangle will be selected. Choose a 600px soft brush, set the color to white, and click a few times with the edge of the brush just a bit over the selection, like shown on the image. This way you create a nice, subtle light effect. Additionally you can link these two layers. Step 6

New layer. Choose the Rectangle tool again and draw in a thin dark grey rectangle, as shown in the image. Step 7

With the Rectangle tool selected, draw in a big box around 500px underneath the top rectangle. Make it 575px high and give it a Linear Gradient overlay from #d2d2d0 to #ffffff, direction -90, Scale 100%.

Step 8

Now we are going to create the same light effect as described in Step 5. We will be using this technique a lot; so next time I will just refer you to Step 5 for the effect.

Create a new layer above all the current layers. Ctrl+click the big rectangle. Choose a 600px soft brush, set the color to white, and click a few times with the edge of the brush just a bit over the selection, as shown in the image. Step 9

Create a new layer and draw in a big rectangle about 400px high. This one is used for our header. Fill it with a nice blue gradient from #2787b7 to #258fcd. See how subtle the color change is?

Step 10

Add a dark blue 1px line on the bottom of the header box, apply the Drop shadow effect. For drop shadow use Blend mode: Multiply, Opacity: 65%, Angle: -90, Distance: 1px and Size: 6px. Next, create a new layer above and draw another 1px white line under the dark blue one. This way we create sharp edges for our content box. Basically you can apply this border technique on every box in your design just with different colors. Step 11

Create a new layer, and with the Rectangle Tool, draw a 50px high rectangle in the top part of the canvas, just as shown in the image. This will be used for our navigation.

Apply a Drop shadow. Use the values shown in the image. Step 12

Time for the navigation. Use the Rounded Rectangle Tool and set the radius to 5px. Draw a rectangle, fill it with #f6a836, and apply the following effects:

Inner Shadow - color: #ffffff, Blend mode: overlay, Opacity: 60%, Angle: 120*, Distance: 7px, Size: 6px. Inner glow - Blend mode: normal, color: #ffffff, Size: 4px. Everything else leave default. Stroke - Size: 1px, Position: inside, color: #ce7e01.

Now select the rectangle with Ctrl+click. Go to Select > Modify > Contract and enter 1px.

Create a new layer above, set the Blend mode to Overlay and create the same effect described in the Step 5 using a smaller brush size this time. Then add the navigation text. I used Arial for navigation links, all caps and Antialias set to “none”. Step 13

Now let’s create the search box. With the Rounded Rectangle Tool, radius 5px, create a search box positioned on the right side of the grid layout and in the middle of the top gray stripe from Step 4. Add these layer styles:

Inner Shadow - color: #000000, Blend mode: Multiply, Opacity: 9%, Angle: 90*, Distance: 0px, Size: 6px. Stroke - Size: 1px, Position: inside, color: #dfdfdf.

I added the “search” text and a light gray “GO” button. This is how it should look.

So far we have a lot of layers and need to organize things a bit so we will create a new Layer folder and name it “search”. Select all layers that make the search field and just Click + drag inside the new folder. Later we’re going to organize other content inside the folders so we have a nice organized layer palette. Step 14

Now create a new layer and draw a “Sign Up” button the same way we created the search field - just half the width. Place it under the search field in the middle of the navigation stripe.

Again we’re creating the effect from Step 5.

Use a smaller soft brush size. In this case it was 45px. Step 15

After adding the logo and the Tagline this is how our site should look like now. Step 16

Now we’re coming back to our layer organization mentioned a few steps earlier. Create a new empty layer folder and name it “top_bar”. Move all graphics from the top of the layout inside this folder (logo, tagline, search field, sign up button, navigation and backgrounds).

Create another empty layer folder and name it “header”. This is where we will put our header graphics. This is how it should look. Step 17

Our header looks a bit plain right now so we’re going to add the same light effect everywhere else on the site. Select the header box (blue). Create a new empty layer above and set the mode to Overlay.

Pick a large soft brush 600px, color #ffffff and click a few times in the area under the navigation. Furthermore, to gain more depth, we can switch the color to black and do the same thing just in the bottom part of the header. Give it a try! Step 18

In this step I will explain to you how I created the reflection for the header images. Take two images of your choice, I used Safari screenshots of my two other templates, scale one down and place it behind the bigger one. Copy both layers, and with the Free Transform Tool, flip the first image and then the other one. Shift both images a few pixels down. Now make a selection from outside the bottom part to middle of the first flipped image with the Rectangular Marquee Tool. Go to Select > Modify > Feather and type 30px or more. You should have a selection similar to the shown in the image. Press the delete key a few times and you will create a nice faded reflection from the original image. Repeat this step for the second image.

Now to make those two images stand out a bit, create a new layer and set the mode to Overlay. Create the effect described in Step 5.

This is how our header should look after adding a nice tagline and some buttons. Don’t forget to put all these graphics inside the “header” layer folder to keep things organized here
Step 19

If you look at the final image preview, you can see that we have nice tabs in the content area. In order to create these tabs we’ll need to perform a few extra steps, but it’s definitely worth it. First, create a large rectangle shape with the Rounded Rectangle Tool. Make it 70px high and a radius of 10px or more if you wish. Now we have to get rid of the bottom radius and make a perfect corner out of it. Pick the Direct Selection Tool and click on the shape path. Click the vertical point and drag it down while holding the Shift key until it reaches the same level with the horizontal axis. So far so good but it’s still deformed. You see the little handle. Click on it and move it upwards to the point of the path.

Now we have created a perfect corner. This is how it should look. Repeat this step for the right bottom corner. Step 20

Pick the Line tool and set it to 1px. Step 21

Draw in gray separators while holding the Shift key. Step 22

Place some icons, headings, and a description for each tab. I used Ray Cheung icons available from - WebAppers.com. Usually one tab is always active and the others are inactive. To make this clear in our design, we need to find a way to accomplish this. I desaturated the other icons and reduced the opacity for the headings and text while keeping the first active tab colorful and bright. Step 23

To make the active tab more obvious, we’re going to give it a faded white background. To do this first select the whole object and then subtract from the selection to get only the first tab selected.

This is what your selection should look like.

With a smaller soft brush, paint in a white background. Step 24

Add the shadow. Create a dark gray rectangle behind the tabs, as shown in the image.

Add a vector mask by clicking the little icon in the bottom of the layer palette.

Set the color to black, pick a large soft brush, and start deleting parts of the rectangle. As a result, we get a nice fake shadow effect behind our tabs.

Finaly the attention to detail. Draw in a 1px gray line on the bottom of the tabs. Mask the layer again like described earlier and with a big soft brush delete the left and right end of the line. Now we get a nicely faded line that follows our shadow behind the tabs.

This is how our tabs should look. Step 25

It’s time to design the content for our first tab. We need a featured design image, a nice heading and some text. First we will create the featured image. I thought that it would be nice to break the edginess of the design by creating a nice stacked photos effect for our featured design image. To do this, draw a white rectangle with a 1px light gray border, and a very subtle drop shadow effect.

Now copy that layer and rotate it slightly with the Free Transform Tool. Do this one more time.

Import your featured image and place it over the white rectangles. Don’t worry if the image is flowing outside the boxes, we will fix that. Make a selection from the top rectangle, go to Select > Modify > Contract and insert 5px. With the featured image layer selected click the Quick Mask icon on the bottom of our layer palette. You will get nicely bordered image effect like shown in the image here.

This is how your layer order should look like. Step 26

Don’t forget to keep things organized. So create more layer folders and organize your palette. This is how I have done it.

By adding a nice heading, some text, and bullet lists, our web design work is finished. Let’s move on.

And again some layer organization. Step 27: Testimonials

I thought this one should be huge; so I’ve put this in a big box right after the main section. First draw a big light gray rectangle about 220px high. Give it a 1px gray border.

Then draw in another brighter rectangle by 10px smaller on all sides. Also add a 1px light gray border.

Finally add some text and we’re done! Step 28

It’s time for the footer. Draw a big 400px high, dark gray rectangle. Step 29

Add some light effect the same way as described in Step 5. Step 30

Next, draw a 10px high rectangle above the footer and add some subtle effect by adding two more lines on top and bottom like shown in the image. Step 31

Create the very bottom part where the repeated navigation will be placed. You can copy the rectangle from the top where the navigation is placed, move it down and make it about 40px high. Place it at the very bottom of your canvas. Please note that you may need to expand your canvas at this point so that all your graphics fit. If you need to do that, then go to Image > Canvas size and set the height to fit the entire layout. Step 32

Attention to detail again. Add a 1px white line above the footer navigation box to give it a nice border effect. Step 33

Add some footer content and separate it nicely within your grid. Step 34

Finally organize all your layers inside the layer folders. This is how I’ve done it. The Design

So there we go, the final design, with a couple of variations for different pages. The final PSD designs are, of course, on sale at ThemeForest.net. Final Thoughts I hope you have enjoyed this tutorial and have learned a few new techniques. Now, it’s your turn to create more great designs. Remember, with attention to detail you, will be able to design beautiful websites with just two or three Photoshop tools. What do you think?

The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

Mon, 27 Apr 2009 21:21:00 -0600

CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load. And if you haven’t heard of CSS sprites before, now is probably a good time to learn what they are, how they work and what tools can help you create and use the technique in your projects. What Are CSS Sprites? The term “sprite” (similar to “spirit,” “goblin,” or “elf”) has its origins in computer graphics, in which it described a graphic object blended with a 2-D or 3-D scene through graphics hardware. Because the complexity of video games has continually increased, there was a need for smart techniques that could deal with detailed graphic objects while keeping game-play flowing. One of the techniques developed saw sprites being plugged into a master grid (see the image below), then later pulled out as needed by code that mapped the position of each individual graphic and selectively painted it on the screen. Sprites were displayed over a static or dynamic background image, and the positioning of the sprite was controlled simply by the hardware controllers. The term was coined because the sprites seemed to “haunt” the display and didn’t really exist in the graphic memory.

The Pokemon Sprite Sheet, consisting of over 1000 graphic objects. Found here. You can click on the image for the larger version (thanks, Ryan!). Time passed, and at the beginning of the 2000s, when progressive Web designers started to seek alternatives to JavaScript-based rollover menus (with onMouseOver and onMouseOut effects), sprites saw a renaissance in Web development. With CSS, the simple implementation of sprites was possible, and it was much easier and clearer than its JavaScript-based predecessor. In 2004, Dave Shea suggested a simple CSS-based approach to CSS sprites based on the practice established by those legendary video games. In this case, multiple images used throughout a website would be combined into the so-called “master image.” To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed. Any hover, active or focus effects would be implemented using the simple definition of the background-position property for the displayed element. When the page is loaded, it would not load single images one by one (nor hover-state images per request), but would rather load the whole master image at once. It may not sound like a significant improvement, but it actually was: the main disadvantage of the onMouse effects is that JavaScript-based hover effects require two HTTP requests for each image, which takes time and creates that unpleasant “flickering” of images. Because the master image is loaded with the whole page only once with CSS sprites, no additional HTTP requests are needed for hover, active or focus effects (because the image is already loaded), and no “flickering” effect occurs. Consequence: CSS sprites reduce HTTP requests and the loading time of pages. This is the main reason why CSS sprites are often used on websites with heavy traffic, where millions of page impressions would need “only” a tiny fraction of what could otherwise be 30,000,000. Hence, CSS sprites are commonly used, particularly for navigation (such as for hover effects), icons and buttons. Where Are CSS Sprites Used? CSS sprites can be used in various settings. Large websites can combine multiple single images in a meaningful manner, creating clearly separated “chunks” of the master images – the purpose being to keep the design maintainable and easy to update. The large empty space between the images is often used to make sure that the text resizing in browser doesn’t cause side effects such the display of multiple images in the background. In fact, sprites usually work well in a pixel-based design, but they are hard to use in elastic (em-based) designs due to the restricted background-position-property. Essentially, the structure that sprites take depends on the trade-off between maintainability and reduced server load; thus, it varies depending on the project you are working on. Here are some inspiring (and not so inspiring) examples: Xing Xing uses various icons and buttons, as well as its logo, in the sprite.

Amazon Large, shiny and compact CSS sprites on Amazon.

Apple Apple uses CSS sprites for various states of its main navigation menu.

YouTube YouTube takes a vertical approach to its buttons and icons. The whole sprite is 2800 pixels in height!

CNN CNN uses a modest CSS sprite with its social icons.

Digg Digg has quite an esoteric sprite, with small arrows and brackets. The large empty space between the images is used to make sure that text resizing doesn’t display multiple images as the background image. You can explicitely define width and height in pixels, so that this problem does not occur – however, in this case the resized text will never break out of the defined box, thus possibly making the text unreadable. Consequently, you must be cautious when using spriting for buttons with variable text labels. For those buttons, you should define font size in pixels also. Or just use the large empty space in the sprite (thanks, daftie!).

Yahoo Yahoo has nice icons in its sprite, spread out equidistant from each other.

Google Google sticks to its minimalist design principle with its minimalist CSS sprite.

Dragon Interactive A design agency with a colorful, vivid CSS sprite for the navigation menu.

TV1.rtp.ptA huge colorful and qute chaotic CSS sprite on a site of a Polish TV-channel (thank you, António Manuel Cardoso!).

CSS Sprites are used to combine many frequently used graphic elements, such as navigation elements, logos, lines, RSS icons, buttons, etc. Conversely, they are not used for any kind content that is likely to change frequently upon release. Articles About CSS Sprites CSS Sprites: Image Slicing’s Kiss of Death The legendary introductory article about CSS sprites on A List Apart.

CSS Sprites: What They Are, Why They’re Cool And How To Use Them An illustrated article about CSS sprites by Smashing Magazine author Chris Coyier.

How Yahoo.com and AOL.com Improve Web Performance With CSS Sprites Some of the busiest websites on the Web use CSS sprites to save on HTTP requests. This article shows how Yahoo! and AOL use sprites to improve performance. Note: some devices (the iPhone being the most notable) apply sprites in a memory-intensive way, which slows the device to a crawl. What Are CSS Sprites? An introduction by Jason Cranford Teague.

Sprite Optimization Dave Shea ponders whether it actually makes sense to create large CSS sprites, combining all elements into a single image and then displaying them with the background-position property in CSS. Answer: No, do not over-complicate things. Instead, find a good compromise between quick loading time and maintainability.

Creating Easy and Useful CSS Sprites A detailed introduction to CSS Sprites by Ignacio Ricci. All files can be downloaded as well.

Fast Rollovers Without Preload A practical example of implementing fast rollovers.

CSS Sprites + Rounded corners Another example from practice, this one explaining how to display rounded corners using CSS Sprites.

CSS Image Sprites An extensive tutorial with examples, tips, suggestions and best practices. Optimize Your Website Using CSS Image Sprites This very detailed tutorial by Andrew Johnson explains what CSS sprites are, why they are important, how they work and how to implement them.

Animated GIF For CSS Sprites This article discusses one of the more bizarre uses of CSS sprites: as an animated GIF.

Image Sprite Navigation With CSS Learn how to create a simple menu with the hover effect.

Advanced CSS Menu Implement the hover effect with CSS sprites.

Creating and Using CSS Sprites A very basic tutorial about CSS sprites by David Walsh.

Screencasts about CSS Sprites How to Use CSS Sprites David Perel explains the basics of CSS sprites and how to use them in your website design. 10 minutes. Creating Rounded Buttons With CSS Sprites Continuing the above sprites tutorial, David shows how to create dynamic rounded-corner buttons with CSS. Exactly How to Use CSS Sprites In this screencast, Andres Fernandez shows how to use CSS sprites to improve loading time and decrease HTTP requests. How To Use CSS Sprites This screencast, Smashing Magazine author Chris Coyier shows how to use CSS sprites in practice, by taking what would have been eight different images and combining them into one. As an added bonus, he then expands on the idea with jQuery by building a little accordion widget. Faster Page Loads With Image Concatenation For complex web apps, the quantity and resulting latency of icons and images used can greatly affect page load times. And developers usually try to reduce, rather than increase, page load times for their sweet Web apps. CSS Image Sprites In 10 Minutes Another screencast that explains how to use CSS sprites for a navigation menu. CSS: Using Percentages in Background-Image This article explains the background-position property, which is essential to implementing CSS sprites. CSS Image Maps With CSS Sprites With CSS Sprites, the hover effect doesn’t have to be applied to the whole element. Using a negative background-position value, you can create pure CSS-based image maps. Below, you’ll find some techniques in which CSS sprites are used for this purpose. CSS Image Maps Using Sprites A basic example of a CSS-based image map with a negative background-position value. Try hovering over the image. Compare this with the classic example without CSS sprites.

City Guide Map Using Sprites Another example, with horizontally positioned hover areas.

Advanced Map Using Sprites A more advanced technique by Frank Manno.

CSS Sprites Techniques CSS Sprites 2 Dave Shea expands on the classic CSS sprites technique with jQuery. His technique allows for animation between link states, while still being fully degradable for visitors who do not have JavaScript enabled. CSS Sprites2 Refactored: Building an Unobtrusive jQuery Plug-In Joel Sutherland describes his jQuery plug-in, which cleans up Dave Shea’s function and allows for more control over the animation with less initial configuration.

Background Repeat and CSS Sprites CSS sprites are a great way to improve the loading speed of your pages. One of the problems you might face with sprites is how to deal with cases where the background repeats. The rule is pretty simple: if you want the background to repeat vertically (top to bottom), place the images in the sprite horizontally (left to right) and make sure the individual images in the sprite have the same height. For the opposite case, when you want to repeat horizontally, sprite vertically. CSS Sprite: Photoshop Script Combines Two Images for CSS Hover This article presents a simple JSX Photoshop script for creating image sprites, and you can also assign a keyboard shortcut to it.

Extending CSS Spriting Jennifer Semtner extends the classic CSS sprites technique to non-background images and discusses what to consider when using CSS Sprites for the design. Sliding Doors Meets CSS Sprites Combining the ideas behind Dave Shea’s CSS sprites and Douglas Bowman’s sliding doors technique, this post assumes you have a good understanding of Bowman’s article “Sliding Doors of CSS.” How to Preload Images When You Can’t Use CSS Sprites This article addresses the problem that occurs with CSS sprites when the user resizes text. The idea is to combine the images into two images, rather than one. Then you place the image being shown on hover as the background image of another element (preferably a containing element), positioned just off screen. JavaScript Sprite Animation Using jQuery Alex Walker combines visual jQuery effects with CSS sprites to achieve the “page turn” effect.

IE6, CSS Sprites and Alpha Transparency Julien Lecomte shows how to combine CSS sprites, PNG transparency and Internet Explorer 6 compatibility using the AlphaImageLoader hack. CSS Sprite Generators Data URI Sprites DURIS (Data URI [CSS] Sprites) is a new method to manage website’s background images. It’s aimed to replace classical CSS Sprites. The new technique allows you to apply any corrections to your make-up, allows you to minimize number of requests for design-related data that is used on the webpage and uses text (non graphic) format of image data presentation. It also solves all problems with scaling for background images and combines images of different types and axes of repetition.

Spritr This simple tool lets you upload multiple images and generates CSS code for the sprite. Sprite Creator 1.0 This tool allows you to upload an image and create the CSS code for selected areas of the sprite. CSS Sprite Generator A Drupal module for building CSS sprites. CSS Sprites Generator This tool allows you to upload multiple files and generate a sprite out of them. It also gives you the CSS code (the background-position value) for each image in the sprite. Projekt Fondue CSS Sprite Generator This generator lets you ignore duplicate images, resize source images, define horizontal and vertical offset, define background and transparency color, assign CSS class prefixes and various other things. It also supports many languages. The source code is available for downloading and is covered by a BSD license. Want to run a local copy? Well, you can do that, too.

SmartSprites A Java-based desktop application that parses special directives that you can insert into your original CSS to mark individual images to be turned into sprites. It then builds sprite images from the collected images and automatically inserts the required CSS properties into your style sheet, so that the sprites are used instead of the individual images. You can work with your CSS and original images as usual and have SmartSprites automatically transform them to the sprite-powered version when necessary. A PHP version is available as well. Open-source. Check also Chris Brainard’s Sprite Creator 1.0. Bonus: How Does The background-position Property Work? The background-position property, together with CSS specificity and CSS floats, is probably one of the most confusing and counter-intuitive of CSS properties. According to CSS specifications, the background-position takes two (optional) arguments: horizontal position and vertical position. For example: .introduction { background-image: url(bg.gif); background-position: [horizontal position] [vertical position]; } Using this property, you can define the exact position of the background image for the block-level element (list item li). You can use either % or px units (or mix both) to define the starting position (i.e. the upper-left corner) of the displayed part of the master image. Alternatively, you could use the following keywords: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right. Hence, in background-position: x% y%, the first value is the horizontal position, and the second value is the vertical position. The top-left corner is 0% 0%. The bottom-right corner is 100% 100%. If you specify only one value, the other value will be 50%. For instance, if you use, ul li { background-image: url(bg.gif); background-position: 19px 85px; }, … then the background-image will be positioned 19 pixels from the left and 85 pixels from the top of the list item element. As SitePoint’s reference article explains: “a background-image with background-position values of 50% 50% will place the point of the image that’s located at 50% of the image’s width and 50% of the image’s height at a corresponding position within the element that contains the image. In the above case, this causes the image to be perfectly centered. This is an important point to grasp — using background-position isn’t the same as placing an element with absolute position using percentages where the top-left corner of the element is placed at the position specified.” You can find a detailed explanation of the property in the article “background-position (CSS property)” on SitePoint. Related posts You may want to take a look at the following related posts:

53 CSS-Techniques You Couldn’t Live Without Powerful CSS-Techniques For Effective Coding 50 Extremely Useful and Powerful CSS Tools CSS Float Theory CSS Specificity

(al)

Post tags: CSS, sprites, techniques, Tutorials

How to skin HTML form elements in seconds

Sun, 26 Apr 2009 08:59:00 -0600

In the past weeks I received some requests from my readers which asked to me to suggest a simple way to skin HTML form elements. There are a lot of ways to do that and a lot of posts with interesting resources about this topic. But if you want to save time and obtain a nice result I suggest you to use jqTransform or NiceForms.Both scripts are very useful and simple to use. If you want to use a "native" script which doesn't use an external JS framework (such as jQuery or MooTools) I think a good choice is NiceForms otwerwise, if you use jQuery, a good alternative is jqTransform. Take a look how they work.1. jqTransformjqTransform is a jQuery styling plugin wich allows you to skin quickly form elements in a very easy way. The only thing you have to do is to add a javascript inclusion to this plugin in the header section of your web page, create your form and add two lines of JS code to apply the transformation to your form.Use this code to add a javascript inclusion to jqTransform:...now create a form with class property equal to jqTransform:

30 Exceptional CSS Navigation Techniques

Thu, 16 Apr 2009 12:36:00 -0600

We’ve seen innovative ways in which designers and developers have used CSS to innovate upon its shortcomings. Here, you’ll find some of the best ways to use CSS for your website navigation. You’ll find a variety of techniques that truly showcase the capabilities of CSS. In this article, you will find a collection of excellent navigation techniques that use the CSS to provide users with an impressive interface. 1. The Menu menu

This another great CSS menu Stu Nicholls that’s unique - hovering over a menu item reveals a submenu. If you want get started with this menu just simple view the source code. Demo in page. 2. Pure CSS hover menu View Demo In this CSS technique, you’ll learn to create a vertically-oriented CSS hover menu that reveals a submenu when a menu item is hovered on. 3. Matte CSS Menu View Demo Matte is a simple CSS menu with rounded corners using two small images only from 13styles. It is maintained by David Appleyard who has lots of simple and advanced CSS-based menus. 4. CSS Blur Menu View Demo This CSS technique shows you a method from creating a menu that blurs sibling menu items when you hover over an item. 5. CSS Navigation with Glowing Icons View Demo This beautiful CSS menu technique can be created by following along this extensive step-by-step tutorial. 6. CSS Sliding Door using only 1 image View Demo This slick CSS menu is based on the Sliding Doors technique but only uses one image. 7. Navigation Matrix Reloaded View Demo This stylish navigation menu technique uses a CSS sprite. 8. CSS Horizontal Menu View Demo Ian Main provides a great set of free CSS menus that are stylish and easy to use. 9. Woody CSS Menu

Woody is a pre-made CSS menu that’s ready to use and has been tested in IE6, IE 7, Firefox, Opera, Safari, Chrome. Demo in the page. 10. Advanced CSS Menu

Advanced CSS Menu was created by Nick La and uses an advanced (extraordinary) list menu utilizing the CSS position property. Demo in the page. 11. Simple Yellow Tabbed

This menu is from CSS Menu Generator which has more free high quality menus. Demo in the page. 12. Vimeo-Like Top Navigation View Demo This CSS-based navigation menu is based on the Vimeo primary menu. 13. Apple Like Colorful CSS Menu

Learn a technique for mimicking Apple’s image rollover CSS menu by following along this menu tutorial. Demo in page. 14. CSS Hoverbox

Inspired by the Hoverbox Image Gallery technique developed by Nathan Smith, CSS Hoverbox leans on the background-position CSS property to superimpose rollover images on top of neighboring menu items. Demo in page. 15. Big CSS Box

This is an experimental CSS menu that allows you to create a scaling menu that adjusts depending on the browser’s width. Demo in page. 16. Simple CSS-based drop-down menu View Demo This is a very basic CSS-based drop-down menu that’s excellent for trying to grok the technique involved in creating drop-down menu that doesn’t require client-side scripting. 17. Two Level Horizontal Navigation in CSS View Demo Veerle Pieters provides a CSS menu and tutorial created using text-indent CSS property. 18. Uberlink CSS List Menus View Demo This CSS navigation bar looks and behaves like an image-swapping menu. 19. CSS-Only Accordion Effect View Demo In this technique, you’ll witness a method for creating a CSS-based accordion menu. 20. Tabbed Navigation Using CSS

Here is another excellent method for creating a module tab interface based purely on CSS. Use the tabs in the page to learn about the instructions on how to implement this technique. 21. CSS Mini Tabs (the UN-tab, tab) View Demo This CSS menu on the popular web design agency SimpleBits shows a way for creating mini tabs. View the source code on the demo page to learn how it works (the code is inline and formatted well for readability for your convenience). 22. Drop-Down Menus, Horizontal Style View Demo This A List Apart CSS menu technique is for a fly-out submenu that appears on the right of the top-level menu, leveraging the position: absolute CSS property to move the submenu to the appropriate level. 23. List Into a Navigation Bar View Demo Roger Johansson of 456 Berea Street shows us the basic principles of turning an unordered list into a navigation bar - it’s a great starting point for beginners to learn about building a semantic HTML structure and then styling it with CSS. 24. CSS Tabs with Submenus

This CSS menu technique will allow you to create CSS tabs that have submenus for a two-level hierarchy. Demo in page. 25. CSS Block Navigation Menu

This CSS menu technique allows you to create a navigation menu that has item with descriptions. Demo in page. 26. XHTML & CSS Sprite Navigation View Demo This stylish CSS sprite menu technique has three states: idle, hover, and clicked. 27. XHTML CSS Tabbed Menu View Demo Learn how to create module tabs without the use of client-side scripting. 28. Cool, Simple, Horizontal CSS Menu View Demo Learn to create a straightforward technique for creating a CSS based menu. 29. CSS Menu with Descriptions View Demo This technique showcases a method for creating a menu that expands when hovered upon. 30. CSS Hover Button View Demo Create CSS button-style navigation menu by checking out this excellent tutorial. Related content

Innovative (and Experimental) CSS Examples and Techniques CSS Tip #1: Resetting Your Styles with CSS Reset Structural Naming Convention in CSS Six Questions: Eric Meyer on CSS3 Related category: CSS, Web Design

About the Author Kawsar Ali is a web designer, graphic designer, and wannabe photograper based in NY, U.S. He’s also the founder of Desizntech,a site to find tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter or at his Personal Website.

Examples and Tips for Great HTML/CSS Formatting

Wed, 15 Apr 2009 21:41:00 -0600

An overlooked aspect of websites is the formatting of HTML and CSS documents. This affects validation, SEO, and visual ease of use. Visual ease of use is the last thing most authors tend to keep in mind, but it’s still very important. If you’re building a template for a client, or to sell on ThemeForest, it is important that it’s visually formatted properly. Here are some examples of well formatted HTML and CSS. HTML Use the Strict DOCTYPE (DTD) whenever possible. If you’re beginning a new project, don’t use Transitional. You won’t be using tables for layout; so Transitional isn’t necessary, and the Strict DTD is up to standards.

You’ll notice that I’ve moved the meta http-equiv charset above the title. The title should go above everything else and W3C even puts this meta tag below the title in their example template. This meta tag however, should be above the title so that the browser knows what charset it’s working with before reading any other content to be displayed (such as the title).

Encoded Characters Make sure you use HTML encoded characters, including URL’s.

Alt Tags Make sure you’re using the “alt” tag in your images. The “alt” tag stands for alternative text and is displayed if your image is unavailable; it’s used by search engines for image descriptions and accessibility.

Properly Nest Tags Make sure your tags are properly nested. Inline elements, for things like links, should go within block elements - such as headings.

Tags should also be closed in the order they are opened as well as contained properly.

External Assets Make sure that your CSS and JavaScript is external. Try to keep your HTML files simple and free of any unnecessary code. For JavaScript, it isn’t as big of a deal - especially for a small block of code - but if it’s becoming complicated, just put it in an external .js file. Also make sure that your JavaScript files are linked after your CSS files. You want your styles loading before your JavaScript runs. * Manager’s Note: If possible, consider placing your Javascript file just before the closing body tag.

Indentation Indent your markup so that it’s easy to navigate and read. When other people look over your files, it can be much more work to navigate through markup that has no indentation. Your goal should be to make it as easy as possible for whoever may be editing or reading your markup. This is a major pet peeve of mine as I typically find myself spending far too much time fixing poorly formatted markup from someone else’s project.

Commenting Use HTML comments to indicate important notes, sections, or the end of an element. At first, the extra comments appear to clutter the basic markup, but once you load in all of the content, these comments can be a major time saver and help others who may edit the files later.

Markup Order Place your markup in a logical order in relation to the design. If your sidebar is on the right and your main content is on the left in your layout, put the markup in that order.

Validate Your Files Validate your files! Okay, this isn’t a formatting tip but this seems to be forgotten far too often. A store doesn’t sell products without quality assurance; so why would you sell your work (the files you created) without double checking to make sure you’ve done it correctly?

http://validator.w3.org http://jigsaw.w3.org/css-validator/

CSS Just as you would with HTML, use CSS comments to indicate important notes and sections. You might also want to separate your CSS pertaining to layout from your typography. For simple sites, this may not be necessary, but when you begin getting into more complicated sites, it can be a huge time saver.

There are several ways to format CSS; much of it comes down to preference. When I work with CSS files, I use the majority of the width of my screen - so I prefer single-line formatting. Many others prefer multi-line or a cross between the two. Many applications have built in features or plugins that allow you to change the formatting of existing CSS documents with relative ease. Here are some examples of the formatting types which also include proper indentation. Single-Line This is single line formatting (what I prefer). When you use shorthand CSS this method of formatting works out quite nicely I think.

Multi-Line This is multi-line formatting.

Mixed This is a cross between multi-line and single line formatting. The short rules are on a single line while the long rules are on multiple lines.

Short-Hand CSS Use shorthand CSS to keep your CSS slim and clean. The first example is normal CSS and as you can tell, it takes up a lot of space. The second example is the shorthand version of the first CSS example. Then there are three more examples showing different options. The first, on line 77, means a margin of 10px on all sides. The second, on line 78, means a margin of 10px on the top and bottom but 15px on the left and right. The last one, on line 79, means a margin of 10px on top, 15px on the left and the right, then 12px on the bottom. This rule can be applied to many more CSS rules as well. If you’re not familiar with it, set aside some time and learn, because it will greatly reduce your CSS bloat and work time. I also want to point out that if you have a value of “0px”, you don’t need to include “px”, just use “0″.

Conclusion The key to beautifully formatted markup is organization. Just like you would organize the files in an office, for school or for something else, you should organize the markup so that you can find and edit sections quickly. Use visual formatting as well as logical separation, placement, and naming. This way, the work you do will be high quality and ready for anyone else. Your clients and buyers will thank you - and you’ll be thankful yourself. Also, remember to validate your files!

http://validator.w3.org http://jigsaw.w3.org/css-validator/

Subscribe to the Theme Forest RSS Feed.

5 Must Know Web Design Polishing Techniques

Mon, 06 Apr 2009 02:02:00 -0600

There are a range of simple techniques that can be employed by web designers to add the finishing touches to a website design, giving an extra level of detail that makes the design jump from the screen. Jacob Cass takes a look at five of these polishing techniques that can be easily implemented in your next design project to give dramatic results.

First and foremost, this article is not for advanced web designers, as you will more than likely know these tips but you may be surprised by one or two tips, who knows? These tips are focused on making your website more ‘polished’ which I will explain by outlining some techniques I have used to create this chocolate gift basket website. 1. Use Anti Aliased Text

Something that is often over looked when designing for the web is the use of Anti-Aliasing in your image based text. For those who don’t know, anti-aliasing is the technique of minimizing distortion artifacts. There are a few ways to minimize this distortion in your text but the best way is to make use of your ‘Character’ panel. You can choose between None, Sharp, Crisp, Strong and Smooth. The best way to see what works best is to experiment as different fonts and sizes will yield different results however the sharp setting usually prevails in most cases. 2. Use Subtle Contrasting Stroked Borders

Something that really makes a difference in making a website pop is the use of 1 pixel stroked borders and lines. These stroked borders really add that extra crispness to the design as it gives extra contrast to the surrounding elements and gives the design more depth. Notice the zoomed-in screenshot above; see the inner purple lines that run alongside the inside of the boxes? You can add these 1 pixel borders by using your stroke option found in the ‘Blending Options’ or ‘Layer Styles’ panel. This technique also works great for large text. 3. Use Subtle Gradients

Gradients are popping up everywhere in web design and for a reason - they add depth and real aesthetic to the design. Unlike print design where gradients seem flat, on the screen they make a design come alive. Notice the slight dark to light purple gradient in the screenshot above? Also take note of the slight transparency. These effects give the design a new dimension, making the image come off the screen so to speak. Use the ‘Blending Options’ or ‘Layer Styles’ in Photoshop to create these nice subtle (emphasis on subtle) effects. 4. Use A Grid

Although it may sound like basic knowledge, I know for a fact that not all designers use grids however they are extremely useful and in my opinion, vital. Alignment and spacing in web site design creates order, organizes the page and groups parts of the website for easy navigation. In the screenshot above you can see the guidelines in place ensuring everything is aligned (the grid template is from http://www.960.gs). Notice how the logo and all of the text is left aligned? Also, take note of the even spacing around the boxes and text. Use the guidelines in Photoshop to ensure all of your elements are aligned which can be done by dragging ‘rulers’ from your rulers tab. Press Ctrl+R to turn rulers on. 5. Use Levels, Curves & Unsharp Masking

In web design, photos, icons and images are usually quite prominent so you should ensure that they are of the utmost highest quality. Check the color balance, sharpness and contrast of each image and make certain that it balances with the rest of the page and other images. A good way to do this is to make use of Photoshop’s ‘Levels & Curves‘ & ‘Unsharp Masking‘ tools. Click on the links provided to show how to do this - these functions go beyond the scope of this article. Anyway, hope these tips help in polishing off your next website. Do you have any other not so well known web design polishing tips? Similar Posts

Line25 Sites of the Week for April 3rd 2009 How to Create a Lifestream of Your Online Activities Line25 Sites of the Week for March 27th 2009 Line25 Sites of the Week for March 20th 2009 The Harsh Truth About Life as a Designer

Learn How to Style Articles for Print and Email

Sun, 05 Apr 2009 04:00:00 -0600

When designing websites, a commonly desired feature is the ability to dynamically print or email any section of a webpage. Unfortunately, this idea is usually scrapped later in the project due to a lack of time or knowledge. Formatting the text for printing is more difficult than it might initially seem. Today, we will use JavaScript to automatically search for certain page elements and format them correctly for a printing.

Objectives: At the end of this tutorial, we will have accomplished the following:

Use jQuery to print or email any section of a page automatically when a certain element is clicked. Format and change the style to optimize for print or email. Add variables to the email version (To, From, Message, etc.)

The Page

What’s Wrong With This? Wow…that page is colorful. I agree - it’s not the greatest color scheme in the world. This design was definitely not designed for print. Although the background blue will not print out on most printers, the printer will just make it disappear. This will mess up the rest of the design though because now the bright orange and green text will print on a white background. There is no easy way for a user to print out a nice black and white formatted article from this page, short of copying it into a word processor and formatting it themselves. Keep The Design, Fix The Problem One solution might be to provide a print stylesheet, as Tuts+ has done. This would work if there was only one article on a page. Unfortunately, this example is in blog format. This means that there are several articles on a page; and chances are the user only wants to print out one article. We are going to use jQuery to allow the user to click a link after each article that formats the article and allows them to print or email it.

HTML for This Page The HTML is rather simple for this page. We’ll add a couple of standard classes: One to signify a section to be printed/emailed (.printSection), one to signify the area that contains the links to print or email (.printControls), a class for all print links (.printControl), and a class for all email links (.emailControl). Notice how we also linked to Google’s minified file. This allows us to use jQuery later.

Print | Email jQuery Plugin

This is a Heading

Article Text

Print Section

Email Section

This is a Different Heading

Article Text

This is Another Heading

Article Text

This is a Heading Again

Article Text

6 Interesting online presentations for web developers

Sun, 22 Feb 2009 12:59:00 -0700

If you are looking for free resources to learn Ajax, PHP, CSS and JavaScript take a look at this collection with six interesting online presentations about these topics. The list includes a short introduction to Ajax, how to write modular CSS code, PHP Object Model fundamentals and an overview about the most popular JavaScript libraries.1. Ajax 101 | WorkshopAuthor: Bill Scott | This presentation on SlideShareIntroduction to programming with Ajax. Covers XMLHttpRequest, XML, JSON, JavaScript, HTML, CSS, Dom Scripting, Event Handling with some examples from YUI library.2. Modular CSSAuthor: Russ Weakley | This presentation on Slide ShareA clearly explained modular system that allows you to hide and show CSS rules to specific browsers without the need for extensive hacks or workarounds.3. Understanding the PHP Object ModelAuthor: Sebastian Bergmann | This presentation on SlideShareThis talk will give an overview of PHP's object model, covering both basic OOP concepts such as interfaces, classes, and objects as well as PHP's “magic” interceptor methods.5. jQuery in 15 minutesAuthor: Simon | This presentation on SlideShareA short introduction to jQuery in particular about functions, collections, grabbing values and chaining.6. JavaScript Library OverviewAuthor: Jeresig | This presentation on SlideShareAn interesting Overview about the most popular JavaScript libraries (jquery, prototype, Scriptaculous...) for web designers.

CSS Reset

Mon, 16 Feb 2009 04:42:00 -0700

It’s a good idea at the start of writing your CSS code to reset the CSS across all browsers to ensure that your page renders more or less the same. By default different web browsers use different values for margins, padding, or line heights. A CSS reset script will ensure that most browsers will render your site identically, without the need to individually bug fix incorrect CSS properties.

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,

pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Separate your style sheets IE6 is like a bad word in the web design world simply because the browser is outdated and not up with todays web standards, however it’s here to stay for a while yet due to many corporate companies refusing to upgrade to IE7. Its a good idea to separate your style sheets and put your IE6 and 7 CSS work arounds in different style sheets, you can then use a simple ‘if’ statement to target the relevant browser like below.

5 Ways to Instantly Write Better CSS

Mon, 16 Feb 2009 02:00:00 -0700

Sure, anyone can write CSS. Even programs are doing it for you now. But is the CSS any good? Here are 5 tips to start improving yours.

Reset

Photo by redux

Seriously, always use a reset of some sort. Whether you are using the Eric Meyer Reset, the YUI Reset, or your own custom reset, just use something. It can be as simple as removing the margin and padding from all elements: html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; } The Eric Meyer and YUI Resets are awesome, but to me, they just go too far. I feel like you end up resetting everything, and then redefining a lot of properties on the elements. This is why Eric Meyer recommends that you should not just take his reset stylesheet and drop it in your projects if there is a more effective way of using it. Tweak it. Build on it. Make it your own. Oh and please, stop this: * { margin: 0; padding: 0; } It takes more time to process, and what do you think should happen to a radio button when you remove the padding? Form elements can sometimes do some funky things, so it may be best to just leave some of them alone. 2. Alphabetize

Photo by kvh

A Little Quiz Which example would you think is faster to find the margin-right property? Example 1 div#header h1 { z-index: 101; color: #000; position: relative; line-height: 24px; margin-right: 48px; border-bottom: 1px solid #dedede; font-size: 18px; } Example 2 div#header h1 { border-bottom: 1px solid #dedede; color: #000; font-size: 18px; line-height: 24px; margin-right: 48px; position: relative; z-index: 101; } You can’t tell me that Example 2 isn’t faster. By alphabetizing your properties, you are creating this consistency that will help you reduce the time you spend searching for a specific property. I know some people who organize one way and others who organize another, but at my company, we made a consensus decision to all organize alphabetically. It has definitely helped when working with other people’s code. I cringe every time I go into a stylesheet where the properties are not sorted alphabetically. 3. Organization

Photo by allyaubryphotography

You should organize your stylesheet so that it is easy to find things and related items are close together. Use comments effectively. For example, this is how I structure my stylesheets: /*****Reset*****/ Remove margin and padding from elements

/*****Basic Elements*****/ Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.

/*****Generic Classes*****/ Define styles for simple things like floating to the sides, removing a bottom margin on elements, etc Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently

/*****Basic Layout*****/ Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site

/*****Header*****/ Define all elements in the header

/*****Content*****/ Define all elements in the content area

/*****Footer*****/ Define all elements in the footer

/*****Etc*****/ Continue to define the other sections one by one By using comments and grouping similar elements, it becomes much quicker to find what you are looking for. 4. Consistency

Photo by sailor_coruscant

Whatever way you decide to code, stick with it. I am sick and tired of the whole 1 line vs. multiple lines for your CSS debate. There is no debate! Everyone has their own opinion, so pick what works for you and stick with it throughout the stylesheet. Personally, I use a combination of both. If a selector is going to have more than 3 properties, I break it to multiple lines: div#header { float: left; width: 100%; } div#header div.column { border-right: 1px solid #ccc; float: right; margin-right: 50px; padding: 10px; width: 300px; } div#header h1 { float: left; position: relative; width: 250px; } It works for me because 3 properties is about what fits on 1 line in my text editor before wrapping to another line. So just figure out what works for you and be consistent. 5. Start in the right place

Photo by odolphie

Don’t you dare touch your stylesheet until you have written your markup! When I am preparing to slice a site, I go through and mark-up the entire document from the opening body tag to the closing body tag before even creating a CSS file. I don’t add any superfluous divs, ids, or classes. I will add some generic divs like header, content, footer because I know these things are going to exist. By marking up the document first, you won’t run into such diseases as divitis and classitis, which can sometimes be fatal! You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve. Utilize CSS’s descendant selectors to target children elements; don’t just automatically add a class or id to the element. Just remember, CSS is worthless without a well formatted document.

*Editor’s Note: I can’t stress this point enough. As Trevor said, don’t even touch your CSS file until the markup is 100% complete.

Conclusion These are just some of the tips that help me to write better code. This is by no means the end of the list. As I come up with others, I’ll share. What tips do you have for writing better CSS?

SitePoint’s Andrew Tetlaw on Styling html and body tags

Fri, 13 Feb 2009 01:59:00 -0700

If a page has a background different from it’s content’s background, like most people, I usually begin building a page by styling the body tag with one background and a div container where the content would go with another background. SitePoint’s Andrew Tetlaw wrote up a pretty awesome article on making use of the html tag along with the body tag so I won’t have to add redundant tags for backgrounds. The Take Away If you didn’t head over to Andrew’s article to learn the ins-and-outs of his explanation, which I think you should because you’ll understand why you’re using this code, here are the two main things I learned: Adding a background image to the html and body elements works fine, and you can use it in place of multiple background images that only Safari currently supports.

And… There’s one big gotcha though: if you need to use absolute or relative positioning for elements inside the body element. I’d assumed that since all elements obtain a positioning context from the body element by default, if I centered the body element the default positioning context should adjust accordingly. I was wrong! The default positioning context remains fixed to the viewport; you have to add position:relative; to the body style to create a new positioning context. The Code So, you end up with this awesome code:

1 2 3 4 5 6 7 8 9 10 html { background-color: #333; } body { background-color: #fff; width: 750px; margin: 0 auto; position:relative; }

Thank you Andrew! I’ve learned a lot from your article.

Exactly How to Use CSS Sprites

Mon, 09 Feb 2009 13:06:00 -0700

For Day 2, Andres will be teaching us how to use CSS sprites to improve load times and decrease the number of HTTP requests. As always, feel free to ask any questions in the comments area.

Ultra small code to drag everything in HTML pages

Sun, 08 Feb 2009 13:18:00 -0700

A frequent question I receive from my readers is about how to implement a simple script to drag elements in a web page. So in this post I want to illustrate the simplest method I know and use to drag everything in HTML pages, using just three rows of Javascript code.In this post I provided a very basic script quick to reuse and customize in your web projects (in the live preview I added some little additional features respect the content of this tutorial). This is the result: Download this tutorial Live previewHTML code: HTML code is very simple. You have to add a main layer with an ID (I used "draggables") and some DIV layers inside that layer. In this way all layers contained inside the layer "draggables" will be draggable when you select them. This is the structure:Copy and paste this code in your page:

Some content Here...

JavaScript code: Now take a look at this simple code which enable drag features. Before all add a link to MooTools farmework in the tag of the page:Now, copy and paste this simple unobtrusive code:Simple no? Just in three rows! In this way when you click on a div element contained inside the layer #draggables it will be draggable. In this tutorial I used DIV layers for my draggable elements but you can use every tag you want (p, h1, h2, ul, li....). The only thing you have to change is HTML code and DIV - with the tag you use (p, h1, h2, ul, li....) - in this line:$('#draggables div').each(function(drag)You can also add a custom style to your draggable elements using a simple CSS class I called "drag". For example, change the previous code HTML with the following:

Some content Here...

...and CSS code could be something like this:.drag{border:solid 6px #DEDEDE;background:#FFF;width:200px;height:150px;...}That's all! Try it and download the source code ready to use in your porject. Download this tutorial Live preview

13 iPhone Apps for Graphic Designers

Fri, 06 Feb 2009 11:16:00 -0700

If you’ve found a greater purpose for your iPhone besides calling or Googling directions, then you’d probably like to explore what your iPhone can offer you in the realm of graphic design. I’ve compiled a collection of the most useful 13 iPhone apps for graphic designers that I’ve come across. Each contributes and offers a unique ability to aid you on your journey through graphic design. We’ll be taking a look at applications that help with task management, enhance photos, sketching and a whole lot more. As usual, feel free to add your comments below and let us know which ones you like best and which ones you use. 1. Palettes

Palettes is a great app that allows you to create color schemes. You’re able to sample colors from websites, photo albums stored in your iPhone, and more. You can also import and export palettes to Photoshop. Grab colors while you’re viewing a picture, a web page, or anything else on your iPhone. This can come in handy, for example, if you visit a website and find a color scheme that’s extremely appealing, with Palettes you’ll be able to introduce yourself to the exact colors used. 2. Omnifocus

OmniFocus: Because task management is important for any graphic designer (despite the unhealthy managing many of us take part in), I’ve decided to include OmniFocus, a standalone application or a conjuncture app that syncs to your Mac. Set due dates for your latest projects, or a reminder that you need to submit your artwork soon. If you’re using it in conjunction with the Mac app you can also send yourself todo’s, notes, or quick memos through email and it automatically adds them to your OmniFocus inbox. 3. CameraBag

CameraBag: This app allows you to simulate several different camera styles in a unique way. For example, you can take a picture of an individual and apply a wide range of effects to that specific photo. You could apply a fisheye lens effect, an infrared effect, a simulated cinema effect, a widescreen effect, and other effects that mimic the style of old cameras as well. 4. Pixelpipe

PixelPipe enabled you to share a load of photos through your iPhone to over 50 supported sites such as Twitter, Flickr, MySpace, YouTube, Tumblr, WordPress, and FTP sites. The way this works is once you find a picture on your iPhone or on a site, you can then simply upload them to the sites mentioned above (and more) in an instant. 5. CliqCliq

CliqCliq: Most of us use CSS, HTML, or Flash in order to design, however, we need something that can give us the exact match of the colors we’d like to utilize. CliqCliq allows you to find the exact colors you wish to use and immediately converts them to a variety of scales and formats. Integrate your iPhone camera and automatically extract colors with this simple palette app. 6. ZeptoPad

ZeptoPad is a sketch pad tool for your iPhone. You can sketch, design, plan, and use your finger as a pencil to draw. You won’t be limited by screen space many times as you can enlarge your screen whenever you need to. You’re also able to cut and paste pictures, texts, and graphics onto your sketch pad to later edit and use. 7. ColorExpert

ColorExpert makes it easy to grab, identify, capture and showcase your chosen colors. If you find yourself looking at a picture or graphic art and you’d like to use this color scheme in your design, then you can simply click the ColorExpert button on your iPhone and find out the shade, color scheme, and palette you would like to match. You can later email your findings to yourself for desktop use, a friend, or to a client as well. 8. iBlueSky

If you’re on the go and ideas start flowing into your mind on your current or future project then you can use iBlueSky to map your brainstorming path while never forgetting to feed your creative side. Create a collection of ideas, thoughts, and suggestions, and then email them in PDF or PNG formats. You can also print a hard copy of your brainstorming in PDF format as well. This is a video that elaborates on the uses and further features of this mind mapping app. 9. Caliper

Caliper is a nifty measuring tool that like its names states uses caliper like jaws to measure objects. You can quickly and independently move the upper and lower jaw of the caliper with the swift move of a finger. This app takes measurement in pixels, inches, and centimeters. 10. iPhlickr

iPhlickr is great if you’d like to instantly browse the Flickr archive. All you have to do is go to the iPhlickr website (http://www.chandlerkent.com/iphlickr/#_searches) on your iPhone and begin to browse photo albums and any graphic on the Flickr site as well. You can access your photo album and search Flickr users too. 11. RulerPhone

RulerPhone’s “motto” is that you can measure anything that you’re able to take a picture of. Convert your phone into a tape measure and take snaps of items you’d like to find out their sizes. Take a picture of a frame, window, silhouette, couch, or even a car and quickly find out the size of that item. Here’s how it works, once you have the picture taken, you position and align the arrows to the area where you’d like to find out the measurements of. Once these two steps have been knocked out you’ll be able to instantly reveal the objects measurement by dragging the ends of the virtual measuring tape to configure your desired distance. 12. Photobucket

Photobucket allows you to upload all of your photos to Photobucket and share them with your colleagues or clients all through your phone. You’re able to send any image through email, Instant Messaging, Facebook, and several other social networking and blogging sites. 13. Dexigner

Dexigner News & Events: This application allows you to view the latest news, events, exhibitions, conferences, and competitions having to do with anything regarding design. Grab design news and stay up-to-date with breakthroughs at design events and competitions. It’s like your own mini design portal all on your iPhone. You do not need to download any software, all you need to do is navigate the developers site through your iPhone. Do you use any other apps on your iPhone that simplify your life as a designer? Please share your favourites with everyone…

Building A Login App

Thu, 29 Jan 2009 16:14:00 -0700

For today's massive video tutorial, we'll be working with sessions, classes, prepared statements, and mysqli to build a login system for a small site.

50 Useful Design Tools For Beautiful Web Typography

Tue, 27 Jan 2009 21:00:00 -0700

By Noura Yehia and Smashing Magazine Editorial Team Typography is elegant when it is attractive and communicates the designer’s ideas. When chosen wisely and used carefully, it can be very effective in supporting the overall design. Designers are always exploring different techniques with type: some use images or sIFR to produce very beautiful typography, while others prefer CSS alone to get the typography just right. Today, we will look at 50 most useful typographic tools, techniques and resources for creating effective and expressive designs. We will also look at some hands-on typography tools that help designers and developers learn how to style their Web content, test it interactively and see the changes instantly. These tools are great for experimenting with different font types for your website. Below we cover typographic tools, useful typographic references, font browsers, typographic CSS- and JavaScript-techniques, hyphenation techniques, sIFR tools and resources, grids and related tools, free and commercial fonts, a guide to Web typography, examples of great Web typography. Please feel free to suggest further tools and resources in the comments to this post. And if you like this post please feel free to subscribe to our RSS-feed and follow us on Twitter . You may want to take a look at the following related articles:

50 Extremely Useful PHP Tools 50 Extremely Useful CSS Tools

Typographic Tools Instead of doing your own testing, use the useful and time-saving tools below. They’ll help you play with typography and make choices by giving you a real-time preview of many of the available CSS font properties. HTML IpsumA useful little website created by Chris Coyier. It provides you with the standard Latin text already in HTML tags. Clicking on any of the blocks automatically copies the text to your clipboard!

TypechartTypechart lets you flip through, preview and compare Web typography while retrieving the CSS. You can browse different typographic styles. Each style corresponds to a style ID, which allows you to annotate prototypes and retrieve the CSS while coding. Another useful feature is that you can compare Windows (ClearType) rendering with Apple font rendering.

TTFTitles WordPress PluginThis plugin lets you use images to replace the titles of your posts, thus circumventing the problem of guessing what fonts your end-users might have installed (via hyperdjango).

FontstructFontStruct is a free font-building tool that lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

abcTajpu Firefox ExtensionType in accented letters, international characters or symbols into Firefox or Thunderbird, either simply by using a context menu (there being support for many languages), or quickly by keyboard macro (you can even define your own).

PXtoEMThis tool converts pixel-units to em-units using the 16px browser default size (via @briancray and @CasJam on Twitter).

Em CalculatorEm Calculator is a small JavaScript tool that helps you make scalable and accessible CSS design. It converts sizes in pixels to relative em units, which are based on a given text size.

CSSTYPECSSTYPE v2 lets you preview your text as you modify it. You can set the font-family, size, color, letter-spacing, word-spacing, line-height and other properties. The CSS code can be generated easily once you are satisfied with the previews.

CSS-Typoset Matrix and code generatorThis tool (unfortunately, only in German) calculates font-sizes and line-height in em and px and presents them in a matrix. The tool computes both symmetrical and asymmetricam margin. Useful!

wp-typogrify WordPress Pluginwp-typogrify is a collection of Django template filters that help prettify your web typography by preventing ugly quotes and widows and providing CSS hooks to style some special cases. Python-script for Django is available as well.

FontBurnerAfter you find the font that you would like to use, Font Burner gives you a chunk of code that you will insert into the head of your webpage. Provided you don’t have any stylesheet conflicts, the new font will show up on your site immediately.

Convert TrueType Font to sIFR Flash FileUpload your typeface and the tool generates the Flash-file (swf) and sends it to your e-mail. Text 2 PNG ConversionThis service provides you with the ability to convert you headlines and navigations to PNG images automaticlly. It works by adding a JavaScript file and selecting which tags to replace. Useful, for instance if you want to generate an image with an embedding e-mail-address. 7 Free Tools To Identify A FontA list of free online tools to speed up the identification process. 21 Typography Web Applications You Can’t Live Without 2. Useful typographic references Better CSS Font StacksA couple of useful font cascades for your CSS-stylesheet.

FontsMatrixMatrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite (via @lucianosb on Twitter)

Common fonts to all versions of Windows & Mac equivalentsThe list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as “browser safe fonts”.

Default Mac OS X 10.4 fonts list (via Elementiks)

Default Windows fonts list (via Elementiks)

3. Choosing a font Type TesterType Tester is an online application that allows you to test different typefaces. You have three columns of text and can modify the typography any way you please. You then get the CSS that accompanies your selections.

STC fontBROWSERThis tools enables you to preview fonts installed on your system online.

Font PickerThis simple tool shows you all the fonts installed on your computer and helps you choose which one is most suitable for a particular project. Also available as Adobe AIR application. FontTesterFont Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them.

CSS Type SetCSS Type Set is a handy tool that lets you preview your CSS text as you modify it, and it generates the code for you immediately (@jmreedy).

Flipping TypicalThis is a nice way to explore the popular typefaces you have on your computer and see which one fits the project you are working on. This is done by creating text that is displayed using various typefaces from your computer.

4. Typographic Techniques 12 Examples Of Paragraph TypographyA showcase of some interesting techniques for designing paragraphs, by Jon Tan. Some of these styles are experiments using pseudo elements and adjacent sibling selectors; browser support is not consistent.

Rendering Complex Type — Who’s got the Love?Learn how to create a complex typographic sample with pure CSS.

10 Examples of Beautiful CSS Typography and How They Did ItA lot of great websites out there have beautiful typography using only CSS. But simply looking at them gives you only half the picture. This post showcases examples of good clean typography using nothing but CSS, and it explains what the designers did to achieve this beautiful type.

typeface.jsWith typeface.js, you can embed custom fonts on your Web pages so that you don’t have to render text as images. What makes it different is that it’s JavaScript only, not JavaScript and Flash like sIFR, or JavaScript and PHP like FLIR. So, instead of creating images or using Flash just to show your website’s text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as though your visitors had the font installed locally. It’s pretty easy to use: load the typeface.js library and some typeface.js fonts, then proceed as normal.

Facelift Image Replacement (FLIR)Facelift Image Replacement (FLIR) is an image replacement script that dynamically generates image representations of text on your Web page in fonts that otherwise might not be visible to your visitors. The generated image is automatically inserted into your Web page via JavaScript and is visible in all modern browsers. Any element with text can be replaced, from headers (

,

, etc.) to elements and everything in between! FLIR is SEO-friendly and only renders an image if JavaScript is enabled on the user’s browser. If you are using WordPress for your blog, you might find this plug-in useful to easily apply FLIR to your Web pages.

P+C DTRPHP + CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement method, allowing you to take a vanilla, standards-based (X)HTML Web page and dynamically create images to replace page headings, using only PHP and CSS. The technique is currenty unavailable for download.

Advanced Typography Techniques Using CSSWhile descriptions and basic uses of CSS typography controls have been beaten to death, many rich typographic capabilities of CSS are still not well documented. This post is a great example of what you can do by combining and tweaking type using CSS. Different techniques are introduced: reflections, drop characters, handwriting, newspaper headlines and more.

Typographic Contrast and FlowTypographic contrast is important because not every piece of content on a page has the same weight: some have greater significance than others. By creating contrast, you direct the reader’s attention to the important messages and also enhance visual appeal. Here are seven basic methods for creating typographic contrast, using size, typeface, color, case, style/decoration, weight and space.

5. Hyphenation OnLine HyphenationThis tool takes care of automatic Automatic hyphenation for texts and sites. The tool uses and inserts hyphens in the right places to make the justified text look readable. The tool is a little bit buggy and not perfect, but is still useful. HyphenatorHyphenator.js brings client-side hyphenation of HTML documents to every browser by inserting soft hyphens using hyphenation patterns and Frank M. Liang’s hyphenation algorithm commonly known from LaTeX and OpenOffice. The goal is to provide hyphenation in all browsers that support JavaScript and the soft hyphen for at least English, German and French. Here is the server-side script that does the hyphenation. 6. sIFR sIFR 2.0: Rich Accessible Typography for the MassessIFR (or Scalable Inman Flash Replacement) is a technology that allows you to replace text elements on the page with Flash equivalents. It uses JavaScript to target certain text page elements and replace them with Flash, which results in the same text but rendered in a new font. This means you are free to use any font you wish in your design, instead of being limited to a very small set of “safe” Web fonts. sIFR is easier to implement than any other image replacement technique. Instead of manually generating each header with an image editor, you’re able to skip the editor completely.

sIFR liteA solution similar to the original sIFR package, but smaller (3.7 Kb) than the original (22 Kb) and including even more nifty features. It auto-detects the color of text elements, is completely object-oriented, doesn’t use CSS selectors and targets elements by tag name and class. sIFRvaultA repository of sIFR fonts, rated, tagged and available for download. Users can submit their SWF-files as well. Please notice that you need to respect all copyright and licensing laws - some of the featured fonts appear to be commercial (via chrisjlee).

jQuery sIFR PluginThe jQuery sIFR Plugin is an add-on for jQuery that makes it easy to replace text on a Web page with Flash text (sIFR). The jQuery sIFR Plugin does all the work of figuring out the text, files, sizes, colors and any other configuration needed to convert text to a beautiful sIFR font, with consistent behavior across all major browsers.

Multi color sIFR 2.0.1This version of sIFR supports strong, em and span-elements and can color parts of the headline in colors.

sIFR GeneratorThe big disadvantage of sIFR is that creating sIFR files is a tedious task that also requires Adobe Flash Studio in order to create a .swf file with the font of your choice. At least, that was the big disadvantage until now. sIFR Generator is an online tool that allows you to create sIFR .swf files with a few clicks of your mouse. Simply upload the TTF font of the font you want to convert, preview and download. 7. Grids gridr buildrrrThis tool generates various grids on the fly and allows users to define the width of the grids, gutter as well as boxes for the layout.

The Grid SystemAn aggregator of articles, tools, books and resources related to grid-systems.

Typographic GridIf your website is heavy with text content, you will need to pay attention to the underlying grid. Check out Typography Grid, created recently by Chris Coyier: “I was just screwing around with typography and getting things to line up according to a strict horizontal and vertical grid. It was inspired by the Compose to a Vertical Rhythm article by Richard Rutter a few years ago, except uses unitless line height.” Check out the demo here.

Grid DesignerAnyone looking for a little help to get going with grid design should look at this handy tool. Grid Designer 2 lets you set variables for your layout, such as the number of columns, the width in pixels, gutters and margins. You can also set variables for the typography, so that you can control the size, weight, line height and other variables for your paragraphs and titles. After you set up your desired layout, all you have to do is export the CSS to use in your own design.

Vertical rhythm calculatorThis AIR application allows Web developers who use XHTML and CSS to build their pages to understand and calculate values for vertical rhythm. Enter your starting values in the application, and then you have the option of copying the resulting CSS code onto you clipboard for pasting into your existing style sheet.

8. Free and Commercial Fonts 40+ Excellent Freefonts For Professional DesignAn overview of over 40 excellent free fonts you might use for your professional designs in 2009.

60 Brilliant Typefaces For Corporate DesignOver 60 first-class commercial typefaces for corporate design.

80 Beautiful Typefaces For Professional DesignOver 80 gorgeous typefaces for professional design, based upon suggestions from designers and web-developers all over the world.

FontsquirrelA growing collection of free high-quality fonts. More high-quality free fonts.

Top 10 (Commercial) Fonts Of 2008This article lists this year’s most successful fonts on MyFont – in each genre. Based on sales numbers.

Clean font showcaseAn extensive collection of clean, legible free fonts.

Veerle Pieters’ 10 favourite typefaces

9. A Guide to Web Typography Good typefaces are designed for a purpose. Below, you will find very informative articles and guidelines, created by masters of typography to show us the overall effect that good type has on a project. On Choosing TypeA good article from I Love Typography on choosing the right typeface. The article explains everything from choosing between serif and sans-serif fonts to remembering to honor and read the content. It’s a great post for improving your typography skills.

The 100% Easy-2-Read StandardBest practices for good typography on the Web from Oliver Reichenstein.

Don’t be afraid of Serif FontsDavid Rodriguez discusses the advantages and disadvantages of sans-serif and serif fonts and suggests best practices. Elegant Web TypographyA great presentation by Jeff Croft about Web typography.

10 Common Typography MistakesThe goal of this post is to help designers and clients understand the importance of good typography skills and avoid some common mistakes. The Non-Typographer’s Guide to Practical Typeface SelectionCheck out Cameron Moll’s magic formula for picking the right typeface for your needs.

Make a list of those familiar typefaces that you trust and know will work well in a variety of projects. Supplement that list with a list of unfamiliar typefaces that address specific objectives for the project at hand. Test each typeface in small and large sizes. Test in both caps and lowercase.

The Principles of Beautiful TypographyThis is a great article that is actually extracted from the SitePoint book The Principles of Beautiful Web Design. The article goes into detail on fonts, letter forms, spacing, text size and more. It’s a great and informative read. Five Simple Steps to Better TypographyA series of articles by Mark Boulton that is highly worthwhile to read. 101 Typography Resources for Web DesignersA great list of typography-related resources from our author, Steven Snell. 10. Examples of Great Web Typography Some of the designs shown below demonstrate that sometimes less really is more. Others made it onto the list because they use text very well and demonstrate how the grid can be used to do wonders for the whole design. Jon Tangerine

Viget Inspire

works4sure

24ways

Alex Buga

Wilson Miner

Colour Pixel

Maxvoltar

Mark Dearman

Blogger Bake Off

Fixie Consulting

Drupalcon

Guilherme Neumann

Sursly

17 Stimulating Flickr Groups to Get You Typographically InspiredThis is a list of some of the best typography Flickr groups to feed your creative appetite.

17 Stimulating Flickr Groups to Get You Typographically InspiredIn this collection, you’ll find a variety of websites that showcase creative and functional uses of typography.

About the author Noura Yehia is a Web designer and blogger who can be found at Noupe and Devsnippets. If you want to connect with the author, you can follow her on Twitter. (al)

Ask SM: How Do I Create A Colorful Sitemap With jQuery?

Thu, 22 Jan 2009 17:27:00 -0700

We like to experiment with new ideas and concepts. We like to challenge ourselves and provide our readers with new formats. This post is the first in our “Ask Smashing Magazine” series, in which well-known developers from the web design community answer our readers’ questions and suggest solutions to common problems. Today, we are glad to welcome Chris Coyier, who you may know from his articles on CSS-Tricks, to our Smashing Magazine Editorial Team. From now on, Chris will regularly answer your CSS- and jQuery-related questions and present answers to the most interesting, useful and original ones in his articles on Smashing Magazine. Welcome, Chris! Of course, you can send any CSS- and jQuery-related question you want. To ask a question, you can do any of the following:

Send an email to Chris at ask [at] smashingmagazine [dot] com with your question, Post your question in our forum, you will need a signup (yes, the forum is not officially launched yet, but it is running!), Or, if you have a quick question, just tweet us @smashingmag or @chriscoyier with the tag “[Ask SM].”

Please note: Chris will do what he can to answer most questions, but he will certainly not be able to answer all of them. However, we hope that our forum may help you to solve your problem in case Chris couldn’t help you out. How To Design A Colorful Sitemap With CSS And jQuery? Let’s start with the first question from one of our readers: “I was asked to design a sitemap for our new corporate project, but I wasn’t able to find any good tutorials on the Web. Could you help me out? We are looking for a well-organized, clean and colorful sitemap with dynamic effects (jQuery-based if possible).” Martin Tortier Chris Coyier answers: Content-heavy websites with a deep navigational structure can benefit from sitemaps. A sitemap contains links to every important page on a website, often visually organized in a hierarchy. They generally should not have opening and closing mechanisms to display the hierarchy. If you are forcing someone to click five times to drill down to what they are looking for, that is “navigation,” not a sitemap, and isn’t very helpful. Having every link visible at once is ideal for people searching the page for what they are looking for. Admittedly, though, visually browsing a large and deep sitemap can become confusing quickly. In this demo article, we will build a visually interesting sitemap that makes the hierarchy clearer through the use of color.

View Demo | Download Files Semantic HTML Markup The perfect HTML structure for a sitemap is the unordered list (

Visiting Campus
- Tours
  - Undergraduate
  - Walking
    - Guided
    - Unguided
  - Group
  - Field Trips
- Campus Map
- Events Calendar
- Athletics
  - Football
  - Baseball
  - Soccer
  - Volleyball
- Arts
- Science
- Hospital
Admissions
Student Life
Academics
International
Research

Styling with CSS Some very simple CSS will have this boring ol’ list spiffed up in no time. Indenting each child list, just as the browser does by default, makes good sense for establishing a hierarchy. We’ll keep that idea but house each list in its own box. We’ll shade the background of the boxes in shades of gray, from darkest gray at the “base” of the page (or highest level in the hierarchy) to lightest gray at the “top” (or lowest level in the hierarchy). ul { padding: 8px 25px; list-style: none; background: #282828; } ul ul { background: #393939; } ul ul ul { background: #4b4b4b; } ul ul ul ul { background: #5a5a5a; } Of course, we have already performed a basic CSS reset, set up some basic typography and applied some background images for extra spiffiness. You can view the complete CSS if you want to see it in its entirety. Here is what we have so far:

Bonus CSS for WebKit Browsers Our effect is starting to look like boxes stacked on boxes. For a bit of progressive enhancement, we can build on this look with the CSS3 box-shadow property. Currently, only WebKit browsers support this feature with a proprietary extension, but it works! To create this effect, add this CSS: ul { -webkit-box-shadow: 2px 2px 5px black; }

Hey! Why do those inner lists look faded out like that? Don’t worry, that doesn’t have anything to do with the drop shadow. We are going to be working with that in our next step! Adding the Color Effects with jQuery We are going to use the jQuery JavaScript library to really make this sample sitemap sing. Remember, the goal is to keep the hierarchy defined through use of color. The idea here is, when the mouse cursor hovers over a list, that list will brighten up a bit and fade to a unique color. When the mouse cursor is removed, the list will return to its original color. For example, our “outer” list will fade to a purple color when the mouse hovers over it. This is a distinctive effect and allows your eye to follow the purple border and see all the other list items that are a part of that list, despite it being broken up by sub-lists. We will be animating both the color and opacity of the list. jQuery can animate opacity out of the box, but animating color requires use of the jQuery color plug-in. For the sake of speed, let’s load jQuery from Google, and then link to our own JavaScript file where we’ll be writing our code: Now we can dig into our own sitemap.js file. The first order of business is to execute our code only when the DOM is ready for it. Then we will set the opacity level of each of our lists to 50%. $(function(){

$("ul").css("opacity", "0.5");

// Do fading stuff

}); Avoiding Repetitious Code, Building a Plug-In Each of our lists will get the same “fading” effect, but each will be just slightly different in that it will fade to a different color. To avoid a bunch of unnecessary and unwieldy repetitive code, let’s abstract the fading effect into a simple plug-in we’ll call “doFade.” Now we can call that plug-in function on each “layer” of the list and pass the color with a parameter. $(function(){

$("ul").css("opacity", "0.5");

$("ul").doFade({ fadeColor: "#362b40" }); $("ul ul").doFade({ fadeColor: "#354668" }); $("ul ul ul").doFade({ fadeColor: "#304531" }); $("ul ul ul ul").doFade({ fadeColor: "#72352d" });

}); Let’s take a look at the entire function and discuss its functionality a bit. jQuery.fn.doFade = function(settings) {

// if no paramaters supplied...

settings = jQuery.extend({ fadeColor: "black", duration: 200, fadeOn: 0.95, fadeOff: 0.5 }, settings);

var duration = settings.duration;
var fadeOff = settings.fadeOff;
var fadeOn = settings.fadeOn;
var fadeColor = settings.fadeColor;

$(this).hover(function(){
 $(this)
     .stop()
     .data("origColor", $(this).css("background-color"))
     .animate({
         opacity: fadeOn,
         backgroundColor: fadeColor
     }, duration)

}, function() { $(this) .stop() .animate({ opacity: fadeOff, backgroundColor: $(this).data("origColor") }, duration) });

}; The function accepts parameters passed to it that it reads as “settings.” The first thing we do is set defaults for those settings, in case the function is called when they are not supplied. This is exactly the case of our code, because we will provide the “fadeColor” but not the duration or fadeOff or fadeOn values.

fadeColor: the background color that the element will fade to. duration: how long the animation takes to complete, 1000 = 1 second. fadeOn: opacity percentage when element is hovered on, 0.95 = 95%. fadeOff: opacity percentage when element is not hovered on, 0.5 = 50%.

Then we set up the hover function, which binds itself to the element that we called the function on. Hover is actually two functions. The first runs when the mouse hovers over the element, and the second is a callback function when element is no longer being hovered on, essentially a mouseout. We do three things in the first function. First we .stop(), which ensures any animation being run on the element is stopped. This prevents animations from queuing if the element is hovered on and off quickly, which looks awkward. Then we use jQuery’s brilliant .data() function to store the original color of the element. Remember, each of our lists has its own unique shade of gray; so to avoid hard-coding nonsense, we’ll just auto-detect this color with the .css() function and save it to a variable we’ll call “origColor.” Then we animate both the opacity and the background color to the settings. In the callback, we’ll again .stop() the animation. Then, all we need to do is animate it back to the original color (which we have stored) and revert to the “off” opacity value. So there you have it, Martin!

View Demo | Download Files Become the author of the “Ask SM”-section! Please notice that we are looking for professionals and experts who know Photoshop, Illustrator, PHP or Ruby On Rails and have a long experience with these tools / languages. If you can regularly answer questions from our readers (in posts on SM, in the forum or on Twitter), please let us know. We’ll pay you, of course. What should the new section focus on? What do you think about the new section on Smashing Magazine? What should it focus on? What problems and solutions would you like to see covered in our posts? Please vote in the poll and let us know how we can improve this new section on Smashing Magazine by commenting on this post! Your input is very important to us! Thanks.

What should the “Ask SM”-section focus on? ( polls) (al)

12 Useful Techniques For Good User Interface Design

Mon, 19 Jan 2009 21:00:00 -0700

By Dmitry Fadeyev and Smashing Magazine Editorial Last week, we presented 10 Useful Web Application Interface Techniques, the first part of our review of useful design trends in modern Web applications. Among other things, we highlighted embedded video blocks, specialized controls and context-sensitive navigation. We also encouraged designers to disable pressed buttons, use shadows around modal windows and link to the sign-up page from the log-in page. This post presents the second part of our review: 12 useful techniques for good user interface design in Web apps. We also discuss how to implement these techniques so that they are properly used. Please feel free to suggest further ideas, approaches and coding solutions in the comments below. You may also want to take a look at the following related articles:

Web Design Trends For 2009 5 Useful Coding Solutions For Designers and Developers 10 Useful Techniques To Improve Your User Interface Designs 10 Principles Of Effective Design Five More Principle Of Effective Design

Highlight important changes One of the most significant elements of a good user interface is visibility of the system’s status. Users must notice immediately what’s going on behind the scenes and whether their actions have actually led to the expected results. To achieve a more sophisticated level of system visibility, Web applications these days use AJAX (of course), which allows users to update portions of a Web page at any time without having to refresh the whole page. AJAX brings the level of responsiveness and interactivity of Web apps much closer to desktop-grade applications.

Yammer applies not one but three effects on all new messages in a feed: fade in, slide down and highlight. However, this dynamic nature means that when you click on a button, the page doesn’t refresh but something does happen. The majority of websites still don’t use AJAX extensively, so some users may not be sure whether anything has happened at all or whether the button was properly clicked. To fix this, you need to provide some visual feedback for each of the user’s interactions.

Backpack applies a highlight effect to all new items in a task list, which lasts for a second before fading out. One great way to do this is with animation. The human eye can notice movement fairly well, especially if the rest of the page is static. Playing a highlight animation when users add items to their shopping carts, for instance, will attract their eyes to those items. They’ll see that their action has worked. Animations can be implemented with JavaScript and are a nice way to provide visual feedback. Just be sure to not overdo it; adding too many animations could cause interface friction because the speed with which the user performs each action will be slowed down by the duration of the animation. 2. Enable keyboard shortcuts in your Web application As the advanced features of modern Web applications (such as dragging and dropping, modal windows, etc.) steadily gain on those of desktop apps, developers of these applications are trying to offer users more responsive and interactive user interfaces. One of the techniques used to achieve this is the integration of keyboard shortcuts or navigation. Just as with classic applications, this little feature can significantly improve the workflow of your users and make it easier for them to get their tasks done.

In fact, various Web applications already use shortcuts (for example, Google Spreadsheets, MobileMe, etc.), and even regular websites, such as Ffffound or Boston.com, allow visitors to use them for basic navigation. Ffffound enables users to use shortcuts to switch from the thumbnail view to list view and vice versa (using “v”), go back to the top (”h”) and navigate to the previous (”k”) and next (”j”) image. Boston.com also uses “k” and “j” for the same functions. It’s worth mentioning that your shortcuts should be intuitive and self-explanatory. For instance, it wouldn’t make sense to make the shortcut letters for “Previous” and “Next” navigation too far apart from each other on the keyboard; rather, pick ones that are close together. The reason is, if a user makes a mistake and jumps to a page she doesn’t want to visit, she can immediately return to her page without looking at the keyboard. The “j/k” configuration is one option. It would actually make perfect sense to have some common conventions for keyboard shortcuts used throughout various websites, but we haven’t been able to detect such conventions thus far. How do you implement this? Essentially, you just have to use the onKeyPress-DOM event and manipulate the appearance of the document using the window.scrollTo function in JavaScript. Ffffound.com uses an onMouseDown effect in its markup, which is not a good solution because it doesn’t adhere to the main guideline of unobtrusive JavaScript coding: Thou shalt separate JavaScript functionality from CSS style sheet and (X)HTML markup. prev(k) Here it would make more sense to use a JavaScript library instead (like jQuery) and call the element via its identifier or class. That’s (almost) what Boston.com does. All of the images in its gallery are labelled with the class bpImage in the markup, with the JavaScript pointers to them added to the array. The onKeyPress event triggers the scrolling window in the background, and the window’s browser is manipulated using the window.scrollTo() function. Here is the (X)HTML: ...

...

... And the [removed] function bpload(){

// put pointers to all images with the class "bpImage" in an array imgArr = getElementsByClassName(document.body,"bpImage") isLoaded = 1; }

document.onkeypress = function(e) { if (!e) e = window.event;

// Pick up what key was pressed key = e.keyCode ? e.keyCode : e.which;

// 107 is the ASCII code for 'k' if(( key == 107 ) && ( isLoaded ) ) {

// if there are images... if ( currImg > 0 ) {

// decrease the counter for the current image
currImg--;

// offsetTop returns the vertical coordinate of the
// upper-left corner of the image
// (we are not sure why the script adds 174px. Any idea?)
window.scrollTo(0,imgArr[currImg].offsetTop+174)

} else { if (currImg==0) { currImg--; window.scrollTo(0,325) } else { if (currImg<0) { window.scrollTo(0,325) } } } }

if ( ( key == 106 ) && ( isLoaded )) { // a similar code snippet for 'j' ... } }

} But you need to make sure that you clearly communicate that 1) keyboard shortcuts are available, and 2) they can be used to perform certain tasks more efficiently. If a user can easily manage his tasks with your application, he is less likely to switch to another application, if the feature set is more or less similar. 3. Upgrade options from the account page If your application features several subscription plans, make sure to remove any interface friction for customers deciding to upgrade. Most users like to try the basic version of an application first to get a better sense of what it offers and how it works. If they are convinced the application meets their expectations, they will consider upgrading to a more advanced plan. It’s the designer’s task to make sure this transition is as simple and intuitive as possible.

CrazyEgg integrates the option “Change plan” in its main navigation. In fact, a lot of Web applications put upgrade options right on the user’s account page, making them easily accessible. This design choice has the simple advantage of providing users with an overview of available options and supported functionalities right away.

Bigcartel’s upgrade plans are available in the app itself. Note, though, the importance not only of featuring the available upgrade plans, but also of identifying the plan that the user is currently using and the features that are currently available to her. It is vital to provide users with precise information about what advantages they gain by upgrading their account. Take a look at our article Pricing Tables: Examples and Best Practices as well. 4. Advertise features of the application Even though you’ve created a detailed marketing page, outlining your application’s every feature, and crafted a thorough help section on your website, your users are unlikely to have read it all. They’re probably not familiar with all the features of your product and would benefit from little tips inside the application itself. Advertise new features in your application. These would usually go in the sidebar, out of the way of the main functions. If a user is nearing the maximum capacity of a certain feature for her chosen subscription plan, you should point this out and give her an option to quickly upgrade.

The Freckle time-tracking app tells you when you’ve run out of people on your current plan. The message also links to actions you can take if you need to upgrade.

Wufoo highlights its new form gallery feature at the bottom of the form creation page, making sure customers get the most value out of the app. 5. Use color-coded lists Some applications feature feeds that aggregate various types of content. For example, you may have a project management application that shows you all the latest messages, tasks and files on the home page. If these items all appear together in one list, it may be difficult to tell what’s what. Many applications use color coding to help visually distinguish between different types of entries. A simple way to do this is to place a text label inside a colored box. This way, the list becomes easily scannable. It’s important not to use various colors for the same task or similar colors for completely different tasks. The color scheme should not be random but should implicitly indicate the function each item serves.

The Lighthouse issue-tracking app has color-coded labels on the right-hand side of each item on the overview page, which helps you quickly scan the list.

The Goplan dashboard uses similar color-coded labels to differentiate various items, like tasks, notes and files, so you can quickly find what you need. 6. Offer personalization options Many applications provide custom workspaces for people and businesses. Personalization can help make your users feel more at home. This can be done by giving users options to customize the look and feel of the application interface. Let them select the color theme, the link colors, the background and so on. Even a small amount of customization will allow your users to make their pages their own.

Campaign Monitor lets you choose a color theme for your account and upload your business logo. This helps businesses infuse the colors of their brands into the Web apps they use. Personalization is certainly one of the simplest and most effective methods of binding your customers to your service, but it’s important to understand that the various personalization options should never come at the expense of the core application’s functionality. The system should always be capable of performing its functions and thus meet users’ expectations, despite how exactly users have personalized the application. One useful approach to finding a compromise between a website’s core functionality and the user interface is to introduce various levels of personalization, depending on whether the user is a novice or an advanced user. It is also a good idea to allow the user to revert his account to the default settings or restore the settings that he had saved in his previous session.

Twitter lets the user customize his profile page background and colors, allowing him to craft a unique spot on the popular micro-blogging network. 7. Display help messages that attract the eye Every Web application is different and has its own way of doing things. If the function of a particular element isn’t immediately apparent, you can provide short help messages to get people started. One important thing to note is that if you want to help people who aren’t sure what they’re doing yet, you need to attract their attention to this message. One way to attract attention is with color — putting a yellow “sticky” message in the sidebar, for example, is sure to stand out.

Goplan puts help messages in bright yellow boxes resembling paper stickies. The bright color ensures that users don’t miss them. Alternatively, if you are looking for a subtler solution that doesn’t require much space to display and isn’t obtrusive for regular users of your application, you can consider displaying vibrant visual graphics (for example, small icons) next to the design element needing explanation. For instance, pointing users to new, updated or useful features of an application’s search engine, as Wishlistr.com does, makes sense.

Classic: Wishlistr uses a light bulb to focus the user’s attention on the available search functionality of its system. 8. Design feedback messages carefully Pretty much every application has some form of feedback messages. These are little messages that pop out when there is an error or warning or perhaps when an action is completed successfully. Designing these messages correctly is important because you don’t want to confuse or startle your users when there’s nothing to worry about. A good practice here is to do a couple of things. First, color code the different types of messages. Messages that notify users of successful actions are usually colored green. These employ the traffic-light analogy of green meaning “Go.” Warning and error messages are colored yellow. Same traffic-light analogy here: yellow means slow down and wait. You can also distinguish between warning messages and error messages by coloring errors red and warnings yellow.

Mailchimp uses color effectively for its error messages. The second thing to do is add a unique icon for each message type. Icons can convey meaning instantly, without the user having to read the message. For example, a tick icon can symbolize completion of a successful action. An exclamation mark in a triangle is a warning sign. People will instantly recognize that this message warns them about something and will pay attention.

GetSignOff allows you to close notifications by using the little button in the top-right corner of the message box. Lastly, you should provide a way for users to close the notification if they are likely to remain on the page for a while. 9. Use tabbed navigation Many Web applications have adopted the tabbed navigation approach for their main navigation menu. Tabbed navigation is a menu that looks like each item is a tab on a file folder, with the active tab connected to the body of the page. Tabbed navigation isn’t just eye candy; it provides a usability benefit.

Freckle uses tabbed navigation in a sub-menu relating to the time input menu.

Basecamp features the standard tabbed menu for the main navigation of its app. If you make the menu look like tabs on folders, almost everyone will be able to figure out what it is and how it works. This is because the visual metaphor is strong and clear. The current page or section also becomes easy to see. Knowing where they are puts users at ease because they gain a greater sense of control. 10. Darken background under modal windows In some applications, you may want to display a bit of information or quick input form that doesn’t really deserve a full page of its own. Some developers put that message or form in a modal window. Modal windows are little windows that pop up on top of the current page and that users need to interact with to proceed.

When editing things in the Squarespace website creation app, the background darkens to shift focus to the edit window. To make this window stand out better, you can darken the content below it. The darker background will block out all the noise of the content behind the box and make the modal window the center of attention. This is very similar to using shadows around the window but is even more powerful in directing focus. The darker background also indicates that interaction with the content beneath is disabled and that the user should instead interact with the modal window. 11. Lightboxes and Slideshows Some applications include a lot of images that users may want to browse. Displaying every image on its own page may not be the most efficient way to do it — both for your visitors and your server. Your visitors will need to navigate back and forth, and your server will incur extra hits that can be avoided.

SmugMug uses lightboxes to enlarge photos. (Photo by Kurt Preston.) Enter lightboxes and slideshows. Lightboxes and slideshows are used to display photos without having to load a new page. For example, the lightbox method will enlarge an image and place it as a modal window above the rest of the page, allowing the user to focus on the image itself while the background is darkened. This means less noise interfering with the viewing experience. 12. Short sign-up forms The sign-up form is potentially one of the biggest barriers between you and potential customers. The longer the form, the more effort your visitors will have to make before becoming members of your website or, perhaps, paying customers. To minimize the barrier, we’ve got to speed up the process. This means removing all optional elements from the form and leaving only the core essentials. The optional stuff can be filled in later.

Opening an Evernote account is easy, with only a handful of fields to fill in, all of which are grouped together in a compact box. Conclusion Making your application beautiful may lead to a satisfying user experience, but it will not guarantee a usable product. For example, an ugly website like Craigslist performs its function fairly well. Its poor aesthetic did not stop it from becoming hugely successful. Similarly, the minimalist interface of the Google search engine manages to fully accomplish its objectives without getting in your way. The interface disappears, letting you focus on getting things done. Steve Jobs once said, “design is not just what it looks like and feels like. Design is how it works.” In fact, the usability and overall usefulness of a Web app is governed by how well it performs its functions and how easily those functions are accessed. Design with a goal in mind — a goal that the interface helps your users achieve. Not every technique will work in every situation or for every application. Only implement interface elements if they make sense in your particular context. Related articles Take a look at the following related articles:

Web Design Trends For 2009 10 Useful Web Application Interface Techniques 5 Useful Coding Solutions for Designers and Developers 10 Useful Techniques to Improve Your User Interface Designs 10 Principles of Effective Design Five More Principle of Effective Design

About the author Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability. (al)

A Detailed Introduction Into the 960 CSS Framework

Wed, 14 Jan 2009 15:14:00 -0700

We'll be taking a look at the benefits of using a CSS framework when building web applications.