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

With the release of Silverlight 1.0 and its subsequent versions, a debate started among designers and developers regarding choosing between Flash and Silverlight. Silverlight faces difficulties in capturing the market because of the maturity of Flash. However, Silverlight has managed to keep up by including certain features that designers and developers have always wanted to see in Flash, such as search engine optimization. In this article, we will discuss some of the technical differences between Flash and Silverlight to help you choose the technology that best suits your needs.

Animation Flash uses the frame-based animation model. In frame-by-frame animation, we create an object for each frame to produce an animation sequence. For example, if you want to move something across the screen in 3 seconds, calculate how many frames 3 seconds will take, then calculate the matrices required for each frame along the way. Keep in mind that the player won’t actually maintain a frame rate unless you embed a blank audio track; otherwise, 3 seconds might turn out to be 2 or 6 or 5.

Silverlight is based on the WPF animation model, which is time-based instead of frame-based, so you define the start and end conditions, and it figures out how to do it. No need to deal with matrices like with Flash. Also, no need to calculate the positions of objects in various frames.

File Size Flash uses a compressed format, and text and images are embedded in the movie, hence the file size of a Flash component is relatively small.

Silverlight uses XAML for its description language, and it is non-compressed, so the size of a Silverlight component is usually larger.

Scripting ActionScript is used to program Flash objects. ActionScript is an object-oriented language with a full range of controls for designing user interfaces. And it can be integrated with back-end technologies that use other languages and frameworks, such as PHP, ASP and Ruby On Rails. It comes with a huge, powerful class library for developing online browser-hosted applications and stand-alone desktop applications.

For Silverlight scripting, you can choose from among a number of programming languages such as Visual C#.Net and Visual Basic.Net, including client-side scripting with JavaScript. C# and VB.NET can be used to write managed code that runs on and uses all of the enhancements and capabilities of Microsoft’s .NET framework.

Video And Audio Flash supports multiple video formats. The latest codec is very high quality, and the bandwidth usage is nice. There is one problem, though: if you create a tool that outputs Flash content, the formats it supports aren’t really used by anyone else. The original video codec, Sorenson’s proprietary H.263 implementation, is a mutant version of H.263. The compression follows the spec fairly closely, but a bunch of features were left out, and you can’t exactly just go find complete specs on how to build your own encoder.

Silverlight implements the industry-standard VC-1 codec for video, and supports WMV and WMA. Just about everyone already has Windows Movie Maker, but if someone doesn’t, it’s not a big deal because Microsoft makes available a free SDK encoder for producing WMA and WMV. So, not only would you be using formats that people would more likely be able to encode themselves, but Microsoft provides your product with SDKs if you want to do the encoding yourself. Sound Processing ActionScript offers a set of sound classes that can be used to generate and control sound in a movie. You can add sounds from the library while the movie clip is playing and control those sounds. If you do not specify a target when you create a new sound object, there are methods to control sound for the whole movie.

Silverlight doesn’t have the low-level audio APIs you would need to write an audio application in the browser. It doesn’t even support playback of WAV files because .NET has very little audio playback support. Accessibility Flash provides rich accessibility features for those who have hearing and vision problems or who rely on keyboard shortcuts. Providing captions for video solves accessibility challenges for people who are deaf and hard of hearing, but people who are blind or have low vision or other physical disabilities need the video playback controls to be keyboard-accessible and to function properly with assistive technologies such as screen readers and screen magnifiers. Users who rely on keyboard access can use a variety of familiar shortcuts to control video. Buttons such as “Play/Pause,” “Stop,” “Rewind,” “Mute” and “Closed Captions” can be tabbed to and activated with the spacebar. Slider controls such as for volume and playhead position controls can be accessed via the arrow keys, and the “Home” and “End” keys can be used to skip directly to the beginning or end of a range. The volume slider also accepts numeric keys to set playback audio levels in one quick step.

Silverlight 3 is the first browser plug-in to provide access to all system colors, allowing people with partial vision to use familiar operating system controls to make changes, such as switching to high-contrast color schemes for ease of readability. These features are far fewer than those provided by Flash. Platform Compatibility Flash supports Windows Vista/XP/2000, Windows Server 2003/2008, Mac OS 10.1/10.5 (PowerPC), Mac OS 10.1/10.5 (Intel), Linux 5, openSUSE 11, Ubuntu 7.10 or later and Solaris 10. Silverlight supports only Windows Vista/XP/2000, Windows Server 2003/2008, Windows Mobile 6, Mac OS 10.1/10.5 (PowerPC) and Mac OS 10.1/10.5 (Intel). Because Linux and Solaris support is missing, users of those operating systems won’t be able to experience Silverlight on their machines. Text Representation/SEO Flash stores fonts using shape definitions and the player doesn’t understand TTF, hence we cannot separate the text layer from the movie. Typically the text written on a flash component was not SEO friendly however Adobe has made the modifications to Flash so that it will be indexable, and the search engines have begun to index Flash. Currently Google is the only search engine that is noticeably reading Flash files. They have worked closely with Adobe to develop the right toolset for the Googlebot in order to read the files for indexing. Yahoo is working on it and MSN is working with their own format, Silverlight, so they probably won’t be developing the toolset necessary to read Flash files. To read more about how to make Flash SEO friendly, please read the following articles:

How to SEO Flash Google learns to crawl Flash

In Silverlight applications, user interfaces are declared in XAML and programmed using a subset of the .NET Framework. XAML can be used for marking up the vector graphics and animations. Text is deployed on web server as separate entity and can be read and accessed separately. Textual content created with Silverlight is searchable and indexable by search engines as it is not compiled, but represented as text (XAML). Supported Image Formats Flash supports almost all image formats. Silverlight supports only PNG and JPEG file formats. Some other file formats are supported by Silverlight but in a limited way. A full list can be found here. Socket Programming The XMLSocket object implements client sockets that allow computers running the Flash player to communicate with a server computer identified by an IP address or domain name. To use the XMLSocket object, the server computer must run a daemon that understands the protocol used by the XMLSocket object. The protocol is as follows:

XML messages are sent over a full-duplex TCP/IP stream socket connection. Each XML message is a complete XML document, terminated by a zero byte. An unlimited number of XML messages can be sent and received over a single XMLSocket connection.

Silverlight doesn’t support socket programming. Silverlight supports sockets programming through the System.Net.Sockets namespace. Silverlight supports asynchronously sending data back and forth across a socket over ports ranging from 4502 to 4534. Silverlight supports cross-domain socket communications between a Silverlight application and any server, provided that a special security policy file is in place on the server. Webcam Support Flash has webcam and microphone support for live video and audio transmission, and using them is really easy in Flash. It takes only a few lines of ActionScript code to invoke the camera object.

Camera.get Returns a default or specified camera object, or null if the camera is not available.

Camera.setMode Sets aspects of the camera capture mode, including height, width and frames per second.

Camera.setMotionLevel Specifies how much motion is required to invoke Camera.onActivity(true) and how much time should elapse without motion before Camera.onActivity(false) is invoked.

Silverlight doesn’t support webcam or microphone. Deployment The Flash deployment package contains only a single Shockwave (SWF) file, and all images, text and animations are incorporated in this file. Because of the compressed nature of a Flash component, its images and text are not indexed by search engines, and thus not searchable. The deployment process of Silverlight is far more complex; all individual components need to be deployed separately. The following components typically get sent to the client for each Web request of Silverlight:

XML files, DLL files (if necessary), Silverlight.js file, Any other JavaScript file, Resources (images, audio, video).

Read the full documentation on Silverlight deployment. Windows Application A Flash movie can be compiled into a Windows application and run as a standalone EXE file. It can also be played on a desktop that has an appropriate Flash player.

Silverlight doesn’t support playing the movie as a Windows application. Media Streaming Flash provides no such service to host the content and application with them. Thus, building a video website with Flash is not as cost-effective as building one with Silverlight. Microsoft Silverlight Streaming by Windows Live is a companion service for Silverlight that makes it easy for developers and designers to deliver rich media as part of their Silverlight applications. The service allows Web designers and developers to host and stream cross-browser media and interactive applications that run on both Windows and Mac. This service can be combined with Microsoft Expression Studio and other third-party tools to create and develop interactive contents. Silverlight Streaming by Windows Live is currently in beta testing and offers 10 GB of free hosting for rich-media applications.

Conclusion Selecting the right technology for rich Internet applications is often critical, and choosing between Flash and Silverlight depends entirely on your requirements. If you expect that some of your users will be on Linux or Solaris, then you should go with Flash. If you want your website to be indexed by search engines, then Silverlight may be better. Besides, as Doug S. is points out in the comments, it’s worth noticing that a minority of web users actually have a Silverlight plugin installed on their machine, while most users do have Flash-support. The Flash Player 9 and higher support streaming of the H.264 video codec which means anyone with a video program that can output an MP4 can stream to Flash. There are literally hundreds of free apps on Mac, PC and Linux that can do this. It’s also important to mention that the latest version of Flash Player supports 3D rendering while Silverlight does not and that SWF, FLA, FLV, and AS are all open-standard formats, while Silverlight is 100% proprietary. The following table summarizes the features discussed above. Rather than including arrows to indicate whether each platform has a particular feature, we’ve simply marked “better” to show the areas in which each technology beats out the other.

Features Flash Silverlight

Animation

better

File size better

Scripting

better

Video/Audio

better

Sound processing better

Accessibility better

Platform compatibility better

Text representation/SEO

better

Supported image formats better

Socket programming better

Webcam support better

Deployment better

Windows application better

Media streaming

better

Further Resources The following articles are suggested for further reading:

An Overview of Silverlight Silverlight vs. Flash: An Analysis Report Flash vs. Silverlight: Theming and Styling Flash vs. Silverlight: Words and Numbers

About the Author Muhammad Usama Alam is a software engineer and Web developer with over 8 years of experience in designing and developing business solutions for the enterprise. He also blogs at SmashingApps. (al)

© Muhammad Usama Alam for Smashing Magazine, 2009. | Permalink | 52 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: flash, silverlight

Regular expressions (or regex) are a powerful way to traverse large strings in order to find information. They rely on underlying patterns in a string’s structure to work their magic. Unfortunately, simple regular expressions are unable to cope with complex patterns and symbols. To deal with this dilemma, you can use advanced regular expressions. Below, we present an introduction to advanced regular expressions, with eight commonly used concepts and examples. Each example outlines a simple way to match patterns in complex strings. If you do not yet have experience with basic regular expressions, have a look at this article to get started. The syntax used here matches PHP’s Perl-compatible regular expressions. 1. Greediness/Laziness

All regex repetition operators are greedy. They try to match as much as possible in a string. Unfortunately, this might not always be a desired effect. Thus, lazy operators are used to solve this problem. They only match the smallest possible pattern and are used by adding a ‘?’ after the respective greedy operator. Alternatively, the ‘U’ modifier may be used to make all repetiton operators lazy. Differentiating between greediness and laziness is key to fully understanding advanced regular expressions. Greedy Operators The * operator matches the previous expression 0 or more times. It is a greedy operator. Consider the following expression: preg_match( '/<h1>.*<\/h1>/', '<h1>This is a heading.</h1> <h1>This is another one.</h1>', $matches );

Recall that a . means any character except a new line. The above regular expression is looking for an h1 tag and all of its contents. It uses the . and * operators to constantly match anything inside the tag. This pattern will match: <h1>This is a heading.</h1><h1>This is another one.</h1>

It returns the whole string. The * operator will continuously match everything — even the middle closing h1 tag — because it is greedy. Matching the whole string is the best it can do. Lazy Operators Let’s change the above operator by adding a ‘?’ after it. This will make it lazy: /<h1>.*?<\/h1>/

The regex now fulfills its duty and matches only the first h1 tag. Another greedy operator that uses this same property is {n,}. This matches the previous expression n or more times. If it is used without a question mark, it looks for the most repetitions possible. Otherwise, it starts from n repetitions:

Set up a String

$str = 'hihi';

Match it using the greedy {n,} operator

preg_match( '/(hi){1,}/', $str, $matches ); # matches[0] will be 'hihi'

Match it with the lazy {n,}? operator

preg_match( '/(hi){1,}?/', $str, $matches ); # matches[0] will be 'hi'

1. Back Referencing

What it does Back referencing is a way to refer to previously matched patterns inside a regular expression. For example, take a look at this simple regex that matches an expression in quotes:

Set up an array of matches

$matches = array();

Create a String

$str = "\"This is a 'string'\"";

Traverse it with regular expressions

preg_match( "/(\"|').*?(\"|')/", $str, $matches );

Print the whole match

echo $matches[0];

Unfortunately, this will not correctly match the string. Instead, it will print: "This is a '

This regular expression matches the opening double quote but finds a different type of quote to close it. This is because it was given the option of picking a double or single quote at the end. In order to fix this, you can use back referencing. The expressions \1, \2, …., \9 hold references to previously captured subpatterns. The first matched quote, in this case, will be held by the variable \1. How to Use It In order to apply this concept to the aforementioned example, use \1 in place of the last quote: preg_match( '/("|\').*?\1/', $str, $matches );

This will now correctly return: "This is a 'string'"

Remember that back referencing may also be used by preg_replace. Note that instead of \1 … \9, you should use $1 … $9 … $n (any number of these will work). For example, if you want to replace all paragraph tags with text that represents them, use: $text = preg_replace( '/<p>(.*?)<\/p>/', "&lt;p&gt;$1&lt;/p&gt;", $html );

The $1 back reference holds the text inside the paragraph and is being used in the replace pattern itself. This completely valid expression shows an easy way to access matched patterns even while replacing. 3. Named Groups When using multiple back references, a regular expression can quickly become confusing and hard to understand. An alternative way to back reference is by using named groups. A named group is specified by using (?P<name>pattern), where name is the name of the group and pattern is the regular expression in the group itself. The group can then be referred to by (?P=name). For example, consider the following: /(?P<quote>"|').*?(?P=quote)/

The above expression will create the same effect as the previous back reference example, but by instead using named groups. It is also significantly easier to read. Named groups are also useful when sifting through the array of matches. The name given to a specific pattern is also the key of the corresponding matches array. preg_match( '/(?P<quote>"|\')/', "'String'", $matches );

This will print "'"

echo $matches[1];

This will also print "'", as it is a named group

echo $matches['quote'];

Thus, named groups not only make code easier to read but also organize it. 4. Word Boundaries

Word boundaries are places in a string that come between a word character and a non-word character. The specialty of these boundaries is the fact that they don’t actually match a character. Their length is zero. The \b regular expression matches any word boundary. Unfortunately, boundaries are so often skimmed over that many do not recognize their real significance. For example, let’s say you want to match the word “import”: /import/

Watch out! Regular expressions can be tricky. The above expression will also match: important

You may think it is as simple as adding a space before and after import to prevent these bogus matches: / import /

But what about this case? The trader voted for the import

When import is at the beginning or the end of a string, the modified regex will fail. Thus, splitting this up into cases is required: /(^import | import | import$)/i

Looking back at our regular expression, it does not take periods or other punctuation into account. Just to match this single word, a regular expressions may look like this: /(^import(:|;|,)? | import(:|;|,)? | import(.|\?|!)?$)/i That’s a lot of code to match just a single word. This is why word boundaries are so significant. To accomplish the above statement and many other variations with word boundaries, all that is necessary is: /\bimport\b/

This will match every case above and more. \b’s flexibility comes from the fact that it matches a zero-length string. All it matches is an imaginary space between two characters. It checks if one of the characters is a non-word character and the other is a word character. If so, it matches it. If the beginning or end of a string is encountered, \b treats it as a non-word character. Because the i in import is still considered a word character, it will match import. Note that the opposite of \b is \B. This operator will match the space in-between two word or two non-word characters. Thus, if you would like to match ‘hi’ inside another word, you could use: \Bhi\B

1. Atomic Groups

Atomic groups are special regex groups that are non-capturing. They are usually used to increase the efficiency of a regular expression, but may also be applied to eliminate certain matches. An atomic group is specified by using (?>pattern): /(?>his|this)/

When the regex engine matches an atomic group, it will discard backtracting positions that came with all tokens inside it. Consider the word ’smashing’. Using the above regular expression, the regex engine will first try to match the pattern ‘his’ in ’smashing’. It will not find a match. At this point, the atomic group will kick in. The engine will discard all backtracking positions. This means that it will not search for ‘this’ inside ’smashing’. Why? If ‘his’ did not return a match, then obviously ‘this’ (which includes ‘his’) will not return positive either. The above example did not have many practical uses. We might as well have used /t?his?/ instead. Look at the following: /\b(engineer|engrave|end)\b/

If the regex engine is given the word ‘engineering’, it will correctly match ‘engineer’. The next word boundary, \b, will not match. Thus, it will move on to the next match: engrave. It realizes that the ‘eng’ matches, but the rest do not. Finally, ‘end’ is attempted and also failed. If you look carefully, you will realize that once the engine matches ‘engineer’ and fails the last word boundary, it can not possibly match ‘engrave’ or ‘end’. These two matches are smaller words than ‘engineer’, and thus the regex engine should not continue with the other trials. /\b(?>engineer|engrave|end)\b/

The above is a much better alternative that will save the regex engine time and improve the code’s efficiency. 6. Recursion

Recursion in regular expressions can be used to match nested constructs, such as parentheses, (this (that)), and HTML tags, <div></div>. They require the use of (?R), an operator that matches recursive sub-patterns. Consider the regular expression that matches nested parentheses: /(((?>[^()]+)|(?R))*)/

The outermost parentheses in this regular expression match the beginning of the nested constructs. Then comes an optional operator, which can either match non-parenthetical characters (?>[^()]+) or the whole expression again in a sub-pattern, (?R). Notice that this operator is repeated as many times as possible to match all nested parentheses. Another example of recursion at work is the following: /((?>[^]+)|((?R)))*/ The above expression combines character groups, greedy operators, back-tracking, and atomic groups to match nested tags. The first parenthesized group ([\w]+) matches the tag name for use later in the regular expression. It then proceeds to match the rest of the tag. The next parenthesized sub-expression is very similar to the one above. It either matches non-tag (?>[^]+) characters or recurses over another tag (?R). Finally, the last part of the expression matches the close tag. 7. Callbacks

Certain matches in a pattern may require special modifications. In order to apply multiple or complex changes, callbacks can be used. A callback is used for dynamic substitution Strings in the preg_replace_callback function. They take in a function as a parameter to use when a match is found. This function receives the match array as a parameter and returns a modified string that is used as a replacement. As an example, consider a regular expression that changes all words to uppercase in a given string. Unfortunately, PHP does not have a regex operator that changes a character to a different case. To accomplish this task, a callback may be used. First, the expression must match all letters that need to be capitalized: /\b\w/

The above uses both word boundaries and character classes to work. Now that we have this expression, we can write a callback function: function upper_case( $matches ) { return strtoupper( $matches[0] ); }

upper_case takes in an array of matches and returns the whole matched pattern in uppercase. $matches[0], in this case, represents the letter that needs to be capitalized. All of this can now be put together using the preg_replace_callback function: preg_replace_callback( '/\b\w/', "upper_case", $str );

That is the power of a simple callback. 8. Commenting

Commenting is not a way to actually match strings, but it is one of the most important parts of regular expressions. As you dive deep into larger, more complex expressions, it becomes hard to decipher what is actually being matched. Using comments in the middle of regular expressions is the perfect way to minimize such confusion. To place a comment inside a regular expression, use the (?#comment) format. Replace “comment” with the word(s) of your choice: /(?#digit)\d/

It is especially important to comment regular expressions that you release to the public. Users of your regex will be able to easily understand and modify the pattern to meet their needs. It can even go so far as to help you decode it when revisiting a program. Consider using the “x” or (?x) modifier for free-spacing mode with comments. This causes a regular expression to ignore white space between tokens. All spaces can still be represented with [ ] or \ (a backslash and a space): / \d #digit [ ] #space \w+ #word /x

The above is the same as: /\d(?#digit) \w+(?#word)/

Always create well-documented code. Further Resources

Regular-Expressions.infoComprehensive website on regular expressions Cheat SheetInformative regular expressions cheat sheet Regex GeneratorJavaScript regular expressions generator

About the author Karthik Viswanathan is a high-school student who loves to program and create websites. You can view Karthik’s work on his blog, Lateral Code, and explore the most popular articles on the Web through his online Twitter application. (al)

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

Post tags: expressions, php, regex, regular

Sometimes small changes can have huge effects. Concerning conversion rates, which is the proportion of website visitors who submit their contact information or make a purchase, better Web design leads directly to greater revenue. Most online store designers who want to optimize their conversion rates only concentrate on the “inner” part of the shopping process, the sales funnel. They focus on product pages, the shopping cart and check-out-process. This is good, but not necessarily sufficient. It is equally important that advertisements convert – just as the simple fact that users find the URL and that both (ads and URLs) perfectly fit the image conveyed by the landing page. Sound practices make for the most successful conversions. There are thousands of tips and tricks for increasing conversion rates. There are various marketing techniques that aim at simplyfing the purchasing and the checkout processes. This article is the first part of our new 3-part-series “Optimizing Conversion Rates” that covers most important strategies and techniques that will help you boost your conversion rate. The second part will be published next week, and the last part will be published the week after that. The first article deals with “proper” advertising, building up trust and credibility and the handling of shipping costs. Create Suitable Ads Let’s look at traffic coming from an online advertising campaign. This is traffic you can directly influence by changing content, display frequency and display location. Relevance The key to good ad performance is relevance. And the most important key to relevance is “negative selection.” Look at the platform your ad is running on; Google, for instance. Are there users on that platform who would want nothing to do with your product? Are there keywords people would use in a search that might mislead to your website? Use negative selection to filter visitors whom your products are not targeted to. This mechanism will work as a magnet for more relevant visitors. A good example is local content. If you have a car repair garage located in Birmingham, England, you should include this location, because users from London would be less likely to become customers. What’s more: If irrelevant users click on your ad, they will cost you PPC fees and lower your score in Google’s ranking. Connection between a search term and an ad A second and very important criterion is to establish a strong connection between a search term and your ad. A search term can tell you a lot about a user’s search context. And your ad has to address that context by delivering the right answers. To start simply, divide your audience into at least two segments:

Novices who know very little about your product, your company or even the industry. You will have to explain your product to these users. Experts who search for the exact differences between your and your competitors’ products.

Now analyze the keywords you have chosen. Divide them in two groups, and develop two or more variants of your ads that respond to the needs of each of these audiences. The same applies to display advertising. The more generic the host page (whether a portal, home page or navigational page), the more basic the information your users will need. This applies as much to the content of your ad as to its graphical elements. Google Search Results suggest that Creed is the “worst band in the world”. If there was a possibility to influence Google index, the band “Creed” would probably have done it. And the ad alone mustn’t only demonstrate relevance to your visitor. Your landing page must meet users’ expectations as well. Both your landing page and ad should work as an informational unit. A not-so-savvy-novice who is looking for a solid MP3-player may be interested in the battery life and price, while an expert may want to know full technical details such as the technology used, available ports, advanced features or maybe the coolness of the design. To sum up, relevance is probably the most important criterion for successful conversion. This separates good communication from inefficient communication. Even the location or size of your company can be relevant if users fear that their order may not be delivered on time, intact or at all. Simple page elements like a photo of your company’s building or storage depot can do a lot for credibility. Build Up Trust And Credibility You may already know this, but there is something deeper than just relevancy. Sales can be lost if a potential customer decides to ignore certain sellers or certain kinds of sellers. This even holds true for retailers selling on eBay or by posting ads on Google. Some people mistrust eBay sellers in general. In a study by the Foresee Institute, researchers found out that only 49% of Internet users in the US are willing to use native online payment methods like PayPal and Google Checkout. Consider the payment method, for instance. Most eBay sellers use prepayment, which is very convenient for the seller, but may scare away the potential customer. In a study by the Foresee Institute, researchers found out that only 49% of Internet users in the US are willing to use native online payment methods like PayPal and Google Checkout (see the section “How Satisfaction Influences Loyalty and Purchase Intent” in the Apparel & Accessories Report (pdf)). This distrust of transmitting sensitive payment data and integrated security systems in general is a good lesson in what it takes to build trust. Money-back guarantee Money-back guarantees can make a purchase easier, even when mistrust or uncertainty have a significant impact on the customer’s deicision-making. Offering your customers such a guarantee, you build up the feeling of trust and comfort, making it easier for users to actually purchase a product. In Europe money-back guarantees are required by law, so many European companies use it as a sound marketing argument in their campaigns. Sitepoint promises a no-risk money-back guarantee for its books. That’s fair, honest and sounds trustworthy. It may also be a good idea to add the “money-back guarantee” into the shopping cart by default, so they are packaged in warm feelings, making it a central focus of users. These considerations may help you to build up a trustworthy environment for your customers, but they alone will not necessarily be able to make a difference. In fact, trust and credibility have a subtler, more emotional dimension. A professional design is necessary to differentiate your business from that of amateurs and students who sell out of their grandma’s living room. How about showing photos of your team members? Tell your customers your story, create a relationship with them, show them your “human touch” by talking with them honestly. Provide your customers with e-mail addresses of the team, phone numbers, and, of course, e-mails – that’s another sign of confidence. And, of course, if you have excellent user recommendations on eBay, LinkedIn or any other price comparison websites, you can display those, too. And you should! Don’t Push The Customer Away With Shipping Costs This is almost the same point as the one about money-back guarantees, but a bit more nuanced. Too many sellers have abused their customers trust by hiding shipping costs to generate extra revenue. This has now become obvious to most users. It’s not just about the added costs; it’s about fooling customers. The aforementioned Foresee study analyzed 10,500 shopping transactions in 30 online stores. By far the most important feature that significantly improved the conversion rate was the simple fact that a seller didn’t charge any shipping costs; it was the decisive factor for 34% of all users. There are two reasons for this. First, when shipping charges aren’t added later, users will know the final price of their order early in the shopping process, maybe even when they see the online ad. For you as a seller it means that you remove the barrier between user’s decision to buy a product for a given price and his confusion about the “final” price during the checkout procedure. Secondly, the price is more “transparent” and users can easier decide if they are interested or not; besides, they can also easier compare a product with other products. The customer not only compares online stores but also compares online stores to the “real” ones. Purchasing from a real store can sometimes be faster than doing it online, and no shipping costs can certainly compensate for that. Sometimes, particularly if the seller is shipping worldwide, delivery costs can not be avoided. In these situations make sure that the available shipping options are clear, transparent and easy to understand. The customer came to you to purchase a product, not to spend minutes on decrypting the complex costs matrix. Consider the following two examples (screenshots below). The more complicated a shipping costs table is, the more likely a user is to cancel the checkout process and look for alternatives. Even a tiny doubt or confusion can completely change customers’ decision, so you better do a good job of making it easier for them to finish the checkout process. This isn’t helpful for customers: a complex overview of shipping terms and costs on Badgepoint. A simple overview of shipping costs on Selectspecs.com. However, if free shipping is a viable option in your business, you may want to try it out, since it may significantly boost your conversion rate. Of course, free shipping is not really “free shipping,” at least not for the retailer. But there are some strategies that can be adopted: a minimum order price or value, for example. But do not block the user from ordering if this minimum is not reached. Add a shipping cost and call it a “Small-order fee.” Inform the user clearly how much more they will need to purchase to qualify for free shipping. Another idea: how about offering users free shipping on their first transaction? You could look at it as an investment to gather their registration data. Or specify a certain time frame in which customers can redeem the free shipping offer and state it on the ad. The technique is similar to issuing coupons for in-store shopping, and it puts more pressure on the customer – but in a positive, money-saving way. You simply have to calculate how much more overall revenue you can generate by dropping shipping costs. Try it ou – you won’t be disappointedt!

What topics would you like to read about more on Smashing Magazine?(answers)

Stay Tuned This article is the first part of our new 3-part-series “Optimizing Conversion Rates”. The second part will be published next week, and the last part will be published the week after that.

Optimizing Conversion Rates: Less Effort, More Customers The Conversion Is All About Usability Use Conversions To Generate More Conversions

Hence, you may want to subscribe to our RSS-feed and follow us on Twitter . Any ideas or suggestions? Comment on this article!

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

Post tags: conversion, customers, e-commerce

By Greg Borenstein and Michael ‘MJFreshyFresh’ Jones Rails is an model-view-controller Web framework written in the Ruby programming language. One of its great appeals is being able to quickly crank out CRUD-based Web applications. A big advantage of Rails over other frameworks is that it values convention over configuration. If you follow the correct conventions, you can avoid lengthy configuration of files, and things just work! Therefore, you spend less time writing boring config files and more time focusing on business logic.

Now, we love Rails. But don’t get us wrong. Like any tool, it’s not the perfect solution to every problem. A lot of the biggest complaints people have about the framework come from using it in situations where something simpler, smaller and more lightweight would do just fine. We love Sinatra for anything with minimal server-side involvement. Merb is another excellent minimal framework. And nothing beats apps that run completely in the browser with [removed] they can be deployed nearly for free, can scale almost infinitely and never have to be restarted. In the overview below we present 10 useful tips, ideas and resources for Ruby on Rails-developers (both newbies and professionals). Please feel free to share your tips, ideas and suggestions in the comments to this post! 1. Plug-Ins Save Time Rails has a well defined plug-in structure that enables you to easily install and use plug-ins in your application. David Heinemeier Hansson, the father of Rails, once stated that he uses five to six plug-ins in each Rails application. There’s an old nugget of developer wisdom that “the best code is no code at all.” Part of what makes us so productive when developing in Rails is that all the code that we don’t have to write because someone else in the community has already written a plug-in that provides the functionality we need. There are a few ways to install a plug-in in Rails, however the most common is using script:

Install from a git repo

script/plugin install git://github.com/mislav/will_paginate.git

Install from a url

script/plugin install http://topfunky.net/svn/plugins/calendar_helper You can save yourself a ton of time and hassle by becoming good at searching the Web (and especially the almighty GitHub). A couple of places to find plug-ins are Core Rails, Railsify and Rails Plug-in Directory. Need to integrate with an existing API or consume some kind of standard format data? Need tagging, pagination, or another common Web application feature? Odds are that some great Rails or Ruby developer out there already has a project going that will get you at least most of the way there. 2. Testing is Fun and Easy with Rspec For most people, the word “test” brings back scary memories of school exams. When working with Rails, however, automated testing can make your development experience much more enjoyable. While lots of people have strong, nearly religious, opinions about them, at their core, automated tests are just little helper programs you write that run bits of your main code to make sure they do the right thing. When done right, testing will improve your workflow and increase your confidence in the results. Rails ships with a test framework baked right in, but for the last couple of years all the cool kids have been using an alternative called Rspec. Rspec’s biggest advantage is its syntax for specifying tests: describe "My Cool library" do before do @cool = Cool.new end

it "should be full of penguins." do @cool.get_penguins! @cool.penguin_count.should == 10 end

it "should melt if it gets too warm" end What’s great about Rspec’s syntax is how much English it uses. The describe block that sets the context and each assertion within it takes strings that you use to explain what your code should do. Often, this is the most important stage: you sit down to write the assertion, getting as far as you can, and then you think, “Right, what should this code actually do then?” Because Rspec lets you leave off the block that implements the assertion (as in the second melt example), you can quickly brainstorm all of your functionality, and then go back and implement the tests later as you write the code. In the meantime, Rspec will consider those tests as “pending” and give you little reminders about them in your test runs. Besides helping you write code in the first place, another great thing about tests is that, once you have enough of them, they let you see how all of your code is related, making it easy to know if your recent change broke anything else in your application. Rspec makes it easy to get good test coverage through the use of custom generators that create the tests right along with the rest of your code: $ script/generate rpsec_scaffold MyModel Once you’ve got tests to ensure that the basic functionality works successfully, you can make changes and add new code with confidence without worrying about introducing invisible bugs. As long as you run your tests regularly, you’ll know as soon as you break something. And as GI Joe taught us, knowing is half the battle! 3. Save Time, Use Rake Projects often include more than just application-specific code. Sample data have to be created, Web services have to be queried, files have to be moved, code snippets rewritten, etc. Resist the urge to shell script or to cram in a migration or controller. Use Rake. It rocks!

Rake is a build tool written in Ruby, very similar to make. Rails projects have several Rake tasks already defined; to see these, run the rake -T command. macbook$ rake -T

rake data:bootstrap # load in some basic data [caution: will nuke and replcace cate... rake db:create:all # Create all the local databases defined in config/database.yml rake db:drop # Drops the database for the current RAILS_ENV ... rake ts:run # Stop if running, then start a Sphinx searchd daemon using Thi... rake ts:start # Start a Sphinx searchd daemon using Thinking Sphinx's settings rake ts:stop # Stop Sphinx using Thinking Sphinx's settings Adding your own Rake tasks is quite easy. In the example below, you see that the task is name-spaced and has a description and task name, allowing you to write in Ruby. namespace :data do desc "load in some basic data [caution: will nuke and replcace categories, categorizations and inventory items]" task :bootstrap => :environment do # clean out existing: [Category, Categorization, InventoryItem].each{|m| m.find(:all).each{|i| i.destroy}} InventoryItem.create! :name => "Compass" c = Category.create! :name => "Basic Apparel"

["Men’s Heavyweight Cotton T",
"Men’s Heavyweight Polo",
"Women’s Organic Cotton Fitted T",
"Women’s Fitted Polo",
"Children’s T-Shirt",
"Jr’s Distressed Hoodie",
"Hemp Messenger Bag"].each do |name|
  c.inventory_items.create! :name => name
end

...

end 4. Track Application Exceptions Exceptions happen, and when they do, you want to know about them! Your client shouldn’t be the one telling you that a problem has occurred; you should already be aware of the issue and working to resolve it. Exception notification has been available in Rails for a while. There are exception notification plug-ins that make it easy to be notified. However, some services such as Hop Toad and Get Exceptional add a lot of value to your application.

Both of these services are easy to install and provide a great UI for tracking your exceptions. You can even sign up for a free account to try things out. By centralizing the application exceptions, you are able to see how frequently these exceptions occur, what environment they occur in (a particular browser? a particular location?), what parameters were present and the full stack trace. This centralization of data helps you see patterns and resolve the issue more quickly, which results in a better application and happier users. 5. Mix and match between frameworks and servers with Rails on Rack As of version 2.3, Rails runs on top of Rack. Rack makes it possible to mix and match between Ruby Web frameworks and servers. If you’re using a framework that supports it (like Rails, Sinatra, Camping, etc), you can choose from any of the servers that do also (Mongrel, Thin, Phusion Passenger, etc.), and vice versa.

In addition to introducing all kinds of new options for deployment, this change means that Rails now has access to the exciting world of Rack middleware. Because Rack lives at the intersection of your app and your server, it can provide all kinds of common functionality directly. A great example of this is Rack::Cache. Rack::Cache provides a caching layer for your application that you control simply by sending the correct headers in your responses. In other words, all you have to do is install a bit of code in the Rack config file: require 'rack/cache'

use Rack::Cache, :metastore => 'file:/tmp/rack_meta_dir', :entitystore => 'file:/tmp/rack_body_dir', :verbose => true And make sure your controller actions send the right headers (for example, by setting request.headers["Cache-Control"]) and Bam!, you’ve got caching. 6. Easy Data Dumping You’ll often need to get data from production to dev or dev to your local or your local to another developer’s local. One plug-in we use over and over is Yaml_db. This nifty little plug-in enables you to dump or load data by issuing a Rake command. The data is persisted in a yaml file located in db/data.yml. This is very portable and easy to read if you need to examine the data. rake db:data:dump

example data found in db/data.yml

campaigns: columns: - id - client_id - name - created_at - updated_at - token records: - - "1" - "1" - First push - 2008-11-03 18:23:53 - 2008-11-03 18:23:53 - 3f2523f6a665 - - "2" - "2" - First push - 2008-11-03 18:26:57 - 2008-11-03 18:26:57 - 9ee8bc427d94 7. Keep Your Constants in One Place All applications have constants, variables that are defined with data that don’t change, such as the name of the application, the tagline, values for crucial options, etc. We use the Rails initializer feature to define a config/initializers/site_config.rb for housing these constants. By using this convention, all developers on a project know exactly where to look for the constants and can quickly make changes. Many people have questions about when to put a constant in the site_config.rb instead of the class it is used in. For a constant that are only used in a single class, we suggest putting it in that class. However, if the constant is used in more than one location, put it in the site_config.rb. For more on constants, have a look at Rubylearning.

File config/initializers/site_config.rb

REPORT_RECIPIENT = 'jenn@scg.com' REPORT_ADMIN = 'michael@scg.com' 8. Console for Working on Code Sometimes you may have code that you’re curious about. Will it work this way? What’s the output? What can I change? Rails ships with a wonderful tool called console. By running script/console you will enter an interactive environment where you can access your Rails code just as though the application were running. This environment is incredibly helpful. It is often used in production environments at times to quickly peek at data without having to log in to the database. To do this in a production environment, use script/console RAILS_ENV=production: macbook$ ./script/console Loading development environment (Rails 2.1.1) >> a = Album.find(:first) => # >> 9. Ugly Views Getting You Down? Try Haml. Views are how your Rails application generates the HTML pages your visitors actually see and use. By default, Rails uses the ERb templating system to let you embed bits of Ruby in your markup so that you can insert your data as needed. However, recent versions of Rails let you take your pick of templating languages, and nowadays the Ruby interwebs have been all abuzz about an alternative system called Haml.

Haml is marketed as “markup Haiku.” Its CSS-inspired syntax lets you focus on the semantics of your data rather than worrying about closing all the angle brackets that come with using ERb and HTML. For comparison, here’s a bit of markup in standard ERb: <%= print_date %> <%= current_user.address %>

<%= current_user.email %> <%= h current_user.bio %>

And here’s the equivalent in Haml:

profile

.left.column #date= print_date #address= current_user.address .right_column #email= current_user.email #bio= h(current_user.bio) Haml’s not for everyone, and many people will find this syntax quite alien. But if you value concision and are fluent in CSS, Haml may be just the ticket. 10. Know Where to Watch What’s Happening in Rails Rails and Ruby both have large and active communities that constantly generate changes, improvements and new projects. Trying to keep up with all the activity can be daunting, but it’s essential if you want to benefit from the community’s best work and continue to increase your Rails and Ruby knowledge. Thankfully, a number of sources aggregate some of the most important activity:

GitHub has a most-watched projects page, which is a great place to start. Similarly, RubyInside’s monthly What’s Hot on Github and the GitHub blog’s Rebase series both feature selections of interesting work from the website.

There’s also a whole universe of Rails training:

Rails Envy PeepCode

and news aggregators:

follow ruby_news on Twitter, subscribe to Ruby Inside, subscribe to Ruby Flow.

Another avenue is the Rails Core mailing list and the #rails-core IRC channel. About the authors This guest post was written by Greg Borenstein and Michael ‘MJFreshyFresh’ Jones, lead Ruby developers for StepChange Group. StepChange designs, develops and manages social media widgets and Facebook applications in partnership with leading brands and agencies. Outside of work, Greg builds drum-playing robots and other hardware hacks, and MJ leads a local group of Unicycle-borne pirates. They live and work in beautiful, moist Portland, Oregon. (al)

© Vitaly Friedman & Sven Lennartz for Smashing Magazine, 2009. | Permalink | 15 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine

Post tags: rails, ruby, tools

By Dmitry Fadeyev By now, all good designers and developers realize the importance of usability for their work. Usable websites offer great user experiences, and great user experiences lead to happy customers. Delight and satisfy your visitors, rather than frustrate and annoy them, with smart design decisions. Here are 9 usability problems that websites commonly face, and some recommended solutions for each of them. You may also be interested in the following related posts:

10 Usability Nightmaters That You Should Avoid 30 Usability Issues To Be Aware Of 12 Useful Techniques For Good Interface Design 10 Useful Web Application Interface Techniques

1. Tiny clickable areas Hyperlinks are designed to be clicked, so to make them usable, it makes sense to ensure that they’re easy to click. Here’s an example of links that are far too small; clicking them is harder than it should be. These are the comments links on Hacker News, a social news website. (Clickable areas are highlighted in red):

Here’s an example of the same interface element, the comments link, but this time with a much larger clickable area:

Newspond comments link. Why would we want a larger clickable area? Simple. Because our hand movement with the mouse isn’t very precise. A large clickable area makes it easier to hover the mouse cursor over the link. To ensure we get a large clickable area, we could either make the whole link bigger or increase the padding around the link using the CSS “padding” property. Here’s the code: <a href="http://www.examplesite.com" style="padding: 5px;">Example Site<a> The CSS has been placed inline together with the markup to make the example simpler, but in real life you’ll likely want to add this styling to your CSS file by giving the link a class or id and targeting it with that. You can read more about padded link targets for better mousing in a 37signals article on padded link targets. According to the article, padding provides users with “a feeling of comfort. It’s just really easy to click the links. It feels like the links are working with you instead of against you.” 2. Pagination used for the wrong purpose Pagination refers to splitting up content onto several pages. This is often found on websites that have long lists of items; for example, products in a store or pictures in a gallery. Using pagination for this purpose makes sense because displaying too many items on one page would make the page slower to download and process.

FeedMyApp uses pagination in the right way: to display its vast list of apps in digestible chunks. But there is another way that pagination is used on the Web today. Content pages, like blog articles, are sometimes split into several pages. Why is this done? What’s the gain? It’s unlikely that the article is so long that it requires pagination; in most cases, it is used to increase page views. Because a lot of blogs and magazines get their revenue through advertising, getting more page views (i.e. individual page loads) boosts their viewing statistics and allows them to charge more for each ad.

The Wired article about Google’s logo is split into eight pages, making it very difficult to read. While this may seem like an easy way to squeeze more money from your ads, it poses two main problems. The first is that it’s just really, really annoying. Having to load several pages just to read one article isn’t fun. You’re creating a barrier for your visitors that doesn’t have to be there. The second reason has to do with SEO (search engine optimization). Search engines use the content on your page to make sense of what it is about and then index it accordingly. If the content is split into several pages, it is diluted, and so each page makes less sense on its own and holds less keywords about its topic. This may negatively affect the ranking of the article in search engine results. 3. Duplicate page titles The title of each Web page is important. Page titles are the pieces of text we write between the <title> tags in the <head> section of our HTML code. Sometimes people create a generic title while working on their website’s template — their website’s name, for example — and then re-use the same title across the whole website. This is wrong because it robs each page of a couple of key benefits. The first benefit is that a good title communicates to your visitors a lot of information about what the page is about. People can quickly figure out if they’re in the right place or not. Remember that this title doesn’t just show at the top of the browser window; it’s also shown on the search engine results pages. When people see a list of results on a search engine like Google, they read the page title to figure out what each page is about. This alone is a good enough reason to spend a little time optimizing your page titles. The second reason has to do with SEO. Search engines need different information to rank the results of a particular query. Page title is one of the more important pieces of information they use to gauge how relevant your page is to a particular search term. This doesn’t mean you should load as many keywords as possible into the title — that defeats the first benefit — but you should ensure that each title succinctly describes the content of the page, including a couple of words you think people will search for. Here’s an example of a good page title. This is a Smashing Magazine page title as seen in Safari:

Here we have the title of the article, the category of the article and the name of the website. Putting the name of the website last puts more emphasis on what the page itself is about, rather than on website branding, which is still there. Here’s what the HTML code looks like in the markup: <title>Vintage and Blues WordPress Themes | Freebies | Smashing Magazine</title> And here’s how the page is displayed in a Google search result:

1. Content that is difficult to scan To ensure that your website is usable, you cannot only have a good design; you also need good copy. Copy is a term used to describe all of the text content on a website. Yes, good design will guide your visitors around the website, focus their attention on the things that matter and help them make sense of information chunks; but visitors will still need to read text to process information. This makes copy an essential part of your overall website design. Before you can write good copy, though, you need to understand how people will actually view your website. Don’t assume that your visitors will read everything from top to bottom. That would certainly be great, but unfortunately that’s not how it works. The Web bombards people with information, and most of us try to consume as much of it as possible. This leads to very frantic browsing behavior: we jump from one piece of content to another, from one website to the next. People tend not to read websites top to bottom; they start reading whatever pops out at them first, and then move to the next thing that captures their interest. The pattern looks a little like this:

The Basecamp landing page. The red circles indicate the areas where visitors tend to focus their gaze, and the numbers indicate the order in which they look at these elements. Users dash from one interesting part of the page to another. To take advantage of this chaotic browsing pattern, you need to structure your copy a certain way. Here are a few pointers:

Have a few points of focus. These are the parts of your page that attract the attention of visitors. This can be achieved by stronger, higher-contrast colors and larger fonts. You can also use images, such as icons, next to text to give these areas even more visual pull. Each focus point should ideally be accompanied by a descriptive heading. Without reading the copy any further, visitors should be able to understand what this bit of content is about. Don’t make headings mysterious or vague to draw people in. Keep them informative yet concise. People want information quickly, and withholding it only annoys them. Any other text should be short and easy to digest. Provide just the essentials, and strip out the rest. In most cases, extra text that copy writers put in to make a point less ambiguous only adds dead weight. People will read bite-sized pieces of text but are put off by long paragraphs. Cut your copy down until no fat is left to cut.

The “Why you should use OpenOffice” page could definitely use improvement. No clear points of focus are provided, aside from the large banner at the top; and the copy is grouped together in huge chunks, making it daunting to read.

Things app’s features page splits up each feature into little bite-sized segments, each with its own icon and heading. This makes the list easy to scan. To make copy even more effective, list actual benefits rather than feature names. 5. No way to get in touch User engagement is important if you want to build a successful community, and communities are important if you want to build successful websites and social Web apps. User engagement is also important if you want to build loyal customers. Quickly answering people’s questions and fixing their problems doesn’t just mean that you have good customer service — it means you care, and your customers and visitors will appreciate it. But many websites still don’t give visitors an easy channel for getting in touch with the company. Some websites don’t even have an email address or contact form on them.

When you click on the contact link on the official Coca-Cola website. you’re presented with this page. No email, no phone number. Most of the links lead to automated FAQs; the feedback form requires your address and age and has a 500-character limit; the “Submit an idea” form is two pages long, with terms and conditions attached. It doesn’t look like Coca-Cola really wants you to contact them. Sure, putting your email address on the Web will likely attract a lot of spam, but there are a couple of solutions. Enkoder is my favorite solution for putting email addresses on the Web. Enkoder is an application that comes in two flavors: a free one for Mac OS X, and another free one as a Web app. It encrypts any email address that you give it and gives you a bunch of gibberish JavaScript code to put on your page. When the page with the code loads, your email magically appears as a clickable link. Bots scouring for email addresses won’t be able to interpret the code — at least that’s the plan. You could also use contact forms to bypass the problem of showing your email address on a page; however, you’re still likely to receive spam unless you put some good Captchas or other spam protection mechanism in place. Keep in mind that things like Captchas are barriers to user interaction and will likely degrade the user experience. Forums to the rescue. Online forums are a great communication channel that can be an alternative way for users to get in touch. A public forum is better than a simple contact form or email because your customers can help each other on a forum. Even if you don’t personally respond to a customer, another helpful customer may help that person out, solving his or her problem.

GetSatisfaction is a Web app that works like a forum. Users can post their problems and feedback as topics on the board, and customers and staff can respond to them. Users can add comments to elaborate on their problem. Whether you go with a hosted solution like GetSatisfaction or roll your own message board, a two-way communication channel like this is a great way to keep in touch with your customers.

The GetSatisfaction forum for Apple. 6. No way to search A lot of people start looking for a search box as soon as they arrive on a page. Perhaps they know exactly what they’re looking for and don’t want to spend time learning the website’s navigation structure. Jakob Nielsen calls these people search-dominant users: Our usability studies show that more than half of all users are search-dominant, about a fifth of the users are link-dominant, and the rest exhibit mixed behavior. The search-dominant users will usually go straight for the search button when they enter a website: they are not interested in looking around the site; they are task-focused and want to find specific information as fast as possible. Jakob Nielsen Whether you run an online shop or blog, you need search. People may come looking for a particular product or for an article they remember reading a while back, and chances are they’ll want to find it with a quick search. The good news, if you haven’t already implemented search on your website, is that it’s very easy to do. You don’t need to code your own search feature; search engines like Google and Yahoo have very likely already indexed most, if not all, of your website’s pages, so all you need to do is pick the one you want to use and plug in a search box. Here’s the form code for using Google as your search engine: <form action="http://www.google.com/search" method="get"> <fieldset> <input type="hidden" name="sitesearch" value="smashingmagazine.com" /> <input type="text" name="q" size="31" maxlength="255" value="" /> <input type="submit" value="Google Search" /> </fieldset> </form> And here’s the one for Yahoo: <form action="http://search.yahoo.com/search" method="get"> <fieldset> <input type="hidden" name="vs" value="smashingmagazine.com" /> <input type="text" name="p" /> <input type="submit" value="Yahoo Search" /> </fieldset> </form> To make it work, all you need to do is change the value of the “hidden” field to your website’s domain name. This will limit the scope of the Google or Yahoo search query to just your website. You may also want to modify the value of the “Submit” text to say whatever you want. 7. Too much functionality that requires registration Your website may have some content or features that require visitors to register before using. That’s great, but be careful how much content is put behind this registration shield. Very interactive Web applications, such as email, document editing and project management, restrict 100% of their functionality to registered users. Other websites, such as social news websites, do not. I can browse all the stories on Digg and Reddit without having to log in; users do not have to identify themselves to enjoy some functionality. When you implement a log-in barrier, be careful that you don’t lock away features that don’t really need user identification. Some blogs require people to register before posting. Sure, that will significantly decrease spam, but it will also significantly decrease the number of comments you see, too. User participation on your website is affected by how many barriers there are. Removing barriers such as registration will almost certainly increase user participation. Indeed, once users start using your website, they will more likely sign up, because they’re already involved.

The GetSatisfaction interface allows you to fill in your comment about a company or product and then click the “Post” button. Instead of seeing your feedback posted, you’re greeted with an unexpected “Log in or register” message. Not good, considering the customer may already be frustrated.

The landing page for Pixlr, an online graphic editing app, has a link titled “Jump in n’ get started!” Clicking on it opens the app. No trials, no registration; you test drive the app right away.

Posterous, a blog hosting network, doesn’t even require registration to start using it. Just send an email with your post, and a new blog is created for you. 8. Old permalinks pointing nowhere A permalink is a link to a page that isn’t meant to change; for example, a link to a blog article such as the one you’re reading now. Problems occur, though, when a website moves to another domain or has its structure reorganized. Old permalinks pointing to existing pages on the website become dead unless something is done about them. That something is called a 301 redirect. 301 redirects are little instructions stored on your server that redirect visitors to appropriate pages. So, if someone arrives on your website using an old link, they won’t see a 404 error page (”Page not found”): the 301 redirect forwards them to the right location, provided that you’ve set it up correctly. The number “301″ designates the type of redirect that it is: permanent.

Frye / Wiles 404 error. There are various ways to do 301 redirects. How they’re implemented depends partly on the Web server you’re using. Here are the basics of handling 301 redirects on the most popular Web server right now, Apache. The following code should go in a file called “.htaccess” in your main website folder. Yes, the file name begins with a full stop. This means it’s a system file, which standard file browsers tend to hide by default. So, if you can’t see it using your file browser or FTP client, turn your “Display invisible files” option on. Just create or (if it’s already there) edit this file using your editor of choice. This file is retrieved whenever a visitor arrives on your website, and any redirect rules you put in there will be applied. Here’s a simple 301 redirect code: RewriteEngine on Redirect 301 /oldpage.html /newpage.html The code is fairly self-explanatory. When somebody tries to access “yoursite.com/oldpage.html,” they will immediately be redirected to “yoursite.com/newpage.html.” The “RewriteEngine on” bit at the top ensures that the mod_rewrite engine is turned on (the default is off). This is the engine that handles the redirects. 9. Long registration forms Registration forms are barriers. They are barriers because it takes effort to fill them in, and the task itself is no fun. People have to invest time and effort to register, and then they have to invest even more time and effort in future to remember what user name and password they used. We can shrink this barrier by making the sign-up form as short as possible. At the end of the day, the purpose of a registration system is simply to be able to identify each user; so, the only requirements are a unique identifier, such as a user name or email address, and a password. If you don’t need more information, don’t ask for it. Keep the form short.

The ReadOz sign-up form is very long. On closer inspection, we find that half of the fields are optional. If they’re optional, they don’t really need to be there. Such a form would likely scare off a user seeing it for the first time. Show only what the person needs to register; the rest can be filled in later.

Tumblr has one of the shortest sign-up forms around. Just three fields: email, password and the URL of your new blog.

The Basecamp sign-up page has a smart trick. It has no website navigation aside from a home-page link. This keeps the user focused on the sign-up process, without any distractions or means of leaving the page. Less Thinking Usability is all about making things easier to use. Less thinking, less frustration. A website should do all the work and present visitors only with the things they’re looking for. Usability is also about the experience people have using your website, so attention to detail matters, as do the presentation and feel of the page. Drop your thoughts on these and any other usability problems you run into in the comments section below! About the author Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability. Follow Dmitry on Twitter @usabilitypost. (al)

© Dmitry Fadeyev for Smashing Magazine, 2009. | Permalink | One comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine

Post tags: blunders, mistakes, problems, solutions, usability

By Trey Ratcliff (aka Stuck in Customs), one of the most famous and renowned HDR photographers on Flickr. In his article Trey describes some professional insights and useful photography tips that he collected over the years of his career. A camera does not work like an eye; film does not work like memory. There is a fine line between a photo that is quite nice and one that is quite breathtaking. At some unknown point, a photo can cross the Rubicon and be forever a piece of beautiful art. That hinterland between a regular photo and evocative art is a shifting area from person to person and taste to taste. However, that zone can be narrowed a bit once you start to consider the way the brain stores memories and emotions. And yes, it gets a bit touchy-feely here trying to determine if your work has crossed that line. With rigorous practice and peer feedback, you can start to appreciate where that zone is and, consequently, improve your hit ratio. The back of the Taj Mahal during a summer sunset. The good news is that divining your way to more beautiful photos does not require rune rites of scapulimancy. There are some basic things and mantras to keep in mind as you practice and fail, then practice and succeed, then practice and fail, then practice and succeed, and rinse and repeat. We’ll detail a few of these below. 1. Think About The Brain I’ve always thought about photography differently. I grew up seeing out of only one eye, thanks to several botched surgeries in the 1970s using refurbished archaeological tools of the Australopithecus medicine men. When you see out of one eye your whole life and then start using a camera in your mid-30s, something happens to you! You come to realize that a camera works nothing like the eye. Forget 3D; I’m talking about the way the brain stores images and scenes. Upon birth, you have legs, but it takes a few years for your legs to get along with your brain well enough to actually walk you around the savanna a bit. The eyes are the same. They get wired faster than the legs, but the neural pathways from the optic nerve to the parts of the brain that matter take a while to find their chemical trails. You start to sense light levels, then shapes, then edges, then relative positions and the like. And then, around the age 2 or 3, you finally come up with a tagging system that allows you to know generally what a “barn” looks like. Your brain has been working nonstop over that time to give you the visual and memory infrastructure to enable this watershed event. Fourth of July on Lake Austin: the first HDR photograph to hang in the Smithsonian. Now, let’s fast forward to today. You’re older, your brain is more or less fully formed, and you happen upon a barn in a field. But it’s not just any barn: it’s the barn you’ve been wanting to see your entire life. And in the distance, a storm is brewing as a gentle sun sets. It’s beautiful; you lock it into memory. The way you lock it into memory is nothing like the way a camera records the image on film (or a CCD). This is what I quickly came to realize as I sat there, looking at a photo I took with a fabulously expensive Nikon and showing it to a friend. “Well, you really had to be there.” I’m sure you’ve all said that! Now, this first step is a big step: it’s a philosophical re-assessment of how the camera works in contrast to how the memory maps a scene, the latter being a process of layering visual reality with the emotions and memories linked to that scene. You see, you are not just remembering that barn but are remembering every barn; you are not just remembering that storm but are remembering every storm. A beautiful photo must tell the epic tale of the memory, linked with the other emotions that fold into a whole. 2. Engage In The New Global Salon In the 1860s, all art roads led to the Salon in Paris, which was the most important judged competition of art in the western world. During a period of just over 10 years, the Impressionist masters battled it out in a competitive and cooperative tour de force that created a panoply of creations that we now cannot imagine the world without. The reason Paris became the center of the art world and an explosion of new art is the combination of new technology in travel and communications combined with Napoleon III’s focus on infrastructure around the Salon. Hong Kong from a peak on a summer night as the city comes alive. Today the same thing is happening, although perhaps not everyone really realizes it in a grand historical sense. It’s called Flickr. Flickr has become a techno-Salon, allowing the world to easily use the Internet to enter the competition and force each other to evolve and improve their art. The automated “Explore Algorithm” does a pretty good job of automatically filtering the best photos that are uploaded every day. Go ahead and look at some of the current best of the last 7 days. Click “Reload” a few times and I promise you will have seen something that impresses. It is quite unbelievable the level of art and beauty that is created every single day. Now, all of this amazing art on Flickr can either inspire or intimidate you, depending on your mindset for competition. I hope it inspires you to upload one photo a day and see if you can make it in the top 500 or even the top 10. And don’t give up. Competition makes everyone better; this is an undeniable truth, and you are not realizing your full potential if you remove yourself from the process. I can think of a number of things Flickr can do to improve this new global competition. Its AI algorithm to find the most interesting new artists still makes many mistakes. Maybe I will save that for another article! But in many ways, Flickr is close to squandering an amazing opportunity to set the art world on fire. 3. Get Rid Of Your Toy Camera Oh, look at that camera you have! It’s so tiny and slim and techno-looking. Look! It fits right in your pocket! Oh my, you can take it to parties and sporting events, and it’s so convenient. Oh, it is 10 megapixels, too? Oh my. Well, that is a good camera then! No, it’s not. It’s a toy: give it to your kids or the nearest gradeschooler (for whom it was designed) and get serious. I know that 19-year-old punk at Best Buy told you that your compact camera is really neat and just what you need. But are you gonna listen to him or me? Get yourself a DSLR (I have suggestions on my page that aren’t very expensive for people just starting out). For those of you who don’t know, a DSLR is one of those cameras you see the pros carrying, but it doesn’t have to be a giant one like what you see in the NFL endzone. Sorry to be rude about the toy thing, but you want to take more beautiful pictures, no? Well, a decent DSLR has such a good sensor chip, combined with more flexible lenses, that your batting average will dramatically improve. An ancient Hindu temple at sunset in the jungles of Indonesia. Also (people with DSLRs already know this), it is important to have a good wide-angle lens for landscapes. Beautiful photography does not have to be of a landscape, but it commonly is, and this is what many people envision when they want to make their own beautiful photos. So, we should talk about wide-angle lenses here for a moment. If you are used to using a toy camera, then you have never really seen the world through a good 10 to 24mm lens. It’s almost the difference between regular TV and HDTV. The vistas are wide and bold; the clouds, sun and mountains all fit; the river and bridge are easy to compose; and so on. Once you go wide-angle, your landscape will never be the same! 4. Carry A Tripod For Those Beautiful Sunsets And Sunrises Oh, what’s that? You don’t want to carry a tripod? What are you, a 9-year-old? Now, come on. You’re a grown-up, and you want to take some seriously beautiful photos. Do you think pros carry around tripods because they like the extra weight? No, of course not. They know what the heck they’re doing. If you bit off on getting a DSLR, then you are going to need a tripod, especially for sunset and night shots. Unless you have the steady hand of a T-1000, you are going to get some camera shake. A tripod allows you to do the following things with landscape photography (in no particular order): set up and take your time to compose a photo with serious intent; keep noise low as the shutter stays open longer; look cool as you carry it around; keep the shutter open for 5 or more seconds for those fleeting sunrise and sunset shots; use it as a weapon in a tight spot while traveling (not kidding). Dresden, Germany So, are you still worried about carrying it around? The problem, you understand, is mostly your attitude. Let me provide a different perspective. Nothing in life is worth doing unless you’re serious about it. Believe that you are going to shoot that sunset, and you are going to take your nice DSLR and tripod out there and make it happen, and no one is going to stop you. You’re carrying that tripod around because you’re serious about it. Otherwise, you could just go sit on a pretty beach at sunset and drink beer with your friends and not be serious about it. Go ahead… but you won’t be getting any beautiful photography out of it. 5. Admire Impressionism I spoke earlier about the Salon of Paris and what happened during the Impressionist movement. While the process and examples of what happens when artists start cooperating and competing is interesting from a social-group evolutionary perspective, this section is more about the art itself. Early critics of the art form found it crude, sloppy and unconventional, to the point that they felt it didn’t even deserve to be placed alongside the classic masters. But the public was awestruck by the new art form. It doesn’t take a critic to know good art, but it does take a careful and discerning eye. Consider the colors and styles of Degas, Cézanne, Monet and Renoir. There is not a single detail about any well-known Impressionist painting that is the slightest bit “realistic.” But yet, the rough shapes and colors still make sense. Something about it just feels right. What is that something? An icy lake at sunrise, fed from the seasonal melt at Glacier National Park; a panorama of 90 shots. To me, what feels right about Impressionism is what we discussed above. These Impressionist images go deep into viewers’ brains and evoke memories of shared scenes and events. The memory is in fact an Impressionist playground of fleeting colors, shapes and edges. A face here, a blur there, a hint of something almost there, but not quite. Look at Monet’s work. Think about how the yellows of a sun in the distance is the same yellow as an up-close flower. But something about the colors makes the sun feel brighter than the flower. How does he do that? Can you get closer to achieving this with your photography? As you look at Impressionist paintings, juxtapose them with your own photography. If you want to evoke the same sort of feelings, then consider how it was done without resorting to realism. 6. Practice With HDR What is HDR? It’s short for High Dynamic Range photography, and it’s all the rage. I have a tutorial on HDR on my blog. But here, I’ll explain HDR in a circuitous but meaningful way. About 80% of my photos are in HDR, but I do something a little different. As you start looking into HDR (many of you already have), you will begin to notice how absolutely horrible most HDR looks. When many people begin experimenting with it (myself included), it is overdone and looks too psychedelic. Over time, mine have improved via rigorous self-examination and an evolving methodology. Remember that bit about me growing up and seeing the world with one eye? Now, we come to the second part of this daring mini-biography as we are cross the stepping stones to my point. My background in college was Computer Science and Math, so I’ve always thought about things in terms of algorithms and software. The very first time I used a DSLR camera, when I was 35 or so, I very quickly came to the realization that something was missing. A young Amish boy allows me to freeze time after I help him carry wood with his sisters. That missing something was the “software” layer between the eye and the memory. Consider what you do with the barn and apply it to how the camera works. You survey the scene. Your eye jumps around from interesting object to interesting object, sometimes moving slowly, sometimes quickly. Your eye lets in more light in some areas, less in others as your pupil dilates. You squint into the setting sun and see warm colors splashed across the clouds, grass and barn. You remember other barns, other storms, other sunsets. You may have been with someone or were alone, but you certainly remember. You lock it all up in your mind’s eye forever. Because we are visual creatures, a photo or painting can evoke great memories. But the only way to trigger some of those intense memories on a deep level is to adjust the light levels in the photograph, so that the light levels and color match those buried in your head. The HDR process can help achieve these goals. 7. Take Your Camera Everywhere Don’t just take your camera out on those rare occasions when you actually decide to set aside a portion of your day for photography. Face it: we’re all busy people with real lives, and setting aside three to four hours for anything extracurricular is tough. But it takes only a few seconds to get inspired for a photo, and it’s no good if your camera is back home. Gulfoss in Iceland. Catholic theologians of old believed this was the entrance to hell. Keep it in the trunk of your car in a fun little photo backpack, with a small selection of lenses. You never know when you will see something wonderful. Use this opportunity to take at least one photo a day. It doesn’t have to be a grand landscape; just something small and nice that you may not have noticed before. 8. Understand The Fantasy/Reality Membrane Do you have kids? Are you a kid at heart? Think about when you were a kid and what happened when you turned into a jaded old grown-up. Maybe by the end of this section you can ask yourself some new questions about reality. Kids have this remarkable “membrane” between fantasy and reality. They can jump back and forth between the two in an effortless way. In fact, the membrane itself is wonderfully “thick,” in that there is a vast dream-state wilderness where the world is both fantasy and reality. When pressed, kids will tell you what is real and what is pretend, but that is often a painful process that pries them from the escapism they felt so viscerally just a few moments before. My personal foray over the last year into learning how to draw. When we are all grown up and serious, that membrane is razor thin, and there is little tolerance of “pretend” and “fantasy.” Why is this? Is it because we are surrounded by other serious people and want to conform? Is it because fantastic escapades are what “kids” do and thus not pertinent to our lives? Obviously, we can all still get into that fantasy zone, and we all love it. That’s why movies are still such a potent force; they give us social permission to be like kids for two hours, once a week. It also explains the growing relevance of online games. But when we start talking about photography — well now, that is a different subject! Photography is a serious art form, practiced by classically trained masters whose reality is quite serious indeed! There mustn’t be anything fantastical in the art form. The process goes from camera straight to the film, you see! Poppycock. 9. Learn To Draw This is a weird one, eh? Who on Earth has time to learn to draw? Well, you would have time if you stopped wasting it on less important activities. You’ve got one life here, so you might as well start applying yourself. “I don’t have any time! I have kids to look after, a full-time job, a bunch of cool games to play, books to read, exercising to do, a bit of photography, and blah blah blah.” As a personal experiment, I wanted to see if anyone could learn to draw. This is similar to an earlier experiment I did on myself to see if I could take something I hated and turn it into something I enjoyed. That experiment was with coffee, but I was afraid that learning to draw would be harder, particularly because of the jitteryness introduced from the first experiment. A tame wild-haired horse on the windy fjords of Iceland. I’ve always admired people who can just grab a pencil and paper and make something amazing. Man, I’ve always wanted to be able to do that! I began the experiment with the hypothesis that great natural artists can draw anything without any instruction whatsoever. These are true masters, and I was unlikely unlikely to reach that level. However, I thought I could become adequate at drawing and be at least satisfied with myself. A great side-effect, I envisioned, would be new insight into photography: into line, shape, light and composition. All of this turned out to be true. So, if you have hit a rough spot or are in the doldrums with photography, take up drawing. A few instructional books out there are practical hands-on guides that give you basic pointers. I think you will be quite impressed by how it starts to bleed into your photographic art! 10. Make Mistakes Make a lot of mistakes. Throw yourself and your art out there and see what works and what doesn’t. Show your stuff to true friends who will give you frank feedback. Don’t be like those sorry saps on American Idol who make fools of themselves in big auditions because they’ve spent their whole life listening to their tone-deaf mom tell them they are incredible at singing “Over the Rainbow” or because Aunt Mabel enjoyed it so much during the grade 2 play. Get yourself online and begin making friends by finding other photographers who you respect. Beg and plead for them to come look at one or two of your photos and give frank feedback. They will cut you apart, but just take your medicine, lick your wounds, and go out there and improve. Fin And there we have it: 10 things to shake up your world a little bit. I’m no Baudelaire when it comes to writing these sorts of polemics. However, just as he drove Manet to be Manet, perhaps I can do my own little part to stoke the fires and help drive a new art revolution. Evolve and evoke, or whither into nothingness. Extra Credit To end off, here is a random selection of some of my other favorites. The Lonely Trinity An elderly woman, who has never cut her hair, ascends the stairs to her daily Hindu pilgrimage

Dante’s Gates of Hell, a sculpture by Rodin, captured in proper lighting

About the author Trey Ratcliff describes himself as a slightly evolved monkey that happens to carry a camera. He’s become unintentionally popular from his photography blog, mostly because his mom emailed about 350,000 people to tell them about it. Trey can found there on his blog or followed on Twitter at @treyratcliff, where you’ll be the first to get news of his latest daily creations. (al)

© Trey Ratcliff for Smashing Magazine, 2009. | Permalink | 6 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine

Post tags: inspiration, photography

By Paul Boag We all make mistakes running our websites. However, the nature of those mistakes varies depending on the size of your company. As your organization grows, the mistakes change. This post addresses common mistakes among large organizations. Most of the clients I work with are large organizations: universities, large charities, public sector institutions and large companies. Over the last 7 years, I have noticed certain recurring misconceptions among these organizations. This post aims to dispel these illusions and encourage people to face the harsh reality. The problem is that if you are reading this post, you are probably already aware of these things. But hopefully this article will be helpful to you as you convince others within your organization. In any case, here are our 10 harsh truths about websites of large organizations. 1. You Need A Separate Web Division In many organizations, the website is managed by either the marketing or IT department. However, this inevitably leads to a turf war, with the website becoming the victim of internal politics. In reality, pursuing a Web strategy is not particularly suited to either group. IT may be excellent at rolling out complex systems, but it is not suited to developing a friendly user experience or establishing an online brand. Zeldman urges organisations to create a separate web division. Marketing, on the other hand, is little better. As Jeffrey Zeldman puts it in his article Let there be Web divisions: The Web is a conversation. Marketing, by contrast, is a monologue… And then there’s all that messy business with semantic markup, CSS, unobtrusive scripting, card-sorting exercises, HTML run-throughs, involving users in accessibility, and the rest of the skills and experience that don’t fall under Marketing’s purview. Instead, the website should be managed by a single unified team. Again, Zeldman sums it up when he writes: Put them in a division that recognizes that your website is not a bastard of your brochures, nor a natural outgrowth of your group calendar. Let there be Web divisions. 2. Managing Your Website Is A Full-Time Job Not only is the website often split between marketing and IT, it is also usually under-resourced. Instead of there being a dedicated Web team, those responsible for the website are often expected to run it alongside their “day job.” When a Web team is in place, it is often over-stretched. The vast majority of its time is spent on day-to-day maintenance rather than longer-term strategic thinking. This situation is further aggravated by the fact that the people hired to “maintain” the website are junior members of the staff. They do not have the experience or authority to push the website forward. It is time for organizations to seriously invest in their websites by hiring full-time senior Web managers to move their Web strategies forward. 3. Periodic Redesign Is Not Enough Because corporate websites are under-resourced, they are often neglected for long periods of time. They slowly become out of date with their content, design and technology. Eventually, the website becomes such an embarrassment that management steps in and demands that it be sorted. This inevitably leads to a complete redesign at considerable expense. As I point out in the Website Owners Manual, this a flawed approach. It is a waste of money because when the old website is replaced, the investment put into it is lost, too. It is also tough on finances, with a large expenditure having to be made every few years. Cameron Moll encourages web designers to realign their website rather than redesign. A better way is continual investment in your website, allowing it to evolve over time. Not only is this less wasteful, it is also better for users, as pointed out by Cameron Moll in his post Good Designers Redesign, Great Designers Realign. 4. Your Website Cannot Appeal To Everyone One of the first questions I ask a client is, “Who is your target audience?” I am regularly shocked at the length of the reply. Too often, it includes a long and detailed list of diverse people. Inevitably, my next question is, “Which of those many demographic groups are most important?” Depressingly, the answer is usually that they are all equally important. The harsh truth is that if you build a website for everyone, it will appeal to no one. It is important to be extremely focused about your audience and cater your design and content to it. Does this mean you should ignore your other users? Not at all. Your website should be accessible by all and not offend or exclude anybody. However, the website does need to be primarily aimed at a clearly defined audience. 5. You Are Wasting Money On Social Networking I find it encouraging that website managers increasingly recognize that a Web strategy is more than running a website. They are beginning to use tools such as Twitter, Facebook and YouTube to increase their reach and engage with new audiences. However, although they are using these tools, too often they do so ineffectively. Tweeting on a corporate account or posting sales demonstrations on YouTube misses the essence of social networking. Microsoft dramatically improved its image amoung the development community by allowing Microsoft staff to speak out via the Channel 9 website. Social networking is about people engaging with people. Individuals do not want to build relationships with brands and corporations. They want to talk to other people. Too many organizations throw millions into Facebook apps and viral videos when they could spend that money on engaging with people in a transparent and open away. Instead of creating a corporate Twitter account or indeed even a corporate blog, encourage your employees to start Tweeting and blogging themselves. Provide guidelines on acceptable behavior and what tools they need to start engaging directly with the community connected to your products and services. This demonstrates not only your commitment to the community but also the human side of your business. 6. Your Website Is Not All About You Where some website managers want their website to appeal to everybody, others want it to appeal to themselves and their colleagues. A surprising number of organizations ignore their users entirely and base their websites entirely on an organizational perspective. This typically manifests itself in inappropriate design that caters to the managing director’s personal preferences and contains content full of jargon. A website should not pander to the preferences of staff but should rather meet the needs of its users. Too many designs are rejected because the boss “doesn’t like green.” Likewise, too much website copy contains acronyms and terms used only within the organization. 7. You’re Not Getting Value From Your Web Team Whether they have an in-house Web team or use an external agency, many organizations fail to get the most from their Web designers. Web designers are much more than pixel pushers. They have a wealth of knowledge about the Web and how users interact with it. They also understand design techniques, including grid systems, white space, color theory and much more. Treating designers as pixel pushers wastes their design experience: post from Twitter complaining about being a pixel pusher It is therefore wasteful to micro-manage by asking them to “make the logo bigger” or to “move that 3 pixels to the left.” By doing so, you are reducing their role to that of a software operator and wasting the wealth of experience they bring. If you want to get the maximum return on your Web team, present it with problems, not solutions. For example, if you’re targeting your website at teenage girls, and the designer goes for corporate blue, suggest that your audience might not respond well to that color. Do not tell him or her to change it to pink. This way, the designer has the freedom to find a solution that may even be better than your choice. You allow your designer to solve the problem you have presented. 8. Design By Committee Brings Death The ultimate symbol of a large organization’s approach to website management is the committee. A committee is often formed to tackle the website because internal politics demand that everybody has a say and all considerations be taken into account. To say that all committees are a bad idea is naive, and to suggest that a large corporate website could be developed without consultation is fanciful. However, when it comes to design, committees are often the kiss of death. Design by committee leads to design on the fly. Design is subjective. The way we respond to a design can be influenced by culture, gender, age, childhood experience and even physical conditions (such as color blindness). What one person considers great design could be hated by another. This is why it is so important that design decisions be informed by user testing rather than personal experience. Unfortunately, this approach is rarely taken when a committee is involved in design decisions. Instead, designing by committee becomes about compromise. Because committee members have different opinions about the design, they look for ways to find common ground. One person hates the blue color scheme, while another loves it. This leads to designing on the fly, with the committee instructing the designer to “try a different blue” in the hopes of finding middle ground. Unfortunately, this leads only to bland design that neither appeals to nor excites anyone. 9. A CMS Is Not A Silver Bullet Many of the clients I work with have amazingly unrealistic expectations of CMS (content management systems). Those without one think it will solve all of their content woes, while those who have one moan about it because it hasn’t! It is certainly true that a CMS can bring a lot of benefits. These include:

reducing the technical barriers of adding content, allowing more people to add and edit content, facilitating faster updates, and allowing greater control.

However, many CMS are less flexible than their owners would like. They fail to meet the changing demands of the websites they manage. Website managers also complain that their CMS is hard to use. However, in many cases, this is because those using it have not been adequately trained or are not using it regularly enough. Finally, a CMS may allow content to be easily updated, but it does not ensure that content will be updated or even that the quality of content will be acceptable. Many CMS-based websites still have out-of-date content or poorly written copy. This is because internal processes have not been put in place to support the content contributors. If you look to a CMS to solve your website maintenance issues, you will be disappointed. 10. You Have Too Much Content Part of the problem with content maintenance on large corporate websites is that there is too much content in the first place. Most of these websites have “evolved” over years, with more and more content having been added. At no stage has anybody reviewed the content and asked what could be taken away. Many website managers fill their website with copy that nobody will read. This happens because of:

A fear of missing something: by putting everything online, they believe users will be able to find whatever they want. Unfortunately, with so much information available, it is hard to find anything. A fear users will not understand: whether from a lack of confidence in their website or in their audience, they feel the need to provide endless instruction to users. Unfortunately, users never read this copy. A desperate desire to convince: they are desperate to sell their product or communicate their message, and so they bloat the text with sales copy that actually conveys little valuable information.

Steve Krug, in his book Don’t Make Me Think, encourages website managers to “Get rid of half the words on each page, then get rid of half of what’s left.” This will reduce the noise level on each page and make the useful content more prominent. Conclusions Large organizations do a lot right in running their websites. However, they also face some unique challenges that can lead to painful mistakes. Resolving these problems means accepting that mistakes have been made, overcoming internal politics and changing the way you control your brand. Doing so will give you a significant competitive advantage and allow your Web strategy to become more effective over the long term. 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)

By Steven Snell Communication is one of the foundational elements of a good website. It is essential for a positive user experience and for a successful website that truly benefits its owners. All types of websites are affected by the need for good communication in one way or another. Regardless of whether the website in question is an e-commerce website, a blog, a portfolio website, an information website for a service company, a government website or any other type of website, there is a significant need to communicate effectively with visitors. Because of the significance of communication with visitors, it is an essential consideration for every designer and website owner and the responsibility of both. Unfortunately, communication is sometimes overlooked and takes a backseat to the visual attractiveness of a website. Ideally, the design and other elements that do the communicating work together to create a clear, unified message to visitors. In this article, we’ll take a broad look at the subject of clear communication in Web design. We’ll start with a discussion of the primary methods of communication for websites and typical challenges that designers face. From there, we’ll move on to look at what specifically should be communicated to visitors and tips for implementing this in your own work. At the end, we’ll look at some of the goals that should be established in terms of communication when developing websites, as well as some of the results of having a website that communicates effectively. 1. Methods of Communication Websites communicate with visitors in a number of different ways. Not all websites take the same approach, but almost every website will use at least a few common methods of communication. To get started, let’s first look at some of the basic ways that websites communicate with visitors before going into more depth on the subject. 1.1. Text Text is, of course, the most obvious form of communication that takes place online. Whether the text is in the main body content of the page or a headline, most website visitors rely on text to understand the basic messages of a website. Depending on the type of the website, text may be extremely critical to communication, as in the case of blogs. The approach taken with text will depend on the purpose of the website. For example, sales copy on an e-commerce or membership website will differ from article content on an informational website. 1.2. Images We’ve all heard the saying “A picture is worth a thousand words.” Photos and images are excellent resources not only for creating an attractive and interesting design, but also for communication purposes. Images can often communicate a message faster, more clearly and more emphatically than text. The designer needs to be aware of the messages being communicated via images and ensure they work in harmony with the rest of the website’s communication.

Photographer Andrew Gransden has a beautiful portfolio website. Most of the screen space above the fold on the home page is taken up by a large photo that rotates randomly on page load. Andrew allows the quality photography to do the majority of the communication, rather than rely primarily on text to attract potential clients. 1.3. Titles and Headers Whether you’re examining Web design, magazine layout, newspaper design, etc., titles and headers are critical to effective communication. Human nature is to want to know something quickly, and especially when on the Web. Titles and headers help to communicate major points and ideas to visitors, and they tell visitors what to expect from the rest of the content. 1.4. Icons One of the reasons icons are so useful in Web design is that they communicate messages without any text being used. A visitor may see a familiar icon, such as a house that represents a link to the home page, and immediately know what the item represents and what to do. 1.5. Design Styles The style of a website’s design may also communicate a message to visitors. Certain design styles are common in particular industries, and other styles may not be an appropriate fit for a specific type of website. The style can, in these cases, indicate to visitors something about your website and how it fits their needs. For example, a website that sells skateboards would likely feature a grunge style design. This is a style that most visitors in the target market would appreciate, and by seeing this type of style, visitors in that target market will likely feel comfortable with the website and feel an association with it. In this case, the design style helps communicate to visitors that this is where they belong and that the website was created for them. 1.6. Colors Obviously, there is an infinite variety of colors and color schemes in Web design. Sometimes colors are chosen just based on what looks good, but other times the psychology of color comes into play. Colors not only play a large role in determining how a website looks, but also communicate messages to visitors in certain ways. 1.7. Audio and Video While most of the Web is made up of text, audio and video have become increasingly common over the past few years as more and more Internet users are on high-speed connections. As audio and video have become increasingly common, many new opportunities have arisen for effective communication online. Designers and website owners have plenty of options in how they communicate with their visitors, and audio and video have some definite strengths that make them a tremendous method of communication. 2. Challenges of Creating a Website with Clear Communication In order to build a website that effectively and clearly communicates with visitors, a number of challenges need to be overcome. Not all websites are the same, so challenges may differ from one website to the next, but the challenges discussed below are some of the most common. 2.1. Too Much Content One of the biggest challenges that designers have to overcome is simply deciding on the amount of content and information to use. Of course, having a lot of quality information is a good thing, but it can also get in the way and make it difficult to communicate clearly with visitors. In many cases, websites with less content have an easier time effectively communicating a particular message to visitors because there is no excess to get in the way. By trying to fit a lot of content onto a page, the website owner can very easily create a cluttered page that confuses visitors. Primary messages are often overpowered by the busyness of a page, and sometimes the content may even send mixed or unclear messages. 2.2. Every Visitor is Different When developing websites, one needs to keep in mind that each visitor is unique and that it is impossible to classify all of them in the same group. Websites are designed with their target audience in mind, but even within that group of users, some diversity will still exist. These differences can have an impact on the communication of the website, because not every visitor will respond in the same way or understand the same messages. How are visitors different? First, demographics play a role. A website is likely to attract visitors from all over the globe, and a visitor in one part of the world will differ from a visitor in another part of the world. Age and sex will also be important factors. Beyond demographics, not every visitor will have the same purpose in visiting the website. They may be looking for different things or have different agendas on the website. Visitors will also come from a variety of sources, and visitors from one source will not always have the same characteristics as visitors from another source. Additionally, not all of your visitors will have the same level of knowledge of the subject of your website. All of these things make each visitor unique, and they all have an impact on the communication between the website and the user. 2.3. Clarity Communicating through a website is easy. Every website communicates in a number of different ways, even unintentionally. Communicating with clarity, on the other hand, is much more of a challenge. Because of the short amount of time that a new visitor is likely to spend on a website before leaving, there is a strong need for the website to quickly and clearly communicate. In order for a message to be clear, there must be a clear purpose and priority of the website that is understandable to the visitor; there must not be too much noise or clutter; and the message must be communicated in a way that it can be understood by the visitor. Blogs can sometimes be difficult for new visitors to quickly understand the purpose of. Macalicious uses a small box at the top of the page to quickly communicate the website’s purpose and background so that new visitors can immediately know something about it.

2.4. Keeping Communication Brief, But Complete Because of the need for clarity and the benefits of communicating quickly, there are advantages to keeping messages as short and concise as possible. A brief, clear message will generally be most effective for communicating quickly online. Of course, there are exceptions to this, such as situations where in-depth articles are used to provide detailed information to visitors who are interested in such information. Keeping a message brief and complete is a major challenge. One of the reasons taglines are so effective is that they can communicate something significant about the company or the website in a brief statement that, ideally, leaves a memorable impression on the visitor. Shuteye uses three simple short questions at the top of its home page to help identify visitors who could benefit from its offerings. If a visitor answers “Yes” to these questions, he or she immediately has a reason to look into the report offered by Shuteye. The communication at the top of the page is brief but highly effective for filtering potential customers.

2.5. Having Personality Online communication is unlike forms of communication that allow face-to-face interaction between two people. In online communication, the human visitor receives a message from a website, not directly from a person. However, the most effective communication generally occurs on websites that show some kind of personality in that communication. The website is a representation of the company or the person behind it, and showing that in the communication is important. Digital Mash, the portfolio website of designer Rob Morris, shows some personality with the tagline “Hero for Hire.” While there are tons of designer portfolio websites out there, Rob’s stands out in part because this statement shows some personality.

2.6. Not Overpowering the Communication with the Design The design and appearance of a website should be used strategically to enhance the message of the website, but it can also become an overpowering element that hinders communication. The content of the website is of primary importance, while the appearance of the website should be used to make the visit more pleasant, memorable and easier. The design of a website should not become a priority over the content, or else the website will suffer in usability. Pixelhaven’s minimalist design allows the company’s message to take center stage, rather than compete and potentially interfere with the message.

2.7. Gaining the Trust of Visitors Depending on your type of website or the purpose of your communication, one of the biggest challenges may be simply gaining the trust of visitors. One example would be a sales page. When a page communicates something to visitors in an attempt to convince them to buy something, there is a natural resistance to trust. Overcoming this is a major challenge. SEO Group uses testimonials from satisfied clients at the top of its page to help build trust.

2.8. Getting and Keeping Attention If you have an audience with a very short attention span and that is quick to close the browser or visit another website, getting and keeping its attention is a necessary prerequisite to effective communication. This also goes back to the issue of having a clear and concise message that communicates to visitors before they get confused or bored with the website. If visitors arrive at a website and cannot easily understand its purpose or what it offers them, they’re likely to move elsewhere. 3. What Should Be Communicated When creating a website, what things should you focus on in terms of communication? Knowing what should be communicated is a key step that cannot be overlooked. While the answer to this question will vary from one website to the next, the basics are discussed below. 3.1. Purpose of the Company or Website The most important message that must be communicated by every website is its purpose. Some visitors will likely already be familiar with the website or the company behind it, but many may not. As visitors arrive at the website, they should be able to quickly and accurately understand why the website exists and what is offered, and from this they should be able to determine if it is something that interests them. When visitors arrive at a website that does not clearly communicate its purpose or what it does, it almost always results in a frustrating visit, which leads to a website not achieving maximum effectiveness for its owner. AnswerJam communicates its purpose by answering the question “What is answerJam?” on the home page.

3.2. What is Offered? In addition to simply understanding the purpose of the website, visitors should also be able to quickly learn what the company or website offers them. Of course, this will vary from one website to another. E-commerce websites need to clearly communicate to visitors the types of products that can be purchased. Service companies should clearly communicate the services that are available to visitors. Websites that are content-rich, such as blogs, should communicate to new visitors what type of content is available to visitors and subscribers. Elegant Themes offers premium WordPress themes for an annual membership fee. The website uses a light blue box to quickly and clearly communicate the details of what is offered to visitors.

3.3. How Can Visitors Benefit? Simply listing services or products that are available may not be enough. In most cases, the website should communicate to visitors how these products and services can specifically benefit them and why they would be better off with them. Wipee List is a free online service that allows you to make and keep track of your own to-do list. Wipee List communicates to visitors that it can help them easily get in control of their tasks. This benefit is emphasized over the actual features of the service.

3.4. What Action Can Visitors Take? If a website does an effective job of clearly communicating its purpose, including what is offered and how it can benefit visitors, some of those visitors will want to take action. But is it clear what type of action they should take and how they can do so? Of course, e-commerce websites should make it easy for visitors to take action by buying items. Service companies should make it clear how visitors can take the next step towards using their services. Can visitors place an order online? Should they fill out a contact form to have someone get in touch with them? Should they call the company by phone? Only Human is a community where people can share a story to help others or post a question and ask for help from other users. The two basic actions of sharing a story and asking for advice are made very clear by simple navigation in the header that leads to these two actions.

1. Tips for Effective Communication: Now that we’ve looked at how websites communicate with visitors, some typical challenges and what should be communicated, here are some tips that can be put into practice to help with the process of developing websites that communicate effectively. 4.1. Prioritize The most important step to developing a website that features clear communication is prioritizing your messages and knowing exactly what should be communicated to visitors. If you’re not able to easily state the main point, purpose or message of your website, it’s unlikely that visitors will be able to understand that message accurately. Most websites, especially larger ones, have multiple messages that are communicated throughout their pages. In these cases, it’s important to determine a priority so that the most important messages are given more prominence. LightCMS has prioritized the simplicity and ease of use of its product. The home page, “Features” page and “Why LightCMS” page all prominently display a message that emphasizes this point.

4.2. Determine What Visitors Should Know About the Company or Website Every company and website has something that it specifically wants visitors to learn about it. It’s critical that this is identified, otherwise it will be impossible to communicate it effectively to visitors. Ideally, the website would be used as a tool to brand the company, so the messages that are being communicated should fit the overall branding efforts and strengthen those efforts. Checkout offers point-of-sale software for Macs. It has determined what is most important for visitors to know about the software and makes it clear with the simple statement, “Get a Mac. Start a Store.”

4.3. Keep it Simple Communicating effectively is much easier when the messages are simple and when excess can be eliminated. Any way that online communication can be simplified (without losing anything important) will make it easier for you and your visitors. In some cases, this may mean cutting down on communicating too many different things and just focusing on the most important aspects. By reducing the amount of information that is communicated, each message or piece of information will have more of an impact. Umbrella Today? is an outstanding example of keeping it simple. While there are plenty of options for checking the weather online, Umbrella Today is aimed at those who simply want to know if they’ll need an umbrella. Enter your zip code and you’ll get an answer.

While most websites will not be able to practically achieve this level of simplicity, it is a good example of what can be achieved when excess communication is cut out. 4.4. Keep it Relevant to Your Target Audience Because your visitors are likely to be diverse, it’s important to consider your target market and audience when developing the website. Who is the most critical audience for your company and website? The website should be designed and developed so that it can communicate specifically with these visitors. Additional efforts can be taken to communicate with other audiences as well, but the target audience should be prioritized; and if sacrifices are made, they should be made in other areas. FreeAgent provides online accounting for freelancers and small businesses. Its target audience is not large companies that are looking for a more complex accounting system. The customers it is targeting are not likely to be experts in accounting, and they’ll probably be interested in simplicity in an accounting system. FreeAgent effectively keeps its message relevant to this target audience by stating that it is “Accounting for the rest of us.” If a visitor has been frustrated by other more complex accounting systems, they’re likely to immediately feel that FreeAgent was made with them in mind.

4.5. Make the Message Impossible to Miss The most effective way to ensure that visitors receive the most important messages of a website is by making them nearly impossible to miss. This can be done in a few different ways, but using large text, colored text or some other design technique to make the message stand out are common. Other techniques include automatically loading audio, video and pop-ups, each of which brings its own usability issues and concerns. Treemo Labs uses a large bold font to immediately communicate what services it offers.

4.6. Style Text Messages can easily be made to stand out by using bold text, colored text or larger font sizes. These things are all visual clues to visitors that something is important and prioritized. Of course, the more that is added to a website, the less impact that piece of text will have. For example, if a page is styled in a very basic manner, with only one line that stands out in large bold text, this line will be extremely noticeable and likely have a significant impact. On the other hand, if a page using bold or colored text in several different places and various font sizes all over the place, the result is that nothing will really stand out because there is not enough uniformity. Another option for styling text is demonstrated by Auditude. It uses a simple change in background color to create a box that separates a particular section of text. As a result, that section of text stands out.

4.7. Use Headers and Sub-Headers On pages that consist of a significant amount of text, breaking it up and identifying the main points with headers and sub-headers can be very effective. Headers not only help to make the text more readable by creating white space and using bold font to add variety to the page, but they also communicate a structure of the content to visitors and can summarize the primary messages of the content. 4.8. Make Everything Count, or Get Rid of It When it comes to communication online, it’s very easy to complicate a message by adding more than is necessary. The best solution is to use only what has an impact. Make everything count, or just get rid of it. If text or an image doesn’t really serve a purpose, it’s only complicating things by cluttering the most important messages. In this situation, you’re better off without it, and the result will be a simpler, clearer message. The website for Silverback contains no unnecessary text. Above the fold, visitors see a list of what Silverback does, and further down the page are some more details on the service, but only essential information is included.

1. Goals for Communication When Developing a Website As you’re designing and developing websites, here are some goals to keep in mind that should help you stay focused on creating ones that communicate effectively. 5.1. Clarity One of the major goals of communication for website designers, developers and owners should be to present a clear message through the website. Regardless of what methods are used to achieve this clarity, the message must not be difficult for visitors to recognize or understand. By the time visitors leave the website, they should have received and understood the primary message. Tickerville is a blog and a community for traders. The website has a welcome message that clearly states its purpose. When visitors arrive on the website and are greeted by this statement of purpose, they know immediately if they fit into the target audience. If they do, they’re much more likely to feel at home on the website because they know it is for them.

5.2. Communication that Truly Helps the Business and Visitors While clarity is critical, clarity alone does little good for the business if the right message is not conveyed. Of course, the website will be most effective for the business and most useful to visitors if the messages being communicated are the most appropriate and significant ones. LongTermClients offers business greeting cards, but that is not quite clear simply from the name LongTermClients. Below the title of the website, it says “business greeting cards,” which makes it much easier for visitors to know what the website is all about, and which should also improve the results of the website for the company.

5.3. Consistency of Message Particularly with websites, consistency must be addressed. While the website’s home page may do an effective job of clearly communicating with visitors, many visitors will be entering the website through other pages. Are those secondary pages equally effective in communicating the same message? Secondary pages likely include additional information and messages for visitors, but the website should work as a whole to create a unified, consistent message. 5.4. Design that Enhances the Message The appearance and style of the website should fit and complement the communication that is taking place, not interfere with it. A great-looking website is a wonderful thing, but it should never exist at the expense of its content or communication. 5.5. Communication that Relates to the Target Audience In order for the website to maximize effectiveness, the communication must be relevant to the target audience of the website. If the website targets a specific audience, but the communication isn’t catered to them, the content will be ineffective. Make it a priority to meet your visitors at their level, whatever that level may be. Last.fm uses a subtle but effective twist to the standard search box. Rather than simply saying “Search,” it asks the visitor “What music do you like?” Because its target audience consists of music lovers of all kinds, this simple question above the search box encourages visitors to enter a response of their own. Once they search for something that they like, they may find something that keeps them on the website for a while.

5.6. Use of Website Structure to Build on Communication Part of building a website that communicates effectively is developing a clear website structure and navigation. A highly usable website with an effective structure can help further improve communication by making it clear to visitors what is available on the website and where they can go to find what they are looking for. Help make it easier for visitors to find what they want, and you’ll improve the overall communication that takes place. Gallery website Pattern Tap uses effective categorization to create structure and to make it super easy for visitors to find what interests them.

1. Results of Good Communication Websites that are able to achieve effective communication with visitors benefit in several different ways. Likewise, websites that do not communicate effectively usually struggle in these areas. 6.1. Visitors who Understand the Purpose of a Website A website that communicates effectively will benefit immensely if visitors are able to understand what the website is all about; and the experience will also be more pleasant for and useful to them. It’s hard to build a successful website that doesn’t start with a solid foundation of effective communication. 365 Days of Astronomy uses a spot in its sidebar right below the logo and branding area to briefly explain the purpose of the website and what it offers to visitors.

6.2. Improved Branding Another significant result of effective communication is improved branding. If the message or purpose of the website is communicated effectively to visitors, it will leave an impression on them that will help form their image of the company. Branding is important online and off, and the messages being sent are a major factor. 6.3. Reduced Bounce Rates Websites that communicate effectively will be more user-friendly and more helpful to visitors. Fewer visitors typically leave such websites quickly as a result of not being able to find what they are looking for. Instead, they’re likely to remain on the website for a longer period of time and view a higher number of pages. Because of effective communication, visitors find the right content easily. 6.4. Less Frustration for Visitors We’ve all had the unpleasant experience of being on a website that simply doesn’t communicate well with visitors. Maybe the purpose of the website was unclear, or maybe you weren’t sure how to find what you were looking for. Websites that fail to communicate effectively frustrate many visitors, which is obviously not a good way to build a successful website. 6.5. More Sales, Leads, Subscribers, etc. Websites have all kinds of different goals; but regardless of what the specific goals of your website are, the website is more likely to achieve them with effective communication. Whether you’re selling products, promoting a service, building a blog readership, developing a social network or simply providing information, communication is essential to success. The website of Mia & Maggie uses color to make the text “Free shipping” stand out. By drawing more attention to that statement, the company will likely receive more orders from people who want to take advantage of the offer. Keeping that text white would likely not produce the same results.

6.6. Less Unnecessary Inquiries If visitors can’t find what they’re looking for on your website or if they’re not sure what is offered, you’re likely to receive emails or contact form submissions that could be avoided with better communication. Receiving inquiries is certainly not a bad thing, but when you’re answering questions that are either already answered on the website or are asked repeatedly but not answered on the website, a breakdown in communication has occurred somewhere. Websites that do a good job of communicating with visitors may receive some of these kinds of inquiries from visitors who don’t make any effort to find the information, but generally they will receive less unnecessary inquiries because visitors will be able to find what they are looking for without needing to ask for help. About the Author Steven Snell is a Web designer and blogger. He actively maintains his own blog at Vandelay Design, where he frequently publishes articles about design, collections of resources and inspirational galleries. You can also follow him on Twitter. (al)

By Paul Boag Twitter is the new big thing. With everybody from Britney Spears to Barack Obama now on Twitter, it is safe to say the social networking platform has gone mainstream. For many users worldwide Twitter has become a crucial tool for maintaining contacts, exchanging opinions and making new connections. But what does this mean for the service, and how can we, website owners, actually use it for our purposes? I posted my first tweet in November of 2006, only 7 months after the service launched. For me, it was a way to keep in touch with new friends. It was less intrusive than instant messaging and less formal than email. I quickly became hooked. For the longest time, it was the tool of geeks. My friends laughed at me as I tweeted from the pub; my family stared blankly as I explained the service. However, that has all changed now. Twitter is the new big thing. With everybody from Britney Spears to Barack Obama now on Twitter, it is safe to say the social networking platform has gone mainstream. Some time ago I was wrong to lament on Twitter about it becoming a marketing tool; I should embrace it as a tool I can use. Nevertheless, like everybody else, I need to be careful how I use it. I do not believe Twitter users will allow the tool to be reduced to a broadcast mechanism for pimping the latest blog post or special offer. So how do I use Twitter? I guess the first thing to say is that I am not a huge Twitter success story. However, Twitter is turning into the third facet of my online presence, alongside my blog and podcast. With that in mind, let me share a few tips that have helped me better use this interesting new tool. 1. Above All, Keep It Personal Although Twitterers like CNN breaking news have been very successful, generally, corporate Twitter accounts are a mistake. Twitter is about person-to-person communication and not a broadcast tool for faceless corporations. To use it in that way is to miss the potential of Twitter. CNN Breaking News Twitter Page Does that mean you cannot have a Twitter account for your organization? Not at all. For example, if John Boardley created a Twitter account, you may not recognize the name. However, if he used the name ILoveTypography, you would be more likely to follow because you know the I Love Typography website. It is not the name that matters so much as the tone of the posts. Tweets should be more than an endless string of press releases and links. They should include personal content and a dialogue with followers. This is important because it enables you to make a connection with your followers. An open and honest relationship with followers is very powerful. It builds trust, loyalty and engagement. It encourages repeat traffic and word-of-mouth recommendation. 2. Learn From Others I have learned a lot about Twitter just by reading the tweets of those I admire. Merlin Mann, for example, injects a lot of humor into his posts, and his followers really respond to that. Darren Rowse, on the other hand, strikes a good balance between recommending content others have written and promoting his own posts. TweetStats.com allows you to build up a picture of how successful twitterers use the service. In addition to examining the styles of others, you could also examine statistics. Use a tool like TweetStats to examine how often others tweet and how often they reply to their followers. All of this helps to build a picture of what makes a successful tweeter. There is also a growing number of great websites that give advice on how to get the most out of Twitter. One of my personal favorites is TwiTip, which covers such subjects as “The Merit of Twitter Competitions” and “How to Get Unfollowed on Twitter.” 3. Get A Good Desktop Client Without a shadow of doubt, the most powerful Twitter client currently available is TweetDeck. This AIR application not only runs on Windows, Mac and Linux, but also provides a range of superb tools for managing your life on Twitter. TweetDeck is the most powerful desktop Twitter tool available With TweetDeck, you can create groups, filter tweets, monitor certain subjects as well as post tweets, replies and retweets. In fact, it is so powerful that it can be somewhat intimidating at first. Don’t let that put you off. Check out this short tutorial on TweetDeck’s core features, and you’ll be up and running in no time. 4. Use Twitter On The Road If your Twitter account is going to be personal as well as professional, then you will almost certainly want to use it on the road. One option is simply to use Twitter’s mobile website. However, if you are fortunate enough to have an iPhone, then there is a wealth of Twitter clients available to you.

I have paid for and tried almost every Twitter client on the iPhone, but the winner hands down is Tweetie. I love Tweetie. It has a clean, easy-to-use interface and yet is packed with powerful features, including the ability to:

handle multiple Twitter accounts, navigate reply chains, view Twitter trends and perform custom searches, access complete user profiles.

In many ways, it is even better than TweetDeck because it has much of TweetDeck’s power but in a much cleaner interface. If only they made a desktop application! 5. Tracking The Results TweetStats is just the tip of the statistical iceberg. There is an ever-growing number of tools you can use to track your activity on Twitter. However, the ones that really interest me are those that track click-throughs. What I really want to know is, if I post a link on Twitter, how many people click through?

If the link points to one of my own websites, I could use Google Analytics’ URL tagging tool. However, this is somewhat fiddly and only works if I am linking to my own website. What’s more, these URLs can get long, which is a problem when you’re limited to 140 characters. Fortunately, there is a tool called TwitterBurner, which solves these problems. It shortens URLs and tracks all click-throughs, even to websites you do not run yourself. Best of all, it is now supported directly in TweetDeck (although not in Tweetie, unfortunately). 6. Follow And Be Followed Always remember that Twitter is a two-way conversation. A big part of successful tweeting is replying to those who tweet you. Twitter is not just about who follows you, either. It is also about who you follow. One service I find particularly useful is Mr Tweet. Mr Tweet provides two type of information:

first, it suggests people you might want to consider following, because they fall within your broader network (i.e. people who are followed by your friends), secondly, it suggests those from your list of followers who you should follow back.

For each of these people, it provides various statistics, including:

the number of followers they have, the chances of them replying to you, how often they update.

This is a great way to extend your network of contacts and increase the chances that your tweets will be retweeted. It’s also a great way to meet new people! 7. Integrate Whenever Possible If you intend to use Twitter for anything other than personal use, it needs to be incorporated in the rest of your Web strategy. That means it needs to link to your other online activity, including your website and other social networks. There is no shortage of tools to help you do this, from the basic Twitter widget to a tool for sending your tweets to Facebook.

One tool that caught my attention is called TwitterFeed. It posts content from an RSS feed to Twitter, which is a convenient way to update your followers on new posts. However, use any tool that automatically posts to Twitter with caution. It can easily become annoying if used too much. Also, it lacks the friendliness of a personal post. 8. Don’t Over-Think It Of course, the problem with all these tools, statistics and analysis is that they can suck the spontaneity and personality from your tweets. While some of those late-night drunken tweets are best left behind, you want to avoid making your tweets too sterile. Let me explain. I am naturally a fairly good public speaker. However, once I attended a public speaking workshop. The instructors taught me about all of the techniques that make for an exceptional speaker. However, instead of improving my skills, they made me so amazingly self-conscious that I was paralyzed. I started over-analyzing what I was doing.

The danger is the same with Twitter. Sure, Twitter can be used as a marketing tool, but that doesn’t mean it cannot be fun too. Don’t let articles like this suck the joy out of tweeting! 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. By the way, we are tweeting, too — please feel free to follow Smashing Magazine on Twitter. (al)

Color is a major consideration in any Web design. Whether for an individual, small company, or major corporation, color scheme is one of the most significant factors in the overall look and appearance of a website. In some cases, the designer may have the sole discretion in making color choices, but many times a color scheme has already been established and needs to be followed. In situations where a company already has a strong brand, color usage for the website can either build or take away from this. In this article, we’ll take a look at the impact that website color schemes have on the overall branding of a company, and we’ll also look at plenty of examples. We won’t be going into the subjects of color choices for branding or the psychology of colors, but rather we’ll look at established companies to see if the colors in their website branding are consistent with the rest of their marketing.

There are companies in every imaginable industry that have spent many years and a lot of money along the way to create a specific image and brand recognition with customers. In these cases, their corporate websites should obviously benefit from this established identity and should work to make it even stronger. However, as we’ll see throughout this article, this is not always the case. Some companies do an excellent job of blending their traditional offline image with a modern website, and others have not taken full advantage of their existing brand images when building their websites. The example websites we’ll be looking at in this article all belong to companies that have built their brand using specific colors. When you think of these companies, you think of a specific color, and probably a familiar logo that contains these colors. Because branding is so dependent on customer perception, customers also have certain assumptions and expectations of companies that have an established brand. Many of these examples are major retailers, restaurants and companies that have physical locations where customers can go to purchase products or services. In these cases, each company typically has established colors for the store itself, signage outside the stores, advertising and promotion campaigns and a company website. The branding is usually more effective if the company’s website has a similar feel to that of the physical stores and the identity that the company has developed over time.

Impact of a Website’s Colors Whether you’re looking at a website, a flier in a newspaper, a magazine ad or a retail catalog, color choices are critical to the branding of a company. Most companies have chosen a standard color scheme that is used consistently throughout their marketing materials. When a website is well designed and effectively uses colors that have been branded over the years, the website and the company benefit from the familiarity that the website and the brand have with customers. Loyal customers to the company may be new to the website, but if the website is branded consistently with the company as a whole, those visitors are likely to feel at home instantly because of the consistency.

Colors are critical to building the brand’s image, just as logos are important for the same reason. With many retail companies looking to boost revenue through increased online sales, converting traditional retail shoppers to online customers is a critical step. Many retailers are effectively creating websites that have a very similar look and feel to the actual retail stores themselves. The style and colors of the brand are often replicated as much as possible throughout the website, which creates a more unifying experience for online visitors who have also shopped at the physical retail locations in the past. By building one consistent brand image, the company is able to more effectively meet its customers in the marketplace, whether that is online of offline. Impact of Color on Visitors When visitors come to the website of a brand they know very well, they’ll often have certain things they expect to find. Of course, they’ll expect to see a company logo that they’re accustomed to seeing. They’ll expect a certain type of content according to the type of website it is. They’ll expect a design style that fits the corporate identity. And they’ll expect to see familiar colors. In many cases, they probably don’t even realize they have all of these expectations; but imagine a company that has branded itself with a particular color for years and years, and now you visit the company’s website and that color is not a major part of the design. You’ll probably be a little surprised, and the website is unlikely to have as familiar a feel as it would have with the traditional colors.

If a company has branded itself a certain way and with specific colors, customers and others familiar with the company will have subconsciously associated those colors with the company. When these people arrive at the company’s website, those colors will be a big part of the experience and determine whether the visitor feels connected to the website or senses a disassociation with the rest of the company’s branding efforts. Evaluating Use of Color In order to take a good look at this subject, we’ll need to evaluate a number of companies and websites. In the examples here, we’ll see some that do an effective job of working with the company’s existing branded image and color scheme, and we’ll see some that don’t use company colors in quite the way that you might expect. All of these companies have used specific colors very significantly in their branding. Most are very well-established international companies that everyone is familiar with, and in most cases you could associate a color with the brand just by hearing the company name. Wal-Mart Wal-Mart has branded itself over the years as the leader in low-cost retail goods. Along the way, it has used the color blue in just about all of its branding efforts. In recent years, Wal-Mart has been trying to upgrade its image in the eyes of customers, but the familiar blue color has not gone away, although the logo did get an update not too long ago. Like most retailers’ websites, Wal-Mart’s is primarily white, but there is plenty of blue to give it the familiar feel. Navigation and headlines are blue throughout most of the website — the same blue color and same Wal-Mart logo found at Wal-Mart’s retail locations, in fliers and advertisements and in all of its other marketing materials. Throughout the website, orange and yellow are used as secondary colors, but the heavy use of blue in graphics, navigation and headers is what really gives the website a familiar Wal-Mart feel.

McDonald’s Fast food giant McDonald’s is very well recognized for its golden arches and prominent red. However, the US home page for McDonald’s does little to build on this strong brand that has been built over a long period of time. The golden arches logo is there, but black is used much more heavily than the gold and red color scheme. Certainly, the website does need to be more than just gold and red, as that would be very hard on the eyes, but it seems that the McDonald’s website doesn’t quite feel like McDonald’s because of this color difference. Even by just using a white background instead of a black background, the gold and red would stand out more in the design, instead of being overpowered by the black. An area for potential improvement is the primary navigation menu at the top of the page. A red background here would do more to promote the McDonald’s brand and build familiarity with visitors and customers. With the navigation menu currently designed on a black background, gold could be used either in the text colors or on hover.

Coca-Cola For decades, the Coca-Cola brand has been built with a very familiar red and white color scheme. Everything from product packaging to displays in retail stores to advertisements has predominantly used the same color scheme, and as a result the Coke brand is one of the strongest in the world. The Coca-Cola website does use the red and white color scheme, but there is much less red than you would expect. The website could easily be a better fit with the company’s corporate identity with a design that has a red background instead of the gray currently being used. The well-known Coca-Cola logo is also not used prominently on the home page. There is a very small logo at the top of the page above the main navigation, which can also be seen on a few of the product labels displayed. The corporate identity could possibly be enhanced by using a larger logo at the top of the page and by showing it in red, or in white on a red background, rather than in gray on a white background.

Pepsi Coca-Cola’s major competitor, Pepsi, has also used a standard color scheme in its own branding efforts over the years. The red, white and blue color scheme is a Pepsi staple, and the website is true to form in this area. Most of the website is blue and white with some red in the logo, which stands out more because red is used sparingly. Just about everything on the home page is red, white or blue.

ING Financial services provider ING has branded itself with a blue and orange color scheme. As expected, its website strongly uses these company colors, with orange and blue being almost the only colors used on the website, aside from the white background and the dark gray text. The main navigation menu is orange, and headlines are blue. Of course, the logo also uses orange and blue on the white background. ING’s online banking customers also see the familiar orange and blue every time they visit their accounts at ING Direct. This website uses more orange in the design, but the color scheme and branding are consistent.

Ford US automaker Ford has built its own brand with steady and consistent use of blue. The Ford website obviously is an extension of this branding effort as blue is used as the background color. Although a brand’s colors don’t necessarily have to be used as the background color of the website (most companies still use a white background), Ford manages to push its brand with heavy use of blue on the website. Even design elements such as the search button and the secondary navigation towards the bottom of the screen use shades of blue. One potential area for improvement in terms of corporate identity would be to use the Ford logo in the header, rather than just the words “Ford Motor Company.” The logo does appear on the home page, but it’s smaller and a bit less noticeable than it would be in the header.

Best Buy Best Buy customers know that the company makes heavy use of its blue and yellow color scheme. Even store employees are easily recognizable in their blue shirts. Consistent with the rest of the company’s marketing and branding, the Best Buy website uses the familiar color scheme. Blue is used throughout the website, in the header navigation and even in graphical elements. Yellow is used more sparingly but is certainly a significant part of the website’s design. Because yellow is used in only a few places, it has more of an impact in contrast to the blue colors, and the items in yellow really stand out and draw attention. The Best Buy logo, the yellow shopping cart, the “Go” button on the search form and the “see Steven’s story” button all stand out because of the yellow color. As a result, Best Buy’s website is able to use very little color outside of its standard blue and yellow, and it is still able to emphasize what it wants.

Hershey’s Chocolate maker Hershey’s has naturally used the color brown for its own branding. Within the Hershey’s family, several smaller brands each has its own identity and marketing approaches, but for the company as a whole, brown is the predominant color. It should be no surprise then that the Hershey’s website is very brown. In my opinion, the Hershey’s website is more effective at using the company’s established brand and colors on its website than just about any other website featured here. The white background in the content area keeps the website user-friendly, but there’s no mistaking the Hershey’s brand, and the website makes you want to eat one of its products. Brown is used for the background of the website (with a white background for the content area), as well as the header and primary navigation, the links lower on the page, the items in the sidebar and the website footer. The design does a good job of matching the color scheme to the colors of products in photos that appear on the website, such as the one shown in the screenshot below.

Bank of America Bank of America makes use of the US national colors of red, white and blue as the company’s typical color scheme. It’s not unusual that a company attempts to brand itself with national colors, the intent being to benefit from customers’ loyalty to those colors. The Bank of America website clearly builds on this established brand by using only these colors on the website. The background is white, with a red navigation menu and blue used for links and the log-in box at the left of the screen.

T-Mobile T-Mobile typically uses a bright pink in its marketing and branding. Often, this color is not the most heavily used color because it can be overpowering and too much to look at if overused, but it will always appear somewhere in the company’s branding. The website makes effective use of this color in the navigation menu, the logo, as well as headlines and links throughout the website. The white background keeps the color scheme from being too over-the-top and makes the website easy to look at, but still maintains the familiar T-Mobile look. Aside from pink and white, other colors on the website are gray and a soft blue. Pictures of the products used throughout help to give the website a more engaging appearance. The other colors that are used help to soften the look of a design that features as bright a color as pink, but the identity and branding impact of the pink is still obvious.

CVS CVS Pharmacy traditionally uses red and white at its retail stores and throughout its branding. The familiar red color is used heavily in the CVS website in the background (although the content area has a white background) and in the header. There are a few different shades of red used throughout the design, and various shades of blue and gray are also used. Product photos have some additional colors, but throughout the website there is no way to miss the common red and white of the CVS corporate identity. In this case, the red in the header and background has more of an impact than the blues used in the main content area. If those colors were reversed, the website would have a much different feel and would lack similarity with the corporate identity.

Merrill Lynch Financial services provider Merrill Lynch has traditionally used a lot of blue in its branding. The Merrill Lynch website uses a few different shades of blue, along with a white background. The color blue is used for links throughout the website and headings in some places. Aside from the blue, there are a few red highlights, but mostly just black and gray. The Merrill Lynch bull logo is shown in white on the blue header.

Target Target’s retail stores and all of its marketing use red and white as the company colors. Inside the stores, you’ll see Target employees in red shirts as well. When shopping online at Target’s website, you’ll also see the standard color scheme. The website uses a white background and a good bit of gray, but there is still plenty of red to give the Target feel. On the white background, the red in the Target logo really stands out. The logo is a big part of the company’s identity, so allowing it to stand out by using a white background is effective. The color red is used for maximum impact in the design. The red bar advertising the clearance sale, the words “Spend $50, get free shipping” and the text “Free shipping” in a few places all stand out because of the red. If red were used more heavily instead of white and gray, this effect would not be possible.

Circuit City Circuit City also uses red and white in its branding and marketing. As with Target’s website, white and gray are used throughout, but the red still has a dominant presence. Circuit City actually uses more red than Target. The primary navigation menu, the featured product area and a few other design elements are all red.

Home Depot Home Depot’s marketing materials and its retail stores rely heavily on the use of its familiar orange. Surprisingly, the company website does little to build on that existing brand. Orange is used in the logo, although the logo is very small, and is only used for a few other elements throughout the website, such as buttons. A larger logo would help for corporate identity purposes, and an orange header or main navigation menu (instead of the dark gray) could also help. Although the orange is used sparingly, it doesn’t make as much of an impact as the red in Target’s design because the Home Depot website uses a greater number of colors. The green and yellow, as well as the colors in the product photos, reduce the impact of the orange.

AIG International insurance company AIG uses blue in its branding and marketing. Appropriately, the company’s website is mainly blue and white. The blue and white logo sits on a blue background just above a tabbed navigation menu that is also blue. By using different shades of blue, AIG has created a design that doesn’t need several other colors, which wouldn’t help build on the corporate identity anyway.

Staples Office supplies retailer Staples consistently uses red in its stores and throughout its marketing materials. Surprisingly, the company’s website makes much less use of red than you would expect. Blue is actually used more prominently than red, which doesn’t seem to be the case with any other type of branding that the company does. As a result, the website doesn’t fit so well with the corporate identity and seems to be a bit out of place. The website could have a much more familiar Staples feel if it had a red header or a red background, instead of the gray that sits outside of the content area. Additionally, red could be used for the headers “Office Supplies,” “Technology” and “Furniture,” instead of blue. Another option would be to use fewer colors and more white and gray, which would give the red more impact. As it is, the website uses a lot of different colors, but makes little impact with any of them.

UPS UPS probably uses color in its branding as much as any other company. UPS’s familiar brown color appears on everything from its trucks to employee uniforms, and is even referred to by name in its marketing efforts. However, brown is not used as heavily on the UPS website as you might expect. Brown is used in the header and in some headlines throughout the website, but it seems to break the mold that UPS has been building so strongly in its branding with the color brown. One option would be to use different shades of brown, rather than some of the other colors that are used, such as green and blue. The website would have a much different feel if the green area of the header, where it says “UPS United States,” were also brown and if the primary navigation were a slightly different shade of brown. Another option would be to center align the website and use a brown background outside of the content area (currently, the website is left aligned with an all-white background).

NBC NBC’s multi-colored peacock logo is very well known and has been around for a long time. Although the logo is used several times throughout the NBC website, the colors aren’t really used repeatedly. More color could be used in the navigation menu, instead of white on gray. Another option would be to use some color in the headlines instead of the gray that is used in many places. MSNBC makes better use of the familiar colors in its header.

How Does this Affect You as a Designer? All of the examples we looked at throughout this article were websites of major companies that, in most cases, have an international presence. The average Web designer works mostly on websites for small- to medium-sized businesses and will likely never work for companies of this size and magnitude. However, there are still some lessons that can be applied to websites of smaller companies that don’t have an established brand recognized around the world: 1. Consistency. As we’ve seen, consistency throughout all marketing media is powerful. Any business attempting to build a strong branded image should include its website in its overall marketing plan, and the design should reflect the image being built. This includes logos, color schemes, taglines and anything else used to develop the business’s identity. Whether the business is big or small, consistency is needed. 2. The subconscious of customers. Most of the time, customers do not consciously associate specific colors with a company. But over the course of time, with a company’s successful branding efforts, those customers will match the colors and company whether they realize it or not. This means that what customers subconsciously associate with a company can affect their experience on the website. Even with smaller businesses, customers and website visitors may have some prior experience with the business that can affect how they perceive the business. 3. The impact of re-branding and redesign. During a website redesign, even for a small business, choices of color and its impact on overall branding should be considered. As we’ve seen with the example websites, once a brand has been established, customers and visitors will have certain expectations of the website. Even small businesses that have been working to build their brand could take a step backwards if significant branding changes are made during the redesign process. Of course, there may be times and reasons to go ahead with a re-branding attempt, but the impact should be considered and the pros and cons weighed. 4. Make color choices wisely from the start. Because it can be difficult to make significant changes to color schemes once considerable branding efforts have been made, it is not a decision that should be rushed in the first place. When a company is being established or a new website is being planned and developed, colors should be given plenty of thought and consideration. A solid choice from the start will make everything easier down the road. 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 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)

More and more applications these days are migrating to the Web. Without platform constraints or installation requirements, the software-as-a-service model looks very attractive. Web application interface design is, at its core, Web design; however, its focus is mainly on function. To compete with desktop applications, Web apps must offer simple, intuitive and responsive user interfaces that let their users get things done with less effort and time. In the past we didn’t cover web applications the way we should and now it’s time to take a closer look at some useful techniques and design solutions that make web-applications more user-friendly and more beautiful. This article presents the first part of our extensive research on design patterns and useful design solutions in modern web applications. Below you’ll find a collection of 10 useful interface design techniques and best practices used in many successful web-applications. Please feel free to suggest further ideas, approaches and coding solutions in the comments to this post. The second part of our research will be published soon: stay tuned via RSS and Twitter . You may 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 Getting Creative With Transparency In Web Design

1. Interface elements on demand Simplicity is important in user interface design. The more controls you display on the screen at any time, the more time your users will have to spend figuring out how to use your interface. When there is less choice, the available functions become more apparent and are easier to scan. Simplifying an interface isn’t easy though, especially if you don’t want to limit the app’s functionality. When you click on the search link in Kontain’s search box, a similar drop-down menu appears. So, if you need to narrow your search, you can use the menu to select the sort of content you’re looking for. Tucking these options away simplifies the search box. One way of making things simpler is to hide or conceal advanced functionality. Find out the most commonly used functions of your interface and tuck away the rest. You can do this with pop-up menus and controls, which are very common on desktop software. For example, if your search bar has advanced filters, put them away in a special drop-down menu at the end. If users need those filters, they can enable them with just a couple of clicks. Deciding what to keep and what to conceal isn’t a simple task, though, and will depend on how important and how frequently used each of the controls is. When you click on the search link in CollabFinder, you aren’t taken to a different page. Instead, the search box controls drop down, allowing you to begin your search straight away.  
2. Specialized controls It’s important to select the right interface controls for the situation. Different situations can be handled in different ways, and certain controls are better at their intended task than others. Backpack has a compact calendar date and time picker for selecting a reminder date. For example, you can select a date by using drop-down lists for day, month and year. Drop-downs aren’t very efficient, however, when compared to a calendar picker, where you can click directly on a day you want. Calendar pickers also help you see the days, weeks and months (and especially workdays and weekends) more easily and so allow you to make a more informed decision more quickly than you would with a simple drop-down list. MyBankTracker’s APY calculator features easy-to-use slider controls for quickly trying out different projections. Another good example of this are sliders. Yes, you can always input a number manually, but for certain situations, slider controls do a much better job. Not only are they easy to use — just click and drag — but you can also see how your selection fits between the minimum and maximum of an available range.  
3. Disable pressed buttons One of the problems Web applications encounters with forms is the submission process. With very simple forms, if you click the “Submit” button twice or more very quickly, the form will be submitted two or more times. This is obviously problematic because it will create duplicates of the same item. Preventing duplicate submissions isn’t very hard, and it is essential to do this for most Web apps. There are two tiers to this safeguard: client-side and server-side. We won’t go through the server-side safeguard here because this will vary depending on the programming language you use and your back-end architecture. What you should essentially do is put in a check to ensure during the processing stage that whatever is being submitted is not a duplicate, and if it is to block it. Yammer disables the “Update” button while your new message is being submitted. The client-side stage is much simpler. All you have to do is disable the “Submit” button the very moment it is clicked. The easiest way to do this is to add a piece of JavaScript to the “Submit” button like this: <input type="submit" value="Submit" onclick="this.disabled=true" /> Of course, we would advise you to also implement server-side checks to be sure that duplicates don’t get through.  

4. Shadows around modal windows Drop shadows around pop-up menus and windows aren’t just eye candy. They help the menu or window stand out from the background by reinforcing its dimensions. They also block out the noise of the content beneath the window by darkening the area around it with a shadow. This technique hat its roots in traditional desktop applications and helps the user to focus his/her attention on the appearing window. Since most modal windows aren’t as easy to distinguish from the main content as in desktop applications, shadows help them to appear closer to readers, because the window appears to be three-dimensional and lay above the rest of the page. Digg’s log-in window has a thick shadow around it to block out the noise of the page beneath. To achieve this effect, designers often create a container with a transparent PNG-image as background and place the content inside the container - with equidistant padding on all sides of the box. Another option is to use a background image with transparent borders and position the content box within this box using absolute positioning. This is exactly what Digg does — this is the image they are using (dialog.png). And this is the markup and CSS-style they are using: (X)HTML:

   <div id="container"> <div style="display: block; top: 236px; opacity: 1;" class="dialog"> <div class="body"> <div class="content"> ... </div> </div> </div> </div>

CSS:

.dialog { position: absolute; left: 50%; margin-left: -315px; width: 630px; z-index: 100001;

} .dialog .body { background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */ padding: 40px 13px 10px 40px; }

Alternatively, you can also use JavaScript-based lightboxes or drop shadows using CSS3-attributes we’ve described earlier, but you need to be aware that Internet Explorer won’t support them. Basecamp’s project switcher window has a large soft drop shadow that helps the menu area stand out.   5. Empty states that tell you what to do When you’re designing a Web application, it’s important not only to test it with sample data, but to ensure that it looks good and is helpful when there is nothing there yet. You should design the empty states. When there is no information for a page or query yet, a helpful message telling the user how to start could go in that empty space. For example, a project management application’s home page may list the user’s projects, but if there are no projects yet, you could provide a link to the project creation page. Even if there is already a button to do that on the page, an extra bit of help doesn’t hurt. Campaign Monitor points you in the right direction when you start building an email campaign. This technique encourages users to actually try out the service and proceed directly with using the service after registration. Guiding the user through single steps of the application may help him or her to understand what advantages the application offers and if it’s useful or not. It is also important to present most important options to the users and only them — it doesn’t make sense to overflood them with numerous options. Keep in mind that users usually want to get a more or less concrete idea of what is offered to them, but they don’t want to jump into details — they have neither time nor interest in it. Using empty states to motivate users and animate actions, you can significantly reduce the amount of “drop-outs” and help your potential clients to gain a better understanding of how the system works. Wufoo’s forms page has a large, friendly message inviting you to create a new form if none yet exist.   6. Pressed button states Many Web applications have custom-styled buttons. These are anchors or input buttons that have custom images assigned as their backgrounds. The default input buttons may not be suitable in some cases, and the text links are sometimes too subtle. The challenge is, when you make your links look like buttons, they should act like buttons — and this includes having a “pressed” look when the user clicks on them. This isn’t a purely visual tweak. Giving instant feedback to the user will make the application feel more responsive and bring the experience closer to what the user experiences on desktop applications. You can add a pressed button state with CSS by styling the active pseudo-class of the link in question. So for example, if your anchor has the class add_task_button, you can style its active class by targeting add_task_button:active. Buttons in Highrise actually show a pressed state when you click on them, providing the user with a satisfying responsive feel.   7. Link to the sign-up page from the log-in page Some people who haven’t yet signed up to your application will inevitably end up on the log-in page. They likely want to try out your application but can’t find the registration page in a hurry. Perhaps they’ve tried accessing a feature that’s only available to registered users. Don’t have a Delicious account? No problem; a sign-up link is provided on the Delicious log-in page. Goplan has a nice colored button on the log-in page pointing to the sign-up page. Make things easy for these folks by placing a registration link on your log-in pages. If they haven’t got an account yet, they shouldn’t have to look for a registration page. Our studies confirm: 18% have a sign-in form or a link to the sign-in form placed next to it (e.g. YouTube, Reddit, Digg, Lulu, Metacafe).   8. Context-sensitive navigation It’s important to think about what the user expects to see and what they need in every given context. You don’t need to display the same navigation controls everywhere because users simply may not need them in every situation. One of the best examples of context-sensitive controls is the recent change in the Microsoft Office 2007 interface, in which the default set of toolbars was replaced by ribbon controls. Each tab on the ribbon holds different controls relating to a particular activity, be it editing graphs, proofreading or simply writing. Web applications can also benefit from such context-sensitive controls because these controls help unclutter interfaces by showing only what the user needs, not everything that’s available. Lighthouse features a familiar tabbed navigation menu; however, it also has a second level of menus right under the set of tabs. This level displays only the items associated with the active section of the website.   9. More emphasis on key functions Not all controls hold the same importance. For example, on a screen for creating a new item, you may have two buttons: “Create” and “Cancel.” The “Create” link is more important because that’s what the user will be doing most of the time. Only rarely will they need to cancel the screen. So if these controls are located side by side, you may not want to give both the same emphasis. The “Create ticket” button in Lighthouse. You can see the “cancel” link next to it, in plain text. The button not only commands more importance but also has a larger clickable area and is easier to spot because of its frame. To shift emphasis to the “Create” link, we can simply use different styles or types of controls. Some applications use the form input button for the create action, and have the cancel action as a text anchor. This not only gives the create button more clickable area, it also helps to grab the users gaze better when they’re looking for it. 10. Embedded video While pictures and text are a great way to communicate and teach your users about your app’s features, video can be an even better alternative if you have the resources to produce it. Video has been gaining popularity on the Web in recent years. For Web apps, videos are generally used on the marketing website as a kind of screencast to show off a product’s features; however, this isn’t the only way to use video. GoodBarry features a video screencast on its front page showing off the product. It also uses screencasts inside the app to teach people on how to get started. MailChimp includes tutorial videos right on the admin panel to help out new users. Some Web apps use video inside the application itself to teach users how to use certain features. Video is a fantastic way to quickly demonstrate how your product can be used, because it is easier to consume than a page of text, and it is also much clearer because the viewer can see exactly what to do. Related articles Please 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 Getting Creative With Transparency In Web Design

Discuss further techniques in comments! Please feel free to suggest further ideas, approaches and coding solutions in the comments to this post. The second part of our research will be published soon: stay tuned via RSS and Twitter . 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 Jean-Baptiste Jung 2008 was a very good year for the WordPress community. The software was updated numerous times, leading to the recent release of version 2.7, and many new blogs dedicated to WordPress were created. Of course, tons of new hacks were discovered, which helped lots of bloggers enhance their blogs. In this article, we’ll show you 10 new useful killer WordPress hacks to unleash the power of your favorite blogging engine. Each hack has an accompanying explanation, so you’ll not only unleash the power of WordPress but also understand how it works. 1. Display AdSense Ads to Search Engines Visitors Only

The problem. It’s a known fact that regular visitors don’t click on ads. Those who do click on ads are, 90% of the time, visitors coming from search engines. Another problem is Google’s “smart pricing.” Being smart priced means that your click-through rate (CTR) is low and the money you earn per click is divided by between 2 and 10. For example, if a click would normally earn you $1.00, with smart pricing it could earn you as little as $0.10. Painful, isn’t it? Happily, this solution displays your AdSense ads to search engine visitors only, which means more clicks and a higher CTR. The solution.

Open the functions.php file in your theme. Paste the following code in it: function scratch99_fromasearchengine(){ $ref = $_SERVER['HTTP_REFERER']; $SE = array('/search?', 'images.google.', 'web.info.com', 'search.', 'del.icio.us/search', 'soso.com', '/search/', '.yahoo.'); foreach ($SE as $source) { if (strpos($ref,$source)!==false) return true; } return false; }

Once done, paste the following code anywhere in your template where you want your AdSense ads to appear. They’ll be displayed only to visitors coming from search engine results: if (function_exists('scratch99_fromasearchengine')) { if (scratch99_fromasearchengine()) { INSERT YOUR CODE HERE } }

Code explanation. This hack starts with the creation of a function called scratch99_fromasearchengine(). This function contains a $SE array variable in which you can specify search engines. You can easily add new search engines by adding new elements to the array. The scratch99_fromasearchengine() then returns true if the visitor comes from one of the search engines containing the $SE array variable. Sources:

How to Display Ads Only to Search Visitors How to: Display AdSense to search engine visitors only

1. Avoid Duplicate Posts in Multiple Loops

The problem. Due to the recent popularity of “magazine” themes, there’s a high demand from WordPress users who use more than one loop on their blog home page for a solution to avoiding duplicate posts on the second loop. The solution. Here’s a simple solution to that problem, using the power of PHP arrays.

Let’s start by creating a simple PHP array, and put all post IDs from the first loop in it. <h2>Loop n°1</h2>

<?php $ids = array(); while (have_posts()) : the_post(); the_title(); ?> <br />

<?php $ids[]= $post->ID; endwhile; ?>

Now, the second loop: we use the PHP function in_array() to check if a post ID is contained in the $ids array. If the ID isn’t contained in the array, we can display the post because it wasn’t displayed in the first loop. <h2>Loop n°2</h2> <?php query_posts("showposts=50"); while (have_posts()) : the_post(); if (!in_array($post->ID, $ids)) { the_title();?> <br /> <?php } endwhile; ?>

Code explanation. When the first loop is being executed, all IDs of posts contained within it are put into an array variable. When the second loop executes, we check that the current post ID hasn’t already been displayed in the first loop by referring to the array. Source:

How to: Use two (or more) loops without duplicate posts

1. Replacing “Next” and “Previous” Page Links with Pagination

The problem. By default, WordPress has functions to display links to previous and next pages. This is better than nothing, but I don’t understand why the folks at WordPress don’t build a paginator by default. Sure, there are plug-ins to create pagination, but what about inserting it directly in your theme? The solution. To achieve this hack, we’ll use the WP-PageNavi plug-in and insert it directly in our theme.

The first thing to do, obviously, is download the plug-in. Unzip the plug-in archive on your hard drive, and upload the wp-pagenavi.php and wp-pagenavi.css files to your theme directory. Open the file that you want the pagination to be displayed in (e.g. index.php, categories.php, search.php, etc.), and find the following code:

<div class="navigation"> <div class="alignleft"><?php next_posts_link('Previous entries') ?></div> <div class="alignright"><?php previous_posts_link('Next entries') ?></div> </div> Replace this part with the code below: <?php include('wp-pagenavi.php'); if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

Now we have to hack the plug-in file. To do so, open the wp-pagenavi.php file and find the following line (line #61): function wp_pagenavi($before = '', $after = '') { global $wpdb, $wp_query; We have to call the pagenavi_init() function, so let’s do it this way: function wp_pagenavi($before = '', $after = '') { global $wpdb, $wp_query; pagenavi_init(); //Calling the pagenavi_init() function

We’re almost done. The last thing to do is to add the wp-pagenavi style sheet to your blog. To do so, open up header.php and add the following line: <link rel="stylesheet" href="<?php echo TEMPLATEPATH.'/pagenavi.css';?>" type="text/css" media="screen" />

Code explanation. This hack mostly consists of simply including the plug-in file directly in the theme file. We also had to add a call to the pagenavi_init() function to make sure the pagination would be properly displayed. Source:

How to: Integrate pagination in your WordPress theme

1. Automatically Get Images on Post Content

The problem. Using custom fields to display images associated with your post is definitely a great idea, but many WordPress users would like a solution for retrieving images embedded in the post’s content itself. The solution. As far as we know, there’s no plug-in to do that. Happily, the following loop will do the job: it searches for images in post content and displays them on the screen.

Paste the following code anywhere in your theme. <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>

<?php $szPostContent = $post->post_content; $szSearchPattern = '~<img [^\>]*\ />~';

// Run preg_match_all to grab all the images and save the results in $aPics preg_match_all( $szSearchPattern, $szPostContent, $aPics );

// Check to see if we have at least 1 image $iNumberOfPics = count($aPics[0]);

if ( $iNumberOfPics > 0 ) { // Now here you would do whatever you need to do with the images // For this example the images are just displayed for ( $i=0; $i < $iNumberOfPics ; $i++ ) { echo $aPics[0][$i]; }; };

endwhile; endif; ?>

Code explanation. The above code basically consists of a simple WordPress loop. The only difference is that we use PHP and regular expressions to search for images within the post’s content instead of simply displaying posts. If images are found, they’re displayed. Sources:

Manipulate images from WordPress post content with regular expressions How to: Retrieve images in post content

1. Create a “Send to Twitter” Button

The problem. Are you on Twitter? If so, we’re sure you know how good this service is for sharing what you find interesting online with your friends. So, why not give your readers a chance to directly send your posts’ URLs to Twitter and bring you some more visitors? The solution. This hack is very simple to achieve. The only thing you have to do is to create a link to Twitter with a status parameter. Because we’re using a WordPress blog, we’ll use the function the_permalink() to get the page URL: <a href="http://twitter.com/home?status=Currently reading <?php the_permalink(); ?>" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a> Pretty easy, isn’t it? But pretty useful too, in our opinion. Source:

How to: Create a “Send this to Twitter” button

Related plug-in:

Twitter tools

1. Using Normal Quotes Instead of Curly Quotes

The problem. If you’re a developer who often publishes code snippets on your website, you have probably encountered the following problem: a user tells you that the code you posted doesn’t work. Why? Simply because, by default, WordPress turns normal quotes into so-called “smart quotes,” which breaks code snippets. The solution. To get rid of theses curly quotes, proceed as follows:

Open the functions.php file in your theme. If that file doesn’t exist, create it. Paste the following code: <?php remove_filter('the_content', 'wptexturize'); ?>

Save the file, and say goodbye to broken code snippets!

Code explanation. The wptexturize() function automatically turns normal quotes into smart quotes. By using the remove_filter() function, we tell WordPress that we don’t want this function to be applied to a post’s content. Source:

How to get rid of curly quotes in your WordPress blog

1. Deny Comment Posting to No Referrer Requests The problem. Spam is a problem for every blogger. Sure, Akismet is there to help, but what about preventing spam just a bit more? The following code will look for the referrer (the URL from where the page was called) when the wp-comments-post.php file is accessed. If a referrer exists, and if it is your blog’s URL, the comment is allowed. Otherwise, the page will stop loading and the comment will not be posted. 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 check_referrer() { if (!isset($_SERVER['HTTP_REFERER']) || $_SERVER['HTTP_REFERER'] == “”) { wp_die( __('Please enable referrers in your browser, or, if you\'re a spammer, bugger off!') ); } }

add_action('check_comment_flood', 'check_referrer'); Source:

How to: Deny comment posting to no referrer requests

1. Using CSS Sliding Doors in WordPress Navigaton

The problem. The built-in wp_list_pages() and wp_list_categories() functions allow lots of things, but they do not allow you to embed a <span> element so that you can use the well-known CSS sliding-doors technique. Happily, with some help from PHP and regular expressions, we can use this awesome technique on a WordPress blog. Due to the number of tutorials on CSS sliding doors, we’re not going to explain how it works here; consider reading this excellent article if you need to know more about the technique. To view a live demo of this example, click here and refer to the main menu.

Create the images you need, and then edit the style.css file in your WordPress theme. Here is an example:

nav a, #nav a:visited {

display:block; }

nav a:hover, #nav a:active {

background:url(images/tab-right.jpg) no-repeat 100% 1px; float:left; }

nav a span {

float:left; display:block; }

nav a:hover span {

float:left; display:block; background: url(images/tab-left.jpg) no-repeat 0 1px; }

Now it is time to edit the header.php file. Simply copy and paste one of the following codes, according to your needs:To list your pages: <ul id="nav"> <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li> <?php echo preg_replace('@\<li([^>])>\<a([^>])>(.?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exlude=181&title_li=&depth=1')); ?> </ul> To list your categories: <ul id="nav"> <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li> <?php echo preg_replace('@\<li([^>])>\<a([^>])>(.?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo=0&orderby=name&exlude=181&title_li=&depth=1')); ?> </ul>

Code explanation. In this example, we make use of the echo=0 parameter in the wp_list_pages() and wp_list_categories() functions, which allows you to get the result of the function without directly printing it on the screen. Then, the result of the function is used by the PHP preg_replace() function and finally displayed with <span> tags added between the <li> and <a> tags. Source:

CSS Techniques: Using Sliding Doors with WordPress Navigation

1. Display a Random Header Image on Your WordPress Blog

The problem. This is not really a problem, but many WordPress users would love to be able to display a random header image to their readers. The solution.

Once you have selected some images to be your header images, name them 1.jpg, 2.jpg, 3.jpg and so on. You can use as many images as you want. Upload the images to your wp-content/themes/yourtheme/images directory. Open header.php and paste the following code in it: $num = rand(1,10); //Get a random number between 1 and 10, assuming 10 is the total number of header images you have &ltdiv id="header" style="background:transparent url(images/.jpg) no-repeat top left;">

You’re done! Each page or post of your blog will now display a random header image.

Code explanation. Nothing hard here. We simply initialized a $num variable using the PHP rand() function to get a random number between 1 and 10. Then, we concatenate the result of the $num variable to the path of the theme we are using. Source:

How to: Display a random header image

1. List Your Scheduled Posts

The problem. Like many bloggers, you probably want your readers to visit your blog more often or subscribe to your RSS feed. A good way to make them curious about your future posts is by listing the titles of your scheduled posts. The solution. Open any of your theme files and paste the following code: <?php $my_query = new WP_Query('post_status=future&order=DESC&showposts=5'); if ($my_query->have_posts()) { while ($my_query->have_posts()) : $my_query->the_post(); ?> <li><?php the_title(); ?></li> <?php endwhile; } ?> Code explanation. In this code, we have created a custom WordPress query using the WP_Query class to send a database query and fetch the five most recent scheduled posts. Once done, we use a simple WordPress loop to display the posts’ titles. Sources:

How to: List scheduled posts Den Leser in die Zukunft blicken lassen

About the author This guest post has been 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)

By Steven Snell The start of a new year is often a time of reflection on the past year, both personally and professionally, as well as a time to look forward to the year ahead. With that in mind, we thought it would be interesting to do a New Year’s group interview with a number of top designers and developers. We put together a big list of questions and posed two in particular to each of the participants. We think you’ll enjoy the insight this panel provides into 2008 and 2009. There’s a wide variety of topics covered, including favorite resources, trend predictions, business lessons learned, upcoming events for 2009 and more. Let’s take a look at a large group interview with top web designers that takes a look back on 2008 and presents some predictions for the year 2009. You may want to take a look at the other interview posts we’ve published earlier in our magazine:

35 Designers × 5 Questions35 designers. 5 questions. 5 precise answers. Result: 175 professional suggestions, tips and ideas from some of the best web-developers all around the world. 50 Designers × 6 QuestionsEven more insights from the best designers and web-developers across the globe.

Jonathan Snook

Do you have any upcoming projects planned for 2009 that you’re particularly looking forward to? I always look forward to conferences. It’s such a great way to hang out with talented, friendly people. SXSW is at the top of my list, even if I’m not speaking. With the folks from Sidebar Creative, we’ve got plans for more workshops, especially after the success of our first event, and we’re looking to roll out some new things next year. 2009 is shaping up to be a good year. Do you have any thoughts or predictions about design trends that may become more popular or significant in 2009? There’s been a maturation of design, with great usage of illustration and playing with the illusion of light. However, it’s been mostly decorative backgrounds and headers. There hasn’t been much push outside the generic two- or three-column layouts. Thankfully, we’ve seen a smattering of great art direction in 2008, and I look forward to seeing more of that in 2009. Jason Santa Maria’s, for example, is a site that I visit outside of my RSS reader every time because it’s unique. It captures my attention, and the content is well written and fantastically integrated. Simon Collison of Erskine Design

Are there any design trends or popular styles from 2008 that you like more than others? I’m not a big believer in “trends” in Web design as such. For me, in Web design the patterns are rarely widespread enough to be what we could call “trends.” For example, it is easy to see pockets of ideas and copyists and approaches gaining momentum, but look somewhere else and the tide is flowing in another direction. Sure, crap stuff like Web 2.0-esque shiny buttons and reflections, or the great drop-shadow plague, or something good like “Wicked Worn,” they were real trends. What did 2008 give us that equals those? There is one positive trend I like. More and more people are designing for the subject and audience, regardless of what is perceived as “trendy” — minimal, if minimal is required, or vibrant, if vibrant is required, etc. Now that is a trend I’d like to see spreading far and wide: relevance! I hated that world we lived in where, for example, regardless of audience, a Web app would always have the same visual bells and whistles. Crap. Oh, and as someone who always looks to try to take risks with a design, I’m pleased to see plenty of others still doing the same. More risk-taking in 2009, people! Have you followed the work of any particular designers during the past year? I pay attention to every single thing Mark Boulton puts out because he is consistently inventive, accurate and well-researched. His transparent redesign for Drupal has been a real eye-opener into his process, too. I have followed Garrett Dimon’s blog because he has publicly documented the design and build of Sifter. Everyone can learn plenty from Garrett. Obvious one, but Jason Santa Maria killed it in 2008, especially with the art direction approach to his blog redesign, a technique we use a lot at Erskine and hope to see more of next year. Jason is quietly brilliant, a humble genius. And (cheeky this) our own incredibly talented superstar Greg Wood. He teaches me new ideas every day and is more talented than he realizes. I advise others to study his code, his ideas, his art direction. Jason Santa Maria of Happy Cog Studios

What are some of your favorite or most frequently used fonts from 2008? Soho and Soho Gothic from Monotype are just gorgeous and versatile families. And even though it’s becoming too much of a go-to, I use Gotham often when in a pinch for a simple sans serif. What have been a few of your favorite sources of design inspiration, online or off, throughout the past year? I’ve really gotten into FFFFOUND! this year. I subscribe to their update feed and love seeing all the random photos and bits of design that come down the tubes. Beyond that, getting away from my computer and taking photos always serves as a good source of inspiration for me. Veerle Pieters

What have been some of your favorite sources of design inspiration, online or off, during the past year? When I look online, I mostly browse Flickr or FFFFOUND! or del.icious. One of the best offline inspirations is a book called Geometric, by Kapitza, which I recently bought. It really is a beautiful source of inspiration if you are looking for geometric patterns. Do you have any design competitions planned for 2009 (like the “What is Graphic Design?” competition from 2008)? Yes, I am planning on doing another one but haven’t decided on a date yet because it takes much planning up front. This one will be the only one that I will be doing because I believe in quality over quantity. Darren Hoyt of Category 4

Are there any design-related products, software or accessories on your wish list for 2009? I’m looking forward to the release of ExpressionEngine 2.0. According to the previews, the way it handles themes should make production easier for us front-end designers. There’s also a pretty major control panel overhaul, which should make it an easier sell to novice clients. I’m also excited about the official release of FontCase. Over the years, I’ve used some pretty hacky methods of organizing and labeling key fonts, but FontCase beta has solved a lot of those problems already. What have been your favorite sources of design inspiration, online or off, during the past year? Mainly books. The first was Michael Beirut’s 79 Short Essays on Design, which looks at design in the broadest sense, rather than getting specific about techniques or trends. I liked the big-picture perspective on how design impacts our lives in ways we don’t realize. The writing itself is really entertaining. The second is Book One, by Chip Kidd, a huge anthology of his famous book covers. He has a way of marrying strange imagery and playing with your expectations, something commercial Web design doesn’t always allow for. Studying his work is great when you’re stumped for ideas. David Airey

Can you tell us something that you’d like to improve on as a designer in 2009? I want to be more humble and to concentrate on my own faults rather than judging others. When you’re overly concerned about your view of colleagues and acquaintances, you lose focus and productivity. I’m far from perfect, so it’s important to look closer to home. Are there any designers in particular who you’ve enjoyed following in 2008? Eric Karjaluoto, through his blog, ideasonideas. Eric doesn’t publish blog articles very often, but when he does, they’re a sincere, insightful, personal look at the bigger picture, and I believe he’s a great asset to the design community. Jacob Gube of Six Revisions

What frameworks were your favorite to use in your development during 2008? My favorite JavaScript framework is MooTools with jQuery being a close second. The choice depends on who I’m working for, who I’m working with and what the requirements are. Server-side, I’m a PHP guy and Zend is my favorite, but I want to mention that you can’t go wrong picking other top PHP frameworks out there, such as CakePHP and CodeIgniter. For CSS frameworks, I believe in rolling your own framework if you really need to, because I find that the overhead in size and the usual cost of lower semantics in using CSS frameworks don’t justify the benefit, seeing as CSS (with the CSS2 specs at least) is a very simple markup language that really isn’t as verbose or complicated as client- or server-side scripting. Do you have a favorite design- or development-related book from 2008? This year, I read a lot of development books mostly to get familiar with emerging technologies like Flex 3 and AIR, as well as to upgrade my outdated ActionScript 2 knowledge to ActionScript 3. Learning Flex 3 is a superb primer. For design, there is a lot of great content from independent bloggers (such as on the Usability Post blog) who produce great design- and UX-related articles, and unfortunately I didn’t find any ground-breaking books to read like Designing Web Usability (from 1999) and Don’t Make Me Think (from 2005). One book that I’d rank close to the caliber of the two previous books I mentioned is Web Form Design, by Luke Wroblewski, from Rosenfeld Media. Rosenfeld Media has some nice UX books in store for us next year, and I’m excited to get my hands on those. Additionally, I still think that for beginning developers who are getting into more intermediate-level, standards-based Web design, I would suggest CSS Mastery by Andy Budd and Designing with Web Standards by Jeffrey Zeldman. Nick La of N. Design Studio, Web Designer Wall and Best Web Gallery

Do you have any favorite designers whose work you enjoyed following in 2008? I particularly like the tnvacation.com series of websites (fall, spring, summer, and winter) designed by designsensory.com. What has been your favorite design trend or style from 2008? My favorite design style is the collage and scrapbooking effect (see 2008 Design Trends at Web Designer Wall). Chris Coyier of CSS-Tricks

What is your favorite CSS technique that you learned in 2008? My favorite CSS technique from this past year isn’t a CSS technique alone, but rather learning how to control CSS through JavaScript, specifically jQuery. I already know CSS quite well, and since jQuery uses the same selectors as CSS, learning it wasn’t very difficult. Now I am able to integrate behaviors in websites in ways that were out of my grasp before. I can think “When I click this element, I want this other element’s CSS to change so that it is twice as big,” and I can make that happen quickly and easily. The power of that is incredible to me still. Who are some of your favorite designers to follow on Twitter? I love being able to follow all these incredible designers whose work I greatly admire: @jasonsantamaria, @mezzoblue, @collis, @vpieters, @snookca, @chrisspooner, @jessebc, @elliotjaystocks. But even more, I like following my actual friends and people I enjoy conversing with. I am an equal opportunity follower. If you Tweet interesting things, I want to follow you! Chris Spooner

Can you tell us a business lesson you learned from starting full-time freelancing in 2008? One of the things that has surprised me the most is the obscure range of situations that project leads are generated from. When I look back at how my clients found me, I’m presented with a huge range of sources, which include the usual search engine phrases of “graphic designer + location,” but also some more generic and unusual terms that often bring up a related tutorial or article from my blog. Other sources of inquiry have been through seeing an example of my work on Web design galleries, discovering me through an online interview on another design blog and sometimes the subscribers of my blog themselves. The lesson here is to consider every possibility of exposure and make the most of it. You never know what might come as a result of it. Is there a particular product, software or accessory that is on your wish list for 2009? I’d quite like to join the Apple fan club and swap all my computing kit for Mac products. An iMac, Macbook Pro and iPhone would look pretty nice sitting on my office desk! Unfortunately, I went and bought my Windows-specific Adobe software not so long ago, based on the idea that I already had a powerful computer setup. While Windows does the job without too many problems, I remember the overall niceness of OS X when I used to use an iMac at a previous job. My girlfriend and I are looking to move home in the near future, so I think that would be the perfect opportunity to kit out a brand new office area with a shiny new kit, along with Adobe’s new CS4. I better get saving. Alen Grakalic of CSS Globe and Templatica

What were a few of your favorite website designs from 2008? There were many beautifully sites this year. Not actually sure if all were designed this year, but that’s when I first saw them. To name a few: 13 Creative

Ali Felski

Viget Labs

Clearspace

Carrot Creative

Alexandru Cohaniuc

I loved this site Tomas Pojeta.

Another one of the sites I was absolutely amazed by was actually a Flash site: Level 2 Design.

Can you tell us something you learned during the past year that has helped you in running your business? The one thing 2008 taught me was actually something I already knew but somehow keep forgetting: if you are a freelancer, never rely on a single source of income. No matter how cool the deal sounds, don’t work exclusively for anyone. Randa Clay

What were some of your favorite design trends or styles from the past year? I love the vintage and retro look. The illustration style and color schemes are really appealing to me. Do you have any new year’s resolutions for your business in 2009? I’m not a big one on new year’s resolutions, but my continuing overriding goals are always to exceed client expectations, and to be one of the top developers of custom WordPress themes. Jon Phillips of Spyre Studios, and founder of Freelance Folder

What are a few of your favorite tools or resources for freelancers that you used in 2008? I used different tools in 2008 (and in previous years), but If I had to choose, I’d pick three: WordPress, because of its simplicity, ease of use, flexibility and great support from the community; Freshbooks Invoicing because they make it so damn easy to keep track of everything, and I also find the iPod Touch app to be very useful; and last but not least, I’d pick Adobe FireWorks, simply because most of what I do doesn’t always require that I open Photoshop. Of course, I used many more tools, but those are the ones I used almost every single day in 2008. What has been your favorite music to listen to while designing during the past year? Being a musician myself, I could say I’ve been listening to my band (and I have), but usually when I work on clients’ projects and designs I’ll listen to artists like Fiona Apple, John Mayer, Radiohead, Muse, Guthrie Govan, Tori Amos, and when I need something a bit “stronger,” I’ll listen to Slipknot, Tool, 36 Crazy Fists, Avenged Sevenfold, Meshuggah, Soilwork, etc. It really depends on my mood and what I’m currently working on. Let’s just say I like the sound of an acoustic guitar as much as distortion. :) Jacob Cass of Just Creative Design

What was your favorite design course that you took in 2008? I took eight design-related courses in 2008 while studying Visual Communication at Newcastle University, Australia. These were: Visual Communication Technology II, Animation and Multimedia, Advertising for Design, Graphic Design, Media Production, Visual Communication Imaging, Typography and New Media. My favorite and most hated course would have to be Typography. It was the most challenging and eye-opening course I have done on design, and since taking it I have realized that so much of design and communication is purely based on typography. I actually wish to do another course in advanced typography, however my uni does not offer it (yet). What aspects of your work would you like to improve on in 2009? Glad you asked me this. It may lead to some new year’s resolutions. I would like to learn more about complex illustration in Illustrator, and I also want to learn some new techniques in Photoshop. I am also trying to improve my typography and further my skills in logo design. But in saying all this, this does not mean I will not try to improve on any other aspect of design. As a designer, you have to continually improve and learn new things to keep up to date in the industry. Brain Gardner of Revolution Two

Can you tell us something that you learned that helped you improve your business in 2008? The one thing I learned this year is how powerful a community can be. In October, I decided to take Revolution and open-source it, and I was amazed at how many supportive users there were. More importantly, users have generously given their time on the support forum to help others. Building a product that people believe in can go a long way. Are there any products, software apps or accessories on your wish list for 2009? Truthfully, the only thing I want is a 3G iPhone, as my current one runs just fine, so need to go out and buy another one! Elliot Jay Stocks

Can you share with us a business lesson you learned from going out on your own in 2008? Great question! There are two main things: the first is that I massively underestimated the time it would take to do admin stuff when I first started out. I don’t have too much paperwork to do, but things like reshuffling the calendar to fit in projects, liaising with clients, keeping track of expenses, etc., all that stuff takes a lot of time, and I was totally unprepared for it to begin with. The second thing is that you should only take on projects you care deeply about and that are going to keep you interested. I did a couple of projects in 2008 that I really didn’t enjoy by the time they came to a close, because I’d lost interest in them. And that only happened because, deep down, I was never really interested in them in the first place. Turning away work like that because of a personal point of view can be a financial risk, but it’s something I’ve started to do, because the only way I’m ever going to produce decent work is to have a passion for the projects I’m involved with. Do you have any upcoming projects for 2009 that you’re especially looking forward to? I have quite a few, actually! :) In January I’m going to take a break from client work and pick up recording of my new album (which I meant to do in December, before deadlines got shifted). So that’ll be great fun to do, and I’m really excited about releasing it. It’ll also be nice to have a complete break from designing and writing for a while so that I can come back refreshed. The second thing is the next version of my personal website. I’ve been working on the redesign on and off for a few months now, but it hasn’t really gone anywhere. I’m hoping that I can dedicate a couple of weeks of solid work in early 2009 to get that nailed. I’m also really looking forward to a huge number of speaking events and the traveling that goes with them. I’ve got lots lined up for next year, including a few I’ve yet to announce. In January, I’m going to announce a very big one that I’m doing later in the year! :) Jay Hilgert of Bittbox

What are a few of your favorite or most frequently used fonts of 2008? Stainless, Dispatch, Myndraine, Kontrapunkt, Dirty Ames, Turbo Ripped, Immoral, Myriad Pro. Are there any new graphic design techniques that you learned or developed in 2008 that stand out to you as being especially useful? I’ve by no means mastered it yet, but I enjoyed learning about the gradient mesh tool technique in Illustrator. It immediately struck me as being useful in many ways, like for creating photo-realistic icons in 100% vector format, for example. Fabio Sasso of Abduzeedo

What have been some of your favorite products, software and accessories you have used in your work in the past year? My new MacBook Pro and my iPhone 3G are definitely my favorite products. But in terms of software, I think the new Pixelmator was a great surprise. What are your favorite design trends or styles from 2008? For me, one of the coolest design trends in 2008 was mixing modern lighting effects with an ’80s style. Noura Yehia of Noupe and DevSnippets

What were some of your favorite design-related online resources that you came across in 2008? I read and skim a lot of design and graphics blogs, but there’s only one blog I read on an almost daily basis and that’s Smashing Magazine, which I do because I think every single post is a piece of work. Besides that, I also often check in to Web Designer Wall, NETTUTS, Six Revisions and DesignM.ag. What has been your favorite online design community during 2008? There are so many great design communities out there to keep any designer in a creative mood to work. I would definitely start with DeviantArt, having such a huge collection of well-crafted artwork all in one place. I also quite like checking Behance Network, Computerlove, Design Float and the Popular Bookmarks on Delicious, which send me to more places Steve Smith of Ordered List

What have been some of your favorite sources of design inspiration, online or off, throughout the past year? Online, I find a lot of my design inspiration these days from screenshots posted to Flickr by my friends. Patrick Haney posted a set on Design Inspiration that’s a great look-through if you need a couple ideas for layout or colors. Offline, I’m drawing a lot of inspiration from architecture. Architects have to think in multiple dimensions, something we Web designers don’t have to worry about. But I think the metaphor is valid, in that we need to think not just of the design aesthetics, but of the dimensions of usability, and accessibility as well. The website needs to look good from every angle. Are there any current design trends that you would like to go away in 2009? I’d have to say that one of the things I think is becoming a little cliché is the hand-written note, or the post-it note, or the paper-clipped scrap-paper effect. Don’t get me wrong, I’m sure this effect has its place. I think it just happens a lot more than it needs to these days. That said, a website should meet the needs of the project, not be designed to current fads in a vacuum. Related articles You may want to take a look at the other interview posts we’ve published earlier in our magazine:

35 Designers × 5 Questions35 designers. 5 questions. 5 precise answers. Result: 175 professional suggestions, tips and ideas from some of the best web-developers all around the world. 50 Designers × 6 QuestionsEven more insights from the best designers and web-developers across the globe.

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 Over the past 10 years, the MySQL database has become incredibly popular on the Web. Every WordPress blog is driven by a MySQL database, which contains the blog’s posts, settings, comments and much more. While plug-ins and even coding hacks can solve some problems and achieve some tasks, sometimes you don’t have any other choice than to execute SQL commands in phpMyAdmin or directly to the database via SSH. Let’s take a look at 8 useful SQL hacks for WordPress. Each section of this post presents a problem, suggests a solution and provides an explanation to help you understand the solution. 1. Creating a Backup of Your Database

The problem. While the tips in the rest of this post have been tested, you should definitely not try any of them without first having a proper backup of your MySQL database. The solution. To create a manual backup of your WordPress database, follow these simple steps:

Log in to phpMyAdmin and select your WordPress database. Once done, click the “Export” button located in the horizontal menu. Choose a compression method (personally, I use gzip), and click the “Execute” button. Your browser will ask you if you want to download the backup. Of course, select “Yes,” and then store it on your hard drive.

Explanation. Note that creating a backup of your WordPress database can be more easily executed with the WP-DB-Backup plug-in. WordPress users should install this plug-in if they have not yet done so and create regular backups of their data. 2. Batch Delete Post Revisions

The problem. Post revisions, a new WordPress 2.6 feature, can be very useful, but they also increase the size of your MySQL database. Sure, you can manually delete posts revisions, but that’s very long and boring work. The solution. The solution to this problem is simple: we batch delete post revisions by using a simple SQL query. The result can be almost unbelievable if you have a lot of posts: Your database size will be reduced by half!

Log in to phpMyAdmin and select your WordPress database. Click the “SQL” button. Paste the following code in the SQL command window: DELETE FROM wp_posts WHERE post_type = "revision";

You’re done. Depending on how many posts you had in your WordPress database, you may have saved lots of precious space!

Code explanation. The wp_posts table has a field named post_type. This field can have one of many values, such as “post,” “page” or “revision.” When we want to get rid of post revisions, we simply run a command to delete any entry in the wp_posts table in which the post_type field is equal to “revision.” Source:

How to: Batch delete post revisions

1. Erase 5000 Spam Comments in a Second

The problem. True story: a friend of mine recently created his own blog and started to promote it everywhere on the Internet. After some weeks of intensive work, he spent some days on vacation without Internet access. When he came back home, he looked at his blog and saw… 5000+ comments awaiting moderation! Of course, most of them were spam, but he was actually about to check them all to make sure he did not delete a valid comment made by one of his regular readers. The solution. Happily, my friend told me about his spam problem. He had already spent 45 minute manually deleting spam when I showed him this useful SQL tip.

Log in to phpMyAdmin and select your WordPress database. Click the “SQL” button. Paste the following code in the SQL command window: DELETE from wp_comments WHERE comment_approved = '0';

Goodbye bad comments! Enjoy your spam-free database!

Explanation. The wp_comments table contains a field named comment_approved, which is a boolean value (1 or 0). Approved comments have a value of 1, and comments awaiting moderation have a value of 0. By running the above command, we simply delete any comments that haven’t been approved yet. Be careful. While this solution can be pretty useful if you have millions of spam comments to delete, it will also erase valid unapproved comments. If you don’t already use Akismet, install it now to prevent spamming. Source:

Mark asked: How to batch delete spam comments on a WordPress blog?

1. Change the Post Attribution

The problem. When you installed WordPress, an “admin” account was created. Some bloggers make the mistake of using that account to write their posts, until they realize that it’s not personal at all. The solution. Modifying author attribution on each post takes a lot of time. Happily, SQL can help you get things done:

Log in to your phpMyAdmin and select your WordPress database. First, we have to get the right user IDs. To do so, open the SQL command window and execute the following command: SELECT ID, display_name FROM wp_users;

phpMyAdmin will display a list of user IDs associated with WordPress users. Let’s say that NEW_AUTHOR_ID is the ID of the more recently created author, and OLD_AUTHOR_ID is the original admin account ID. After you swap the NEW_AUTHOR_ID and OLD_AUTHOR_ID IDs, run the following command: UPDATE wp_posts SET post_author=NEW_AUTHOR_ID WHERE post_author=OLD_AUTHOR_ID;

That’s all. All posts previously attributed to admin are now attributed to whichever valid user you have selected.

Source:

How to: Change author attribution on all posts at once

1. Manually Reset Your Password

The problem. In order to protect their blogs, people often pick strong passwords, such as u7*KoF5i8_. Of course, this is a good thing, but I have heard many stories of forgotten admin passwords. The solution. When you lose your password, WordPress can email you a link to reset it. But if you don’t have access to the email address recorded in the WordPress database anymore, or if you prefer just running a simple command instead, here is the hack.

Log in to your phpMyAdmin, select your WordPress database and open the SQL window. Insert the following command (assuming your username is “admin”): UPDATE wp_users SET user_pass = MD5('PASSWORD') WHERE wp_users.user_login =admin LIMIT 1;

You’re done. Your password has been successfully replaced by whatever you inserted in space above marked “PASSWORD.”

Explanation. User passwords are stored in the wp_users table. Of course, an MD5 hash is used to secure the password. We have to set up an “UPDATE” SQL request and use the built-in MD5() MySQL function to convert our password to MD5 and then update it. The “WHERE” clause ensures that we’re updating only the admin’s password. The same request without the “WHERE” clause would result in all passwords being updated! Source:

WordPress: How to reset a password manually

1. Change Your WordPress Domain Name

The problem. Although it is not recommended, you may want at some point to change your domain name while keeping your blog and its data. Because WordPress records your domain name in the database, you have to change the database in order to connect your new domain name to your WordPress blog. The solution.

You guessed it: the first thing to do is log in to your phpMyAdmin and select your WordPress database. Click the “SQL” button to open the SQL command window. In order to change your WordPress URL, execute this first command: UPDATE wp_options SET option_value = replace(option_value, 'http://www.oldsite.com', 'http://www.newsite.com') WHERE option_name = 'home' OR option_name = 'siteurl';

Then, we have to replace the relative URL (guid) of each post. The following command will do that job: UPDATE wp_posts SET guid = replace(guid, 'http://www.oldsite.com','http://www.newsite.com');

We’re almost done. The last thing to do is a search and replace in the wp_posts table to make sure that no absolute URL is still here: UPDATE wp_posts SET post_content = replace(post_content, 'http://www.oldsite.com', 'http://www.newsite.com');

You’re done. You should be able to log in to your WordPress dashboard using your new URL.

Explanation. To easily change our WordPress domain name, I took advantage of the super-useful MySQL function “replace,” which allows you to replace one term by another. Source:

Changer le nom de domaine d’un blog Wordpress sans encombres

1. Display the Number of SQL Queries on Your blog

The problem. When trying to optimize your blog’s loading time, knowing the number of queries made to the database is important. In order to reduce queries, the first thing to know is how many queries are made on a single page. The solution.

This time, no need to log in to phpMyAdmin. Simply open the footer.php file in your theme and append the following lines of code: <?php if (is_user_logged_in()) { ?> <?php echo get_num_queries(); ?> queries in <?php timer_stop(1); ?> seconds. <?php } ?>

Save the file and visit your blog. In the footer, you’ll see the number of queries made to the WordPress database as well as the time it took to make them.

Explanation. Seems that many WordPress users aren’t aware of this useful function. The get_num_queries() function returns the number of executed queries during a page load. Note that the above code will only display the number of queries to logged-in users, because regular visitors and search engine bots don’t need to know about it. But, if you’d like to make it public, simply remove the if (is_user_logged_in()) conditional instruction. Source:

How to: Display page loading time + number of queries

1. Restore Your WordPress Database

The problem. Let’s say, for some reason, such as a hacking or upgrade problem, you have lost your blog data or it has become corrupted. If you have a backup (and I hope you do!) you will have to import it to your WordPress database. The solution.

Log in to phpMyAdmin and select your WordPress database. Click the “Import” button in the horizontal menu. Click the “Browse” button and select the most recent database backup on your hard disk. Click the “Execute” button. If everything went well, your WordPress database is fully functional again.

About the author Jean-Baptiste Jung, a 26-year-old blogger from Belgium, 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)

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)

Often it is the close attention to small details that makes a design outstanding. During the development of a website, designers tend to quickly forget about small details and focus on major design elements, such as navigation, typography and layout. If done properly, the result is usually a solid, impressive and highly professional design that communicates information. However, it is not memorable. The reason is that such designs often do not have a memorable voice: they may look visually appealing, but they don’t provide a vivid anchor for users to remember a website after leaving it. In this way, little details are important because they can help the design stand out. Have you ever thought about the design of your shopping cart? What about the design of tags, date stamps, “Previous” and “Next” links? All of these small details are not crucial for website navigation, but they add up to a more user-friendly, more convenient and sometimes also more sophisticated design. And this is why we have focused the attention of our readers on such things as image captions, block quotes, date stamps, shopping carts, pagination, <hr> lines, tag clouds and favicons.

In this post, we showcase the design of “Back to top” links, a forgotten and rarely used link that helps users jump to the top of a given page. A visitor can achieve this effect by pressing the “Home” button on his or her keyboard; however, not every user is aware of that shortcut, and most probably use the vertical scroll bar in the browser for that purpose. As designers, we can help our users out by adding a stand-alone “top” link to our designs. When “Back to Top” Links are Useful Unfortunately, this friendly service — letting users jump to the top of the page — is offered very rarely. Most designers don’t include it, which is why it took us over 5 weeks to collect at least a few dozen nice examples for this post. In fact, “Back to top” links are not always useful. For example, they may be unnecessary for websites that have rather short pages or articles. In such cases, there is no need for users to jump to the head of the page, because the whole page is completely visible anyway; if a “top” link is included on such pages, clicking on it will produce no effect, which is rather irritating. This is another reason why many designers don’t use it: the variety of currently available screen resolutions makes the “top” link unusable and unnecessary. That’s why using “Back to top” links for rather short pages is not a good idea. However, websites with long pages can offer visitors a nifty feature that saves time and avoids the need for vertical scrolling with the mouse. Where Should the “Top” Link be Placed? The most obvious and common place for a “Back to top” link is the footer. This is where it belongs and should be placed. We weren’t able to identify a common design scheme for the alignment of the “Back to top” link. Some designers place it on the left side of the footer, others place it in the middle and yet others put it on the right side of the footer. It is also very common to place the “top” link on the left-hand side of the content area, directly under the article.

Meet the friendly “top” link: it is often placed in the footer of the page and almost always appears very modest and almost bashful. “Back to top” links are also often used in FAQs, help sections and site maps, where they help divide chapters or paragraphs and provide users with a quick way to jump to the beginning of the page, where the main navigation is placed. How to Create a “Top” Link? To point the link to the top of the page, in most cases it is enough to define an empty anchor and put it right after the <body> tag:

<div id="footer"> <!-- footer goes here -->

<a href="#">top</a>

</div>

However, older browsers and, in particular, legacy browsers have problems interpreting this markup. An alternate solution is to use a real anchor that is explicitly defined and placed right after the <body> tag:

<body> <a name="top"></a>

<!-- content goes here -->

<a href="#top">top</a>

</body>

Of course, the link itself doesn’t have to be text; it can also be an image, a button or any other element of your choice (using images may have some usability issues — see below). Wording Never mind what phrase you actually use: you just need to make sure that visitors understand the function of the link and aren’t irritated by it. For instance, it’s probably not a good idea to use the word “Return” because it is not immediately clear if the user will be taken to the home page, the previous page in the browser’s history or the top of the page.

Use clear and concise terms, such as “Go to top,” “Back to top,” “Return to top” or “Jump to top.” Sometimes a harmless “Up” is used. However, we’re not sure if that’s actually a good idea. Probably not. Problems and Disadvantages Some usability experts and even the Yoda of usability, Jakob Nielsen, reject the “top” link unanimously. According to them, in-page links should be avoided at all because the scroll bar suffices completely, and additional options can be irritating and unnecessary. However, they agree that “Back to top” links may be useful if pages are extremely long, which should be avoided anyway. One major problem with “top” links is that they have an impact on the browser’s navigation buttons and as such pollute the browsing history. Because “top” links are anchors just like any other links, clicking on the browser’s “Back” button will take users to the foot of the page they are currently viewing, not to the previous page. On top of that, accessibility experts claim that “Back to top” links may disrupt the use of speech-based user agents, that the “top” concept is vague and that “Back to top” links are not used consistently across websites. “Back to Top” Link vs. “Home” Link In our search for interesting “Back to top” examples, we stumbled across some solutions in which designers used images to allow users to jump to the top of the page. However, it is worth mentioning that images should make it clear to users that the link leads not to the home page of the website but to the top of the page. “Home links” are not “Back to top” links, and “Back to top” links are not “Home links,” If you decide to use such links in your design, make sure that visitors can understand the difference immediately.

Mistake: “Home” instead of “top”

Home, sweet home…

Back to the home page in Spanish

Another “home” example in the footer.

The icon on the right-hand side is not clickable: it could be used to lead to the home page, but not the top of the page.

Same here: the illustration is not clickable.

And here, too. “Back to Top” Links Showcase Here are some more examples of “Back to top” links. It took a while to collect them. Hopefully, they’ll serve as a good source of inspiration for some of our readers.

An animated “Back to top” link

A link as part of the navigation. Looks good but may be a little irritating at first glance.

The “top” icon here follows the scroll bar vertically.

We don’t know why the remote control is placed there: it is not clickable, but it could be.

Sources and Resources

Usability Advice: “Back to Top” Links Replicating Browser Behavior: The Top Link Nielsen: Within-Page Links for AJAX, “Return to Top”, Skip Links

(al)

by Dmitry Fadeyev Your website represents your brand. New visitors will form a first impression of your service or product within seconds of arriving at your website, and the visuals, layout and aesthetic will play a large role in shaping that impression. Sure, your website may be very usable and have great content, but it’s the aesthetic that will evoke feeling, and it’s the aesthetic that will be used to judge the quality of your website in those first few seconds before the visitor has had time to browse around. Use this to your advantage and fashion a unique style that will set your website apart from the rest — a style that will impress and delight your users. Throughout history, great artists always found new ways to express themselves and create new techniques to set their work apart from the rest. Think about the styles of Leonardo da Vinci, Vincent van Gogh, Pablo Picasso, Salvador Dali and Jackson Pollock. Think about the different movements of art, from Impressionism and Expressionism to Surrealism and Minimalism. These styles couldn’t be more different from each other — and that’s the point. The artists’ names live on because their art is unique.

Do you want to simply follow the latest design trends and create a website that works well but looks just like many other websites out there? Following trends won’t set you apart from the rest; it won’t help your work make a strong impression. To make something memorable, you’ll need an element of creativity and novelty. Unlike certain other forms of art, such as painting and sculpture, Web design is very limited in its expression because more often than not your website has to serve a very specific function and achieve certain goals. Successful designs are influenced and driven by those goals. There is, however, still room to develop your own unique style and aesthetic. Doing so will help you stand out from the competition and allow you to develop a strong identity. Web design isn’t art Having said all that, Web design isn’t art. Art is self-expression that is meant to be enjoyed and appreciated on its own. Design is communication; and, more specifically, Web design is an interface for content. Sure, there are websites out there that are purely art, but the large majority of them perform a certain function or deliver information. The website acts as the interface between the user and that function or information. This means it not only has to look nice, it actually has to do its job well, too. Indeed, in most cases, function should come before form. I believe I can say that websites today are much better than they were 10 years ago. What do I mean by “better”? I mean to say that Web designers have learned from their mistakes over the years and have picked all the low-hanging fruit of usability. Websites today are more usable and more user-friendly because we have greater experience in and increased knowledge of how to build websites that work and interfaces that are easy to figure out. Yet, I cannot say that art today is “better” than it was ten or a hundred or a thousand years ago. Impressionism isn’t “better” than Realism. Expressionism isn’t “better” than Minimalism. They’re just different. Web design as architecture While Web design incorporates an aspect of art, it also incorporates function. In this way, I think it actually has a lot of similarities to architecture, for which you need a healthy dose of both style and function.

The world’s earliest treatise on architecture, “De architectura,” written by Vitruvius in around 25 BC, outlined three principles that all good construction should fulfill: firmitatis, utilittis and venustatis: durability, utility and beauty. I believe that today these three principles apply to Web design as well. Your work should be durable in that it should scale well — or handle a lot of traffic — which is ensured by having code that is clean and optimized, as well as a means of making future modifications and updates with ease. It should fulfill the goals and function of the website, whether they be to advertise a product, sell goods, show off a portfolio or perhaps display articles from a blog. Finally, it should look good; it should have its own look and feel. We need to make the Web browsing experience enjoyable for our visitors by crafting a pleasing aesthetic. Over centuries, architects and engineers have figured out better ways to construct buildings, to make them stronger and larger. These advances in function are similar to advances we’ve seen in Web design. We’ve figured out better ways to make registration forms, navigation menus that are easier to use, layouts that are simpler to figure out; generally speaking, we have greatly improved the usability of our websites. This is because we’ve had years to look at how people use the Web and to fix the usability problems that pop up most of the time. We see what works best and implement those things in new websites that we build. Venustatis But let’s not forget Vitruvius’ third principle of beauty. In architecture we see different waves of style. Different centuries bring different looks and feels to buildings. Houses are designed to be lived in, but life would be really dull if they all looked the same and focused only on function.

The design of the Opera House in Sydney is so distinct that it’s more than just a building — it’s an iconic city landmark. In Web design we have very similar waves. Most notable is the Web 2.0 style, in which we had things like glossy buttons, mirrored floors, starbursts and so on; it even inspired various Web 2.0-style logo and website generators, because the style was so formulaic in nature. New trends like this appear, and some get picked up and quickly adapted across the Web. Does your current website design follow a trend? Perhaps it is setting one? If you copy other trends, then your website will be just that, a copy, but if you can go the extra mile and create a unique look that differentiates your website, then your website will be memorable. Of course, being different isn’t the only thing you’ll need. The unique style and layout must also be attractive and must accomplish its goals. Fresh inspiration So how do you go about creating something different? Where do you find inspiration to create something unique? When Cordell Ratzlaff and his team were designing the new interface for the Mac OS X operating system, they found their ideas in the most unusual places. Cordell saw a great opportunity to change to an appearance that was fresh and fun, in contrast to the existing state of the art. He decided to change from gloomy, square, and bevelled, to light, fun, and colorful, with a very fluid expression. He asked, What’s the opposite of a computer interface? He came up with things like candy, liquor, and liquids, to inspire a new visual design of the interface. The designers collected magazine ads for liquor, with delicious looking liquids in glasses with ice cubes, sparkling with reflections and highlights. Bill Moggridge, Designing Interactions When working on your new website or Web application interface, don’t simply look at what everybody else is doing. If you look inward to your own industry and similar websites, you will no doubt find a lot of likeness. This is because many of these websites borrow from each other, and when new websites launch, they borrow from them in turn. What we have is a monotonous experience in which you are only looking inward, blind to the world of possibilities outside.

Take a lesson from Cordell Ratzlaff and seek inspiration from new sources. Look at nature, look at real world objects, look at the things that symbolize and evoke the kinds of emotions and feelings you really want to elicit with your design and aesthetic. Cordell looked at things like ice cubes in liquor, which inspired him to create the liquid Aqua interface for Mac OS X. The glossy gel buttons and other user interface elements in Aqua have since inspired many Web designers in the rise of Web 2.0 and all of the glossy and shiny visuals it brought. Let’s take a look at a few trendsetters, websites that break the mold and feature successful designs that get picked up and adapted by others. Leaders and Followers

Twitter, the popular micro-blogging platform, has created a unique flat and colorful look that features illustrations of clouds and birds (and whales). The bright, cartoony feel is accompanied by an elegant and simple layout.

Yammer, a recently launched “Twitter for businesses” application, takes on a similar appearance and an almost identical layout. The cartoony feel is gone, but the shape and feel remain very similar, due to the iconic Twitter layout.

Facebook, the social networking heavyweight, has won its audience partly because of the uncluttered, minimalist design that puts the content right in the front seat. The clean layout is accompanied by a simple blue and gray color palette.

Social Median, a social news website, features the familiar minimalist look and feel of Facebook, together with a similar color palette and layout.

Highrise, a CRM application, features a very powerful landing page. On one page, visitors can see a description of the app, an overview of several features, a video tour as well as a bunch of links inviting them to explore. The typography and colors work to focus the visitor’s attention on the most important things.

Presently, another internal communication tool for businesses, features a landing page that is very close in its composition to that of Highrise, or indeed that of any other 37signals app. This powerful layout is now used by a lot of Web start-ups.

Apple’s website incorporates the same aesthetic as that of its product interfaces, and indeed its entire product line. Over the last few years, it has transitioned from the watery Aqua style to smooth aluminum gradients, light-gray shades and rounded corners.

Newspond, a news aggregator, features a different layout than that of Apple’s own website, but the aesthetic is strikingly similar. There are many other websites today that use very similar styles that are inspired by Apple’s industrial designs and interfaces.

Basecamp, one of the most popular Web project management applications, from 37signals, has pioneered this simple and effective layout that you can find in a lot of other Web apps today. Everything is clear and structured, with a minimal use of images to speed up downloading time.

Blinksale, an invoicing Web application, is one among many to borrow the popular design and structure of the 37signals website.

SimpleBits, Dan Cederholm’s design company, uses his signature minimalist layout and typography. Dan takes out everything that doesn’t absolutely need to be there, tweaks white space to pixel perfection and focuses on really polishing the little details. The result is beautiful minimalism.

The Twiek blog design looks like it’s heavily inspired by SimpleBits. Conclusion If you want to craft an iconic website that stands out from the competition, you need to come up with a unique and novel aesthetic. You need to design a look and feel that’s different — something that doesn’t look like all of the other websites in your industry. Getting inspired by great work and beautiful things is a good thing, but you have to make sure you don’t fall into the trap of mimicking other designs too closely, or else your website could end up looking like a cheap copy. Seek inspiration from outside your industry. Focus on the emotions you want to evoke and the character you want to give your website, rather than on what everybody else is doing. Design a layout unique to your website or application by focusing on its goals and objectives rather than on what other people have done. While Web design isn’t art, and while there are limits to how much you can express yourself and how many visuals you can use, there is still plenty of room for a unique style. Just as Vincent van Gogh’s post-Impressionism style and Pablo Picasso’s unique art set them apart from the rest, breaking the mold will give your website a powerful and memorable identity that others will want to mimic. Don’t follow trends: set them. 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)