Which is more important, driving traffic to your website or encouraging as many people as possible to see your content? Believe it or not, they are not one and the same.Too often, we as website owners live and die by web analytics applications. We fret about bounce rates, unique visitors and dwell time. However, when we focus so heavily on the performance of our website, we miss a fundamental point: we should aim to expose users to our content, not our website. The website is a tool to showcase our content, but it is not the only tool that does this. Organizations with truly successful websites understand this principle. Take, for example, the following: Amazon’s primary objective is to sell stuff. YouTube aims to use video content to carry advertisements. Twitter facilitates “tweeting.” (Who knows what its business model is!). In each case, the content matters, not the website. That is why each company provides numerous ways to access its content beyond the website. From Amazon’s affiliate scheme to YouTube’s embed feature, these companies can reach audiences that may never visit their websites. Twitter is probably the best example of all. How often do you actually read or post tweets via the Twitter website? If you are like me, the answer is very rarely.

The majority of users do not read tweets via the Twitter website. The lesson here is obvious: as website owners, we need a broader Web strategy to release our content from the shackles of our websites. How do we do this? Below are 10 opportunities that you can integrate into your online strategy. While the points mentioned below will refine your strategy to deliver content to more people, they can not serve their purpose without an appropriate environment. In the age of social media and the rise of interactive web-applications such as Facebook, Twitter etc. building a community around your website is the most important way to drive traffic and keep the users coming back. Using forums, polls, comments and engaging users in the global conversations via external services turns out to be a silver bullet for gaining more exposure and winning more loyal visitors. Once you are building a community around your site, it’s time to think about more refined strategy that will help you to put your content in front of more people – and this is where the tips below will come in handy. 1. Target The Desktop eBay recognized that it needed a desktop application. Many people make a living selling on eBay, and these people need desktop software that streamlines their business processes. They need desktop notifications, faster and more desktop-like interaction and easier access to eBay features.

eBay Desktop: eBay saw an opportunity to bring the functionality and content of its website to the desktop. Using a platform such as Adobe AIR, you can easily put Web-based content and functionality onto the desktop. This is exactly what eBay did, and it has proved very successful among the company’s power users. As a website owner, you should consider whether a desktop application is right for you. Do your users need desktop features, offline access or better integration with the operating system? 2. Going Mobile It won’t be long before the Web is accessed by more mobile users than PC users. In many countries, this has already happened. Traditional websites often render poorly or are hard to use on mobile devices. They do not take into account the context in which a mobile user browses the Web. Approaching the mobile Web as a separate channel to your traditional website, then, is critical. Here are some methods of delivering content on the mobile Web:

Create a mobile website. Mobile websites take into account small screens, different input devices and the numerous other unique characteristics of the mobile Web. Use text messaging. Text messaging is ideal for notifications and updates. It is a perfect complement to your website and a way of keeping users informed. Build mobile applications. Mobile platforms such as the iPhone and Android make it increasingly easy to build applications that run directly on mobile devices. They allow you to make your content available even when the user is not connected to the Internet or away from their PC.

Video-streaming service uStream makes its content available on the iPhone. Pushing your content to mobile devices is ideal if your target audience is often away from the computer or requires access to your content “in the field.” 3. Start Tweeting Twitter has so much hype at the moment. However, it does provide a unique opportunity to reach a larger audience with your message. The question is, how best to use it? Some organizations use Twitter as a broadcast tool, turning it fundamentally into an alternative to RSS. An example of this is BBC News or CNN, which provide latest updates via the service.

CNN uses Twitter as a broadcast tool, turning it fundamentally into an alternative to RSS. However, using Twitter as a broadcast tool misses its true power. Organizations that really “get” Twitter include Zappos and Omnifocus. They use Twitter as a way to engage with their followers and even provide customer support. Use Twitter as a way to engage with your audience. If a number of people work on your website, encourage them all to tweet, rather than having a single branded account. 4. Write For Others Writing for other websites is an excellent opportunity to demonstrate your expertise and spread your message to a larger audience than would otherwise be possible through your own website. Do not limit your words of wisdom to your own website. Look for other editorial websites and blogs that speak to your own audience and offer to write for them. After all, your audience visits many websites other than your own. Why limit your writing skills to your own blog when you can reach new audiences by writing for others?

Whenever I write for other websites, they almost always include links back to Boagworld and Headscape. Here an example from one of my previous Smashing Magazine’s articles. Of course, any article you write for others should be more than shameless self-promotion. The owners of those websites will want quality content that fits their website and is of interest to their audience. For example, I recently wrote an article for a website whose audience consisted of franchise owners. If I had simply written about how great Headscape was, I doubt the article would have been published. Instead, I shared a case study of our experience in working with a franchise-based business. The content was both relevant to the publication and useful to its audience. However, it also raised our profile among a base of potentially new customers. What websites exist that reach your target market? Would they consider publishing some of your content? How could you rewrite your content to make it more appealing to them? 5. Embrace Facebook Another option for expanding your Web strategy beyond the website is Facebook. Explaining the importance and reach of Facebook is surely unnecessary. However, you may be tempted to dismiss it because your target market is not teenagers, who are normally associated with these kinds of social networks. What may surprise you is that Facebook is no longer confined to a younger demographic. Over the last year, the number of users between 35 and 54 has jumped 276%, to over 6 million people.

Carsonified Fan Page on Facebook: Facebook has introduced fan pages, which are public-facing profiles for organizations. So, how do you reach your audience on Facebook? Here are three good starting points:

Create a group. Groups have been around for a long time and are ideal for building a dialogue with those already interested in your product or service. You can easily invite people to participate, and those people in turn can invite others. This makes groups ideally suited to viral marketing. Create a fan page. Fan pages are basically public profiles for organizations rather than individuals. Unlike groups, pages are public-facing. This means they can be seen by non-Facebook users and are indexed by search engines. Fan pages are perfect for building long-term awareness and for reaching people both inside and outside of Facebook. Create an application. Facebook allows third parties to build applications that can be added to user profiles. These range from games to RSS feeds. Unlike with pages and groups, building applications requires some technical skill. However, the possibility of users embedding your content in their profiles makes this an attractive proposition, if you have appropriate content.

Of course, Facebook is not the only social network. But it does have considerable reach and provides some the best tools for reaching its massive audience. 6. Develop A Widget Or API The ultimate way to distribute content has to be by providing an API or widget. An API gives other Web developers access to your content, allowing them to build applications and websites around it. Using an API, developers can do anything from embed your content on their websites to build desktop applications that offer advanced functionality. Twitter really gets APIs. When was the last time you viewed or posted tweets from the Twitter website? Chances are, a long time ago. Because Twitter offers a powerful API, thousands of developers have built all kinds of applications that allow you to view and post tweets. The actual service that Twitter provides is in fact very basic; but its API makes it possible to do everything from viewing tweets on a Google map to posting photos, video and audio.

Tweetdeck is just one example of the powerful applications that can be built using the Twitter API. Unfortunately, APIs have some drawbacks. They require a considerable level of technical expertise to implement. As a result, they are of use only to developers. What about the rest of us? How do we add third-party content to our websites? That’s where widgets come in. A widget is typically a small piece of code that you can copy and paste into your website. Literally thousands of widgets are available. They allow website owners to use the content and functionality of other websites quickly and easily. Widgets are used to embed YouTube videos, show your Amazon wish list and display your location on a map. Widgets are powerful because they are easy to implement. This means anybody can add them, thus allowing you to distribute your content much more widely. Widgets are also easier to build than full APIs. This makes them a good starting point for those wanting to put their content in front of more people. 7. Offer Better Feeds Not all approaches to putting content in front of more users have to be as time-consuming and complex as developing an API. Doing one other thing could increase your views within minutes. Users increasingly rely on RSS feeds to consume content from websites. This is especially true for news, articles and blog posts. However, some website owners are so obsessed with driving traffic to their websites that they provide only teasers of their posts via RSS. To read a whole article, the user is forced to click through to the website. This approach to RSS is counter-productive. When a user is browsing a large number of feeds, they are less likely to read your content if they have to leave their news reader to do it. To maximize users’ exposure to your content, ensure as much of it as possible is displayed in the RSS feed itself. Require users to click through only when absolutely necessary.

Google Reader displaying a partial RSS feed: many websites truncate their content in RSS because their advertising revenue is based on page impressions. They see driving as much traffic as possible to their website as being in their interest. This is a short-sighted. It is also important to note that when users read content from an RSS feed, they do not have the context of your website. Ensuring, then, that your content stands on its own and that your copy incorporates calls to action is necessary. 8. Use Multimedia Of course, limiting your content to the written word is becoming increasingly unnecessary. Creating audio and video content has become a trivial task. Services such as YouTube and applications such as AudioBoo make production and hosting easy. Also, pioneers like Diggnation and Wine Library TV have shown that users care more about quality content than high production values. Both shows essentially have presenters speaking to a single locked-off camera. This kind of production value can be achieved with a consumer camera and basic editing software. That said, creating popular content is harder than it appears at first. Many organizations believe that simply uploading their latest product demonstrations to YouTube will generate millions of views. That is simply not the case. Good rich media content has to be engaging if people are expected to watch it and, more importantly, recommend it to their friends. This can be done through a passionate host, great content, humor or shock value. With thousands of videos uploaded everyday, standing out from the crowd is important.

Wine Library TV proves that great content and a passionate presenter are more important than production values. However, don’t forget that your content has to be appropriate to your target audience. Shock tactics may work well with a teenage audience but may not go down so well with middle-aged business executives! 9. Start Streaming The next wave of multimedia on the Web will be not pre-recorded material but rather live streaming. Services such as Ustream, Qik and Justin TV are all fighting to dominate this space. Each offers the opportunity to stream live content on the Web at zero cost. This makes the barrier to entry extremely low. The main benefit of this approach over pre-recorded material is interactivity. The live format allows viewers to engage with the presenter in real time via chat. This brings a host of opportunities, including, but not limited to, the following:

Live product demonstrations Live streaming allows you present your products and services while taking questions from the audience. This is considerably more powerful that showing pre-recorded promotional videos. Community sessions If you run an online community, live streaming gives you the chance to engage with that community on a much more personal level than with the written word. Social news website Digg has run a number of “Town Hall” meetings in which its user base engages directly with the CEO and founder. Online training Finally, live streaming is a perfect environment in which to provide remote training. Whether the training is on using your product or selling online workshops, live streaming allows users to both hear and see what you are doing.

Social news website Digg has run a number of Town Hall meetings in which its user base engages directly with the CEO and founder. Live streaming is still relatively immature, and few are taking advantage of this new opportunity. Your company has a real opportunity to differentiate itself through its use. 10. Don’t Forget Email Amidst all this talk of video, audio and APIs, it is easy to forget the tools we have always had for reaching beyond the confines of our website. Although not the sexiest tool on our list, email had to make it on before the end of this post. Email should be a key tool for keeping your content in front of users. Obviously, email can be used for a lot more than syndicating content. However, for the purposes of this article, it can be used to subscribe to your content. If users can subscribe to your content via RSS, they should be able to do it also via email.

ProBlogger allows its readers to subscribe to his RSS-feed via e-mail. Fortunately, there are services such as AWeber and MailChimp that make this easy. FeedBurner is an option, too; however, it lacks subject line customization and has very limited design customizations available. You can find more information about why FeedBurner isn’t good enough in the article FeedBurner’s Free RSS-to-Email Syndication: Why You Can’t Afford It. With one of these services implemented, users can subscribe via email with a single click of a link on your website. A word of warning, though. If a user subscribes to your content via email, they are not giving you permission to spam them indiscriminately. If you fail to respect their email subscription, you are in danger of losing that user and inciting them to post negative comments on your website, which could put off others. Conclusion There was a time when a website was enough. Now, your website needs to be just one small part of your overall Web strategy. Expecting users to come to you is naive. Instead, take your content to them, whether on a social network like Facebook’s or a mobile device like the iPhone. About the author Paul Boag is the founder of UK Web design agency Headscape, author of the Website Owners Manual and host of award-winning Web design podcast Boagworld.com. (al)

© Paul Boag for Smashing Magazine, 2009. | Permalink | 43 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: content, creative, ideas, techniques

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:

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

1. 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. <a id="float-navi-prev" href="[removed]void(0);" onmousedown="try { move_asset_auto(-1) ;} catch (e) { }" onclick="return false;">prev(<span class="shortcut">k</span>) </a> 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: ...

<img src="[url]" class="bpImage" /> <div class="bpCaption">...</div>

<img src="[url]" class="bpImage" /> <div class="bpCaption">...</div>

<img src="[url]" class="bpImage" /> <div class="bpCaption">...</div>

... 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:

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)

by Noura Yehia JavaScipt libraries have made huge leaps and bounds in helping developers write code and develop products more quickly. jQuery is one of the most popular JavaScript frameworks, with powerful tools that improve the user’s interaction with Web applications. jQuery has an additional advantage in that it allows developers to select elements on a page using CSS-like syntax. To help you take it up a notch, we share below some methods that can help you give visitors to your website an amazing user experience. Here are over 45 impressive jQuery plug-ins and techniques that have been recently created and that could make the development of your next website an easier and more interesting experience than the last. You may want to take a look at the following related posts:

jQuery and JavaScript Coding: Examples and Best Practices 75 (Really) Useful JavaScript Techniques 80+ AJAX-Solutions For Professional Coding 60 More AJAX- and Javascript Solutions For Professional Coding

Dynamic Content 1. Build A Login Form With jQueryIn this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.

1. Spoiler Revealer with jQueryA simple technique that hides some content first and fades it in once a link is clicked.

2. AJAX UploadThis AJAX file upload plug-in allows users to easily upload multiple files without having to refresh the page. In addition, you can use any element to trigger the file selection window. The plug-in creates a semi-transparent file input screen over the button you specify, so when a user clicks on the button, the normal file selection window is shown. After the user selects a file, the plug-in submits the form that contains the file input to an iFrame. So it isn’t true AJAX but provides the same user experience.

3. FCBKcompleteGive your users fancy Facebook-like dynamic inputs, with auto-complete and pre-added values.

4. Create Accessible Charts Using Canvas and jQueryThis tool is proof that you can use the <canvas> element to illustrate HTML table data. The idea is a good one: putting the data in a table allows it to remain accessible, while the chart can be shown for visual enhancement.

  Form Manipulation 6. Radio Button and Check Box ReplacementThis jQuery tool replaces radio buttons and check boxes with a more appealing display.

1. Submit a Form without a Page Refresh

By Chris Spooner There are exciting new features in the pipeline for Cascading Style Sheets that will allow for an explosion of creativity in Web design. These features include CSS styling rules that are being released with the upcoming CSS3 specification. Realistically, you won’t be able to use these on your everyday client projects for another few years, but for design blogs and websites aimed at the Web design community, these features can help you push the boundaries of modern Web design today, adding that extra spice to your design and helping the industry move forward. Here are five techniques snatched from the future that you can put into practice in your website designs today. 1. Border Radius

Probably the most common CSS3 feature currently being used is border-radius. Standard HTML block elements are square-shaped with 90-degree corners. The CSS3 styling rule allows rounded corners to be set.

      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      border-radius: 20px;

Border-radius can also be used to target individual corners, although the syntax for -moz- and -webkit- is slightly different:

      -moz-border-radius-topleft: 20px;
      -moz-border-radius-topright: 20px;
      -moz-border-radius-bottomleft: 10px;
      -moz-border-radius-bottomright: 10px;
      -webkit-border-top-right-radius: 20px;
      -webkit-border-top-left-radius: 20px;
      -webkit-border-bottom-left-radius: 10px;
      -webkit-border-bottom-right-radius: 10px;

Supported in Firefox, Safari and Chrome. As used by: Twitter. See also:

W3C Working Draft Border-radius on CSS3.info The Art of Web

1. Border Image

Border-image, as the name suggests, allows an image file to be used as the border of an object. The image is first created in relation to each side of an object, where each side of the image corresponds to a side of the HTML object. This is then implemented with the following syntax:

       border: 5px solid #cccccc;
      -webkit-border-image: url(/images/border-image.png) 5 repeat;
      -moz-border-image: url(/images/border-image.png) 5 repeat;
      border-image: url(/images/border-image.png) 5 repeat;

The {border: 5px} attribute specifies the overall width of the border, and then each border-image rule targets the image file and tells the browser how much of the image to use to fill up that 5px border area. Border images can also be specified on a per-side basis, allowing for separate images to be used on each of the four sides as well as the four corners:

border-bottom-right-image border-bottom-image border-bottom-left-image border-left-image border-top-left-image border-top-image border-top-right-image border- right-image Supported in Firefox 3.1, Safari and Chrome. As used by: Blog.SpoonGraphics. See also:

W3C Working Draft Border-image on CSS3.info Border-image in Firefox

1. Box Shadow and Text Shadow

Drop shadows: don’t you just love them?! They can so easily make or break a design. Now, with CSS3, you don’t even need Photoshop! The usage we’ve seen so far has really added to the design, a good example being this year’s 24 Ways website. -webkit-box-shadow: 10px 10px 25px #ccc; -moz-box-shadow: 10px 10px 25px #ccc; box-shadow: 10px 10px 25px #ccc; The first two attributes determine the offset of the shadow in relation to the element, in this case, 10 pixels on the x and y axis. The third attribute sets the level of blurriness of the shadow. And finally, the shadow color is set. Also, the text-shadow attribute is available for use on textual content:

    text-shadow: 2px 2px 5px #ccc;

Supported in Firefox 3.1, Safari, Chrome (box-shadow only) and Opera (text-shadow only). As used by: 24 Ways. See also:

W3C Working Draft Box-shadow on CSS3.info W3C Working Draft Text-shadow on CSS3.info

1. Easy Transparency with RGBA and Opacity

The use of PNG files in Web design has made transparency a key design feature. Now, an alpha value or opacity rule can be specified directly in the CSS.

    rgba(200, 54, 54, 0.5);
    /* example: */
    background: rgba(200, 54, 54, 0.5);
    /* or */
    color: rgba(200, 54, 54, 0.5);

The first three numbers refer to the red, green and blue color channels, and the final value refers to the alpha channel that produces the transparency effect. Alternatively, with the opacity rule, the color can be specified as usual, with the opacity value set as a separate rule:

      color: #000;
      opacity: 0.5;

Supported in Firefox, Safari, Chrome, Opera (opacity) and IE7 (opacity, with fixes). As used by: 24 Ways (RGBA). See also:

W3C Working Draft RGBA on CSS3.info Pure CSS Opacity

1. Custom Web Fonts with @Font-Face

There has always been a set of safe fonts that can be used on the Web, as you know: Arial, Helvetica, Verdana, Georgia, Comic Sans (ahem…), etc. Now the @font-face CSS3 rule allows fonts to be called from an online directory and used to display text in a whole new light. This does bring up issues of copyright, so there are only a handful of specific fonts that can be used for @font-face embedding. The styling is put into practice like so:

    @font-face {
    font-family:'Anivers';
    src: url('/images/Anivers.otf') format('opentype');
    }

The rest of the font family, containing secondary options, is then called as usual:

    h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;

Supported in Firefox 3.1, Safari, Opera 10 and IE7 (with lots of fixes) As used by: TapTapTap. See also:

Fonts available for font-face embedding Font-face in IE, making Web fonts work Web fonts, the next big thing - A List Apart

Although CSS3 is still under development, the rules listed here are supported by some browsers right now. Safari in particular has extensive support for these new features. Unfortunately, despite being a top-quality browser, Safari has a relatively low number of users, so it is probably not worthwhile adding extra features solely for this group of users. But with Apple’s Mac computers making their way into everyday life, Safari’s usage is likely to continually increase. Firefox, on the other hand, now has a considerably large user base. What’s more, the soon-to-be-released Firefox 3.1 has added support for a range of CSS3 features. Assuming that most users of Firefox will update their browsers, there will soon be a large group of users with support for these new styling rules. Google Chrome was released this year. Based on the WebKit engine, this browser has much of the same support as Safari. While Safari makes up a good proportion of Mac users, Chrome has burst onto the scene, making up a decent proportion of Windows users. Percentage-wise, the W3’s browser statistics indicate that, as of November 2008, 44.2% of users across the Web were browsing with Firefox, 3.1% with Chrome and 2.7% with Safari. That means almost 50% of all Internet users should be able to view these features. Within the Web design community in particular, which is much more conscious of browser choice, the range of users with CSS3 support is much higher, at 73.6% (according to the stats at Blog.SpoonGraphics). 6. The downside Your website may now have a range of fancy new design features, but there are a few negatives to take into consideration:

Internet Explorer: 46% of Internet users won’t see these features, so don’t use them as a crucial part of the design of your website. Make sure that secondary options are in place, such as a standard border in place of border-image and a normal font in place of @font-face. Invalid style sheets: These CSS3 features have not been released as a final specification. They are currently implemented with tags that target different browsers. This can invalidate your style sheet. Extra CSS markup: Following the last point, having to add a different tag for each browser to specify the same rule, as well as include the standard rule for the final CSS specification, adds a lot of extra code to your CSS markup. Potentially horrific usage: Just as is done with traditional Photoshop filters, the use of these new styling features could result in some eye-wrenching designs. Drop shadows in particular ring warning bells for us; we’re not looking forward to seeing the Marketing Department’s choices with that one!

About the Author Chris Spooner is a freelance graphic and website designer from the UK. He lives and breathes the topic of design and enjoys keeping up to date with the design industry. Chris also publishes design articles, tutorials and free giveaways on his popular design blog; Blog.SpoonGraphics. (al)

By Dmitry Fadeyev Web design consists, for the most part, of interface design. There are many techniques involved in crafting beautiful and functional interfaces. Here’s my collection of 10 that I think you’ll find useful in your work. They’re not related to any particular theme, but are rather a collection of techniques I use in my own projects. Without further ado, let’s get started. 1. Padded block links Links (or anchors) are inline elements by default, which means that their clickable area spans only the height and width of the text. This clickable area, or the space where you can click to go to that link’s destination, can be increased for greater usability. We can do this by adding padding and, in some cases, also converting the link into a block element. Here’s an example of inline and padded links, with their clickable areas highlighted to show the difference:

Obviously, the larger the clickable area is, the easier it is to click on the link because there is less of a chance of missing it. Converting links into block elements makes the text area span the whole width of the container, unless the width is specified otherwise. This makes it ideal for links located in sidebars. We can do it with the following code:

a { display: block; padding: 6px; }

Make sure to also add a healthy dose of padding to the links, because converting a link into a block only affects its behavior and width; adding padding ensures that the link is high enough and has some room to breathe. 2. Typesetting buttons Attention to every detail is what separates a great product from a mediocre one. Interface elements such as buttons and tabs are clicked on many times a day by your users, so it pays to typeset them properly; and by typesetting I mean positioning the label. Here’s a couple of examples of the kind of misplaced labels I sometimes notice:

At first glance they look okay, but notice that the text is placed too high because the lowercase letters have been used as a guide to align the text vertically in the center, like so:

However, if we use uppercase letters as well as lowercase letters with ascenders (”t,” “d,” “f,” “h,” “k” and “l”), the balance shifts upwards, making the label appear too high on the button. In such cases, we should set the type using the uppercase height as a guide — or set it a little bit higher if most of the letters are lowercase. Here’s what I mean:

This gives the whole button a more balanced look and feel. Little touches like this go a long way towards making your interface more polished and satisfying to use. 3. Using contrast to manage focus Similarly, you can also manage the focus of your visitors’ attention with contrast between elements. Here’s an example of a post headline and some meta information underneath regarding who posted the article and its date:

All the text is set in black. Let’s decrease the contrast between the meta information (the date and author’s name) and the background by putting the text in a light shade of gray:

The highest contrast element here is the headline, so it literally pops out at us. The other elements fade into the background. Here, I’ve chosen the author as the second-most important element, and the date as the least. The font also differs in size and style, but the contrast level can be very powerful. Let’s reverse the order of importance to date, author and headline:

You can see how effective it is in shifting focus: the date now pops out at you, while the headline fades away. This technique comes in very handy for information-heavy websites, such as blogs, forums and social networks, in which you want to make a lot of information easily scannable while still showing a lot of additional things, like dates. Fading the extras allows visitors to easily focus their attention on the most important pieces of text. 4. Using color to manage attention Color can also be used to effectively focus your visitors’ attention on important or actionable elements. For example, during the US presidential election, pretty much all of the candidates’ websites had the donation button colored red. Red is a very bright and powerful color so it attracts attention, and it stands out even more when the rest of the website is blue or another colder color. Warmer tones like red, yellow and orange are naturally bright and so tend to attract the eye. They also “expand” when set against colder colors like blue and green. This means that an orange button on a blue background looks like it’s flowing outwards and taking the front seat. Conversely, a blue button on an orange background contracts inward, wishing to stay in the background. Here’s a picture to illustrate:

Here’s a couple of examples of websites that use color effectively to direct users’ attention to the important elements:

Function features a “We’re Hiring” link on its jobs page. To ensure the link is not missed, the designers set it against a red background that pops out from the dark background header, effectively grabbing attention.

Causecast use color effectively. Four bright pink elements pop out at you: the logo, the feedback link, the donate link and the website description message. Want the “About” blurb on your website to grab the visitor’s focus? Make the background yellow. Want to make the “Join” button stand out? Color it orange. Make sure not to highlight too many elements, though; if you do, they may get lost in each other’s company. 5. White space indicates relationships One of the most crucial elements in an interface is the white space between elements. If you’re not familiar with the term white space, it means just that: space between one interface element and another, be it a button, a navigation bar, article text, a headline and so on. By manipulating white space, we can indicate relationships between certain elements or groups of elements. So, for example, by putting the headline near the article text we indicate that it is related to that text. The text is then placed farther away from other elements to separate it and make it more readable. Here’s an example in which white space could be improved:

The text looks all right and is certainly readable, but because the spaces above and below each heading are equal, they don’t separate each piece of text clearly. We can improve this by increasing the white space between each section and also by slightly tightening the line height of the paragraphs:

This results in more clearly defined blocks; we can easily tell which headings go with which pieces of text and can see the separate sections clearly. Good designers often squint or glance at their work from a distance, which lets them see the blocks of elements separated by white space as they merge together. If you cannot see these groups clearly then you may need to tweak your white space. 6. Letter spacing Web design is pretty limiting for typographers. But while there are only a few safe Web fonts and not a great many things you can do to style them, it’s worth remembering that we do still have some level of control. “Tracking” is a term used in the field of typography to describe the adjustment of spacing between letters in words. We’ve got the ability to do this with CSS using the “letter-spacing” property. If used with restraint and taste, this property can be effective in improving the look of your headlines. I wouldn’t recommend using letter spacing on the body text because the default spacing generally provides the best readability for smaller font sizes. Here’s an example of letter spacing in use:

And here’s the CSS code used for the above examples:

h1 { font-family: Helvetica; font-size: 27px; }

h2 { font-family: Helvetica; font-size: 27px; letter-spacing: -1px; }

h3 { font-family: Georgia; font-size: 24px; letter-spacing: 3px; font-variant: small-caps; font-weight: normal; }

The effect can be useful when you want to craft a more aesthetically pleasing or more original heading. Here, I’ve used only a couple pixels for letter spacing, but already it makes a big difference to the style of the font. 7. Auto-focus on input Many Web applications and websites feature forms. These may be search forms or input forms inviting you to submit something. If this form is the core feature of your application or website, you may want to consider automatically focusing the user’s cursor on the input field when the website loads. This will speed things up because users can start typing right away without having to click on it. A good example of this is Google and Wikipedia’s websites.

Upon arriving at Wikipedia.org, the search box is already highlighted, ready to accept text. To automatically focus on input fields, you’ll need a little bit of JavaScript. There are various solutions, and the one you should use depends on the functionality you want to achieve. The simplest way to do it would be to add the following to your body tag:

<body onLoad="document.forms.form_name.form_field.focus()">

Your form code should look something like:

<form method="get" name="form_name" action="#"> <input type="text" name="form_field" size="20" /> <input type="submit" value="Go" /> </form>

Now, every time the page loads, the text field called “form_field” will be automatically selected, ready for input. The only problem with this is that if your users want to return to the previous page using the Backspace key, they will be out of luck because they’ll just be deleting characters in the input field. Thankfully, Harmen Janssen has another simple JavaScript solution you can find here. Harmen’s script allows the Backspace key to go to the previous page when there are no characters left in the input field to delete. 8. Custom input focus While the default look of form elements suffices for most functions, sometimes we want something a little prettier or a little more standardized across various browsers and systems. We can style input fields by simply targeting it with an “id,” “class” or plain old “input,” like so:

input { border: 2px solid #888; padding: 4px; font-size: 1em; background-color: #F8F8F8; }

What’s more interesting is also being able to style the input field when it’s in focus; that is, the state it’s in when it has been clicked. To do this, we need to attach a “:focus” after the “input” property:

input:focus { border-color: #000; background-color: #FFFE9D; }

If you’re using custom backgrounds to style your input field, they may clash with some browsers and operating systems’ default focus styles. For example, here’s a screenshot of a custom-styled form clashing with the default blue OS X glow effect:

In such cases, you could also use the “input:focus” property to remove the default styling. The default blue glow in the screenshot above can be removed by disabling the “outline” property:

input:focus { outline: none; }

The blue glow effect will now be gone:

Obviously you would only want to remove the outline if you’re replacing it with your own styling, so that you don’t negatively affect the accessibility and usability of your forms. 9. Hover controls Some Web applications have extra utility controls, such as edit and delete buttons, that don’t necessarily have to be shown beside every item at all times. They can be hidden to simplify the interface and focus visitors’ attention on the main controls and content. For example, these hover controls are used in Twitter when you hover over messages:

These hover controls can be achieved with some simple CSS code, without any JavaScript. Simply style the <div> with the controls when its parent <div> is in a hover state. Here’s the code to hide and show the controls (using a <div> with the class “controls” inside a <div> with the class “message”):

.message .controls { display: none; } .message:hover .controls { display: block; }

When you hover over the “message” <div>, the “controls” <div> inside it will appear, along with all of its content, giving you the same functionality as shown in the Twitter screenshot above. There may be an issue with accessibility because screen readers may not be able to read the hidden <div>. There are plenty of other ways to hide the inner <div>, such as offsetting it with a negative margin that takes it off the page (e.g. “left-margin: -9999px”), coloring its text the same color as the background or simply placing another <div> on top of it. This technique should of course be used with restraint because you don’t want to hide your important controls; but if used correctly, it can be useful for cleaning up your interface by removing those extra utility links that you don’t want to show up at all times. Note that this doesn’t work in IE6, so you’ll need to override the hiding property in your IE6-specific style sheet or, if you don’t have one, simply use the following IE6-specific code inside the <head> section of your code:

<!--[if lt IE 7]> <style type="text/css" media="screen"> .message .controls { display: block; } </style> <![endif]-->

1. Verbs in labels You can make options dialogs much more usable by thinking through the labels you use on buttons and links. If an error or message pops up and the options are “Yes,” “No” and “Cancel,” you have to read the whole message to be able to answer. Seems normal, right? But we can actually speed things up by using verbs in the labels. So, if instead of “Yes,” “No” and “Cancel,” we have “Save,” “Don’t Save” and “Cancel” buttons, you wouldn’t even need to read the message to understand what the options are and which action to perform. All the information is contained in the button labels.

Using verbs in labels on buttons and links makes the options dialogs more usable because the labels contain all of the information the user needs to be able to make a decision. To Conclude Hopefully, you’ve found a few new techniques that will be useful in your work. As always, using them effectively comes down to restraint and thoughtful implementation. For example, controls that appear on hover may clean up your interface, but they will also increase the learning curve because people may not notice these controls at first. But showing all controls at all times may not be the best strategy either because users would need to scan more things to find what they’re looking for. Striking the right balance between what you show and what you hide is a delicate art and is completely in your hands as the designer. Don’t use a technique just because it exists: use it if it makes sense in your context. 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)

By Steven Snell In recent years, advertising has become a major revenue source for many websites. Not too long ago, online ads were often met with disapproval from visitors, and advertisers were unsure about their value or effectiveness. Today, most visitors have come to expect ads on commercial websites, and advertisers have recognized the potential of various online ad opportunities. Ads have long been a part of print publications, such as magazines and newspapers, and now they essentially have the same role in online periodicals and publications. Although advertising is a concern for website owners and those pushing products or services, it is also has an impact on Web designers, because they have to be able to design and develop websites that can produce ad revenue and still meet the needs of visitors. Clients with websites that depend on ad revenue need a design that provides the necessary screen space and a proper layout for selling ads, and advertisers need placement that will get them the exposure they seek. While advertisements are hardly the primary concern of Web designers in general, not accounting for them will result in a very awkward layout that can either detract from the flow of the website or put the ads in a spot where they will not receive enough attention from visitors. In order to maximize ad revenue for the client, with minimal interference in the appearance and usability of the website, the designer must take advertising needs into consideration throughout the design process. Ads on The Raw Story seem to be squeezed in wherever possible, to the detriment of the content.

Starting with the Basics Of course, not all websites sell advertising space, but a growing number of them do. As the popularity of blogs continues to rise and designers get more requests for custom blog themes, this issue will only become more common. An adequate discussion of the subject requires starting with some basic issues. Why do advertisers pay for ads? Obviously, advertisers buy ads to gain exposure and improve their bottom line. The goals vary from one campaign to the next. Some may be primarily concerned with brand recognition and general exposure, while others are only concerned with sales of products. Online advertisers may be looking for click-through visitors from their ads, but ultimately all advertisers look for a strengthened business as a result of their campaigns. Web designers can have some impact on this issue by their placement of ads. Of course, designers cannot completely sell products or services for advertisers, but ad placement is key to click-through rates and so has a sizeable impact on the success of an ad campaign.

What are advertisers paying for? Are advertisers paying for clicks by visitors? Are they paying for sales conversions? Are they paying simply for the screen space? Each of these is a possibility and depends on the situation. AdSense ads, for example, pay publishers per click. Affiliate ads pay per sale or per action. Direct ads, such as most banner sales, are generally sold at a set price for the screen space and location. Keeping the desires of advertisers in mind throughout the design process is critical if the website is going to be selling ads directly to other businesses. AdSense and affiliate ads can be placed just about anywhere on a website, although the results will vary, but direct ad revenue will depend on what advertisers feel they are getting for their money. If they are paying for prime on-screen real estate, that’s what they’ll expect. Why do websites or businesses publish ads? Advertising can be very lucrative for websites with a large volume of traffic. Although there are other ways to monetize a website, ads are one of the few ways in which a website owner can quickly capitalize on existing traffic without any additional work, such as developing products or providing services. Bloggers publish ads because the revenue allows them to earn income and essentially pay themselves for the time it takes to write content and maintain the blog. News websites sell ads because they typically have large audiences and because their offline business models, such as for printed newspapers, aren’t able to produce as much ad revenue as they have in past years. As a growing number of consumers turn to online publications rather than the daily paper for their news, ad revenue will shift from print publications to online options. In most cases, ad revenue is critical to the success of the business. For this reason, it must be a priority during the design process. For a service-based business that uses a website to sell its services to visitors, the designer’s job includes creating a website that effectively promotes those services to visitors. The same thing can be said of websites and businesses that rely on ad income.

Why are Advertisements an Important Part of Web Design? For website owners and businesses that rely on advertising income from their websites, this is obviously an important part of the website that needs major consideration during the design process. Not having enough space or the right locations for ads will have a dramatically negative impact on the business. Once that happens, attempts will probably be made to move ads or open up new slots for sale, which could cause the website to look awkward and unorganized, because these areas were not originally accounted for in the design. Websites with advertising revenue as their main source of income can be compared to e-commerce websites that depend on selling products in order to continue doing business. No designer is going to create an e-commerce website without making the placement of products, descriptions, and images in the layout a priority. Likewise, website businesses that require ad revenue cannot compromise on advertising space. Advertisements are also a significant part of the design process because of the impact on visitors. Although a website may rely on advertising income, visitors are a critical part of the equation. Without them, ad revenue disappears. The website owner and designer need to incorporate ads in a way that still allows for a positive visitor experience. The Conundrum of Online Ads While website businesses that sell advertisements want and need those ads to be noticed and appreciated by visitors, a delicate balance is required. Aside from made-for-AdSense websites and websites set up solely for affiliate income, a typical website set up for ads needs to send a portion of its visitors away to the websites of advertisers in order to continue generating that revenue, but it also needs to retain a majority of visitors in order to grow itself. Keeping all visitors will result in no ad revenue, and losing all visitors to advertisers will result in no growth for itself. Website owners and designers need to consider this issue during the design process so that the locations and sizes of ads are appropriate and so that the ads produce revenue with minimal negative impact on the website. Offline ad publishers don’t necessarily face the same dilemma. A magazine may run full-page ads throughout the publication, but when readers see an ad that interests them, they don’t necessarily stop reading and put down the magazine. In the online world, a click on an ad could result in a visitor not coming back. Ads can be set to open in a new window to prevent this, but that still doesn’t guarantee that the visitor will come back after clicking the ad. How Do Advertisements Impact the Design of a Website? Regardless of how much attention designers give to advertisements in the layout of a website, ads will in some way impact the design. Ideally, the designer has accounted for specific ad slots in the design and laid out the website accordingly. In this case, ads can be implemented on the website in a way that does not disrupt the flow of content or information and that gives the ads a specific and strategic location. On the other hand, if ads are not adequately considered during the design process, they can look very much out of place, which will disrupt the rest of the website. Layout and design decisions that were made without consideration for ads will rarely work well when ads are incorporated in the website. Layout and Spacing Advertisements can easily take up big chunks of space in the layout of a website. Whether it has one large banner ad or several smaller ones bunched together, the layout will be affected. Some websites will spread out various advertisements throughout the website, others will confine them to a specific area and leave the rest of the website ad-free. The strategy here depends of several factors, but websites in particular industries and niches tend to take similar approaches. For example, major news websites typically have advertisements spread throughout the website’s layout. They may not include several ads in any one specific area, but they do have many spots that contain few ads. CNN.com contains a few advertisements spread throughout the website.

In contrast to news websites, many blogs keep banner ads contained within a designated area of the layout, typically the sidebar, and the rest of the blog may contain no ads. With this approach, the designer needs to account for advertisements in one large area of the layout, but the rest of the website will have little or no need to accommodate ads. Blogging Tips includes six 125 x 125-pixel banners in the right sidebar, and the only other ad is a banner just above the comments on individual posts.

Because ads are often used in sidebars of both blogs and news websites, one major consideration in designing the layout is the width needed to hold ads in the sidebar. For example, many news websites have 300 x 250 banners in their sidebars, so the sidebars must be big enough to contain the banners. If this consideration is not a part of the design process, monetization opportunities and potential income will suffer, or the layout will have to be changed later. Of course, the sidebar isn’t the only common location for ads. Many websites sell ad space in their headers because this location usually brings the highest ad price on the page. In that case, advertising needs to be a consideration when the website is designed or else there will likely be no space available in the header. Typical website headers include a logo/branding area and primary navigation. To include space for advertisements, all of these items could be made to fit in the header design, or primary navigation could be moved elsewhere. CSS Tricks is one of many blogs to include a banner in the header. In this case, the 468 x 60 banner fits nicely in the design of the header.

Colors Web designers can’t control the color or design of banner ads used on their websites, and definitely won’t be able to in future, but they can consider the possibilities when developing a color scheme for the design. Banner ads are often colorful and bright, for the purpose of grabbing the attention of the visitor. If a website is designed with lots of different colors and shades, it could look awkward and too busy with ads that are also full of color, especially when those colors don’t go together. Some websites that display a lot of banners will need a muted color scheme that avoids potential color overload for visitors. In some cases, these websites need the ads to stand out in order to draw more attention to them, and color can be a very effective way of achieving that. Flow One of the challenges designers face with any type of website is to present the content so that the visitor’s eye is drawn to important information. The typical pattern of the eye’s movement on screen and the flow of content in the website’s layout can be influenced by ads. Website owners looking to maximize ad revenue will often include ads in locations where the eye is drawn to, because these locations tend to produce the best results and the most ad revenue. Those who want some ad revenue but with minimal impact on the visitor will keep ads away from the primary flow of content. Examples of this are blogs that place ads within the content of the post or just in the sidebar. Ads directly above or below post titles are typically seen and clicked by more visitors than ads in the sidebar, so they will sell at a higher rate. Decisions here need to be made by the owner of the website, but the designer needs to be aware of the decision so that the ads can be implemented in the design. The New York Times keeps its header and main content area free of ads on article pages, but there is a large area in the right sidebar for ads.

What is the Designer’s Responsibility with Advertisements? 1. To understand the level of priority of advertising revenue. Many websites include no advertisements at all, and others rely on ad revenue to stay in business. Still others include some ads but not as the primary source of revenue. The designer needs to communicate with the client to understand how much of a priority ads should have in the design. If ad revenue is critical to the business, advertising slots will be one of the most significant factors in the layout. If selling products or services is more important, then the products or services should be given priority in the design over any ads that may be included. The designer’s job is not to determine how much of a role ads should play in the website’s design and layout, but he or she should make the effort to completely understand the needs and desires of the client in this area. Starting the design process with the right perspective and being on the same page as the client is critical. 2. To design a website that meets the needs of the clients. Most Web designers would probably prefer never to have to design for ads and to be able to use the allotted space in other ways. However, the client’s needs include a website designed to allow for ad revenue, so these areas must be a part of the design. 3. To design an attractive and usable website that includes ad space. Regardless of whether ads are a high or low priority, the designer needs to create a website that is attractive and gets the job done. Ads can be a difficult element to work with in the design because of the lost space and the interrupted flow, however, the designer must still create an effective website. If there are a lot of ads on the website, care must be taken to still make the website usable for visitors with minimal interference. Trends in Ads and Design By looking at websites that sell ads, particularly those that depend on ads as a major source of income, we see a number of trends: Header ads. Many websites sell advertising space in their header; often this space is located to the side of a logo and above or below a navigation menu. This trend is common across many different types of websites and will likely continue as long as these ads produce solid results for advertisers. The Washington Post actually uses two header ads on article pages. The first is a 300 x 45 banner that sits across from the logo, and below that is a 728 x 90 banner that lies between the logo and the navigation menu.

Lifehacker, like other websites in the Gawker network, has a large header that allows for a 300 x 250 banner. Notice that the website clearly is designed and laid out to suit this size of ad perfectly.

Ads above all content. Instead of having an ad inside, or perhaps beside, the header, some websites place ads completely above everything else on the page, including the header. This puts the ad as high as possible on the page but takes it out of the flow of the content. This minimizes the potential interference of the ad, but it pushes everything else on the page down, and less content will be visible above the fold. This trend is noticeable on a number of news websites. TechCrunch uses a 720 x 90 banner above its header. Only the green border of the body is above this banner.

The L.A. Times also includes a banner above all content, but not on the home page.

Monster places a 728 x 90 banner at the very top of its job search page.

More ads on secondary pages than on home page. Some websites, such as the L.A. Times just mentioned, keep the home page more welcoming to visitors and more user-friendly by using the space for things other than advertisements. However, these websites include ads on other pages. This is another common trend on news websites. The Reader’s Digest home page avoids any ads high on the page.

However, pages of individual articles include a 728 x 90 banner above the header, a 300 x 250 banner at the top of the right sidebar and a 135 x 600 skyscraper in the left sidebar, plus some additional ads lower on the page.

Like Reader’s Digest, Time also uses an almost ad-free home page.

Pages of individual articles include a 728 x 90 header banner and a 300 x 250 banner at the top of the sidebar.

Common banner sizes. As you browse a number of websites, you notice that banners come in all different proportions, but most of them are standard sizes. The Interactive Advertising Bureau has established standard sizes to be used for online ads. While a website owner can sell ads of any dimension, it is usually advisable to stick to the standards because potential advertisers likely already have ads designed for those sizes and would be more likely to buy if spaces of the same sizes were available. Web designers should know the ad dimensions that clients want on their websites. Blogs commonly use 125 x 125 banners, although many other sizes are used as well. Daily Blog Tips is an example of a website with typical blog banner ads. Six 125 x 125 ads are placed in the right sidebar, but the only other ad on the website is a skyscraper lower down in the left sidebar.

Another common dimension for banners is 300 x 250. Many news websites use ads of this dimension in sidebars. Yahoo’s right sidebar contains a 300 x 250 banner right around the fold.

Digg also uses a 300 x 250 banner at the top of its sidebar.

Best Practices for Designers 1. Design to meet the needs of the client The ultimate responsibility of the designer is to the client. The designer should advise the client when needed, but ultimately the website needs to please the client. Although the designer may disagree with the client’s approach to using ads on the website, if the client wants it a certain way, that’s how they should get it. There are many websites that appear to outsiders to have too many advertisements, but without knowing the details of how much income the ads produce and how they affect or don’t affect the audience, it’s impossible to know if it is a good or bad approach for the business. 2. Lay out the website so that ads are a part of the design The websites that look the most natural and normal with advertisements were designed with them in mind. It’s no accident that a banner fits nicely in a specified area of the sidebar. Incorporate ad slots in the layout to achieve the best-looking website possible. Ads that are thrown in will look out of place and will overpower an otherwise well-designed layout. The sidebar on ABC News is sized just right to contain the 300 x 250 banners used throughout the website.

1. Consider future needs You may find yourself in a situation in which you’re designing a website that isn’t particularly ad-heavy at the moment but that could be more dependent on ad revenue in the near future. Many websites start out with few advertisements and then, once the audience is built up, incorporate more ads. Ideally, this would be considered during the design process, and plans would be made for where new ad slots could be placed. Sidebars are generally a good spot to increase the amount of ads without disrupting the layout or the content, but header ads are much more difficult. It’s generally good practice to discuss long-term plans with clients during the initial process so that situations like this can be avoided. If more ads are to be used in the near future, before a redesign is done, it’s possible to hold some spots with temporary content until they are needed for ads. For example, an area could be used to promote something on the website itself, with that content being removed once ad revenue becomes more important.
2. Consider the impact on visitors Designers should make an effort to include ad slots that will appeal to advertisers, but visitors also need to be considered. When it comes to ads, a lot of decisions need to be made and judgment taken about what is appropriate and what would be too much. All of these issues need to be looked at in the context of the website in question, and there are rarely black-and-white answers. What’s Your Opinion? What’s your take on the impact of advertisements on design? When designing a website or a custom blog theme, how much consideration do you give to advertising? About the Author: Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag. (al)

By Jean-Baptiste Jung RSS is one of those technologies that are extremely simple yet extremely powerful. Currently, RSS is the de facto standard for blog syndication, and it is used widely in both personal and corporate settings; for example, in blogs. And because a large percentage of these blogs run on WordPress, we’ll cover in this post some (hopefully) relatively unknown but useful RSS-related tricks and hacks that will help you use RSS in a more effective way — and without unnecessary and chunky WordPress plug-ins. Let’s take a look at 10 useful, yet rather unknown RSS-tricks for WordPress. Each section of the article presents a problem, suggests a solution and provides you with an explanation of the solution, so that you can not just solve some of your RSS-related problems but also understand what you are actually doing. Thus, you can make sure your WordPress theme remains under your control and is not bloated with some obscure source code. 1. Control When Your Posts are Available via RSS

The problem. Have you ever published an article and then immediately noticed an error? Sure, you can edit it, but there’s another problem: the article has already been published in your RSS feed. To avoid this kind of problem, use this recipe to create a delay between the publication of a post and its availability in your RSS feed. The solution. To apply this hack, simply paste the following code into your theme’s function.php file. If your theme doesn’t have this file, just create it. function publish_later_on_feed($where) { global $wpdb;

if ( is_feed() ) { // timestamp in WP-format $now = gmdate('Y-m-d H:i:s');

// value for wait; + device $wait = '5'; // integer

// http://dev.mysql.com/doc/refman/5.0/en/date-and-time-functions.html#function_timestampdiff $device = 'MINUTE'; //MINUTE, HOUR, DAY, WEEK, MONTH, YEAR

// add SQL-sytax to default $where $where .= " AND TIMESTAMPDIFF($device, $wpdb->posts.post_date_gmt, '$now') > $wait "; } return $where; }

add_filter('posts_where', 'publish_later_on_feed'); Code explanation. The above code will add a 5-minute delay to the time between when your post is published on your blog and when it appears in your RSS feed. To change the length of the delay, change the value of the $wait variable on line 9. Sources

Publish your feed later

1. Redirecting WordPress Feeds to FeedBurner Feeds

The problem. Beginner bloggers usually start to use FeedBurner only after they have seen it used on many other blogs and realize how useful and cool this tool is. They sign up and start to use it, but their early readers are already subscribed to their default WordPress feed. Another problem: do you often change your theme? If so, you must be bored having to edit each call to bloginfo(’rss2_url’) and replace it with your FeedBurner feed’s URL. The solution. The solution to both problems described above is simple: use server redirections.

Create a backup of your .htaccess file, located in the root of your Web server. Edit the .htaccess file and add the following code. Don’t forget to modify the feed’s URL with your own feed’s URL.

temp redirect wordpress content feeds to feedburner

<IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTP_USER_AGENT} !FeedBurner [NC] RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC] RewriteRule ^feed/?([_0-9a-z-]+)?/?$ http://feeds.feedburner.com/wprecipes [R=302,NC,L] </IfModule>

Save the file. You’re done!

Code explanation. Each time someone clicks on a link to http://www.yourblog.com/feed, he or she will be redirected to http://feeds.feedburner.com/yourblog. This way, you will have never lost an RSS subscriber, and even if you change your theme twice a day, you’ll never have to manually edit your RSS feed links again. Sources

Redirect WordPress feeds to FeedBurner via htaccess (Redux) How to: redirect WordPress RSS feeds to FeedBurner with .htaccess

1. Insert Ads (or Anything Else) in Your RSS Feed

The problem. Monetizing RSS feeds is currently becoming a common practice, and many blog owners do it to maximize their income. FeedBurner can insert AdSense ads into your feed items, but you need at least 500 subscribers to qualify, and you can’t use any ads other than the AdSense ads provided by FeedBurner. The solution. It is possible, though, to insert other kinds of ads into your RSS feed. You can, for example, use a link to a free WordPress theme only for your RSS subscribers. Follow these simple steps to perform this hack:

Edit the functions.php file of your theme. If your theme doesn’t have a functions.php file, simply create one. Paste the following code into your functions.php file: <?php function insertAds($content) { $content = $content.'<hr /><a href="http://www.wprecipes.com">Have you visited WpRecipes today?</a><hr />'; return $content; } add_filter('the_excerpt_rss', 'insertAds'); add_filter('the_content_rss', 'insertAds'); ?>

Save the file. You’re now displaying your ads in your RSS feed!

Code explanation. I have seen many similar hacks on the Web, but all of them require you to edit WordPress core files to achieve the same result. Of course, editing WordPress core files is a very bad idea because then you would have to re-edit the files each time you upgrade your blog. Instead, this hack uses the add_filter() WordPress function to insert content into your RSS feed without editing any core files. Sources

How to: insert ads in your RSS feed WordPress, ajouter du contenu dans son flux RSS !

1. Format Your Images for Feed Readers

The problem. You took a lot of time to write and format your post and add beautiful screenshots. It looks so good on your blog. Sadly, when the post is displayed in Google Reader or any other RSS reader, it doesn’t look so great. The solution. This is due to the fact that most feed readers display images inline with text:

To avoid this problem, add a CSS class to display the image as a block. WordPress provides the built-in class “center“: <img src="http://78.46.108.98/images/wordpress-rss-hacks/myimage.jpg" alt="This is my image" class="center"/> Sources

How to format images for feed readers

1. Provide Your Readers with a Feed for Each Post

The problem. When a post has lots and lots of comments, it can be hard for readers to follow the conversation. Most WordPress users don’t know this, but our favorite blogging engine has a built-in function for providing an RSS feed for the comments in each post. The solution. Well, this recipe isn’t really a hack or anything: to provide an RSS feed for the comments in a particular post, just call the comment_rss_link() function: <?php comments_rss_link('&raquo; Comments RSS Feed'); ?> Sources

WordPress how to: provide an RSS feed for the comments in each post

1. Exclude Categories from Your RSS Feed The problem. Do you use one of your blog categories to let readers know about your website’s news, or does your blog feature a category that has nothing to do with the rest of your content? If so, it is generally not a good idea to include it in your RSS feed. The solution. Here’s how to get rid of one of the categories in your RSS feed:

First, get the numeric ID of the category you want to exclude. If you don’t know how to get the ID of a particular category, you can learn how here. Once you have the ID of the category you want to exclude from your RSS feed, edit the functions.php file in your theme. Create the file if it doesn’t exist. Paste the following code in it: function myFilter($query) { if ($query->is_feed) { $query->set('cat','-5'); //Don't forget to change the category ID =^o^= } return $query; }

add_filter('pre_get_posts','myFilter');

Save the file, and you’re done!

Code explanation. This hack works exactly the same way as the previous one: create a custom function to exclude the category that you don’t want to appear in your RSS feed, and then use the super-useful add_filter() function to apply it to the pre_get_posts() WordPress core function. Sources

Excluding posts from your WordPress feed How to: exclude categories from your RSS feed

1. Display Any RSS Feed on Your WordPress Blog

The problem. Do you have more than one blog, or do you manage a forum? If so, you may want to be able to display any RSS feed on your WordPress blog. The solution. Many plug-ins can do the job, but they’re not necessary at all. WordPress has a built-in RSS reader that is used, for example, to display news on your dashboard. All you have to do is use it in your theme.

Paste the following code anywhere in your theme (personally, I’d put it in the sidebar, the footer or, even better, the page template): <?php include_once(ABSPATH.WPINC.'/rss.php'); wp_rss('http://feeds.feedburner.com/wprecipes', 3); ?>

Save it and you’re done. It’s as easy as that!

Code explanation. The first thing we have done is include the rss.php file from WordPress core. This file allows us to use the wp_rss() function, which takes two parameters: the first is the RSS feed’s URL, and the second is the number of RSS entries to be displayed. Sources

How to: Display any RSS feed on your WordPress blog

1. Use Category-Specific RSS Feeds

The problem. Many blogs talk about a lot of different topics: design, programming, blogging tips, etc. Have you ever come across a blog in which you have enjoyed only one category of posts? If so, you should definitely consider offering one feed per category to your own readers. The solution. Let’s say you’d like to be able to subscribe only to TheGridSystem’s tools section. The category URL is: http://www.thegridsystem.org/categories/tools/ To get an RSS feed for this category, you simply have to add /feed to the end of the URL: http://www.thegridsystem.org/categories/tools/feed Pretty easy, isn’t it? But pretty useful, too, in my opinion. 9. List RSS Feeds by Category

The problem. If you like the previous hack, you will probably also want to be able to display the names of all your category feeds in a list to your readers. The solution.

Edit any of your theme files, where you want to list your categories and their accompanying feeds. Paste the following code: <?php wp_list_categories('feed_image=http://www.myblog.com/image.gif&feed=XML Feed&optioncount=1&children=0'); ?>

Save the file. You categories will now be displayed, along with their RSS feeds!

Code explanation. This hack uses only the good old wp_list_categories() function, with two parameters. The first is feed_image, which allows us to specify the URL to be displayed as a feed image. The second parameter is feed, which is used to specify the feed format. 10. Get Rid of RSS Feeds the Clean Way

The problem. Let’s say you’re using WordPress as a CMS to manage your online portfolio or your company’s website. In such cases, the RSS feed isn’t that useful, and some people would probably want to remove it. The solution. I have seen many “hacks” on the Web where people say you just have to remove the include on the wp-settings.php core file. I don’t think you should ever edit a core file. Instead, the following hack will do the job. Simply paste this code in the functions.php file of your theme: function fb_disable_feed() { wp_die( __('No feed available,please visit our <a href="'. get_bloginfo('url') .'">homepage</a>!') ); }

add_action('do_feed', 'fb_disable_feed', 1); add_action('do_feed_rdf', 'fb_disable_feed', 1); add_action('do_feed_rss', 'fb_disable_feed', 1); add_action('do_feed_rss2', 'fb_disable_feed', 1); add_action('do_feed_atom', 'fb_disable_feed', 1); Sources

Disable WordPress feed

About the author This guest post was written by Jean-Baptiste Jung, a 26-year-old blogger from Belgium, who blogs about WordPress at WpRecipes and about everything related to blogging and programming at Cats Who Code. You can stay in touch with Jean by following him on Twitter. (al)

Tilt-shift photography is a creative and unique type of photography in which the camera is manipulated so that a life-sized location or subject looks like a miniature-scale model. Below we present 50 beautiful examples of tilt-shift photography. All examples are linked to their sources. We strongly encourage you to explore other works of the photographers we’ve featured in this post. To add good miniature effect to your photographs, shoot subjects from a high angle (especially from the air). It creates the illusion of looking down at a miniature model. A camera equipped with a tilt-shift lens, which simulates a shallow depth of field, is essentially all you need to start. You may also want to take a look at the following related posts:

Beautiful Examples Of High-Speed Photography 35 Fantastic HDR Pictures 45 Beautiful Motion Blur Photos

50 Amazing Examples of Tilt-Shift Photography Vincent Laforet

Baldheretic

http://www.tiltshiftphotography.net

Christopher ChanSydney Apple Store Miniature; Fake tilt shift effect applied to a 3xp HDR.

Vesuviano - Nicola De PisapiaModel of a model of reality. Vietri sul mare (SA) Italy.

Pattagon

Hanna María & Arnar

Sir Hsu

Tiltshiftphotography.net

Lachlan Sear

Automatt

B Tal

Dutchb0y

Eric Lafforgue

Tilt-Shift Photography: It’s A Small World After All

Timmy Toucan

Therealjasonruff

Hamish Grant

darktiger

roevin

Ender079

FoxyMcSlick

patrix

wumpiewoo

marin g

tHE PypEr

Andrew James

Gérard Pétremand

Wmandra

B Tal

Angusleonard

http://www.cityshrinker.com

Jeangenie

Tarkka

Shawn S. Ide

Kurtis Perry

Vladimir.d

Envios

MCMLXXV

oseilloOn the photo: Barcelona, Spain.

Toshio

Timothy Schenck

unknown

Tilt-Shift Videos Beached from Keith LoutitTime-Lapse video of Tamarama Beach, Sydney.

Bathtub III from Keith LoutitTime-Lapse video of Sydney Harbor with tilt-Shift.

Bathtub II from Keith LoutitTime-Lapse video at Sydney with tilt-Shift.

From Julien VignaliTime Lapse video with Tilt-Shift.

Harrowdown Hill from Beggars

From Mrjerz

Multnomah Falls in Miniature from Andrew CurtisTime-Lapse video at Multnomah Falls.

Monde liliputien (illusion d’optique) Uploaded by kronsilds

You can find further videos in a Metafilter round-up of tiltshift videos. How To Make Fake Miniature Tilt-Shift Photos? To add good miniature effect to your photographs, shoot subjects from a high angle (especially from the air). It creates the illusion of looking down at a miniature model. A camera equipped with a tilt-shift lens, which simulates a shallow depth of field, is essentially all you need to start. Resources:

Do-It-Yourself Tutorial: Tilt-Shift Lens Create a tilt-shift lens yourself if you can’t afford to buy one. Focusing the Tilt-Shift Lens Using Tilt-Shift Lenses to Control Depth of Field Using Tilt-Shift Lenses to Control Perspective Why does tiltshift photography make things look tiny? Tilt/Shift Photography Links

And if you don’t have specialized equipment, you can make use of Adobe Photoshop or any other image-editing software. Manipulate the focus in such a way that it gives the image the effect of having been shot with a macro lens. Secondly, increase the saturation and contrast in a way that the color looks like bright paint on a miniature model. Resources:

Tilt-Shift Photography Photoshop Tutorial This tutorial shows you how to make photos of real life-sized subjects look like photos of miniature models. Tilt-Shift Photoshop Tutorial Photoshop Tilt-Shift Fake Model PhotographyWith a very little effort, you can take existing photographs of everyday scenes and make it look like they’re actually of miniature models.

Sources and Resources Here you’ll find links to further articles and related Area for further articles and related resources:

10 Tiny Tokyo Photos Flickr Pool: Tilt-shift miniature fakes Consists of tilt-shift photos created using Adobe Photoshop. Flickr Pool: Tilt-Shift HDR

Related posts Please also consider our previous posts:

Beautiful Examples Of High-Speed Photography 35 Fantastic HDR Pictures 45 Beautiful Motion Blur Photos

About the author Vailancio Rodrigues maintains a blog of his own, Technology Tips, which provides reviews, tips and tricks for various gadgets. (al)

Image captions are an often-overlooked element of Web design. They’re often thought of more in terms of function than form. As long as they include the proper photo credits or identifying information about the image subject, not much more thought is given to them. But image captions are a great place to add a bit more style to your website or to give some unique insight into the subject of the image. Whether the captions are for photos on a news website or design samples in a portfolio, they present an opportunity for reinforcing the overall look of the website. When done properly, they can even add more visual interest and become a distinguishing trademark of a particular brand or website. There are two basic kinds of photo captions. There is the simple, minimalist, down-to-business style. These usually have a simple sans-serif font in white, black or shades of gray. They are usually positioned either to the side or below an image, though sometimes they overlay or are above it. This type is commonly found on news websites but is also seen in portfolios and other websites. The other major style is more graphic. This often include effects, such as the caption only appearing on a mouse-over or a “Details” button displayed that leads to the full caption. While fonts are still generally sans-serif, much more color is used, and the captions are often overlaid on the actual image. These types of image captions are generally seen on portfolio websites of designers and ad agencies. Of course, there are websites that use a crossover-type image caption, displaying elements of both styles. Image Captions: Popular Styling Techniques Designers use a variety of different approaches to style image captions. In most cases designers experiment with colors, using lighter colors on darker backgrounds. Italics are used very often, while the font size of image captions is usually smaller than the body copy. Let’s take a look at the overview of various techniques we have identified during our research.

caption text at the bottom, in italics

caption text at the bottom, with light background color

caption text at the bottom on a semi-transparent background

caption text at the bottom on a dark background

caption text with focus on typography

caption text as an overlay

image surrounded by a background

icons in use

image enumeration in use

captions are right-aligned

captions are right-aligned at the top

captions are centered

1. Simple and Minimalist Image Captions Simple caption designs are the most common image caption designs. They can make a website appear more elegant, but if not integrated carefully into the overall design style of the website, they can end up just plain boring. Here are some that aren’t: Viget.com

A List Apart

The New Yorker

AIGA.org

37Signals

DesignLessBetter.com

Jason Santa Maria

Wired.com

Inspirationbit.com

Astheria.com

AIGA

Garrett Dimon

Design Observer

DesignsensoryDesign portfolio. Image and caption are set against a light gray background, and the caption text itself is in a darker gray.

Reactive Web Design and DevelopmentDesign portfolio. This is about as minimalist as it gets: gray sans-serif type on a white background.

{e} house studioAd agency portfolio. These captions give a lot more information about the images than most, but they stick with the minimal gray-on-white color scheme. They do use a touch of serif type, setting them apart.

Phony LawnGraphic design portfolio. Another website that includes a lot of information about the images but uses a light-gray and white-on-dark-gray color scheme.

Pixelight CreativeWeb design portfolio. The photo captions on this website are light-on-dark and set off to the side of the image.

Les ArtistesArt gallery website. Another minimal caption style, but this time made more interesting with a mouse-over effect.

Bainbridge StudiosDesign portfolio. Simple white and light-gray on black captions set to the side of each image. This website includes a serif font in the captions.

Studio7DesignsWeb design portfolio. Another very simple dark-gray-on-light-gray style, with the image and caption both set against a light-gray box.

CNN.comNews website. A simple but eye-catching caption set on a black, semi-transparent overlay with white lettering.

New York TimesNews website. This is probably one of the simplest caption styles out there, with the photo credit in small gray text and a description of the image in slightly larger same-color type.

PoliticoNews website. Gray background with black type. It doesn’t get much more minimal than this.

MK Multimedia CommunicatieDesign portfolio. This is one of the most elegant photo caption styles listed here, with a mix of serif and sans-serif type in shades of gray, set beside the image on a white background.

Nepal Trek ToursTravel photo gallery. The captions are set in such a way that they make the images resemble Polaroid photos: very fitting for a travel website, and showing that captions can make an impact graphically while remaining subtle and simple.

Thomas ChengPhotography portfolio. Another set of captions that makes good use of typography and a gray-on-white color palette.

Designsensory.com

1. Bold and Graphic Image Captions Graphic image captions make use of brighter colors and bolder shapes to make the image captions stand out. They incorporate the image captions fully in the overall design of the website. Hot pinks, lime green and electric blue seem to be the most popular colors to use. Vibrant captions JeffCroft.com

Typesites

Segd.nl

DesignslicesDesign portfolio. Lime green and hot pink can be a tough combination to pull off, but it’s done beautifully here. The black overlays, both transparent and opaque, add to the graphic appeal.

Graphic Image Captions in Use SuperflousBanter.org

ILoveTypography

DeepAd agency portfolio. The hot-pink header and drop-down details box give this website a very hip feel, while providing all of the pertinent details.

IDEOAd agency portfolio. The semi-transparent, color-coordinated overlays (the colors change depending on the ad’s color scheme) work really well here, and the simple, all-caps typeface works brilliantly.

Power to the PosterPoster design showcase. The transparent color effects of these captions set them apart, and the mix of serif and sans-serif fonts adds interest.

Design SnackWeb design showcase. The rounded corners and monochromatic color palette give a fitting Web 2.0 look to this Web design gallery.

FreshivoreWeb design portfolio. The oversized hot-pink titles and the light-gray meta information on the graphic, paper-like background combine to create a very appealing visual style.

Mayor + BeuschArchitecture portfolio. The mouse-over captions are very bold in lime green, hot pink and electric blue.

1. Hybrid Image Captions These image caption designs combine elements from both simple and graphic designs. They’re a bit bolder than the minimalist designs, often using different colors or more graphic shapes, but more subdued than the bolder, graphic image captions above. Hybrid Image Captions in Use Frederica CauDesign portfolio. The captions on these images provide tons of information, and the electric-blue headers tie in with the border of the image.

KlinkovArt portfolio. The captions for these images are set to the side and include nice blue-green and gray colors.

PixelFuzeDesign portfolio. Another website that makes use of lime green in the image captions, this time combined with electric blue and light gray.

BestWebGalleryWeb design showcase. The grayish-green type and tiny icon set these captions apart.

Jay HaflingWeb design portfolio. The oversized type and overlaid black caption space give these a graphic appeal while actually being quite simple.

SOOboxDesign gallery, I think (I don’t read whatever language this is in). The semi-transparent black overlays with white text are graphic while still being minimalistic. The rounded-corner overlays in the upper-left corner add a bit more visual appeal.

Letter Art GalleryArt gallery website. The simple, all-caps, electric-blue captions are simple while still providing some “pop.”

Aten Design GroupDesign portfolio. The slightly muted electric-blue headers provide some extra visual pop, while the remaining light gray text keeps the caption design from being overwhelming.

ten24 SEOSEO site. Another relatively simple light-gray-on-dark-gray caption design, but with some nice mint-green type.

Albert LoDesign portfolio. Simple serif type over a light background, but with a pale-blue header color.

MSNBCNews website. Very simple, with dark gray and blue type, set off to the side.

PeopleNews website. A caption with a bright-blue background, with white and light-gray type in a serif font.

CLD Web GalleryWeb design showcase. Very simple captions that show the title of the website and its rating in gray and light-blue on a darker, steel-gray background.

Junghoon ParkDesign portfolio. Hot-pink and black sans-serif type on a plain white background.

Addicott WebDark-gray and light-blue sans-serif type on a light-gray background, with the caption widely spaced and underneath the image.

About the author Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She also writes for a number of blogs, including her own, GreenStyle Magazine, which will be relaunching later this year. (al)