Best practices

There are a few steps you can take, from designing your theme in Photoshop to optimizing you code for search engines, which have been established as being the must-do for theme development. Following these best practices will help you build a better theme.

Designing in Photoshop

You are seldom alone when creating a theme: whether a colleague or a client, there are many occasions when you will have to share your design with other people. You should therefore make it easy for them to work with it out-of-the-box.

One of the first thing to do is to provide a work in the RGB color space, in 72 dpi, and to always provide the non-flattened file (unless it is for the final client, in which case you should provide the flattened one, unless he paid for the non-flattened version explicitly).
In general, you should never flatten a design, unless you are certain you are never going to want to edit it again.

When building a PrestaShop theme, you should work with a 980px width, with, depending on your uses:

• One Photoshop folder for all text layers, so that web developers can easily access the design.
• One Photoshop folder per design block (new products, best sales, etc.).

Color space: always rely on RGB. Do not ever use CMYK, which is made for print.

Units: when designing for the Web, the base unit is the pixel. Do not measure in picas, points or centimeters.

Font: use as few fonts as possible. Keep to the regular ones; do not ever use a fancy font (unless it is in a graphic, such as the header image or a slide-show picture).

Font size: never forget that the user has the final say on the text size, since modern browsers can increase or decrease it at the touch of a keyboard key.
You can use these sizes as a basis for your work:

• Titles: 18px.
• Smaller titles: 14px.
• Regular text: 10 to 12px.

Optimizing images

Image optimization means two things:

• Lowering image size in order to improve loading time.
• Making sure they are properly indexed by search engines.

Dealing with image size should be done directly in Photoshop: do not ever use a bigger image than it is displayed within the browser. Use the necessary size, no more, no less.
Photoshop also has a special "Save for the web" tool, which helps you perform compression and format comparison, and will remove much of the data cruft.

There are also online tools which can help you optimize your pictures with loss of quality, by performing automatic tasks:

• Yahoo! Smush.it is the most well-know: http://www.smushit.com/ysmush.it/
• Kraken is another which at times can give better results, and has Firefox and Chrome extensions: http://kraken.io/
• Image Optimizer enables you to also change the size of the file: http://www.imageoptimizer.net/

If you are at ease with command line tools, you can use these:

• Pngnq: converts 24-bit PNG files into 6 to 8-bit ones, by only keeping the needed colors.
  Download: http://pngnq.sourceforge.net/
  Sample command line: pngnq -vf -s1 image.png
• OptiPNG: tests several compression methods on a PNG file in order to find the best one.
  Download: http://optipng.sourceforge.net/
  Sample command line: optipng -o7 image-nq8.png
• pngcrush: another PNG optimization tool.
  Download: http://pmt.sourceforge.net/pngcrush/
  Sample command line: pngcrush image.png -rem alla -reduce -brute result.png
• jpegtran: performs lossless operations on JPeg images.
  Download: http://jpegclub.org/jpegtran/
  Sample command line: jpegtran -copy none -optimize -perfect src.jpg dest.jpg

Key SEO tips

Improving your site ranking is key to getting new clients. While we will not dive into SEO in this section, there is a handful of tips you should strive for:

• Improve your URL's, title and other meta tags: make sure to fill all the textfields in the back-office, both for products and for categories. Use short and concise descriptions, fill the title with the most important details, have these details appear in the URL, etc.
• Improve your image display: use proper captions and titles.
• Do not hesitate to use HTML lists when naming the various components/features of a product.
• Use important words multiple times.
• Optimize page display: make sure they load quickly, either by minimizing image size or by using a better web-host.