This article is for novice design integrators who want to integrate the design into magento. There are several important things that you should be aware of before you start work. So I prepared this short checklist, hope it will be helpful. If you are experienced magento developer you will not find something new, but if you are new in magento it can save you a lot of time.

1. It is easy.

The first thing that scare people in magento is a complexity. The magento is a complex system with no doubt, but it is also a most comfortable platform for development. It means that you have to spend more time for education in very beginning, but this time will pay off after you made 1-2 sites on magento. There are tons of various education materials, spend some time to study that and you will see that magento development is easy (and fun).

Additional materials
Alan Storm. Magento for Developers
Magento Design Terminologies

2. Creation of theme: do it right

Novice integrators make the same mistake again and again: they create a new theme in separate folder (which is right), but copy all files from source theme /base/default/. That is not correct, magento theme should be incremental, ie you must include only files which changed in your theme. Other files will be served from default folder by magento itself. Such incremental theme is a light-weight and upgrade-friendly.

Additional materials
How to create a new theme
Build your theme
Working wth magento themes

3. There is no jQuery

The bad thing is that magento does not use jQuery by default. However you can connect it in your theme. There are several important points however:

  • we recommend to include jQuery before prototype
  • ensure you included jQuery.noConflict() code after inclusion of jQuery library
  • use jQuery() selector instead of $() in your javascript code
  • in standard magento EE, there is a jQuery included on product details page (for product image magnifier), you should avoid the situation when 2 jQuery libraries connected at once
  • always use latest jQuery library

Additional materials
Extension jQuery Base

4. Magento XML layouts

Another thing that scares novices is a magento layout system. In fact you will never do good styling/development for magento without knowledge of magento layouts. We highly recommend to study an Alan Storm book before starting designing magento.

Additional materials
Alan Storm. No thrills magento layout.

5. Do not complicate your live, use development tools.

There are many useful development tools which make a live of integrators much easier. The most useful of them are:

  • template path hints - show the template file paths which used on current page
  • inline translation - allow you to translate text 'on the fly'
  • profiler - it may be useful when you want to know the speed of the page

Besides that, there are tons of development tools in magento connect, and some of them are really useful.

Additional materials
Template Path Hints Tutorial Video
Inline translation in Magento

6. Use standard markup

The first rule of every customization is: the code developed by you should be as similar as possible to original code of the system (in terms of style/structure). Magento uses pretty standard HTML markup for all HTML elements, such as:

  • buttons
  • input elements
  • forms
  • etc.

It means that if you need to create your own custom form with some fields, you have to open some form in magento and then try to use the same markup. In this case you can be sure that your markup is upgrade-friendly and follow best magento practices.

7. Smart CSS classes in magento.

Magento theme is pretty CSS - friendly. You can perform styling using CSS only without altering of source template files in most cases. Almost every element in magento has unique CSS class assigned, and there are standard CSS classes for every set of elements as well.

Practically, it means that for instance if you want to add new block in left/right column of your site, you need to use standard markup (see point 6)

<div class="block">
<div class="block-title">
        <strong><span>Test block</span></strong>
    </div>
<div class="block-content">

Some test block content.
</div>
</div>

However, since you might need to implement custom styling of this block you need to add your own styles as well (important: never overwrite the standard classes). So the correct code is:

<div class="block block-my-test">
<div class="block-title">
        <strong><span>Test block</span></strong>
    </div>
<div class="block-content">

Some test block content.
</div>
</div>

In the example above, standard magento styling of block will be applied (which means we will have to write less CSS for styling), however we can do our unique styling using selection by our unique CSS class block-my-test.

8. Bonus. Html Dropdowns in magento

We don not recommend to use any plugins for 'fancy' selectboxes. The deal is that magento has very complex logic assigned to these selectboxes (especially for product options selectboxes), so it is not a good idea to replace native '<select>' elements with set of another elements (which every plugin does), it will broke JS logic assigned to this selectbox.