Posts Tagged ‘web design’

Magento checkout extensions have been pretty popular for a long time. For Ecommerce owners the idea of increasing sales just by making the checkout process smoother is a very appealing one.

The problem is that most checkout extensions are actually harmful to conversion rates and checkout usability.

All Magento checkout extensions I’ve seen out there are very bad in terms of load speed, conversions, and stability.

Don’t combine checkout steps into a single crowded step

First of all I have no idea why but all checkout extensions I’ve ever seen combine the checkout steps into a crowded 3-column design and promote this as if it’s a positive thing.

Here’s a screenshot taken from one such extension to illustrate what I mean:

Even the savviest users get confused with such a layout! Not to mention most internet shoppers eager to complete their purchase quickly and move on. I mean – which fields are you supposed to fill out first? Why are there so many options everywhere? It’s really overwhelming – especially if you’re just buying a shirt or a pair of shoes!

There are a ton of checkout extensions but somehow they all combine all checkout steps into one crowded page with 3 columns. It doesn’t get any worse in terms of usability and conversions!

Don’t overwrite Magento’s functionality

These extensions also completely overwrite Magento’s checkout functionality which is a big no no in terms of upgade-ability, stability and security.

What that means is that you’ll run into countless issues and problems with new Magento verions, and other 3rd party extensions (such as payment methods, shipping methods, etc).

Don’t weigh down your checkout page

In  addition these extensions add their own style files, template files, and layout files to the checkout page which will affect  load speed and page performance – actually slowing down the most important page of an online store!

Don’t trust anything but numbers

If you’re trying out a Magento checkout extension, you should make sure to test conversion rates with A/B testing (you can use Google Website Optimizer for that if you want a free and quick implementation). One company did test conversion rates and saw a huge decrease in conversion rates when compared to the original Magento checkout process!

Well, that’s expected to anyone with any sense of design and usability.

Look for an alternative

You can stick with the native Magento checkout functionality and that’s fine. Except for the very first step which is very confusing to users:

Fortunately this first step can be easily and seamlessly removed with the Optimized Checkout Extension without affecting any of the checkout functionality and all its possible scenarios.

If you want users to sign up for your newsletter at checkout you can incorporate this very simple extension which adds a newsletter check-box with a bunch of possible scenarios you can configure in the admin.

Links mentioned in this post:

• Google Website Optimizer
• A/B Testing the One Step Checkout Magento Extension
• Magento Conversion Rate Optimization – Cart and Checkout
• Optimized Checkout Extension
• Newsletter Checkout Extension
  

Whether you’re a web designer, eCommerce manager, or simply someone who runs his own website, having the right tools at hand will have a huge impact on your efficiency; from maintenance and website management, to customization and design.

Here’s is a very selective list of free tools anyone who runs a website should have: (more…)

Everybody knows a website’s landing page is really important. Since it’s easier to scroll than to click, one of the guiding principles in landing page design is that long landing pages tend to yield better results than their shorter counterpart.

Here are 2 truly awesome long landing pages utilizing the browser native scroll in an innovative way: (more…)

Looking for a simple way to make rounded corners using CSS? Here it is! With this very simple method, you don’t need to use any images or complicated code with divs etc. Nothing really is necessary. Just 2 lines in your CSS file.

All you need is the following CSS property (in this example I create a “rounded-corners” CSS class which you can then apply to your HTML element): (more…)

“User success rates on e-commerce sites are only 56%, and most sites comply with only a third of documented usability guidelines. Given this, improving a site’s usability can substantially increase both sales and a site’s odds of survival.” From Did Poor Usability Kill E-Commerce? by Jakob Nielsen.

He also writes that “E-commerce sites lose almost half of their potential sales because users cannot use the site. In other words, with better usability, the average site could increase its current sales by 79% (calculated as the 44% of potential sales relative to the 56% of cases in which users currently succeed).”

Related Post:

Good web design is all about achieving your goals

Magento 1.4 comes built in with a wysiwyg editor that is there to make it easy for less savvy users to edit rich content on their store’s home page, content pages, product descriptions etc without HTML knowledge.

There is also an option to hide the editor in case you want to use external code and paste it there or if you want to edit the HTML directly.

If you know HTML, you’ll probably want to use your favorite editor and only paste the code in the admin when you’re done (with the editor hidden). The problem is that the editor gets very buggy if you do that and then try to make a small edit directly in the admin – or even if you load the edit page in the admin and save again! That’s because the editor is not hidden by default and when loaded it adds <p> tags everywhere and removes empty divs. Depending on the code you have this will either destroy your content’s formatting on the front-end or make it disappear altogether.

Keep reading for a simple way to solve this annoying issue with the Magento editor! (more…)

When developing a new website or web application, you should choose to work with widely used web technologies that are popular on the internet. Why is this a smart choice?

Large pool of talented people.
If you work with widely used technologies, you’re aiming at a large pool when looking for talented people to work with. That’s really important. When working with technologies that are more rare, you are tying yourself to the companies or individuals you’re working with. By using more popular technologies, you’ll have a choice if for whatever reason you need to find other people to work with. And all the past work done will not be in vain because other people will know how to work with it.

Cost effective.
It is usually more expensive to work with technologies that are more rare. Of course it’s not the rule but it’s often the case. Again the pool of competitors is smaller so that usually means higher prices.

Access to resources.
In addition, it is much harder to find resources, frameworks, platforms, and in general open source software when you use technologies that are less popular – so you miss out on a lot of shortcuts and powerful options. Basically everything has to be coded custom – again that’s much more expensive and is not sustainable.

Prepared for growth.
Working with the wrong technologies will interfere with your company’s growth. Any web application needs to be regularly updated, maintained, and carefully secured (especially when it comes to Ecommerce for example). By not choosing a route where you can use popular software and platforms that are themselves regularly updated by the community, you are signing up for a long relationship with your developer and will end up being too dependent. It’s not a smart choice.

Don’t forget! Subscribe and follow!

Be sure to subscribe to the feed and follow us on Twitter for more tips, resources, and giveaways!

Related Posts:

• Web Design Explained
• Top 5 Questions To Ask A Web Design Company

If you change your site’s URL structure, you’ll probably need to redirect entire directories of your website to ensure that no links are lost.

This is very important for SEO and to not loose any incoming links to your site. So here’s how it’s done: (more…)

I found this really great article on using different style sheets for differently sized browser windows when designing a website or web application, potentially significantly enhancing the user experience. Enjoy!

It’s obvious than having the right tools at your disposal can make all the difference in your work. You’ll be more productive but as you are able to focus more on what you do (rather than how to do it) you’ll create the right context for your creativity to thrive!

I decided to start a new series of posts on this blog dedicated to the tools I use every day that transformed the way I work and made it possible for me to achieve better results and produce more work, while spending less time in front of my computer!

For some of work that I do, file comparison and folder comparison is absolutely essential. I use Beyond Compare every day. In fact, it’s probably the single software I use the most when working on any web design or web development task. I even often prefer it to the operating system default functions when copying files, creating backups, etc. I highly recommend giving it a try!