We’re looking to add a top-notch interactive designer/frontend developer to join our development team; someone who knows great UX/UI and loves to build awesome things. Details about the position can be found below in this blog post. Or (even better) – check out our groovy Hiring Page.
We've been fortunate to work with inFUSION Group recently on a website redesign project. inFUSION Group is a great consulting firm located in Michigan. They offer a number of services including sales consulting, marketing plan development, and human resources consulting.
In this blog article I'm going to take a quick look at some of the strategic and design decisions we made with the client.
We are proud to announce a brand new version of Motionspire – the world's premiere motion graphics inspiration gallery. Motionspire is the best place to go when you want to see the best motion graphics work available online.
We launched Motionspire 3 years ago, and we've been pleased with its growth over the years. Today we are launching a brand new video submission process that makes it easier than ever to submit your work. Many motion graphics pros already have their work available on Vimeo, and if you submit a link we'll automatically pull in all the information and queue the video for review. If you'd prefer to upload your video directly, we accept .mov, .mp4, .m4v, and .flv files up to 50MB in size.
Another new feature makes it much easier to find the inspiration you are looking for. You can select multiple categories at the same time, so if you want to see 2D Title Sequences or 3D Commercials with a Typography focus, it's just a few clicks away.
We have big plans for Motionspire's future as well, including keyword search, custom user portfolios and a job board for motion graphics professionals. Keep checking back at Motionspire.com for new developments, and while you're at it, take a look at some of the best motion graphics videos ever made.
Over the years we have made some big transitions at The Wojo Group. Although we used to be primarily concerned with client work, over time we have directed more and more of our effort towards internal projects. Some of these projects have included Motionspire.com, a motion graphics gallery we launched a couple years ago, and SimpleCart(js), the open-source javascript shopping cart that turned out to be quite popular. (more…)
In the first part of this article, we looked at some of the main advantages of using a contract. Now, we’ll take a closer look at what should actually be included in a web design contract. Some of these principles apply to all contracts, but some of them apply specifically to the design and web industries. (more…)
One of the first questions you must ask yourself if you are doing freelance work or running a small business is “will I use a contract?” Conventional wisdom indicates that you should always use a contract when entering into business with somebody else. Despite this advice, many freelancers or small business owners either do not use a contract at all or use one that doesn’t spell out the agreement adequately. Our company has learned the hard way that writing effective contracts is a must. In this article, we’ll look at some of the main reasons why using a contract is a good idea. (more…)
We all just spent a few dedicated days listening to talks and having long hard discussions about building web apps in Miami at
The app store is one of the greatest selling points of the iPhone. There are literally hundreds of apps already available (including hundreds of free ones!), with more being added every day. Apple's device is already a great productivity tool, but there are also some additional applications that can really help you and your business succeed.
So without further ado, here are the top ten (free!) apps not to miss for your business needs.
****UPDATE: Version 2 is now available, this post is outdated. Please go to simplecartjs.com to find out more*****
**update: v1.2: fixed rounding error in price formatting
**update: v1.1: back button works, no trailing comma for options
(if you want to skip right to the example and downloads, check it out here)
Over the past few years, our company has had several clients who have needed a smaller shopping cart, usually to sell just a couple of items. We generally built these small carts using paypal. I realized it would be nice to package this up, and create a lightweight, easy-to-use, flexible shopping cart.
So we made simpleCart(js). The cart is a 10.5kb javascript file that uses cookies to keep track of the items in the cart. SimpleCart(js) doesn’t require any databases or programming knowledge. You simply need to know some basic HTML and have the ability to copy and paste. However, it can easily be expanded to use databases or contain more advanced options.
The first thing you will need to do, if you don’t already have one, is set up a free merchant account with Paypal.
Once you have the files downloaded, simply add this snippet to the top of any page you wish to have the cart running on:
<br /> <script src="simpleCart.js" type="text/javascript"></script><br /> <script type="text/javascript"><!--<br /> simpleCart = new cart("you@yours.com");<br /> // --></script><br />
You will need to replace you@yours.com with the email address you used to sign up to Paypal.
Any page you have the simpleCart(js) running, you can add an item by simply using a link like this:
<br />
<a onclick="simpleCart.add('name=[name]','price=[price]');return false;" href="#"> link to add item </a><br />
You are required to at least have a name and price when adding an item to the cart. However, you can add other fields also. If you want an image to be linked to the item, you can add it like this:
<br />
simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png');<br />
You may have the cart on any page, and it will update automatically using ajax. To show the cart items on a particular page, you simply need to have an element with the class of “simpleCart_items” on the page. This element will automatically be filled with all of the items in the cart, and will show each field.
<br /> <div class="simpleCart_items"></div><br />
You can use any element (div,a,span,p,etc.) and the values will be put in the innerHTML of that element.
You can show the total quantity or price on any page by simply having an element with a class “simpleCart_quantity” or “simpleCart_total”:
<br /> <div class="simpleCart_total"></div> <span class="simpleCart_quantity"></span> items<br />
You can have a checkout or empty cart link anywhere on any page where the simpleCart(js) is active. You do this by simply setting the class of an element to “simpleCart_checkout” or “simpleCart_empty”:
<br /> <a class="simpleCart_checkout" href="#">checkout</a></p> <p><a class="simpleCart_empty" href="#">empty cart</a><br />
You can use any type of element for these, and you can put anything inside of the element. Anything wrapped in a tag with those classes will link appropriately.
Adding other product options to items.
<br />
simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png','size=XL','color=Blue');<br />
You can also change the quantity that will be added to the cart:
<br />
simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png','quantity=5','size=XL','color=Blue');<br />
The order of the arguments doesn’t matter, and you can add as many options as you would like.
Styling the cart.
You can style this cart to fit the look of your page. The contents of the cart will start with a header row:
<br /> <div class="cartHeaders"><br /> <div class="itemImage">Image</div><br /> <div class="itemName">Name</div><br /> <div class="itemPrice">Price</div><br /> <div class="itemOptions">Options</div><br /> <div class="itemQuantity">Quantity</div><br /> <div class="itemTotal">Total</div><br /> </div><br />
Each item in the cart will have the following form:
<br /> <div class="itemContainer"><br /> <div class="itemImage">[myImage]</div><br /> <div class="itemName">Shirt</div><br /> <div class="itemPrice">$6.00</div><br /> <div class="itemOptions">size: XL; color: Blue</div><br /> <div class="itemQuantity"><input type="text" /></div><br /> <div class="itemTotal">$30.00</div><br /> </div><br />
And there will also be a totals row:
<br /> <div class="totalRow"><br /> <div class="totalItems">6</div><br /> <div class="totalPrice">$30.00</div><br /> </div><br />
You can choose to omit part of the cart in your stylesheet:
<br />
.itemOptions,itemImage{<br />
display:none;<br />
}<br />
Or you can hide the header or totals rows:
<br />
.totalRow{<br />
display:none;<br />
}</p>
<p>.cartHeaders{<br />
display:none;<br />
}<br />
Change the order of the cart columns.
If you would like to change the order of columns or remove the columns from ever being shown, simply add a line to the top of your page:
<br /> <script type="text/javascript" src="simpleCart.js"></script><br /> <script type="text/javascript"><br /> simpleCart = new cart("you@yours.com");</p> <p>//Add the following line to reorder and remove item columns<br /> simpleCart.ItemColumns = ['Image','Price','Name','Quantity','Total'];</p> <p></script></p> <p>
Download and Demo
Below are links to download simpleCart(js) and to view a working Demo. One great thing about the cart being stored in cookies is that you can have your items be added on one page and the cart be on another if you wish. The demo reflects this. The main page of the sample store is here and the View Your Cart page is here.
********* Please go to simplecartjs.com for the updated downloads and demo************
Keep up to date with news and tips from Wojo Design