FeedStitch

Some Random Dude's Latest Updates From "appreciation"

Feb 25^th

7 Essential Elements of Blog Design

The blogosphere continues to expand almost on a daily basis, and as a web designer we often inform clients of the numerous benefits of attaching a blog to their site. It is always a great way to continuously update your readers as to what new developments are being made in your business and what to look for as they stick with you on this journey.

This in turn, keeps your site well trafficked by the online masses as new content is added on a regular basis. And while there are a plethora of points and elements that are vital when designing a blog, some take precedence over the others.

No matter what style you are aiming for as you put the site together, even on the most minimally designed blogs, the elements discussed below are the essential ones to include and give a heavy focus to in your design. Each of these elements can potentially have a large impact on the success and failure of the site, even though the design is not responsible for the content that will eventually fill the blog.

So the next time you are contracted to design a blog, what ever direction you head in, make sure that you take these elements with you.

Header

Naturally this is an important part of any site, because it lets people know just where they are on the web. For example, if your site is called Read Write Web and you want users to know they are not on, say Facebook, then you would want to have a large header that reads ‘Read Write Web’ plainly so that visitors will know with a glance to the top of the page, where they have cyberly landed. This should help eliminate any confusion among your visitors, though it is not a guarantee.

The header will usually contain a logo, the name of the site or company behind it, and possibly some design flourish to accompany this text.

The header of the blog is one of the two main elements that should always steal the attention and focus of the user immediately. So it needs to stand out boldly, much like on a newspaper or magazine. And because you generally want this to be the first element of the site that the user looks to, most designers will position the blog header in the upper left corner of the site.

This is not always a necessity, but after years of subtle unintended conditioning, the online public has been trained to look there for the site name and logo. Also given that a large portion of written dialects and texts are setup to begin in the upper left hand corner, this is an almost expected flow for information.

More Examples

Post Headlines

If the header is one of the two main elements that should pull the readers attention its way, then the Post Headlines are the other. Once again to look at a print based template, newspapers and the like always take steps to have the headlines separated from the body text that follows it, using larger, bolder font choices.

These highlights grace the page throughout, guiding the readers eyes as they search for relevant or intriguing entries. The same goes for a blog. This visual playground is littered with material for the reader to sift through as they navigate through the blog, so you want to make sure that they have to exert little effort to locate the post headlines.

Headlines can certainly be a tricky element to work out, because you want them to be large and looming, but not so much that they become cluttered and feel like they are squeezed in, as if they were an afterthought.

This can be tricky to do given that once the design is out of your hands the user is plugging in the headlines of unknown character lengths. Definitely something to take into consideration, because though you want it to draw the eye, you want it to do so for positive reasons, not because it breaks the flow of the design.

A good place to start your search is with this list of big, bold headline fonts from DesignM.ag.

For this reason, the font you select may need to have the spacing adjusted to stack well and tighten the appearance.

More Examples

Navigation

Once again, as with any site, intuitive site navigation is an important element for the sake and sanity of the reader. Now as the designer you are not necessarily dictating what other pages will be included with the blog, but you do set how to get to and from them, and this important usability interface can be integral to the blog design.

In fact, what is the point of having other pages, if you are not going to showcase them to your readers in some form or fashion, and the navigation is an important part of that. Just creating the access is a big first step.

Navigation, while an important element that needs to be accessible and clearly marked, does not have a lot of restrictions as to how you can achieve this effectively and creatively.

One tip for over-delivering on this element, and thereby demonstrating its importance, is through a multi-layered approach. Not only having the main site navigation that is styled to match and fit in with the blog design, but you can easily include a simple secondary text-based nav element just below the footer of the blog. This is a quick addition to the site that will aid both your client and their readers.

You can get as complex as you like with your navigation though, as this unusual navigation gallery at Noupe will show you.

More Examples

Site Search

Archives are not the only way to work a focus on the content into your design, and given that blogging seeks to be engaging and does so through its content, let your design highlight this through the inclusion of a site search element as well.

Site searches give some users more comfort and familiarity than trying to use the navigation or archives to find what it is they are looking for on your site. They may also have come to your site via another and may want to just browse for a particular keyword that is not apparent on whatever page of the blog they have landed. A site search can address easily these concerns.

This can be done as subtly and unobtrusively as you wish, or you can go to more garish and bold places with it, but however you do it, just do it. Both the client and the readers will be appreciative of this thoughtful inclusion.

And as said, if you are into a much more minimal approach and the thought of yet another element to add makes you cringe, this is certainly not a cringe-worthy addition as much as it is a necessary one.

Besides the site search is easily worked into a minimal style as it can be tucked away nearly anywhere given that you determine its dimensions and the way it blends into the background. And as long as it does not detract from the blog design, why not make it that much easier for readers to surf the site?

More Examples

RSS Subscribe

Speaking of the content that pushes the blog forward, as the designer you want to be sure that you give the readers a way to subscribe to the site’s RSS feed, even though it means that they may not be exposed to your brilliantly crafted design.

Honor your design by helping to ensure it sticks around, and allowing readers to receive the content how they want it. As the designer, you will not be in charge of the content, but its delivery and presentation does fall to you. Cover the basic bases that readers have come to expect so as to not hurt the blog you are designing for.

Even though, design wise, this tends to be a rather small element, it still deserves your attention. After all, size doesn’t matter in design. It still needs to match the rest of the design so as to not detract from the flow and feel of the design.

With so many amazing RSS icons available from the design community, not to mention your own design skills to draw from, adding this ever important blog element should be an item to tick off your checklist.

More Examples

Post & Comment Styling

Blogs, by nature, are both engaging and interactive, and your design should highlight both of those aspects through one very important element; style.

In particular, the style of the posts and of the comments (when applicable of course. Find out from your client if they intend to allow comments before you dedicate any time to it, naturally). The posts are the lifeblood that flows through the blog and keeps it alive, just as the comments are an area of the heart that helps pump the blood.

So make sure that the design showcases the posts with substantial focus on the style. These areas are key, so be sure that their importance is reflected in the design with the grace and power that is owed to an element that carries this much weight for the overall site.

If comments are included, then you want them to stand out in the design to not only highlight this interactive element of the blog, but to also shine a light on the members of the community who are taking the time to share their thoughts. And you can do this through the design.

And by now everyone has heard of styling author comments different, but it’s possible to give every role in WordPress a unique comment style.

More Examples

That is a wrap

Those are the must-have design elements to focus on when you are designing a blog. What areas would you think need major focus? Just leave a comment below to keep the discussion going.

Designing User Interfaces For Business Web Applications

Business Web application design is too often neglected. I see a lot of applications that don’t meet the needs of either businesses or users and thus contribute to a loss of profit and poor user experience. It even happens that designers are not involved in the process of creating applications at all, putting all of the responsibility on the shoulders of developers.

This is a tough task for developers, who may have plenty of back-end and front-end development experience but limited knowledge of design. This results in unsatisfied customers, frustrated users and failed projects.

So, we will cover the basics of user interface design for business Web applications. While one could apply many approaches, techniques and principles to UI design in general, our focus here will be on business Web applications.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

Websites vs. Web Applications

Confusing Web applications and websites is easy, as is confusing user interface design and website design. But they are different both in essence and in so many other ways, which we’ll explore in this article.

A website is a collection of pages consisting mostly of static content, images and video, with limited interactive functionality (i.e. except for the contact form and search functionality). The primary role of a website is to inform. Some websites use content management systems to render dynamic content, but their nature is still informational.

CampaignMonitor is powerful email marketing software, while Jeff Sarimento’s website is intended to inform readers about his life and work.

Web applications, on the other hand, are dynamic, interactive systems that help businesses perform business critical tasks and that increase and measure their productivity. Thus, the primary role of a Web application is to perform a function that serves the user’s tasks and according to defined business rules.

Web applications require a higher level of involvement and knowledge of the system on the part of the user. They don’t just stumble upon the application, do their work and bounce off. They use it as a tool to perform critical business tasks in their daily work. In the end, they cannot easily discontinue using the application and switch to another if they don’t like how it’s working, as is the case with websites.

Different Types of Web Applications

Business applications range in type from invoicing for freelancers to content management systems to document management systems to banking and financial systems.

We can distinguish between open and closed applications. Open systems are online applications that are easily accessible to anyone who opens an account. Users can access such applications via the Web and can open an account for free or by paying a fee. Closed systems (or line-of-business applications) are usually not accessible outside the company that uses it, and they can be considered “offline” applications (though many systems expose their functionality to business partners via either services or specialized interfaces). Such systems usually run on the company’s local network and are available only to employees.

I don’t know who coined it, but one term I like especially is weblication, which describes what a Web application is in general. This doesn’t mean, though that a Web application is a half-website half-application hybrid. It is far more complex that that.

First, Know Your Users

You’ve probably heard this a thousand times, and for good reason. A successful user interface focuses on users and their tasks. This is key, and too many developers have failed to create a good user experience. As Steve Krug said, “Developers like complexity; they enjoy discovering how something works.”

When identifying your users, keep in mind that clients are not users, and you are not a user. Although a client’s management team will usually be interested in the project and try to influence decisions, remember that they won’t be sitting in front of the computer several hours a day (unless the application is specifically for them).

How to Identify Users?

Identifying users can be done using several techniques, such as user interviews, business stakeholder interviews and and the “shadowing” method of observation. Interviews can give you answers to questions about the users’ knowledge of the system and computers in general, while shadowing can yield more detailed information about how users perform tasks and what errors they make. The method is called shadowing because the observer is like a shadow, watching and noting the steps a user takes.

If you don’t have access to real users—either because you don’t have permission or are designing for open application—you can use personas, a tool to help identify users. Personas are a representation of real users, including their habits, goals and motivation. Because certain information about users is often identified through business analysis, you can make use of it to create personas. If you are not familiar with the tool, a comic by Brad Colbow will help.

Task analysis helps identify what tasks users perform in their jobs, how they do them, how long they take and what errors they make. Sometimes clients will be using an old version of the application that you are designing to replace. Make use of that old system and watch how users use it. Understanding their tasks and challenges will be easier that way.

Regardless of who your users are, one thing is certain: in most cases, you will have to consider both novices and experts. Novice users should be enabled to learn as fast as possible, while expert users should be enabled to perform their tasks extremely efficiently. This may mean creating separate interfaces. But in many cases you will be able to accommodate both types of users in the same interface through various techniques, such as progressive disclosure.

Such research is usually done by business analysts. But if no one else is responsible for it, you should do it. Once you have the necessary information, you can begin with design.

Design Process

You can follow one of any number of processes in designing the user interface. You might already have one. However, I would suggest that you consider the Agile approach. Why, you ask? Well, because for users (and clients), the user interface is the product. The bottom line is that they don’t care about your sketches or about fantastic back ends or powerful servers. All they want to see is the user interface.

So, how does Agile help? It helps through its key principle: the iterative approach. Each iteration consists of all of the phases defined by your process. This means that at the end of the first iteration, you will have a product that can be tested, a prototype.

Sketching

Sketching is a powerful way to explore ideas. The goal is to arrive at the solution by sketching out different concepts. Most sketches will be thrown out, but that is okay. As Bill Buxton says in his “Sketching User Experience” book, sketches are fast to create and easy to dispose of, which is why they are so powerful.

Are sketches the same as wireframes? Well, the differences can be blurry, but I would say no. Wireframes don’t capture rough ideas but rather develop them. Read a fantastic discussion on IxDA: Sketching Before the Wireframes.

Once you get the “right” sketches, or at least the ones that you think are right, you can create more detailed wireframes or go straight to creating interactive prototypes.

Sketch by Jason Robb.

Interesting reading on sketching and wireframing:

Prototyping

The next step in the process is to create prototypes that will simulate the real application. A prototype can contain one or more features (or all of them), but it actually does nothing. It merely simulates the behavior of a real application, and users will feel that they are actually doing something. Prototypes may contain some functionality if needed (such as complex calculations).

Because the nature of a prototype done in HTML is temporary—its purpose, after all, is to test ideas—don’t bother with the code; just make it work with minimal bugs. You will throw it away anyway. You can also use specialized prototyping software such as Axure. Some people even prototype in PowerPoint.

An Axure interactive prototype for an e-commerce website, by e-maujean.

Further reading and tools for prototyping:

5 Useful Online Tools for Web Design Planning and Prototyping
A Practitioner’s Guide to Prototyping: A book from Rosenfeld Media
16 Design Tools for Prototyping and Wireframing

Testing

Prototypes are useless unless you test them. This is not rocket science. People like Jakob Nielsen and Steve Krug support so-called “discount usability testing,” which is cheap and fast and yields valuable insight into your design decisions. You will use this information as the basis of another iteration of sketching, prototyping and testing. Do this at least until major issues have been fixed. We all know that software projects are tight on time and budget, so to be more efficient, test early and test often.

One of the best resources for discount usability testing is a new book by Steve Krug, “Rocket Surgery Made Easy.” Pick up a copy and read it.

Snapshot of usability testing for Delicious, by (nz)dave.

Further reading:

Design Principles

There are many design principles, but there doesn’t seem to be a general consensus on definitive ones. So, we’ll go through design principles more informally, leaving out strict definitions.

No One Likes Surprises

Probably the key factors in a good UI are consistency and familiarity. A user interface should be consistent across all parts of the application, from navigation to color to terminology. This is known as internal consistency. But a user interface should also be consistent within its context, such as the operating system or other applications in its group or family. A typical example is the applications in the Microsoft Office family. This is called external consistency.

A good approach to consistency is to define user interface guidelines for each project or for a group of projects. These should guide the decisions you make for all of the details. This will not only maintain consistency but also serve as documentation to help team members better understand your decisions.

Although a simple example, SprinklePenny achieves consistency and familiarity across the application.

Consistent user interfaces have a shorter learning curve, because users will recognize parts of the system and be able to fall back on prior experience. But familiarity is sometimes confused with consistency. Familiar user interfaces draw on concepts from the users’ previous experiences and use appropriate metaphors. Folders, for example, are a well-known metaphor for file organization, and they have replaced “directories,” which were used previously in command-line operating systems. In short, speak the language of your users.

A common belief among business owners is that a great user interface should look like a Microsoft Office product, especially Outlook. I won’t go into explaining how pointless this is. Rather, I will offer alternative advice: defend the user-centric approach, and explain why creating an application for employees, clients and partners (i.e. their users) is so important.

All the same, most businesses are unique, as are their work processes. For example, two businesses from the same branch could have significantly different processes, forcing you to go beyond what is familiar and start to innovate. This part of the design process can be very interesting, although you have to be careful in how far you go with innovation.

Further reading:

Users Should Be Able to Be Efficient

Without a doubt, users should be able to be efficient when using business applications. This is what they are paid for, and this is what managers expects from the application. User interfaces should allow users to be efficient and should focus them on completing tasks in the easiest and fastest way. But this is not always the case. There is an opinion, or at least practice, among developers that says the user interface should be as complex as the back end system. No matter how ridiculous this sounds, the problem is real and might give you a headache. This is one reason why good communication and collaboration between developers is a must.

Users are efficient when they focus on a particular task. As mentioned, task analysis can help you identify tasks and determine how users perform them. If tasks are long, accelerate them by breaking them up into smaller units. You can also increase efficiency by providing keyboard support and shortcuts. Think how inefficient it is for a user to have to switch back and forth between mouse and keyboard. In some cases, you will be designing for users who are accustomed to working on command-line operating systems and the applications made for them. They will be keen to have keyboard support. One suggestion: when defining keyboard shortcuts, keep them consistent with those of common applications. For example, Ctrl + S should always be save, and so on.

Google Docs Spreadsheet enables users to be efficient by providing keyboard shortcuts and context menus, as well as by taking advantage of users’ familiarity with common desktop applications.

Efficiency can also be enhanced through personalization. Users who can personalize an environment will learn it faster and, more importantly, will be more confident using it. Personalization can be done in many ways: choosing widgets for the dashboard; defining shortcut options and favorites; changing the order of elements; etc.

Pay attention to accessibility. Although many assume that accessibility doesn’t matter in Web applications, it certainly does. Treat the application as if it were a public website.

A Web application also has to be efficient in the speed with which it processes information. So, consider heavy interactions that result from partial renderings and AJAX requests.

Help!

An interface should provide meaningful feedback that describes the state of the system to users. If an error occurs, users should be notified and informed of ways to recover. If an operation is in progress, users should be notified about the progress.

We can go even further and declare that user interfaces should prevent users from making errors. This principle, called forgiveness, can be followed with confirmation dialogs, undo options, forgiving formats and more. Forgiveness makes it safe to explore the interface, decreases the learning curve and increases overall satisfaction.

Because of the complexity of business Web applications, you would also need to provide a comprehensive help system. This can be done with inline help, a support database, a knowledge base and guided tours (which mix video, images and text).

Further reading:

Can’t Get No Satisfaction

Satisfaction is a subjective term that refers to how pleasant an interface is to use. Every design principle we have described here affects satisfaction. And a few more principles are worth mentioning here.

Simplicity is a basic principle of UI design. The simpler a user interface, the easier it is to use. But keeping user interfaces for business applications simple is a challenge because the apps often have a lot of functionality. The key is to balance functionality and simplicity. Restraint is one of the most efficient ways to achieve this balance: i.e. finding the simplest way to solve a problem.

BuildWith.me has a simple and effective user interface, without sacrificing aesthetics.

Aesthetics, though subjective and somewhat arbitrary, play an important role in overall satisfaction. Users respond positively to pleasing user interfaces, sometimes even overlooking missing functionality. But you’re not creating a work of art. One of the best articles that explains aesthetics is In Defense of Eye Candy.

In the end, users will be spending a lot of time in front of a business application, and no matter how usable, consistent or forgiving the interface is, satisfaction will be critical in determining how good the user interface is.

Further reading:

Other resources related to UI design:

Essential Components Of Web Applications

Every Web application is unique, but many of them contain common features. Although the implementation of any one of these features will vary, let’s look at the basic concept of the three most common ones.

Web Forms

Forms in general are important to Web applications. But as Luke Wroblewski says in his Web Form Design book, “No one likes filing in forms.” That includes sign-up forms, including business applications with dozens of fields.

Minimize the frustration of filling in forms. Provide inline validation and good feedback. Use defaults when possible. Don’t forget about novice users. Use wizards to help them complete tasks faster, or use progressive disclosure to hide advanced (or infrequently used) features.

Master-Detail Views

This is the technique of showing data in two separate but related views. One view shows a list of items, while the other shows details of the selected item. Master-detail views can be implemented across multiple pages or on individual ones.

Dashboards

Many Web applications have dashboards. A dashboard is a view of the most important information needed to take action and make decisions. It is confined to a single page and is usually the starting point of an application. Dashboards are important because they enable users to access information and take action without having to dig through the application.

Xero shows a user’s most important financial information (e.g. bank accounts and credit cards) in its dashboard, making it easy for users to quickly see the status of their financial data.

Heavy Use of Tables

Because Web applications typically deal with large quantities of data that are easily accessible and sortable, tables are unavoidable. But this is not a bad thing. In fact, tables were made for this purpose. Don’t confuse this with table-less layouts. Effective tables are easily readable. So, in most cases you will need a meaningful header, an optimal number of columns, pagination, alternating row colors, proper column alignment, sorting and filtering capabilities and much more.

Tables can also be interactive, meaning they can generate additional info and even modify the data they contain.

PulseApp is a good example of how tables can be used to efficiently present and manipulate complex data.

Reports

Most businesses work with some kind of reports. Printed reports are usually required, so pay attention to the design of reports. Printed (or exported) reports are usually simplified versions of online reports, optimized for monochrome printers.

FreshBooks has printing, PDF exporting and “Send to email” features. It also shows a print preview.

Don’t Forget UI Design Patterns

We’re so used to hearing and talking about UI design patterns that we sometimes forget about them! UI design patterns are helpful for designing user interfaces. The important thing is to consider them early on in the design process, ideally at the sketching stage. Because patterns often solve common problems, the right pattern can facilitate the user’s familiarity with an interface and increase the speed at which they learn it.

This screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen patterns.

Further reading:

Designing Web Interfaces: Principles and Patterns for Rich Interactions
A fantastic book that covers more that 70 Web design patterns.
40+ Helpful Resources On User Interface Design Patterns

Case Study: Online Banking Application

To take an example from the real world, I will briefly explain the process of designing the user interface for one small bank’s online banking system. The team I worked with was hired to improve the system. The main reason for the redesign was that, according to management, “users complained and many stopped using it.”

After only a couple of hours spent with actual users, the main problems were uncovered. Information about accounts and credit cards was buried in poor navigation. Understanding how much money users were spending and the state of their accounts and credit cards was also hard. The application, however, was obvious to bank employees; they were familiar with the terminology and could interpreted the numbers in the application perfectly well.

Give the tight deadlines, we followed the process I have described, and we partially succeeded. Despite the short time, the major problems were so obvious that we clearly understood our main task and how to go about it. We created a dashboard that provided clear information on the state of all accounts and credit cards. With this new navigation, finding information became easier. Reports were easier to understand, and several new features were implemented.

Although we made only a few changes, the changes affected critical user tasks and resulted in significant improvements to the overall experience.

Final Thoughts

Designing user interfaces for business Web applications is a challenging job that is full of compromises. You have to make compromises between client and user needs; business requirements and users; novice and expert users; functionality and simplicity. It requires a solid understanding of users and their tasks, as well as of UI design principles and patterns. Despite the difficulties, the job is interesting, and you learn many new things on each project that influence the way you design websites.

While this article reflects some well-known concepts and things I have learned from designing business applications over the years, I look forward to hearing your experiences and stories.

(al)

12 Reasons You Need a Facebook Fan Page and 5 Easy Steps for Creating One

Facebook fan pages aren’t just for large corporations interested in getting involved in social media. Small businesses, entrepreneurs, freelancers and other professionals can benefit from having a fan page on Facebook.

Separate from your personal profile, a Facebook fan page is a public profile that lets you share your products, services and related information with other Facebook users. Here are some of the biggest reasons you should create a fan page today.

12 Reasons You Need a Facebook Fan Page

There isn’t a limit to the number of fans you can have. This makes fan pages especially valuable for Facebook users who reach, or are approaching, the 5,000 friend limit.
It’s free.
It gives you a way to talk to and get feedback from your target audience, because like a user profile, you can update your fans with statuses that will appear in the news feed.
You can promote events.
It’s an SEO boost. Facebook is currently the second most popular site on the Web according to Alexa.
You can customize the design using FBML, Facebook’s version of HTML. Check out the Static FBML app for more.
You can create brand advocates.
You can easily promote it with tools provided by Facebook.
The Facebook Pages Insights analytics tool gives you useful information about your fans and their interactions.
You can build a community for your clients and prospects.
It’s another funnel to your website.
You can add unlimited photos and videos.

5 Easy Steps for Creating a Facebook Fan Page

Step 1: Go to http://www.facebook.com/pages/create.php

Step 2: Select a category and enter the name for your page (you can set your fan page to be private until you’re ready to go live).

Step 3: Add a picture and become a fan.

Step 4: Edit your page settings. This is where you customize your page, including country and age restrictions, wall settings, tabs, fan permissions, and applications.

Step 5: Publish and promote your page. You can promote with a fan box, a Facebook ad, by suggesting to friends, on your personal profile and in your other networks.

Bonus: Once you hit 25 fans, go to http://www.facebook.com/username/ to create a vanity URL for your page.

How have you used Facebook fan pages for promotion?

6 Steps to Creating a Unique Selling Proposition (USP) If you don't have a USP for your business, check...
7 Essential Steps to Creating an Efficient Mobile Office Do you want to be able to work from anywhere...
Tips for Using Blogs, Twitter and Facebook to Find New Clients Social media can be a great way to find new...

Color In Design: Pink

Last week, I wrote about the earthy color brown in design. This week we’re looking at the more flamboyant color pink. While red is linked with passion, pink is associated with love and romance. It is a stylish color and while generally considered feminine, it’s not just for girls! Are you man enough to wear Pink? Pink is a trendy and playful and is surprisingly popular in web design.

Think of the use of pink in everyday language and you can see how it is perceived as mostly a positive color. A healthy person is sometimes referred to as “In the pink”, content and happy people are described as “tickled pink”.

Using Pink In Design:

There are of course, many different shades and hues of pink. Ranging from light pinks, into orange-pinks, into deep pinks, the color has names such as fuchsia, rose, salmon, flesh, coral and hot pink. There is a pink for every occasion.

You can create soft and delicate color palettes using light pink with pastel purples. Pink combined with black or dark grey can look sophisticated. Pink and blue is playful and fun, while dark pinks combined with burgundy can create a more serious tone. Salmon pink and moss green produce a natural, earthy combination.

Magazine covers are a great place to see pink palettes in action. In this Harper’s Bazaar cover, Gwyneth Paltrow is wearing a dark pink dress. The type is all set in one typeface, but the bright pink matches text matchers her lipstick. Salmon pink and white text add to the palette.

On the Rolling Stone cover below, Alicia Silverstone’s clothes are almost the same color as the background. The pink is very soft. However, the black type and choice of typeface stops it from going into pink girly overkill.

There’s quite a sixties vibe going on with this cover of V Magazine. Lady Gaga’s hot pink clothes and ehm, glasses combined with the bright yellow text and bright orange background are very much in your face and leap off the page.

Famous Logos And Branding Using Pink

As with the brown logos last week, I found it hard to think of more than a handful really well known logos using pink as a major color. One logo which came to mind quickly is the disaster that is the London 2012 logo. It must be working so. Please feel free to add the list.

Pink In Web Design

I’ve picked out ten sites that I thought were doing a great job in pink. These sites either use pink to highlight important areas of the web site, or use it as an eye-catching background color.

Snog Pure Frozen Yoghurt

Twitter Lane Interiors

What do you think about pink? Is pink your color or something that makes you want to run away from a site? Any other pink sites that you like?

Color In Design: Purple Jennifer takes a look at that most regal of colors,...
Color In Design: Yellow Continuing the series of Color In Design, Jennifer looks at...
Principles of Design: Color In the final part of her series on design principles,...

Best Practices for Hints and Validation in Web Forms

Our instinctive dislike for forms originates from having to fill out seemingly endless paper forms, many of which require a Master’s degree in Form Content Filling to understand and fill out correctly the first time.

Unfortunately, in the offline world, getting some answer wrong would mean having to fill out the form in full and sending it again, usually days apart.

Online, we have the opportunity to not only resubmit forms countless times, but also as web developers, we can provide people with much more relevant feedback at various stages of using a web form.

Through hints and validation, we can create forms that are a lot more user-friendly than their offline counterparts. And in some cases, we can make forms that people might even enjoy filling out.

Hints in Web Forms

Validation is frequently used to provide users with a response on what information they should have entered when an error occurs.

By using a number of helpful hints, we can provide much of this information before they even enter their name. By showing more information before a user submits a form, we can reduce the chance of an error happening.

Information available prior to submission can come in three forms:

Labels: These should quickly describe what information should be entered into an input field—this could be their username, password, email, etc.

Required or optional information: an input field should be denoted as required or optional, usually by an asterisk (*) or any cues or text-based hints that tell the form user they can’t leave a field blank.

Help hints: Help hints function to give the user additional tips on how to format their information. For example, a help hint might tell a user what the password requirements are (as shown below).

Alignment of Labels

Of course, all information should be placed in such a way that it is clearly associated to a given input field, but the alignment of a label can actually affect not only a successful submission, but also the speed of completion.
The alignment of a label is typically either left, right or top; there are benefits and disadvantages to each alignment:

Top labels: Positioning a label at the top of input fields improves the association between the label and field, but does tend to give the impression of a longer form.

Right labels: Labels at the right of the input fields reduces the vertical space of the web form, and improves the association between the label and input. However, right labels can reduce the readability and scanability of web forms.

Left labels: Labels at the left of form fields can make for easier reading of the labels, and also makes the web form vertically shorter. However, it tends to affect the association of labels to inputs.

Choosing the alignment of labels in a form can depend on the type of web form you are creating, the available space you have for your web form and which of the disadvantages are of greater concern to you in the given situation.

Labels inside Inputs

Some forms will use placeholders to indicate suitable examples of information within an input field, but in some instances, when screen real estate is at a premium, developers will use labels within the input fields.

This doesn’t pose too many issues on shorter forms, but as the form grows, this becomes an issue. By using the label within the input, it means that once a user enters any data, the label disappears and cannot be referred back to when reviewing the form either before or after submission.

Hints within inputs should be used only where sufficient information still exists to indicate an input’s purpose or requirements after the user has entered their information and the original hint has disappeared.

Additionally, labels inside input fields can be troublesome if done incorrectly, as they often rely on client-side scripting such as JavaScript.

One potential solution to the downsides of labels within inputs is using the sliding labels technique—proposed by CSSKarma—where the labels move to the side and remains visible when the user focuses and enters text into the fields. However, this technique still doesn’t solve space limitations.

Dynamic Hints

If space is at a premium or your form looks too cluttered with hints beside each input field, then you can make them dynamic. A hint can appear as a tooltip based on user action either when the user focuses on the input field or when the user hovers over a help icon placed near the input field.

Using dynamic hints allows for more descriptive information to be communicated as the character limit isn’t restricted by the available space around the input field.

Data Validation in Web Forms

Given sufficient and correct use of hints, it may be possible that the majority of users will never see any validation, but this does not mean validation is not vitally important.

Validation provides a safety net for many users as well as a system to ensure the website is gathering the correct information required.

The structure on which the web is constructed allows us two methods by which we can validate a user input:

Server-side Validation

When using server-side validation, any information entered by the user is sent to the server to be checked rather than anything happening locally on an individual’s own computer. With the exception of using Ajax server-side form validation, this is a slower form of validation as it requires the user to first submit the form and then wait for the server to validate the data before reloading the page in order to provide a response.

However, what you lose in speed, you gain in security, as this process is not easily bypassed like client-side validation.

Client-side Validation

Although HTML5 will change the way we undertake client-side validation, JavaScript is commonly the language used for client-side validation today. Because users can disable JavaScript in their browser, a website cannot rely solely on JavaScript as a method of validation.

Instead, client-side validation should be seen as an extra layer on top of server-side validation.

Real-time Validation

Real-time validation is one of these server-side validation disadvantages that client-side validation allows us to solve. Although client-side validation can be activated via a submit button too, there is also the opportunity to use real-time validation as users enter data into the form.

Real-time validation is where JavaScript can be used to provide an instant response to a user action. So rather than having to fill out the entire form and pressing submit, the user gets an instant response as they are typing so that they can make immediate corrections if necessary.

One example of real-time validation would be a password strength indicator where each key stroke triggers the validation and sends a response to indicate to a user how weak or strong that website thinks the password they have chosen is.

The Good, the Bad and the Ugly of Web Form Validation

Validation isn’t all bed of roses.

The Good

Just why do we use validation exactly? It’s not exactly the easiest thing to code, especially if you duplicate the work by using client-side and server-side web form validation.

For users: Of course, it’s pretty obvious that we do validation for our users. By using validation correctly, we create a user-friendly form that makes the process as easy and quick as possible.

For obtaining correct information: It might create a usable experience for users but it also ensures the website receives the correct information it requires and in the format necessary to store it in a database for future use.

For spam protection: By validating for specific information, we can cut out some of the spam that a form may otherwise receive. However, keep in mind that any validation we put in place for spam should never affect the user experience. Remember that users are unconcerned with the level of spam you may receive.

The Bad

Validation isn’t all good though, as developers and clients alike have been known to abuse forms, forgetting the original purpose of the form and creating something that isn’t all too user-friendly:

Unusual required fields: Rather than creating a form with only the information a user truly needs to continue, we enter optional fields. Sometimes these are useful for the user, such as extra address fields or additional information text areas. In other cases they might help site owners gather such information as "Where did you hear about us?"

When these traditionally optional fields are required by the validation, they create a barrier for completion and causes the user to wonder why such information is requested of them.

Restrictive formats: Where possible, we will ensure users enter information in the format we expect. But at times, validation goes too far and constricts the user to a given format that causes validation errors where they shouldn’t exist. This usually forces a user to jump through hoops to meet the specific criteria laid out to suit the system. One example would be the requirement of no spaces in a phone number. This is something that should be amended by the code, not the user. Another example of this is having too many requirements for the type of password you need (e.g. "Must have three numbers, a capital letter, and must be between 6-12 characters only").

The Ugly

As we all know, some malicious users on the Web are out to cause mischief by bringing down websites. When developers are a little lax with their validation, it allows some of these people the opportunity to abuse exploits like cross-site scripting (abbreviated as XSS) to break a website or gain access to areas or information they shouldn’t be accessing. It’s an unfortunate reality of the web, and something that can be addressed with validation techniques.

By protecting your site against such attacks you ensure the website is always live for you and your users and that your users’ information is always safe.

For more information on XSS, visit XSS (Cross Site Scripting) Cheat Sheet on ha.ckers.org.

Validation Responses

Simply outputting hints and validation isn’t enough. Design plays its part too, helping communicate and reinforce the messages any validation is outputting.

Many different factors help towards ensuring that a user, if they do get an error on their first attempt, can correct their submission and get the form sent in second time around.

Colour

Colour is a great design element to use in order to reinforce a message. Commonly, red would be used in the instance of an error, and green for success. The use of colour clearly indicates to a user even before they read any textual responses that result from form validation.

Colour can be used in multiple ways within a web form to highlight a particular error. As well as using colour for any validation response, you can reinforce what specific inputs have errors by using colour to alter the label, border or background of a given input field.

However, it’s best to get a balance as we’re only trying to clearly indicate errors to a user, not beat them over the head with them.

As much as colour is a useful tool to communicate a given message, it can never be used independently to convey a message for accessibility reasons. Blind, low-vision and colour-blind users will have issues in determining where errors have occurred if colour was the only method for indicating where errors have occurred.

Positioning

How you position any validation elements can also have an effect on how usable a form is, especially when it comes to longer forms:

Top of the page: This is a validation response placed at the top of the page, most frequently directly above the form. For server-side validation without Ajax, this is great for screen-reader users if done correctly, because it can be the first element they read when the page reloads.

Inline: Any validation placed in close proximity to the input where an error has occurred is considered "inline". This can work well for real-time validation and for longer web forms.

If you have a long form that disappears below the fold, then using both of these techniques is a good idea.

For example, if an error occurred towards the bottom of the form, and you use both techniques, then the user may quickly see a response that clearly gives them a hint for correcting the mistake when scrolling through the form.

If you are using real-time validation, then the use of a top of the page response would be unnecessary, as the user would only require inline validation in this instance.

Using Icons and Visual Cues

Although they aren’t as instantly recognizable as colour, icons are again a way of communicating a message before a user has a chance to read any textual response. Icons are a great way of displaying inline validation where screen real estate is at a minimum, but only works to reinforce any textual response at the top of the page.

Examples of good icons to use in validation would be a tick mark (checkmark) for success, or a red cross (X) for an error.

Other Styling Techniques for Validation Responses

There is a wealth of other style elements that you can add to particular responses, such as borders, font weights, backgrounds, etc. The use of these would depend on the positioning of your errors, how you are displaying the errors, and what suits the design of your website.

Although any response messages should have a level of differentiation with surrounding elements in order to be recognizable—there is no reason they should not be symbiotic to the rest of the website design.

Web Form Validation Response Messages

Styling and positioning only helps indicate that an error has occurred, and where it has occurred. It is the textual responses the website outputs that communicate what is necessary to a user.

Any error message should communicate the following as best it can:

List all errors: To make sure a user gets the form on the next attempt, all the errors should be displayed in close proximity to each other for convenience. This allows the user to go to that list, instead of hunting it down throughout the web form.

Where the errors are: An error response should mention what input field the error relates to. When referring to an input, you would traditionally use the label of that input as this is how users will identify with particular inputs best.

How an error may be fixed: If the error is complex —more intricate than simply letting the user know they missed a required field—it’s always best to communicate what the solution might be. If a telephone number can’t accept alphabetic characters, then tell the user. If a user didn’t enter their email address in the correct format, you might show them an example of what the correct format is.

Sticky form information

When submitting a form with errors, a user will expect that the form enable them to adjust their previous responses, rather than having to fill out the entire form again. Not having the form retain previous user entry could lead to dropped forms.
Making sure the data a user has entered is "sticky" allows them to more easily understand the error that has occurred.

Don’t Use Alert Dialog Boxes for Validation Responses

Primarily used with client-side validation, Alert dialog boxes issue problems for users, often creating a barrier for completion. Here are a few reasons why:

Alert dialog boxes are temporary: When an alert box is displayed, it must first be closed before returning to the form. Once closed, the only way to view the error again is to re-submit the form. This gives the user no information to refer back to. Unless you are catering exclusively to people with extraordinary memory skills, it is a safe assumption to say that most Web users have a short attention and memory span.

Alert dialog boxes are troublesome for a submitted form with multiple errors: When using alert boxes and popup windows, it is common that only the first error found is displayed, rather than a full list of errors. The form is then re-submitted by the user multiple times to discover multiple different errors.

Alert dialog boxes are text-only: Alert boxes can only display text to communicate a message so no other design elements can be used to create a different style depending on an error or success message.

Don’t Use Error Pages for Validation Responses

Another poor form of validation is when using error pages. This is where the form sends the information to a separate page to validate, and any errors that do exist get output on this page without the original form. This means the user must navigate back to the form where they may lose the information they previously entered, as well as the errors they need to correct.

Examples of Good Forms with Hints and Validation

Conclusion

Forms are can be a complex feature of any website for both the developer and user, but they are the only method in which the user and the website can interact with one another.

This is why web forms have to be given careful consideration—unusable forms can seriously affect your business and your profits.

Sometimes the effort that goes into a web form and validation design is minuscule, even on the best-designed sites. Outputting a text error simply isn’t enough—you need ensure it provides sufficient information in both content and design to achieve the best user experience.

So rather than thinking of your form and validation as just another thing to get finished, consider spending more time creating web forms that are as perfect as the rest of your website.

About the Author

Kean Richmond is a full-time web designer and developer based in Yorkshire, UK. Working as a generalist in most areas of web design and development he currently works at Bronco, tweets as @keanrichmond and rants on his personal blog.

Feb 24^th

Win a MooTools 1.2 Beginner’s Guide Book from Packt Publishing

Here’s a chance to win a copy of my book, MooTools 1.2 Beginner’s Guide published by Packt Publishing. Five winners will be selected to win a copy. Read on to see how you could be one of them.

About the Book

In case you missed the announcement post yesterday, MooTools 1.2 Beginner’s Guide is a book that I wrote with Garrick Cheung. The book is a hands-on approach to learning professional-level web development using the powerful MooTools framework. The book is packed with usable examples that help the learner understand the concepts using a pragmatic teaching method.

My publisher, Packt Publishing, was kind enough to offer five copies (2 paperbacks and 3 eBooks) of the book to Six Revisions readers.

If you’d like to learn more about the book, read my post from yesterday or head over to the Packt Publishing product page of the MooTools 1.2 Beginner’s Guide.

How to Enter for a Chance to Win

All you have to do is comment on why you’d like a copy of the book in the comments. If you prefer a certain book format (paperback or eBook), also note that down as well, so that if you are selected, we’ll try our best to get you your preference.

Giveaway Details

The duration of this giveaway is for 7 days. The giveaway ends on March 3, 2010 after which the commenting on this post will be disabled. Five winners will be randomly selected in the same fashion as previous giveaways on Six Revisions to win a copy of the MooTools 1.2 Beginner’s Guide from Packt publishing. Ensure that you use a valid email in the comments form so that we can contact you if you win. Winners will be announced on Monday, March 8, 2010 and also contacted via email about their prize. Good luck!

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Google Faces Antitrust Inquiry

The European Commission love a good inquiry. Oracle, Apple and Microsoft have all been hit, and now they’ve now turned their legal turrets toward Google. Although Google have faced antitrust accusations in the US and Europe before, this is the first official inquiry into the company’s search and advertising services.

Are Search Results Fair?

The first aspect of the inquiry has been sparked by complaints from Foundem, a UK price comparison service, and ejustice.fr, a French legal search engine. Both accuse Google of relegating their websites to an unfairly low place in search engine results.

Google has denied that it deliberately penalizes sites which are a competitive threat to its own services. Independent SEO analysts have also pointed out that Foundem has little original content because it scrapes product information from other websites.

Google can certainly modify the indexing of individual sites — for example, domains can be blocked if they’re found to be spoofing content or engaging in black-hat SEO practices. However, would Google seriously consider these two sites to be a threat? If Google engaged in mass rank manipulation, it would involve a colossal amount of human effort and search results could become meaningless.

This aspect of the inquiry should be thrown out unless it can be categorically proven that Google are abusing their search dominance and hurting competitors. The floodgates will open if Foundem and ejustice.fr win owing to some legal technicality — every business will be able to claim their “rightful” search result position.

Are Advertising Costs Fair?

The second part of the inquiry centers on Google AdWords and has been raised by Ciao.

AdWords is possibly the largest advertising network on the net. Costs are set by auction; if you agree to pay 50c per advert click, you will normally appear above someone who’s paying 30c for the same search terms. However, Google set minimum bid levels and popular keywords can be seriously expensive — $10 or more.

This aspect of the inquiry could hit Google: they have the market dominance to artificially raise minimum bid prices. After all, a fair auction process should let you bid any amount — even if it means your advert is shown at 3am Sunday morning on page 57 of the search results.

Google has remarked that Ciao was acquired by Microsoft, is part of Bing, and can hardly be impartial. I’m no lawyer, but I think Google will need a better defense argument.

What do you think? Is Google being unfairly targeted? Or have they become too monolithic and rescinded on their promise to do no evil?

Microsoft Kumo Search to Take on Google. Again. Can Microsoft successfully take on Google with its new Kumo...
Have We Become Too Dependent on Google? Google's recent downtime caused a tidal wave of failures way...
What If Google Announced: “Google Is Big Brother”? We know Google has been watching, and we know why,...

New Snippet Buttons

I’ve added two new buttons to all of the code snippets in the Snippets section of the site. Now a button to add directly to Snippets.app and a button to directly copy to the clipboard join the Coda and Textmate buttons.

Read on for some more details about them, and remember, you can help the Snippets section grow by submitting yours.

Snippets.app button

One-click adding to Snippets.app

Snippets.app supports a URL protocol thingy. That is, once the application installed, browsers on your system know that when a URL is entered that begins with “snippets:” (instead of like http://) that it should launch (or ask you to launch) Snippets.app and do something with that URL.

Their format is:

snippets:add?code=[ENCODED-CODE-HERE]&name=[SNIPPET-NAME]&relatedurl=[REFERENCE-URL]&author=[AUTHOR-NAME]

You’ll only see this once if you check the box.

Since all my code snippets are in <pre> elements, this is how I add the Snippets.app button to each code block (simplified):

$("pre").each(function() {
    $preblock = $(this);
    $codeblock = $preblock.find("code");
    $snippets_link = "snippet:add?code=" + encodeURIComponent($codeblock.text()) + "&name=" + $title + "&relatedurl=" + encodeURIComponent(document.location.href);
    $("<a class='snippet-button'>Add to Snippets.app</a>").attr("href",$snippets_link).appendTo($preblock);
});

Copy to Clipboard

This button is powered by the awesome Zero Clipboard. For a while after Flash 10 came out, copying to clipboard from the web was borked as Flash 10 had some new security restrictions that blocked the previous methods (Yeah, apparently Flash is needed to have this work correctly). Zero Clipboard stepped it up and fixed it somehow.

One-click copying to clipboard

One particular challenge here was with the rollover technique I’m using to display the “tooltip” like text for each button. On the three other buttons, I do a simple thing where I append a span to the anchor link on hover, and remove it on the hover callback:

$(".snippet-button").hover(function() {
    $el = $(this);
    $el.append("<span>" + $el.text() + "</span>");
}, function() {
    $(this).find("span").remove();
});

The span is styled and positioned with CSS.

The problem is, Zero Clipboard works by positioning a completely transparent flash embed over top of the button. This means there is no traditional hover even fired when the mouse goes over this area. Fortunately, Zero Clipboard provides event listeners which you can have fire callback functions for you. See the last two lines:

ZeroClipboard.setMoviePath( '/path/to/ZeroClipboard.swf' );

$(".copy-clip").each(function(i) {

    clip = new ZeroClipboard.Client();

    $el = $(this);
    $parent = $el.parent();

    clip.glue($el[0], $parent[0]);

    txt = $el.parent().find("code").text();
    clip.setText(txt);

    clip.addEventListener('complete', function(client, text) {
      // provide some user feedback of success
    });

    clip.addEventListener('mouseOver', copyMouseOver);
    clip.addEventListener('mouseOut', copyMouseOut);     

});

Those two functions, copyMouseOver and copyMouseOut are used to do the same span-applying-and-removing business the other buttons use. The one tricky-dick thing left is that these functions need to know which parent element to deal with, in the case of multiple snippets on a single page. Fortunately they automatically pass the object to the function which is loaded with info about that element, including the ID, which I use to specify which code snippet button we are talking about:

function copyMouseOver(passed) {
    $("#copy-" + passed.id).append("<span>Copy to Clipboard</span>");
};

I wanted to make sure there was a bit of user feedback when a clip was successfully copied to the clipboard, so you’ll notice that the clip itself quickly fades down and back up after a successful copy. Somewhat subtle but I think it’s fairly satisfying.

Coda and TextMate

Not much has changed here. I covered how to add Coda buttons in a previous tutorial. David Walsh covered the TextMate button, which requires some fancy server side action.

Seem to work OK?

Give it a test and let me know… I’ve heard some musings of FAIL on Twitter but all the buttons seem to work OK for me. If you want to do a FAIL report, please attempt to be helpful and explain which button isn’t working, the browser/version/platform, and what actually happens.

Macity Mac Mac Mac

Yeah all the integrations are Mac software. Sorry about that, that’s just how I roll. If there was a PC program that supported a URL protocol thingy, I’d check it out and see what I could do about integrating it. For now, the copy to clipboard thing should be useful still.

10 Tips for Choosing the Perfect Name for Your Company

Yesterday, as part of my series on starting a business, I provided a general outline of things you need to think about when you develop a name for your business. Once you have your plan in place, here are some tips to help you find a business name that will add to your success.

1. Check on the Competition: What kind of names do your competitors have? Make a list and compare them to spark your own ideas and to help you develop a name that really stands out from the crowd.

2. Think about Your Target Audience: You want your business name to resonate with the people you are trying to reach. Use what you know about your target audience to measure the relevancy of any names you come up with.

3. Embrace Your Creativity: While you want your name to be easy to pronounce and remember, don’t skip over the value of creating a name that is completely unique. Not only can this make your business more memorable, but it can also provide a great opportunity for a back story, if your creative name has a special meaning.

4. Look at It from All Angles: Think about how the name will fit into the everyday operations of your business, and what it will make others think and feel. Make sure it coveys a clear message and that you are aware of all of the possible connotations that may influence how your business is perceived.

5. Don’t Limit Yourself: If you choose a name that identifies exactly what you do, such as Joe’s Logo Design, you might be limiting the future growth of your business. Sometimes it makes sense to be a little more general, such as Joe’s Graphic Design, so you don’t have to revisit and possibly revamp your brand down the line.

6. Get Input: Once you have a few possibilities, bounce them off of friends, family, colleagues and potential clients if possible. Ask for their initial impressions and suggestions they may have, and then add their feedback to your process.

7. Visualize the Brand: Your business name is more than just a name, it’s a big part of your company brand. Think in terms of your domain name, your marketing materials and how the name will essentially translate into all aspects of this new brand you are creating.

8. Use Tools: During your brainstorming phase, use some of the tools that are available to get inspired. A thesaurus is a must-have, and here are a few online tools to try out:

9. Keep It Short: Your business name won’t necessarily be more effective if it’s short, but it may be easier to remember. You can also consider using an acronym, but be careful – unless there is an obvious and memorable tie-in, using an acronym can make your name too generic to be relatable to your target.

10. Sleep On It: Put your shortlist of names aside for a day or two and then come back to it with a fresh perspective. You may feel differently about a name you loved before, or your working list may help you develop a new and perfect name when you review it again.

I used many of these tips years ago when I started my business, avertua. While it may not be the perfect case study in business name development, my business name has sparked many questions about where it came from (I made it up), what it means (it’s my take on what I provide: “a virtual solution”), and how to pronounce it (ah-ver-choo-ah). My goal when creating my business name was to get people intrigued and to be memorable, and it appears I’ve been successful in doing that.

How did you come up with your business name? What tips would you add to this list?

Additional Resources:

10 Company Name Types, The Name Inspector
The 10 Commandments of a Great Business Name, About.com
8 Mistakes To Avoid When Naming Your Business, Entrepreneur.com

Image credit: L_Avi

Five Logo Design Tips with David Airey We see logos everyday - on blogs, on news sites...
18 Tips for Delivering a Memorable Presentation Whether you're pitching a new client, teaching a class or...
How to Convince a Company that Social Media is the Way to Go In order to convince a company that social media is...

Smashing Newsletter Challenge… And Giveaway!

It’s time for something brand new and exciting on Smashing Magazine. Actually, we have quite a few things in the works, and today we are happy to reveal one of them. Over the years, we have published many lengthy articles, and now we want to write some shorter ones for a change. We want to launch the Smashing Email Newsletter and we prepared some nice prizes for our subscribers.

Every week our editorial team will work on short, entertaining and (of course) relevant articles for the upcoming issue. The newsletter will be sent out once a week, probably on Tuesdays, and will contain unique tips and tricks for designers and Web developers, written by us exclusively for our email subscribers.

The 10,001 Subscriber Challenge

And to make it a bit more interesting, we decided to create a challenge for us and our readers. Here’s the deal: the Smashing Newsletter will be published only if we get at least 10,001 subscribers. (The earliest we would send it out is next Tuesday.) So, it’s up to you to decide whether we should launch the newsletter. And you can help right away: just type in your (valid) email address, confirm the subscription (opt in) and you’re done!

Subscribe to Smashing Newsletter Now!

Email Address

Email Format

html
text
mobile

If the form doesn’t work in your RSS-feed reader, please view the article in your web browser. Sorry for any inconvenience!

Of course, you can cancel your subscription at any time. The Smashing Newsletter will always be free of charge. We respect your privacy: we will never give your data to third parties, and we will never spam you. You have our word.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

Join In To Win One Of Our Prizes!

Of course, we knew it wouldn’t be as much fun without an incentive, which is why we are giving away some beautiful gadgets and books to some lucky subscribers. The winners will be announced in the first edition of the newsletter (if we meet the challenge). And here are the prizes:

Wacom Bamboo Fun Pen and Touch (Medium)
The Wacom Bamboo Fun Pen and Touch is a unique device to harness your creativity. It’s perfect if you want complete control with a pen or finger tap input. It has single- and double-finger functions, supports left- and right-handed use and has an integrated pen holder.

Microsoft SideWinder X8 Laser Gaming Mouse
The ultimate wireless gaming mouse, with advanced tracking, 12 buttons (7 of which are programmable), scroll wheel with tilt and full-speed USB reporting.

Harman Kardon SoundSticks II Speaker System
The Harman Kardon SoundSticks II combines performance and an attractive visual design, a combination that always makes our hearts beat a little faster. It’s nearly perfect, save for a few design flaws.

Microsoft Arc Mouse Black
The Arc Mouse has the comfort of a desktop mouse and the portability of a notebook mouse. It folds to 60% of its fully expanded size for when you’re on the go. Two color options are available to match your style.

Last But Not Least, The Books!

Confessions of a Public Speaker, by Scott Berkum
Decoding Design, by Maggie Macnab
The Laws of Simplicity, by John Maeda
Smashing WordPress, by Thord Daniel Hedengren
Universal Principles of Design, by William Lidwell, Kritina Holden and Jull Butler

Please participate only once, and spread the word about the challenge to your friends and colleagues. Thanks, and let’s get this rolling, folks!

(al)

It’s Easy to Fall in Love with jQuery

A framework that condenses lines of clunky JavaScript into elegant, concise code is a temptation too hard to ignore.

This popular library has overtaken its competitors because it radically transforms how you perform animations, add Ajax interactivity, and integrate rich UI components into your website.

But while it all sounds great, too often people have no idea where to start.
If that’s you, your problem is now solved!

Earle and Craig have taken this complex and detailed topic and condensed it into a step-by-step guide that’s easy to use.

Introducing SitePoint’s first book of 2010:

jQuery: Novice to Ninja

by Earle (Mr Speaker) Castledine and Craig Sharkie

With this brand new book, you’ll master all the major tricks and techniques that jQuery offers. Even a fledgling web developer will be able to make jQuery work straight out of the box!

jQuery: Novice to Ninja is:

perfect for any jQuery user, regardless of whether you’re at the beginner, advanced, or somewhere in-between stage
relevant, being an up-to-date guide that thoroughly covers the latest jQuery, version 1.4
highly practical, offering out-of-the-box solutions that enable you to be productive immediately

Grab your own copy today so you can use your jQuery ninja skills to unleash some powerful jQuery of your own!

Improve Your jQuery Knowledge with the Source Viewer The jQuery source viewer is a great tool which allows...
How to Build an Auto-Expanding Textarea jQuery Plugin, Part 1 Auto-expanding HTML textarea boxes have become popular on many web...
jQuery 1.4 Released jQuery 1.4 has been released. Craig looks at the new...

jQTouch Makes Web Development on the iPhone and iPod Touch a Snap

jQTouch is described on the site as a jQuery plugin for web development on the iPhone and iPod Touch. But it’s more than just a plugin; its simplified development approach helps you create and theme the various screens of your web app and apply animated transitions between them.

It will help in all manner of ways, but app development using jQTouch is quick if you follow a simple recipe. You create a series of div elements (one for each screen in your application), give each one an id, and give the home screen the class of current. You then place an unordered list within the home screen div. In each list item you place an anchor tag with a href that links to one of the other divs.

With just that simple recipe jQTouch will hide all the divs except the home screen, and render your list with attractive gradients as the main menu. It’ll also wire up the tap action so that a tap on one of the list items will make the home screen slide off and the linked div element slide on. This is very similar to the style of the default menus.

It’s definitely worth checking out. Campaign Monitor revealed recently that they used jQTouch on their recent iPhone app, and there’s a demo on the jQTouch site that’ll also work in desktop Safari.

With RIM announcing that it’s developed a WebKit-based browser for BlackBerry devices, it’s probably not a stretch to imagine this library could eventually be used to develop for iPhone, iPod Touch, Android, and Blackberry.

UI Stencil Kit for iPhone App Designers iPhone interface design is über-cool right now, as is hand...
7 Reasons Why Developers are Deserting iPhone Apps Are developers being enticed away from bespoke mobile application development...
40 Essential iPhone Applications For Web Designers With an iPhone or iPod Touch, web designers can finally...

How to Name Your Business

Continuing with our series on starting a business, choosing a name can be one of the most important, exciting and stressful decisions you make during the start-up phase of business ownership. You want your company’s name to be unique and memorable, but you also want people to “get it.”

You have to make sure the name is not already being used by another company…and then there comes the whole domain name issue. You need a good domain name to accompany your business web site, and that can take some creativity these days.

So where to start? I boiled down the business naming process to five general steps, but of course, this can vary. Also note that the process is based on starting a business in the U.S.

Step 1: Put It in Black and White

Your first step should be to get the most important details, guidelines and goals down on paper so you can refer to them during the process. Some questions you should consider include:

What message do you want to portray?
What do you want people to think when they see your company name?
Do you want a name with an available domain name?
Does it need to be an existing word or can it be created?
Does the length of the name matter? If so, do you want a short name or a longer name?

Now that you have clarity on what you want your business name to accomplish, it’s time to get to work.

Step 2: Consider Your Business Structure

Your business name may be impacted by the type of business you form and where you live. For example, some states require that sole proprietors use their own name as their business name unless they file a trade name under a “doing business as” (DBA) filing. And if you incorporate, your business name has to include the words “corporation,” “incorporated,” “limited” or “company,” the letters “Inc.”, or “Corp.” or some other phrase that indicates that the entity is a corporation.

If you’re not yet sure what structure your business will take or how to decide on one over another, stay tuned…we’ll be covering this later in this series.

Step 3: Brainstorm

This step can be a lot of fun if you focus on your creativity and let the ideas flow naturally. Break down your brainstorm into these different focus areas and see what you come up with in each:

Variations with spelling
Words related to what you do and/or how you do it
Synonyms
Made up words
Words from quotes or other inspirations

This step should result in several possibilities, all options you like, but keep in mind that all may not work, depending on availability. For help with the brainstorming process, review this brainstorming series I wrote last year.

Step 4: Check for Availability

Once you have a few possibilities, it’s time to determine if the name is available to use. To see if a name is federally trademarked, use USPTO’s Trademark Electronic Search System (TESS). If your business is a sole proprietorship and you plan to use a trade name, check your state and/or county to make sure it’s not already in use.

If your business name is not available as a domain, you may need to use an abbreviation, hyphens, or an alternate top level domain (such as .net). Or, you may want to move down your list of possibilities to the next name if there is a better domain name available.

Step 5: Register It

A sole proprietor in the U.S. is required to register their DBA with either their state or county clerk (see above for a link to a state site listing). Corporations, LLCs, or limited partnerships typically register their business name when the formation paperwork is filed.

It’s not required, but you may also want to register your business name for a trademark, either at the state level or for federal registration if your business will operate in more than one state.

This post covered some of the basic actions required when you start to think about naming your business. My next post will get down to the nitty gritty and provide some tangible tips to help you find a successful business name.

Resources:

How to Name Your Business, Entrepreneur.com
How To Name Your Company, Carsonified
How to Register a Trademark for a Company Name, WSJ.com
Top 10 tips for choosing a business domain name, Bytestart.co.uk

Image credit: VinnyPrime

Announcing a New Series on Business Start-up Basics Alyssa starts a new series on the basics of starting...
To Be or Not to Be…A Business Owner The first step of business ownership involves self-analysis and an...
Four Steps to Developing a Business Budget A budget can be an effective tool to help you...

Feb 23^rd

How to Fix Missing TortoiseSVN File Status Icons in Windows

For many Windows-based developers, Subversion and TortoiseSVN is a great source control solution. It’s free, is regularly updated, works on most versions of Windows and integrates well within the OS. TortoiseSVN will be one of the first systems developers install after upgrading to Windows 7.

Tortoise normally shows an overlay icon on every version-controlled file to indicate whether it has been added to the SVN repository, is new, modified, etc. While it may not be absolutely essential, the overlay offers a quick view of the current project status.

Unfortunately, Windows Tortoise users can encounter an issue where the file overlays disappear. It’s not an issue specific to Tortoise and it can affect any application which adds several icon overlays. The problem is caused by the number of overlays permitted in different versions of Windows. Vista 32-bit appears to support 15 overlay types, whereas Windows 7 64-bit supports 11. Installing a program which adds its own icon overlays can therefore disable them in another application.

Windows registers 3 icon overlays (this may differ between versions). Tortoise registers another 9. Dropbox registers 3 and will re-install them if they’re missing when the application is restarted. So Windows 7 64-bit users will only be able to view Tortoise icons if at least 4 (non-Dropbox) overlay types are removed from the system.

Here be dragons!
The fix I’m about to describe involves tampering with the Windows registry. It’s dangerous and one false move could trash your Windows installation!

If you’re willing to take the risk, fire up the Windows Registry Editor (regedit.exe) and navigate to: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\ShellIconOverlayIdentifiers

Export the branch as a .reg file — this will allow you to restore the old settings should anything go wrong.

You will see the Tortoise and other icon overlay identifiers as sub-branches. You can delete unnecessary icon overlay types by right-clicking a branch and selecting Delete:

Choosing which overlays are unnecessary is your decision and will depend on your requirements. There may be overlays for applications you do not use or have uninstalled. I removed the TortoiseLocked and TortoiseReadOnly types because I rarely use those SVN facilities. You could also delete the lesser-used Windows Offline Files and SharingPrivate.

Once you’re done, reboot Windows and check whether the Tortoise icon overlays have reappeared.

The version of Windows you’re running will determine how many branches you need to delete. If in doubt, remove one at a time, reboot and check.

I hope that helps someone, somewhere. All comments welcome … let the sneering from Mac and Linux users begin!

How to Enable Windows 7 GodMode "GodMode" is a great trick that allows you to access...
Windows 7: the First Month Review, Part 2 In the second of a 3-part review, Craig looks at...
Why Windows 7 Will Revolutionize Your Browser Testing Finally, we can run IE6, IE7, IE8 and any other...

Shalom! Showcase Of Web Design In Israel

Israel is a young country with an old heart. It has been quickly built up over the last 60 years as an independent democratic Jewish state and is shockingly cutting edge for a country so new.

It is a tiny surreal sliver of land smack dab in the middle of the Middle East: a very European, modern civilization… just programmed to Jewish tradition. Israel has great weather, nice beaches along the Mediterranean sea, fresh and tasty food and a warm and friendly culture. It is home to historic holy sites of the world’s three major religions, and buses drive down streets whose stones are older than anything you’ll find in Europe.

Israeli design at its best: ILook, an Israeli street-fashion blog. The text on the left side says: “Send me a good picture of a hipster and win 300 bottles of Maccabi beer” (via Tal Sach).

It feels as if Israel has one foot in Silicon Valley and the other in ancient Canaan — with an undercurrent of Middle Eastern hospitality and culture in this already multi-cultural society. And yet, English is commonly spoken here because many Jews from all over the world immigrate here regularly (not to mention the thousands of tourists from around the globe who pour in for sun, falafel, nightlife and a dash of biblical archaeology.) In some areas, you hear as much Spanish, French, Russian and English on the streets as Hebrew.

Because of its small size and the everyone-knows-everyone effect of being a bunch of Jews, cabin fever (and completion of mandatory army service for the younger generation) drives Israel’s citizens out on frequent travels across the globe, to India, Asia, and South America. As a result, a unique mix of cultural discoveries abroad is woven into Israeli culture.

Tel Aviv is Israel’s most urban, chic city: the capital of all things sexy, secular and spiritual (in alternative ways to traditional Judaism.) You can read more on Tel Aviv’s unique soul in this article by Ehud Azriel Meir.

Much like many of Israel’s cities — hastily built and functional, yet poorly planned — such is the unfortunate state of most of the country’s websites. Most Israeli websites look unfinished, and they probably are. And Hebrew being a right-to-left language doesn’t help! Being victims of circumstance, Israeli Web designers cannot unleash their creative potential to make modern, usable working websites.

agadir, a Hamburger joint.

Even though some cutting-edge technologies are being developed right here in Israel — which is home to former hot startups such as ICQ (which became AOL messenger) and Intel (which is inside your machine… have a look!) — most business owners still putter around in IE6. Israel opened its first official Mac store only last year.

[By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best design blogs.]

What’s Unique About Israeli Web Design?

Here are some other issues that designers face here (and, I imagine, in most places outside the US, Canada and Western Europe):

Websites must work in legacy versions of IE (though IE6 is finally almost out). Israeli business owners emphasize this more than getting their websites to work in Safari or Firefox.
There is a strong liking for Flash-based designs… it must be a cultural thing.
Little value is given to Web designers (and those in related fields, such as copywriting — although marketers and SEO people seem to being doing okay), and many designers are not taking back their profession.
Clients care more about cost than usability and standards.
CSS-based designs are not standard, and many of the people responsible for hiring are not aware of it.
Big agencies are usually asked to make conventional designs, and although they do quite impressive branding work, the websites they turn out are behind the times. Because they are launched by such big companies, the websites succeed “in spite of themselves,” leading many to believe that this is the formula for wildly successful websites: for Agency X to do our website the way they did for Company Y.

The Lionways website.

Many entrepreneurs here believe that because they are smart and successful in tech that they know your field as well as their own. They think they can write English better than a US-born copywriter and can design better than a graduate of FIT. Needless to say, this can be frustrating for the person trying to build a new website for them.
Despite that, usability is starting to be demanded by many website owners, especially the genuinely intelligent tech companies, Web app providers and social media startups; hundreds of these are in Israel, mostly in English.
Israel is always a few years behind American and European trends and standards, and this is no different on the Internet.

The State Of Affairs

We spoke to key people in the Web design industry in Israel to get their point of view on the state of affairs.

Q: Do you find you have to convince and educate clients a lot to be able turn out the high-end websites that you do?

Arie Zonshine (Lionways.com): “Most people calling for a quote don’t really know what they want. It’s as if they are calling to get the price of an air conditioner. It doesn’t matter if they want a new site or a make-over of an existing site: they usually don’t have written specifications, they don’t know what kind of pages they want and they don’t have a visual concept.

“So, I have to guide them through a series of questions, maybe looking at a few sites together in order to understand their needs. Sometimes, their lack of knowledge leads them ask for functionality that would work against them in terms of SEO, for example. I usually don’t have to work too hard to convince them to do things the right way.”

Eran Pal

Q: Are clients surprised by how much you quote them? What buzzwords do you hear most from clients?

Zonshine: “Always! Naturally, customers want the best price and, unfortunately in most cases, are not aware at all of the time and work invested. It’s even more problematic with issues such as Web standards and browser compatibility, because these aspects of the work have no visual impact on the website and are difficult for the client to appreciate. [I hear] SEO, AdWords and Flash. Very few mention browser compatibility, Web standards, semantic mark-up or CSS-based design”.

Q: Approximately what percentage of Israeli businesses are into the new standards of websites written in XHTML and CSS, that are non-Flash and that use minimal JavaScript?

Zonshine: “The numbers are unfortunately very low. I would say about 5%. Maybe less.”

Alfred Gallery Exhibitions

Q: Why do you think most Israelis are into conceptual Flash designs that are hard to navigate, outdated and slow? Is this a cultural thing? Are more people waking up?

Zonshine: “In too many initial conversations with potential clients, I hear requests to make things ‘Move on the screen like in PowerPoint.’ Many Israelis forget that the inside is just as important as the outside, and that foundations are more important than a cool façade (i.e. a flashy home page with clever animation) that has nothing behind it. I do believe it’s a cultural thing: you can see it in many areas. The ‘great façade with no foundation’ combo is very representative of Israeli culture. You see it everywhere. However, I do believe that appreciation of quality grows with time, experience and knowledge. More and more people call in already understanding the disadvantages of a Flash-only website”.

Tower of David

Q: Arie, I notice in your portfolio that you still use Flash, though you seem to have found the middle road between Flash and usability. Please explain.

Zonshine: “Exactly. We wanted to make the point that cool and functional can work together seamlessly and are not contradictory. It was indeed an early decision that I took together with my partner Dana Ronen, who is responsible for the Flash programming on the site. We wanted to show creativity and Flash capabilities but also show that it can be done without compromising the accessibility, functionality and SEO of the site.

“So, on almost every page, there is a small or big gimmick in Flash, depending on the content of the page and its function. On the home page, the flying business card gets center-stage; similarly, on the ‘About us’ page, the laptop CD tray makes an exciting entrance. On other pages we wanted the client to focus on the content itself, so the gimmicks were demoted to a supporting role and, in most cases, done in Flash (e.g. the credit card terminal, the coffee steam and the compass) and in other cases in jQuery (e.g. the changing color stamp on the contact page)”.

Bee Creations Design Agency

Q: How does the fact that Hebrew is written from right to left influence your design work?

Zonshine: “If the site will be Hebrew, you just need to flip your way of thinking horizontally. In terms of layout, it means that the logo would be probably placed in the top-right corner of the page rather than the top-left. You also need to mirror the placement of elements on the page, because the visitor’s eye-tracking patterns are mirrored in Hebrew.

“The issue becomes more complicated when the site has both Hebrew and English or another left-to-right language. A good example of a dilemma that arises is a design that has a large background image, which I use quite often. When the background image cannot be flipped, it usually results in the logo and other elements being positioned on the “wrong” side of the page for one of the languages (Lionways is a good example of that). If, on the other hand, the image can be flipped, it’s much easier, as the Jerusalem Camerata site shows [see below] — the large violin image is mirrored on the English side of the site”.

Waltz with Bashir

Another example of this issue is Twitter, which scrambles any right-to-left tweets to an almost ridiculous degree. But again, Israel’s creative minds come to the rescue with Talker, a Twitter API-based… well, Twitter, except in Hebrew and right-to-left. Compare a Twitter Talker right-to-left account with a left-to-right account.

Q: How does Hebrew affect other aspects of Web design?

Zonshine: “First of all, a much smaller selection of safe fonts can be used for live text. Arial is probably the most common, followed by Times New Roman, Tahoma and Courier. That’s it, more or less. There aren’t any equivalents of Trebuchet, Georgia, Palatino or other fonts.

“Also, if the site has both Hebrew and English, choosing a font for titles and logos becomes much trickier, because you usually need to choose two separate fonts — for English and Hebrew — that work well together. The Hiddush logo is a good example of that. I spent hours searching until I found a close-enough English font (Anderson the Secret Service) that worked well with the Hebrew one (AgadaMF), and even then I had to clean it a little to match the other. A few font shops in Israel, such as FontBit, offer quality fonts that are designed to blend well in both Hebrew and English”.

“On top of all this, there are many technical problems with dealing with right-to-left texts in graphic elements, especially Flash components. Small and trivial things suddenly become an issue, such as the inability to control the location of punctuation marks, numbers and other symbols. Sometimes the only solution, as silly as it sounds, is simply to avoid certain characters, but this is impossible to control when dealing with dynamic content.“

Q: Do clients pay on time. And what is negotiating like?

Zonshine: “Negotiating is a part of Israel’s culture. People almost always ask for a discount. I almost always get paid on time”.

Uzi Shmilovici (co-CEO at Netcraft) adds: “A lot of the logos that are designed in Israel have English typography. So the question is, where should the logo appear on the site: the left side or the right side?”

Examining some of the biggest websites in Israel shows that this dilemma remains unsettled.

“The other issue”, Shmilovici continues, “is using English words and phrases (either quotes or special terms) in the middle of Hebrew sentences. They force users to change the direction of their reading, which affects the flow of the article and scanning”.

Israeli web design: Confederation House by bigdesign

Typography

Typography is one of the most interesting crafts related to Hebrew websites and design. While traditional Hebrew fonts are great for creating an ancient or holy atmosphere, Web designers face a big challenge in finding or creating modern (or even futuristic) fonts from an alphabet that was invented for one thing: Torah books.

Typography fans might be interested in the “Torah Scribe,” written by a person who handwrites Torah books and who follows a strict set of rules and guidelines. The slightest mistake makes the book un-kosher, and he has to throw it away and start all over again (which is why Torah books cost so much).

Another trend in Hebrew typography is nostalgic fonts from the early days of the state (the British Mandate). A great example is the Palestina font created by Oded Ezer (see image below), which is an effort to fuse an ancient typeface to a modern design.

Oded Ezer’s website is a great place to look for modern Israeli fonts and experiments in Hebrew typography. A leading Israeli typographic artist, Ezer also runs the blog Spare Type. If you are into typography (and who isn’t?), you must check out two works by Ezer in particular: Ketubah and Typosperma.

Any Israeli knows how hard it is to find beautiful fonts in Hebrew. Lucky we have Oded Ezer, a typographic artist, logo and type designer, lecturer and typographic experimentalist. His studio is located in Israel.

Fontef, Israeli font designers.

Ha’Gilda: Hebrew fonts

Interesting Solutions to Israeli Design Problems

Yotam Hadar redesigned nrg.co.il, Israel’s second-most popular news source and seventh most popular website. The old version had too many boxes, low readability and nowhere to focus the eye, not to mention unconventional and hard-to-use navigation. Since its redesign, the website has continually gained popularity (and the statistics show much longer stays), yielding more income and a smaller team on which to rely for maintenance. (The website was completed while the designer was working at Maariv, in collaboration with NRG’s design team, under chief designer Amir Hadad.)

Efficiency Is A Double-Edged Sword

In a 62-year-old country that is in a constant state of war, where every citizen has to join the army at the age of 18, efficiency (not to be mistaken for productivity or effectiveness) is almost sacred. It has been the most important quality in building this country, and it tends to be the most valued quality in any project. One could say, “It doesn’t matter if it’s good, as long is it works…” Sort of… Close enough. Thus usability, aesthetics and trends are ignored quite often, making the job of the designer secondary.

Another side effect of this harsh efficiency-driven attitude is the de-emphasis on a proper technological education. Because clients only demand that things “work,” standards, trends and aesthetics are the last thing on a developer’s mind. In turn, clients lack a real understanding of the media, which is why so many Israeli websites use Flash. The lack of variety of supported Hebrew Web fonts is also a factor. But fortunately SEO is creeping in and forcing even the most stubborn clients to ditch Flash for HTML and to replace images with live text as much as possible, which will hopefully push typography awareness to the next level.

ha’Sushia has an original navigation menu.

Adam Benayoun (CEO and co-founder of Lionite), puts it very well: “It is a technology-oriented market. A lot of Israeli companies don’t focus on the front end, design, UI, experience, because we are all developing and selling technology to the US.”

Lea Aharonovitch (a senior product manager at Answers.com and a UI/UX blogger) adds: “I would even go further to blame each and every one of us Israelis as consumers for not demanding higher standards from websites that prefer banner spots to design.”

“Just a quick look at some of the 130 Israeli Web 2.0 companies demonstrates how much creative types and services are trying to solve problems and foster new exciting ways to do more on the Web… If we support designers and let them show us what they can really offer, we stand a chance that the next ‘Made in Israel’ design article will boast about how Israel has become the cutting edge of intuitive and excellent user-centered design.”

Lea is also a former manager of UPA Israel (Usability Professionals Association), which recently initiated a series of usability reviews published weekly on Israel’s biggest news website Ynet (the equivalent of CNN in terms of traffic and importance), inspecting a different Israeli website every week.

Tel Aviv city budget

Q: What other setbacks against designers in Israel can you identify?

“Behind every Israeli designer stands a team of managers who just don’t get it,” says Aharonovitch. “Managers don’t think they can afford to offer simple, less monetized interfaces, so designers are required to add as many monetization elements as possible”.

Shmilovici: “Strong interactive companies lead clients to invest a lot of money in the media (where they have big commissions), and the result is usually less resources for UX and design (because the development part is a must anyway)”

Oded Ezer, whose work was featured earlier in this piece, give us a typographer’s point of view: “Conservativeness. Instead of relying on 3,000 years of documented culture and Jewish heritage, young designers are looking to modern European design for inspiration.”

Dinamo-Dvash

Local Influences

It’s worth mentioning that the second official language of Israel is Arabic, another right-to-left language with amazing appeal to typographers. But a whole other article would be required for that and for the question of why Israel has so few Arabic websites.

Shatil

Mossawa Center

Koloudtof. This website is Hebrew but influenced by local cultures. Remarkably, about 50% of Israelis come from Arab countries.

Let’s Turn To The Future

Web designers in Israel seem to have two choices: find work overseas, or deal with the conditions in Israel, which in most cases mean lower wages and having to dabble in print design and other unrelated design work. This is another reason why finding good examples of Israeli Web design is hard, because most of the work is done for European and American clients or, if done for domestic clients, just doesn’t compare to the quality of design overseas.

But as Israelis, we always look at the bright side and seek solutions. “Clients in Israel are just like clients all over the world,” says Adam Benayoun, putting as much of the blame on service providers. “We need to educate clients on the importance of design,” he says, advice that is as true of designers in Israel as it is anywhere else.

Baboo, a lighting boutique.

Lionite is a great example of Israeli creativity in business model and workflow. The Tel Aviv-based Web shop provides a complete solution for clients in Israel and overseas, combining development, design and even marketing. “Clients overseas prefer us because of our standards, not because of or despite of our being Israeli,” says CEO Adam Benayoun. “We believe you have to be good no matter where you are from, no excuses.”

Netcraft’s Uzi Shmilovici seems to agree with that philosophy: “Although Israel is not the cheapest place on earth, it is still cheaper than Europe and the US. That said, professionally, Israeli designers are definitely on par with European and American designers. Take those two facts together and you’ll understand why Israeli design gives you the best value for your money.”

Q: So, what do you think we have to offer the world in terms of style, influence, etc.?

Shmilovici: “I do think that some of our unique typography issues have led to some nice progress. Because the Israeli font inventory was weak, we had to come up with new fonts quickly. Some of those explorations, done by Oded Ezer for example, ended up in the MoMA.”

Oded Ezer

Aharonovitch: “Israel is considered one of most innovative nations in the world when it comes to technology. It’s hard to compete with our sense of creativity, our high level of adaptability and flexibility and our high skill level in problem-solving and other traits.

”While at times it may seem that we’re not organized or that our affairs are managed informally or that our processes are not well defined, these are our advantages when considering the Agile or Lean development method that has been gaining popularity recently. The last thing to mention is the emotional strength and maturity that many Israelis develop at an early age — mainly derived from growing up in as challenging an environment as the Middle East and serving in the army at the age of 18.”

Showcase of Israeli Web Design

Keoss Studios (warning: music is turned on automatically!)

Hayehudim, an Israeli music band.

Kid.org.il

Moran in the big city

The Red Sea Jazz Festival Website

The Wall, Jerusalem.

Quicheria, one of the many Flash-based websites in Israel (via Wix.com)

Terry Poison, electro-rock and roll band.

Duddi Hasson, Fashion photographer.

halas.am, Holon Art Lab Audio Service

shani bar, Fashion designer.

while you were away, Ben Ben-Horin.

hello supersize, Matty Marianski (Supersize), Motion graphics and interaction design.

The Jerusalem Camerata

The Red Sea Jazz Festival Website

Hydros

Israeli Designer Showcase

Those who are able to rise above the circumstances end up turning out top-notch websites. Some such stars are featured here.

Shual (meaning “Fox” in Hebrew) is a two-person team that churns out modern Web-standard websites. Its own portfolio is startlingly green. Aside from this neon-green page complete with fox howl, the team turns out such beautiful websites as the following:

Galia Offri

Art Focus

Netcraft does it right and sets a good standard. It is one of the leading agencies in Israel.

It designed this well-known e-commerce website:

Lionite is an Israeli agency with a unique approach to business.

It also created Octabox…

… and Cubicl.

Itamar Lerner is an Israeli-born graphic designer. He started working as a designer at 2002. In the following three years, he was employed by several design studios around Tel Aviv.

Adam Tal (a collaborator on this article) and the design agency Internetlife created the Gottagettofwa.com website.

Daina Reed is a freelance Web designer in Tel Aviv.

Inbal Pinto and Avshalom Pollak Dance Company created this beautiful, simple and artistic Flash website, which may be impractical for most in the real world.

Inkod Hypera

nucampaign offers great insight into the real Israel (as opposed to the Israel you know from the news).

Illustrators

Liron Tocker is a talented Israeli illustrator and icon designer who lives in Germany.

Mikimottes is commendable for his sketching of everyday Israeli scenery.

Asaf Hanuka worked on the art for the award-winning animated documentary feature film by director Ari Folman.

hoop: this is just about the end of our journey. If you wish to absorb more Israeli design, you should visit hoop.

You may be interested in the following related posts:

About the Authors

Daina Reed is a freelance Web designer and Web project manager in Tel Aviv.

Adam Tal is a Web entrepreneur who believes that code is poetry and design is music. Follow him on Twitter @adamtal, or check out his website.

Sara Eisen is a freelance writer, editor, journalist and “marcom” and Web content consultant. She blogs at http://the-word-well.com.

Also, this article wouldn’t have been possible without the contributions of Joey Simhon and Lior Yair of Netcraft, a digital agency in Tel Aviv that specializes in user experience and Web technologies. Special thanks to Avi Joseph, CEO of SmediaC for helping with the research for this article.

(al) (dr) (at) (vf)

Multiple Login Forms with Highlighting

This is a little specific… but I figured what the heck maybe it will be useful for someone. I recently had occasion to make multiple different login forms on a single page. With CSS we know we can apply styling to active inputs with :active. That’s useful… and we’ve covered how to do both input and label highlighting before. But now we need go one step up and highlight the current form itself.

HTML

Three blocks, each with a form:

<div class="login-block">
    <h3>Sharepoint Login</h3>
    <form action="#" method="post" target="_blank">
        <p><label for="sharepoint-company-name">Company</label><input type="text" name="sharepoint-company-name" id="sharepoint-company-name" /></p>
        <p><label for="sharepoint-user-name">User Name</label><input type="text" name="ftp-user-name" id="ftp-user-name" /></p>
        <p><label for="sharepoint-password">Password</label><input type="password" name="ftp-password" id="ftp-password" /></p>
        <p class="submit-wrap"><input type="submit" id="sharepoint-submit" class="button" value="Login" /></p>
    </form>
</div>

<div class="login-block">
    <h3>FTP Login</h3>
    <form action="#" method="post" target="_blank">
        <p><label for="ftp-user-name">User Name</label><input type="text" name="ftp-user-name" id="ftp-user-name" /></p>
        <p><label for="ftp-password">Password</label><input type="password" name="ftp-password" id="ftp-password" /></p>
        <p class="submit-wrap"><input type="submit" id="ftp-submit" class="button" value="Login" /></p>
    </form>
</div>

<div class="login-block last">
    <h3>Secret Area Login</h3>
    <form action="#" method="post" target="_blank">
        <p><label for="secret-user-name">User Name</label><input type="text" name="ftp-user-name" id="ftp-user-name" /></p>
        <p><label for="secret-password">Password</label><input type="password" name="ftp-password" id="ftp-password" /></p>
        <p class="submit-wrap"><input type="submit" id="ftp-submit" class="button" value="Login" /></p>
    </form>
</div>

CSS

The CSS isn’t particularly interesting. The forms themselves have a white border around them, and we set up a class that has a colored border. That class will be applied and removed with JavaScript, properly keeping style information out of JavaScript.

.login-block {
    float:left;
    margin:0 49px 25px 0;
    text-align:center;
    width:260px;
}

.login-block form {
    -moz-border-radius:15px 15px 15px 15px;
    -moz-box-shadow:0 0 10px #333333;
    border:3px solid white;
    padding:20px;
}

.login-block .active-form {
    border-color:#d09e6d;
}

jQuery JavaScript

The bit that makes this “work” is here. When an input is focused, it removes highlighting from all forms on the site, and adds it back to the form which contains this newly-focused input. Thanks to bartaz for pointing out that jQuery 1.4 now supports “focusin” and “focusout” events for forms, which fire when any input inside them is active. We can watch for that. When focusin fires, we’ll remove highlighting from all forms and add it back to the one that just fired the event.

$(function() {
    var $forms = $("form");
    $forms.focusin(function() {
        $forms.removeClass("active-form");
        $(this).addClass("active-form");
    });
});

Hey, does anyone know if there is a better way to write .parent().parent()?

Demo and Download

View Demo Download Files

MooTools 1.2 Beginner’s Guide Book

I have written a book with Garrick Cheung about the MooTools JavaScript framework called "MooTools 1.2 Beginner’s Guide" published by Packt Publishing.

It’s a book for beginning web developers looking to make interactive websites and web applications rapidly with the help of MooTools.

The book is formatted in a way that teaches you by way of practical examples that you can apply to real-world situations.

If you’ve read my tutorials here on Six Revisions, you can expect the same level of detail and clarity in each page of the "MooTools 1.2 Beginner’s Guide".

Writing the book was one of the best experiences I’ve had, and I hope that by picking up a copy, you’ll see the amount of passion and work I’ve put into it to help web development newcomers become familiarized with this amazing JavaScript framework.

The book has 9 chapters (you can see the complete table of contents here):

Chapter 1: MooTools and Me
Chapter 2: Writing JavaScript with MooTools
Chapter 3: Selecting DOM Elements
Chapter 4: The Core’s Useful Utility Functions
Chapter 5: Working with Events
Chapter 6: Bringing Web Pages to Life with Animation
Chapter 7: Going 2.0 with Ajax
Chapter 8: Beefing Up MooTools: Using the MooTools More Plugins
Chapter 9: Creating Your Own Plugin

The book is available as a paperback or eBook at Packt Publishing, or as a paperback on Amazon.com.

You can learn a lot more about the book by visiting the book’s product page on Packt Publishing.

Reviews

Aaron Newton, a MooTools core developer and author of MooTools Essentials (another book you should pick up) wrote a review of "MooTools 1.2 Beginner’s Guide" on his site, Clientcide:

Book Report: MooTools 1.2 Beginner’s Guide

Erik Hazzard of Quixotic wrote a book review of "MooTools 1.2 Beginner’s Guide", giving the book a 5/5:

MooTools 1.2 Beginner’s Guide – Review

Check out the reviews of "MooTools 1.2 Beginner’s Guide" on Amazon.com:

Amazon.com: Customer Reviews: MooTools 1.2 Beginner’s Guide

Questions?

If you have any questions about the book—or just want to talk about MooTool—you can pose your questions and thoughts in the comments below.

I’d love to discuss the book with you!

Buy it!

There are several places that you can purchase the book online—on Packt Publishing’s website, Amazon.com, and Barnes & Noble (where you can check your local Barnes & Noble if the book is in stock or order it for pickup), to name a few vendors.

Thank you

You’ve truly helped hone my writing skills throughout the years by continuing to support and read the site. You’re every bit an author of this book as I am, and for that, I want to thank you.

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in distance-learning education, front-end development, and web accessibility. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

SitePoint Search Now Powered by Google. Should You Use Them Too?

Regular visitors to SitePoint may have noticed that for a while, our search functionality hasn’t quite been up to scratch. Good news everyone! Those days are over.

The previous system was put together in a time when rolling your own search was one of a very limited number of options for a site like SitePoint (indeed, for many organizations with slightly different use cases, that’s still true). I don’t want to diminish the efforts of my predecessor developers here at SitePoint — they did a great job of stitching various SitePoint properties together using Apache Solr. Unfortunately, the rest of our codebase has marched on while the search functionality has stagnated.

Time for an update.

There is one undisputed king of search — Google. Rather than creating our own search engine — and implementing algorithms to rank content based on keywords, index all that content (there’s quite a bit of it!) and serve up results, we’ve partnered with Google to serve up search results via Google Site Search.

Google Site Search is a facility allowing you to create your own Google-powered and Google-hosted search engine (replete with refinements and promotions) and pull down the results to your own site as an XML document. You can then style the results or manipulate them in all sorts of fun ways (we pull the results down primarily to style them, but you could do some very neat presentational mojo if you felt so inclined).

If you don’t want to style the results in any special way, you can also use Google Custom Search Engine, the engine that powers Google Site Search. However, Site Search has some restrictions (and loses some others) compared to CSE. The differences between the two products are fairly nebulous — I’ve yet to find a blow-by-blow comparison between the two. The key points as I’ve uncovered them are:

Google Search Engine

For businesses who want more control over how search results are produced and displayed
Has a price tag attached (US$250 — US$2000+ per year, depending on your needs)
Doesn’t have to have Google branding or ads displayed
On-demand indexing
No option to host your own Context file (see below)

Google Custom Search Engine

For small businesses, not-for-profits and enthusiasts who want good search at low-to-zero cost
Completely free (within reasonable limits)
Must have Google branding and ads
Indexing at Google’s whim
You can host your own Context file (see below)

There were two big gotchas that had me chasing my tail while I was working on SitePoint Search and they’re closely related.

Firstly, Google’s documentation for CSE and Site Search is patchy. It’s seriously rough. There’s some features and restrictions that are, as far as I can tell, alluded to only on one line in the depths of an article on something else in the documentation. Other bits are seemingly only explained on the Custom Search blog. I’d even go so far as to say that some of the documentation on these products absolutely sucks. Google, please, clean up the documentation!

As a result of missing one line in the documentation, I didn’t realise that Google doesn’t allow Site Search customers to host their own Context files. These are XML files that specify what the search engine is to search, what to label sub-sections of that content, and how to weight some of those sections above others (among other useful options).

We wanted to weight, for example, our articles a little bit above our blogs on a typical search. If we had the ability to host our own Context file, this would be trivially simple. Alas!

The alternative was for us to generate a Context file and have a cron job post that up to the control panel. Kludgy, but testing showed it to be effective. Unfortunately we had some other weird special cases where we wanted to promote some results in special ways that conflicted with Google’s standard model, and this whole plan fell apart.

Instead, we’ve opted to do some (very light) parsing on search results once they hit our own servers to emphasise some results over others (it’s a very slight effect, and only for some arbitrary search terms, but it’s there).

I also discovered — mostly by trial and error — the more: and less: keywords. I can’t find much documentation on these anywhere (there’s one reference to ‘more:’ in the Custom Search Engine docs, and none to ‘less:’). I wrote a bit about it on my own blog, but the gist of it is — if you have refinement labels on specific parts of your site, you can return results only for selected refinements using ‘less:<refinementName>’. That’s how our select boxes for articles, blogs, products, etc. work. It’s effectively applying a BOOST +1.0 or BOOST -1.0 BackgroundLabel to a given subset of results, as near as I can determine.

Overall, I’d highly recommend Google’s search engine offerings to anyone needing to implement search for their own site — with the caveat that the documentation is going to baffle you in places, so you might have to ask a few questions to get things working the way you want. Google’s Search is extremely powerful and right darn complex — I still haven’t quite got to grips with it myself. It is, however, extremely powerful, lightning-fast, and insanely cheap for what you get.

Just to finish things off, we’ve also added OpenSearch links to most of sitepoint.com; if your browser supports OpenSearch (like Firefox and IE, for example!) you should be able to add SitePoint as a plug-in search engine, and quickly and easily search through our content with just a few clicks. (Thanks to Louis from Publishing for the suggestion on that one!)

I hope you enjoy SitePoint’s new search functionality. Our own testing has shown that it’s now much easier to find useful and relevant information on sitepoint.com, and I’d love to hear feedback from the community. We’ll be revisiting search again in the future and adding some new features — if you have any suggestions, I’d love to hear those too!

Microsoft Kumo Search to Take on Google. Again. Can Microsoft successfully take on Google with its new Kumo...
Evolution Of Image Search Continues With Google Swirl Google are currently previewing "Swirl" in Google Labs. Jennifer takes...
10 Tips for Conducting a More Effective Google Search How quick are you at the search box? Alyssa provides...

Feb 22^nd

Is There Any Point In Maximizing Compatibility In Photoshop?

This question, or really “what does it mean to maximize compatibility” comes up a lot in Photoshop classes when people start saving PSD files for the first time. When you save a PSD, Photoshop by default will ask you if you want to maximize compatibility by checking a box. Most people on first sighting of this message box, tend to wonder what that actually means.

Well the reason why this box comes up is because Photoshop is offering you some backward compatibility. Let’s say for example, you have Photoshop CS4 in work or in the classroom and you have Photoshop CS at home and you want to bring those work files home. Everything you do in the Layers palette needs to be saved with the file. Newer features in CS4 won’t be understood by an older version, so by maximizing compatibility you can make an attempt at having your Photoshop files open on two different versions, so it can be worthwhile.

Part of the problem however, aside from the nagging message box every time you save a new PSD (it only asks you the first time you save), is that as well as saving your layered PSD, Photoshop adds a hidden flattened layer to your file. This obviously makes the file size bigger which is not good new if you’re saving lots of PSDs.

Here’s a simple example to show you how much bigger the file size can be. Below you can see an image consisting of two layers, brown paper on one layer and text on another, no background layer. What you can see here is the actual size. When I save this with Maximize Compatibility checked the file size is 1.68 MB. When I make a duplicate and save it with a new name and turn off Maximize Compatibility the file size is 0.98 MB. That’s quite a bit of unnecessary bloating when compatibility isn’t really required.

So how do you fix the problem. Well if you’re sure you don’t need compatibility between Photoshop versions (and most people won’t if they only have one copy of Photoshop), then you can change your preferences and completely skip the nagging screen.

Choose Edit > Preferences > File Handling and change the "Maximize PSD and PSB File Compatibility" from the default of "Ask" to "Never". Photoshop will stop asking you every time you save a new file.

If you know for sure that you do need compatibility but don’t want to see the nagging message box, set this preference to "Always" and Photoshop will save with compatibility every time without asking you.

So hopefully you’ll find that little tip useful. It can mean a big saving on file size which is good not just for your hard disk, but also in the amount of time it takes to open the file.

Do you normally maximize compatibility when saving layered files or do you uncheck the box?

Photoshop Web Graphics Tips Jennifer shows you three tips to help speed up your...
Optimizing Images For The Web With Photoshop Jennifer looks at how to optimize your images for the...
Five Photoshop Layers Speed Tricks Jennifer shows you five quick tricks to speed up your...

40 Creative Navigation Menus

One of the first things to do when planning out a new website is to work out all of the content that will be in the site. You then divide that up into sections and then into various levels of navigation.

The result is a boring list of links.

That list of links is one of the most important part of your website though, it goes without saying that every visitor to the site will be using them to get around.

In this post we’ve pulled together some of the best designed navigation bars (both horizontal and vertical) to help give you ideas to enhance your own.

Horizontal Menus

1. Fabric London

A beautiful minimalist menu with fast colors and a compact design.

2. Nopoko Graphics

Sleek looking tabs with drop shadow and a beautiful background pattern.

3. Culture Code

iPhone style menu for an Iphone app.

4. Box Wish

Simple, compact and sleek.

5. Mac Rabbit

Light colors and creative symbols make this menu stand out from the crowd.

6. Kyan Media

Solid colors and simple MouseOver effects make this menu pretty.

7. Loodo

A nice multi-colored menu. The tiny green car indicates the current page.

8. Firestone Live

A beautiful black and white themed menu with block fonts.

9. Matt Maxwell Design

A simple menu with beautiful contrasting colors.

10. Cognigen

Another simple, light-colored design with unique tabs.

11. Black Book Mag:

A black-and-white menu with a transparent effect.

12. Agachi

A simple multi-line menu with soft blue colors.

13. App Storm

A classy example of a minimalist multi-line menu.

14. Built By Buffalo

Wide tabs and simple fonts give this menu a pretty sophisticated look.

15. Clear Left

Another multi-line menu with a great color scheme.

16. Fashion Photography

A truly dynamic menu. A thumbnail pops up every time you hover on a menu item.

17. Mia and Maggie

A cool multi-line menu with the traditional underline effect.

18. Michael Austin

Wide tabs and simple colors.

19. Mint

Another wide-tabbed menu with a transparent effect.

20. Rockatee

Refreshing use of numbers with each menu item.

21.Ronny Pries

Chalk-on-blackboard effect makes the menu casual yet creative.

22. Royal Caribbean

Another great menu with elegant fonts and nice contrasting colors.

23. Small Stone

A really creative and unique menu for a DJ.

24. Sohtanaka

Pretty colors, elegant fonts and light effects.

25. The Resume Girl

Another creative menu with a nice casual look.

26. Sky Larkin

Each item in the menu is of a different color when you mouse over it. Really creative and fun.

27. Web Designer Wall

Another casual sticky-note style menu.

Vertical Designs:

28. Surfstation

One of the most elegant menus. Nice use of bullets in a minimalist design.

29. Alex Cohaniuc

An expandable vertical menu with lots of colors.

30. Carbonica

A casual arrow and a circle indicates the current page. The casual font also adds to the beauty of this menu.

31. District Solutions

Every item in this vertical menu turns a different color when you mouse over it.

32. IipVapi

A black-and-white vertical menu in the shape of a post card.

33. Intereactive

An elegant, multi-line vertical menu.

34. Power To The Poster

Sophisticated fonts and a transparent effect make this menu stand out.

35. Jeff Sarmiento

A colorful menu with extra large fonts and symbols.

36. McAllan Ridge

Another multi-line menu with a nice textured background.

37. Nando Designer

A casual menu with a notebook effect.

38. Pixel Media

Simple and elegant.

39. Nick Ad

A highly dynamic menu with great effects and contrasting colors.

40. Nocturnal Miami

Another vertical menu with a transparent effect.

Your Favorite Menus

Every site on the internet has its own menu, which means it’s simply impossible for us to even come close to finding all of the amazing menu designs out there.

What sites have you visited with a menu so nicely done, that you actually paused to look at it?

This group is pulling updates from:

rss json

« Previous 1 2 3 4 5 6 7 8 9 10 11 … 28 29 Next »

Some Random Dude's Latest Updates From "appreciation"

Header

More Examples

Post Headlines

More Examples

Navigation

More Examples

Archives

More Examples

Site Search

More Examples

RSS Subscribe

More Examples

Post & Comment Styling

More Examples

That is a wrap

Websites vs. Web Applications

Different Types of Web Applications

First, Know Your Users

How to Identify Users?

Design Process

Sketching

Prototyping

Testing

Design Principles

No One Likes Surprises

Users Should Be Able to Be Efficient

Help!

Can’t Get No Satisfaction

Other resources related to UI design:

Essential Components Of Web Applications

Web Forms

Master-Detail Views

Dashboards

Heavy Use of Tables

Reports

Don’t Forget UI Design Patterns

Case Study: Online Banking Application

Final Thoughts

12 Reasons You Need a Facebook Fan Page

5 Easy Steps for Creating a Facebook Fan Page

Hints in Web Forms

Alignment of Labels

Labels inside Inputs

Dynamic Hints

Data Validation in Web Forms

Server-side Validation

Client-side Validation

Real-time Validation

The Good, the Bad and the Ugly of Web Form Validation

The Good

The Bad

The Ugly

Validation Responses

Colour

Positioning

Using Icons and Visual Cues

Other Styling Techniques for Validation Responses

Web Form Validation Response Messages

Sticky form information

Don’t Use Alert Dialog Boxes for Validation Responses

Don’t Use Error Pages for Validation Responses

Examples of Good Forms with Hints and Validation

Conclusion

Related Content

About the Author

About the Book

How to Enter for a Chance to Win

Giveaway Details

Related Content

About the Author

Are Search Results Fair?

Are Advertising Costs Fair?

Snippets.app button

Copy to Clipboard

Coda and TextMate

Seem to work OK?

Macity Mac Mac Mac

The 10,001 Subscriber Challenge

Subscribe to Smashing Newsletter Now!