People don’t spend their money online easily. Think about it: If you had to answer a long list of questions or struggle to navigate a website, how much money would you be willing to part with? Online shopping is about convenience and comfort, and those of us who have at least once ventured into the realm of online shopping know how time-consuming and unpleasant it can be.

The online stores that stand out from the rest are those that go the extra mile for their users. We’ll look here at some small and big e-commerce websites that create pleasant online shopping experiences. We’ll consider the experience from the very start to the very end, right through to the checkout process.

Interesting E-Commerce Websites

Bonobos
Bonobos’ shopping experience is smooth. Good typography and subtle colors help focus on the products and features, with all distractions fading away as you interact with the site. When a new item is added to the cart, it appears in a sliding sidebar on the right, prompting customers to either keep shopping or check out. The design of the checkout form is elegant and clean. The amount of data required is never overwhelming since it’s clearly separated in manageable chunks. And the most important bit: the favicon is a bananas icon! Now that is pretty cool.

Martina Sperl
Martina Sperl’s website is a lovely website. The shop features polished photography of her products, with a simple navigation panel fixed on the right side of the page. The hover effect is simple yet bold, showing the item number and price boldly in a large sans-serif typeface. You can, of course, click an image to view details about the product and get a 3-D view of the furniture (just a series of images). Buying a piece of furniture requires you to order by email. Again, bold full-width product images are used on product pages, and you can click on the “heart” icon to express your love for a product. Powered by WordPress.

Evyi
Putting the shopping cart on the left, with the navigation, is a great idea. Because the eye starts from the top left of the page, the shopping cart takes precedence, making it more natural for users to keep track of the items in their cart and the running total.

Banana Cafe
Banana Cafe is crazy. The 3-D hover effects of the site are consistent across the entire shopping experience. The blocks rotate in different directions, creating interesting movement throughout the website. It isn’t your ordinary online shop, but rather a collection of suggestions for your closet. The hover effects reveal a reference number that you would use in the contact form at the bottom of the page. Well, the audio and video in the background aren’t really necessary, but they do complement the unique experience on the site quite well.

MadeForFun
Well, this online shop could be made for fun, but fun was probably not the only reason to set it up. The experience on the site is, however, quite snappy indeed. You can quickly customize each product with features displayed using an accordion pattern. The shopping cart preview is visual, almost infographic-alike, rather than filled with quick-paced text. In fact, the shop even has rainbow-alike horizontal lines which still fit quite well into the design.

Indigo
Indigo’s shopping experience isn’t particularly extraordinary, but it’s a great example of how shops with a relatively large inventory can have a quite nice user experience. The number of navigation options on Indigo is quite overwhelming, especially the navigation in the sidebar looks a bit too complex, yet what’s interesting is the bar at the bottom of each product page. As you add an item to cart, the item is visually added to the shopping cart in the bar. Quite interesting is the fact that Indigo provides a discount for customers who are willing to invest some time into creating an account on the page. Clever.

Walmart
Walmart’s recent responsive redesign must have been quite an undertaking. The main navigation has been hidden behind the “Shop All Departments” button that triggers the off-canvas navigation on the side. The items are well-organized, the interface elements and the typography provide a clutter-free overview. The reviews of each item can be rated as being helpful or not quite helpful. As an item is added to the cart, a lightbox appears prompting customers to proceed to the check out or continue shopping. The checkout is well-designed across resolutions, and you see only what is actually helpful for finishing the checkout. Good information architecture, good layout, good redesign.

Appliances Online
Although the overview of items per category is quite overwhelming on ao.com, the shopping and checkout experience is very pleasant indeed. On product pages, customers can compare the feature of recently viewed items next to each other in a table while many products have an embedded video review. The checkout provides a variety of options but it’s easy to follow the steps to end up with just what you need when you need it.

Moomin
Sometimes you really don’t need to reinvent the shopping experience: it’s perfectly enough to provide a consistent visual style that guides the customers through the checkout. The typography, the shopping back icon, the way price tags are presented and the checkout itself fit well within the branding of the Moomin brand. Since there aren’t many products in the shop, each items is prominently highlighted; the breadcrumbs help the customer see where they are on the page at any given moment. Nice personal design that conveys an intimate atmosphere.

GoMacro
If you are looking for a… different online shopping experience, GoMacro is an option worth checking out. Instead of having a simple grid overview of items, all items are grouped into colored item circles. The experience of adding items to the cart is very unique as you literally place bars into a cart. The checkout is also well-designed and quite simple to follow through although main navigation (“Back” and “Next Step”) are somehow hidden beyond the actual checkout lightbox. A unique design can work well as well, and GoMacro shows how it can be done.

Lost My Name
Alright, this isn’t really an online shop, but the checkout design is quite lovely. The design applies a soft touch of the visual design of the brand to the Web forms creating a pleasant overall experience. Probably the best adjective to describe the design is “friendly”. So is the experience of the checkout.

0

1

Indochino
Indochino’s shopping experience is the king of customization. Basically you can customize everything. However, this requires quite some interaction from customers’ side. Product images are prominently highlighted as background images. In suits, everything from jacket lapels to vents, buttons, pockets, lining and pleats can be customized. Before you check out, you are asked to provide detailed measurement data which takes just 18 steps. Well, if you’d like to provide many customized options in your shop, Indochino is a great example to learn from. The responsive design doesn’t quite work in some scenarios though, especially when it comes to pages with lots of available options.

2

Ableton
Ableton’s website is just another example of how a vivid color scheme doesn’t necessarily interfere with a good shopping experience. The site uses many colors, yet they fit well together, creating a comfortable atmosphere on the page. Good typography, appropriate colors, with everything position just right. It was probably a nice idea not to use the “navicon” icon for navigation in the header of the page.

3

Cocones
This shop has a quite remarkable user interaction. The snazzy hover effect swivels the iPad sleeve around for you to see what it looks like from the back. The large full-width photographs on product pages are a pretty nice idea to show the products “in action”. Another welcome feature is the little button in the header that tells you if an item has been added to your cart. The Web form for the billing details is short and simple, completing the pleasant shopping experience. The only drawback is the country selector that could be replaced with something a bit more elegant.

4

Benj & Soto
Ben & Soto is a strictly functional website with a clean design. It has a quite unique interaction; you can decorate your own cube and then view all six sides by, well, actually rotating it. I really like the annotated elements, which add a kind of work-in-progress feel to it. Understandably, you have to create an account or sign in with Twitter or Facebook to create and save a design. A nice way of visualizing a product.

5

Motorola
Motorola’s responsive online shop is beautifully designed, displaying large photographs of products that dominate the screen. The flat design creates the impression that the products are a hassle-free experience. Motorola encourages its users to design their own look, and the website has a lovely UX, with large clear buttons. In a narrow view, filter and search are implemented using a fixed filter/search menu — it might be a good idea to consider using the “view mode” overlay instead.

6

Ditto
One thing about online shopping is that you can’t try it on until you get it in the mail. Until now, that is! Ditto’s virtual try-on feature takes user interaction to a new level, as you can see what a set of eyeglass frames will look like on your face from the computer screen. The shipping information is fairly quick and easy to fill out, and the whole process is only two steps long. And the nice interaction on the front page with “opening” books is quite remarkable.

7

Tsovet
Sophistication and elegance are words that come to mind when visiting this page. Tsovet has an interesting design, accompanied by beautiful black and white photography that sets the tone for the brand. The checkout process is relatively painless: All you need to do is fill out a straightforward single-page checkout form. The images scroll over one another, adding another interesting effect. It’s great to see how product pages manage to contain so much detail using a simple accordion pattern.

8

Canopy (currently down?)
Canopy is all the best stuff on Amazon, curated by those who know you best. You can see products recommended by your friends or make your own recommendations. Each link takes you straight to the Amazon store, where you can follow the familiar process. I like the minimalistic design of the website, and the layout has an open feel to it. The prices are clearly visible on each product, helping you to browse the website with ease. A very uncommon shopping interface that is used reasonably and properly on the site.

9

Orlando
Orlando’s page has quite interesting transitions. As you click through the different categories, the preceding image fades away leaving enough space for the new image and the product details. However, you can’t actually purchase goods from the website itself; rather, you have to order by email which is quite surprising. The navigation is provided on the left side as an overlay. Also quite unusual for an online shop.

0

Minimals
Minimals has a beautifully soft, minimal aesthetic. The website, which sells invitations for baby showers, is cute and friendly. It’s amazing how simple rounded corners within blocks can put you at ease. The hover effect is a bit inconvenient — the name and price fade away when you take the mouse away. In the cart, customers can select the country to which the item should be shipped and update the total price right away. A shop without bells and whistles, but with a unique, personal design. Powered by Bigcartel.

1

Noodoll
Now that’s something a little different! Noodoll has a fun scrapbook feeling; cute page-loading animation are lovely as they create a bit of intrigue with the cut-out characters in the top-right corner. In fact, little animations are sprinkled all around the website, creating a playful and engaging experience. As you add more items to the cart, they appear in the left sidebar rather than in the upper right corner which is a bit unusual. Powered by Shopify.

2

Le Col De Claudine
Le Col De Claudine’s website has an elegant design that showcases the fashion brand. Visitors are greeted with beautiful, soft photographs that act as a large header. The checkout is a five-step process, with no guest checkout option. There are not tricks or effects to detract from the subject matter. And the hover effect over the fashion pieces is bold without being too loud, although it doesn’t work on mobile phones of course. Interesting to see prices not being displayed by default, but only on hover.

3

Mujjo
The focus of the website is, well, the gloves. The ultra-minimal design is the perfect backdrop for them, and since the target market is smartphone users, all product images have an image of the touchscreen gloves with an actual device rather than the gloves alone. The search tool is hidden in the top-right corner which is not necessarily very convenient. On product pages, the product image can be zoomed in, but displayed on the right, next to the main image which is a bit unusual. The footer has quite some text which is not necessary and could be reduced, but the overall aesthetics is very pleasant.

4

Greats
The responsive Greats’ online store is very well designed, with a lot of polish and attention to products. The online-only men’s footwear brand uses consistent typography and photography to present their products well. All items appear to be floating in the air, being shot from the same angle. The features of each shoe are thoroughly described and presented. Once items are added to the cart, you can preview the cart in a nice overlay. The checkout design is perhaps a bit too oversimplified, but it works well within the branding of the site. An online shop with products well-presented and the layout well-designed.

5

Big Cartel
The photography on Big Cartel is strong and bold, with rich, earthy colors that grab the user’s attention. There are also no lengthy descriptions, but rather concise bits of explanation. This website has no guest checkout option (which is quite uncommon), but the entire purchasing process is only four steps long and all on one page, which keeps the process from feeling tedious and relieves the user from having to constantly click to the next step. The Web forms are also easy to use and beautifully designed. A nice example of a shopping experience that focuses on one major product item per page, and nothing else.

6

Obey Clothing
Obey provides a smooth shopping experience, using consistent typography. Product pages provide fit and styling guides as well as a number of view for every item. The checkout link reveals a quick preview — an overlay with item,s, prices and the ability to remove or edit items from the shopping bag which is quite comfortable. The checkout is quite ordinary, yet what is missing is a progress bar that communicate in which part of the checkout process the user currently is. A nice touch is the red plus sign that means “add to shopping cart,” which is accompanied by the “Added one item to your basket” header that appears. In this case, the straightforward, no-nonsense design reinforces the brand’s image well.

7

Früute
Früute’s website has a design that is consistent all the way through to the Web forms. The contrast could be improved a bit, but the flat aesthetic creates a soft yet down-to-earth feel that matches the brand. It’s interesting to see a mix of a common grid and large, prominent product images throughout the site. There is no guest checkout option, but you can log in using your Facebook account. It’s also quite unusual to see the “philosophy” section in an online shop which explain the passion of the company and the rationale behind its products. As an item is added to the cart, it appears as the lightbox in the right upper corner.

8

Sew Sew
The simple grid layout and smooth transitions, along with the prices clearly displayed under each item, make for a user-friendly website. The shop is run by Claire Walls who designs everything on her own, and her personality shines through the website quite vividly. From the subtle color scheme to product photos to product descriptions, everything speaks one consistent voice. For independent online shops that’s probably the most significant quality to look after.

9

Fiorly
The whimsical look of Fiorly is established by all of the different elements on the page: the typeface, the filter on the photographs, the color scheme and the expansive use of space. What makes this shop unique is that each product item has a dedicated story attached to it. On the product pages, you’ll find quick essays and videos about real people sharing their stories connected to the items (in that case, jewellery). A nice example of how storytelling can be embedded into the online shopping experience.

0

Conclusion

There you have it, some of the interesting online stores out there. Spending hard-earned cash is tough, so of course as a designer of an online shop, you want your users to feel as comfortable as possible. Whether you’re selling your own design services or a pair of designer jeans, it’s about a nice overall shopping experience and a quick checkout. Now if that’s not a reason to remove a couple of unnecessary checkboxes, add better typography and remove the unnecessary in the checkout, what is?

What interesting design/UX techniques for better shopping experience have you found recently? Or how have you optimized the checkout process of an online shop recently? Let us know in the comments!

We kindly thank everybody who submitted their links via Twitter and Facebook over the last couple of days. You are smashing, you know that, right?

(al, ea, vf)

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)