Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

December 27 2013


Coding With Koding

Cloud IDEs have been around for a little while now, and they have been pretty good for things like pair programming, or cases where you want to code consistently no matter where you are. Koding just came out of private beta, and they would like to take this notion a couple steps further, with their “cloud ecosystem”.

In this article we will take a look at what Koding is, as-well as some of the benefits you can get from using it.

Koding is kind of hard to explain, because there isn’t really a product similar to it on the market. So to better illustrate all of its moving parts, let’s split the service up and begin with the development environment.

The Development Environment

When you sign up to Koding, out of the box you get your own sub-domain ( your own VPS, and some built in web apps to manage your new resources.

Through the admin, you have the ability to create other sub-domains on top of your current URL and spin up new VPSs all through an easy to use UI.

The Dev Dashboard


Now these VMs are not your average micro instances that a lot of services offer, these are full fledged VMs with access to eight processors and a full GB of RAM so you can easily run just about any app, and if you want to play around with things like cluster setups or networks, you can easily spin up multiple instances for just $5 a month.

So in terms of processing power, these instances can potentially be as powerful as your own computer, and they are definitely better than loading a local virtual machine.

What the people over at Koding are trying to do is empower developers to learn through experimentation and just try things that they wouldn’t necessarily want to try locally, or just don’t have the resources to do it.

These instances initialize in a matter of seconds, and if you make mistakes and break some system files, you can easily just re-initialize the server and it will restore everything under the home folder. Essentially, you’ll have a new instance but all the files you created in the home folder are preserved.

Another thing they provide, which is actually a pretty big deal in some situations, is root access to all your servers. Koding is a very transparent service, you get a VM and you can literally do whatever you want with it. Anything you can do with a standard VPS, you can do with their VMs.

OS & Languages

As for the instances themselves, they come with Ubuntu installed, and pretty much every language I can think of, including:

  • PHP
  • GO
  • Node.js
  • Ruby
  • Perl
  • Haskell

Among others, so you are pretty much good to go out of the box.


With Koding, you sort of have two layers of applications. You have the VM, which like I mentioned, you can run anything you want on, but besides that, you have ‘Koding Apps’ which are web-apps that run on Koding itself and through them you can manage all of your Koding resources.

Some of the default apps you have available to you are things like admin panels for databases or frameworks and editors for code and images. The default code editor that comes pre-installed is the Ace code editor for regular development, or Firepad if you want to work collaboratively via the teamwork app.


Besides all these really cool apps, you have the ability to create your own. They are written using plain JavaScript (CoffeScript) and the KD framework (from Koding). Now because they have just come out of beta, there isn’t really a start-to-finish documentation site up yet, but there are two Koding apps available (kodepad and app maker) which are built to give you a sort of structure, with examples. Besides those, I’d advise searching Github for “.kdapp” and just looking at how other apps were built to get an idea of what sort of things are possible and how to accomplish them.

Altogether, it sort of has the feeling of a cloud “operating-system” where you have the VMs as resources but the Koding apps allow you to manage your resources and set them up just the way you like. This means if your company has a sort of boilerplate setup, you can create a kdapp which will configure a new VM with the files and software you need, and then whenever you spin up a new instance your app can configure it just the way you like.

Additionally, kdapps can be a standalone tool which just modifies files like the Ace editor, or image editors that are available. This means if you put in the time, you can essentially build your own dev environment, with all the custom tools which make you more efficient at building apps.

Everything I have mentioned up to now really only covers half of what Koding is, and that is the development environment part. Koding also has a social/organizational side of it, which compliments the development features and sort of boosts the platforms value.

Developer Community

By default, when you sign up to Koding, you are added to the Koding “group”; all the features, like the activity notifications, topics, code-snippets, etc.. are all coming from this default group. It’s kind of cool to get all the updates from users around the world, and you can filter by topic by going to the topics page and selecting something you are interested in. But where these features really show potential is when you create your own group.

Koding Topics Page

If you use Koding as a group, then you can take advantage of all these features to easily see what your colleagues have done, get updates and snippets from them, and filter all the posts by project using the topics as tags.

In a group, you can create shared VMs which multiple users can have access to, or credit users in the group money so they can create their own VMs and work privately.

It’s one of those situations where they probably could’ve just released the cloud development environment, the social network, or the project management, and it would have fit a market; but having them all work together and for free, is something to really think about.

I have been saying a lot of positive things about cloud environments, but there are some drawbacks when comparing them to developing locally which are worth at least mentioning.

Cloud vs. Local Development


One of the main things is that you aren’t really getting what I would call an IDE. For example, if you take a look at the Ace editor, it’s a great editor, but when you stack it up against a full fledged IDE like PhpStorm, they don’t compare. Ace is merely a code editor while PhpStorm contains all the tools you would need from testing to refactoring, all in one app.

The other drawback is simply latency, now compared to other web IDEs I haven’t had too much of an issue with this on Koding, but still, it doesn’t compare to a local setup. When you perform an action like opening a document, it could sometimes take a second to open.

So to summarize, developing online may not have all the tools you are used to working with, and it may not be as fast as doing it locally. But when you develop locally, you lose out on the powerful VMs and all the project management / social features.

Luckily you don’t have to make a choice. Editing code online is always possible so you don’t have to sacrifice on that front, but if you prefer coding locally with your own tools, you have full SSH access to your machines. So whether you want to use FTP, SCP, GIT, or any other kind of tool to transfer your changes to the server, you are given those options just like a standard VPS.

Setting Up SSH & Rsync

Now, I have already covered how to setup a bare GIT repo to deploy to your server, so it’s redundant to cover that process again, but let’s take a look at setting up your Koding account with an SSH key and using rsync to transfer your project to and from Koding.

For the unfamiliar, rsync is a utility for transferring large projects to and from your computer. Where it kind of differs from something like SCP, and the reason it’s good at working with large projects, is that it will scan the files both locally and remotely and only transfer the files that have changed. If you are working on any kind of project, you are going to have some framework system files, some boilerplate code, images, etc.. and you don’t really want to send them on every request, so rsync is a really good choice for stuff like this.

It’s not as good as GIT, you don’t get any form of version control, but if you are using Koding as a test environment and you just want to throw files up, or pull them down, rsync is the tool for the job.

The first step is pretty simple and it’s to get SSH setup; you just need to grab your public key (on a Mac you can run cat .ssh/ | pbcopy from a terminal window to copy the key) and then add it to your account page on Koding. The next thing you need to do is configure your computer to connect. Koding requires you to use their proxy as a tunnel to your server, so on a Unix based system, you can just create a file named ‘config‘ with the following inside (you need to replace this with your Koding username):

Host *
    User <username>
    ProxyCommand ssh nc %h %p

If you are on a Windows system, refer to their guide to see how to setup the proxy using Putty.

With that in place, you can run:

ssh vm-<vm number>.<username>

So for example, using my username, on the first default VM (which is number 0) you would run the following:


If all went well, you should connect and see the Koding terminal message. If it doesn’t want to connect, make sure you added the public key and make sure the VM is on in Koding (your VMs turn off when you haven’t used them for about 20 minutes).

With that setup, we can now create a local project. We don’t really need anything fancy here, so for this example I am just going to create a simple hello world HTML file inside a blank directory:

        <title>Koding Demo</title>
        <h1>Hello rsync</h1>

Save this file inside your projects folder and then run:

rsync -rvza --delete ./ vm-<vm number>.<username>

This will copy the entire contents of the current local folder to the remote directory deleting any remote files that are not in the current folder. If you ever make changes remotely, you can easily pull them down by reversing the paths like so:

rsync -rvza vm-<vm number>.<username> ./

Now these commands are a bit long, and if you plan on developing in this manner, you are going to want to create some shortcuts. One simple way is to just create bash aliases, but you may have multiple servers, and for each you would need an alias for each direction, so let’s just create a simple bash script which can accept the VM number along with the username, and the desired direction you want the files to go, and it will perform the transfer.

Bash Primer

I’m not going to cover all of Bash’s syntax, just the parts we need for this script.

First we need the variables, inside a bash script you define variables by typing name=value. For example, if we wanted to set a variable that contains a message, we would type:


There shouldn’t be any spaces around the equals sign for it to work. Once set, you can then retrieve the value of a variable by typing its name with a dollar sign before it. So to print the above variable’s value, we would type:

echo $message

Besides the variables that you define and set, you can use a couple of global variables that are set by your environment. These may be different according to your setup, but the ones we will be using are $USER for the currently logged in user and $PWD for the current folder. You can see what variables are in your environment by adding printenv to your code. This will print out all the environment’s current variables.

The next thing our script will need, is to be able to accept command line arguments. This is actually really easy to do, as they become numbered variables. So $1 represents the first parameter, $2 is the second and so on.

The last thing we will need to use in our script are if statements. These are similar to how you would write an if statement in most programming languages, with a few noticeable quirks:

if [ expression ]
    do something here
    do something else here

In bash scripts you have the expression between a pair of square brackets, and you have to leave a space between the brackets and the expression. You should also note that the then line is a requirement. The last difference, which is a little different, and is found in other bash structures is the fi keyword. Basically you just type the if backwards, it’s the same for a switch statement for example, you start the switch block with case and then you end it with esac (case reversed).

So with this information, let’s construct a simple script to help us upload and download our code to Koding:

Building Our Script

To begin, we need the whole-shebang to tell the computer to run it as a shell script and then I will create a simple helper function which will tell the user how to use this command:


function koding_usage
    echo "Usage: koding [push|pull] <vm_number> <username>"
    exit 1

If you are new to exit codes, 0 means it exited successfully and is the default returned when a script finishes, whereas anything else is an exit code for when an error has occurred. So if this function gets called, it means that the script wasn’t used correctly and we will exit with an error code.

Next, we need to make sure the arguments were passed in correctly and in the process, collect them and store them in some helper variables:

if [ "$1" = "" ]; then
    echo "Command Required"

if [ "$1" != "push" ] && [ "$1" != "pull" ]; then
    echo "You Can Only push or pull"

if [ "$2" = "" ]; then
    echo "VM Number Required"

if [ "$3" = "" ]; then

In this code, we are making four different checks:

  1. we check if there is a first parameter
  2. we check to make sure the first parameter is either ‘push‘ or ‘pull
  3. we make sure there is a second parameter
  4. we check whether the third parameter was set

In the first three if statements, if there was an issue we echo out a message and then call our helper method from above. For the last one though, if no username was supplied we will just use the currently logged in user’s username. So if your computer’s username is the same as your Koding username, you can leave the last parameter off.

The last thing we need to do, is actually run the rsync commands based on the command requested (push or pull):

if [ "$command" = "push" ]; then
    rsync -rvza --delete $PWD/ vm-$vmnumber.$
    rsync -rvza vm-$vmnumber.$ $PWD

You can see we are just placing the variables we collected (along with the current folder $PWD) right into the command. Since this is a shell script, you can just place shell commands straight in, like I did above

Now save the file and name it koding and then make it executable (you can do this by running chmod +x koding) and last but not least, move this file to your bin folder:

mv koding /usr/local/bin/

If you did everything correctly, you should be able to run koding and see our usage message come up. So now you can make a quick change to the example project above and simply run:

koding push 0

Assuming you don’t need the username property, and your current folder will be transferred as the Web directory on your server, named vm-0. The same goes for if you make changes online, you can cd into the local project folder and run:

koding pull 0

And you will receive all the updates.


Koding is a really powerful tool for prototyping and learning through experimentation. It has really cool social and project management capabilities and being able to code with someone else, live, can make a huge difference when you are trying to debug some code. Not to mention this all being free, means there really isn’t a reason you wouldn’t want to use this.

I really like the idea of having kd apps which run outside the VMs and I think it will be cool to see where people will take that and what kind of tools people will build.

You can sign up to Koding by visiting

Thank you for reading, I hope you enjoyed it, if you have any questions feel free to leave me a comment down below, on twitter or via the Nettuts+ IRC channel (#nettuts on freenode).

September 04 2012


jQuery Picture

jQuery Picture is a small plugin designed to help manage responsive images. It solves the problems associated with responsive images that are supposed to work well for all devices.

Making an image responsive isn’t too hard, but comes with a fundamental problems. These problems make responsive images difficult to achieve without extra http requests, overlarge images for smaller devices or 100%+ images for larger devices. It’s a sticky wicket, to be sure.

jQuery Picture is a workaround for managing this problem. It is simple to use and handles switching images depending on screen resolution. I won’t go into too much detail about how to use jQuery Picture because the website has great instructions, but I’ll lay the basics on you.

Here’s the markup:

<figure class="responsive" data-media="assets/images/small.png" data-media440="assets/images/medium.png" data-media600="assets/images/large.png" title="A Half Brained Idea">
        <img src="assets/images/large.png" alt="A Half Brained Idea">

And the JavaScript init function:


Essentially, jQuery Picture watches the screen width and switches the image based upon the data attribute. In the case above (lifted directly from, the plugin switches between three images. One image (the first “assets/images/small.png”) is served when the screen is less than 440px. Another image (“assets/images/medium.png”) is served between 440px and 599px. The last image (“assets/images/large.png”), is served for screens 600px wide or larger. You can even define a fallback image (wrapped in ‘noscript’ tags) inside the figure element. Nifty.

Initializing the plugin is super-duper simple.

This is a nice solution to managing responsive images for smaller devices. Hopefully, we’ll have a good native solution, but until then, it’s nice to know that with just a little javaScript, we can make sure we’re not eating up bandwidth or getting too hacky. If you want to see the plugin do it’s magic, just open your developer tools (I like Chrome) and resize your browser to mobile sizes. Load the jQuery Picture demo page and take a look at your network downloads. You’ll see that only the small .png is loaded. Resize your browser and watch as the plugin chooses the correct image for the screen size and replaces the smaller one. Magic!

Check it out if you have a chance. I’m sure I’ll be using it for my responsive designs from here on out (or until we get some native solutions!).

Tags: News Reviews

August 04 2011


July UX Resource Roundup

After a long hiatus, UX Booth is rebooting monthly roundups. In these roundups, look for a broad range of (sometimes bizarre) perspectives on user experience from many different Web-based resources. We’ll try and make horizon-broadening fun.

In this month’s roundup, you’ll learn about teledildonics, find out that tossing an egg will likely cause it to break, and see an OS review that’s probably longer than the user manual (and way, way better).

Netflix’ Big Fail

Tara the Shiba Inu

UX luminary Peter Merholz of Adaptive Path shares his feelings about the recent Netflix developments on the Harvard Business Review blog. He argues that Netflix has gotten a bit carried away with its success and is officially failing the customer empathy test. Short post, but worth the read.

Search: A Biography

Wikimedia Commons

Aristotle once said that if you would understand anything, observe its beginning and its development. So that’s why we suggest you check out this post on the evolution of the Web search to see how humble search beginnings evolved into what they are today.

Telling a Story on the Web


As we’ve pointed out before, crafting an experience for the Web is like telling a good story. There are characters, appropriate settings, and a narrative. Thanks in part to his background in journalism and media studies, author Robert Mills discusses how designers can learn from other types of storytelling.

The Monumental Ars Lion Review

Well, it’s sort of a lion.


Behold the beast that is the John Siracusa review of Lion (from Ars Technica). While the article is obsessively exhaustive in all aspects of the most recent Apple OS addition, there are great bits on new interactions and interfaces. Also, bonus points for a Game of Thrones reference on page 13 (of a whopping 19).

Instinct in UX (it’s science!)


“If you throw a rubber ball, it will bounce. If you toss an egg, it most likely won’t,” says author Taylor Bastien, which (hopefully) seems obvious. But he makes his point early in this article that instinct and intuition is important in all experience, especially those that are designed. Bastien delves into some psychological principals behind human behavior, and it all makes for a great read.

An Unlikely Tale of Usability Triumph


The holy grail of HCI is to bridge interaction gaps between humans and computers—issues that experience designers face every day. Christopher Mims shares with us a short case study about a triumph in usability design through teledildonics. We’re going to let you find out for yourself what that word means (hint: it’s what it sounds like).

A Chat with Mike Kruzeniski

Jan Mehlich

Core77 interviews Mike Kruzeniski, Design Lead at the Windows Phone design studio out in Redmond. He shares his personal outlook on interaction design and usability, and ends his interview by quickly explaining the 5 things that every designer should know (spoiler: knowing the basics is important).

That Table Looks Wobbly…


Tables are pretty much poised, by nature, to be usability troublemakers without the proper care and attention. This article takes a look at a few good practices to adopt while creating tables so that they’re not only successful sorters, but also user-friendly.

A Man’s Quest to Pinpoint Mobile Context

Mohammad Nowfal

Mobile context: what does it mean!? Though fairly weighty in theoretical discourse, this thorough post by Jason Grigsby examines where the mobile medium fits in with the greater media picture. He includes a good deal of context to his argument as well, so make sure you’ve got time to get happily lost in design conversation.

.net Usability Case Study

After running usability tests before launch, .net Magazine documented the testing process in this informative post. Author Alastair Campbell outlines how .Net used A/B testing, eye-tracking, and Google’s Website Optimizer to reach their final product.

Moving on

Do you feel slightly more enlightened? Let us know what you think in the comments section. Also, if you think we missed something really, truly amazing, let us know at our resource section. And be sure to see all the other great resources that didn’t make the spotlight cut.

Advertise here with BSA

May 13 2011


Review: The Book of CSS3 – A CSS Book Even Experts Should Read

Think you know everything there is to know about CSS3? Thing again. Author Peter Gasston just released “The Book of CSS3: A Developer’s Guide to the Future of Web Design”, which takes an in-depth look at all things new to the CSS world.

Is it just another CSS book or a must-have addition to your library? Read on to find out.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.


Another Book on CSS?

Books on CSS are notoriously boring for anyone who already knows their way around a style sheet. Most of those that I’ve seen and own spend a great deal of the book covering the exact same basic topics: here’s how the CSS box model works, padding works like this, margins work like this, style your text this way, etc. Even books that promise to get into advanced topics usually do so only in the last few chapters, meaning you just paid $40 for 40 pages!

Since I’m a full-time professional blogger (can you believe that such a thing exists?) I know very well where to find basic CSS instruction completely free online, which is exactly how I learned. Don’t get me wrong, there are lots of amazing CSS books out there, but I’m hesitant to fork out the dough for one because of these reasons.

These thoughts went through my mind as I agreed to take a look at a book by Peter Gasston titled “The Book of CSS3″. As further fuel to my skepticism, I considered that CSS3 is the single most written about topic at the moment on sites such as this one. Again, why pay for content that’s free and more than plentiful online? I know how box-shadows work thank you very much and don’t require any further assistance!

I Was Wrong: This Book Is Great

The Book of CSS3 starts off with the following passage:

“Let me tell you a little about who I think you are: You’re a web professional who’s been hand-coding HTML and CSS for a few years; you’re pretty comfortable with creating complex layouts, and you know not only your div from your span but also your bold from your strong; you’ve read a little about CSS3 and may even have started experimenting with some of its more decorative features like rounded corners, but you want to gain a deeper understanding of the fundamentals.”

</ br>

Right away, Gasston grabs my attention. He’s writing to an audience who already knows how to hand code websites, meaning he’s not going to bore me with entire chapters on the difference between internal and external style sheets! Well played sir, I will continue to read your book.

Gasston then begins to explain what CSS3 is and isn’t. In this discussion he introduces the box-sizing property. In his very first property introduction, he’s hit on something that I know very little about! At this point, I’m beginning to realize that this book just might be genuinely useful.

In the very next section, he goes straight to media queries, what I believe to be one of the most important new aspects of CSS3. With this and every other topic that he covers, one thing really stands out: Gasston has done his research. He doesn’t briefly cover almost anything but rather really digs in and explores every aspect of the spec, whether proposed or already implemented.

With just about everything that I read about, I learned quite a bit that I didn’t already know. He successfully adds value that you simply never get out of a brief, one-off blog post about a topic and therefore makes the book well worth the purchase.

I especially enjoyed the latter part of the book, which covers properties and methods that aren’t yet supported by any browsers but represent huge potential changes to the way we code websites should they be accepted into CSS. Gasston even points out some useful JavaScript plugins that let you try out these fancy new methods right away!

The Physical Book


The book itself is quite hefty and comes in at just under 300 pages. The cover is attractively illustrated and is therefore definitely the kind of thing I don’t mind having around (who wants an ugly book on their desk?). The content inside is laid out nicely with plenty of charts and graphics to make for quick and enjoyable browsing.

One thing that I particularly appreciated was that, with every property discussed, Gasston would conclude with a chart discussing browser compatibility. This is extremely handy and I’m confident it will be something that causes me to come back to the book again and again.


The pages are grayscale, but for the most part I didn’t really mind at all as learning code doesn’t necessarily require full-color prints. The one exception is the section on Color and Opacity, where it would’ve definitely been nice to see some examples in color. It’s important to recognize though that they’re keeping your cost down by running single color print jobs!

Table of Contents

Just to give you a good idea of everything the book covers, here’s the table of contents (excluding the preface, introduction, etc.). As you can see, the topics are all dedicated to brand new and advanced CSS3 goodness so you won’t have to skip half the book if you already know how to code. Also, the topics are split up so nicely that it’s perfect to keep on hand purely as a reference even if you’re not interested in reading the whole thing. The next time you’re struggling with building a custom CSS gradient, flip open to that chapter and you’re good to go. The thorough index obviously helps out with this as well.

  • Chapter 1: Introducing CSS3
  • Chapter 2: Media Queries
  • Chapter 3: Selectors
  • Chapter 4: Pseudo-classes and Pseudo-elements
  • Chapter 5: Web Fonts
  • Chapter 6: Text Effects and Typographic Styles
  • Chapter 7: Multiple Columns
  • Chapter 8: Background Images and Other Decorative Properties
  • Chapter 9: Border and Box Effects
  • Chapter 10: Color and Opacity
  • Chapter 11: Gradients
  • Chapter 12: 2D Transformations
  • Chapter 13: Transitions and Animations
  • Chapter 14: 3D Transformations
  • Chapter 15: Flexible Box Layout
  • Chapter 16: Template Layout
  • Chapter 17: The Future of CSS
  • Appendix A: CSS3 Support in Current Major Browsers
  • Appendix B: Online Resources
  • Index


As you can tell, I really enjoyed this book. My expectations were admittedly low but it definitely blew them away. Gasston’s writing style is informative and even witty at times but cuts straight to the point instead of being overly verbose. He does a great job of explaining each property quickly and getting to what you really want to see: the syntax. I have several books on web development that have been sitting in a closet collecting dust almost since the day I received them, The Book of CSS3 will avoid that stack for some time as I already find myself referring to it on a daily basis.

Want to score a free copy of The Book of CSS3? Check back next week for your chance to do just that!

Tags: Reviews

March 07 2011


Book Review: Smashing Magazine 2

It’s been over a year since we took a look at Smashing Magazine’s very first publication, and the web industry has come a long way in twelve months. Today, we’re going to offering our thoughts on The Smashing Book #2, hailed as “sharing valuable practical insight into design, usability and coding”.

With a great range of contributors and big steps forward in shipping and physical design, let’s see how Smashing Magazine’s latest release stacks up!

Physical Design & Quality

Smashing Magazine came under some criticism for the build quality and shipping of their first book, and this is something that they’ve gone to great lengths to solve – to great success. The typography is understated and enjoyable to read, and margins give plenty of space around the content.

The physical feel of the book is wonderful – a hard cover, high quality printing, stitch binding, and a funky orange bookmark all contribute to an enjoyable read. It’s not surprising to hear that Smashing Magazine are only offering the printed copy of the book (you won’t find an eBook version anywhere).

Although this might be an unpopular decision for some, you’ll understand why after holding the physical copy.

Contents & Style

So, on to the content. A valid question would be how this differs to the first Smashing Magazine book. After all, they’re both fairly generically pitched as covering “web design”. Here’s the official line on the matter:

Both books cover best practices in Web design and Web development, and they have similarities, but on a broad scale they cover different areas of design.

Book 1 presents coding and layout techniques, color theory und UI design, while Book 2 covers psychology, designing for mobile devices, graphic design, wireframing and book production. They complement each other very well but are also distinct enough for standalone reading.

Each chapter of the book is preceded with a wonderful illustration, designed by Yiying Lu (the designer behind the Twitter “fail whale”). These break up the content well, and really add to the overall quality feel of the book. If you really love the artwork, you can even purchase it as “wall art”!

The Smashing Book #2 has a wonderful array of contributors, and this is one aspect of these publications that I really enjoy. Each author is knowledgeable and talented in their own area, giving the content a degree of credibility that you don’t often see elsewhere.

The inherent downside is that the book doesn’t have a central narrative running throughout, and you can obviously feel the differences in writing style and personality with each chapter. Each section is almost a distinct “mini book”, giving you a beginning-to-end analysis of a particular theory, technique, or practice.

Whether you’re interested in going right back to the basics of design theory, crafting mobile user experiences, improving your wireframing technique, or getting to grips with web psychology, there’s something for you here. The content absolutely justifies the price, and you won’t be left disappointed.

Smashing Magazine is a fantastic source of ideas, content, and inspiration for the design community, and the level of quality you’ve come to expect is upheld here.

Where to Buy

As mentioned before, you can’t pick this one up as an eBook. You can, however, grab a sample chapter to get a feel for how the book is presented.

Smashing Magazine also had several chapters that they couldn’t fit into the finished book. These are available completely free, entitled Smashing Book #2: The Lost Files.

The price comes in at around $27.50 (approx $38), and you can order your copy here. If you’ve already purchased and read the book, I’d love to know what you think. Feel free to share your thoughts in the comments!

Tags: Reviews

February 22 2011


The Smashing Book 2 – Review

For those of you who haven’t picked up a copy of The Smashing Book 2, this is a brief overview and some of my initial thoughts about the book. I received my copy last week, and I’ve been reading it for the past couple of days. So far, I’m impressed. Just like everything the team at Smashing Magazine does, the emphasis here is on quality – from the content to the actual printing of the book.

The production quality was the first thing I noticed after unboxing it. Unlike the first book, this one has a hard cover, stitched binding, and even a “Smashing” orange bookmark. Not that the original Smashing Book was bad, but It’s evident that much more emphasis and care was put into the production of this one.

The focus of The Smashing Book 2 is on design, usability, and coding. It starts off with an overview of the principles of graphic design and how they’re applied to web design. In this chapter, I especially like the section on “Timeless Thinking”, which basically talks about how to create something that won’t become outdated. It explains how to achieve this by focusing on the fundamental building blocks of design instead to using a bunch of trendy gimmicks for nothing more than visual appeal. We could all benefit from more of this kind of thinking.

The book continues on with plenty of practical tips and advice on building web sites, from mobile to e-commerce. There’s also interviews with experts on subjects like the future of web typography. But what I like best about the book so far is that it seems to be more focused on the philosophy behind what we do.

Here’s the list of chapters from the book:

  • “The Principles of Great Graphic Design”, Matt Ward and Alexander Charchar,
  • “Visible vs. Invisible Design”, Francisco Inchauste,
  • “Designing Mobile User Experiences”, Mike Rundle,
  • “Sketching, Wireframing and Prototyping”, Janko Jovanovic,
  • “Red Flags in Web Development”, Christian Heilmann,
  • “The Future of Web Typography”, Vivien Anayian,
  • “Game Design Techniques Applied to UX Design”, Christoph Kolb,
  • “When They Click: Psychology of Web Design”, Susan Weinschenk,
  • “Design Patterns on E-Commerce Websites (A Study)”, Steven Bradley,
  • “How to Make a Book (Like This One)”, The Smashing Magazine Team.

Another nice touch are the colorful full-page illustrations that open each chapter. They’re created by Yiying Lu, who is well known for her design work on Twitter’s famous “Fail Whale”. These illustrations, excellent typography, and great page layout make this book a pleasure to read.

As a bonus, there’s a free e-book you can download, called the Smashing Book #2: The Lost Files. The hard cover book was originally supposed to have more chapters, but the chapters became bigger than planned. So this free e-book is the result.

You can get your copy of The Smashing Book 2 from the Smashing Shop.

Tags: Reviews

October 04 2010


Internet Explorer 9 Beta: Reviewed and Benchmarked

Microsoft is making some bold claims with the release of Internet Explorer 9 Beta. They explain that other browsers, unlike IE9 Beta, only use 10% of your PC’s capabilities; they show how websites will be streamlined and work faster by taking advantage of your graphics processing unit (GPU), and how a range of new features will provide a richer experience when combined with Windows 7.

Today, we will be looking at what new features IE9 Beta has to offer, and how it performs when bench-marked against Firefox, Chrome, Safari, and Opera.

Download and Installation

System Requirements

In order to run in Internet Explorer 9, you need to have one of the three following operating systems:

  • Windows Server 2008
  • Windows Visa
  • Windows 7

As you would expect, there are 32-bit and 64-bit versions, both of which require at least 512MB of RAM to run.
Depending on your operating system, you need between 70MB and 200MB of hard drive space. To be honest, as long as you’re running one of the three operating systems listed above, I don’t think are going to have any problems.


IE9 Test Drive Website

Microsoft have set up two dedicated websites for the deployment of Internet Explorer 9.

IE9 can be downloaded from either of these websites; both sites are best viewed through IE9 to show off its highlights, new features, and performance enhancements. The Test Drive website provides dozens of application demos, each of which are tailored to show off IE9′s capabilities. We will be taking a look at the demos and benchmarking tools later in the article.

Before You Install

If you have Internet Explorer 8 installed, please be warned: if you install the 64-bit version of IE9, your 64-bit version of IE8 will be uninstalled. I haven’t tested if this is true for the 32-bit version but I wouldn’t see why it would be any different.

As far as I could see, IE9 retained all of my bookmarks, favorites, and so on, but you may want to backup your data just in case.


The installation should run smoothly. I am using a Windows 7 system with fairly up-to-date hardware. I can’t vouch for other operating systems, but during the install a Windows update occurred and it needed a full reboot. I have since confirmed this with several other Windows 7 users, all of which experienced the same install steps.

I can imagine a Windows update will be provided prior to the full release of IE9, hopefully that will render the reboot unnecessary in the future.

Top New Features

Hardware Accelerated Graphics and Text

IE9 HTML5 Speed Read Demo

It appears that right from the start, the developers of IE9 had speed as a primary objective. Hardware accelerated graphics allow websites to run smoother and faster in your browser. Elements such as graphics, text and video are now rendered by your GPU instead of the CPU. We will see the effects of this during the benchmark tests later.

Refined, Cleaner User Interface

Microsoft has really toned down the browser’s interface. When compared to Firefox or IE8, you can see just how much fat has been trimmed from the overall application. The address bar no longer extends across the top, the independent search bar has disappeared, and most noticeable of all is the missing status bar from the bottom of the screen.

Subtly, the navigational buttons now change colour to match a websites theme or favicon: a nice surprise when you first notice.

Pinned Sites, Jump Lists and Other Windows 7 Integrations

Anyone using Windows 7 will know how much more useful the Windows task bar is compared to the previous versions. Thankfully, IE9 now works with the task bar to add extra usability to your favourite websites.

Jump Lists

By grabbing a tabbed web page, you can tear it from the browser and pin it to your task bar. Not only can you open those sites like any other application, but now you can also interact with your pinned websites by right clicking and accessing what’s called a “Jump List”. For example,’s jump list offers the following tasks: new tweet, direct messages, mentions, favorites, and search, right from your Windows 7 task bar. This is a huge time saver!

Windows 7 Task bar Controls

The Thumbnail Preview Controls allow you to navigate a menu or pause a video from your task bar. If you have ever used Windows media player from your task bar then you can imagine what this is like. I’m sure websites like YouTube and Facebook will be implementing this very soon.

New Tab Page

Popular Sites Grid View

It’s not unusual to see a page where your bookmarked or favorite websites are displayed for easy navigation. Safari offers a great example of this, but IE9 has taken it one step further. Whenever you open a new tab, you are shown your most popular webpages with their favicons and page titles next to each other. The added benefit here is the activity meter, which displays your browsing habits alongside your popular web pages. If you are a fan of this feature in other browsers then this is a welcomed addition to IE9.

One Box

As I mentioned above, the address bar is now compacted and the search bar is missing altogether. Microsoft has ingeniously combined the address bar, and search bar into one box. You can now navigate to a website, query a search engine, and browse your history or favourites all from the same box. You even have the option of turning on search suggestions, which are returned in real time as you type in your query.

At first I was concerned about privacy: how does the browser know that what you’re typing is not to be shared with search engines? Well, IE9 put you in control of your information and allows you to control what is and isn’t sent to search engines. It’s almost like they thought of everything!

Notification Bar

Download Notification Bar

In keeping with its cleaner interface, IE9 has changed the way notices and alerts are presented. Previously, notifications may have pushed web page content further down the browser or alerted you with a pop-up box, which obstructs your view of content. Now, all notifications are shown in the Notification Bar at the very bottom of the browser. With a clean and informative design, you can confirm a download or update an add-on without disrupting what you were doing.

Download Manager, and SmartScreen Filter

Download Manager

All downloads will now be managed by IE9′s download manager. If you are familiar with Firefox, you will recognize many of the same features; these include a default download folder, a separate ‘Download’ pop-up box (which displays the name, file size and location for each download), and the ability to delete, view or clear all downloads.

However, that is where the similarities end. IE9 now comes with integrated malware protection called SmartScreen.

SmartScreen Alert

SmartScreen is “a groundbreaking browser feature” developed specifically to protect you from malicious downloads.

By using real-time data, each download is assigned a reputation according to how many times that download has been reported as malicious. The more severe warnings a file acquires, the higher SmartScreen judges the download to be a risk. According to Microsoft: “Internet Explorer 9 is the only browser that uses download reputation to help users make safety decisions.” I can’t wait to see this in action, but I can’t help wondering if this could be abused by malicious users incorrectly reporting files.

Hang Recovery

Applications crash; it’s a simple fact. No matter how hard developers try, there will always come a time when your browser comes across an endless JavaScript loop or web page with far too much data to handle. For me, the most irritating time for this to happen is when you have multiple tabs open… not any more.

IE9 cleverly renders that irritation obsolete. In situations where other browsers normally hang, IE9 confines the problem to one tab, allowing you to close the tab and continue browsing without disrupting your work. No more checking your history and wondering which one of your tabs crashed your browser; well done, IE9.

Compatibility View

Like many of the features covered so far, this one is also unique to IE9.

Compatibility View works by analyzing popular websites and testing their compatibility with IE9. If a website does not meet certain criteria, a new button appears alongside the refresh and stop buttons. If you choose to click the button, “legacy document mode” is activated.

Legacy Document Mode really means displaying websites in the same way that Internet Explorer 8 does. This way, if there are any elements displaying incorrectly, you can turn on the compatibility view, and hopefully resolve any issues. Also, IE9 remembers which mode/view you prefer, and automatically selects this next time you visit the page.

After trying this myself, I have yet to see any difference between views.

I should also note that a websites compatibility is predetermined by the Internet Explorer team. I can’t help but wonder what criteria are websites being judged upon for either compatibility?

Add-On Performance Advisor

Addon Manager

This feature first appeared in Internet Explorer 8, and is simply a natural progression for its capabilities.
Many browsers now offer add-on applications; these can range from search engine optimisation tools to e-mail checkers and more. The performance advisor simply notifies you if an add-on performs poorly and will give you the opportunity to disable it.

I have primarily used Firefox for several years, and I am quite an advocate of its add-ons. I really wish this feature was available, as I am often disabling plug-ins for suspected performance issues.

Markup and Standards Support

Internet Explorer 9 was built with modern standards in mind. With developers and clients already trying out their websites in HTML5, SVG, and CSS3, IE9 appears to be focused on extensive support for modern standards. I was surprised to hear that they have invested a large amount of time and work with standards organizations such as W3C. To ensure that they stay ahead of the game, they have contributed over 2000 test results to the governing standards bodies to ““help same markup become a reality”.”

To enable developers to easily work with IE9 and interoperable markup, the IE9 team concentrated on five key areas: HTML5, Document-Object Model Optimization, CSS3, Scalable Vector Graphics, and Chakra, the new JavaScript engine.


HTML5 Pinball Demo

If you have yet to see HTML5 in action, I recommend you visit the IE Testing Center. There are some fantastic canvas and benchmarking tools to play around with. Personally, I love the new video and audio elements, which allow for fast and easy media content on nearly all popular modern browsers.

The support for HTML5 in the IE family first began with Internet Explorer 8. IE8 does not support most of the newer HTML5 features, and when compared to other modern browsers, really flags behind. This is why IE9 chose a different approach, one which utilities hardware acceleration through Windows and your graphics processing unit. Combined with added support for new elements and better HTML parsing, IE9 is already a step ahead of the competition where HTML5 is concerned.


Once again IE8 laid the ground work for IE9 in terms of compliance for cascading style sheets by centering on CSS2.1. If you are a developer you will know how hard it can be to force IE8 to play nicely with CSS3; unfortunately, there are only a few fixes and workarounds, and even these still present problems. Thankfully, IE9 was built with CSS3 in mind and will be the first version to include many CSS3 modules.

One of the latest trends in web design is the use of @font-face and similar typography enhancements in web pages. IE9 now introduces support for the Web Open Font Format (WOFF), which can work with TrueType and OpenType formats to transform the look of your font-family’s in CSS3. After working with Firefox and @font-kits for the last few months, I am excited to see this in action with IE9.

IE9 now supports the following modules from CSS3:

  • Backgrounds and Borders Module
  • Colour Module
  • Fonts Module
  • Media Queries Module
  • Namespaces Module
  • Selectors Module
  • Values and Units Module

Scalable Vector Graphics (SVG)

Recently I started working with Adobe Illustrator; after 10 years of working in web design and development (and primarily working with Adobe Photoshop) I felt I could finally devote some time to working with Illustrator and discovering what it has to offer, and in particular, exporting my work to SVG files. This was my first introduction to scalable vector graphics, and I am now starting to see them more and more.

It seems that, like me, Internet Explorer has never dealt with SVG either. It is only with IE9 that we first see interoperable SVG element support. Not only are they complying with standards, but they are also using hardware acceleration, by using our PC’s GPU to improve performance when rendering.

If you haven’t done so, I would recommend visiting the IE testing center and checking out some of the SVG demos; they have come a long way from growing simple 2-D shapes.

Chakra and Improved DOM

The Internet Explorer team have nicknamed their new JavaScript engine Chakra.

There appears to be a never-ending interpretation of what a ‘Chakra’ is, especially when it comes to medicine and religion interpretation; and if your background is in web design and development like me, trying to understand an overly complicated Wikipedia page on the subject is far outside the scope of this article.

On the other hand, IE9′s Chakra is an entirely new way of looking at JavaScript engines. In previous versions of Internet Explorer, JavaScript was tagged on to the side; it was never built into the core. Chakra changes things. JavaScript is now part of IE9′s engine, works with multiple CPU cores, and takes advantage of your computer’s hardware. This allows for faster interpretation, compiling, and code execution.

The new Document-Object Model has also had some spring cleaning. With various improvements, IE9 has increased efficiency and speed when rendering content. For example, previous versions of Internet Explorer have had problems handling white space in the DOM. IE9 has resolve these issues, handling this problem in a more appropriate manner.

Browser Benchmarks & Comparisons

With all this talk of hardware acceleration, modern standards support and improved interoperability, you could be forgiven for thinking that IE9 is the new Holy Grail of modern browsers. It certainly makes some bold claims and to be honest, as a hardened Firefox fan, I want to see IE9 put its money where its mouth is.

As I write this, it is just over 24 hours since the release of the IE9 beta. Anyone monitoring Twitter or following forum topics will already find brief comparisons and benchmarks between several browsers and IE9. I have already seen plenty of pros and cons, valid arguments and sworn allegiances to other browsers when people are asked: ‘So, are you migrating to IE9 then?’.

I decided to see things for myself, so I set up a basic benchmarking environment by installing five of the most popular browsers today and testing them against the claims of IE9. Throughout the rest of this article, you will see what tests and benchmarking tools are used, and ultimately how well IE9 fares against the competition.

Test System

I used a laptop and desktop PC to perform the tests but included only one set of results with article. I found that the results from testing hardware acceleration had very little difference between a moderately priced ‘home office’ laptop and my desktop PC. This was also true for testing between 64-bit and 32-bit browser versions.

Here are the system specs for my desktop PC:

  • Windows 7 64-bit
  • Intel i7 920 D0 CPU @ Stock 2.67 GHz
  • Corsair 6GB DDR3 Memory
  • ATI Radeon HD 5800 Graphics Card
  • ASUS Rampage II Motherboard


IE9 Version

I decided upon the following browsers through personal experience and after consulting with other web designers and developers and the ’2010 Internet Browser Software Review Product Comparison’ list from

  • Firefox v 3.6.10
  • Opera v 10.62
  • Safari v 5.0.1
  • Chrome v 6.0.472.59
  • IE9 Beta v 9.0.7930.16406

I wanted to include a list of browsers which are popular and available across several operating systems. I think it’s important to say that when the benchmarks were conducted, each browser was freshly installed with the latest version, and no add-ons were installed.

Each of the tests were also performed with the browser maximized and after a fresh reboot. If you take a look at the IE Test Drive website you will see dozens of tests and great looking examples. Everyone will have their favorites and I understand you may feel other tests may be more suited to a benchmark browser comparison. Please forgive me if I have missed a more appropriate test to display here.

Benchmark Test Results

WebKit SunSpider JavaScript Benchmark

SunSpider Benchmark Results

Version: 0.9.1

SunSpider emulates real-world examples of JavaScript. By asking the browser to perform common JavaScript functions, like cryptology, we can gauge how quickly a browser handles. The quicker the JavaScript is executed, the better the engine.

Acid3 Test

Acid3 Benchmark Results

The Acid3 test is actually a set of one hundred tests, grouped into six areas. The test is designed to gauge how well a browser handles various web standards elements. Each of the six areas are represented as colored boxes and a successful percentage score out of one hundred is shown below. The full test results can be quite detailed, if analyzed correctly.

Today I have included the percentage score for each browser. I recommend you visit the Wikipedia page for Acid3 if you wish to read more about it.

CSS3 Selectors Test

CSS3 Selectors Benchmark Results

The CSS3 Selectors Test runs through forty-one CSS3 selectors and has a total of five-hundred-seventy-four tests. Once the test is completed you will be able to view any buggy or unsupported selectors for your browser. To keep things simple, I have included a score out of five-hundred-seventy-four for each browser.

The HTML5 Test

HTML5 Benchmark Results

Version: 1.0

The score for this test is determined by the browser’s support for new and upcoming features of HTML5. Points are awarded as each feature is passed, and bonus points are awarded for special features like supporting audio and video content. I have listed each browser’s score out of a possible three hundred points.

FishIE Tank

FishIE Benchmark Results

This is a great visual test, clearly it has been designed to show off the advancements in IE9. Using the new canvas features of HTML5, we are shown a fish tank, FPS counter and the option to change the amount of fish on the screen at any time. This test certainly depends upon hardware acceleration, the higher end PC will always perform better than these kind of tests. The graph above shows the results for 50, 100, and 250 fish when the browser was maximized to full screen.

Psychedelic Browsing

Psychedelic Benchmark Results

I first tried this test in Firefox . . . and very little happened. It was only when I tried this in IE9, that I fully understood the purpose of the demo: to once again show off IE9′s hardware acceleration. Just like the FishIE Tank test, the results were recorded in frames per second. The higher the frame count, the better the performance.

IE Beatz

IEBeatz Benchmark Results

I chose this test, because it is interactive, uses ‘GPU-powered HTML5 graphics’, Canvas, SVG and requires 27 audio elements. I almost removed this from these benchmark tests on the grounds that only two browsers loaded the audio elements. But I kept it in as I feel it highlights real-world problems when it comes to interoperability and modern web standards. The results were recorded after leaving the demo to run for five minutes.

Canvas Zoom

Canvas Zoom Benchmark Results

All I can say is they must have used one expensive camera to take a picture! If you have yet to see this panoramic canvas benchmark in action, I suggest you take a look now, because it truly is spectacular.

At first I wondered how I could accurately gather test results. Like the other tests I maximized the browsers. I then clicked each of the images along the bottom and used the first one to zoom in and out multiple times. I recorded the average frame rate for each browser in the graph below using the same method. Not exactly scientific, but I feel it gives an accurate depiction of a real-world example.

Benchmark Conclusion

Looking at the bar graphs as a whole, it’s clear to see two sides to IE9:

  1. A dedication to hardware accelerated graphics, which clearly pays off when working with HTML5′s canvas. You only need to look at the psychedelic test results to get an idea of how well IE9 plays with your GPU.
  2. An improvement over IE8′s efforts to work with modern standards, but it still flags behind when compared to the other browsers.

Here’s where things start to get interesting. Microsoft has been promoting IE9′s modern standards support all the way along the development trail. In fact, their Beauty of the Web and Test Drive websites have examples, demos, and games all over the place. But with the score of 96 in the HTML5 compatibility test (the lowest score out of all five browsers) I start to wonder how swayed their demos and examples really are.

Of course, some leeway can be given for companies trying to promote their own products, but filling dedicated websites with examples like psychedelic browsing and Canvas Zoom, (both of which cause extremely poor performance in all other browsers) clearly gives the wrong idea on just how HTML5 ready IE9 really is.

At this stage, I’m glad I chose independent benchmarking tools, like the HTML5 compatibility test website. Without moving away from Microsoft’s Test Drive demos, you could be fooled into thinking that the latest version of Internet Explorer actually ticked every box for HTML5 and other modern standards.

Unfortunately, the confusion doesn’t stop here. Throughout the release of five ‘Platform Preview’ versions of Internet Explorer 9, Microsoft have been collecting their own test data. These results can be seen at the IE Test Center.

Looking at the ‘Cross-Browser Test Results’ table, and the HTML5 section, I count only three fails when looking at an older version of IE9. The platform preview version shown in this article already has a greater pass rate than any other browser listed.

In this case, we have conflicting test results. I’m certainly not accusing either side of padding the stats, because you can perform your own tests with IE9 and HTML5 website. I just think you need to be careful when comparing results like this; after all, the HTML5 Compatibility website and the IE Test Center tested for different HTML5 elements.

Pros and Cons


  • Clean and interactive interface.
  • ‘One box’ – address bar, search engine query, and favorites/history search in one. This is also now resizable.
  • Tabs are now moved up a level and sit alongside the address bar.
  • No task/info bar at the bottom of the browser, instead notifications are now shown in an unobtrusive box that appears when necessary.
  • Excellent use of hardware acceleration to improve, graphics, text, and images across webpages.
  • Improved standards support, such as HTML5, CSS3, and SVG.
  • “Tear off” tabs can be pinned to Windows 7 task bar for extra functionality.
  • Opening a new tab will show your most popular sites, sorted by activity. You also given the options to reopen previously closed tabs and reopen your last session. Both great features for recovering a crashed/closed browser.


  • Removed Internet Explorer 8 without warning.
  • Some websites just refuse to load, even with semantically correct markup. In my experience, this seems to be specific to the odd website taking advantage of HTML5.
  • Smaller screens, may have problems with tabs sitting alongside the address bar.
  • A reboot is required as part of the installation process, this is a minor grievance and may be resolved with a standard Windows update prior to final release.
  • IE9 scored the lowest out of the five browsers on Considering how Microsoft continuously advertise IE9′s support for HTML5, you would of expected to perform better.
  • Tabs are now moved up a level and sit alongside the address bar. I like the way this looks and feels, but I get the feeling that it may just get in the way further down the line.


It appears Microsoft has clear goals when it comes to IE9. They want to embrace modern standards and contribute to governing bodies like W3C to aid interoperability. IE9 is a massive leap forward from IE8′s attempts at HTML5, CSS3 and SVG. And it also feels like this is the browser they wanted to release with Windows 7. Looking at some of the new interface changes, like Jump Lists, reinforces this.

The benchmarks have shown problems still exist between IE9 and HTML5, but the advancements in hardware acceleration really shine through. Bugs do exist, some websites fail to load and it may take some time to get used to the new layout, but we need to remember this is still in beta stages, so maybe we could forgive it for the odd problem throughout development. So despite it’s cons, I’m happy testing out my latest web designs in IE9 and I am really excited about the final product.

I hope you have enjoyed this introduction to IE9 Beta and try it out, even if it is only to play PacMan in the IE9 Test Center!

September 15 2010


iPhone App Designs Reviewed: Critique Board and Lessons Learned

Smashing-magazine-advertisement in iPhone App Designs Reviewed: Critique Board and Lessons LearnedSpacer in iPhone App Designs Reviewed: Critique Board and Lessons Learned
 in iPhone App Designs Reviewed: Critique Board and Lessons Learned  in iPhone App Designs Reviewed: Critique Board and Lessons Learned  in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Some time ago I started an iPhone app design review section on our company’s website. The idea behind this “Crit Board” was simple: if mobile developers want to create apps that people want to buy, they’ll need help with design and usability. But most of the time they can’t afford it. On our Crit Board, developers can send us their mobile apps along with questions and problems, and we (free of charge) will pick apart key usability issues, illustrate our design recommendations and post our findings.

Critboard in iPhone App Designs Reviewed: Critique Board and Lessons Learned

The only condition to get free criticism from us is that you agree for it to be made public, which is why I am able to share several case studies with Smashing’s readers right now. It’s hard to imagine something more relevant: these are real problems facing real developers. I hope these problems and the proposed solutions will benefit others who have similar issues and will be generally relevant to those working in the field.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

1. Foobi


I am the lead designer and developer of Foobi. Foobi was designed to track your diet in a different way; instead of tracking calories and tapping on many drilled-down lists, it works by simply tracking servings per food group and providing an overview of your food intake balance.

Although I have tried really hard not to over-design it by tracing Apple’s footsteps while building custom UI control elements, I would love to hear from you about this subject.

— Remy”

Foobi 1 New in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Your app is beautiful indeed. And it is also usable and easy, exactly as you describe it: if user knows how to flick, he is already an expert. An expert in what, though?

As stated in the iTunes description, the purpose of this app is to “track and balance your diet.” I understand the two main user goals as follows:

  1. To record what food they consume,
  2. To make sure they stay on the right path with their nutrition, and to have a clear guide to balancing their diet if they veer off that path.

Your app does a good job of fulfilling the first goal: users can easily record what they eat just by selecting the right food group and adding the amount of “servings” consumed.

Foobi 2 New Updated1 in iPhone App Designs Reviewed: Critique Board and Lessons Learned

But what about the second more important goal of tracking progress and adjusting one’s diet? Does the app help customers achieve this goal? Not very well. There is room for big improvement.

There are two main problems with this part of the app.

Summary Information Is Hidden

To access the summary chart, you have to flip the iPhone to the side and view it in landscape mode. But this feature is not communicated through the app’s design, so a user will discover it only by accident. When we talk about fulfilling a major user goal, it is important never to rely on accidents to communicate functionality.

Foobi 3 New Updated in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Summary Information Is Not Well Designed

Additionally, the summary is not informative enough.

The summary chart doesn’t offer too much to the viewer. Here are the main problems:

  • It’s not clear what the different colors mean, and there is no legend to help.
  • The scale is not flexible. You can view the information only by week, which does not allow users to easily see their big-picture eating habits. (Tip: consider incorporating the pinch gesture to allow users to scale in and out.)
  • Tracking consumption of a particular food group is not possible with this chart but would be valuable to users.

Foobi 4 New Updated in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Information design is a vast topic. There are a million ways to address the problems that I’ve highlighted and to increase the visibility of useful information for your audience. I recommend reading Edward Tufte’s books, particularly The Visual Display of Qualitative Information.

And here’s an inspiring display of a lot of information. Of course, it’s not tailored to mobile use, but it has a few great ideas:

4 Foobi in iPhone App Designs Reviewed: Critique Board and Lessons Learned
From Google Finance.

One More Thing

When I purchased and downloaded your app, I didn’t quite understand why it was taking so long to download… until I realized that it had already downloaded. I was fooled by the app icon, which makes it look like it is still downloading:

5 Foobi Updated in iPhone App Designs Reviewed: Critique Board and Lessons Learned

2. Budget Planner

“Alex, please take a look at my app Budget Planner. I have tried everything, and it keeps going up and down. The major issues that people complain about are intuitiveness and slowness. People don’t understand what the software does. But people who do learn it love it.

— Alex Sabonge”

The basic idea of this app is very good, and the App Store description shows off its functionality well:”Budget Planner tracks your bills, budget, calendar and transactions by displaying your balance in a calendar view, letting you know how much money you will actually have on any particular day. Like a balance forecaster.”

Here’s an overview of how Budget Planner works:

  1. Users input their monthly salary info and plug in their fixed monthly expenses (utilities, phone, car payment, etc).

    Budget Planner 1 New in iPhone App Designs Reviewed: Critique Board and Lessons Learned

  2. Using this data, the app allows users to track their cash flow and predict the amount they’ll have in the bank on any given day.

    Budget Planner 2 New in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Most folks would find this extremely useful. So, why are people complaining about the app? Why does it have an average rating of 2.5 out of 5 stars, and why are sales lower than you had hoped?

Let’s look at the main sources of the problem. For now, we’ll set aside lesser (though important) usability factors, such as not following the iPhone UI guidelines and using the standard controls improperly. Let’s start at the beginning. Humans invented money to buy things, right? Your core audience’s main goal is to know what they can afford and when they can afford it, whether it’s a new pair of shoes, a new car or a solid retirement plan.

People don’t prepare a budget just for fun. They make the effort because they hope it will help them make better purchasing decisions (read: buy more stuff that they like), without their rent check bouncing. Your app is getting there. But several key factors are getting in the way of a great user experience. Let’s take a closer look at the app’s “landing screen,” the calendar, the main element that differentiates this app from other budget apps.

First of all, I think the calendar is a great idea. It’s much better than the categorized lists that many other apps have. The calendar is all about how much money you have or will have in future. A list only shows how much you’ve spent. Knowing that your money is gone doesn’t really help achieve a financial goal (purchasing a shiny new laptop, for example).

Here are some downsides to the calendar view:

Budget Planner 3 New Updated2 in iPhone App Designs Reviewed: Critique Board and Lessons Learned

I believe there’s a way to visualize information in the current design so that users are able to uncover “invisible” patterns. Uncovering the details and patterns behind their spending habits enables users to get new ideas, make informed decisions and achieve their financial goals (and praise your app in the process). Users will better understand their bad habits and be able to take steps to correct them.

A graph could provide richer possibilities for visualizing financial information. It’s much more flexible and scalable then a calendar. Using a graph for the landing screen could dramatically increase the density of meaningful data, while reducing visual noise. Here are some ideas we came up with; this is merely a draft we put together to illustrate our points and to get your ideas flowing—it is not a proposal for a final design:

Budget Planner 4 New Updated in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Budget Planner 5 New Updated in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Budget Planner 6 New Updated in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Next Steps

People love apps that help them achieve their goals. What if your app allowed users to input and compare different financial scenarios, shown through several overlaid graphs?

This capability could help users think through their options:

  • If I put my child through this private school, would I still be able to afford the Beemer I’ve always dreamed of?
  • How many hours of overtime would I need to work to be able to afford both?

These are few examples of questions that people ask themselves. If your app can help them get the answers, I think it’ll really catch on, and you’ll soon be driving a shiny new Beemer yourself.

3. Units United

“Unit conversion app, Units United. Yep, yet another one… ;) Can you please review it?

— Meils Dühnforth”

Units United 1 New in iPhone App Designs Reviewed: Critique Board and Lessons Learned

The biggest problem with almost every unit converter I have seen is that they require users to submit their query in a format that the computer (or iPhone in this case) can understand. Most unit converters force people to make double the effort to get what they want.

Consider the following scenario: you’re from the US, and you are recounting yesterday’s baseball game to your Icelandic friend. During their last at bat, the Phillies hit a 456-foot home run. Amazing! You punch the value into your unit converter app, but to get an answer you must translate the query into a format that the application understands:

  1. Go to “Categories,”
  2. Select meters for the “To” unit,
  3. Select feet for the “From” unit,
  4. Type in 456 on the number pad,
  5. Double-check that you are converting 456 feet into metres and not vice versa.

Are all these steps necessary? You just wanted to know “What is 456 feet in meters?” But you had to ask the question in robo-speak. You had to select options from a list to be understood. Good software speaks your language. Among the innumerable unit converters, only Google does it right, allowing you to ask your question in plain English:

Units United 2 New in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Using speech recognition technology is another good idea. Sometimes your hands aren’t free when you need to convert a unit. Say your Icelandic friend is driving on a US highway and needs to convert the 55 miles-per-hour speed limit into kilometers.

Implementing everything described above, your app might look something like this (this quick draft is meant to illustrate the point and is not a design proposal):

Units United 3 New in iPhone App Designs Reviewed: Critique Board and Lessons Learned

This application is much easier to use because there’s no more robo-talk: it doesn’t force users to browse categories and sub-categories, and it accepts questions in everyday language.

Send Your App For A Free Review!

Mobile developers are always welcome to send me their apps for a free review. Just use this form. Please remember that your content will be featured on our Crit Board, allowing developers, designers and users worldwide to join the conversation. If you prefer to speak privately about your design, please feel free to contact us directly.


© Alex Komarov for Smashing Magazine, 2010. | Permalink | Post a comment | Add to | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: app, Design, iphone, mobile, reviews

August 20 2010


HTML5 for Web Designers: Book Review

HTML5 is all the buzz right now: some people think you need to wait until it’s “complete” to use it, while others are pushing the envelope and using what the browsers are supporting right now. If you’re not following the HTML5 hype and aren’t familiar with what’s so exciting, today’s book review will give you a great source to turn to: “HTML5 for Web Designers.

What’s It About?

It should be obvious what this book is about: HTML5. However, that’s a broad, tangential topic. More specifically, HTML5 for Web Designers is supposed to be a super-condensed, easy-reading version of the HTML5 spec, with a huge scoop of practicality stirred in. I’ve included a few quotes in this review so you can get an idea of what it’s all about.

Who Wrote It?

Jeremy Keith

HTML5 for Web Designers was penned (well, probably typed) by the brilliant Jeremy Keith. If you’re not familiar with Jeremy Keith, you’ve been missing a lot on the web. He’s an Irish web developer, the technical director at Clearleft, a web development firm in Brighton, England. He’s done a lot of work with Microfomats; for more by Jeremy, you should really check out his blog, Adactio. Mr. Keith was interviewed by Dan Benjamin and Jeffrey Zeldman on the Big Web Show, talking about why the book was written, why Jeremy was chosen to write it, and a lot of other fun stuff.

Listening to that podcast, you’ll agree that Jeremy Keith was definitely the right guy to write this book. If you’ve never read anything by Jeremy Keith before, then a small piece of your web-developer self has yet to be born. Nothing in this book could be more practically explained. The website says it well:

In this brilliant and entertaining user’s guide, Jeremy Keith cuts to the chase, with crisp, clear, practical examples, and his patented twinkle and charm.

You have to love all the fun quips Mr. Keith sprinkled in, from the subtle “an array of programmers” to the more obvious “If you ever use the autoplay attribute in this way, I will hunt you down.”

What’s In The Book?

The Pages of HTML5 for Web Designers

The table of contents shows what exactly you’ll read in this book:

  1. A Brief History of Markup
  2. The Design of HTML5
  3. Rich Media
  4. Web Forms 2.0
  5. Semantics
  6. Using HTML5 Today

Chapter 1: A Brief History of Markup

You might think such a concise book wouldn’t have room for a chapter on the venerable past of HTML . . . but you couldn’t be farther from the truth. In the very first chapter, Jeremy Keith takes you back to the beginning. He clearly explains the path from HTML 2.0 (there never was a version 1) right up to HTML5, visiting famous stops such as HTML 4, XHTML 1, and XHTML 2. He gives a great explanation of why it’s not reasonable to wait for full HTML5 support before using it.

After HTML 4.01, the next revision to the language was called XHTML 1.0. The X stood for “eXtreme” and web developers were required to cross their arms in an X shape when speaking the letter. No, not really. The X stood for “eXtensible” and arm crossing was entirely optional.

Chapter 2: The Design of HTML5

Before diving into too much nitty-gritty, Keith expains some of the philosophies behind HTML5. Among other things, he explains why the new doctype makes sense (and why doctypes are really irrelevant), what’s been removed since HTML4, and how some elements have changed their identities. One of the most interesting parts of this chapter is his explanation of why there are no longer any deprecated elements, only obsolete ones. And don’t miss the section on the new JavaScript API; I won’t spoil it, but I’ll tell you this: fun, fun, fun.

With HTML5, anything goes. Uppercase, lowercase, quoted, unquoted, self-closing or not; it’s entirely up to you.

Chapter 3: Rich Media

I think we’d all agree that the new media offerings in HTML5 are some of the most exciting additions . . . and some of the most controversial. If any of that controversy is caused by a lack of understanding, this chapter will make it all clear. Jeremy very clearly explains all you’d care to know about the canvas, audio, and video tags. He’ll steer your through the murky waters of patchy support and poor accessibility and show you how to use these features successfully.

Fortunately, there’s a way to use the audio element without having to make a Sophie’s Choice between file formats. Instead of using the src attribute in the opening <audio> tag, you can specify multiple file formats using the source element instead.

Chapter 4: Web Forms 2.0

This chapter is about one of the biggest parts of HTML5: forms. Usually, forms are a rather boring topic: not so in this book. Jeremy will take you through each one of the attributes and types of input, as well as teach you how to check for a browser’s support of these new features. You’ll be enlightened to read about why HTML5 includes things like native form validation, and whether or not you should style the new UI elements (Well, you can’t, but he answer the question “Should you want to?”).

I can see why the autofocus attribute has been added to HTML5—it’s paving a cowpath—but I worry about the usability of this pattern, be it scripted or native. This feature could be helpful, but it could just as easily be infuriating. Please think long and hard before implementing this pattern.

Chapter 5: Semantics

This is probably my favourite chapter; to start out, Mr. Keith discusses the issues behind the extensibility of HTML: should you be able to create your own tags, like in XML? Are there other ways to bring meaning to elements? He goes on from there to introduce several of the new elements that HTML5 brings to the table, and shows you how to use them correctly.

Before reading this book, I was somewhat confused about the roles of the new structural elements—things like section and article. Well, colour me enlightened; Jeremy Keith’s explanation will make it all clear. If you really want to challenge yourself, read his explanation of HTML5′s outline algorithm.

Back in 2005, Google did some research to find out what kind of low-hanging fruit could be found on the cowpaths of the web.
A parser looked at over a billion web pages and tabulated the most common class names. The results were unsurprising. Class names such as “header,” “footer,” and “nav” were prevalent. These emergent semantics map nicely to some of the new structural elements introduced in HTML5.

Chapter 6: Using HTML5 Today

It’s nice to know all the theories and specs, but can we really use it? today? As you’ll see, the short answer is “yes”; the long answer is, well, you’ll have to read the book. What’s supported? What’s can you use now? What workarounds are available? It’s all in here, and you’ll be up and running in no time.

I hope that this little sashay ’round HTML5 has encouraged you to start exploring this very exciting technology. I also hope that you will bring the fruits of your exploration back to the WHATWG.

The Summary

It’s amazing how much is actually covered on these subjects in only 85 pages. You’ll learn everything from the history of HTML to how to correctly use the <b> and <i> tags (eh? yes, their back in HTML5). If you want to “try before you buy,” you can check out the first chapter at A List Apart.

Is there anything I’d change in this book? I can’t find anything to complain about; both the publishers and the author are individuals known for their amazing quality of work, and HTML5 for Web Designers is just one more testament to their skill.

Who’s the Book For?

If you’re a web developer, you’ll appreciate this book’s practical knowledge and solid explanations of why things are the way they are. If you’re primarily an experience designer, this book will give you a good grip on using HTML5 semantically and accessibly. If you’re interested in the history of HTML, that’s here. And if you just want a small but elegant book for your shelf, look no further.

In sum, if Nettuts+ is one of your regular web stops, you absolutely must buy HTML5 for Web Designers.

Or, what if you’ve already bought it . . . and read it. If that’s the case, how’s my analysis? Is there anything about the book that you would change?

HTML is the most important tool a web designer can wield. Without markup, the web wouldn’t exist. I find it remarkable and wonderful that anybody can contribute to the evolution of this most vital of technologies.

June 22 2010


Secure Yourself: Backup Solutions for Designers and Developers

Nowadays every thing is digital – whether it’s your photos, music or any other personal and business documents, everything is stored on the digital media, it’s our present and definitely it’s future!

Apart from its advantages it has several disadvantages too and we will look at pros and cons right here to provide you with solution!

Some main risks to important data are:

  • Technical Malfunction or Error
  • Catastrophic Events
  • Espionage or Sabotage

These risks can be avoided by taking regular backups. Taking backup is a main principle of data security. You have two options for backup purpose, one is remote backup and the other is online backup. Using remote backups you still got many problems and risks to your data, you have to use lock safes, strong boxes, or other security measures to make them secure.

This is the reason we prefer online backup rather than remote. By using an online backup service you can secure your data with a very little cost as compared to the cost you would have to bear for the security of remote backup.

This method is also very fast, setup and installation process is a matter of downloading a software and just install it. You can easily search the data you want to recover: you don’t have to go through a whole bunch of cabinets to find your desired backed up data.

So looking at the importance of the online backup, today we have covered top 5 services which provide backing up services at very low-cost and offer very admiring services.

1. DropBox

Quick Look:

  • File Sync
  • File Sharing
  • Online Backup
  • Web Access to all data
  • Mobile Device Access
  • 2GB Free, Paid packages starts from $9.99 / month

Dropbox is all in one tool for Online backup, File sync and File sharing and my personal choice. Unlike other applications which only sync files or put file online or tackle only backup, Dropbox is an application which provides all of these features in the single application.


Using File Sync feature of Dropbox you get 2GB of online storage for free which is to be increased to 100GB by getting pro plans. You can sync any type of file or of any size. With support of Windows, Mac and Linux applications it is the most comprehensive solution so far. Following is the chart of its cost and space provided.

After installing the Dropbox, these will be a folder in you’re “My Documents” named “My Dropbox”. Any file copied or moved in that folder will be uploaded to the servers of Dropbox and will be synchronized, and your can also access them from any computer from with Dropbox installed and from the Dropbox website using your username and password. N ow instead of using emails for sending some files you can use Dropbox which makes the process of transferring files very easy and unproblematic. If you can large number of files which you have to send to clients or coworkers then simply add them in public folder, copy the link which is publically accessible, give it to your co-workers or clients and you can have them download the files and documents. You can also make shared folders and invite other people to view the content which make Dropbox perfect for large business organizations with large number of employees.

Photo Gallery

Another great feature of Dropbox is built-in Photo Gallery. You can drag the photos in “Photos” folder and they will be available online for viewing in Photo Gallery of your Dropbox.

Dropbox also supports iPhone, iPad and Android based devices which is most important thing nowadays. You can access your Dropbox, view files and folders, download files, take photos and videos and sync them to your Dropbox, share links to files and export your files to other applications using these applications for your mobile devices. In the end we would like to say that Dropbox is 1st priority if you want to have Online backup solution because of its diversified features. Some may think it is bit expensive but we say if we account its performance and services then it is not much expensive. We use DropBox here on 1WD and we highly recommend it to you.:)

2. Mozy

Quick Look:

  • Safest Backup service
  • Unlimited space
  • 100% automatic
  • Staring from $4.95 / month

Mozy is the second backup storage solution that we are reviewing. In security Mozy gets a perfect score. It is considered as the most secure online data backup service as Mozy use 128-bit SSL encryption to ensure it is not intercepted. It also uses 448-bit Blowfish encryption to prevent someone from getting to your data on the Mozy’s servers. MozyPro also uses military-grade 256-bit AES encryption, making it the most secure service of online storage and backup solution.

Mozy uses different levels of security and privacy policies to get you data secured. Using Mozy you can get very large amount of control over what kind of backups should be taken and when. You can set up these setting once and then the rest is duty of Mozy. You can set automatic backups and choose to upload your important files on daily or weekly basis. You can also manage the memory usage of the Mozy which will help you to avoid your computer being slowed down. You can download your file and documents from any computer without installing the application on that specific computer. After the initial backup, Mozy only backs up new or changed portions of files, saving bandwidth and ensuring future backups are super fast. It automatically recommends important files to back up, you can select or deselect from them. You can also create a schedule as to when you want your backups to be performed.


It provides two plans, one is MozyHome and other is MozyPro. Following are the pricing of both the MozyHome and MozyPro.

MozyHome Price

MozyPro Price

Mozy supports Windows and Mac but it do not supports any mobile devices like iPhone or Android, while other services have specially designed applications for this purpose. We think it is computer backup services that’s y they didn’t added this feature but in coming 2 or 3 years this feature will be compulsory and to remain in the market, Mozy should focus on that loophole. Mozy is best choice for people who want extreme security of their data in a low price. This was designed as backup services but now it is 1 of the best online storage of your files with very co-operative help and support department. It has very easy to use interface. In short, Mozy is a best service for backup solution.

3. Carbonite

Quick Look

  • Unlimited Backup Capacity
  • Completely Automatic
  • Secure and Encrypted
  • Easy File Recovery

Carbonite is very easy to use and installs quickly. After installation you can choose automatic process for storing only your desired files. Selecting a file for backup is extremely easy, you just right-click a file then select Carbonite and it will automatically store to the service for you.

Carbonite backup service encrypts your data twice on your computer and then stores them encrypted on their secured data servers, making them virtually impossible to be misused. Carbonite offers unlimited storage space, automatic scheduled backups, remote access to your files and much more. You can restore your stored files from anywhere and from any computers. You can configure automatic backups to perform backups on daily basis; other options are also available like hourly basis backup.

It provides double encryption and redundant storage all files are sent via SSL connection and the Carbonite team members cannot see your files making your data extremely secure.


  • Five-Year Subscription for $199.95
  • Three-Year Subscription for $129.95
  • Two-Year Subscription for $99.95
  • One-Year Subscription for $54.95

Carbonite is a very good backup option for those who need remote access to their files and unlimited storage in a very reasonable price which is less than $5 per month (yearly subscription). It is also good for lazy people who forget to back up their data manually: totally automatic.

4. SugarSync

Quick look

  • Remote access
  • Supports Mac and Windows
  • Customer Phone Support
  • Sync as many computers as you want
  • 30 Days Free Trail. Pro Packages starting from $4.99 / Month

SugarSync is a great way to store, share, and mobilize your files and data. It really is a comprehensive solution for online storage, online file sharing/collaboration, and multiple computer syncing.

SugarSync offers features of backup, sync, sharing files and remote access to your data from anywhere where internet is available. Apart from these, it offers very interesting advance features. It is very simple but powerful tool. You just have to select files to sync then you can take rest: now its responsibility of SugarSync to do what you have suggested it to do. You can share your files with family, friends and co-workers. SugarSync runs in background and is fully automatic.


SugarSync offer its services as low as $4.99/month. It has the following Complete Tariff Plan.

SugarSync offers very flexible sharing, it mobilize your files and data. You can access your data not only from your computer but from anywhere in the world using internet and your cell phones. You can send a secure link of your files to friend or co-worker: no need to attach documents in email or other portable media. It saves five previous versions of file so you can easily revert them if needed.

5. IDrive

Quick Look

  • Keeps deleted files for 30 days for free
  • 128-bit SSL encryption
  • Works behind firewalls
  • Saves up to 30 versions of file
  • 2GB Free, Pro Plans Starting from $4.95/month

IDrive offers everything you will want to see in an online backup service. Using IDrive you can manage your multiple accounts through a single account. You can set it to work through a connection via proxy connection also. When you install IDrive for the first time, a default selection of most commonly backed up data including Documents, Pictures and Videos is created with a random after hours schedule. You can customize the selection and schedule afterwards. It automatically recognizes the modified parts of files or folders and backs then up after every 10 minutes. IDrive performs reliable backups of pen/locked files like Outlook files, QuickBooks, MS-Excel and others. You can drag-n-drop files for restore from your online drive to the local system.


IDrive provide 2GB for free and in case you need more storage space then you can upgrade to Pro version. The tariff of IDrive Pro is as follows

IDrive retains and allows you to restore the last 30 versions of a file and the old version are stored of free means it will not cost you your purchased web space. You can login via any browser to your account to access the data, restore data and view log reports. IDrive uses enhanced security with 128-bit SSL encryption on transfers, 256-bit AES encryption on storage with a user defined key. That key is not stored anywhere on IDrive servers. It transfers only modified files which can be very handy if you don’t have unlimited bandwidth connection.

That is all for this review. You feedback, comments, suggestions are always welcome and it is a way for us to know what are our weak points and loopholes.

Which application do you use for backing up your data?

March 25 2010


Choosing Right E-Commerce Software For Your Online Store

There are numerous options available when it comes to choosing right e-commerce software for creating your online shop. From free shopping cart solutions to those who charge you a bill of thousands dollars for keeping your shop online, there are actually hundred of shopping solutions available out there. In this article we will dig deep in to the world of some most famous e-commerce solutions. Let’s get started.

Cheap SSL CertificatesE-commerce week is sponsored by SSLmatic which sells SSL certificates for much cheaper prices (RapidSSL, Geotrust, Verisign) and offers great support. Check their site to get the cheap SSL certificates.

We can divide the whole section in three parts. First we will cover free and open source options and then we will cover pre hosted and paid options. We will also take a look on e-commerce modules available for extending your CMS to e-commerce website.

Open Source & Free E-Commerce Softwares

1. osCommerce

osCommerce is an award winning e-commerce shopping cart solution which has more than 200000 community members. osCommerce is released under GPL which means its open source and any one can modify its code adhering to the license under which it is released. You can download it for free and can create your shop online without paying a single penny to the developers of osCommerce.


The last update (3.0 Alpha 5) in osCommerce was in March 2009 so there are rumors that the project is dead. There are 5600 different modules available on their official repository which shows that community of osCommerce is really supportive.

2. Magento

Magento is the second big guy in the world of e-commerce solutions. Like osCommerce, Magento is also released under GPL and you can download it for free. With a very active development schedule, it got the latest update (1.4.1) on 19 February 2010. There is a big list of features which you can read there. But the biggest problem with Magento is that it’s heavy software and needs a huge amount of resources to work efficiently.


This is my personal choice and I use it for my client works. The community of Magento is still growing as it is new in the game. Recently the official extensions repository crossed the number of 2000 extensions. Varien, the company behind Magento also offers an enterprise version of Magento starting from only 8999$$$/year. The have previously worked with osCommerce and now they have developed their own solution.

3. Zen Cart

Zen Cart is a forked version of osCommerce, licensed under GPL and free for every one. The major difference between osCommerce and Zen Cart is the templating engine and some additional features which are not available in its superior. Templating engine of Zen cart makes it very easy to create custom themes for your online shop as compared to Magento and osCommerce. There are more than 1000 free addons available in their plugin repository.


4. PrestaShop

PrestaShop is also open source and free solution for creating your online store. It has a big community with more than 50000 community members. The best thing in PrestaShop is its light weight and fast speed. If you compare PrestaShop with Magento in terms of speed and size, it’s a lot better. One thing for sure, you will love its back end design. It’s really awesome, simple and easy to use. Even a beginner can set up an online store. We published a beginner’s guide for prestashop. You can check it out here.


Pre hosted and Paid Solutions

5. Shopify

Shopify is a pre hosted e-commerce solution which charges you for keeping your store online. You don’t need to set up anything technical. All you have to do is just adding your products. SSL, payment gateways and all the security measures are the responsibility of Shopify Team. You can setup your custom domain and they also give you the ability to create themes.


Each shop owner can change the html/css of his store to customize the look of his store. All you have to do is just to pay their bills/month which depends upon your sales and the package plan you take. If you are totally scratch and want to make things easier for yourself then I will suggest you to go for it.

6. FoxyCart

FoxyCart is also a pre hosted version of e-commerce solutions but it’s a bit different from Shopify. Actually Foxy Cart is only a shopping cart (not a cms) which integrates in to your already existing website. You can customize the look of your shopping cart by changing the html and css of your shopping cart. Just take the code, put it into your website and you are done. At the end, you will have to pay them a monthly fee for all their efforts.


E-Commerce Modules for your CMS

7. Ubercart for Drupal

Ubercart is an e-commerce module for people who want to create an e-commerce store on the top of Drupal. It’s a fact that Ubercart is an almost complete solution for anyone who wants to create an e-commerce store but I will not recommend it those people who don’t have experience with Drupal.


8. WP e-Commerce for WordPress

WP e-Commerce is the most trusted and complete solution for people who want to include e-commerce functionality in their WordPress blog or website. We have already covered it out. You can check the detailed explanation here.

9. Virtue Mart for Joomla

Virtue Mart is an addon for creating online store using Joomla. There are 2 other plugins out there for same functionality but Virtue Mart is the oldest one and most comprehensive solution for creating e-commerce websites with Joomla. My personal opinion about Joomla is not good as I think a newbie will get puzzled with dozens of premium modules which have same functionally.


E-Commerce is an enormous subject to cover and each option has its own pros and cons. I have tried my best to write those options which are trusted ones and mostly people are happy with those options. There is always chance for improvement. Let me know if I have missed your favorite option and I will be happy to discuss it with you.:)

Cheap SSL CertificatesE-commerce week is sponsored by SSLmatic which sells SSL certificates for much cheaper prices (RapidSSL, Geotrust, Verisign) and offers great support. Besides standard SSL certificates, wildcard and EV certificates are offered with discounts too. Check their site to get the cheap SSL certificates.

February 05 2010


A Smashing Review of the Smashing Book

When Smashing Magazine first announced the release of their book, I have to confess that I was slightly sceptical. I enjoy their blog regularly, but didn’t really see how the concept would carry across to a book – or what topics it would cover.

I’ve spent a few hours reading through my review copy over the past week, and have been pleasantly surprised. Sven and Vitaly have managed to bring several talented writers on board to help put together a thoroughly interesting read.

This review will walk you through the book’s contents, and outline a few of the chapters I particularly enjoyed!

An Overview of the Book

The Smashing Book is aimed primarily at designers and people who run and manage websites. Although a few chapters touch upon development and server-side scripting, the book predominantly deals with design, typography, CSS, and the business of running websites.

If you’re reading this review, then you’re likely to have an interest in one or more of those topics. Broadly speaking, the first half of the book deals with the essentials of design, and the second half takes on a more business-related focus.

The layout and design is good throughout, with a readable font and plenty of visual examples. It’s easy to read, and put together in an understandable way.

Here’s a preview of what the pages and layout look like:

Chapter by Chapter

As you’d expect, the book has multiple chapters focusing on different aspects of design. We’ll briefly go through each, and explain what you can expect:

User Interface Design in Modern Web Applications

Written by Dmitry Fadeyev, this chapter starts with the basics of what makes a great user interface – essential knowledge for anyone designing for the web. It not only focuses on the way colour, gradients, borders and layout affect interface design – also covering how to write effective interface copy.

The chapter is broken down in an easy-to-read manner, and flows very well. The content is fairly basic, but acts as a good foundation for new designs and a welcome reminder for those of you who have been in the field for several years.

The Art and Science of CSS-Layouts

Any good designer should have a solid grasp of CSS, and how to use it for building and structuring websites. Written by Jacob Gube and Kayla Knight, it covers fixed width/fluid layouts, grids, elastic layouts, coupled with a number of actual code examples.

The information is all excellent, though the CSS code is presented in a fairly basic way (without any colouring or code highlighting). It concludes with a short discussion surrounding how to choose the correct layout for your particular site.

Typography: Rules, Guidelines and Common Mistakes

Typography is a vital aspect of your site to get right, and also one of the most difficult. This chapter is written by Alessandro Cattaneo, Jon Tan, and Yves Peters – all experts in the field.

All the basic aspects of typography are explained, followed by a handful of definitions of certain terms (I found this particularly useful!). Vertical spacing, grids, and hierarchy are covered, along with a few examples of how these different effects are achieved with CSS.

This chapter manages to strike a good balance between theory and practical examples – something that can be difficult to do. I’m looking forward to putting some of what I learnt here into practice.

Usability Principles for Modern Websites

Put together by Andrew Maier and David Leggett, this chapter takes you through the principles of creating a usable website. This includes thinking from your user’s perspective, maintaining a consistent visual design, and several other excellent tips.

There’s a great set of “usability checkpoints” that make a good list for working through before launching a new site or project. This type of practical advice makes the information presented very usable, and there’s a lot to take away and think about.

The Ultimate Guide to Fantastic Colour Usage

Written by Darius Monsef, the man behind COLOURLovers, this section starts out with a great deal of theory about colour, and how to successfully match and blend colours together.

The examples shown here are great, thought I would have liked a few more practical links and exercises to follow up.

Optimization for Websites

This chapter is authored by Rene Schmidt, and focuses on how to optimise your website for the best possible user experience. Some of the tips are more obvious (such as giving your images dimensions), but there are a bunch of thoroughly useful suggestions I hadn’t considered before. It was interesting to read the reasoning behind some of the techniques I already use.

The chapter goes on to discuss server optimisation – something designers are often a little intimidated by. Everything is presented in an easy-to-read way, with the exception of the slightly basic code layout (as mentioned previously).

Design to Sell – Increasing Conversion Rates

Whether you run your own online business, or regularly design for other people’s, understanding how to “convert” is vital. This might be creating a sale, or simply encouraging a user to follow a particular call-to-action.

Dmitry Fadeyev again has some useful tips to share here, starting by delving into the psychology behind capturing a user’s desire. The chapter then goes on to offer practical suggestions, such as letting a user try the product, offering video demos, and making choices clear.

How to Turn a Site Into a Remarkable Brand

Chris Spooner has done a great job covering the essentials of branding, centred around design, content, community, innovation, and “getting inside the user’s head”.

Branding is something that’s difficult to get right, and starts at a very early stage of your website or business – once established it’s hard to adjust. This is valuable reading, but to create a really successful brand, you also need a unique concept and a healthy dose of hard work!

Learning From Experts: Interviews and Insight

In this chapter, Steven Snell collates the insight and opinion of various high-profile designers. There’s no shortage of contributors, including Jason Santa Maria, Collis Ta’eed, Jon Hicks, and Andy Budd.

Questions posed are very insightful, centred around the following areas:

  • Design and Development
  • The Design Process
  • Self Improvement and Skill Development
  • Business and Freelancing

I really enjoyed this chapter. Learning from experts in your field is a hugely valuable experience, and there are some really great insights made here. It’s rare to find this quality of interview online.

Behind the Curtains: The Smashing Magazine Story

Learning about the development and ongoing running of a website always fascinates me, so this chapter is particularly recommended. It covers how Smashing Magazine has evolved from a tiny blog into the success it is today, and the steps taken to get there.

It’s rare to read such an interesting “behind the scenes” story, and there’s much to be learned from the passion and dedication put into this site in particular.


Because my main passion is the process of creating and running websites, I particularly enjoyed the areas of the book focusing on branding, monetization, and “learning from the experts”. These chapters were full of useful tips and ideas.

One slight criticism centres around the editing and proofreading of the book. You’ll encounter a few errors here and there (including “Moderrn” on the contents page!). Obviously this is picky, and the content and substance of the book isn’t affected. A great deal of work has clearly gone into ensuring that the ideas and advice in the book are A-grade material.

If you’re a web designer, or fancy the idea of running a website, this is a great book to read. It isn’t pretentious in any way and, although it won’t teach you how to make a website, intermediate and advanced designers will have plenty to contemplate after reading it.

Where to Buy the Book

If you’d like to pick up a copy, it costs $29.90 and is available directly from Smashing Magazine. The printing quality is brilliant, and it comes packaged in a funky “Smashing” branded box.

If you’ve already read the book, feel free to share your thoughts in the comments. I’d love to know how you found it!

Tags: Reviews

December 01 2009


Digging into WordPress Review, and Free Copies!

A couple weeks ago, I received an email from Chris Coyier, of CSS-Tricks, containing a review copy of his recently released “Digging into WordPress” e-book. Expecting it to be more of a mini-book, I nonchalantly told him that I’d post a review that Friday; little did I know that this was a full-fledged book, packed full of knowledge.

“Written by WordPress veterans Chris Coyier and Jeff Starr, Digging into WordPress is 400+ jam-packed pages of everything you need to get the most out of WordPress. WordPress is great right out of the box, but unless you want an ordinary vanilla blog, it is essential to understand the full potential of WordPress and have the right tools to get the job done.”

Those of you who read CSS-Tricks will be well aware that Chris writes in a very easy-to-understand fashion. Rather than flooding each article with high-level jargon that only the most knowledgeable of us can understand, he instead dumbs each article down to the fundamentals – even to the point of being honest enough to convey when he doesn’t quite understand the reasoning behind some line of code.

As a result, he’s built a wonderful community, and has built a great reputation for himself in the last few years. This book, co-written with Jeff Star, is no different: straight-forward, easy-to-understand, and simple.

Simple Learning

Thanks to the use of fun, and helpful illustrations, even those who are brand new to WordPress will be able to dig their heals in — with minimal confusion.

The 400 page ebook covers everything from navigating the admin panel, to creating a comments form, to even more advanced topics like plugin development. And though it’s generally good practice to point out a few negatives in one’s review, it’s difficult to do so when a book is such a pleasure to read.

Heart of a Teacher

Chris and Jeff, in this book, have proven that they have the hearts of teachers. Even for intermediate to advanced WordPressers, there’s something to be learned — and at $27, the purchase is a no-brainer!

“Digging into WordPress is perfect for WordPress users in the beginner to intermediate range, but contains plenty of great information for the advanced user as well. If you have any level of experience working with web design or WordPress, this book is written to help you take WordPress to the next level.”

400 Pages of Practical Information

“There is much to learn about the World’s most popular publishing platform.
From your first steps of learning about WordPress all the way through
maintaining a site throughout the years, this book is packed with truly
practical information.”

Lots of Code Samples

“We go into depth about the anatomy of a WordPress theme. How they work, and how
to write the code you need to do the things you want. This means real code that
you can sink your teeth into, as well as copy and paste. Beyond theme
building, we introduce many tricks your functions.php file can pull off and show
you ways to increase performance and security through HTAccess.”

What About the Free Copies!?

Digging into WordPress Review, and Free Copies!

Chris has generously offered to give away a few copies to our community. To enter, simply leave a comment, and be sure to check back on Friday to see if you were randomly chosen!

November 14 2009


Review of jQuery Enlightenment – and Free Copies!

jQuery Enlightenment, by Cody Lindley, is a breath of fresh air when it comes to e-books. It’s written by a jQuery team member, each code snippet includes a link to JSBin for live previewing, and – most importantly – there’s no fluff. Ultimately, this means that you’ll learn faster, and more thoroughly.

jQuery Enlightenment

To prove how much I enjoyed reading this book: I received my review copy on a Wednesday, and finished it the next day. As I’m sure many of you are aware, tech books and front to back reads very rarely go well together. This is a testament to the “no fluff” aspect I referenced earlier. Over the course of a dozen chapters, Cody will teach you everything you need to know.

At a Glance

  • Chapter 1 – Core jQuery
  • Chapter 2 – Selecting
  • Chapter 3 – Traversing
  • Chapter 4 – Manipulation
  • Chapter 5 – HTML Forms
  • Chapter 6 – Events
  • Chapter 7 – jQuery and the web browser
  • Chapter 8 – Plugins
  • Chapter 9 – Performance best practices
  • Chapter 10 – Effects
  • Chapter 11- AJAX
  • Chaper 12 – Miscellaneous concepts

Who this Book is for?

While most books on jQuery are primarily focused on introducing the library to new users, jQuery Enlightenment instead assumes you’re at an intermediate level hoping to learn the more advanced tips and techniques. As such, I especially enjoyed the read more than I would have if it was just another crash course style book. Assuming that you’re a regular Nettuts+ reader, it’s more than probable that you have at least a basic understand of jQuery. If so, it’s time to take your skills to the next level; jQuery Enlightenment will take you there.

Though perhaps the most convincing reason to check out Cody’s new book is because he’s an official member of the jQuery team.

JSBin Snippets

Throughout the book, Cody supplies every single code snippet with a respective live preview from JSBin. This may not sound like much; however, it’s incredibly helpful when you can simply click on a link, and immediately be transported to a page which allows you to “toy” with the code. I can’t tell you how vital this is – and, frankly, it’s shocking that more web development e-books haven’t taken advantage of this yet.

About the Author

Cody Lindley is a Christian, husband, son, father, brother, outdoor enthusiast, and client-side engineer. Since 1997 he has been passionate about HTML, CSS, JavaScript, Flash, Interaction Design, Interface Design, and HCI. He is most well known in the jQuery community for the creation of Thickbox, a modal/dialog solution. In 2008 he officially joined the jQuery team as an evangelist. His current focus has been on client-side optimization techniques as well as speaking and writing about jQuery. As of late he is employeed by

Free Copies!

Cody has been generous enough to offer a handful of copies to our readers! To enter, simply leave a comment, and check back on Monday (Tuesday for some of you) to see if you’re a winner! Otherwise, if you’d like to purchase the ebook and immediately read it, you can buy it here.

November 06 2009


Book Review: Zend Framework 1.8 Web Application Development

If you are looking into buying a book to learn about Zend Framework, chances are you are already set on using Zend Framework to build your next project. Today, we will be looking at Zend Framework 1.8 Web Application Development by Keith Pope, published by Packt Publishing.

First of all, you’ll notice that this book is based on Zend Framework version 1.8, and as of writing this review, the latest stable release of Zend Framework is 1.9.4. This is not an issue, because 1.9, even though it brings new features such as PHP 5.3 compatibility and RESTful web services, does not change its structure or any part of the system that might have impact on your learning.

Flow of the Book

The flow of this book is heavily inspired by the famous Ruby on Rails book, Agile Web Development with Rails, where the author invites you to join the process of building a demo application, which in both cases is a shopping cart system. Judging by the feedback of the Rails book, most people feel quite comfortable learning a framework this way, some don’t. I guess if you are not a fan of following a defined learning structure, this book probably isn’t for you.

Short but Sweet

It is a relatively short book, with only around 350 pages. As a result, this book expects you to be comfortable with working with PHP 5 and have a solid grasp of Object-Oriented Programming. If you aren’t already familiar with PHP, or PHP 5’s OOP features, I highly recommend you to polish up the said skills.

MVC Still Rules

The first two chapters of the book focus on the MVC (Model-View-Controller) pattern. As the author mentions at the start of the book, Zend Framework is a loosely coupled framework; it does not enforce the MVC principle. However, given the popularity of MVC within the web development community, it is definitely worth while to learn how to write an application in MVC. Chapter one explains the basics of MVC whilst chapter two explains the request/route/dispatcher/response family. These two chapters will set up the foundation nicely for you and get you to understand the basic structure of a Zend Framework powered MVC application.

Adventure of the Store-Front App

Chapter three to nine contain the actual ‘adventure’ where you as the reader will be riding along with the author on the journey of creating a store-front/shopping-cart application. During the process, the author tells you not only what to do, but also why to do them. A good example is the ‘fat controller skinny model’ vs ’skinny controller vs fat model’ comparison, the book illustrates each and tells you why you should stick with the latter.

Chapter ten wraps up the store-front application with some more common tasks such as bootstrapping modules and sharing common application elements.

Code Optimization, Caching and Testing

Chapter eleven touches on a very practical topic: code optimization and caching. This is especially beneficial if you’re to run a large volume web application or if you have limited hardware resources. Pay special attention to the Zend_Cache section as the author tells you how to integrate it effectively in your application in order to achieve the best result.

The last chapter, chapter twelve, introduces you to Zend_Test, a testing framework that utilizes PHPUnit.


To wrap the review up, I think this is an excellent book on Zend Framework provided you:

  • already have a good understanding of PHP;
  • already have a good understanding of OOP;
  • can follow the rather forceful learning flow;
  • know how to learn with initiative (e.g. do your own research!).

This book sits well in the market, as it aims primarily at web professionals who most likely are already experienced with PHP and perhaps some other PHP frameworks, and don’t have time to read books with 1000’s of pages.

You may purchase this book via Packt Publishing’s website.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!