Where do I start?

There are 2 very important directories you need when wanting to create a theme for Magento 1.4

• Directory 1: app/design/frontend/<interface name>/<theme name>/
• Directory 2: skin/frontend/<interface name>/<theme name>/

These directories contain all the files necessary for creating a Magento theme. Directory 1 contains the layout settings and html files of your pages, and directory 2 contains all the styling information (CSS and imag

A helpful theme

I started out with the Magento Blank Interface which is included with Magento 1.4. This is a very basic interface and theme which allows you to start almost from scratch.

First start by creating a folder in the "app/design/frontend/" directory with the name of your interface and in there a folder with the name of your theme. Next you do the same thing, but in the "skin/frontend/" directory.

The easiest way to learn how the blank theme works, is to copy and paste everything from the "skin/frontend/default/blank/" directory into the folder you just created. This makes sure you have some basic styling already, which you can easily adapt to your needs.

To start using your new Interface and theme, you must let Magento know to use your adapted "blank" theme as the new default one. This can be done by accessing the Magento admin panel and going to the Design configuration tab (System - Configuration - Design).

Then you need to fill in the Interface name in the "Current package name" field, and the name of your theme (-folder) in the Default field. If everything is working correctly, you should now see your empty theme being used on the Magento front-end.

Note: Do not forget to disable the system cache by going to System -> Cache Management and disabling all the caches. Else the changes won't be reflected in the front end.

Theme Hierarchy

There is a very important thing you need to know of how Magento works:

There is a certain hierarchy in the themes. To make sure nothing breaks when a certain file is not available in a theme, Magento automatically falls back to the theme lower in the hierarchy. The base theme (Default) contains all the necessary files and is the final fallback option. This means you can just copy the files you want to change to the new theme folder (with the same folder structure as the original files and folders) while the others can be left as they are.

This makes it easier to adjust your theme when there is an update of Magento and it also makes it easy to adjust certain parts of your site, for example if you want a seasonal version of your design. You can just override the files needed with a new theme and leave the others alone.

I often browse the web looking for new goodies and tools to make my life as a designer / programmer easier and more productive.

Yesterday I was looking for a program to clean, style and compress CSS code because it happens more as one person works on one CSS sheet. Also compressing bigger CSS files are a good thing as it speeds up loading the website.

I found CSStidy, a small online smart php written program that takes your CSS code and does exacly what needs to be done with it. CSStidy has several useful options on it like regrouping selectors or sorting attributes and properties but I would advice you to keep a backup of the old CSS file before blindly using it and overwriting the old file. I liked it so much I decided to host it here on the Petralian server.

You can access CSStidy 1.3 here: http://www.petralian.com/csstidy, and for the original project please go here:  http://csstidy.sourceforge.net/index.php.

What is SEO?

Search Engine Optimization or SEO is the technique that improves the amount of traffic your website generates. The more people visit your webisite (and return on a frequent basis), the more your monthly website traffic volume goes up and the better you rank on Google and other search engines. There are many approaches to improving the ranking of your website, un-paid (natural, organic or algorithmic) and paid SEO are the most typical advertised SEO techniques.

While un-paid SEO for some niche businesses does the trick in gaining good web ranking, the paid SEO is usually the best option for companies that are entering a well established market or want to gain the edge over their competitors. There are many companies claiming to guarantee you the first page of Google, even if you are having a small flash website that is totally not optimized and good for the web...

The first rule of SEO is to try and understand the way search engines work and using this knowlegde to build a website that is structured according to those rules. While it seems like a very simple job, creating an SEO optimized site is not all that easy, following the hierarchy of html tags and using them where they should be used, employing relevant keywords and adding / editing the website in a manner that keeps in line with the keywords you gave it requires skill, on top of that... you have to remember surfers do not read but scan web pages!

White Hat SEO

White hat SEO is what you should be aiming for... SEO friendly source code is the biggest contributor to good ranking. Menus, titles, image alts, the use of keywords in internet optimized webtext contribute to search engine spiders being able to find what they need. It is also always a good thing to back the web site with an extra dose of white hat SEO like inbound links, frequent relevant site updates, and perhaps even reciprocal linking, the latter will need budget most of the times.

Black Hat SEO

White hat's evil brother is black hat SEO... While keyword stuffing, link farms, article spinning and spam indexing might get you a good rank in days, there are rarely cases that get away with it, black hat SEO will get you banned from search engines and once banned you can forget about a good ranking. Besides getting banned those techniques actually degrade the relevance of your seach results and the user experience so much that your site gives a cheap and broken impression to your customers.

In conclusion...

1. Watch out when SEO company X explains to you they can get your company ranked #1 on Google or Baidu in less as a month and inquire about what methods that company is using.
2. You can contact Petralian for SEO related services, we can take on your SEO proposal or forward you to our trusted SEO partner depending on your project size.

Wikipedia on SEO
Google on SEO
Google SEO Starters Guide (PDF)

Users "Scan" Pages

Users spend ~ 4.4 seconds for every extra 100 words on a page, knowing this it is obvious that online writing requires a totally different approach as offline writing.

A dated article from Jakob Nielsen in 1997 explains that web users in general do not read but scan web pages. If one thing is more true that is that now (over 10 years later) a lot of websites still make the same mistake of having too much text without usable content. Not only do users scan web pages but news letters and forums share the same ill fate (if not worse).

How to Write?

Web pages have to exist out of scannable text...

• Highlighted keywords (different color, hypertext links, typeface or even font family variations)
• Meaningful sub-headings
• Bulleted lists (like the one you are reading now)
• One idea per paragraph (users will skip over any additional ideas if the first words in a paragraph are not catching)
• Half the word count (or less) than conventional writing
• The inverted pyramid style, starting with the conclusion

Inverted pyramid style:

    1: Conclusion

    2: Supportive article

    3: Background

Creditibility is another important aspect, because it is unclear where the information comes from you can increase your creditibilty with high quality graphics, good writing and most of all... relevant outbound links. Links to other sites often testify that the author is not afraid to show his sources.

Surfers hate promotional writing style with boastful subjective claims like: hottest ever. Your credibility suffers when users clearly see that the site exaggerates.

F for Fast!

Eye tracking studies also showed users scan the content for keywords of interest. This study shows the importance of following the guidelines for writing for the web! Some reminders:

• Users won't read your text thoroughly. They only scan for what is important so use keywords and highlight them!
• The first two paragraphs must state the most important information. Use the inverted pyramid!
• Start subheads, paragraphs, and bullet points with information-carrying words The first two workds count, the rest is only to back up the first

Writing for the web
Alertbox
About.com Writing for the Web