By Noura Yehia and Smashing Magazine Editorial Team

Typography is elegant when it is attractive and communicates the designer’s ideas. When chosen wisely and used carefully, it can be very effective in supporting the overall design. Designers are always exploring different techniques with type: some use images or sIFR to produce very beautiful typography, while others prefer CSS alone to get the typography just right.

Today, we will look at 50 most useful typographic tools, techniques and resources for creating effective and expressive designs. We will also look at some hands-on typography tools that help designers and developers learn how to style their Web content, test it interactively and see the changes instantly. These tools are great for experimenting with different font types for your website.

Below we cover typographic tools, useful typographic references, font browsers, typographic CSS- and JavaScript-techniques, hyphenation techniques, sIFR tools and resources, grids and related tools, free and commercial fonts, a guide to Web typography, examples of great Web typography.

Please feel free to suggest further tools and resources in the comments to this post. And if you like this post please feel free to subscribe to our RSS-feed and follow us on Twitter .

You may want to take a look at the following related articles:

• 50 Extremely Useful PHP Tools
• 50 Extremely Useful CSS Tools

1. Useful typographic references

Better CSS Font Stacks
A couple of useful font cascades for your CSS-stylesheet.

Striking Web Sites with Font Stacks that Inspire
With the right knowledge of CSS font stacks we’re one step closer to letting our imagination design a better Web experience for everyone

FontsMatrix
Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite (via @lucianosb on Twitter)

Common fonts to all versions of Windows & Mac equivalents
The list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as “browser safe fonts”.

Default Mac OS X 10.4 fonts list (via Elementiks)

Default Windows fonts list (via Elementiks)

 

2. Typographic Tools

Instead of doing your own testing, use the useful and time-saving tools below. They’ll help you play with typography and make choices by giving you a real-time preview of many of the available CSS font properties.

HTML Ipsum
A useful little website created by Chris Coyier. It provides you with the standard Latin text already in HTML tags. Clicking on any of the blocks automatically copies the text to your clipboard!

Typechart
Typechart lets you flip through, preview and compare Web typography while retrieving the CSS. You can browse different typographic styles. Each style corresponds to a style ID, which allows you to annotate prototypes and retrieve the CSS while coding. Another useful feature is that you can compare Windows (ClearType) rendering with Apple font rendering.

TTFTitles WordPress Plugin
This plugin lets you use images to replace the titles of your posts, thus circumventing the problem of guessing what fonts your end-users might have installed (via hyperdjango).

Fontstruct
FontStruct is a free font-building tool that lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

abcTajpu Firefox Extension
Type in accented letters, international characters or symbols into Firefox or Thunderbird, either simply by using a context menu (there being support for many languages), or quickly by keyboard macro (you can even define your own).

PXtoEM
This tool converts pixel-units to em-units using the 16px browser default size (via @briancray and @CasJam on Twitter).

Em Calculator
Em Calculator is a small JavaScript tool that helps you make scalable and accessible CSS design. It converts sizes in pixels to relative em units, which are based on a given text size.

CSSTYPE
CSSTYPE v2 lets you preview your text as you modify it. You can set the font-family, size, color, letter-spacing, word-spacing, line-height and other properties. The CSS code can be generated easily once you are satisfied with the previews.

CSS-Typoset Matrix and code generator
This tool (unfortunately, only in German) calculates font-sizes and line-height in em and px and presents them in a matrix. The tool computes both symmetrical and asymmetricam margin. Useful!

wp-typogrify WordPress Plugin
wp-typogrify is a collection of Django template filters that help prettify your web typography by preventing ugly quotes and widows and providing CSS hooks to style some special cases. Python-script for Django is available as well.

FontBurner
After you find the font that you would like to use, Font Burner gives you a chunk of code that you will insert into the head of your webpage. Provided you don’t have any stylesheet conflicts, the new font will show up on your site immediately.

Convert TrueType Font to sIFR Flash File
Upload your typeface and the tool generates the Flash-file (swf) and sends it to your e-mail.

Text 2 PNG Conversion
This service provides you with the ability to convert you headlines and navigations to PNG images automaticlly. It works by adding a JavaScript file and selecting which tags to replace. Useful, for instance if you want to generate an image with an embedding e-mail-address.

7 Free Tools To Identify A Font
A list of free online tools to speed up the identification process.

21 Typography Web Applications You Can’t Live Without

 

3. Choosing a font

Type Tester
Type Tester is an online application that allows you to test different typefaces. You have three columns of text and can modify the typography any way you please. You then get the CSS that accompanies your selections.

STC fontBROWSER
This tools enables you to preview fonts installed on your system online.

Font Picker
This simple tool shows you all the fonts installed on your computer and helps you choose which one is most suitable for a particular project. Also available as Adobe AIR application.

FontTester
Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them.

CSS Type Set
CSS Type Set is a handy tool that lets you preview your CSS text as you modify it, and it generates the code for you immediately (@jmreedy).

Flipping Typical
This is a nice way to explore the popular typefaces you have on your computer and see which one fits the project you are working on. This is done by creating text that is displayed using various typefaces from your computer.

 

4. Typographic Techniques

12 Examples Of Paragraph Typography
A showcase of some interesting techniques for designing paragraphs, by Jon Tan. Some of these styles are experiments using pseudo elements and adjacent sibling selectors; browser support is not consistent.

Rendering Complex Type — Who’s got the Love?
Learn how to create a complex typographic sample with pure CSS.

10 Examples of Beautiful CSS Typography and How They Did It
A lot of great websites out there have beautiful typography using only CSS. But simply looking at them gives you only half the picture. This post showcases examples of good clean typography using nothing but CSS, and it explains what the designers did to achieve this beautiful type.

typeface.js
With typeface.js, you can embed custom fonts on your Web pages so that you don’t have to render text as images. What makes it different is that it’s JavaScript only, not JavaScript and Flash like sIFR, or JavaScript and PHP like FLIR. So, instead of creating images or using Flash just to show your website’s text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as though your visitors had the font installed locally. It’s pretty easy to use: load the typeface.js library and some typeface.js fonts, then proceed as normal.

Facelift Image Replacement (FLIR)
Facelift Image Replacement (FLIR) is an image replacement script that dynamically generates image representations of text on your Web page in fonts that otherwise might not be visible to your visitors. The generated image is automatically inserted into your Web page via JavaScript and is visible in all modern browsers. Any element with text can be replaced, from headers (<h1>, <h2>, etc.) to <span> elements and everything in between! FLIR is SEO-friendly and only renders an image if JavaScript is enabled on the user’s browser. If you are using WordPress for your blog, you might find this plug-in useful to easily apply FLIR to your Web pages.

P+C DTR
PHP + CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement method, allowing you to take a vanilla, standards-based (X)HTML Web page and dynamically create images to replace page headings, using only PHP and CSS. The technique is currenty unavailable for download.

Advanced Typography Techniques Using CSS
While descriptions and basic uses of CSS typography controls have been beaten to death, many rich typographic capabilities of CSS are still not well documented. This post is a great example of what you can do by combining and tweaking type using CSS. Different techniques are introduced: reflections, drop characters, handwriting, newspaper headlines and more.

Typographic Contrast and Flow
Typographic contrast is important because not every piece of content on a page has the same weight: some have greater significance than others. By creating contrast, you direct the reader’s attention to the important messages and also enhance visual appeal. Here are seven basic methods for creating typographic contrast, using size, typeface, color, case, style/decoration, weight and space.

 

5. Hyphenation

OnLine Hyphenation
This tool takes care of automatic Automatic hyphenation for texts and sites. The tool uses ­ and inserts hyphens in the right places to make the justified text look readable. The tool is a little bit buggy and not perfect, but is still useful.

Hyphenator
Hyphenator.js brings client-side hyphenation of HTML documents to every browser by inserting soft hyphens using hyphenation patterns and Frank M. Liang’s hyphenation algorithm commonly known from LaTeX and OpenOffice. The goal is to provide hyphenation in all browsers that support JavaScript and the soft hyphen for at least English, German and French. Here is the server-side script that does the hyphenation.

 

6. sIFR

sIFR 2.0: Rich Accessible Typography for the Masses
sIFR (or Scalable Inman Flash Replacement) is a technology that allows you to replace text elements on the page with Flash equivalents. It uses JavaScript to target certain text page elements and replace them with Flash, which results in the same text but rendered in a new font. This means you are free to use any font you wish in your design, instead of being limited to a very small set of “safe” Web fonts. sIFR is easier to implement than any other image replacement technique. Instead of manually generating each header with an image editor, you’re able to skip the editor completely.

sIFR lite
A solution similar to the original sIFR package, but smaller (3.7 Kb) than the original (22 Kb) and including even more nifty features. It auto-detects the color of text elements, is completely object-oriented, doesn’t use CSS selectors and targets elements by tag name and class.

sIFRvault
A repository of sIFR fonts, rated, tagged and available for download. Users can submit their SWF-files as well. Please notice that you need to respect all copyright and licensing laws – some of the featured fonts appear to be commercial (via chrisjlee).

jQuery sIFR Plugin
The jQuery sIFR Plugin is an add-on for jQuery that makes it easy to replace text on a Web page with Flash text (sIFR). The jQuery sIFR Plugin does all the work of figuring out the text, files, sizes, colors and any other configuration needed to convert text to a beautiful sIFR font, with consistent behavior across all major browsers.

Multi color sIFR 2.0.1
This version of sIFR supports strong, em and span-elements and can color parts of the headline in colors.

sIFR Generator
The big disadvantage of sIFR is that creating sIFR files is a tedious task that also requires Adobe Flash Studio in order to create a .swf file with the font of your choice. At least, that was the big disadvantage until now. sIFR Generator is an online tool that allows you to create sIFR .swf files with a few clicks of your mouse. Simply upload the TTF font of the font you want to convert, preview and download.

 

7. Grids

gridr buildrrr
This tool generates various grids on the fly and allows users to define the width of the grids, gutter as well as boxes for the layout.

The Grid System
An aggregator of articles, tools, books and resources related to grid-systems.

Typographic Grid
If your website is heavy with text content, you will need to pay attention to the underlying grid. Check out Typography Grid, created recently by Chris Coyier: “I was just screwing around with typography and getting things to line up according to a strict horizontal and vertical grid. It was inspired by the Compose to a Vertical Rhythm article by Richard Rutter a few years ago, except uses unitless line height.” Check out the demo here.

Grid Designer
Anyone looking for a little help to get going with grid design should look at this handy tool. Grid Designer 2 lets you set variables for your layout, such as the number of columns, the width in pixels, gutters and margins. You can also set variables for the typography, so that you can control the size, weight, line height and other variables for your paragraphs and titles. After you set up your desired layout, all you have to do is export the CSS to use in your own design.

Vertical rhythm calculator
This AIR application allows Web developers who use XHTML and CSS to build their pages to understand and calculate values for vertical rhythm. Enter your starting values in the application, and then you have the option of copying the resulting CSS code onto you clipboard for pasting into your existing style sheet.

 

8. Free and Commercial Fonts

40+ Excellent Freefonts For Professional Design
An overview of over 40 excellent free fonts you might use for your professional designs in 2009.

60 Brilliant Typefaces For Corporate Design
Over 60 first-class commercial typefaces for corporate design.

80 Beautiful Typefaces For Professional Design
Over 80 gorgeous typefaces for professional design, based upon suggestions from designers and web-developers all over the world.

Fontsquirrel
A growing collection of free high-quality fonts. More high-quality free fonts.

Top 10 (Commercial) Fonts Of 2008
This article lists this year’s most successful fonts on MyFont – in each genre. Based on sales numbers.

Clean font showcase
An extensive collection of clean, legible free fonts.

Veerle Pieters’ 10 favourite typefaces

 

9. A Guide to Web Typography

Good typefaces are designed for a purpose. Below, you will find very informative articles and guidelines, created by masters of typography to show us the overall effect that good type has on a project.

On Choosing Type
A good article from I Love Typography on choosing the right typeface. The article explains everything from choosing between serif and sans-serif fonts to remembering to honor and read the content. It’s a great post for improving your typography skills.

The 100% Easy-2-Read Standard
Best practices for good typography on the Web from Oliver Reichenstein.

Don’t be afraid of Serif Fonts
David Rodriguez discusses the advantages and disadvantages of sans-serif and serif fonts and suggests best practices.

Elegant Web Typography
A great presentation by Jeff Croft about Web typography.

10 Common Typography Mistakes
The goal of this post is to help designers and clients understand the importance of good typography skills and avoid some common mistakes.

The Non-Typographer’s Guide to Practical Typeface Selection
Check out Cameron Moll’s magic formula for picking the right typeface for your needs.

• Make a list of those familiar typefaces that you trust and know will work well in a variety of projects.
• Supplement that list with a list of unfamiliar typefaces that address specific objectives for the project at hand.
• Test each typeface in small and large sizes.
• Test in both caps and lowercase.

The Principles of Beautiful Typography
This is a great article that is actually extracted from the SitePoint book The Principles of Beautiful Web Design. The article goes into detail on fonts, letter forms, spacing, text size and more. It’s a great and informative read.

Five Simple Steps to Better Typography
A series of articles by Mark Boulton that is highly worthwhile to read.

101 Typography Resources for Web Designers
A great list of typography-related resources from our author, Steven Snell.

10. Examples of Great Web Typography

Some of the designs shown below demonstrate that sometimes less really is more. Others made it onto the list because they use text very well and demonstrate how the grid can be used to do wonders for the whole design.

Jon Tangerine

Viget Inspire

works4sure

24ways

Alex Buga

Wilson Miner

Colour Pixel

Maxvoltar

Mark Dearman

Blogger Bake Off

Fixie Consulting

Drupalcon

Guilherme Neumann

Sursly

 

17 Stimulating Flickr Groups to Get You Typographically Inspired
This is a list of some of the best typography Flickr groups to feed your creative appetite.

20 Websites With Beautiful Typography
In this collection, you’ll find a variety of websites that showcase creative and functional uses of typography.

About the author

Noura Yehia is a Web designer and blogger who can be found at Noupe and Devsnippets. If you want to connect with the author, you can follow her on Twitter.

(al)

By Sergej Müller and Alex Frison

The administration area of a Web application is a favorite target of hackers and thus particularly well protected. The same goes for WordPress: when creating a blog, the system creates an administrative user with a perfectly secure password and blocks public access to the settings area with a log-in page. This is the cornerstone of its protection. Let’s dig deeper!

This article focuses on defending the administration area of WordPress, meaning all those pages in the wp-admin folder (or http://www.yourblog.com/wp-admin/) that are displayed after a user a verified. We highlighted the phrase “after a user is verified” deliberately: it should be explicitly understood that only a simple query stands in the way of an evil hacker and the powerful admin area of your whole blog. The latter is only as strong as the passwords that are generated.

Protect the administration area of your WordPress blog.

To make an attack more difficult, you should perform the following actions manually. These solutions do not guarantee 100% security, but you can create effective stumbling blocks on a hacker’s way to the administration area.

1. Rename and Upload the wordpress Folder

Since version 2.6, it has been possible to change the path of the wp-content directory. Unfortunately, this is still not possible for the wp-admin directory. Security-minded bloggers will just have to accept this fact and hope that this protection of their blog will be made possible in future versions. Until then, the following recipe is a comparable alternative. Upon extracting the zipped WordPress files, you’ll see a folder named wordpress. This folder should be renamed (ideally to something cryptic), and, after also adjusting the wp-config.php file, uploaded to the root directory of the domain.

What does this change accomplish?

• First, the files will no longer be loose in the main directory, thus increasing the clarity of the root level. Other files and folders will be found quicker.
• Secondly, many WordPress instances can now be created and can be put parallel to each other without interfering with other system files and settings, making it perfect for testing and development.
• The third advantage actually speaks to security: the admin area (and the blog itself) is no longer in the root domain and must first be found by robots. It won’t be easy to find the path of this relocated log-in page, at least for a human. Until then, this change will protect your blog.

Several WP installations in the root directory are possible

The blog address should be beautiful and unobtrusive

Note: If the system files of a WordPress blog are no longer in the main directory, and the name of the installation’s main folder has been changed (as recommended above), the blog can still be accessed from http://example.com. How? In the WordPress address (URL) field under the general settings, include the path of the renamed folder. For example, if the unzipped wordpress folder is renamed to wordpress_live_Ts6K, enter the path as http://example.com/wordpress_live_Ts6K.

Your blog address will remain beautiful and not distracting.

2. Extend the file wp-config.php

The WordPress configuration file wp-config.php contains settings and access data for the database. But security-related values can also be found in the file. The following definitions must be in the wp-config.php file (but may not be) and should be added or modified:

• Security keys: Since WordPress 2.7, WordPress has had four kinds of security keys, which must be set up properly. WordPress saves you from having to come up the strings yourself by generating the lines of security keys automatically. You just have to implement these security keys in your configuration file. These keys are essential to the safety of your installed blog.
• The table prefix of a newly created WordPress installation should not be the standard wp_. The more cryptic the word, the less likely an intrusion into the MySQL database tables will occur. Bad: $table_prefix = ‘wp_’;. Much better: $table_prefix = ‘wp4FZ52Y_’;. This value is assigned only once and you don’t have to remember it because it has an internal function.
• If the server has SSL encryption available, it is recommended to encrypt the administration area. This can be done by adding the following command to the wp-config.php file: define(’FORCE_SSL_ADMIN’, true);
• In addition, you can adjust other system settings in the configuration file. A clear and comprehensive list of settings for greater safety and performance can be found in the WordPress Codex.

Not to be neglected: unique authentication keys.

3. Move the wp-config.php file

Also since version 2.6, WordPress allows you to move the wp-config.php file to a higher level. Because this system file contains by far more sensitive information than any other, and because it is difficult to access the parent file server level, it certainly makes sense to store it outside of the actual installation. WordPress automatically looks at the highest underlying index for the configuration settings file. Any attempt by users to adjust the path is thus useless.

4. Protect the wp-config.php file

Not all ISPs, though, allow you to transfer data to a higher level than the main directory. Administrators cannot always execute the previous step if they do not have this privilege. In this case, external access to the wp-config.php file can be excluded via the .htaccess file. Here is the relevant code:

# protect wpconfig.php
<files wp-config.php>
Order deny,allow
deny from all
</files>

It is important to make sure that the .htaccess file, with this built-in protection, shares the same directory as the wp-config.php file. Incidentally, this technique would also be useful if you use multiple WordPress installations but are not allowed to relocate the relevant configuration files.

5. Delete the admin User Account

When WordPress is installed, an administrator acount with the username admin is automatically created, without any options set. This is a well-intended gesture by WordPress, but a default user with administrative rights and an assigned ID of #1 is an easy target for hackers. In an attack, only the password of this user would have to be broken. Hence our advice:

1. Create another administrator in the admin area.
2. Log out of the back end.
3. Log in as the new user.
4. Delete the old admin from the user list.

A second user gives greater security: that name will be displayed in all future published articles and commentaries, and the name of the actual administrator will never be displayed on blog pages and therefore never communicated to the outside world.

Before deleting a user, you can attribute all posts and links to another author.

6. Choose strong passwords

The probability and frequency of attack increases in proportion to the popularity of the blog. And when the back end of a WordPress blog is skillfully attacked, you have to be sure there are no weak links in the chain of security.

More often than not, passwords are the weakest link in this chain. The reason? The way that passwords are usually handled or chosen is too reckless. Numerous studies show that miserably vast numbers of passwords contain too few characters and are too easily guessed.

WordPress responded to this problem with an intuitive indicator, based on a traffic-light visual, that displays the strength of a user’s desired password. Inexplicably, though, this tool is only available for existing profiles (found under Settings > Users > Your profile). If the administrator creates new users, then password strength is not communicated visually.

Our recommendation for a secure WordPress password is that it be at least seven characters long and include uppercase and lowercase characters, numbers and symbols such as ! ” ? $ % ^ & ).

The strength of a password is communicated in colors in WordPress.

7. Protect the wp-admin Directory

Adhering to the motto “Two are better than one,” the administration area is equipped with additional password protection. The query (in WordPress otherwise responsible for Permalinks) is handled by .htaccess, which is stored in the wp-admin folder along with .htpasswd. After making this change, the browser will ask for the data stored in .htaccess. This can be different for each blog author or the same for everyone.

Note: the Htaccess and Htpasswd generator helps to create the necessary files with desired values.

Use a server-side password as an additional safeguard.

8. Suppress Error Feedback on the Log-In Page

The log-in page of a WordPress installation is the door to the administration area. The administration area is only accessible upon error-free verification. Until successfully logging in, visitors — whether good or bad — have countless attempts to enter the correct data in the log-in fields. In case of a failed attempt, WordPress communicates to the user what the problem might be.

When troubleshooting, WordPress is really fussy and provides a unique, meaningful message for each error. So if a user name is typed incorrectly, that will be communicated. If the password is wrong, that will be also communicated. This is a comfort for the user and a blessing for the thief. Unintentionally, WordPress provides valuable feedback to the bad boys who are trying to access your data. It’s just a matter of time until they gain access to the back end.

A simple one-liner solves this problem cleverly: The output of the error on the log-in page is simply blocked to looters. This code goes in the functions.php file of your theme:

add_filter('login_errors',create_function('$a', "return null;"));

An output of the error on the left. After the change, on the right.

9. Restrict Erroneous Log-In Attempts

WordPress keeps no record of failed attempts to log in, much to the detriment of the blog administrator, who doesn’t see the insidious attack coming and so can’t gather the tools to combat the threat. Is there a way out of this dilemma?

Two solutions exist: Login LockDown and Limit Login Attempts. Upon being installed, they record all log-in attempts. Furthermore, both extensions can lock out visitors for a specified time after a certain number of failed attempts. Thus, robots and hackers are limited in the scale of their attack.

The extensions are free and compatible with WordPress 2.7.

Values can be easily adjusted in the settings.

10. Keep Software Up to Date

Finally, the following should be stated: WordPress developers are very fast and react immediately to vulnerabilities in WordPress. Keep your installations up to date. Since version 2.7, available updates are just a click away. The same goes for plug-ins!

And remember: less is more. As an administrator, you should ensure that only the extensions that are necessary are active in your installation. Every plug-in is a potential risk and should be inactive or, better yet, removed if it is not needed.

WordPress automatically notifies you if a newer version of an extension is available.

And You?

How do you protect your admin area? What techniques do you use?

About the Authors

Sergej Müller and Alex Frison develop the wpSEO plugin for WordPress. Sergej also develops the Antispam Bee plugin. Alex is co-founder of http://wpengineer.com, a blog with WordPress related articles, tutorials and hacks.

(al)

For website owners who are evaluating e-commerce solutions, there are several good options for powering websites and shopping carts. Regardless of which option you chose, deciding on a design brings with it even more decisions to make. Of course, a custom design is always an option, but for those who want to keep costs down, templates are a popular choice. Premium e-commerce themes are easy to find, but they can be expensive. Free e-commerce templates are difficult to find, and quality free templates are even harder to find.

We’ve done the research for you, and in this post we present 35 of the highest-quality free e-commerce templates available. There are templates specifically for WordPress, Prestashop, osCommerce, Magento, Zen Cart, CubeCart, and CRE Loaded, as well as a number of general e-commerce templates. Please notice that these templates aren’t intended to be used 1:1, but should rather be used as a skeleton for your own shop and hence saves a lot of work, because otherwise you would have to start from scratch.

1. WordPress Templates

Crafty WordPress Theme | Demo | Download

WordPress e-Commerce Plugin | Download

 

2. Prestashop

CleanBlue

et-black

PrestaThemes
A collection of free high-quality templates for PrestaShop.

 

3. osCommerce Templates

Footwear | Download

Appliance | Download

Cosmetics Store | Download

Computer Store | Download

 

4. Magento Templates

Modern Theme | Download from Magento

Blue Skin | Download from Magento

Telescope Theme | Download from Magento

Pet Store Theme | Download from Magento

Free Magento Theme from Template Monster | Download

Electronics Store 3 | Download from eCommerce-Themes

 

5. Zen Cart Templates

Free Zen Cart Template | Download

Acadame | Download from ichoze.net

Clothes Online | Download

 

6. CubeCart Templates

LiteFree

Clean Blue
A collection of free CubeCart 3 Skins. More free Cubecart skins.

 

7. CRE Loaded Templates

Electronics Store | Download

Clothes Store | Download

 

8. General E-Commerce Templates

The following templates were created for the purpose e-commerce but not built for a specific system. If you plan to use one of them, it would need to be adapted to and integrated in the e-commerce solution of your choice. Templates with valid HTML code are marked.

Tool Shop | Download (valid HTML)

Pet Shop | Download (valid HTML)

Auto Parts | Download (valid HTML)

Clothes Collection | Download

Gadgets Template | Download (valid HTML)

Online Movie Store | Download (valid HTML)

Books Online | Download (valid HTML)

Beauty Company | Download (valid HTML)

Clothes Store | Download

Hardware Store | Download

Online Store | Download

Computer Store | Download

Mobile Phone Shop | Download

Hi-Fi Technics Store | Download

Electronics Store | Download

For more templates and related content:

• 100 Free High-Quality CSS/XHTML Templates
• Free Design Templates
• Free CSS Layouts and Templates

About the Author:

Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag. (al)

Desktop wallpapers can serve as an excellent source of inspiration. However, if you use some specific wallpaper for a long period of time, it becomes harder to draw inspiration out of it. That’s why we have decided to supply you with smashing wallpapers over 12 months.
And to make them …