When we launched this little website over six years ago, we wanted it to serve one specific purpose: to deliver valuable, reliable, practical insights to people who were building websites just like we were. Time has passed, and many things have changed, yet our deep commitment to this initial idea has never been stronger.

It’s with this commitment that we are proud to announce our new undertaking, a little extra that will help us make your reading experience on Smashing Magazine better, cleaner and more valuable in every way. Meet The Smashing eBook Library, an annual eBook subscription for our very own Smashing eBooks.

The Smashing eBook Library

Web design is an ever-changing industry, and to keep getting better at your craft and stay up-to-date with what’s going on, you need to invest a lot of time and effort in getting reliable, good quality content. Wouldn’t it be great to receive the most valuable and useful eBooks on the best design practices and coding techniques automatically every month? Well, grab a seat—we’ve got quite a sweet deal coming your way!

The eBooks contain thoroughly edited and curated ad-free articles written by our well-respected authors—already published on Smashing Magazine or written exclusively for the eBook. We guarantee to deliver at least 24 quality eBooks a year. Even better—you can vote on the topics that you’d like to learn more about, and we’ll prepare eBooks that fit your needs best!

You’ll receive all new Smashing eBooks (at least 24) released during your subscription period automatically in your personal dashboard. This includes not only our regular Smashing eBooks but also digital versions of our upcoming printed books, and only costs $99 (€89) a year — it’s just two coffees a month.

Special Offer: The subscription costs $89 (€79) until the 6th of December 12:00 CET!

With the Smashing Library subscription, you will be able to:

• Immediate unlimited access to the complete Smashing Library with all published Smashing eBooks, including digital versions of the printed Smashing Books 1, 2, 3, 3⅓ (Check the overview of 36 eBooks included in the subscription).
• Vote on the upcoming Smashing eBooks and topics in the magazine;
• Get all new Smashing eBooks automatically in your personal dashboard—including the digital versions of all our upcoming printed books (e.g. Smashing Book #4);
• Download the Photoshop/Illustrator/Fireworks Bundle immediately upon subscribing;
• Receive all eBooks in all formats: EPUB, Kindle, PDF;
• Save up to 30% off the regular eBook bundle prices.

Sign up!Great eBooks for great Web designers.

Available And Upcoming eBooks

Our eBooks are written by experts in the industry and go through a comprehensive quality review check by invited professionals from the industry. They contain both already-published and exclusive articles from Smashing Magazine’s well-respected authors and experts: Christian Heilmann, Paul Boag, Addy Osmani, Bruce Lawson, Rachel Andrew, Andy Clarke, Aarron Walter, Mike Rundle, Susan Weinschenk, Dmitry Fadeyev, Tom Giannattasio, Marc Edwards—just to name a few.

The eBooks will be useful for both beginners and seasoned professionals. The content is primarily intermediate and advanced level, but the eBooks cover basics as well. On average, each eBook has 20,000 words (or 175 pages in PDF).

Already Available eBooks

Here is a brief overview of already available Smashing eBooks. You can find more details by clicking on the titles that you are interested in.

Upcoming eBooks

We’ve got the following line-up of eBooks coming up in the next months:

Sign up!Great eBooks for great Web designers.

Getting Started

Getting started is easy. Just choose the subscription of your choice, proceed with the checkout and find your eBooks in your personal dashboard: that’s also where you can suggest and vote on the upcoming eBook titles as well as topics in the Smashing Magazine. New eBooks will be available for download automatically at the end of every month. You will be notified about new eBooks via email, of course.

We’re working hard on the new topics and are proud to be able to start you off with the recently released Photoshop/Illustrator/Fireworks Bundle—that’s three brand-new Smashing eBooks to get started with.

Why Subscription Model?

Smashing Magazine is and has always been free and independent, a publication deeply committed to quality work and professionalism in the best interests of the Web design community. We are proud of our thorough editorial work, based on principles that are postulated in our Publishing Policy. We don’t take the efforts of our contributors for granted. Every contribution deserves credit and respect, care and attention, acknowledgement and honorarium—which is why everybody involved in the editorial process always gets paid for their work, whether they want it or not.

Of course quality work doesn’t come at a cheap price. You know it, and so do we: Smashing Magazine strongly relies on the page impressions that its articles generate. At times, this reliance can collide with the editorial principles and guidelines that every Smashing Magazine article has to follow.

Smashing Magazine’s thorough Publishing Policy clearly states the rules and guidelines of our editorial work. We never publish sponsored articles or paid content; all ads are always clearly marked as such.

We want Smashing Magazine to be all about you. We want to provide a better and cleaner reading experience on the website and we want to invest more in new formats and sections—practical guides, case studies, tests and benchmarks, new regular columns and Q&A, expert advice for newcomers and many others. We want to further improve and enrich the content in the magazine and deliver more valuable content available for free for everybody to use and learn from. And this is where we could use your help.

We never accept donations or gifts, but we produce printed books and eBooks that help us stabilize the financial viability of the website while delivering value to our customers at the same time. By offering you a valuable product, we hope to provide a tangible value for the money you pay when purchasing our products. And before you ask: yes, Smashing Magazine will always remain free. And with your help we want to make our little publication as smashing as we know it can be. How? Well, with the Smashing eBook Library of course.

Why Should You Sign Up?

The eBook subscription has many advantages:

Further your knowledge with quality eBooks!
Receive the most valuable and useful articles on best design practices and coding techniques automatically every month. Web design is an ever-changing industry, so if you want to learn how to get better at your craft and stay up-to-date with what’s going on, learn what techniques are emerging and what practices are changing, the Smashing Library is just what you are looking for.

Decide on the topics of the next eBooks.
With the Smashing eBook subscription, you’re more than just a customer—you are a part of the Smashing Team. You can vote on the topics of the upcoming eBooks and suggest topics that you’d like to see covered next. You will also be the first to receive access to all new Smashing eBook publications—up to two weeks earlier than everyone else.

Save up to 30% off the regular eBook bundle prices!
You can save almost 30% on the eBooks with the subscription compared to buying each eBook bundle separately. Not only does it save you money, but it also saves you valuable time since you get everything in one swoop! It’s worth it—we care about quality content, we care about best practices and we care about delivering the most useful and valuable insights to you.

Immediate access to brand new eBooks.
You do not have to go through the check-out process for every eBook you would like to have—just log into your personal subscription dashboard and discover the latest and greatest bundles ready for download! The eBooks do not contain advertising and are DRM-free—available in PDF, EPUB and KINDLE formats. The best content, for the best price—just waiting for you to be downloaded onto your iPad, Kindle or any other eBook reader.

You support Smashing Magazine.
The high quality of the content on Smashing Magazine is held at the heart of what we do every single day. We’d love it to be only about the content for you, dear reader, not about the page impressions that articles generate. By subscribing, you help us stabilize our revenue which we need in order to operate on a long-term basis. We are dedicated to making your reading experience on Smashing Magazine better in every way—calm, convenient and user-friendly—day by day. We sincerely appreciate your support.

Sign up!Great eBooks for great Web designers.

If you are interested in corporate or educational licenses or have any questions, please feel free to ask us on Twitter or via email—we’d love to help you out. We sincerely appreciate your support.

FAQ & Support

Of course, you don’t need an eBook reader to read the eBooks—you can read the PDF version on your computer, but the EPUB and Amazon Kindle formats for your eBook readers or tablets are available as well. We’ll renew your subscription automatically at the end of the year so you won’t miss any eBooks, but if you decide not to continue, just cancel the subscription at least four weeks before the end of your subscription.

Don’t worry: you’ll still have access to your eBooks after the subscription is cancelled! You can always change your preferences in the dashboard. You can find more details in the Subscription Terms and Conditions as well as in our Smashing Library FAQ.

© Vitaly Friedman for Smashing Magazine, 2012.

  

Twenty minutes after unboxing my first iPad, I realized this device’s potential to revolutionize the world of kiosks. Ten years ago, my team and I worked with Honda to develop touchscreen kiosks for its dealerships. Potential buyers could customize their purchase with a few touches of their fingertips. While innovative at the time, these early interactive kiosks didn’t come cheap, running Honda $3,000 to $5,000 per installation. Today, we can create such a kiosk for a fraction of the price.

Which industries are the most likely candidates for tablet kiosks? Four that immediately spring to mind are hotels, restaurants, museums and retailers. Kiosks help streamline information-gathering processes, such as signing up for mailing lists, making reservations, ordering products and services and checking in and out of locations. By automating these processes, the kiosk eliminates the customer’s frustration from waiting in line to speak with a representative and, likewise, frees the employees to focus their energies on higher-level tasks.

Recent consumer-privacy laws put limits on the data that retailers may capture during a transaction. For example, a recent California ruling forbids the process of “reverse appending” by ZIP code. Kiosks give the retailer a second chance to collect customer data, away from the cash register. A privacy-savvy customer might balk at providing their personal information to a cashier at the time of purchase and yet be willing to enter the same information at a kiosk for a contest or discount. Success depends on having an appealing interface that encourages interaction.

Step 1: Hardware Considerations

Obviously, your client will need a tablet for this project. We’ll focus on the iPad here because it is what most of our clients choose, but other platforms such as Kindle Fire could also be used as kiosks. Whichever device you choose, consider how to secure the tablet so that it doesn’t disappear! We developed a device that securely mounts an iPad to a wall, counter or desk (we called it Padloc). Remember that physical security is key; an unsecured tablet is an attractive target for thieves.

iPad securely mounted with a Padloc.

Step 2: Software Considerations

This step is optional. Perhaps your client simply wants to display their website or use a third-party app. In our experience, however, a customized interface can make or break the user experience. We recently worked with a client to develop a simple interface for gathering email addresses in exchange for special offers. Here is the process we followed:

1. We decided to create a Web app rather than a conventional app, thus bypassing a potentially lengthy and complicated submission and approval process through the App Store.
2. We picked the device to program on (in this case, the iPad). This was important because, knowing we would be using mobile Safari, with all of the interesting little nuances available for it (through HTML5 and CSS3), we were able to streamline production.
3. We designed an interface that was visually striking, intuitive and compliant with interface guidelines (including those related to the on-screen keyboard, viewport size and touchscreen conventions). (Apple has some great resources for developers, such as its “Human Interface Guidelines.”)
4. Because we were working in mobile Safari on the iPad, we were able to program some cool features into the Web app. But these came with restrictions, such as:
   • The features would work only in portrait orientation,
   • The Web app had to be saved to the iPad’s home screen and launch from there,
   • All links in the Web app would open in a new browser tab.
5. We also made some other tweaks:
   • Hid the browser chrome (URL bar and buttons) using <meta name="apple-mobile-web-app-capable" content="yes" />;
   • Created a bookmark icon for the home screen and linked to it using <link rel="apple-touch-icon" href="/path/to/icon.png" />;
   • Set the color of the status bar (the options are black, gray or black translucent) using <meta name="apple-mobile-web-app-status-bar-style" content="black" />;
   • Made all events “touch” events, as opposed to “hover” events, to accommodate the limitations of the touchscreen.

Do Clients Really Want This?

What is the current demand for touchscreen tablet kiosks? We recently conducted a survey of our existing and potential clients; 89% indicated that they would use a touchscreen for a kiosk, and the iPad was the tablet of choice for 84% of them.

The results of our survey

Pretty eye-opening, eh? We also asked survey participants to identify the biggest factor affecting their decision to move forward with a kiosk (choosing from 10 options, ranging from price to screen size to operating system to security options). Price was most important for 41% of respondents, with screen size coming next at 18%.

Interestingly, a majority of respondents chose the iPad, yet also mentioned price as their top concern. This suggests that lower-cost entrants to the market (such as the Kindle Fire) are well positioned to gain market share and become viable candidates for these kiosk projects. Our survey shows a strong desire for kiosks, and the price barrier has been removed with these low-cost tablets!

A Bright Future With New Possibilities

In addition, a wide array of hardware is constantly emerging, creating previously unimagined possibilities. Consider Square’s reader. Plug this tiny device into the headphone jack of your iPad, download the app, and you’re ready to take credit-card payments. Now, add a locking mount, install it anywhere in your store or in your trade-show booth, and you’ll have the best-looking, quickest-to-set-up cash register you’ve ever seen!

iPad mounted with a Square reader to accept payments.

As more advanced devices are introduced to the marketplace, the traditional limitations of kiosks are being surmounted. It’s time for us to think outside the box and imagine a new future for low-cost tablet kiosks!

Conclusion

The clunky, expensive kiosks of yesterday are becoming irrelevant in today’s world of elegant low-cost touchscreen devices. Whether clients want to capture email addresses, enable customers to sign up for events in the store or add interactive elements to their artwork, a touchscreen kiosk can deliver the results they’re looking for. Tablet kiosks can be integrated into any decor smartly and sleekly. Now that affordability is no longer a factor, you can start working with clients to develop apps that bring imagination back to their business solutions.

(al)

© Jason Mark for Smashing Magazine, 2012.

  

Everyone loves a happy ending: the hero slays the dragon, true love conquers all, the Death Star is destroyed, the new website is launched and both client and users alike are thrilled. While this last example may not have the Hollywood ending that the first few examples do, for those of us in the Web design industry, it is the story ending we want for all our project.

Much attention is given to how you kickoff projects, or how best to design and develop websites. But the final stages of the Web design process are never discussed as much as those early and middle stages are. How you wrap up a project, as well as what you do after the project is completed, is critical when it comes to building long-term relationships that will lead to future business.

In this article we will look at some ways in which you can end projects on the right note, and also what you can do after they are launched to help your project stories have happy endings (and many successful sequels).

We want a fairy tale ending for all our project stories – (Image: ZeRo’SKiLL).

Avoiding Unhappy Endings

Before you can create a happy ending to your project’s story, you need to make sure you do not create an unhappy ending. Oftentimes, when a project goes bad, it happens in the final stages of the process. There are a variety of reasons why this happens, but a few easy ways to avoid some of these common pitfalls.

• Address issues as they happen — When a problem arises, discuss it with your client immediately. We often avoid issues (such as a bit of scope creep, or something taking a little longer than expected) hoping that we can “make it up at the end.” We do this so we can avoid having an uncomfortable discussion with our clients about change orders and increased budgets.

  This is a nice sentiment, but it usually does not work out. Budgets don’t magically grow at the end of a project to compensate for overages earlier in the process. If you wait until the final stage of an engagement to address a problem, your client will feel blindsided by the news coming at that late hour, instead of being able to handle the issue when it occurred. One way or another, you will need to discuss the situation with your client, but if you do it later rather than sooner, you risk leaving them with a negative final memory of an otherwise successful project.

• Planning a website’s launch — The date of a website’s launch is usually planned very early in the process. Other times, that launch date is more flexible and is determined as the project nears completion. In either scenario, preparing for the launch of a new website is extremely important.

  Regardless of testing done prior to a launch, last minute issues discovered after a website “goes live” are certainly not uncommon. Preparing for the launch means that you take a look at website analytics to determine the best time (based on website traffic) to make the changes needed. You want to find a time that will have as little impact on business as possible as these changes are made. You also want to ensure your team is available and ready to resolve any issues that may arise. Whether the date of the launch was determined well in advance or more recently, as you firm up those launch plans, you want to make sure you have the appropriate personnel on hand for that launch.

  By preparing to quickly address unexpected issues, you minimize chances that a small problem will turn into a large one, resulting in downtime, frustration, and that aforementioned negative final memory.

  
  Planning for a website’s launch ensures your team is on hand to handle any issues. (Image: Pedro Vezini).

• Dealing with the money situation — Very few of us enjoy talking about money and payments with clients. It is an often uncomfortable (yet necessary) part of our jobs. Whether your contract calls for your project to be paid in full prior to the launch of the new website, or if you make other arrangements with your client, problems with payments are one of the quickest ways to turn a good relationship into a strained one. There is no secret formula for handling issues with payments, just some common sense rules you can follow to minimize any damage that outstanding money concerns may affect your client relationship.

  This includes discussing the payment terms and your expectations at the very start of the process, getting everyone in agreement on. It also includes giving clients ample time to pay any invoices and being respectful (and as accommodating as possible), when something does not go according to plan. Financial issues can cause a strain on any relationship, client or otherwise. How you handle those strains can either damage (or strengthen) that relationship.

Leaving A Lasting Impression

First impressions are important, but lasting impressions are just as crucial. Just as a few mistakes at the end of the process can cast a pall over an otherwise successful project, a really great and memorable end to a project can turn an engagement that was unremarkable into one that clients will enthusiastically share with others. Here are a few simple ways you can leave your clients with a very positive, final memory of their experience:

• Send a token of your appreciation — It seems so basic (and it really is), but it amazes me how rarely we take the time to show our appreciation after a project is completed. This isn’t unique to Web design. When was the last time a company you hired to provide a service went out of their way to thank you after the work was completed and paid for? It doesn’t happen very often — which is why it will have an impact if you do it.

  Your “thank you” doesn’t need to be extravagant to be effective. Some companies you work with may even have a policy against “gifts.” One of my favorite ways to show appreciation at the end of a project is quite inexpensive and very simple — sending a handwritten note, with a personal message, for the client. I also like to have others in our organization (including people who didn’t work on the project, or have any interaction with the client at all) sign the card. This shows how important their business is to the company — the entire company, not just the few of us that they’ve worked with so far.

  The main thing here is to show the client that, even after their project was completed, you were thinking of them. The handwritten nature of the note shows that they were important enough for you to take the time to recognize them in a personal way (instead of just sending a standard “thank you for your business” card or email). Simple, yet effective.

• Celebrate the launch — A celebratory event of some kind is a great way to cap off a project. Again, this does not need to be elaborate. The “party” could simply be a breakfast or lunch for the client and their employees to introduce them to the new website. Doing this not only shows your appreciation, it also gives you some time with a larger segment of the organization. It allows members of the company who may not have worked directly with you on the project a chance to connect with you and ask any questions they may have about the new website. In some cases, a project may actually warrant a bigger party.

  If the new website is part of a larger initiative (such as the launch of a new company, or a big change in that organization), then they may already be planning an “open house” type event. Ask your client about their plans, and if they are intending to throw a party, request to be involved. Being involved in this party is great for you, giving you exposure to all the attendees in a very positive way — but it is not only a self-serving request. I have found that clients love it when you ask to be involved. They truly appreciate the fact that you care enough to want to be a part of their event and they like the idea that someone who can speak for the technical side of the project may be included in the festivities. It’s really a win-win situation.

  
  Celebrate the launch of a new website and end the project in a memorable way. (Image: SimonWhitaker).

• Share with others — Clients are often very proud of their new website and are eager to show it to others. As such, they will be very appreciative when you help them spread the word of that new website.

  As long as your contract allows you to do so, you can help raise awareness of the new website by blogging about the project or sharing lessons you have learned during its creation in articles that you author. You can also share it with the Web design community through websites like dribbble or others social networks you use to communicate with your peers or your friends. You should also be on the lookout for the occasions when others talk about or share the new website. If the website is recognized in one of the many online Web design galleries out there, be sure to point this out to your client.

  Seeing this type of recognition from outside sources is a great way to remind them of the successful process and positive results of your project with them.

• Refer some business — Another simple way to do something positive for your client after a project is completed is to refer them some business. One of my favorite things to do is to identify two clients of mine who may be able to help out each other with the services that they offer, and to make a connection between the two. Schedule a casual lunch to introduce the two companies and you will not only be able to make business referrals for each of them, but you will also get some time with both of those clients under very positive circumstances. This process of referring business and connecting with clients after the project is completed is a perfect segue into this article’s next section — how to build long-term relationships with your clients.

An Ongoing Relationship

The best source of new business for your company comes from your existing clients. It is much easier to work with organizations that already know and trust you than it is to sell your services to companies you have never engaged with before. As such, a process to connect with your existing clients on a regular basis can be very important to your long-term success.

As a project is wrapping up, one of the final things you should do is schedule a follow-up meeting — or better yet, a series of follow up meetings (to review the website post-launch). Regularly scheduled meetings between you and your client allow you to discuss not only how the website is performing and what feedback they have received from their audience, but also what changes may be happening with their company (or what changes you are seeing in the industry that they may need to be aware of). It is a rare instance that I sit down with a client to discuss their business where some kind of work doesn’t come out of it. This is the value of long-term relationships and being a trusted partner to their business. When you help them identify business needs, and can help offer solutions for them, you are more able to develop new business for yourself.

So I don’t give the wrong impression here, let me be clear — even though there is a sales element to these meetings, these are not sales calls. I have long trumpeted the value of creating real relationships with your clients, and these follow-up meetings are part of that process. This is less about selling them something and more about having a conversation to determine what they may need, and how you can continue to help their business succeed.

Clients Spread The Word

Another great way to get new business is through word of mouth, and the words that come from the mouths of your clients carry lots of weight.

Clients talk to others about their website and the company that helped them build it, so striving to forge a good relationship with them will result in more leads for you.

Clients talk to others about you and the work you have done with them. (Image: lawgeek).

You can also encourage your clients to talk about the work you did for them by asking them for a testimonial as soon as the project is done. Even if you don’t use testimonials on your own website, asking your client to provide one (or asking them to act as a reference, or provide a recommendation on LinkedIn) allows them to verbalize their experience with you and your company while it’s still fresh in their mind. The process of writing it down will also help them commit it to memory. Later, when someone asks them who did their website and how their experience was, the positive comments they wrote will come to mind and you will get a quality referral.

Your Work Spreads The Word

Your clients’ websites can also help spread the word of your services if you add a link to your website at the bottom of theirs. This practice of “signing” the website is a bit controversial. I have heard passionate debates from both sides of the argument as to whether or not it is appropriate to add a “designed by” link to a website, one that you were paid good money to create. In fact, for many years I felt it was wrong to do so. What changed my mind was two things:

1. I saw many other Web design agencies, both big and small, doing this on the websites that they had developed. Many of the agencies I saw doing this were ones that I greatly admired and whose teachings and examples I had followed in many other aspects of my work. I decided to also follow in this and give it a try with my own projects. This led to the second reason why I changed my tune on this practice of signing websites…
2. The company I work for has added a “website designed by” message and link to every client project that we have launched over the last few years, and in all of that time, not one client has complained. On the contrary, I have had clients actually tell me that they liked having our link on their website because it made it easier for them to find us or to send others our way.

Needless to say, my mind has been completely changed on this practice of adding our link to clients’ websites and hearing “I saw your link on a website and I really liked your work” from a qualified lead is a great start to a conversation with a prospective new client.

Consistency Is The Key

As you read through this article, you most likely said “I do that already” for some (or maybe even all) of the examples presented here — but how often do you do them? It’s one thing to say that you show your appreciation to clients or schedule regular follow-up meetings, but do you do it for all projects, every single time? Not likely.

It is very easy to put off sending a thank you note until later, only to have it be forgotten in the mix of other responsibilities that you have. It is easy for a meeting to be cancelled and never revisited, causing your schedule of regular conversations with your client to fall apart. The ideas presented in this article are not ground-breaking — they are all things you can easily add to your projects, but they are also things that are easy to dismiss or set slide.

The key to realizing consistent returns from these practices is to apply them consistently to your work. If you make them a part of your regular workflow and essential to your process, then the positive results you enjoy from them will also be consistent.

Happily ever after starts by ending projects well and building client relationships. (Image: Steve Snodgrass).

In Summary

• Be mindful that bumps at the end of a project do not derail an otherwise successful engagement.
• Look for small things you can do at a project’s end to really leave a positive lasting impression with your client.
• Connect with your clients for regularly scheduled meetings and build long-term relationships that will lead to future projects (and great referrals).
• Establish a process internally to make these tasks a consistent part of your workflow so you can consistently realize the positive benefits that they can deliver.

By ending projects well, and establishing quality relationships with your clients, you will be one step closer to ending all of your project stories with “happily ever after.”

(jc)

© Jeremy Girard for Smashing Magazine, 2012.

  

The Web is technical by nature. Different scripts and pieces of code are linked together through hyperlinks, forming an endless net of interwoven, encrypted information — data that is accessible only through technical interfaces, such as Web browsers, or applications. Yet, Web professionals have made it their calling to tame the “wild” Web and turn it into an accessible, user-friendly and, most of all, personal medium.

Personality will set your brand apart from competitors and help you connect with a passionate audience.

– Aaron Walter

Designers can do plenty of things to counteract the technical appearance of the Web. One very effective way is simply to make it look less technical, by using a more human, personal style.

In this article, we will discuss different aspects of freehand drawing and writing in Web design and how they can enhance the user experience of your website.

Identity And Authenticity

Freehand drawings and other sketched elements are a great way to show personality and convey a feeling of authenticity. Imagine getting a letter or greeting card from someone you cherish. Do you expect the text to be typed or handwritten? A handwritten note is way more personal than a computer-written one, right? On the Web, it’s similar. It might be a different medium, but content that obviously comes directly from a human is more authentic and more trustworthy. Let’s look at three examples of how freehand drawings can help you create an identity and stay authentic.

Look and Feel

First of all, hand-drawn content has a unique look and feel. Compare it to handwriting. Creating a personality and unique appearance for your brand or product is important.

The look and feel of Balsamiq is authentic and distinctive.

Balsamiq does a great job here. It offers a mockup and wireframing tool. While its features are quite advanced, its look and feel is basic, recalling pen and paper sketches from way back. The low fidelity helps us focus on the essential functionality while also making the product authentic and distinctive.

Recognition

Freehand drawings have character. Through the touch of human imperfection, they gain a certain tension that is hard to recreate digitally. This special touch draws attention and allows people to pause to appreciate and process the hand-drawn content, more so than they might appreciate any old perfectly illustrated image.

Notepad++’s logo is distinctive and easy to remember.

The source-code editor Notepad++ has a distinctive hand-drawn logo. The little chameleon not only reflects the functionality of the program (the transformation of code), but is also cute and draws attention. The sketched style reflects the creative nature of what you can do with Notepad++ and makes sure you don’t confuse it with other editing tools.

Personality

Obviously, freehand drawings carry personality. They are authentic and help users to connect with your website or app. Hand-drawn content confirms that real people are behind the content, people who have put thought and effort into the design to make it usable and trustworthy.

Mathboard looks personal and easy to use.

MathBoard is an iPad app that help kids practice their arithmetic skills. The app has a classic chalkboard look, freshening up the dry and precise character of arithmetic. The whole app is set up in quiz form, and kids can actually write on the board to do rough work if needed. The personal appearance of the app makes it easy and attractive to use.

Information And Content

The way you present information on your website determines whether people will see it and, even still, understand it. Draw attention to your content at the right time in the user’s visit to your website. The content should look attractive and promising enough to involve the visitor. Information must be clear, relevant and actionable in order to be effective. Below are three examples of ways in which freehand styles can make the presentation of your content more effective.

Explain Features

You can use freehand drawings to explain your product, such as its features. Creatives often use simple sketches to explain a concept or present an idea that might otherwise take ages to put into words. With your website, you encounter a similar situation. You’ll have a product, concept or idea that you want to get across to visitors. By using hand-drawn icons or simple sketches, you create an intimate atmosphere, as if you were speaking to your visitors directly.

Stickies conjures the idea of presentations. (Image: TestFlight)

Online service TestFlight makes use of just this effect. In addition to the many other hand-drawn elements on its website, the company points out its main features with simple sketched sticky notes, accompanied only by a few brief lines of text. This conjures the idea of presentations, drawing attention to the features one by one to make them more clear.

Visualize Workflows

Freehand style is also a great way to familiarize visitors with your workflows. No one expects you to come up with the perfect solution out of thin air. The fact that you admit that a process is involved and that this process can be rough and bumpy only makes you human and likeable. It demonstrates that you try out different directions before deciding on the right track.

This hand-drawn workflow conveys creativity and a thorough working process. (Image: Alex Faure)

Designer and front-end developer Alex Faure demonstrates well how a hand-drawn visualization of a workflow can educate visitors and build trust. He seems to not only know what he is doing, but also thinks things through and involves his clients in the process.

Guide Users

Whether you are designing a website or an app, keeping your users in mind and guiding them towards the various goals they might have is always important. Hand-drawn icons can be a good way to do so. It’s no secret that icons are helpful when navigating a website or app. Why would hand-drawn icons be any different? While perfectly illustrated icons might be more detailed and clearer, they are computer-made and can easily look sterile and technical. Hand-drawn icons are personal, and we are more inclined to accept guidance from another human than from a machine.

We are more inclined to accept guidance from humans. (Image: Spamped)

The iPhone app Spamped uses very nice, meaningful icons to guide users. The app enables you to stamp and share your favorite things, such as places, books and movies. The hand-drawn style perfectly matches the personal nature of the app, encouraging users to keep stamping.

Team Presentation

The importance of team pages increases continually. While we used to accept a certain level of anonymity on the Web, we are now eager to know who is behind a website, service or product. Also, having the hypothetical option to contact someone is not enough; we want to know exactly who we would be contacting. The more personal your team presentation, the more likely your visitors will trust you. Here are some suggestions on how to enhance your team presentation with hand-drawn elements.

Be Likeable

Being perceived as likeable is important. Even if you offer a ton of information on yourself, if people think you are arrogant or too extravagant, it will do no good. We are much more willing to trust someone we like than someone whose character we cannot asses. Hand-drawn elements can make you more likeable by making you look creative, spontaneous and easy-going.

We are more willing to trust people we like. (Image: Knock Knock Factory)

The Knock Knock Factory welcomes its visitors with a personal and likeable presentation of its team. The pictograms sketched on the chalkboard in the background say a lot about Keith, the “fearless leader.” The company obviously considers it important to give visitors a clear picture of who they are about to deal with. It’s catchy and gives visitors a positive feeling, before they have even looked around the rest of the website. It creates an immediate personal connection and makes the visitor feel welcome to the website.

Be Trustworthy

Besides likability, trustworthiness is also important. At the end of the day, anyone can hide behind a website, pretending to be someone they are not. Showing authenticity is a great way to make sure visitors take you for who you are. Only if people trust you will they open up to what you have to say or engage in your desired actions, such as buying the product. Hand-drawn elements are usually not the easiest content to produce for a design; they require skills such as creativity and passion — skills we associate with honest and trustworthy people.

We feel more comfortable around people we trust. (Image: Polecat)

The software agency Polecat has found a trustworthy way to introduce itself. Instead of realistic photographs, it has put thought and passion in its team presentation, using abstract yet creative illustrations. The illustrations have a rough and sketchy look to them, making them even more human. And only first names are disclosed, giving an easy-going, familiar feeling.

Be Real

An important aspect of trustworthiness is authenticity. Your visitors must not doubt that you really exist and that you exist in the way that you present yourself on your website. The Web can be a scary place, especially considering that users will probably never meet the people behind websites in person. Anyone can use a Web font, but handwriting and hand-drawn elements reveal something about your person, making you look more real.

The authenticity of a team is important. (Image: Grove)

The people at Grove found the perfect balance between creative, carefree and authentic for their team presentation. Snapshots of all team members are neatly arranged as Polaroids, with the names looking handwritten. It looks as if someone walked through their work space, taking Polaroids of everyone, including the team’s dog. Does it get more real than that?

Storytelling

Freehand drawings are a great way to tell stories. Storytelling is extremely personal, an ancient means of communication, mediated at most (back then) by a cave wall. This basic method of exchanging information transcends all technical advances and gives us a comforting, human feeling. Sketches help us ignore the impersonal nature of the Web and put a face to the humans behind it.

Entertain

Entertainment entails emotional involvement — something that is much easier to achieve when humans are involved, rather than mindless machines. On the Web, hand drawings are a great way to establish a familiar and human experience, one that helps visitors to relax and enjoy themselves.

Drawings create a familiar and human experience. (Image: Axure)

The prototyping tool Axure welcomes visitors to its home page with an amusing yet informative story about UX Man, who is “accused of having superhuman powers.” The freehand style of the drawing is eye-catching. There is no reason to doubt that a lot of thought has gone into this fun and inviting landing page.

Explain

Hand-drawn stories grab our attention because we like to recognize human elements on the Web. Whereas a too-clean Photoshopped image might not gain our trust, hand drawings appeal directly to our emotions, making us more attentive and receptive to information.

Hand drawings appeal directly to our emotions. (Image: SignNow)

The app SignNow uses hand-drawn images to explain its main benefits right on the home page. The way it lines up the benefits, connected by the “flying” documents, creates a narrative. You can almost hear someone explaining the images as you read the descriptions below. The story draws visitors in, making it easy to follow.

Engage

Personalized elements such as freehand drawings also engage visitors. Along with user experience, “user engagement” has also become a hot topic. Once engaged, we are interested and willing to perceive and process the information given to us. So, a website that manages to engage us has already made a big step towards a positive user experience.

A website that manages to engage us has made a big step towards a positive user experience. (Image: TouristEye)

Travel app TouristEye engages effectively with a good story. The step-by-step introduction to its product is turned into a small adventure story, a treasure hunt waiting to be solved. Even without the text, the drawings are meaningful and reflect the free spirit of a trip.

Attention-Grabbers

Freehand elements, such as handwriting, are just not what we expect in a technical medium like the Web. They go against the straight lines and symmetry that we associate with the Web. Thus, a perfect opportunity to grab the visitor’s attention. Handwritten comments and instructions feel human and make us feel like we are being addressed directly.

Invite

You can use this personal method of communication for different things. First, you could easily invite visitors to perform certain actions, such as liking you on various social media platforms or sharing your content. We are more likely to respond to messages that appear to concern only us, not the general public. Even though the message is on your website for everyone to see, you can create a feeling of connectedness by addressing visitors directly.

We respond more likely to personal messages. (Image: Weezbe)

Weezbe use a handwritten message on its landing page, together with a happy smiley and an arrow that guides the visitor’s eye to the green button. The header is simple yet effective, drawing attention to the call-to-action button without being intrusive or annoying.

Make Curious

You can also use hand-drawn elements to make visitors curious and, in doing so, to guide their line of vision and trigger certain actions. For example, arrows are a great way to guide the attention of visitors.

Hand-drawn elements can make visitors curious. (Image: Radley Yeldar)

The creative agency Radley Yeldar shows a minimalist drawing of a hand that appears to be tapping on the screen, along with the line “This is not just a footer.” The visitor is motivated to mimic the gesture of the hand and click on the screen, if only to find out what happens. This is a great subtle way to bring the footer to the visitor’s attention.

Point Out Details

Last but not least, hand-drawn elements can be handy for pointing out details. Again, it’s all about grabbing the visitor’s attention and drawing it to the relevant area. Just as you use arrows and other marks to highlight content in a book or other offline medium, these elements work great on your Website. After all, highlighted elements bear a certain importance that makes them worth checking out.

Highlighted elements are expected to be important. (Image: Orbit)

Orbit uses hand-drawn arrows to point out adjustable elements of its image slider plugin. The hand-drawn quality of the arrows draws attention to the defined areas of the slider, and it also stands out, obviously not being part of the slider itself.

Don’t Overdo It

Sometimes, freehand drawing doesn’t suit the nature of a website. Make sure not to overdo it and that visitors would truly appreciate a more personal design. Don’t hesitate to ask visitors if you are not sure how far to go; for example, by conducting a live survey on your website.

While certainly many examples are out there of how not to use hand-drawings on a website, let’s look at only one. The aim of this article is to point out positive examples and offer ideas on how a freehand style can improve the user experience, but it is also important to be aware that it’s not always effective and that you should use hand-drawn elements within reason.

The overdone hand drawings make the buttons look obtrusive and pushy. (Image: Joshua Keenes)

For example, designer Joshua Keenes uses hand-drawings to draw attention to his social media buttons. While the concept might work, the fact that he overdoes it has two side effects. First, so much is going on that your attention gets lost before even getting to the actual target, making you lose focus before taking any action. Secondly, the invitation to hit one of the buttons becomes quite obtrusive and pushy, likely scaring people away, rather than welcoming them to the social community.

Conclusion

Having a personal experience on the Web is becoming increasingly important. We no longer want to visit cold, formal and anonymous websites. Rather, we want to feel comfortable surfing the Web and to meet the people behind a website, and we need to trust them before we are willing to interact with their website.

Freehand drawings have a human quality, the perfect bridge over the gap between the technical, impersonal Web and the accessible, user-friendly and personal experience that we expect today.

(al)

© Sabina Idler for Smashing Magazine, 2012.

  

This week we have a beautiful icon freebie for you. BanzaiTokyo designed this art related icon set. Their collection of 34 icons are an homage to the creative professions. The icons are available as PNG files and released under a Creative Commons Attribution License.

Large view.

The Art Professions Icons set would not be out of place in an artist’s portfolio website, be they cook or painter — or even multi-talented. Imagine these icons guiding a modern art gallery’s visitor through the institution’s online presence and you won’t feel let down. Any site remotely representing artistic efforts, finally, has a homogenous set at its disposal. Furthermore, the geniuses at BanzaiTokio did Smashing Magazine the honor of designing an icon just for us, which you will also find below.

The icons are licensed under the Creative Commons Attribution 3.0 License. You are free to distribute, transform, fiddle with and build them into your work, even commercially. Please always credit the original designer of the set. The icons may not be resold, sub-licensed, rented, transferred or otherwise made available for use.

Download The Set For Free!

You can use this icon set freely for commercial and personal projects. Please link to this release post if you want to spread the word.

• large preview (.jpg)
• download the icon set for free (.zip, 12,3 MB; PNG files).

Description

The set contains 34 icons for various occasions. The Icons are available in eight sizes — 32×32 px, 48×48 px, 64×64 px , 72×72 px, 96×96 px, 128×128 px, 256×256 px, 512×512 px. The icons included are:

• 3D
• Animation
• Architecture
• Body Art
• Cinema
• Comics
• Creative Writing
• Culinary Arts
• Dance
• Digital Art
• DJ
• Drawing
• Fashion
• Game Development
• Industrial Design
• Interior Design
• Literature
• Music
• Packaging
• Painting
• Photo Editing
• Photography
• Pixel Art
• Print
• Programming
• Publishing
• Sculpture
• Sculpture2
• Street Art
• Theater
• Typography
• UI Design
• Vector Art
• Web Design

Behind The Design

As always, here are some insights from the designers:

“We see a lot of icons created for business and general public – social networking and ecommerce, what bothered us is that fellow creatives – writers, painters, sculptors and many others were overlooked and we made it our goal to create icons for every creative activity there is.

Now artists can use these icons to showcase different sections of their portfolio websites and blog writers can have a complete coverage of all creative activities.”

— BanzaiTokio

Thanks, BanzaiTokio, for being creative for the creative community!

© Smashing Editorial for Smashing Magazine, 2012.

  

jQuery, Prototype, Node.js, Backbone.js, Mustache and thousands of JavaScript microlibraries all combine into a single undeniable fact: JavaScript is popular. It’s so popular, in fact, that we often find ourselves using it in places where another solution might be better in the long run.

Even though we keep JavaScript, CSS and HTML in different files, the concepts behind progressive enhancement are getting all knotted up with every jQuery plugin we use and with every weird technique that crops up. Because JavaScript is so powerful, there are a lot of overlaps in capability between JavaScript and HTML (building document structure) and JavaScript and CSS (injecting style information). I’m not here to pick on any JavaScript library, bootstrap or boilerplate; I’m just here to offer a little perspective as to where we are and how we can realign our goals.

Image Credit: opensourceway.

Keeping CSS Out Of Your JavaScript

CSS can hook into HTML with a variety of different selectors; this isn’t anything new. By using IDs, classes or any attribute you can think of (even custom attributes), you have easy access to style an element. You can also do this with a slew of JavaScript methods, and honestly, it’s the same basic process with a different syntax (one of my JavaScript ah-ha moments). Being able to natively access HTML from JavaScript and from CSS is one of the reasons progressive enhancement has been such a successful development model. It allows a point of reference to guide us and to serve as a reminder as we develop a project, so we don’t “cross the streams”.

But, as you move forward with JavaScript and build applications with highly interactive elements, it gets harder to not only keep HTML out of your JavaScript, but also to catch yourself before injecting style information into a document. Of course, the case for not injecting style with JavaScript certainly isn’t a binary one (yes/no, true/false, 0/1); there are plenty of cases where you might need to apply styles progressively, for example, in a drag and drop interface where positioning information needs to be constantly updated based on cursor (or finger) position.

But generally speaking, you can safely house all the style information you need within CSS and reference styles as reusable classes. This is a much more flexible model than sprinkling CSS throughout a JavaScript file, and it very closely compares to the model of adding style information into your HTML. We follow this model when it’s only HTML and CSS, but for some reason it has a tendency to fall apart once JavaScript gets added into the mix. It’s certainly something we need to keep an eye on.

A lot of front-end developers take real pride in having clean HTML. It’s easy to work with, and to certain super-geeks it can even be artful. It’s great to have clean, static HTML, but what good is that if your generated HTML is riddled with injected style and non-semantic markup? By “generated HTML,” I’m referencing how the HTML looks after it’s been consumed and barfed back up after being passed around all those plugins and extra JavaScript. If step one to having clean HTML and separated progressive enhancement layers is to not use a style attribute, I’d have to say that step two is to avoid writing JavaScript that injects a style attribute for you.

Cleaning Up Your HTML

We can probably all agree that blindly using a technology is a terrible idea, and I think we’re at a point with jQuery where we are, indeed, blindly using a lot of the features without fully understanding what’s going on under the hood. The example I lean on pretty heavily for keeping CSS out of my JavaScript is the behavior of jQuery’s hide() method. Based on the principles of progressive enhancement, you wouldn’t code something with inline CSS like this:

<div class="content-area" style="display:none;"></div>

We don’t do that because a screen reader won’t pick up an element if the style is set to display:none, and it also muddies up the HTML with unnecessary presentational information. When you use a jQuery method like hide(), that’s exactly what it does: it will set a style attribute on the target area and add a display property of none. It’s very easy to implement, but not very good for accessibility. It also violates the principles of progressive enhancement when you inject style into the document like that (we’re all sorts of messed up, huh?). It’s not uncommon for this method to be used within a tabbing interface to hide content. The result is that the content is nonexistent to a screen reader. Once we realize that adding style from JavaScript isn’t ideal in most cases, we can move it into the CSS and reference it as a class:

CSS

.hide {
   display: none;
}

jQuery

$('.content-area').addClass('hide');

We still have to address the accessibility problem of hiding content with display:none, but since we’re not using a built-in jQuery method anymore, we can control exactly how content gets hidden (whichever accessible method you prefer is probably fine). For example we could do something like:

CSS

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

.remove {
   display: none;
}

In the above example, you can see that even though both classes result in content being removed from view, they function very differently from an accessibility standpoint. Looking at the code like this makes it clear that we really are dealing with style information that belongs in a CSS file. Using utility classes in this way can not only help your JavaScript slim down, but also have double usage in an Object Oriented CSS (OOCSS) development model. This is truly a way to not repeat yourself (Don’t Repeat Yourself, or DRY) within CSS, but also across a whole project, creating a more holistic approach to front-end development. Personally, I see a lot of benefit in controlling your behaviors this way, but some people have also called me a control-freak in the past.

Web and Team Environments

This is a way we can start opening up lines of communication between CSS and JavaScript and lean on the strengths of each language without overdoing it. Creating a developmental balance on the front end is very important, because the environment is so fragile and we can’t control it like we can on the back end with a server. If a user’s browser is old and slow, most of the time you can’t sit down and upgrade it (aside: I do have my grandmother using Chrome); all you can do is embrace the environmental chaos, build for the best and plan for the worst.

Some people have argued with me in the past that this style of development, where you’re referencing CSS classes in JavaScript, doesn’t work well in team development environments because the CSS is usually built by the time you’re diving into the JavaScript, which can cause these classes to get lost in the mix and create a lot of inconsistency in the code (the opposite of DRY). To those people I say: poke your head over the cube wall, open AIM, GTalk or Skype, and communicate to the rest of the team that these classes exist specifically to be used with JavaScript. I know the concept of developers communicating outside of GIT commit messages seems like madness, but it’ll be okay, I promise.

Using Behavioral CSS With JavaScript Fallbacks

Using these CSS objects as hooks for JavaScript can go far beyond simple hiding and showing of content into an area of behavioral CSS, transitions, animations and transforms that are often done with JavaScript animations. With that in mind, lets take a look at a common interaction model of fading out a div on click, and see how it would be set up with this development model, while providing the proper fallbacks for browsers that might not support the CSS transition we’re going to use.

For this example we’ll be using:

• jQuery
• Modernizr

First, let’s set up our body element:

<body>
    <button id="do-it" type="button">Run Transition</button>
    <div id="cube"></div><!--/#cube-->
</body>

From there we’ll need to set up the CSS:

#cube {
   height: 200px;
   width: 200px;
   background: orange;
   -webkit-transition: opacity linear .5s;
      -moz-transition: opacity linear .5s;
        -o-transition: opacity linear .5s;
           transition: opacity linear .5s;
}

.fade-out {
   opacity: 0;
}

Before we add on the JavaScript layer, lets take a moment and talk about the flow of what’s going to happen:

1. Use Modernizr to check for CSS Transition support
2. If Yes
   1. Set up a click event on the button to add a “fade-out” class to #cube
   2. Add another event listener to catch when the transition is finished so we can time the execution of a function that will remove #cube from the DOM.
3. If No
   1. Set up a click even on the button to use jQuery’s animate() method to manually fade #cube out.
   2. Execute a callback function to remove #cube from the DOM.

This process will introduce a new event called transitionend, which will execute at the end of a CSS transition. It’s amazing, FYI. There is also a companion event called animationend, which will execute at the end of a CSS animation for more complex interactions.

First thing we need to do is set up our variables in the JavaScript:

(function () {

   // set up your variables
   var elem = document.getElementById('cube'),
       button = document.getElementById('do-it'),
       transitionTimingFunction = 'linear',
       transitionDuration = 500,
       transitionend;

   // set up the syntax of the transitionend event with proper vendor prefixes
   if ($.browser.webkit) {
       transitionend = 'webkitTransitionEnd'; // safari & chrome
   } else if ($.browser.mozilla) {
       transitionend = 'transitionend'; // firefox
   } else if ($.browser.opera) {
       transitionend = 'oTransitionEnd'; // opera
   } else {
       transitionend = 'transitionend'; // best guess at the default?
   }

   //... rest of the code goes here.

})(); // end wrapping function

You might notice that our new transitionend event needs a vendor prefix; we’re doing a little browser detection to take care of that. Normally you might detect for the vendor prefix and add it onto the event name, but in this instance the cases for the syntaxes are a little different, so we need to get the whole name of the event for each prefix.

In the next step we’ll use Modernizr to detect support, and add our event listeners to each case (all of this stuff gets added inside the wrapping function):

// detect for css transition support with Modernizr
if(Modernizr.csstransitions) {

    // add our class on click
    $(button).on('click', function () {
       $(elem).addClass('fade-out');
    });
    
    // simulate a callback function with an event listener
    elem.addEventListener(transitionend, function () {
       theCallbackFunction(elem);
    }, false);
       
} else {

   // set up a normal click/animate listener for unsupported browsers
   $(button).on('click', function () {

       $(elem).animate({
           'opacity' : '0'
       }, transitionDuration, transitionTimingFunction, function () {
           theCallbackFunction(elem);
       });

   }); // end click event

} // end support check

Finally, we need to define a shared function between the two actions (DRY) which executes after the transition (or animation) is complete. For the sake of this demonstration we can just call it theCallbackFunction() (even though it’s not technically a callback function). It will remove an element from the DOM and spit out a message in the console letting us know that it worked.

// define your callback function, what happens after the transition/animation
function theCallbackFunction (elem) {

   'use strict';

   // remove the element from the DOM
   $(elem).remove();

   // log out that the transition is done
   console.log('the transition is complete');

}

In the browser, this should work the same way in IE 7 (on the low end) as it does in mobile Safari or Chrome for Mobile (on the high end). The only difference is under the hood; the experience never changes for the user. This is a way you can use cutting-edge techniques without sacrificing the degraded user experience. It also keeps CSS out of your JavaScript, which was really our goal the whole time.

The Moral Of The Story

You might be asking yourself why we should even bother going through all this work. We wrote about 60 lines of JavaScript to accomplish the same design aesthetic that could be created with eight lines of jQuery. Well, no one ever said that keeping clean code and sticking to progressive enhancement was the easiest thing to do. In fact, it’s a lot easier to ignore it entirely. But as responsible developers, it’s our duty to build applications in a way that is accessible and easily scales to the future. If you want to go that extra mile and create a seamless user experience as I do, then it’s well worth the extra time it takes to dot all the i’s and cross all the t’s in a project to create an overall experience that will gracefully degrade and progressively enhance.

Using this model also lets us lean heavily on CSS for its strengths, like responsive design and using breakpoints to redefine your interaction at the various screen sizes. It also helps if you’re specifically targeting a device with a constrained bandwidth, because, as we all know, CSS is much lighter than JavaScript in both download and execution time. Being able to offload some of the weight JavaScript carries onto CSS is a great benefit.

In production, we are currently using CSS animations and transitions for micro interactions like hover effects and maybe a spinning graphic or a pulsating knot. We’ve come to a point where CSS is a pretty powerful language that performs very well in the browser and it’s okay to use it more heavily for those macro interactions that are typically built using JavaScript. If you’re looking for a lightweight and consistent experience that’s relatively easy to maintain while allowing you to use the latest and greatest browser features — it’s probably time to start mending fences and build strength back into the relationship between CSS and JavaScript. As a great man once said, “The key to writing great JavaScript is knowing when to use CSS instead.” (It was me… I said that.)

(cp)

© Tim Wright for Smashing Magazine, 2012.

  

Which category does your organization’s Web presence fall into? Over- or under-managed? When it comes to the Web, few organizations have found the Goldilocks zone. Their online activities are either under-managed with minimal policies and procedures, or dogged by bureaucracy and internal politics.

Those that fall into the former category are vulnerable to legal threats, internal disputes and knee-jerk management where the website lurches from one crisis to the next. Those in the latter are crippled by indecision and fail to respond to the fast-changing nature of the Web.

How then can an organization’s Web presence receive the oversight it requires, while remaining flexible enough to allow rapid iteration and change? The answer lies in solid Web governance; in particular responsibilities and policies. For example, who is responsible for what?

Responsibilities

Responsibilities for websites are often poorly defined. Either the issue hasn’t been considered, or it has been sidestepped by forming a committee or steering group. In either case, lines of reporting are blurred, responsibilities are ill-defined and priorities on the website are often dictated by who shouts the loudest.

If your website is to be a success, it needs strong leadership, clearly defined roles and people to take responsibility for its success. This can be at least partially achieved using a responsibility assignment matrix.

I know what you are thinking: a responsibility assignment matrix doesn’t sound sexy. I can’t argue with that. However, if you manage to get one signed off, it is going to make life a lot easier. A responsibility assignment matrix is a list of tasks, deliverables and responsibilities related to the running of your website, with individuals assigned to items in one of a number of roles.

A responsibility assignment matrix contains a list of tasks and those individuals involved in completing them.

Take, for example, design sign off. This task could be assigned to two people: one who is responsible for sign off, and another who is consulted before a decision is made. By assigning different roles, you clearly define responsibilities and minimize committee decision making. This is crucial for a number of reasons.

• Committees significantly slow down the decision-making process.
• Despite what people think, committees are not democratic. They are often dominated by one or two individuals.
• Committees inevitably lead to compromise as people try to reach a consensus. This results in insipid design that offends nobody but fails to excite anybody.
• Committee decision making is often more about internal politics than user needs or the success of the project.

Not only will role assignment reduce committee decision making, it will also identify who is responsible for decisions. This will reduce the likelihood of important tasks slipping between the gaps. There are various approaches to the responsibility assignment matrix, but most include at least four roles.

Responsible

Those responsible for a task are those who do the work and make the task happen. For example, in the case of design sign off, this would be the designer. This person could be a part of an internal team or an outside contractor.

Those people assigned the role “responsible” are those who actually do the work. In some cases they are the person accountable for the task, but it may also be somebody else (typically a subordinate).

Accountable

Every task should have a single person who is accountable for its successful completion. This is the person with whom the buck stops and who signs off the task as complete. In the case of design sign-off, this is typically the project manager or client.

There can only be a single person accountable for a task’s success. Otherwise, a task can fall between the gaps. It is also worth noting that a responsibility assignment matrix is useful for identifying gaps in your staffing. These can be overcome through outsourcing or recruitment.

Consulted

You consult those whose opinion is required before a task can be signed off. These are typically the people with an expertise relating to the task or a stake in a successful outcome.

Although a wider circle of people can be consulted on tasks, this should still be limited to those with a related expertise.

Informed

These are people who need to be kept informed about the task, but do not contribute to its completion. It may be that they are only informed when the task is completed, or they might be updated at various points throughout the process.

Typically those who are informed make up the largest group. It can easily include entire departments.

Minimize the number of people consulted, move them instead into the informed group. Those consulted should be limited to those with a real understanding of the task, or a valuable contribution to make. For example, if the task relates to technical infrastructure, only those with an understanding of technology should be consulted.

More controversially, the same should be true for design sign off. Only those who have a design background or who are responsible for corporate branding should be involved in this decision. After years of working with clients to implement technical projects and agree on design, I can testify that this approach will improve the quality of decision making.

It will also minimize the time required to make decisions, and reduce the staff hours wasted attending meetings where individuals have little to contribute. The challenge is dealing with people who wish to be consulted when they should only be informed. In my experience, the trick here is to agree upfront on the criteria involved in being a consultant before assigning specific people to the task.

For example, you could agree that all tasks should have no more than six people who are consulted. These people should be chosen based on experience relating to the task, or how greatly the outcome impacts them. Once this ‘policy’ is agreed on, the decision making about who should be consulted becomes much less contentious, because it is less personal.

If somebody isn’t included, it isn’t a personal slight, but an application of the policy. Obviously, this won’t keep everybody happy, and sometimes you may be forced to include individuals you would prefer not to. However, this is better than a large committee making decisions on everything.

Also it better defines people’s roles. Those who are consulted aren’t those making the final decision and they will know that going in. Equally those who have been assigned responsibility for a task will be under no illusions that the buck stops with them. Although defining responsibilities and roles will go a long way to improving the structure that supports your digital presence, there is still more that can be done. You can also establish policies.

Establishing Policies

A lot of decisions about digital strategy are knee-jerk reactions. One day, the CEO gets it into their head you need an iPhone app, and so that becomes the number one priority. Another day, a blind user complains that your website doesn’t work with screen readers, and accessibility jumps to the top of the agenda. This approach is ineffective, dangerous and can lead to bad decisions being made in the heat of the moment. It can also result in something being ignored entirely.

So where should you begin, what policies should you establish first? There are a huge variety of areas that can benefit from having policies in place. However, I recommend starting with three:

• Business objectives & key performance indicators (KPIs),
• Content management, and
• Development roadmap.

Let’s look at each in turn.

Business Objectives & KPIs

It shocks me how many organizations do not have clearly defined objectives for their website, and no way of measuring its success. Having an agreed-upon set of objectives and KPIs provides focus to your website. It also acts as a measure against which to resolve disagreements and judge the value of new features.

For example, if it has been agreed that your website’s primary business objective is to generate quality leads, it is easier to argue against suggestions that undermine this. For example, forcing users to hand over their email addresses before being able to access certain content (such as product demonstrations). Although this may generate more leads, it does not meet the quality criteria as most users will not be ready to buy.

So what should these business objectives look like? They don’t need to be complex or take a long time to write. Normally, half a dozen objectives is more than enough. For example Smashing Magazine’s business objectives might be:

• Generate quality content that encourages users to return regularly to the website;
• Display relevant advertising in a way that will attract users’ attention, without being annoying;
• Encourage users to subscribe to email or RSS updates;
• Generate revenue through the sale of quality books that meet users’ needs; and
• Encourage users to engage with Smashing Magazine through comments and social networks.

Having a list of objectives is not enough. You also need to prioritize them. If objectives are not prioritized, they will conflict. The result of this is that arguments will arise internally about what should be most prominent on the homepage or what should appear in the website’s navigation.

Finally, monitoring KPIs provides objective evidence about what is working on the website and what is not. This can be invaluable if you need justification for removing content.

Removing Content and Content Management

Content management systems have transformed the way we manage the content of our websites, but they do bring with them some drawbacks. They allow large numbers of people to add content, and this creates challenges around keeping content up-to-date, on-message and relevant. Many organizations suffer from content bloat, where content is constantly added to their website and never removed. Having a policy for managing content is important when more than one or two people are updating the website.

Your policy should answer questions such as these.

• Who is responsible for ensuring the accuracy of the website’s content?
• Who is responsible for maintaining the website’s tone of voice?
• How is content going to be checked for accuracy?
• Whose approval is required before content can be posted online?
• How is out-of-date or legacy content going to be managed?

One of the biggest challenges associated with content management is dealing with out-of-date content. This content clogs up websites, making it harder for users to find what is truly useful. Although the logical choice is to remove obsolete content, this can prove harder than it would appear. Many content owners become possessive about their content, arguing that somebody might find it useful. Suggestions of removing content can often be perceived as a personal attack on the content provider.

Having a predefined policy takes a lot of the contentiousness out of removing content. Instead of it being a personal attack, it is simply implementing policy. For example, you could have a policy that says if a page hasn’t be updated for a certain amount of time, it is automatically removed. Or you could specify that if a page falls below a certain threshold of visitors, it is removed from the website’s navigation or search. Whatever your policy, the key is to have something that can be implemented without endless discussion and debate.

Development Roadmap

The final policy that all organizations should definitely have is a development roadmap. This provides two benefits:

• It prevents knee-jerk decision making about the next thing to implement.
• It encourages management to think about ongoing development of their website, rather than occasional redesigns.

When talking about the fast moving world of digital development, it is not realistic to have a long-term, detailed roadmap. However, it should be possible to outline a list of ideas for future features, and prioritize those ideas based on your business objectives. Your roadmap should also outline a process for cyclic, ongoing improvements to the website. These aren’t necessarily new features, but rather usability enhancements based on monitoring of analytics and regular usability testing.

In his book “Rocket Surgery Made Easy,” Steve Krug recommends monthly lightweight usability testing to ensure that your website remains as usable as possible. This is very important, especially if your website is regularly having new content and features added. I understand that a post about roles, responsibilities and policies isn’t the most exciting topic. I get that most of us would prefer to play with the latest new jQuery plugin or responsive design technique.

The problem is that if we don’t start encouraging our clients and managers to think about these issues, the beautiful websites we create will quickly become bloated, neglected and ineffective. I am sure you do not consider this a part of your job, but if not you, then who? Personally, I am fed up with seeing websites I have created fall into disrepair and I will do whatever it takes to stop this from happening again. I hope you will join me.

(cp)

© Paul Boag for Smashing Magazine, 2012.

  

Which category does your organization’s Web presence fall into? Over- or under-managed? When it comes to the Web, few organizations have found the Goldilocks zone. Their online activities are either under-managed with minimal policies and procedures, or dogged by bureaucracy and internal politics.

Those that fall into the former category are vulnerable to legal threats, internal disputes and knee-jerk management where the website lurches from one crisis to the next. Those in the latter are crippled by indecision and fail to respond to the fast-changing nature of the Web.

How then can an organization’s Web presence receive the oversight it requires, while remaining flexible enough to allow rapid iteration and change? The answer lies in solid Web governance; in particular responsibilities and policies. For example, who is responsible for what?

Responsibilities

Responsibilities for websites are often poorly defined. Either the issue hasn’t been considered, or it has been sidestepped by forming a committee or steering group. In either case, lines of reporting are blurred, responsibilities are ill-defined and priorities on the website are often dictated by who shouts the loudest.

If your website is to be a success, it needs strong leadership, clearly defined roles and people to take responsibility for its success. This can be at least partially achieved using a responsibility assignment matrix.

I know what you are thinking: a responsibility assignment matrix doesn’t sound sexy. I can’t argue with that. However, if you manage to get one signed off, it is going to make life a lot easier. A responsibility assignment matrix is a list of tasks, deliverables and responsibilities related to the running of your website, with individuals assigned to items in one of a number of roles.

A responsibility assignment matrix contains a list of tasks and those individuals involved in completing them.

Take, for example, design sign off. This task could be assigned to two people: one who is responsible for sign off, and another who is consulted before a decision is made. By assigning different roles, you clearly define responsibilities and minimize committee decision making. This is crucial for a number of reasons.

• Committees significantly slow down the decision-making process.
• Despite what people think, committees are not democratic. They are often dominated by one or two individuals.
• Committees inevitably lead to compromise as people try to reach a consensus. This results in insipid design that offends nobody but fails to excite anybody.
• Committee decision making is often more about internal politics than user needs or the success of the project.

Not only will role assignment reduce committee decision making, it will also identify who is responsible for decisions. This will reduce the likelihood of important tasks slipping between the gaps. There are various approaches to the responsibility assignment matrix, but most include at least four roles.

Responsible

Those responsible for a task are those who do the work and make the task happen. For example, in the case of design sign off, this would be the designer. This person could be a part of an internal team or an outside contractor.

Those people assigned the role “responsible” are those who actually do the work. In some cases they are the person accountable for the task, but it may also be somebody else (typically a subordinate).

Accountable

Every task should have a single person who is accountable for its successful completion. This is the person with whom the buck stops and who signs off the task as complete. In the case of design sign-off, this is typically the project manager or client.

There can only be a single person accountable for a task’s success. Otherwise, a task can fall between the gaps. It is also worth noting that a responsibility assignment matrix is useful for identifying gaps in your staffing. These can be overcome through outsourcing or recruitment.

Consulted

You consult those whose opinion is required before a task can be signed off. These are typically the people with an expertise relating to the task or a stake in a successful outcome.

Although a wider circle of people can be consulted on tasks, this should still be limited to those with a related expertise.

Informed

These are people who need to be kept informed about the task, but do not contribute to its completion. It may be that they are only informed when the task is completed, or they might be updated at various points throughout the process.

Typically those who are informed make up the largest group. It can easily include entire departments.

Minimize the number of people consulted, move them instead into the informed group. Those consulted should be limited to those with a real understanding of the task, or a valuable contribution to make. For example, if the task relates to technical infrastructure, only those with an understanding of technology should be consulted.

More controversially, the same should be true for design sign off. Only those who have a design background or who are responsible for corporate branding should be involved in this decision. After years of working with clients to implement technical projects and agree on design, I can testify that this approach will improve the quality of decision making.

It will also minimize the time required to make decisions, and reduce the staff hours wasted attending meetings where individuals have little to contribute. The challenge is dealing with people who wish to be consulted when they should only be informed. In my experience, the trick here is to agree upfront on the criteria involved in being a consultant before assigning specific people to the task.

For example, you could agree that all tasks should have no more than six people who are consulted. These people should be chosen based on experience relating to the task, or how greatly the outcome impacts them. Once this ‘policy’ is agreed on, the decision making about who should be consulted becomes much less contentious, because it is less personal.

If somebody isn’t included, it isn’t a personal slight, but an application of the policy. Obviously, this won’t keep everybody happy, and sometimes you may be forced to include individuals you would prefer not to. However, this is better than a large committee making decisions on everything.

Also it better defines people’s roles. Those who are consulted aren’t those making the final decision and they will know that going in. Equally those who have been assigned responsibility for a task will be under no illusions that the buck stops with them. Although defining responsibilities and roles will go a long way to improving the structure that supports your digital presence, there is still more that can be done. You can also establish policies.

Establishing Policies

A lot of decisions about digital strategy are knee-jerk reactions. One day, the CEO gets it into their head you need an iPhone app, and so that becomes the number one priority. Another day, a blind user complains that your website doesn’t work with screen readers, and accessibility jumps to the top of the agenda. This approach is ineffective, dangerous and can lead to bad decisions being made in the heat of the moment. It can also result in something being ignored entirely.

So where should you begin, what policies should you establish first? There are a huge variety of areas that can benefit from having policies in place. However, I recommend starting with three:

• Business objectives & key performance indicators (KPIs),
• Content management, and
• Development roadmap.

Let’s look at each in turn.

Business Objectives & KPIs

It shocks me how many organizations do not have clearly defined objectives for their website, and no way of measuring its success. Having an agreed-upon set of objectives and KPIs provides focus to your website. It also acts as a measure against which to resolve disagreements and judge the value of new features.

For example, if it has been agreed that your website’s primary business objective is to generate quality leads, it is easier to argue against suggestions that undermine this. For example, forcing users to hand over their email addresses before being able to access certain content (such as product demonstrations). Although this may generate more leads, it does not meet the quality criteria as most users will not be ready to buy.

So what should these business objectives look like? They don’t need to be complex or take a long time to write. Normally, half a dozen objectives is more than enough. For example Smashing Magazine’s business objectives might be:

• Generate quality content that encourages users to return regularly to the website;
• Display relevant advertising in a way that will attract users’ attention, without being annoying;
• Encourage users to subscribe to email or RSS updates;
• Generate revenue through the sale of quality books that meet users’ needs; and
• Encourage users to engage with Smashing Magazine through comments and social networks.

Having a list of objectives is not enough. You also need to prioritize them. If objectives are not prioritized, they will conflict. The result of this is that arguments will arise internally about what should be most prominent on the homepage or what should appear in the website’s navigation.

Finally, monitoring KPIs provides objective evidence about what is working on the website and what is not. This can be invaluable if you need justification for removing content.

Removing Content and Content Management

Content management systems have transformed the way we manage the content of our websites, but they do bring with them some drawbacks. They allow large numbers of people to add content, and this creates challenges around keeping content up-to-date, on-message and relevant. Many organizations suffer from content bloat, where content is constantly added to their website and never removed. Having a policy for managing content is important when more than one or two people are updating the website.

Your policy should answer questions such as these.

• Who is responsible for ensuring the accuracy of the website’s content?
• Who is responsible for maintaining the website’s tone of voice?
• How is content going to be checked for accuracy?
• Whose approval is required before content can be posted online?
• How is out-of-date or legacy content going to be managed?

One of the biggest challenges associated with content management is dealing with out-of-date content. This content clogs up websites, making it harder for users to find what is truly useful. Although the logical choice is to remove obsolete content, this can prove harder than it would appear. Many content owners become possessive about their content, arguing that somebody might find it useful. Suggestions of removing content can often be perceived as a personal attack on the content provider.

Having a predefined policy takes a lot of the contentiousness out of removing content. Instead of it being a personal attack, it is simply implementing policy. For example, you could have a policy that says if a page hasn’t be updated for a certain amount of time, it is automatically removed. Or you could specify that if a page falls below a certain threshold of visitors, it is removed from the website’s navigation or search. Whatever your policy, the key is to have something that can be implemented without endless discussion and debate.

Development Roadmap

The final policy that all organizations should definitely have is a development roadmap. This provides two benefits:

• It prevents knee-jerk decision making about the next thing to implement.
• It encourages management to think about ongoing development of their website, rather than occasional redesigns.

When talking about the fast moving world of digital development, it is not realistic to have a long-term, detailed roadmap. However, it should be possible to outline a list of ideas for future features, and prioritize those ideas based on your business objectives. Your roadmap should also outline a process for cyclic, ongoing improvements to the website. These aren’t necessarily new features, but rather usability enhancements based on monitoring of analytics and regular usability testing.

In his book “Rocket Surgery Made Easy,” Steve Krug recommends monthly lightweight usability testing to ensure that your website remains as usable as possible. This is very important, especially if your website is regularly having new content and features added. I understand that a post about roles, responsibilities and policies isn’t the most exciting topic. I get that most of us would prefer to play with the latest new jQuery plugin or responsive design technique.

The problem is that if we don’t start encouraging our clients and managers to think about these issues, the beautiful websites we create will quickly become bloated, neglected and ineffective. I am sure you do not consider this a part of your job, but if not you, then who? Personally, I am fed up with seeing websites I have created fall into disrepair and I will do whatever it takes to stop this from happening again. I hope you will join me.

(cp)

© Paul Boag for Smashing Magazine, 2012.

  

The ambigram is one of the few modern letterforms that engage both your intellect and intuition simultaneously. It reads as a word while also communicating a deeply familiar pattern. This is something beyond the ambigram’s obviously clever construction. I’ve thought quite a bit about why I love this word-image hybrid, and I’ll set out here to uncover just what it is about the ambigram’s design and structure that makes it so captivating.

By combining eternal form with the fire of inspiration, you create something that did not exist before. This ambigram has two-point rotation symmetry. (Designer: Nikita Prokhorov)

My primary design background is as a symbolic logo designer, so I begin with what I know: symbols. I look to nature to create my work as a matter of practicality as well as aesthetics, because symbols are derived from nature and are the first language of all humans. Symbols engage us deeply as expressions of the organic principles and forms that life embodies. Nature is common to everyone, and when it is used symbolically in visual language, the chance of creating a relationship with the audience is significantly elevated because it mirrors the relationships within and around us. Nature even embeds symbols that mirror universal processes directly in our DNA.

The twisting double helix is a perfect example of opposites being combined into the genetic dance of balance that results in you and me. Unlike spoken or written language, natural symbols don’t have to be learned because we know them at our core. They are us.

Micro to macro, a handful of patterns construct everything in the universe. The weaving pattern of the helix combines two opposites in cooperation, the basis of organic life. (DNA micrograph: Andrzej Stasiak.) On the left, a double helix nebula at the center of the Milky Way galaxy. (Image: NASA.)

Art or design that incorporates natural symbolism resonates intuitively well before the intellect “makes sense” of it. Written language is processed intellectually first, before it is understood as images or emotions. Without a doubt, much of the ambigram’s appeal to me has to do with my preference for visual information, which you may share. But it is more universal than that.

An ambigram combines a word with the symbolic representation of a much larger principle. When you see reflection, oscillation, rotation, continuity and other universal principles integrated as an intrinsic part of a design, it engages you at a deep level. Any piece of art or design that embeds a universal principle is connected to something more, something real, something we just know.

The Paris ambigram and logo has reflected (or mirror) symmetry. (Designer: Nikita Prokhorov)

“Chain Reaction” displays weaving, continuity and rotational symmetry. (Designer: John Langdon)

An ambigram takes on the same sort of life that a symbol does by connecting to nature, but how does it become its own entity, and such a visually lively one at that? To uncover this, we need to look at both parts of the ambigram: the word and the universal principle being expressed. Although the written word is the most apparent component of the ambigram, you intuitively process visual information before intellectually understanding it, so let’s start with image and intuition first.

Symbol-Speak

Humans have survived and proliferated by reading the universal principles and forms of nature as a common symbolic language, no matter when or where they have lived. The principles that constitute an effective ambigram resonate to your depths because you are made up of the very same fundamental formulas.

Your intuition knows that a circle is the shape of wholeness or completion (planets, eggs, cells, molecules, seasonal cycles); that waves oscillate to balance extremes (atoms and galaxies do this, too); that the branch pattern (tree branches, veins, lightning or the network of nerves that drive impulses throughout your body) moves life’s energy from one place to another; and that mirrored halves contain bilateral symmetry (the basic structural form of almost all higher animals, including humans).

When a universal principle becomes a primary ingredient in a piece of communication, be it literal or visual, something tells us to take note. The ambigram resembles independent, self-animated “life” by presenting the very same qualities.

As the dominant symmetry in all higher life forms, bilateral symmetry is a compelling and intuitively recognizable principle. (Human anatomy image: Visual Language. Snake skeleton image: Srdjan Draskovic.)

Communication in the modern world has ramped up to a scale and speed never before possible, and the human species is now networked in the extreme. The Web connects the body of the world just as impulses connect throughout your body — but with one important difference: common ground must be established in human communication because of the many cultural and linguistic crossovers, unlike the immediate language of nature. Symbols help us do this by bringing an underlying fluency to people of different cultures and languages.

Symbols predate written language by at least tens of thousands of years and are far older than civilization itself. But because three-dimensional space is continually morphing, time erases nearly all traces. From what has been found to date (there is evidence of complex symbolic behavior going back as far as 200,000 to 500,000 years!), we know that our predecessors recognized the value of the information contained in natural patterns and forms all around us.

This six-meter-long python, discovered in Africa in 2006, is embellished with more than 300 manmade “scales” and is approximately 70,000 years old. Humans have been using their brains symbolically since “time out of mind.” (Image: Sheila Dawn Coulson)

All cultures use the same shapes and patterns in their art because we all experience them in the same way. Everything we’ve ever invented has come from understanding a universal underlying process and then replicating it as a human system. City grids mimic the stacking and packing patterns of nature in a linear format; apartment buildings and shopping carts contain the same pattern of stored energy in three dimensions; and road systems that carry petro-fueled vehicles mimic veins that carry the energy to fuel our bodies.

Patterns, shapes and processes of the natural world cue our inspiration and understanding by revealing the eternal baseline of existence. You simply can’t stop noticing nature’s processes in your peripheral vision. As constants of organic structure, they present an interesting paradox: the workings of nature are typically dismissed by our sped-up intellect as being commonplace but are recognized instantly by the senses as being essential and eternal.

Nature’s process dictates effective human design. Packing and stacking is another natural pattern that efficiently stores energy that isn’t needed at the moment but is readily accessible. (Designer: John Langdon)

Language barriers preclude this ability to communicate universally and immediately. Visuals are immediate because they connect as a gestalt, and they communicate in both universally and personally relevant ways. The ambigram communicates more than the sum of its characters because it is enhanced with principles that communicate beyond the word itself.

The Manipulated and the Manipulator

Words, as opposed to symbols, tend towards specifics (different words can describe multiple aspects of one thing) and can dissect meaning into smaller and smaller details. Words are particularly good at giving directions, stating rules or declaring a law. Being created by humans, they are also malleable by humans. The way they are written can change lives, as is so often demonstrated in organized religion, law and politics. Written language is an essential human construct that not only provides information with efficient and (sometimes) consistent delivery, but allows generations to communicate their stories over time.

The Sun Microsystems logo has four-point rotational symmetry that emanates from the subset rotation of individual character sets — a vortex of self-similarity that contributes to the optical illusion of spinning. (Designer: Vaughan Pratt)

The ambigram is a perfect example of inclusiveness — and the root of the word tells you so up front. The word “ambigram” is derived from two Latin words joined as one, as are many modern words. The root ambi means “both,” and it is a popular prefix in a world of dualities: day/night, youth/age, left/right, birth/death, good/evil — words that serve as the bounding markers of every human experience. Its suffix gram is another Latin word meaning tracing, mark, drawing, writing or record — a common suffix in our vocabulary ever since humans started taking notes. All sorts of everyday words include the prefix “ambi” to connote “all” or “inclusiveness.”

John Langdon created ambigrams for the films The Da Vinci Code and Angels and Demons, based on the books by Dan Brown. The perfect interplay of opposites is expressed in the rotational symmetry of “Angels and Demons” as equivalent extremes, while the single word “Illuminati” as the same word right side up or upside down alludes to its mystical and conspiratory nature.

Amb-ient is combined with the Latin -ier which means “to go”. It is conjugated as an adjective with the -ient suffix to describe an overall relaxed mood (ambi, in this case, includes everything within extremes to surround you with an overall sensual feeling of balance and well being). Another word used in this context is ambition, or the act of moving around and through the multitudes — originally from a Latin word for “canvassing for votes,” and covering every base to reap the best return. The legal term “ambit” is derived from the Latin ambitus, meaning scope, limits, boundary or circumference: the “ambit of a statute,” or “within the ambit of the law,” falls within legally defined bounds. Ambidextrous refers to both hands having equal dexterity. The Latin dexter means right — so, two rights for those who are adept at using both hands (the lefties might have a say about that). To be “ambivalent” is to literally have either or both of two contrary or parallel values, qualities or meanings (the Latin verb -valeo means “to have value”). By its very nature, ambi is inclusive of opposites and implies wholeness.

Called a “chain” ambigram, this design by Scott Kim presents an infinite loop that mimics the underlying cyclical motion of life and death.

A Living Loop

The ambigram’s sublime evolution exists within the form of the word itself. The word must have visual relationships to be interesting and relevant — not only in the way the characters create a meaningful word, but also in the symmetrical relationships that let you know you are experiencing something beyond just a simple word. It has the rather fantastic ability to be read upside down or backwards — and even sometimes in a loop!

Ambigrams mimic life by visually expressing some of the most basic principles that make up the entirety of living organic nature. There is one basic that underscores all of the different symmetries and structures that an ambigram can take on, and that is balance. In any beautiful and functioning design — manmade or natural — balance reigns supreme. Modern culture could learn from this: the opposite sides of your brain are not meant to contradict each other and entangle without resolution. Being creative is not of more or less value than being strategic. They are meant to work together. The same goes for opposite sides of the world’s hemispheres. When opposites combine in cooperation, they create something new, something useful, something beautiful that is far stronger and more resilient than is achieved by favoring one over another.

Visible beyond towers of sedimentary rock, called “hoodoos,” in Bryce Canyon are thousands of individually discernible stars in the nearby Milky Way galaxy. (Image: Ben Cooper)

Despite the rather incredible technological advances made by humanity in the current era, we still lag behind our ancestors in understanding an important lesson displayed by the simple ambigram. We are nature and cannot put ourselves above our source, nor can we distance ourselves from it for very long. When you see a piece of design that simply makes you feel good, what you’re really seeing is an expression of nature flowing in place. It feels right because the common denominators that underscore all of life are the truest part of the human experience. It’s the most compelling reason there is. Ambigrams are closed living loops, little word ecosystems that stand independently on their own, just as each of us is designed to do.

(jc al)

© Maggie Macnab for Smashing Magazine, 2012.

  

WordPress is one of the most deployed content management systems around. One of the main reasons is the number of plugins available and the ease with which we can use the system. It is not uncommon to find websites using tens of plugins to accomplish various tasks and functions. Wouldn’t it be nice if you could share the site content with other websites?

You may have a need to share advertisements, product information or your photo gallery if you are a designer. Whatever the reason, this article will show you how to create an embeddable content plugin to share your WordPress content with other websites.

Ways Of Sharing Content

There are various ways with which one can share content across websites — RSS and Atom feeds, APIs and embeddable widgets. RSS feeds on WordPress are usually restricted to posts, while APIs are not easy to integrate on other websites without adding some extra code. This leaves us with embeddable widgets — like the ones used by Google AdSense to display advertisements on websites or Facebook “Share” and “Like” buttons — all of these rely on embeddable JavaScript code to display specific content on a website. The idea mentioned in this article is certainly not new, but in the context of WordPress it opens up many possibilities. The advantages of the technique mentioned here compared with others is that it will enable you to share almost any content, even content from other plugins on your blog, with other websites.

Our goal in this article is to create widget code that a user could insert in their website to display a list of recent posts from the parent website. Of course, this can also be easily accomplished using RSS, but this is just an example to show the technique. In reality, you would use it for more interesting purposes, like sharing popular product images if you are running a WordPress e-commerce website.

The Widget Code

The embeddable code will look something like the following. This is the code the user will insert into their webpage, which will allow them to display the content from the parent website. The crucial element of this widget is the wp-widget.js file, which calls the remote WordPress website, gets the content and embeds it as an iframe in the calling page.

<script type="text/javascript">
  var widget_embed = 'posts';
</script>
<script src="http://www.example.com/widget/wp-widget.js"
type="text/javascript">
</script>
<div id="embed-widget-container"></div>

Adding this block of code to any website page will display the list of recent posts from example.com. The content can be anything besides posts — images, comments, tags, data from other plugins — anything you as a WordPress website owner would like to share with other people. For this example, I’ve limited the content to a simple posts list, as this is a common denominator across all WordPress websites and will be easy to start with. Of course, you will need to add some extra code to share other content, but the base plugin skeleton will remain the same.

Creating The Plugin

The fist step in creating an embeddable widget is to design a small WordPress plugin that will intercept the widget calls from another website and return the required data. You may be thinking that this will be a knotty job, but nothing could be easier. Just a few lines of code and our plugin is ready. The complete code for the plugin is shown below. I’ll explain how this works as we proceed along.

To get the content from the plugin, we will need to pass a query parameter of what content we would like from the remote server in the em_embed variable. This query parameter will then be intercepted by the plugin and the corresponding content returned. We will also pass along implicitly the domain URL of the calling page, so we can later use it for analytics purposes or for restricting the websites which can embed our widget.

For example, to get the list of recent posts, we need to send a GET query to the main WordPress website as shown below. Of course this query will be created by our JavaScript widget, wp-widget.js.

http://www.example.com/?em_embed=posts

The complete code for the plugin is given below.

<?php

/**
 * Plugin Name: WordPress Widget Embed
 * Description: Allow people to embed WordPress content in an iframe on other websites
 * Version: 1.0
 * Author: Sameer Borate
 * Author URI: http://www.codediesel.com
 */

class WPWidgetEmbed  
{
    public function __construct()
    {
        add_action('template_redirect', array($this, 'catch_widget_query'));
        add_action('init', array($this, 'widget_add_vars'));
    }
    
    /**
     * Adds our widget query variable to WordPress $vars
     */
    public function widget_add_vars() 
    { 
        global $wp; 
        $wp->add_query_var('em_embed'); 
        $wp->add_query_var('em_domain'); 
    }
    
    private function export_posts()
    {
        $outstring  = '<html>';
        $outstring .= '<head><style>';
        $outstring .= 'ul {
                padding:0;
                margin:0;
              }
              li {
                 list-style-type:none;
               }';
        $outstring .= '</style></head><body>';
         
        /* Here we get recent posts for the blog */
        $args = array(
            'numberposts' => 6,
            'offset' => 0,
            'category' => 0,
            'orderby' => 'post_date',
            'order' => 'DESC',
            'post_type' => 'post',
            'post_status' => 'publish',
            'suppress_filters' => true
        );
        
        $recent_posts = wp_get_recent_posts($args);
        
        $outstring .= '<div class="widget-posts"><ul>';
        foreach($recent_posts as $recent)
        {
            $outstring .= '<li><a target="_blank" href="' . get_permalink($recent["ID"]) . '">' . $recent["post_title"]. '</a></li>';
        }
        
        $outstring .= '</ul></div>';
        $outstring .= '</body></html>';
        
        return $outstring;
    }

    /**
     * Catches our query variable. If it's there, we'll stop the
     * rest of WordPress from loading and do our thing, whatever 
     * that may be. 
     */
    public function catch_widget_query()
    {
        /* If no 'embed' parameter found, return */
        if(!get_query_var('em_embed')) return;
        
        /* 'embed' variable is set, export any content you like */
        
        if(get_query_var('em_embed') == 'posts')
        { 
            $data_to_embed = $this->export_posts();
            echo $data_to_embed;
        }
        
        exit();
    }
}
 
$widget = new WPWidgetEmbed();

?>

To successfully intercept calls from another website, we need to first add the em_embed and em_domain parameters to our WordPress query_var variable. This will be used later to see what kind of data needs to be sent to the remote website. This is done by the following function.

public function widget_add_vars() 
{ 
    global $wp; 
    $wp->add_query_var('em_embed'); 
    $wp->add_query_var('em_domain');
}

Next, we will need to catch the query variable on the template_redirect hook and process any data if the em_embed variable is set in the global variable.

public function catch_widget_query()
{
    /* If no 'embed' parameter found, return */
    if(!get_query_var('em_embed')) return;
    
    /* 'embed' variable is set, export any content you like */
    
    if(get_query_var('em_embed') == 'posts')
    { 
        $data_to_embed = $this->export_posts();
        echo $data_to_embed;
    }
    
    exit();
}

In our example, we will be exporting a list of recent post titles, so our export_posts function will look like below.

private function export_posts()
{
    $outstring  = '<html>';
    $outstring .= '<head><style>';
    $outstring .= 'ul {
             padding-left:10px;
             margin:0;
          }
          
          li > a {
             text-decoration: none;
             font-family: Arial, Helvetica, Sans-serif;
             font-size:12px;
             
          }
           
          li {
             border-bottom: 1px solid #c0c0c0;
             padding: 3px 0 3px 0;
          }
    
          .widget-posts {
             width: 250px;
             border: 1px solid #c0c0c0;
             padding: 12px;
             margin-left: 3px;
          }';
    $outstring .= '</style></head><body>';
     
    /* Here we get recent posts for the blog */
    $args = array(
        'numberposts' => 6,
        'offset' => 0,
        'category' => 0,
        'orderby' => 'post_date',
        'order' => 'DESC',
        'post_type' => 'post',
        'post_status' => 'publish',
        'suppress_filters' => true
    );
    
    $recent_posts = wp_get_recent_posts($args);
    
    $outstring .= '<div id="widget-posts"><ul>';
    foreach($recent_posts as $recent)
    {
        $outstring .= '<li><a target="_blank" href="' . get_permalink($recent["ID"]) . '">' . $recent["post_title"]. '</a></li>';
    }
    
    $outstring .= '</ul></div>';
    $outstring .= '</body></html>';
    
    return $outstring;
}

This is all there is to the plugin. If you need to export any other data, you will need to replace the code for getting posts with code for getting the data you like.

Writing The Embeddable Widget Code

We have now completed only the part for the WordPress plugin. We still have to write the JavaScript embed code which will remotely access our website and insert the appropriate content into the calling page. The easiest way to display content from another website into your Web page is by using an iframe. The code needed to embed the content on a website is shown below.

<script type="text/javascript">
  var widget_embed = 'posts';
</script>
<script src="http://www.example.com/widget/wp-widget.js"
type="text/javascript">
</script>
<div id="embed-widget-container"></div>

If you are going to use the widget for returning only a single type of data,you can do away with the widget_embed variable. So you will have something like the following.

<script src="http://www.example.com/widget/wp-widget.js"
type="text/javascript">
</script>
<div id="embed-widget-container"></div>

wp-widget.js is the JavaScript that does all the work of calling the remote WordPress website and adding the content to the iframe. You need to place the wp-widget.js file in a subdirectory on your WordPress website; the exact name and location does not matter.

The complete code for the wp-widget.js is shown below, and is self-explanatory.

/**
  * wp-widget.js
  *
  * Inserts an iframe into the DOM and calls the remote embed plugin
  * via a get parameter:
  * e.g http://www.example.com/?embed=posts
  * This is intercepted by the remote 'WordPress Widget Embed' plugin
  *
  */

(function() {

// Localize jQuery variable
var jQuery;

/* Load jQuery if not present */
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.7.2') 
{
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js");
    if (script_tag.readyState) 
    {
      script_tag.onreadystatechange = function () 
      { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') 
          {
              scriptLoadHandler();
          }
      };
    } 
    else 
    {
      script_tag.onload = scriptLoadHandler;
    }
    
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} 
else 
{
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}


/* Called once jQuery has loaded */
function scriptLoadHandler() 
{
    jQuery = window.jQuery.noConflict(true);
    main(); 
}

/* Our Start function */
function main() 
{ 
    jQuery(document).ready(function($) 
    { 
        /* Get 'embed' parameter from the query */
        var widget = window.widget_embed;
        var domain = encodeURIComponent(window.document.location);
    
        /* Set 'height' and 'width' according to the content type */
        var iframeContent = '<iframe style="overflow-y: hidden;" \
                             height="550" width="400" frameborder="0" \
                             border="0" cellspacing="0" scrolling="no" \
                             src="http://www.example.com/?em_embed=' + widget + '&em_domain=' + domain + '"></iframe>';
                             
        $("#embed-widget-container").html(iframeContent);
    });
}

})();

The task of inserting the iframe and the WordPress content in the DOM is accomplished by the main() function. The iframe size needs to be changed depending on your requirements or created dynamically by letting the user pass additional parameters along with the widget_embed variable in the main widget code.

Adding Custom CSS To The Content

You can also add custom CSS to the displayed content through the plugin. Sample CSS to go with the above plugin is given below. You can also specify a style sheet URL if needed.

private function export_posts()
{
    $outstring  = '<html>';
    $outstring .= '<head><style>';
    $outstring .= 'ul {
             padding-left:10px;
             margin:0;
          }
          
          li > a {
             text-decoration: none;
             font-family: Arial, Helvetica, Sans-serif;
             font-size:12px;
          }
           
          li {
             border-bottom: 1px solid #c0c0c0;
             padding: 3px 0 3px 0;
          }
          
          .widget-posts {
             width: 250px;
             border: 1px solid #c0c0c0;
             padding: 12px;
             margin-left: 3px;
          }';
    $outstring .= '</style></head><body>';
    .
    .

The type of CSS you add to the content will depend on what content you are displaying. With a little creative coding, you can also allow the user to add certain display options to the widget with which they can control the display style of the embedded widget.

Restricting Display To Certain Domains

You may want to allow only certain domains to be able to display your content using the widget. This can easily be made possible, as we already have the calling website’s url in the em_domain variable. All we have to do is check the domain and selectively allow the content to be displayed.

public function catch_widget_query()
{
    /* If no 'embed' parameter found, return */
    if(!get_query_var('em_embed')) return;
    
    /* 'embed' variable is set, export any content you like */
    
    if(get_query_var('em_embed') == 'posts')
    { 
        $allowed_domains = array('site1.com',
                                 'site2.com',
                                 'site3.com');
                                 
        $calling_host = parse_url(get_query_var('em_domain'));
        
        /* Check if the calling domain is in the allowed domains list */
        if(in_array($calling_host['host'], $allowed_domains))
        {
            $data_to_embed = $this->export_posts();
            echo $data_to_embed;
        }
        else
        {
            echo "Domain not registered!";
        }
    }
    
    exit();
}

Performance Concerns

Allowing other websites to access your content via widgets means additional load on your servers. A few hundred websites using your widget could easily slow down your server, so take this factor into consideration when promoting widgets. However, plugins like WP Super Cache can be used to cache widget data and reduce server load. If you are not using WP Super Cache or any other cache plugin, you can try using the WordPress Transients API to save the results into the database.

The WordPress Transients API offers a simple and standardized way of storing cached data in the database temporarily by giving it a custom name and a time frame, after which it will expire and be deleted. The catch_widget_query() function after adding the WP Transient API code is shown below.

public function catch_widget_query()
{
    /* If no 'embed' parameter found, return */
    if(!get_query_var('em_embed')) return;
    
    /* 'embed' variable is set, export any content you like */
    
    if(get_query_var('em_embed') == 'posts')
    { 
        /* Here we are now using the 'WP Transient API'. 
           See if we have any saved data for the 'ewidget' key.
         */
        $cached = get_transient('ewidget');
        
        /* Oops!, the cache is empty */
        if(empty($cached))
        {
            /* Get some fresh data */
            $data_to_embed = $this->export_posts();
            
            /* Save it using the 'WP Transient API' using the 'ewidget' key,
               set it to expire after 12 hours.
             */
            set_transient('ewidget', $data_to_embed, 60 * 60 * 12);
            echo $data_to_embed;
        }
        /* Yes we found some, so we return that to the user */
        else
        {
            echo $cached;
        }
    }
    
    exit();
}

In Conclusion

Sharing your content across different websites is a nice way to market your services and create brand awareness. With millions of WordPress websites around, there is a huge amount of content out there that can be profitably shared among users. Not just text, but also images, videos, advertisements, etc. This article is just a simple implementation of an embeddable widget. You can customize it in various ways to include security, analytics code to track widget usage and other functionality.

(cp)

© Sameer Borate for Smashing Magazine, 2012.