How to properly build Magento theme: Skinning, not theming

It been a while since my last article. I have been playing with Python and Django for the last few weeks. Figured I might write an article about Magento in a meanwhile (its been a while since my last post). Recently we had a discussion in company about how to improve certain areas of our development process. The idea was for our designers to come up with a design guidelines for later usage from within company.

After hearing the long howto presentation from our designer, let me share some of my thoughts on how to build a theme that will most likely be a perfect balance of lightweight and usable, possible innovative, financially balanced in terms of needed total amount of hours for front-end development etc…

Here is my personal golder rule for the Magento theme development: “Skinning, not theming!“.

Magetno’s large number of elements and stages on front-end, wast number of view files in “app/design/frontend/default” make it extremely time consuming to do any challenging design changes. In my humble opinion, “app/design/frontend/default” location is the middle ground of the entire development that needs to be done on given site. What should be done is to move the designer to work more in “/skin/frontend/default” folder and developer to work more in “app/code/local” folder. This way you would get more clearer approach to project. Developers would be focused on the actual code while the designer would be responsible for making such design that complies to the existing class rules and the rest of the stuff in /skin folder.

Poking around “app/design/frontend/default” is something both developers and designers do. As mentioned previously, given the amount of files in these folders, this process is extremely time consuming. So, the obvious question is: Can one make such design that minimizes the use of theme folder files modifications?

If the store design is made such to comply more to a “skin” than “theme” term, this would enable you to be far more faster in building your client shops. Besides speed, your developers could then really focus on their work, isolating new full-fledged features instead of wasting time on “masking” or modifying the certain areas of Magento front-end. As a result, you will most likely be more precise in your estimates once you know your theme would be design such that it clearly integrates with default Magento front-end.

Surely, designers would be first to say: “Wait a minute, if all I do is skinning to comply to already written css rules and layout, then what freedom do I have in design? How can I deliver breathtaking stuff to my client!”. I would have to say that arguments like these are not valid. Before I became developer, I was working several years as a freelance web designer. Great simplistic design is far more harder to achieve then to throw in bunch of everything just to satisfy the form. When talking in terms of Magento, I noticed one lacking flaw in most of the site owners request. They tend to focus on insignificant layout changes, and the goody-looking-flashing-popping stuff then on the real content. Its like they thinking: Why write five words of product description text when I can throw in some flashy looking non-related photo here, etc.

To get back to the possible “designer dilemma” in terms of “Skinning, not theming” context. Great design stuff can be achieved just by changing few header and footer background images, menu navigation elements, widths, etc… Stuff that will make you wonder, is this Magento or? All it takes, is a different look at things.