Just as we focused on CSS a few days back, today we take a look at 50 of our favorite Javascript resources from 2013. You will notice that this article does not include any jQuery resources as we have already published a dedicated jQuery round-up post last week, you can check that out here.
But if you are looking for a standalone Javascript framework or library, then this is the place for you!

So, here we go, our 50 favorite Javascript resources from 2013:

React

React is a JavaScript framework from Facebook for building user interfaces.

React

It is that time of the week again, a chance for you to sit back and enjoy some of our favorite web and mobile designs from this past week.

You may also like to browse the Web & Mobile Creativity Archives.

Media Temple (Redesign)

MailChimp Annual Report 2013

Meet Your MX

Peak

Wedge & Lever

Brindisa Tapas Kitchens

De Republica

Medical Apps (Mobile App Concept)

Unless you’ve been on Mars for the last few months, you’ve already heard the news that Adobe is feature-freezing Fireworks. And Adobe is not offering a replacement tool for Fireworks users (at least, not for now.)

What does this mean for you if you use (and rely on) Fireworks to design user interfaces and screens? What are your options?

In this article, we’ll take a close look at Adobe Fireworks, explaining why it is a unique and powerful design tool, how we can continue to use it effectively, and what our alternatives are for the future.

But first, a bit of background.

I have been using Fireworks since the Macromedia days, and I find it indispensable in my daily design workflow. Fireworks is like a small (but powerful) Swiss Army knife, or a superhero. In short, Fireworks is extremely versatile and powerful for screen design.

In fact, I am so passionate about this tool that when Vitaly Friedman asked me to be the editor of the Fireworks section of Smashing Magazine a couple of years ago, I instantly said “Yes!” Fast-forward to today: We’ve published over 20 high-quality articles about Fireworks and received many positive comments from our readers.

The news earlier this year that Adobe is abandoning Fireworks made me very sad. Looking at the over thousand comments on the Adobe Fireworks blog, it seems that I am not alone and that Fireworks will be missed by many.

So, what can you do if you also use Fireworks?

The good news is that we have quite a few options to continue using it, as well as some new apps on the horizon that could take its place. Let’s explore them!

1. Adobe Fireworks: The Current Situation

First, let’s look at the bad news official status of Fireworks. In May 2013, Adobe announced that it was “feature-freezing Fireworks CS6”, meaning that no new features would be added to Fireworks and that Adobe has ceased active development.

The future of Adobe Fireworks is quite uncertain. (Image: by Ryan Hicks.)

The good news? Adobe has stated that official patches (i.e. minor updates) will be provided from time to time so that Fireworks CS6 continues to work on the latest versions of Mac OS X and Windows — hopefully, for a few more years. The first update (12.0.1) was released in June, and I hope we’ll see a few more in the next year or two. Fireworks CS6 is still available to all Adobe Creative Cloud (CC) subscribers, and it can be also purchased as a standalone version.

(Note: Unfortunately, it is very unlikely that Adobe will ever open-source Fireworks, even if there was a petition with thousands of signatures asking Adobe to allow the community to continue developing and enhancing Fireworks. Fireworks is tightly integrated with software that Adobe continues to develop and sell.)

Now, the better news? While Adobe will not add features to the latest (and last) version of Fireworks, a great community of developers continues to add valuable new functionality to Fireworks through the release of free extensions. For example, SVG export was recently added to Fireworks, then SVG import and many other new features. (We’ll talk about extensions in detail later.)

So, while Fireworks’ future does not look bright, you can continue to safely use it for your work today and at least for some time. Also, alternative apps could replace Fireworks in the future. Within weeks of Adobe’s announcement about feature-freezing Fireworks, several competing tools were announced. Clearly, Fireworks is an important tool for many designers, and there is a clear place for it (and tools like it) in our workflow and processes. (We’ll talk a bit about these alternatives later in this article, too.)

2. Why Fireworks Is So Awesome (Today)?

Designers, especially ones with little or no experience with Fireworks, often ask, “Why should I use Fireworks for UI design and screen graphics? Why not use Photoshop (as most visual designers do), combined with Illustrator? Or why not some other tool?”

Many features make Fireworks an excellent (and even indispensable) tool for screen design. We’ll quickly list a few below.

Focus on Screen Design

Fireworks is a tool to design for screens; thus, it is focused. It has features that help the UI designer work quickly and accurately, and clutter is kept to a minimum (for example, it has no print or 3-D features). It is also intuitive to use and has wireframing and prototyping capabilities. Fireworks is like a Swiss Army knife for UI design.

Powerful Vector Tools

Fireworks has powerful vector tools, too. In this regard, you could easily compare it to Adobe Illustrator — yet Fireworks’ tools are easier to master. You can go from the simplest of wireframes to the most complex of screen graphics, illustrations, icons, and full-page designs and comps, and then export the entire page or just selections as optimized bitmaps or SVG, without ever needing to switch to another app!

Good Bitmap Editing Tools

Fireworks also has full bitmap editing tools, so you don’t need to jump from Fireworks to another app when you want to modify bitmaps (for example, when you have to make a quick color correction on an imported photo, crop an image, apply a vector mask, etc.).

Create Live Prototypes

Create live (i.e. HTML) without ever leaving Fireworks? Yes, that’s possible. We’ve covered this in the past. Fireworks is also invaluable for other types of live prototypes; for example, you could quickly create a prototype of a music player?

Create Live iOS Prototypes

Fireworks can also create iOS prototypes. From wireframes to an iOS prototype to the final polished design — all of these steps can be done without leaving this one design tool!

The topic of iOS live prototyping with Fireworks and TAP was covered in great detail in the three-part article by Shlomo Goltz, “iOS Prototyping With Adobe Fireworks and TAP” (part 1, part 2, part 3).

The (Smart) Fireworks PNG File Format

Fireworks saves to a special editable PNG format, which offers many advantages: small file size (multi-page Fireworks PNG files are usually less than 10 MB in size, while a single PSD file can easily reach a few hundred MB, even for a one-page design!), the ability to embed custom meta data (such as annotations, notes and comments) within the source file itself, the ability to preview files in Finder and Explorer, the ability to make special libraries of symbols (which can be indexed and searched, as in the example of the Evernote and Fireworks workflow) and, last but not least, the ability to view a live preview of a single-page Fireworks PNG in any browser or device.

Excellent Exporting, Opening, Importing and Saving Options

Fireworks can export to the following formats, with excellent compression and quality: PNG32 (i.e. PNG24 + alpha transparency), PNG24 (with no transparency), PNG8, PNG8 + index or alpha transparency, JPG and JPG progressive, selective JPG, GIF and GIF animated, SVG, and ICO (for favicons).

In addition to all of these “flat” file formats (and, obviously, the editable file-name.fw-opt.png), Fireworks can open most Photoshop (PSD) and Illustrator (AI) files, Encapsulated PostScript (EPS) files and most SVG files.

Fireworks saves to the editable Fw PNG (file-name.fw-opt.png) format by default, but it can also save to PSD (file-name.psd) and AI (file-name.ai) formats.

(Note: Support for PSD and AI files has some limitations, especially as the features of Photoshop and Illustrator continue to change.)

Pages and Master Page, Layers, States (and Objects)

Nearly all websites and mobile apps have more than one page or screen, and many pages and even many states (or variations) of those pages have to be designed. One of the most powerful features of Fireworks is its ability to contain many pages in a single file, as well as contain many states for both pages and individual objects in a design (the article “Using Pages, States and Layers in Fireworks” discusses this thoroughly).

Pages, layers and states

Those of you familiar with Photoshop might know about layer comps, but the pages feature in Fireworks is much easier to use and understand; multiple artboards in Illustrator serve a similar purpose, but once again, the concept of pages is more intuitive and corresponds more closely to our mental model of the pages in a website or app. Additionally, the Master Page in Fireworks enables us to create a standard structure (for example, header and navigation) for all of the pages on a website in one place and have it appear on all pages automatically. Thus, if you edit the Master Page, the changes will instantly and automatically appear on all pages.

The text, images and graphics that are placed on pages are organized in layers; layers may contain multiple objects and even sublayers. Because Fireworks is an object-based design tool (that is, each object is independent of the others — you simply click on an object on the canvas to select it), we use the layers primarily to organize our source files. We can share layers to multiple pages (so, editing on one page would change that layer on all pages), control the visibility of layers, and even export the objects of selected layers.

Fireworks also enables us to create multiple states (previously called “frames” because they were originally used for animated GIFs and Flash animations) of pages and individual objects. This is important and very useful for UI design, because many screens and screen elements have multiple possible states (for example, buttons could have hover or focus and down states), and sometimes you’ll design a few options for the same object to show variations to your client. States are also important for symbols (both graphic and animation) and rich (or component) symbols, because we can encapsulate many variations in a single symbol and then reuse that symbol in different states throughout the design and across pages, and we can even share symbol libraries with others to use them across files and projects!

Copy And Paste Attributes

Want to apply all properties of a particular object (colors, stroke, fill, live filters, etc.) to another object (or group of objects)? Easy! The super-powerful command Control/Command + C and then Control/Command + Alt + Shift + V will do it for you!

And what if you want to apply only certain properties of one selected object to another? This is possible, too, with the Paste Selected Attributes extension!

Excellent Tool for Mobile Design

Because Fireworks is (primarily) a vector design tool (which means easy scalability), it can be used equally well for all kinds of mobile design: iOS, Android, Windows Mobile.

Design From A to Z in Fireworks

Fireworks could be the right tool for every stage of a screen design project. You can start with ideas and sketches on paper, move to wireframes, then to (live) prototypes, then to the final polished design (and design assets), without ever leaving Fireworks. No need to constantly jump between tools depending on the task at hand — this workflow could save you quite some time.

Symbols and Rich Symbols

Fireworks has a two types of symbols: graphic symbols and rich (or component) symbols. The value of symbols is that they can be created once and then used multiple times throughout a design wherever needed. Then, if you edit a symbol, those changes will immediately appear in every occurrence (or instance) of the symbol in the document. The key difference between a graphic symbol and a rich symbol is that the former has the same appearance in all instances (for example, icons are typically created as graphic symbols), whereas rich symbols are much more complex, and each instance can be customized (for example, a button might have the same shape, but its text label can be edited and its color changed to indicate alternate states, such as hover and disabled), yet the core design of the rich symbol would be shared by all instances.

While graphic symbols are common to many design tools, rich symbols are especially powerful because they combine graphics, editable properties and even code, so that we don’t need to draw and redraw similar objects repeatedly. Their efficiency alone is great enough, but rich symbols can also be saved in libraries and shared with others, because they use the same editable Fireworks PNG format as all other Fireworks documents. There are even techniques to create cloud-based symbol libraries that can be shared and managed by an entire team!

Here are a few resources to teach you more about using symbols in Fireworks:

Styles

Styles are like CSS for Fireworks files: Define text and graphic styles once, then apply them as needed throughout an entire document. If you edit a style, all instances of that style in the document will be updated. Creating, saving and sharing style libraries with others to ensure design consistency across a team is also easy. Fireworks even enables you to apply a style to an object and change how that instance appears without breaking the link to the original style; then, you can revert to the original, save the modifications as a new style and even use the modifications to redefine and update the original style, with those changes being applied to all instances of the style in the document.

In fact, styles are so much like CSS that an extension exists to export styles as CSS!

Styles in Fireworks: Creating, redefining, copying and breaking a link to a style are easy to do.

Here are some sources that you might find useful:

Slicing

Slicing is a common way to extract and save specific graphics from a complete design, such as background patterns, button graphics, icons and illustrations. Fireworks makes it easy to slice multiple graphics quickly. Simply select all of the objects that you want to save as graphics, click Edit

For this weeks giveaway we have three Developers Licenses to giveaway from Divine Elemente, a Photoshop plugin that converts PSD templates into ready-made WordPress themes.

About Divine Elemente

Sure, coding a WordPress theme isn’t exactly complicated once you’ve done it a couple times. But it’s not exactly a quick process, either.

Instead of spending hours coding your themes, why not just use Divine Elemente?

This Photoshop plugin (for Windows only) can save you more than 90% of the time you would normally spend for theme creation, by letting you create PSD templates with all necessary WP elements, or converting existing PSD templates into ready-made WP themes.

You can design more themes in less time (and make more money)!

Become a WordPress Developer in 4 Simple Steps:

The samples below are just some of PSD templates created with the help of Divine Elemente:

Flat UI WordPress PSD Template

The new WordPress PSD template created with the help of Flat UI PSD kit by DesignModo.

Halo 4 Game WordPress PSD Template

Simple, modern and Halo fans oriented theme, created by Divine Elemente team.

Diablo 3 Game WordPress PSD Template

If you are one of the Diablo’s fans – this theme can become the perfect starting point for your website!

These and others WordPress PSD templates you may download from Divine Elemente official website for free: See All PSD Templates »

How to Enter The Competition

Just tweet the following:

Retweet to get a chance to win PSD to WordPress plugin. Contest by @SpeckyBoy and @DivineTeam – #divinespeckydeal – http://speckyboy.com/

CLICK TO TWEET

Don’t forget to place the link to your tweet in the comments, it will increase your chances.

This competition will run for the next seven days. All winners will be chosen at random by the unique hashtag “#divinespeckydeal“.

That’s not all… Just for the community of SpeckyBoy, Divine Elemente team provided 50% discount coupon “speckyboy” (Only ten copies, valid throughtout January 2014).

All the best!

A while back, I wrote a post about starting an open-source project. The focus of that article was on starting an open-source project as an individual. I received a lot of positive feedback and also some questions about how the process changes when you’re open-sourcing a project at work.

Open source projects are always a team effort, and they always require a dedicated commitment to the project. Image credit: open source way

Many companies are starting to investigate and participate in the open-source community, and yet few guides for doing so exist. This article focuses primarily on the process of open-sourcing a project at work, which brings with it other concerns and decisions.

Why Open Source?

Before delving into the how, it’s useful to step back and talk about the why. Why is it that so many companies have or are starting to establish an open-source presence? There are actually a number of reasons:

• Technical brand
  Companies want to be known as a place where smart people work. One excellent way to show this is by releasing code that has been written at the company. Doing so creates mindshare in the community, familiarity with the company and its contributions, and fodder for future technical brand initiatives (such as giving talks at meetups and conferences).
• Recruiting
  Time and again, you’ll see contributors joining companies that sponsor open-source projects. I saw this happen frequently while at Yahoo, where YUI contributors would sometimes end up as Yahoo employees after having contributed to the project on an ongoing basis. Similar hires have occurred in the Node.js community. The reason is pretty clear: If you work on an open-source project in your spare time, imagine how great it would be to turn that hobby into a job. Additionally, allowing job candidates to see some of the company’s code gives some good insight into what working at the company would be like.
• Giving back
  A lot of companies benefit from open-source software, and contributing open-source software back into the world is a way of giving back. These days, it’s part of what it means to be involved in the technical community. When you receive, find a way to give back. A lot of companies are embracing this philosophy.

There are many more reasons why companies are choosing to open-source, but these are the primary drivers. Therefore, the process of open-sourcing a project must be aligned with these goals while protecting the company’s interests.

Getting Started

Suppose someone at your company wants to open-source something. This has never happened before and you’re not sure what to do. Do you just put it up on GitHub? Announce it in a press release or blog post? How do you know that the code is OK to open-source? There is a lot of planning to do, and it all starts (unfortunately) with the legal department.

Giving away company assets is as much a legal issue as anything else. The very first conversation should be with an appropriate member of your company’s legal team to discuss the ins and outs of open-sourcing. In larger companies, one or more intellectual property (IP) attorneys are likely on staff or on retainer; in smaller companies, this conversation might start with the general counsel. In either case, it’s important to lay out exactly what you want to do and to clarify that you’d like to formalize a repeatable process for open-sourcing projects.

The primary legal concerns tend to be around licensing, code ownership and trade secrets. These are all important to discuss openly. Because many companies have done this already, you should have a fair amount of evidence of how other companies have established their processes. The most important thing is to engage the legal department early in the process and to have a champion on the legal team who you can work with should any issues arise.

Choose A Default License

One of the first topics of discussion should be which open-source license the company will use as its standard. Leaving the team for each project to decide for itself which license to use is a bad idea, because a lack of awareness could quite possibly lead to two projects from the same company having incompatible licenses. Decide up front exactly which license to use, and use it for all open-source projects in your company.

I touched on the different types of licenses in my previous article (also, see “Understanding Copyright and Licenses”). In general, companies tend to standardize either the three-clause BSD license or the Apache license. Very rarely will a company standardize the MIT license, because the standard MIT license doesn’t contain a clause that prevents use of the company’s name in advertisements for software that makes use of the project. The Apache license has additional clauses related to patent protection, which some companies prefer.

The ultimate choice of a license typically comes down to legal considerations on the nature of the code being released. The philosophical implications of which license you choose are not important; using the same license for all projects in your company is important.

Outgoing Review

The next topic of discussion should be to define an outgoing review process. Just putting code out in the public without some sort of review is neither safe nor sane. In general, a request to open-source a project should be reviewed by the following:

• Legal
  As mentioned, the legal department needs to be kept in the loop during this process. They will likely not review the code, but rather will want to understand what the code does and whether it could be considered a company secret.
• Security
  Someone with a security mindset should actually look at the code to make sure it doesn’t reveal any security issues or contain code that should not be made public. This process could be manual or automated, depending on the complexity of the code.
• Executive
  Someone on the executive team needs to approve the request, basically saying that they believe this code is safe to share and that they are aware that the code is being published.

Exactly how an outgoing review gets started tends to be company-specific. It could be done by submitting a request to a mailing list, filling out a form or just setting up a meeting. How it’s implemented isn’t as important as the fact that the review occurs and is done quickly. So, setting a deadline for a response is a good idea. Depending on the size of the company, this could range from a few days to a few weeks, but setting up the expectation ahead of time helps to alleviate any scheduling issues.

Accepting Contributions

One part of the process that is often forgotten is figuring out rules for accepting external contributions. Open-sourcing a project is basically a way of saying, “Hey, we’d love to have you fix our bugs!” Part of the point is to get people interested enough to want to contribute to the project. Establish a process so that you know how and from whom external contributions may be made.

When building something, accepting external contributions can significantly benefit the project, but you need to establish a process for contributions first. Image credit: open source way.

The company should require a contributor license agreement (CLA) to be signed before accepting contributions from external developers. A CLA is a legal document that typically states a few things:

• The contributor asserts that they are the original author of the code they are submitting.
• The contributor grants the project the right to use and distribute the code they are submitting.
• The contributor has the right to grant the previous two points.
• Any code submitted by a contributor is not guaranteed to be accepted or used.

Take the Node.js CLA. It’s a pretty straightforward form that defines the expectations for contributors and asks for the contributor’s name and other information. These days, asking for someone’s GitHub user name as well is quite common (to help automate the process of checking CLAs for commits).

The CLA will be important should any legal action be taken against your company as a result of the code contained in the project. Because the company is the maintainer of the project, any legal action would likely be directed at the company itself, rather than any individual contributor.

CLAs are sometimes controversial, and some developers refuse to sign them. That’s an acceptable loss to protect yourself and your company from the legal risks of open-source projects. Those who are familiar with the open-source community and the reason behind CLAs will be more than happy to sign on and contribute to your project.

Maintaining The Project

An overlooked part of the open-source process is maintaining the project once it’s been published. Many developers (and some companies) view the step of open-sourcing a project as the end of the process — they’ve already spent considerable time creating software that they now want to share with the world. In truth, open-sourcing a project is the beginning of a journey. The act of sharing now makes it, effectively, communal software, and you can now expect the project to be discussed and to evolve as a whole.

Once a new project is open-sourced, eventually you’ll start receiving suggestions, requests and pull-requests. Maintenance is a task that is often overlooked in open-source projects. Image credit.

Many companies that are new to the open-source community make the mistake of publishing their code and leaving it behind. Issues are left unresolved and unanswered, road maps are not shared, pull requests are ignored, and there is no way to get in contact with the people behind the project. As much as open-source projects can enhance your technical brand, leaving projects in this state can hurt it.

Once you’ve open-sourced a project, you must commit to maintain it. Even stable software will have bugs, and some of those bugs could be found by people outside of your company. If you have no intention of interacting with anyone outside of the company on this project, then you might want to consider simply distributing the compiled binary or library freely, and not actually open-sourcing the code.

While there are no established rules for maintaining a project, here are some guidelines I follow:

1. The public repo is the source of truth.
   Once you’ve published your source code to a public repository (or repo), all development should happen in that repository. The public repo shouldn’t simply be a clone of an internal one. If the project is being actively developed, then that development should happen exclusively in the public repo in order to be as transparent as possible. Developing in private and then updating periodically prevents the use of pull requests and makes forking your project extremely difficult and frustrating.
2. Plan in public.
   Use a public bug tracker to track all issues, so that others can see what’s being worked on and what’s already been reported. Post a road map somewhere public that shows plans for development. Be as transparent about the development process as possible. In short, open-source the way your project will grow and evolve.
3. Dedicate company time.
   If you are the primary author of the project and you’ve open-sourced the code, then you (or a delegate) should set aside time to interact with external contributors. That means making timely responses to pull requests and issues, which in turn means setting aside time daily or weekly. This has now become part of your full-time job, not just a hobby.
4. Open channels of communication.
   Give external contributors a way to interact directly with the maintainers. This could be through a forum, mailing list, IRC chat or another channel. Make sure that these systems are public; for example, an IRC chat should not be on your company’s chat server. Plenty of free communication services exist to make use of. The simplest and least disruptive method is to create a free mailing list using Google Groups or Yahoo Groups.
5. Commit to document.
   Lack of documentation is a huge problem with open-source projects. From the start, commit to writing good documentation that explains not only how to use the project but also how to set up a development environment, run tests and work effectively with the code as a contributor. There is no better way to discourage people from using your software than to give them no way to get up and running on their own.
6. Maintain regular outgoing communication.
   There should be a steady stream of outgoing communication about the project. At a minimum, post announcements about new releases and security issues that require immediate upgrading. Maintain changelogs that describe differences between versions, and follow a predictable and regular scheme in your versioning (such as by following semantic versioning). This will help both users and contributors understand the impact of filing issues and submitting pull requests.

An open-source project very quickly takes on a life of its own once released. If a community forms around the project, then it could take up more and more of your time. That’s why a commitment to maintain the project needs to be a part of the open-sourcing process. Letting a project languish without any attention sends a horrible message to those outside of your company and will discourage people from contributing.

Warning Signs

Most open-source projects, whether by individuals or companies, are started with the best of intentions. Typically, the goal is to share learning and code with the world. However, the Internet is littered with abandoned projects. If your project ends up like this, it could hurt your and your company’s reputation. Projects slowly decay over time and can usually be identified by one or more of the following characteristics:

• “Not enough time”
  The more frequently this phrase appears in responses to pull requests and issues, the more likely the project is headed for the graveyard. This is one of the top reasons why projects die: The maintainer runs out of time to maintain it. As should be obvious from this article, maintaining a project requires a significant amount of work, which is frequently not sustainable in the long term.
• Too few contributors
  If most contributions come from one person, then the project is likely either early in its life (on the upswing) or close to the end. You can easily tell which is the case by looking at the date of the first commit. Thriving projects tend to have a large number of commits from the maintainer and a small number of frequent commits from a few others. Another good way to measure this activity is in the number of merged pull requests in the last year.
• Too many open issues and pull requests
  A surefire sign that a project is on its way out is issues and pull requests that are left open with no comment. More than a few issues that have been open for a year means that the project isn’t being cared for.
• No way to contact the maintainer
  If you can’t find a reliable way to contact the maintainer, whether through email, a mailing list, Twitter, issues or pull requests, then there’s not much hope for the project. Maintainers aren’t maintaining if they aren’t communicating.

Keep an eye on these patterns in your own project. If you recognize the warning signs, then you’ll have to decide what to do with the project. Either someone else should become the maintainer or it’s time to end-of-life the project.

End-Of-Lifing Projects

At some point, you or your company might find that there is no longer interest in maintaining the project. This is a natural evolution of software — sometimes a project outlives its usefulness. When this happens, you need to appropriately end-of-life the project.

End-of-lifing typically starts with a public announcement that the project is no longer being actively maintained (along with a post in the project’s README file). The announcement should address the following:

• Why is the project being end-of-lifed? Has it been superseded by something else? Is it no longer in use? Do you recommend different software written by someone else?
• What will happen to outstanding issues? Will bugs still be fixed? Will all outstanding issues be closed without being fixed?
• Is there an opportunity to transfer ownership? If someone really likes the project, is your company willing to transfer ownership to them or their organization?

Ultimately, you might decide to delete the repository completely. While being able to see all of a company’s projects, even those that have been end-of-lifed, is sometimes nice, that comes at a cost, and so removing repositories from time to time might be prudent. In doing so, be certain that you have effectively communicated that the project is going away, and give at least 30 days notice to allow others to fork the project if they are so inclined.

Conclusion

Open-sourcing projects at work is a great initiative for many reasons. When done correctly, an open-source presence will do a lot to promote your company and its employees. Active open-source involvement signals your company’s willingness to interact with the technical community and to contribute back, both signs of a strong technical brand.

On the other hand, a poor open-source presence is worse than no presence at all. It signals general laziness or apathy towards a community of developers, a community that might very well want to help your project succeed. Few things are as demoralizing as trying to work on an open-source project that has been abandoned. Don’t be that company.

(al)

Designing sites for smartphones and tablets sounds awesome when you are reading about it. You get all excited about the awesome possibilities of having your homepage look and feel great on multiple mobile devices (and non-mobile devices alike). However, when you actually stop the dreaming and get to the doing, your joy literally gets knocked in the teeth by the fearless fists of sorrow.

Have you ever been so frustrated that you shout out the phrase that is identified by those notorious letters “WTF“, but you’re so gobsmacked with said frustration that you skip the first word and then can’t even finish the expletive, you’re just like “…THE FFFFF…?!” Well, that’s what it was like for me about a year ago when I was trying to get the hang of this responsive and adaptive web design thing, and I’m pretty sure I’m not the only one.
It was – to put it lightly and like Jerry Maguire – “An Up-at-dawn, Pride-swallowing Siege”. Numerous CSS media queries, polyfills, and shims, all conspiring like minions to make me less productive. This whole scenario is one of the primary reasons I felt compelled to develop the Restive Plugin.

So what is the Restive plugin?! Basically, it’s a jQuery Plugin that enables any web designer to put together responsive and adaptive web sites as though they were an expert at it. The only real skill you need to have is HTML and CSS (which every web designer should know anyway). Most web designers can pretty much design any web site they want for any screen size using HTML and CSS. The real problem is getting everything to work on every device, and the Restive Plugin helps make this happen.

A Working Example

Let’s say today is “Hello World” Day, the day you’re going to build your first site using the Restive plugin (with the help of HTML and CSS). I find that it’s usually easier getting my head around something tough when you work through a simple example. So let’s do that right now.

So, let’s assume you have an existing site that was initially designed primarily for the desktop, but we now want to make it responsive and/or adaptive to mobile devices (this is the scenario most of us will be saddled with as not everyone has the luxury of “mobile-first”).

The site code base is as follows:

The HTML

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title>Restive Plugin</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
 <link rel="stylesheet" href="global.css" type="text/css">
 
 </head>
 
 <body>
 
     <header>
     	<section id="hs-level-1">
         	<article id="hs-level-1-content">
             	<div class="logo"></div>
             </article>
         </section>
         <section id="hs-level-2">
         	<article id="hs-level-2-content">
             	<nav>
                     <ul class="menu">
                 	    <li><a href="#">Item 1</a></li>
                         <li><a href="#">Item 2</a></li>
                         <li><a href="#">Item 3</a></li>
                         <li><a href="#">Item 4</a></li>
                         <li><a href="#">Item 5</a></li>
                         <li><a href="#">Item 6</a></li>
                     </ul>
                 </nav>
             </article>
         </section>
     </header>
 
 	<div id="wrapper">
     	<section id="bs-level-1">
         	<article id="bs-level-1-content">
             	<h1>My Page Title</h1>
                 <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus venenatis lacus nec dignissim. Pellentesque nisl diam, congue nec purus ut, convallis consectetur dui. Proin aliquam mauris et nunc accumsan tristique vulputate eu eros. Pellentesque eget massa in magna pellentesque dapibus. Suspendisse accumsan eu mi id lacinia. Nullam sit amet dolor quis ipsum consequat tempor ut ornare mi. Vestibulum volutpat dictum adipiscing. Etiam ac justo condimentum, molestie diam eu, pulvinar elit. Nullam sagittis, ante sagittis eleifend bibendum, nunc elit commodo nunc, ut euismod lectus dui id neque. Etiam ut commodo eros. Aenean sagittis viverra tincidunt. Nunc posuere posuere consectetur. Integer tincidunt tortor eget nulla cursus, ut consectetur leo tristique.
                  </p>
                  <p>
 Donec tempus consectetur tellus, non elementum nunc consectetur at. Nunc quis turpis ac ligula tincidunt aliquam. Mauris ante est, pharetra id sem ac, ultricies semper orci. Pellentesque sit amet mauris non massa lobortis ultrices a accumsan est. Donec tempor interdum ante, vitae volutpat neque faucibus eu. Integer sit amet blandit velit. Curabitur justo odio, consectetur vitae urna et, consectetur pharetra nibh. Nunc consectetur porttitor leo, non accumsan velit ultrices eget. Pellentesque vitae consectetur elit, non pharetra odio. Vivamus dictum laoreet dui, a sodales purus tristique sed. Nunc quis elit quam. Praesent facilisis tempor tempus. Etiam ullamcorper felis quis dui auctor aliquam. Cras luctus orci ut porta viverra. Ut eu dui sed libero convallis adipiscing sed ut elit.
 				</p>
             </article>
         </section>
     </div>
 
     <footer>
     	<section id="fs-level-1">
         	<article id="fs-level-1-content">
             	<div class="contact">
                 <p>1 WhereIWork Lane, WhereILive, USA 10101</p>
                 </div>
             </article>
         </section>
         <section id="fs-level-2">
         	<article id="fs-level-2-content">
             	<div class="legal">
                 <p>Copyright © 2013 Business Inc.</p>
                 </div>
             </article>
         </section>
     </footer>
 
 </body>
 </html>
 

The CSS

 /** global.css **/
 /*
 	CSS Reset by Eric Meyer - Released under Public Domain
  http://meyerweb.com/eric/tools/css/reset/  */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0; font-size: 100%; font-weight:normal; vertical-align: baseline; background: transparent;}
 body              {line-height: 1;}
 ol, ul            {list-style: none;}
 blockquote, q     {quotes: none;}
 blockquote:before, blockquote:after,
 q:before, q:after {content: '';	content: none;}
 :focus            {outline: 0;}
 ins               {text-decoration: none;}
 del               {text-decoration: line-through;}
 table             {border-collapse: collapse;border-spacing: 0;}
 small, sub, sup { font-size: .83em; }
 sub             { vertical-align: sub;}
 sup             { vertical-align: super; }
 
 /*------------------------------------------
 Global Styles
 -------------------------------------------*/
 /* 	SET ALL ELEMENTS TO BOX-SIZING : BORDER-BOX */
 * {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 	*behavior: url(boxsizing.htc);
 	/*	If you need support for IE7 and lower make
 		sure the boxsizing.htc file is linked properly.
 		More info here:  https://github.com/Schepp/box-sizing-polyfill */
 }
 
 body {font-family: Arial, Verdana, sans-serif; font-size: 100%;  background-color: #ffffff; margin: 0 auto; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility;}
 img{max-width: 100%;}
 
 /*------------------------------------------
 Layout
 -------------------------------------------*/
 .clear{clear: both; display:block; overflow:hidden; visibility:hidden;}
 #ie .clear{clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:1px;}
 .clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
 .clearfix {display: inline-block;}
 /* start commented backslash hack \*/
 * html .clearfix {height: 1%;}
 .clearfix {display: block;}
 /* close commented backslash hack */
 
 
 header {width: 100%;}
 header #hs-level-1 {height: 70px;}
 header #hs-level-2 {height: 60px;}
 
 #wrapper {width: 100%; padding: 30px 0 15px 0;}
 #wrapper #bs-level-1 {}
 #wrapper #bs-level-1-content{}
 
 footer {width: 100%;}
 footer #fs-level-1 {}
 footer #fs-level-1-content {background-color: #eee;}
 footer #fs-level-2 {}
 footer #fs-level-2-content {background-color: #ddd;}
 
 section article {width: 960px; margin: 0 auto;}
 
 /*------------------------------------------
 Typography
 -------------------------------------------*/
 h1, h2, h3, h4 {font-weight: bold;}
 p {font-size: 110%; padding: 0 0 15px 0; line-height: 1.6em;}
 
 #wrapper section article p {font-size: 120%; padding: 0 0 25px 0;}
 #wrapper section article h1{font-size: 180%; padding: 0 0 15px 0;}
 footer p {font-size: 100%; padding: 0 0 5px 0; color: #666;}
 
 /*------------------------------------------
 Menu
 -------------------------------------------*/
 header nav {}
 header nav ul.menu {margin:0px; padding:0px; list-style-type: none; height: 60px;}
 header nav ul.menu li {float: left; background-color: #000; width: 160px; height: 60px; line-height: 60px; vertical-align:middle; text-align: center;}
 header nav ul.menu li a {color: #fff;}
 header nav ul.menu li a:hover {text-decoration: none;}
 
 /*------------------------------------------
 Embellishments
 -------------------------------------------*/
 header #hs-level-1-content .logo {font-size: 420%; font-weight: bold;}
 footer #fs-level-1-content .contact {}
 footer #fs-level-2-content .legal {}
 
 /*------------------------------------------
 Mobile - for Restive Plugin
 -------------------------------------------*/
 

As it stands, the above code is neither responsive nor adaptive.

NOTE: Just in case you didn’t notice, the CSS file is embedded by the link tag via global.css and is not inline.

NOTE: We have placed a section header in the CSS file titled “Mobile – for Restive Plugin” in anticipation of the CSS code that will be added later on.

So let’s now use the Restive Plugin to make a mobile-optimized site. However, before we start, let’s identify all the things we want to have happen to the site when viewed on a mobile device. We would like to:

• Change the layout width from 960px to a fluid value of 100%, and add 10px padding to either side
• Align the logo to the right of the layout if the device is a tablet; and align the logo to the center of the layout if the device is a phone
• Collapse the horizontal menu to a vertical one, and reduce the height of each menu item if the device is a phone
• Reduce the text size in the footer area

The list above is a simple list of design changes. You don’t actually have to do this in detail because of the way the Restive plugin works, you can do it on-the-fly.

So, now let’s install and initialize the Restive plugin by adding the following to the existing HTML code:

 <!-- Install JQuery version 1.7 or higher -->
 <script type="text/javascript" src="jquery.min.js"></script>
 
 <!-- Install Restive Plugin -->
 <script type="text/javascript" src="restive.min.js"></script>
 
 <!-- Initialize Plugin -->
 <script>
 $( document ).ready(function() {
     $('body').restive({
         breakpoints: ['240', '320', '480', '640', '720', '960', '1280'],
         classes: ['rp_240', 'rp_320', 'rp_480', 'rp_640', 'rp_720', 'rp_960', 'rp_1280'],
         turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet',
         force_dip: true
     });
 });
 </script>
 

The Installation part is pretty straighforward, we just link jQuery and the Restive Plugin.

From the Initialization part, we see that we have defined four options for the Restive Plugin: breakpoints, classes, turbo_classes, and force_dip. Now I’ll explain what this all means.

The Restive Plugin will actively monitor the viewport of any devices used to view your site for the following declared breakpoint ranges (as we have defined them above): 0 to 240px, 241 to 320px, 321 to 480px, 481 to 640px, 641 to 720px, 721 to 960px, and 961 to 1280px (Please note that these are device pixels by default and NOT device-independent pixels).
If the viewport of the device that views your site is between 0 and 240 pixels wide, Restive will detect this and it will add the class rp_240 to the <body> tag (which is our jQuery selector); if the viewport is between 241 and 320 pixels wide, Restive will add the class rp_320, and so on. This is basically how breakpoints and classes work. If you notice, the number of breakpoints items is equivalent to the number of class items.

turbo_classes is a special feature of the Restive plugin that will add one or more classes (in addition to any other classes previously added) to the <body> tag when certain conditions are met. From our settings, we have specified that we want to add three classes; mobi, phone, and tablet when the device is a mobile device, a phone, and/or a tablet. So if an iPhone 4 visits your site, the turbo_classes option will tell Restive to add mobi and phone as classes to the <body> because an iPhone 4 is a mobile device and a phone also. If it was an iPad 2 instead, then what would get added would be mobi and tablet. You’ll see why this is useful later on.

Finally, the force_dip option will force breakpoints to consider device-independent pixels (instead of device pixels) in its declared ranges. Restive by default considers device pixels. However, in certain scenarios, you might want to go with device-independent pixels instead and the force_dip option let’s you do this.
Consider an iPad 4, which has a retina display (pixel ratio of 2) and a device pixel width of 1536 in portrait orientation. This means that it will not match any of your defined ranges since your breakpoints top out at 1280. However, as our Web site is not so complicated as to warrant additional CSS rules for retina tablets, we want all retina tablets to be classified the same as non-retina tablets. So by setting force_dip to true, Restive Plugin will see only in device-independent pixels, so 1536 (device pixels) will be considered as 768 (device-independent pixels], which obviously matches one of your declared breakpoint ranges.

Let’s now append the additional style rules to our CSS file:

 /*------------------------------------------
 Mobile - for Restive Plugin
 -------------------------------------------*/
 .mobi {font-size: 110%;}
 
 .mobi section article {width: 100%; padding: 0 10px;}
 
 .mobi.tablet header #hs-level-1-content .logo {text-align: right;}
 .mobi.phone header #hs-level-1-content .logo {text-align: center;}
 
 .mobi.phone header #hs-level-2 {height: auto;}
 .mobi.phone header nav ul.menu {height: auto;}
 .mobi.phone header nav ul.menu li {float: none; width: 100%; height: 40px; line-height: 40px; border-bottom: 1px dashed #aaa;}
 
 .mobi footer p {font-size: 80%;}
 

NOTE: This CSS code is appended to the earlier CSS file where we made space for it under “Mobile – for Restive Plugin”.

So if we now visit the web page with an iPhone 4, Restive will add mobi phone rp_320 to the class attribute of the <body> tag. Note that if we didn’t set force_dip to true, this value would have been mobi phone rp_640, since the plugin would be considering only device pixels (and not device-independent pixels) in the declared ranges.

So after Restive does its work, and based on the additional CSS rules, we can expect the following outcome:

• The font-size for mobile devices will be 110%
• The layout will become fluid and padding of 10px for the left and right sides will be applied
• The alignment of the logo will be to the right for tablets, and the center for phones
• The menu will collapse vertically (for phones) i.e. float will be removed, the width will be 100%, and the height of the menu layout has been reset to auto. The height of menu items (<li>) will also become 40px, and a bottom-border will be added to delineate each item.
• Finally, the footer <p> font-size will be reduced to 80%

In Closing

So with the Restive Plugin, and with just a few lines of additional JS and CSS code, you can make a relatively rigid web page that is much more responsive and adaptive to mobile devices. I wonder how long it would take to do the same thing using CSS Media Queries?!

Restive actually has a lot more features than were demonstrated here, so please have a look at the Restive Plugin Docs for more on what the plugin has to offer.

I would urge you to give the Restive Plugin a trial in your next mobile web design project and see if it makes your life a little easier.

Happy Less Coding!

In the article below we have put together a useful collection of our favorite CSS resources, frameworks, UI kits and handy tools, all from this past year, 2013. The main idea of this is to not only illustrate and highlight what a fantastic year it has been for CSS, but to also to offer you a range of production-ready resources that will allow you to rapidly kick-start your next web project.

All of the resources have been split into the following categories: Responsive CSS Frameworks, CSS UI Kits, Web Based CSS Tools, Tools to Format & Tidy CSS, CSS Animation Tools, some indispensible CSS Reference Resources, and finally a mixed bag of resources that can’t be categorized.

For the most part all of the resources are CSS-only, but there are a few (some frameworks and UI kits) that do require a little Javascript for added functionality. Here we go…

LESS Hat 2.0

After a year, there is a new, completely rewritten 2.0 version that brings 86 great mixins, robust workflow for editing, testing and creating new mixins.

LESS Hat 2.0

I bet you think that WordPress theme development needs tons of web design tools? Well, think again.

Recently I asked 20 elite authors from Themeforest a simple question:

“If you could only use five design tools for WordPress development, which tools would you choose?“

My overall goal was to discover what actually are the best and most popular WordPress development tools, and hopefully by asking these 20 elite designers the tools would reveal themselves. Well guess what… they actually have:

Here are the results:

Final Results:
Favourite Web Design Tools (as voted by 22 experts)

Below you’ll find the answers from the designers with the descriptions of their choices.

Click on author’s name to see his answer.

The Power Elite Authors:
Kriesi, Stmcan, Ait, Sara_p & GoodLayers.

The Elite Authors:
Bwsm, ZERGE,GhostPool, ThemeBeans, Designova, Freshface, Codestag, Pirenko, Webbu, THBThemes, Progression Studios, Themes Kingdom, Orange Themes, Design Themes, Cms Masters, Themedutch & Pixelgrade.

Kriesi – Power Elite Author

Stmcan – Power Elite Author

AitThemes – Power Elite Author

Sara_p – Power Elite Author

GoodLayers – Power Elite Author

Bwsm – Elite Author

Progression Studios – Elite Author

ZERGE – Elite Author

GhostPool – Elite Author

ThemeBeans – Elite Author

Designova – Elite Author

Themeskingdom – Elite Author

Orange-themes – Elite Author

Freshface – Elite Author

Codestag – Elite Author

Pirenko – Elite Author

Webbu – Elite Author

Designthemes – Elite Author

THBThemes – Elite Author

Themedutch – Elite Author

Pixelgrade – Elite Author

Cmsmasters – Elite Author

WOW!

HUGE thanks to everyone who contributed to this post! Please share if you think it was useful!

Final Results:
Favourite Web Design Tools (as voted by 22 experts)

Now, it’s your turn

If you could only use five tools for WordPress development, which tools would you choose?

Research wall, design wall, research board, ideation wall, inspiration board, moodboard, pinboard — Working walls are known by countless names. Underlying them all is a single idea: that physically pinning our sources of inspiration and work in progress, and surrounding ourselves with them, can help us to rearrange concepts and unlock breakthrough insights.

In their 2009 paper on creativity in design, human media interaction researcher Dhaval Vyas and his colleagues coined the term “artful surfaces” to refer to “surfaces that designers create by externalizing their work-related activities, to be able to effectively support their everyday way of working.” According to Vyas and his colleagues at the University of Twente (in the Netherlands), designers integrate these surfaces “artfully” and organize information in such a way that it empowers them to visualize and extend their work in progress.

Working Walls And Design Thinking

In this article, you will learn how displaying data and ideas on a large vertical surface can enhance your design thinking process. One of the first things to know is that the practice of using “working walls,” as we will call these surfaces from now on, is scarcely documented in scientific literature — hence, the need for a working definition of a working wall (redundancy intended). For the purpose of this article, we’ll define it as a large vertical surface on which ideas, data and work in progress can be displayed, rearranged and extended.

This design thinking tool being as powerful as it is, it comes as no surprise that a myriad of other fields have adapted and used it for years. But just how do working walls come into play in design thinking? Tim Brown, president and CEO of IDEO, defines design thinking like so:

“A human-centered approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success.”

To further define this approach, The Institute of Design at Stanford (or d.school) has outlined five steps in the design thinking process:

It all starts with empathizing with the people you are designing for. Then, you define a clear perspective of the process by making sense of a large amount of information. You proceed with ideation, exploring a wide array of concepts and generating possible solutions. Prototyping involves building an object (or artifact) that a user can experience and give you feedback on. Testing is about triggering an actual response from your intended user.

Working walls can facilitate every step of the design thinking process, and they offer unique advantages to bolster creative thought. The tool can help us empathize with and gather input from users, define a focused approach based on a large amount of data, capture the ideation process, display a low-fidelity prototype that users can interact with, and keep track of the way we’ve tested our creative assumptions.

Hopefully, the following benefits and working wall templates will inspire you to create your own today.

1. Empathize: Enable Peripheral Participation By Users

Large vertical surfaces can be used to spark interaction with your intended users. Wall-sized displays allow for easy visualization and intervention, which makes them particularly useful for consumer research.

Vyas and his group spent over 250 hours studying design departments at universities and companies in the Netherlands and concluded that artful surfaces are “an important vehicle for peripheral participation in a project, allowing visitors to enter its context.”

They labeled this participatory environment a “creative ecology,” where users are free to interact via their inputs on working walls.

5 Guys Burgers and Fries, for instance, has been using working walls to invite customers to describe their dining experience.

(Image: Carly Baldwin, NJ.com)

Here’s a working wall template that you can use to gather input from your audience and to empathize with their wants and needs:

Try out some of these prompts:

• Name one thing you love or enjoy about X?
• Name one thing you hate or dislike about X?
• What would you change about X?
• How does X make you feel?

2. Define: Synthesize Key Findings By Detecting Affinities

Once you’ve collected information about your audience, pinning the raw data onto a working wall will help you to rearrange and make sense of it. This type of working wall displays what we call an affinity diagram. Although people have been grouping similar ideas under labels for thousands of years, it was Japanese anthropologist Kawakita Jiro who originally developed the affinity diagram in the 1960s.

The premise of an affinity diagram is that, at first glance, several points of our data might seem unrelated, convoluted or unclear. However, by grouping related concepts, we are able to detect patterns that will help define our design approach.

Consider private detectives. You’ve seen them in the movies and on television. The sleuth will often map out a suspect’s life on a sketching wall and proceed to make breathtaking connections. In this case, a working wall is used to find affinities along the subject’s journey (“What are some patterns we can expect this person to follow?”), to find affinities in the lifestyles of the subject and their peers (“What do we know about A’s relationship with B?”) and to solve fuzzy criminal cases in general.

Take the “gladiator wall” from Shonda Rhimes’ award-winning television show Scandal:

(Image: Scandal Moments)

(Image: Esther James)

Here’s a working wall template that you can use to identify affinities in a fuzzy dataset:

These questions will help you get started with the template:

• “How is data point A similar to data point B?”
• “How are both A and B different from C?”
• “Is there a category (i.e. label) that describes these data points well?”
• “Why does a certain data point look isolated? Does this ‘outlier’ yield an interesting insight?”

3. Ideate: Stimulate Divergent And Holistic Thinking

Psychologist J.P. Guilford coined the term “divergent thinking,” which the Gale Encyclopedia of Psychology defines as “the ability to develop original and unique ideas and to envision multiple solutions to a problem.” This essential design skill is the key to ideation.

We could design several types of working walls to brainstorm, gather inspiration, and fully map out concepts and their relationships.

When brainstorming individually or in a group, stick notes at the top of the working wall to show all ideas. Then, using the affinity diagram method described above, identify which ideas are related, and categorize them accordingly.

(Image: Oranaozchi)

To maximize inspiration for ideation, set up a “moodboard” layout on the working wall to collect ideas from different sources. Fashion designers, for instance, observe a phenomenon called “planned obsolescence,” which basically means that they design garments knowing that those garments will eventually become unfashionable.

This instability demands a disciplined creative process in which (almost) everything can become a source of inspiration. Fashion designers everywhere use inspiration boards to capture seasonal trends, textures, accessories, sketches and muses when ideating for their next collection.

Fashion designer Christian Siriano poses with the inspiration board for his spring/summer 2014 collection. (Image: The Derek Daily)

Here’s a working wall template you can use to get inspired with ideating:

Ask yourself these questions to get started with the template:

• “Does this finding relate to the overall structure (such as the layout or grid) that I am trying to implement in this project?” (If so, include it as a source.)
• “Is this particular aesthetic treatment (such as the use of color or typography) similar to the one I am trying to convey in this project?” (If so, include it as a source.)
• “Is a particular functional feature associated with the utility I am embedding in this project?” (If so, include it as a source.)
• “Does a certain mood (such as an atmosphere or emotion) in this source inspire what I am trying to convey with this project?” (If so, include it as a source.)

The working wall style we’ll explore next can help you map out a given concept and find important relationships between its subconcepts. Think about it: Doesn’t working on a large surface help you to visualize the big picture? What if you had enough space to add more concepts related to your subject? Working walls get it done.

This kind of big-picture reasoning has been called “holistic thinking.” According to psychologist Richard Nisbett at the University of Michigan, holistic cognition involves “an orientation to the context or field as a whole, including attention to relationships between a focal object and the field.”

This is the opposite of analytic thinking, whereby we pay attention primarily to the object and its categories, using rules (i.e. formal logic) to understand the object’s behavior.

East Asians tend to be more “holistic,” while Westerners are more “analytic,” according to Nisbett and his colleagues at the University of California (Berkeley), Seoul National University (Korea) and the Ecole Polytechnique (France) in a 2001 paper titled “Culture and Systems of Thought: Holistic Versus Analytic Cognition.” This groundbreaking research earned the team a grant from the National Science Foundation.

Evidence suggests that if you were raised in a society influenced by classical Greek thought, holistic thinking might not come all that naturally to you. However, product and service design is holistic by nature and, thus, requires stepping out of our comfort zone and transforming our mindset. Working walls are invaluable tools in this process.

Wartime generals, for example, have been using working walls to map out large-scale military intelligence strategies for decades. Winston Churchill kept some nifty underground chambers covered wall to wall with maps, thousands of color-coded pins and tiny annotations. These maps helped Churchill and his administration plan military advances, ideate different scenarios and think collectively about the best tactics to pursue.

Failing to see the big picture could mean the difference between victory and defeat in war and design.

“The Map Room” in the Churchill War Rooms. (Image: Kaihsu Tai)

Use the template below to map out a concept and its relationships. The width and marker of each arrow represent the strength and direction of a relationship, respectively.

0

Ask yourself these questions to get started with the template:

• “Does concept A influence concept B, or is it the other way around?”
• “How strong is the relationship between concepts A and B? Is there one?”
• “If concept A influences B, is the effect reciprocal? Does A exert a stronger influence over B, or is the strength of their force upon each other equal?”

4. Prototype: Create And Change Prototypes Easily

You could combine elements on a working wall to create a prototype of a design solution. This low-fidelity version of the solution could make use of mixed media such as the following:

• magazines;
• books;
• sketches;
• screenshot printouts;
• 3-D material, such as textures;
• photos;
• wireframes, blueprints and diagrams;
• evidence from primary research;
• evidence from secondary research;
• text quotes that capture a mood;
• other artifacts.

Interior designers combine elements on a working wall to create a scheme for a room. In the absence of a finished space, these boards serve as a low-fidelity prototype that gives the client sufficient clarity.

1
Working wall for a cabana design in Vero Beach, Florida. (Designer: Erin Paige Pitts)

Here’s a working wall template you can use to create a low-fidelity prototype that users can give you feedback on:

2

And here are the questions to get you started:

• “Into what major components can this product or service be broken down?”
• “How can I show the user what the materials for a particular component will look like?”
• “How can I show the user the flow of their interaction with the product or service once it is finished?”
• “How can I give the user a glimpse of the final outcome? Would mockups, wireframes, sketches or blueprints help them to visualize it?”

Prototypes evolve, and unless we have a quick way to access previous versions of our own work, that sense of progress will fade and we’ll lose sight of the design decisions that took us from A to B in the first place. Second thoughts, insecurities and analysis paralysis take over. Understanding and being able to visualize our process give us the confidence that we are building on a strong foundation and give us the strength to justify our design choices.

Interaction designers, for example, must somehow navigate a dense jungle of user experience design, visual style, branding, layout, grids, typography and function changes. Working walls are an essential asset for succeeding in that.

The BBC UK published an amazing article explaining how it redesigned its website. It printed out every single screen of the old website and pinned it up on what the team now calls the wall of shame. The team gathered around this large vertical surface to prototype and pin new versions of its website. The result is a triumphant wallpaper-sized timeline of where the BBC used to be and where it stands now.

3
“A New Global Visual Language for the BBC’s Digital Services,” BBC Internet Blog

Here’s a template to visualize prototype changes over time:

4

And here are the questions to get started:

• “Into what major features can this product or service concept be broken down?”
• “How does each feature currently look?” (Include this in the column for the version you are currently working on.)
• “What elements will we add to this feature going forward?” (Include them after the plus sign in each of the arrows pointing to the next version.)
• “What elements will we remove from this feature going forward?” (Include them after the minus sign in each of the arrows pointing to the next version.)

5. Test: Visualize And Validate Design Assumptions

Researchers in every field experiment and iterate on their results. In the previous step, we saw how to use a working wall to create and refine a prototype before introducing it to our target users. Stage five of the design thinking process, testing, can also be facilitated using a different type of working wall.

Startup founders use a “validation board” to visualize their prototype tests. The free canvas created by Lean Startup Machine helps you to display the different iterations (or pivots) that your design solution hypotheses have undergone. You can also classify your assumptions depending on whether they’ve been validated. As on other working walls, elements may be moved around as the process unfolds.

5
(Image: The Validation Board: A Free Tool for Testing New Startup Ideas From Lean Startup Machine,” Harrison Weber, The Next Web)

Use this working wall template to visualize and validate your design assumptions:

6

Here are the questions to get started with the template:

• “Which assumptions haven’t we tested yet?” (Include them in the first column, labeled “Untested.”)
• “How do we go about testing this assumption? How will we know whether it is true or false?” (Include this “experiment design” in the second column, labeled “Testing”.)
• “Has this assumption proven to be true or false?” (Move the original sticky note in the “Untested” column to either the third or fourth column, depending on the result of the experiment.)

Takeaways

Working walls are invaluable tools for design thinking. They empower research, sense-making, ideation, prototyping and testing. Using wall-sized displays in our design process empowers convergent, divergent and holistic thinking — all essential creative skills.

I hope you’ve found inspiration in these different and innovative uses of working walls. The next time you start a design project, keep these templates and ideas close to heart.

Do you know of other effective uses and layouts for working walls? Comment away!

(al, ea)

Web design projects are becoming more varied and complex with each year that passes. And one trend which looks set to explode in the next 18 months is global brands rolling out their existing corporate websites to new markets across the World. This globalization mindset is here to stay and as a result web design agencies can expect more website localisation projects and will have to ensure design is catered for an international audience.

The demand for localized content has grown exponentially over the last 5 years as internet users surfing habits continue to evolve and become more sophisticated. Rewind the clock back a few years and the majority of corporate pages on the web were written in English however as we head into 2014 consumers want to be served compelling content, written in their own native language.

With 2.3 billion web users Worldwide, recent stats show you can reach 90% of those users with just 13 languages. These changing conditions are prompting brands to encompass more languages in their web strategies and website localisation is quickly becoming a necessity when entering new markets. Regardless of the country brands are targeting, web design is still paramount and below we will uncover some of the common design problems experienced when localizing entire sites.

[Image Source]

Text Expansion

Foreign text has an unforgiving track record for disrupting existing page templates and compromising design features. Without a doubt, it’s one of the most common design problems experienced when undertaking a localisation project. The issue lies with the fact that text size often expands or contracts depending on the language. For instance, when compared to English Asian languages are often much more compact whereas French and German phrasing is likely to be significantly elongated.

This can wreak havoc when designing items like page menus or drop down boxes and careful planning is a prerequisite before you begin translating web content. A firm understanding should be gained on how your translated text is likely to change; does the font size need to be increased? Will using a right to left font create UI problems? Or perhaps untidy pockets of white space may surface?

Ultimately when you come to iron out any text expansion problems you shouldn’t settle for second best. If you’re not happy with the end result, you should work more closely with your development team and translation agency to put together a final series of amends. Shrinking font size and implementing responsive design templates are combative tactics which help however a much better solution is to provide your designated translator with a maximum character count before they begin translating.

Just Add Color

When localizing a website a substantial amount of energy is spent on translating content, re-working templates and making sure brand messaging is coherent. One aspect which can therefore be overlooked is the color of your localized webpages.

From a design perspective color selection can be incredibly useful for improving user acceptance, highlighting cultural traits and framing your brand in the best possible light. Therefore to get the most mileage out of your localized domain you need to be confident your primary color selection doesn’t fuel any negative feelings. For example in China red represents feelings of ‘luck’ and ‘celebration’ whereas in the United Kingdom red may stimulate feelings of ‘danger’ and ‘caution’.

[Image Source]

Color selection should be a standalone component of your localisation strategy, in which the cultural tendencies of your target demographic are identified and catered to. It may not be feasible to completely overhaul your existing color scheme for every localisation assignment however it’s certainly a sensible strategy to ensure the principal colors used on the homepage are fit for purpose.

Unicode Text

As the World’s fastest growing language service provider one piece of advice I distribute on a daily basis is for companies to predominantly work with Unicode text. Not only does this provide a workable level of consistency for your translation agency but it also makes it much easier to upload multilingual content to Content Management Systems like WordPress or Drupal – as they all support Unicode.

There are a variety of Unicode formats available however the one we would recommend for multilingual projects is UTF-8, as it offers a much broader spectrum of available characters. By adopting this format, country specific symbols and expressions can be easily transferred and populated for the web. For example using UTF-8 the German (ß) symbol for ‘ss’ can easily be included within your webpages along with the German Umlaut vowels ä, ö and ü.

Localizing Images

Image heavy websites are typically the most intricate to localize, as they often require additional work to ensure user interfaces remain flexible. Furthermore some images may not be suitable to automatically transfer from one culture to another. If you have a large cross section of images remember to schedule in plenty of time for sourcing relevant images for each country you are targeting and if your businesses operates in a specific niche you may need to invest in creating professional imagery yourself.

Whilst less informative, images do play an important role within the localisation process. They help convey what your brand is all about and can provide a visual representation for how your product or services work. When localizing images it’s crucial that text based images are translated and content is tailored towards the cultural and behavioral traits of the people situated in that country.

If you’re looking to expand at a rapid rate and enter multiple markets simultaneously then scaling back the complexity of your localisation project would be a rational decision. This was the case when Google was first growing in the early 2000s; rival companies were offering multilingual content in around 10 languages whereas Google offered users in excess of 60 languages. Their simple interface and lack of images essentially made creating international domains much simpler and was a key reason underpinning their staggering rate of growth.

Closing Thoughts

When contemplating the design for localized web builds it can be a confusing and sometimes disjointed process. Budget constraints and client expectations will shape the entire project however it’s important to realize that localized websites are targeting a separate audience and therefore design has to adapt. Understanding how localized content will impact design is the first step to creating a visually striking International domain and if you can make sure the actual content creates a meaningful impact with your audience then the stereotypical barriers to market will crumble.