Branko Ajzele, our project manager and senior developer is scheduled to speak at Magento Developers Paradise conference in Mallorca (October 10-12). Clone Yourself: How to Effectively Share Magento Knowledge with New Developers will be the title of the session where he will share the tips and tricks on the best ways of training new developers and preparing them for the adventure that is Magento.

Branko is the most experienced Magento developer on our team (the first one to join Tomislav after he founded Inchoo two years ago) and he has been involved in training and mentoring activities with most of the current team members. With Magento learning curve being somewhat steeper than with other platforms, he’s had his share of very interesting experiences while spreading his Magento skills and knowledge throughout the company.

When we were approached by Kara Heinrichs, GM for Education, training and certification at Magento, with the invitation to have a speaker at Magento Developers Paradise, Branko was the obvious choice. The fact the conference is taking place in Mallorca only helped him make the decision.

Magento Developers Paradise is an international conference for Magento developers that will be packed with keynotes, sessions, sneak peeks into the future development of the platform and, of course, fun in the sun.

Keynote speakers will include Yoav Kutner, CTO of Magento and John Lunn, Head Wizard of PayPal X. You can find out more about the confirmed speakers here.

Tomislav Bilic, our CEO, will also participate in the conference, so if you’re keen on finally meeting some Inchooers in person (and in Mallorca, for that matter), check out the conference schedule (still in the works) and register – we hope to see you there!

If there is one (non-superpower) skill I wish I could acquire without having to spend thousands of hours practicing, it’s illustration. I took a bunch of drawing in college but I was never that great and I’ve let myself go out of practice. I look at a lot of illustrators work today and it makes me jealous! Illustration can really kick up the awesomeness level of any project.

I also find that Illustrators tend to take good care of their websites. Perhaps it is because the web is just another canvas, and just as they wouldn’t allow ugly, out-of-place marks on their illustrations they don’t allow ugly out-of-place elements on their websites.

Here are just a few illustrators that I like, that I include here just because I follow them on Twitter and interact with them a bit.

Apparently the Niener family is made up of some seriously talented people. I’ve known Doug for a while and he consistently blows my mind with his coding and design skills. John does the same with his illustration. Interestingly, John doesn’t seem to have one particular style. The only common thread I see is unbelievably good. John will be heading up Pixel Graphic Design Studio refocused on print and illustration work. He is @johnneiner on Twitter, johnneiner on Dribbble, and has an eBook on vector graphics.

Good timing with this post, as Joe just redesigned his website and it’s kick ass. You get a great sense of his style, his humor, and plenty of examples of his work. Definitely spend some time there if you haven’t seen it yet. I knew I liked Joe after I read this part of an interview: What, or who are your influences for your illustration style? “The band logos 15 year olds draw on their Biology notebook covers.” Joe is on Twitter @hugsformonsters.

Luc’s style reminds me a bit of the style of Samurai Jack which is definitely one of my favorite cartoons of all time. His illustrations are typically people-based and are playful, energetic and just plain fun to look at. Luc has a portfolio site, is @luclatulippe on Twitter, and Tumbles (is that what we are calling it?)

Jonathan says “I enjoy the puzzles of design and creating cool and engaging solutions to visual problems.” I think that comes across strongly in his work, especially in the covers and posters which are always well put together, thought out concepts. Jonathan is @jtwilcox on Twitter, tumbles, and has a portfolio site.

I love how prolific Ricardo is. You can see his work on his Behind the Websites site as well Smashing Magazine. I first heard of him as he did the custom illustratons for the Front End Design Conference last year, as he did this year. His style is full of simple satire. Some of it works better than others, but hey, that’s life right? There is no mistaking a Ricardo illustration with anybody else and there is something to be said about owning a style like that.

Marc work is just as much about the writing as it is about the drawing. Think of what a drawing with the text “Three hairy legs belonging to aristocrats” looks like and you will probably be right. I think there is an addicting quality to his drawings where I just want to see more and more and more of them. That quality makes the book super great, amusingly named “Serious Drawings.” Marc has a personal site, is @marcjohns on Twitter (sweet background), and keeps a log of his drawings on Flickr. I really like how Marc stopped selling prints of work because he thinks people should own original artwork.

If you have some favorite illustrators of your own, please link them up!

Let’s say you were writing some text-only documentation describing how to do something on a website. The idea was that you came to a point where someone was presented with a list of users and their job was to select one, then there was a button below that they needed to interact with in order to get the job done. You decided “Select a user” was clear enough because of good user interface. But what is the best way to word [clicking] that button. Here are some options:

• Select a user and then click the Update button.
• Select a user and then press the Update button.
• Select a user and then choose the Update button
• Select a user and then click Update.
• Select a user and then press Update.
• Select a user and then choose Update.
• Select a user and Update.

In my opinion, “click” is a ubiquitous enough term that most people would understand, but technically, keyboard navigation also works fine and doesn’t use “clicking.” The word “press” or “choose” might solve that, but also feel slightly strange to me.

The design is also an important consideration. We’ve already said this is a “button”. People know what buttons look like, so does it help to indicate that with text, or is simply the text inside the button good enough? Since our text is “Update”, which is an action verb already, do we even need to use click/press/choose? Perhaps just “Update” is good enough…which is also the shortest option.

The poll doesn’t include include this, but it is a worthy talking point, what about emphasis (e.g. bold/italic)? If you were going to emphasize a word (or words) in the choice that you pick, which would they be?

Thanks to Brent Traut for the idea.

• 20+ (14%)
• 10-20 (12%)
• 5-10 (24%)
• 2-4 (31%)
• 1 (13%)
• 0 (6%)

I’m probably in the 2-4 camp myself, which is the winning choice. I don’t freelance, but I do do sites for family and friends once in a while. Even when I was at Chatman Design the vast majority of work we did was on sites that already were launched. This data would be more interesting if it was cross referenced with what kind of job you have. I would theorize that freelancers launch a ton of sites where web workers that work for specific organizations launch far fewer.

Here is the fun part about this poll:

How do you feel about your number? (Does it feel like too many or too few?)

What would happen if you worked on half as many websites per year?

What would happen if you worked on twice as many websites per year?

Did you just read those questions and scoff, like that would be impossible? Why?

While I was checking today some Linkedin profiles, I noticed the fact that some people abandoned Varien. For those of you who don’t know, this is a company that created Magento. I’ll be honest and say that I had a moment of fear since our business is closely tied to Magento success. My worries went away the same second when I clicked on varien.com link. The step is logical.

Since I’m working with key accounts recently, I was using part of sentence “Varien, company behind Magento” quite often. The fact that Magento is open source and yet, there is a company who developed it, was confusing for some people. Especially for those who came from the osCommerce world.

Uniting the name will definitely bring more clarity to the story and corporate branding will be smoother and effective for Magento Inc. Good luck guys, to you and your 115+ employees.

In more podcast news, I got to be on Boagworld as well! I was interviewed by Paul Boag himself in the final interview ever on Boagworld. Bittersweet, isn’t it? We talk about CSS-Tricks, CSS3, Flash, and you know, just some general back and forth about stuff.

I got to be on the WordPress Podcast with Joost de Valk yesterday. It’s already out and you go to the blog post (with player and show notes), or snag it from iTunes.

We had fun talking about Digging into WordPress, WordPress 3.0, CSS-Tricks, and more. My voice is a little booming and heavy on bass (my bad) but I just turned the bass way down to listen to this track and it sounds fine.

I am not a big proponent of ad blockers. Besides than the fact that this site has ads on it, I generally just don’t mind it. I am a big proponent of you doing whatever you want to on your computer to control what is displayed to you on your screen. If you want to use user stylesheets, ad blockers, flash blockers, or whatever else, more power to you. Here are some CSS projects intended for blockin’ stuff.

Floppy Moose userContent.css

This is some pretty old stuff here, but hey, CSS doesn’t move that fast. The idea is that some browsers allow you to add additional default CSS to all pages (Firefox and Safari). This is some CSS that will block a bunch of links, iframes, and miscellaneous elements based mostly on their src or href attribute, and some on class/ID.

To use it in Firefox, you put it in a special place:

To use it in Safari, it’s a preference:

Opera supports UserCSS as well, there are instructions here.

The best I could find for Google Chrome was the Advanced Page Injector extension, which should do the trick for applying your own CSS (or JS) or all viewed pages.

View CSS

Gozer.org Ad Blocking CSS

This is similar in spirit to the Floppy Moose CSS, but looks as if it’s been updated more recently and is far more ambitious with the domains it covers and types of elements it looks for. Usage would be the same as above.

View CSS

Steven Frank’s shutup.css

The idea here is to block the comment section on blogs. Sites like YouTube and Digg are notorious for having soul-crushingly bad comments, so perhaps for the thin-skinned amongst us, you’ll have an easier time getting through the day if you just don’t see them. The CSS has some specific ID’s/classnames it hides for specific sites, but also some very generic ones like #comments and .comments, which would block the comments area on most WordPress sites.

Installation again would be just like the screenshots above.

View CSS

Using Multiple

You’ll need to copy these CSS files locally to use them. That’s good anyway, as it means you can tweak things to your own preferences. It also means you could just copy one into the other to use both at the same time.

Flash Blocking

If it’s specifically flash that you want to prevent from seeing (or at least loading) there are browser extensions/add-ons you can use for that:

• Firefox: Flashblock
• Safari: ClickToFlash
• Opera 10: Enter opera:config#UserPrefs|EnableOnDemandPlugin
• IE 8: Tools > Manage add-ons > Flash player add-on > More information > Remove all sites (then when visiting a site with flash, you’ll get a notification where you can opt-in on a per-site basis)

If you have any other ideas or favorite techniques for using the userContent.css idea, let’s have um!

I ran into the feature table design from Shopify over on Pattern Tap and I was like DAMN SHOPIFY, that is one sexy table. I was inspired to try and replicate it. First in Photoshop, then in HTML/CSS. Recreating cool stuff you find on the web is definitely an excise I recommend (a few days after, I read this – couldn’t agree more). As these exercises typically do, it lead me down some interesting paths.

Here’s my knockoff:

View Demo   Download Files

The Markup

Here is the abreiveated HTML:

<table id="feature-table">
  <colgroup class="basic"></colgroup>
  <colgroup class="plus"></colgroup>
  <colgroup class="premium" id="featured"></colgroup>
  <colgroup class="pro"></colgroup>
	<thead>
		<tr>
			<th id="header-basic"><span>$15 Basic</span> <a class="button" href="#">Sign Up</a></th>
			<th id="header-plus"><span>$35 Plus</span><a class="button" href="#">Sign Up</a></th>
			<th id="header-premium"><span>$99 Premium</span><a class="button" href="#">Sign Up</a></th>
			<th id="header-pro"><span>$150 Pro</span><a class="button" href="#">Sign Up</a></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>50 pages</td>
			<td>75 pages</td>
			<td>Unlimited</td>
			<td>Unlimited</td>
		</tr>
    <!-- More rows here -->
	</tbody>
</table>

Pretty clean. The only thing that isn’t perfectly clean is the <span> in the header. There is all that fancy gradient fancy font stuff going on. Theoretically, it could be done with a boatload of CSS3, but you know, sometimes an image is just fine dang nabbit, especially when it’s perfectly accessible CSS image replacement.

Of note is the <colgroup> element which I feel is underutilized. Colgroups allow you to target an entire column of table cells and apply styling, even though those table cells aren’t actually descendants of the <colgroup>. Kind of a weird concept, but it works, and it’s easier than applying a class name to every single table cell signifying what column it’s in.

If you need some quick markup, I have some you can copy and paste on HTML-Ipsum.

The CSS

Each header cell (<th>) has an ID. We’ll set a static height on those and set background images for them. Vertically aligning to the bottom with a bit of bottom padding allows us to place the link button evenly. The span in those headers is kicked off the page via absolute positioning (i.e. accessible hiding).

#feature-table th { height: 120px; padding-bottom: 14px; vertical-align: bottom; }
#header-basic { background: url(../images/header-15.png) no-repeat; }
#header-plus { background: url(../images/header-35.png) no-repeat; }
#header-premium { background: url(../images/header-99.png) no-repeat; }
#header-pro { background: url(../images/header-150.png) no-repeat; }
#feature-table th span { position: absolute; top: -9999px; left: -9999px; }

Speaking of those buttons. I just used the CSS Button Maker to quickly design a button I thought looked nice and fit with the color scheme, and copy and pasted the CSS into this demo.

To color the cells, I set a fallback hex code color and then an HSLa color value. These class names are targeting the colgroup elements.

.basic   { background-color: #d5e4bc; background-color: hsla(85,  30%, 80%, 1); }
.plus    { background-color: #c1dcb7; background-color: hsla(110, 30%, 80%, 1); }
.premium { background-color: #bad6c8; background-color: hsla(150, 30%, 80%, 1); }
.pro     { background-color: #bbd3dc; background-color: hsla(190, 30%, 80%, 1); }

The final product is zebra striped and has that “featured column” thing going on. but we can approach that with JavaScript…

The JavaScript

jQuery, obviously. We can apply the “odd” class to odd table rows, as well as a “final-row” class with jQuery super easily:

$("tr:odd").addClass("odd");  // Zebra action
$("tr:last").addClass("final-row");  // For extra padding

The final row has extra padding

To handle the “featured” column, and keep things semantic, we just apply an ID to the colgroup:

<colgroup class="premium" id="featured"></colgroup>

Now the JavaScript needs to figure out which number column that is.

// Figure out which column # is featured.
var featuredCol;
$("colgroup").each(function(i) {
    if (this.id == "featured") featuredCol = i+1;
});

Now we’re going to loop through all the table cells and figure out if the cell is in the column right before the featured column (if it is, apply a “leftOfFeatured” class) or in the column right after the featured column (if it is, apply a “rightOfFeatured” class).

While we are at it, we might as well apply class names to all table cells indicating their column. Colgroups were supposed to eliminate that need, but it turns out they have a fairly significant weakness. You can’t do something like:

.basic .odd {
   /*
      .basic is the colgroup, .odd is the row
      the row really isn't a descendant of the colgroup
      in other words, this doen't work
   */
}

This design calls for different color alterations depending on the column. So while we are running that loop, we’ll just apply class names to the table cells and use those class names to do our bidding.

// Apply classes to each table cell indicating column
// Also applies classes if cell is right or left of featured column

var numCols = $("colgroup").length;

$("td, th").each(function(i) {
    $(this).addClass("table-col-" + ((i % numCols) + 1));
    if (((i%numCols)+1) == (featuredCol-1)) $(this).addClass("leftOfFeatured");
    if (((i%numCols)+1) == (featuredCol+1)) $(this).addClass("rightOfFeatured");
});

The variable i in this function is the index. It basically tells us what iteration of the loop we are on. So the 50th table cell it finds, the index will be 49 (index is zero-indexed). So if we take the index modulus the number of columns (determined by testing the length of the jQuery set) and add one, we’ll have what number column the cell is in. Example: 4 columns, 10th cell found. 9 % 4 = 1, plus 1 is 2, so the 10th cell is in the 2nd column. And thus, that cell gets the class “table-col-2″.

With the row .odd classes and the new table-col-x classes, we can now truly zebra stripe as the design demands:

.odd .table-col-1 { background-color: #edf3e2; background-color: hsla(85,  30%, 94%, 1); }
.odd .table-col-2 { background-color: #edf3e2; background-color: hsla(110, 30%, 94%, 1); }
.odd .table-col-3 { background-color: #edf3e2; background-color: hsla(150, 30%, 94%, 1); }
.odd .table-col-4 { background-color: #e2ecf0; background-color: hsla(190, 30%, 94%, 1); }

Zebra action complete.

Notice it’s hex code fallbacks and HSLa again. The fun of using HSLa here was that the values are exactly the same except for the third value (the “lightness”). We increase that value 14% and that is the noticeable difference in tone.

The “leftOfFeatured” and “rightOfFeatured” classes apply a background image, just an alpha-transparent PNG shadow aligned and repeating to the left or right respectively.

.leftOfFeatured  { background-image: url(../images/shadow-left.png);  background-repeat: repeat-y; background-position: right center; }
.rightOfFeatured { background-image: url(../images/shadow-right.png); background-repeat: repeat-y; background-position: left  center; }

Conclusion

So that’s it folks. It was fun for me to try and recreate something I thought was awesome, but just in a “this is how I would do it” kinda way rather than peaking at any of their code. I highly recommend this kind of exercise, if your schedule allows.

View Demo   Download Files

How a typical day dealing with Magento inquiries went horribly well…

Careful what you wish for… this is what you often hear, right? Well, thanks to our inbound marketing efforts, we are getting many inquiries daily with potential clients asking for some Magento work ranging from small fixes and modifications on their existing sites to full projects from scratch. To be very clear, we find ourselves in a situation where many of our fellow developers would like to be in. It is then the question of filtering out these inquiries, delving deeper into project requirements details and, hopefully, landing a project or two.

However, working with a large number of incoming inquiries can at times lead to reducing oneself to a typewriter, and getting a feeling like you’re stuck in an infinite loop, much like this one (anyone here still remembers the good ol’ Basic?)

10 PRINT: “Thank you for you inquiry. We can definitely help you with your project. Could you please share some more details together with your expected timeframe so we can prepare a more informed estimate for our work?”
20 GOTO 10

And while this is all part of the job, sometimes a thing happens like it did today when you simply have to stop for a while and enjoy the moment.

An inquiry came in saying: “I would like to build a Magento shop selling all Vuvuzelas from the 2010 World Cup to aliens so that those lovely sounds inspire their hearts for a while.” In case you don’t know what Vuvuzelas are, you’re probably not that big on football/soccer. If you want to learn more, just listen to this…

Then all hell broke loose – the team members started brainstorming on the best ways of setting up intergalactic shipments, whether there’s an UPS API available that would easily handle the shipping rates for “lower 48″ group of stars of the Ursa Major constellation, and how the payment gateway of the Ferengi bank on Uranus doesn’t support “authorize before capture” option. It was really a great way to finish off Friday on a high note.

So, if you’re looking to expand your business overstars, we’ve already started preparing…

If you ever went through Magento installation process, you know that at some point you are asked for Magento Encryption key. Magento will automatically generate one for you if you do not enter anything in this field. For first installation, this is just fine. You will see a note that Magento uses this key to encrypt passwords, credit cards and more. Is this really the case?

Once Magento installation is complete, you will find the code at /app/etc/local.xml folder.

<crypt>
<key>< ![CDATA[-encryption-key-]]></key>
</crypt>

You would have thought that it is important for some process when Magento saves customers or admin user password in the database and encrypts it. However, this is not the case. When you upgrade the site to a new Magento installation, you will be able to log in with the usernames and passwords that you used, even if the encryption key is different.

But, if you forgot to remember and resave encryption key from the old installation, you will encounter a problem where some payment or shipping gateways will not work. Access data will not work although you have them in the database. This is where Encryption Key is in the story. PayPal, Authorize.net and similar transaction keys and passwords are additionally secured with this key via hash & salt method. With this in mind, if you forgot old transaction key, there is no other way to solve this issue than re-saving those access data from Magento administration interfaces.

So, golden rule is: When upgrading the site to new installation, be sure to use the same Encryption Key.

Cheers!

I absolutely think that beginner web designers should use templates. And by templates, I mean something that you might buy off ThemeForest or other template selling service. Here are a few reasons why:

• Tweaking = learning. Templates need to be changed/altered/tweaked. That’s the whole idea of a template. When a beginner designer does those things, they are learning how code works. Tweaking WordPress themes is exactly how I got into web design.
• Quality. When the site is “done”, a beginner will have something they are likely very proud of. Probably more proud than if they started from absolute scratch and ended up with something very basic (or downright ugly). That will provide good momentum for sticking with it.
• “Real world.” Assuming the template is well-coded, the beginner will be looking at a good amount of quality markup and well organized efficient CSS. That is nice head-first dive into real world front end design, as opposed to starting with the kind of markup an intro to HTML book might start you off with.

But what if you aren’t a beginner?

If you are a professional designer (as in, a client came to you with web needs and you are going to build a custom site for them, and you are going to charge them more than a few hundred dollars) then using a template is, pardon me, bullshit.

The job of a designer is to carefully consider the needs of the client and the constraints at hand and create a solution. In my opinion, that includes every pixel on that site. If some of those pixels were recycled from somewhere else, then they weren’t created with the intention of solving that clients needs. I’m not saying you can’t use find/reuse/recycle things you find elsewhere, I’m saying that when you do, you ought to be manipulating them and heavily considering how they integrate into the vision for the site.

What do you think? Am I full of crap?

For you developers out there, do you feel similarly? I think the opposite might be true for developers, where recycling code that has the exact same functionality is probably the right way to go.

In recent related news, I have placed an item on the newly released CodeCanyon CSS category: CSS3 Tabs. I’ve had some interesting conversations with folks recently about the idea of selling code and designs. The interesting part is how the sale of design templates is largely given the thumbs up while selling code is largely given the thumbs down. I can totally relate to those feelings, but I’ve decided that if it’s cool for designers to get paid to sell their craft, then it should be cool for developers to get paid to sell theirs (licensing issues notwithstanding).

It sure seems like a heck of a lot of web designers are also photographers, doesn’t it? And by “photographer”, I mean they own a DSLR and heavily consider aesthetics when taking a picture. Why the overlap of interests? Well clearly web design often incorporates photographs. Maybe we like to have the equipment we need to take decent pictures for websites and it grows from there. Maybe it’s because photography is a lot like design. You have a canvas of sorts and you need to take into account the principals of design: color, balance, line, shape, contrast… the gestalt.

I think maybe the connection runs a little deeper though, in that it appeals to our inner nerd in the same type of way.

CSS isn’t a particularly difficult language to understand. You select things, and change the values of different properties. There is no logic, no math, no object oriented concepts, no security concerns… It largely reads like plain English. Yet, understanding it and being really good at it are pretty far apart. The old adage applies nicely:

It takes a day to learn and a lifetime to master.

CSS might seem a little mystifying at first, until you dig in a little and then you might think “this is all there is?” I found photography to be similar. At first, a DSLR can seem like a maze of settings and details to know about. It seems like learning how to change everything according to the circumstances and your desired outcome is going to be incredibly complicated. Then the further you dig in, you realize it basically boils down to your ISO, shutter speed, and aperture. Then it happens again, “this is all there is?”

It goes deeper in both directions. Yes, CSS can get more complicated with stuff like CSS3 transitions, cross-browser quirks, and trying to style form elements to look decent. Yes, photography can get more complicated with things like different lenses, dealing with white balance, and processing RAW. But those things are somewhat minor compared to the core concepts. Master those fundamentals, and the rest comes along with it over time.

Huge sogging longbottoms? High strength low alloy steel? NOPE, we’re talking Hue Saturation Lightness (and alpha) and it’s a way of declaring color in CSS. It looks like this:

#some-element {
   background-color: hsla(170, 50%, 45%, 1);
}

It is similar to RGBa in that you declare three values determining the color and then a fourth value for its transparency level. You can read more about browser support below, but it’s basically any browser that supports rgba supports hsla too.

• Hue – Think of a color wheel. Around 0^o and 360^o are reds 120^o are greens, 240^o are blues. Use anything in between 0-360. Values above and below will be modulus 360.
• Saturation – 0% is completely denatured (grayscale). 100% is fully saturated (full color).
• Lightness – 0% is completely dark (black). 100% is completely light (white). 50% is average lightness.
• alpha – Opacity/Transparency value. 0 is fully transparent. 1 is fully opaque. 0.5 is 50% transparent.

Let’s dig in.

Why is it cool?

The real appeal of HSLa is that it makes more intuitive sense what changing the values will do to the color. Increasing the second value will increase the saturation of that color. Decreasing the third value will decrease the lightness of that color. That makes creating your own color variations on the fly way easier. I would wager that most of us can’t create nice and consistent color variations like this using the RGBa model.

The HSLa model also makes changing color values programatically much easier. Check out the demo tool emphasizing that.

Why is it less utilized?

This is me making a big assumption, but from what I can tell, HSLa is much less utilized in the wild than RGBa is. If you have any ideas of why that is, please share in the comments. My theory is that HSL values are harder to get your hands on, as far as sampling from the screen or a Photoshop document.

I guess Photoshop uses Hue/Saturation/Brightness model instead. I honestly don’t quite understand the difference, but when I was first attempting this, this is the situation I got in.

Getting HSLa values

There is a little app for Mac called Colors from Matt Patenaude.

You just click the magnifying glass and then anywhere on the screen. It will fill in the color in the box. Then you can select the hsla option and copy it to your clipboard. There are preferences for tweaking the formatting just how you want it to. Works pretty well. My one gripe being that if you close the little floating window, it won’t reopen unless you quit and restart the app. Might be a Snow Leopard thing and the app hasn’t been updated in a while? I dunno.

If anyone has a favorite Windows or Linux tool for capturing color that has HSLa as a feature, let me know in the comments and I’ll update it here.

Browser Support

Firefox 3.0+, Safari 3+, Chrome 6+ (maybe older too?), Opera 10+ (maybe older too?)

As usual IE is left out of the party. Even version 8. I have a feeling version 9 will be supporting it but don’t have any proof yet. Anyone have it installed and can test? For IE, you can just declare a fallback color. IE 8 doesn’t support RGBa either, so just using a hex code is the best bet.

#some-element {
    background-color: #e2ecf0; /* Fallback */
    background-color: hsla(190, 30%, 94%, 1);
}

Tool

As a demo of how easy it is to create color variations programatically, I created the HSLa Explorer. There are two slides on the page. The top one controls the hue value and the second one controls the opacity level. It takes those values and builds a grid of 100 color variations, where the saturation and lightness are varied in a matrix.

IE doesn’t like something in JavaScript (in the demo) for some reason, but no matter, IE doesn’t like HSLa anyway. Thanks to Matthieu Sieben for helping improve the demo.

The items on this list are essential for any store owner to go through before launching their online store. We’ve covered some of these topics before and this post is to serve as a must-be checklist in order to ensure flawless user experience.

Note: This post is dedicated to the store owners in general, mainly without any technical knowledge in terms of web development. Thanks.

1. 404 – page

Magento has a 404 page that looks like this:

It’s a nice start but if you don’t change it it will look like every other Magento 404 page and secondly you loose the opportunity to turn that awkward moment into a win/win situation. I won’t even mention that those demo banners need to go too

Tip 1: Go to the Admin panel to the CMS – > Pages and from the list of the pages click on the 404 page. Change the text to better suit your needs and yes please remove the dog and the shirt images or replace them with your own special banners.

Tip 2: While you’re there you could really help the visitor and yourself by adding some relevant choices. For example:

Show a particular catalog listing:

{{block type="catalog/product_list" category_id="10" name="product_listing" template="catalog/product/list.phtml}}

2. Replacing or removing the sidebar callouts

This one is a classic for everyone involved with the Magento store since it can slip thru unnoticed even days after the site is launched. These topics are as old as Magento so there is a nice thread on their forum explaining how to remove all of those unwanted features easily. (http://www.magentocommerce.com/boards/viewthread/2755/)

Here’s the rundown:

Removing callout blocks – Go to the Manage pages -> Choose the landing page you want to have it removed from and add the following code in the custom design:

<reference  name="left">

<action  method="unsetChild"><name>left.permanent.callout</name></action>

</reference>

for the left callout and

<reference  name="right">

<action  method="unsetChild"><name>right.permanent.callout</name></action>

</reference>

for the right callout. You’re done. BTW you can to all of these steps directly from the page.xml file but this is I believe easier for everyone to understand.

If you don’t need the poll simply disable it from the Admin panel:

System -> Advanced -> Modules output -> Mage_Poll

Tip: While you’re there you can disable any of the functionalities you won’t be using. It will definitely keep things simpler and the house clean.

3. Store’s favicon

Having Magento’s favicon for your store is not an option when you’re keeping up with your brand’s image so replace favicon.ico with your store’s favicon at path/to/magento/favicon.ico and

path/to/magento/skin/frontend/default/[theme name]/favicon.ico

Tip: Here’s a nice service for creating the store’s favicon in no time

Check it out:  http://tools.dynamicdrive.com/favicon/

4. Transactional e-mails setup

This one is so important that it has it’s own post on how to set those emails properly. We’ve explained in detail how to set them up and how to apply them to different stores and store-views.

Check it out:  http://inchoo.net/ecommerce/magento/custom-transactional-emails/

5. Setting up the newsletter

If you’re gonna be contacting your customers via the Magento’s biult-in newsletter system be sure to check Toni’s post on setting it up.

Check it out:  http://inchoo.net/ecommerce/magento/magento-newsletter/

6. SEO – Default title and keywords

Oh boy, this one definitely falls in the category of major oversights when launching the store or, ehm, even after the store is launched.

Tomislav wrote very informative article about it including other three popular oversights like the store favicon and the infamous missing “Google Analytics”.

Check it out:  http://inchoo.net/ecommerce/magento/most-popular-magento-oversights/

7. Store logos and e-mail addresses

Store email address definitely deserve your attention since you’ll need to change the default @EXAMPLE.COM addresses from the Magento admin. This reflects the sales emails as well so this one is a must have before any sales take place.

Tip: Go to System -> Store Email addresses and change both the names and emails to start selling.

Oh, don’ forget the PDF print-outs under the Invoice and “Packing Slip Design” section since you’ll need a logo image with at least a 150 dpi resolution to print out nicely on those invoices

Tip: Go to the System -> Sales -> Invoice and Packing Slip Design

and upload your logo (200×50) for print and print view (for HTML documents only)

8. Privacy policy and Terms of use

These to pages mean a lot to your new customers in terms of establishing a relationship of trust since you’ll be providing the answers that deserve to be answered before any shopping is done.

9. Payment and Shipping options

Clearly stating which payment options are available before the customer is already at the checkout is of great importance since it will save time for you and your customer. one example is when the customers reaches the payment part in the checkout and realizes that he/she can’t pay ’cause none of the options suit them. Having  a footer banner with accepted payments logos will remedy that situation and provide a win/win situation for all.

The same applies to shipping options and one thing to do about it would be to make a separate CMS page where you’ll be stating the payment options and/or shipping options.

Tip: Payment methods: Payment Methods -> Saved CC – Change the “Enabled” option to no if you want to avoid the liability of storing credit card numbers even if they are encrypted. It’s optional but for obvious reasons strongly recommended.

That’s it. No, of course not. With store owning and maintaing a reputable business there is always one more thing that you can do for you and your customers. It’s often those little things that make a difference so don’t put them aside. Do those last things first. Cheers!

When I decided to leave my last job, I decided I was going to leave at the beginning of the Summer. I was going to bum around the Summer not doing much, maybe even extend that for a whole year. It sounded pretty appealing. There was very little that could have strayed me from my awesome plan. I even got to turn down some pretty swell job offers.

Then one thing came along that turned that whole idea around. Something I’d way rather do than some hippie summer. I am now working for Wufoo!

I bet a lot of you know that I’ve been a big fan of Wufoo. Wufoo is a form building web service. It’s a big part of my belief in instant productivity. Designing forms and giving them a high degree of functionality is a ton of work. Wufoo makes that job so trivially easy, it is actually fun.

I am going to be doing a variety of things with them, including design work (yay!) and blogging (yay!) and more. In fact you can already see my first blog post on the Wufoo blog: a tutorial on creating a poll with instant public results. Check it out and let me know what you think.

If you do the social media thing, I’d encourage you to follow Wufoo on Twitter / fan Wufoo on Facebook. We intend to keep people updated on new Wufoo stuff (there is lots of cool stuff in the pipeline) but just as importantly, share interesting resources and research through those outlets. Most importantly, if you’ve never tried Wufoo, you ought to sign up and give it a whirl. I’m not just towing the company line here, it’ll change how you feel about building forms.

Finally Magento 1.4.1.0 has been released. Its been “forever” since we got stuck with Magento 1.4.0.1. Anyhow, its always nice to have updated, bug fixed, and a bit improved version of your software. Especially if it brings money to your table. Hope all of you site owners will enjoy this new release.

However, keep in mind that upgrade will not be painless. On contrary, I expect lot of issues with lot of custom extensions coded around the “Sales” functionality. Reason for this is the “Sales module database structure changed from EAV into flat tables”. Hopefully you, the site owner, can spare several hundred of dollars for the upgrade. So please, as I developer all I can say is be gentle on us if your site snaps during the upgrade process .

Besides the obvious (read usual) bug fixes, there were several other under the hood changes and improvements such as updated version of TinyMCE, ability to exclude a category from navigation menu, ability to use static URLs for media in WYSIWYG or image browser and other neat stuff.

My favorite change is the one related to the PayPal section. Seems like finally someone decided to organize this stuff under one menu item, you know the one under System > Configuration > Sales > PayPal. Not much but it makes people like me happy.

My apologize if I left a bit sarcastic impression. Thats just me , and my sincere need to express my self from time to time. Besides, speed aside is there any serious shop alternative when it comes to features for Magento?

Anyhow, thats about it. Please read the official Rlease Notes – Magento 1.4.1.0 stable (June 10, 2010) for full info.

And happy upgrade to all you trying to stay up to date

How do you upload images now?

You select a file and click upload. Simple right? Except once you select your image you can no longer see what was selected. The name of the file is at the end of the input, and if the input is short, or the file path is deep, you’re not going to see anything useful. You forget what you selected and have not idea what you’re about to upload. “Wait, did I upload a picture of my face or something less professional?”

Let’s make it better.

The key is having an image preview that gets shown before the user needs to commit to saving it. So we ditch the upload button in favor of a save button. Now when a file is selected via the file section input, some AJAX kicks in. The image is processed server side and a thumbnail is loaded onto the existing page.

Doesn’t that feel so much better? We now have a visual representation (imagine that) of the image we selected.

This is particularly useful in larger forms when many fields will be submitted with a single action. It allows the user to review the form before pressing save and see what image (or images) they selected.

How it’s done

Curious how this is done? Here’s the code.

We can use a standard HTML form. We’ll include that as well as an image preview area.

<div id="upload-area">
	<div id="preview">
		<img width="100px" height="100px" src="/images/icons/128px/zurb.png" id="thumb">
	</div>

	<form action="/playground/ajax_upload" id="newHotnessForm">
		<label>Upload a Picture of Yourself</label>
		<input type="file" size="20" id="imageUpload" class=" ">
		<button class="button" type="submit">Save</button>
	</form>
</div>

The action of the form should point somewhere the process the uploading of the image, regardless of the presence of JavaScript. You may also want to consider only appending the preview markup via JavaScript, as that won’t work without JS.

You’re going to need jQuery and the AJAX Upload jQuery plugin by Andrew Valums. Link them up, making sure jQuery is loaded first. Note that the AJAX Upload plugin does require some configuration and server side stuff to work. Check out that link for details.

<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/ajaxupload.js" type="text/javascript"></script>

Here is the JavaScript we’re going to add in its entirety.

$(document).ready(function(){

	var thumb = $('#thumb');	

	new AjaxUpload('imageUpload', {
		action: $('#newHotnessForm').attr('action'),
		name: 'image',
		onSubmit: function(file, extension) {
			$('#preview).addClass('loading');
		},
		onComplete: function(file, response) {
			thumb.load(function(){
				$('#preview').removeClass('loading');
				thumb.unbind();
			});
			thumb.attr('src', response);
		}
	});
});

Here’s that in plain English:

1. Attach plugin behavior to the file input
2. Specify the action URL, appropriately pulling it from the action URL in the markup
3. When a file is selected, immediately add a class of “loading” to the preview area. This class name, through CSS, hides the image (e.g. .loading img { display: none; } and applies a background image (a spinner)
4. Upon AJAX success, remove the loading class and set the src of the image to the response URL that the plugin returns.

Preview Only

Note that the above code deals with the preview functionality only. The file section input still contains the proper file path. So when the user clicks the “Save” button, the form will still need to be processed and handled by whatever server side technology you have ready for that. So yes, you will be essentially uploading the image once (for the preview) and then uploading it again (to save it in a more permanent way).

When you are setting up/configuring the plugin, you’ll set up a directory for a server side script to save uploaded images to. You might want to have that live at somewhere like /images/temp/. That way you know that anything uploaded to that directory is transient and can be cleaned out temporarily to keep the server clean. A empty-that-directory CRON job might be a good idea.

Demo

A working demo is available on ZURB’s site, which also includes more written information. Because of the server side stuff needing to happen, a download unfortunately isn’t practical.

View Demo

All jobs are a series of tasks needing to be completed. Let’s look at a construction worker. Today she needs to bust up a bunch of cement. Here is one path of action:

Put hardhat on
Start jackhammer
Bust up a bunch of cement

Here is another way she could have gone about it:

Scout out area
Determine weather conditions
Make labor assessment
Evaluate different jackhammer models
Stretching and breathing exercises
Get third party opinion
Coffee break
Put hardhat on
Start jackhammer
Bust up a bunch of cement

Which way is more efficient? The go-getters amongst you might say the former — just get after it! The more management types among you might argue the latter — having a full evaluation of the task means the job will be done with more efficiency once it’s started.

The answer, in my opinion, as most things in life, is somewhere in between. But a lot more former than latter, especially when it comes to web work.

Let’s bring it back to the web. Now the job at hand is designing a specialized landing page for a product. Here is one way she could do it:

Open up Photoshop
Start playing around with ideas
Land on something decent, or go back to the top

Here is another way:

Conduct interviews with potential customers
Analyze past analytic data of website
Browse web design galleries
Go on urban walking tour for color inspiration
Evaluate latest web technologies for animation
Poll twitter followers for opinions
Attempt to use Fireworks instead of Photoshop
Coffee break
Catch up on email and RSS feeds
Open up Photoshop
Start playing around with ideas
Land on something decent, or go back to the top

Clearly there is value in the latter group. That group is filled with activities that will help us grow as designers and dig into our current task at a deeper and perhaps more insightful level. It is also filled with glorified thumb twiddling.

Choice of Tools

I use WordPress. It just so happened that back as a fledgling wanna-be web designer I came across it, installed it, and starting using it to make sites. Years later, I’m still using it to make sites because I know it really well and I don’t feel limited in its abilities. I don’t feel particularly compelled to even try Joomla, because with WordPress I can be instantly productive, rather than enter a new learning curve. Call me crazy.

I’m also aware that that is dangerous territory. The web moves fast and it’s easy to get left behind. I’m sure we all know some old curmudgeons that are convinced some crazily outdated technology is superior. We might laugh and point. We might be right. Or they might be right. Maybe they are the ones being instantly productive.

Bob Staake uses Photoshop 3.0 and nobody is calling him unproductive.

So what?

My point is that if you have a job to do, just get after it. Roll up your sleeves, get the tools ready that you already know you can be productive with, and start dishing out some instant productivity.

Then maybe after you get some work done you can read you feeds and do some scholarly thumb twiddling =)

Recently I became proud owner of HTC Desire mobile device powered by Android platform. This is something I got my boss Tomislav Bilic to thank to. Even before (several weeks before) getting my real Android powered phone, I started poking around Android platform. Behind this interest was my desire is was/is to do mobile eCommerce apps. As I have been involved in everyday Magento development for the last two years now, it was only logical for my first steps to do something Magento-Android related.

So, what was on the plate? In order to do anything mobile with Magento you need to connect to its API, whether it is SOAP or XMLRPC API interface.

Personally I am a bigger fan of XMLRPC (can’t say why actually). In regards to that, my first task was to connect my Android to Magento XMLRPC API. Surprisingly, Android framework (SDK) does not have feature rich and ready classes for doin XMLRPC calls like lets say Zend Framework has.

Luckily for me, there was already someone who had to deal with this issue before me. If you open the Android-XMLRPC page you will find a nice little library for handling the XMLRPC in Android. This was all I needed to get me started. Here is an example of how to connect to Magento trough this library.

// ...

String sessionId = "";

//HashMap<string , String> params = new HashMap</string><string , String>();
//params.put("apiUser", "developer");
//params.put("apiKey", "magento123");

XMLRPCClient client = new XMLRPCClient("http://some-site.com/index.php/api/xmlrpc/");

try {
	/*
		sessionId = (String)client.callEx("login", new Object[]{params});
		will cause
		DEBUG/MY_XMLRPCException_MSG(196): XMLRPC Fault: Calling parameters do not match signature [code 623]
	*/
	sessionId = (String)client.call("login", "developer", "magento123");

	Log.d("MY_XMLRPC_SUCCESS_SESSION_ID", sessionId);
}
catch (XMLRPCException e) {

	Log.d("MY_XMLRPCException_MSG", e.getMessage());
}

// ...

By executing above you will most likely trigger the exception and get the following error.

/*
06-09 09:33:53.313: DEBUG/MY_XMLRPCException_MSG(226): java.net.SocketException: Permission denied (maybe missing INTERNET permission).
*/

As you can see, error is pretty self-descriptive. You need to open your AndroidManifest.xml file and add the following inside the "manifest" attribute.

/*
<uses -permission android:name="android.permission.INTERNET"></uses>
*/

After successfully executed XMLRPC request, you should see the log message like shown below.

/*
06-09 09:49:27.163: DEBUG/MY_XMLRPC_SUCCESS_SESSION_ID(223): 9273ad9a5a52a959fec32439944bc84b
*/

Meaning you now have session id and can do the rest of the Magento XMLRPC method calls by passing this session id.

Also, you can see in the code, that I commented some stuff. For those ambitions this is a little tip on how to do more complex API calls to the rest of the Magento XMLRPC API methods exposed. This one you need to figure on your own.

Hope it comes in handy to the Magento-Android newcomers.

From Croatia with love, cheers.

I love me some Google Reader. I got all my feeds up in there and it’s like having the longest most interesting newspaper ever. It brings me great pleasure to know that when people build all these RSS reading applications, they are essentially just different user interfaces for Google Reader. That way we can play with lots of different ones but still maintain a unified home for our feeds.

The web interface for Google Reader is pretty good. They have mobile web versions as well that also aren’t bad. But there is one little thing that kills me about the web version of Google Reader. Let’s say you come down to an article you want to read…

Step 1: Keypress: J-J-J-J, Oh cool, this article looks interesting, I think I’ll read it.

Step 2: Oh crap, where did the article go all the sudden? OH YEAH IT WAS PUSHED DOWN OUT OF SITE BECAUSE AN IN AN ARTICLE I ALREADY SKIPPED HAS NOW LOADED ABOVE IT.

Yeah, there are ways around it. I could switch to collapsed view. But it’s the principal of the thing. I specifically skipped the article above and gave a new article focus. Focus should not be ripped away from me for any reason at that point. It happened to me so many times I just had to give up on the web Google Reader.

On the iPhone I use dedicated apps for RSS reading (I like both Byline and Reeder). I figure why not use a dedicated app on the desktop too. I have a friend who swears by NetNewsWire, so I’ve been using that. It’s pretty great. It has a really simple and easy interface. Not much to get in your way, but just about everything that you need. My favorite part is how it has a built in web browser, so switching over to read the article on the site is really quick and painless. It uses WebKit internally to do that.

NetNewsWire also supports themes. Here is one that ships with it:

C’mon, really?

The themes that come with the app aren’t particularly impressive. For one thing, they are literally all fluid width. One of my biggest gripes about fluid width on digital screens is how typically the only thing that happens when a screen is adjusted in the line length of text changes. Ironic, in that in my opinion the only thing that shouldn’t change in a fluid width layout is line length.

If you open up the applications package, you can drill down and find where the themes are kept. They are files with the .nnwstyle extension. If you then show the package contents of those, you can see the how they are built. They are literally just HTML and CSS files. Awesome.

Right click > Show Package Contents

Fixed

So I set about trying to build my own theme. I probably went through 5 different ideas and I’m still not entirely satisfied with this, but I’m just gonna stop fiddling with it for a while and let it sink in. I’m also going to share it here in case anybody else is a NetNewsWire user and wants to try it, or have a base to play with their own.

I’m calling it “Fixed” because:

• It’s fixed width.
• It has a fixed header.
• It fixes a bunch of stuff I found annoying about feeds.

It looks like this:

Hey, it ain’t much, but that’s kind of the point. The idea is to get out of the way and just make articles as readable and cruft-free as possible.

Features

• Title is big and fixed so you can’t forget what you are reading and are always close to a link to it’s real URL on the web.
• Source and other meta information are fixed above the title for similar reasons.
• jQuery is loaded into the theme, which is utilized a number of ways.
• Line length is fixed at a comfortable length.
• Images are forced to be block level and spaced out (some sites leave images inline with text and it causes weird layout issues over RSS)

Widows in post titles are prevented by inserting a non-breaking space between the last two words like this.

• Embedded videos (or any embedded content from any source) is forced to be the same width as the line length.
• iframes are removed. Google ads in feeds come across in iframes, so those are gone. I can’t think of any real legitimate use for an iframe being in RSS.
• Tweetmeme/ReTweet buttons are removed.
• Any images that are really small (under 30px in both height and width) or specifically related to FeedBurner are removed. This removed a lot of junk from the end of a lot of feeds, including seeing a zillion “sharing” buttons or FeedBurner cruft.

Download Files

I think you can just double-click it from the desktop, and assuming you have NetNewsWire installed it will install it as a theme.

Only gripe about NetNewsWire: it says “flagged” instead of “starred”, can’t we just use “starred” and keep it consistent? But worse, you can’t “share” things, which I like to do. It does have Delicious and Instapaper support though, which rocks.

How is it done? Let’s take a gander at four different ways. Each of them handling the illusion in a different way, and each completely appropriate depending on the situation at hand.

Totally Friggin Fake It

From the Spectrum Theme website

The end result of any web design is basically an illusion anyway. You can always create your transparent effects in Photoshop or whatever other graphics editor and export flat graphics. In Photoshop, transparent effects can be created by changing a layers opacity level, fill level, or blending mode, just to name a few.

Opacity

This entire button has opacity applied to it, to emphasize that it is currently “disabled”.

You can make any element transparent by using the opacity parameter of CSS.

#anything {
  opacity: 0.5;  /* 50% transparent */
}

If you need to support older browsers, see here.

Do note that all descendants of the element with opacity also become transparent. There is no way to “force” any descendant to be come any less transparent as the parent is.

RGBa / HSLa

From the Like Architects site

Using RGBa for a color value in CSS, you can set a transparency level on any color. This has the distinct advantage over opacity in that it doesn’t have any affect on descendants. It is also nice in that creating faded out variations of a color is as easy as changing the final alpha value. Speaking of color variations, that is even easier to do with HSLa, and is still able to handle transparency.

#anything {
  background: rgba(0,0,0,0.5);  /* 50% transparent */
}

#anything {
  background: hsla(0,0,0,0.5);  /* 50% transparent */
}

PNG

From a Dribbble

When “Saving for web” from Photoshop, you have two choices for PNG’s: PNG-8 and PNG-24. PNG-8 is like a GIF in that you can have transparency in pixels, but a pixel is either fully transparent or fully opaque, no in-between. PNG-24’s, while far bigger in file size, support full alpha-transparency.

In the example above, the shadows from the content areas are from PNG-24s so that the texture in the background can change and the shadows will still be the same.

“We just sold another one!”, cried Dan Stuart after 25 people ordered “AED 50 for AED 100 Worth of Authentic Lebanese Cuisine at Mashawi” deal. Only few hours later the deal is sold 66 times. GoNabit.com is a new Shopping Social site that offers users the chance to get money off a different service or product each day if enough people across that city sign up. This is the first group-buying platform in the Middle East, launched in Dubai last week and will be available in Abu Dhabi shortly afterwards. Those of you tech-geeks readers are probably guessing it right. It is powered by Magento!

When Dan Stuart approached us and presented the vision of the project, we knew it will be a challenge to build it in Magento. This is not a classic eCommerce store. There are no ordinary categories and products you are used to in Magento. Instead, we have a tailored shopping social platform with many custom features.

We had a pleasure to work with two great individuals Dan Stuart and his co-founder Sohrab Jahanbani. They already have 22 deals scheduled over the next month, with daily e-mails going out to more than 2,500 people in Dubai and to a significant following on Facebook and Twitter.

Every day GoNabit features one or two huge deals. Once there is a minimum number of buyers, deal ‘tips’ and the credit card gets charged. At this time GoNabit sends voucher to the buyer. Buyer can then print his voucher and take it to the local merchant for redemption. If the minimum number of purchases is not reached before the deal ends, no one gets charged and no one gets the deal. This is how social component and the community work together on boosting sales.

GoNabit became a popular topic in Dubai where people are chit-chatting about current deals on their coffee-breaks.

View the site at: www.gonabit.com

Whether you know them as jewellery or jewelry, these shiny pieces of joy can really light up your and your loved one’s day. When you can also get them online and have fun in the process, what more could you ask for? Ok, maybe a discount code or two, but that can also be arranged…

Fresh Purple is a London based online jewellery store that combines the richness and luxury of tradition of the color purple with a contemporary, fresh elegance to bring some truly stunning products to their customers. In addition to selling beautiful items, they strive to educate their customers on all things jewellery. On their website you can find some great information on various types of gemstones, learn how to tell fake silver/gold from the real deal, easily determine your ring size and get some good tips on how to take proper care of your shiny friends.

We’ve recently worked with Michael Yoong and Monica Zhu to help them freshen up their Magento online storefront. They have prepared the new design files, and our developers Branko Ajzele and Filip Svetlicic did a great job guiding the clients in the process and implementing their ideas in line with the best Magento practice. Much of the credit for successful implementation of this project is due to our clients as well who were well prepared, had clear set of requirements, new exactly what they wanted to achieve, and were very receptive to our developers’ advice.

Working with Fresh Purple was a great experience and we can wholeheartedly recommend doing business with them to anyone. Make sure to check the new site at http://freshpurple.com

“Having set up a basic Magento store with a local developer in order to get a feel for the system, we were looking for someone to help us produce a professional redesign of our website. We were very impressed by the wealth of Magento knowledge and expertise that Surgeworks/Inchoo had published on their blog and so contacted them for a quote. From then on, it was smooth sailing all the way.

Communication with the developers was great and they were a real pleasure to work with, implementing everything from our design without complaints or any seeming difficulty. They were ready with advice to improve our initial design and very helpful with providing suggestions, tips and tricks to make running the store as smooth and trouble-free as possible after their work was done.

We couldn’t have found a better group of Magento professionals to work with and we will certainly use them again for any further work we need. ”

Michael Yoong, Director, Fresh Purple Jewellery