05 · 04

50 Useful Design Tools For Beautiful Web Typography

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 Rss in 50 Useful Design Tools For Beautiful Web Typography

and follow us on Twitter Twitter in 50 Useful Design Tools For Beautiful Web Typography

.

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

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]

1. Useful typographic references

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

Type-24 in 50 Useful Design Tools For Beautiful Web Typography

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

Type-44 in 50 Useful Design Tools For Beautiful Web Typography

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

Type-03 in 50 Useful Design Tools For Beautiful Web Typography

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”.

Type-25 in 50 Useful Design Tools For Beautiful Web Typography

Default Mac OS X 10.4 fonts list (via Elementiks)

Type-27 in 50 Useful Design Tools For Beautiful Web Typography

Default Windows fonts list (via Elementiks)

Type-28 in 50 Useful Design Tools For Beautiful Web Typography

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!

Type-07 in 50 Useful Design Tools For Beautiful Web Typography

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.

Tc in 50 Useful Design Tools For Beautiful Web Typography

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).

Type-08 in 50 Useful Design Tools For Beautiful Web Typography

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.

Type-18 in 50 Useful Design Tools For Beautiful Web Typography

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).

Type-33 in 50 Useful Design Tools For Beautiful Web Typography

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

Type-04 in 50 Useful Design Tools For Beautiful Web Typography

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.

Emc in 50 Useful Design Tools For Beautiful Web Typography

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.

Type-35 in 50 Useful Design Tools For Beautiful Web Typography

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!

Type-29 in 50 Useful Design Tools For Beautiful Web Typography

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.

Type-09 in 50 Useful Design Tools For Beautiful Web Typography

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.

Type-16 in 50 Useful Design Tools For Beautiful Web Typography

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.

Type-05 in 50 Useful Design Tools For Beautiful Web Typography

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

Type-34 in 50 Useful Design Tools For Beautiful Web Typography

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.

Type-02 in 50 Useful Design Tools For Beautiful Web Typography

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).

Typographictools9 in 50 Useful Design Tools For Beautiful Web Typography

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.

Typographictools14 in 50 Useful Design Tools For Beautiful Web Typography

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.

Type-22 in 50 Useful Design Tools For Beautiful Web Typography

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

Type-21 in 50 Useful Design Tools For Beautiful Web Typography

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.

Typographictools13 in 50 Useful Design Tools For Beautiful Web Typography

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.

Typographictools2 in 50 Useful Design Tools For Beautiful Web Typography

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.

Typographictools11 in 50 Useful Design Tools For Beautiful Web Typography

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.

Type-37 in 50 Useful Design Tools For Beautiful Web Typography

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.

Typographictools16 in 50 Useful Design Tools For Beautiful Web Typography

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.

Typographictools4 in 50 Useful Design Tools For Beautiful Web Typography

5. Hyphenation

OnLine Hyphenation
This tool takes care of automatic Automatic hyphenation for texts and sites. The tool uses &shy; 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.

Typographictools20 in 50 Useful Design Tools For Beautiful Web Typography

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).

Type-15 in 50 Useful Design Tools For Beautiful Web Typography

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.

Type-17 in 50 Useful Design Tools For Beautiful Web Typography

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.

Type-20 in 50 Useful Design Tools For Beautiful Web Typography

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.

Type-31 in 50 Useful Design Tools For Beautiful Web Typography

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

Type-23 in 50 Useful Design Tools For Beautiful Web Typography

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.

Typographictools3 in 50 Useful Design Tools For Beautiful Web Typography

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.

Type-36 in 50 Useful Design Tools For Beautiful Web Typography

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.

Type-19 in 50 Useful Design Tools For Beautiful Web Typography

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.

Type-40 in 50 Useful Design Tools For Beautiful Web Typography

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

Type-39 in 50 Useful Design Tools For Beautiful Web Typography

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.

Type-38 in 50 Useful Design Tools For Beautiful Web Typography

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

Type-26 in 50 Useful Design Tools For Beautiful Web Typography

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

Type-30 in 50 Useful Design Tools For Beautiful Web Typography

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

Type-32 in 50 Useful Design Tools For Beautiful Web Typography

Veerle Pieters’ 10 favourite typefaces

Type-70 in 50 Useful Design Tools For Beautiful Web Typography

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.

Typographictools12 in 50 Useful Design Tools For Beautiful Web Typography

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

Image7 in 50 Useful Design Tools For Beautiful Web Typography

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.

Typographictools19 in 50 Useful Design Tools For Beautiful 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

Typographictools24 in 50 Useful Design Tools For Beautiful Web Typography

Viget Inspire

Typographictools25 in 50 Useful Design Tools For Beautiful Web Typography

works4sure

Typographictools26 in 50 Useful Design Tools For Beautiful Web Typography

24ways

Typographictools27 in 50 Useful Design Tools For Beautiful Web Typography

Alex Buga

Typographictools28 in 50 Useful Design Tools For Beautiful Web Typography

Wilson Miner

Typographictools29 in 50 Useful Design Tools For Beautiful Web Typography

Colour Pixel

Typographictools30 in 50 Useful Design Tools For Beautiful Web Typography

Maxvoltar

Typographictools31 in 50 Useful Design Tools For Beautiful Web Typography

Mark Dearman

Typographictools32 in 50 Useful Design Tools For Beautiful Web Typography

Blogger Bake Off

Typographictools33 in 50 Useful Design Tools For Beautiful Web Typography

Fixie Consulting

Typographictools34 in 50 Useful Design Tools For Beautiful Web Typography

Drupalcon

Typographictools35 in 50 Useful Design Tools For Beautiful Web Typography

Guilherme Neumann

Typographictools37 in 50 Useful Design Tools For Beautiful Web Typography

Sursly

Typographictools36 in 50 Useful Design Tools For Beautiful Web Typography

Zo in 50 Useful Design Tools For Beautiful Web Typography

Type1 in 50 Useful Design Tools For Beautiful Web Typography

Red in 50 Useful Design Tools For Beautiful Web Typography

Logbook in 50 Useful Design Tools For Beautiful Web Typography

Vine in 50 Useful Design Tools For Beautiful Web Typography

Type3 in 50 Useful Design Tools For Beautiful Web Typography

Type7 in 50 Useful Design Tools For Beautiful Web Typography

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.

Typographictools6 in 50 Useful Design Tools For Beautiful Web Typography

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

Typographictools7 in 50 Useful Design Tools For Beautiful Web Typography

05 · 03

Joomla And WordPress: A Matter Of Mental Models

Open-source content management systems (CMS) are a large family of Web applications, but if we’re looking for stability, performance and average technical requirements, we’ll come up with a handful of options. In the past, choosing the “right” CMS was a matter of the project’s requirements, but now this is not completely valid because the paradigm of extensibility had driven the development of major CMS’ towards a model of core features that are extensible with plug-ins that fill virtually any requirement.

Picking the right CMS is then a matter of “mental models”: choosing the one that best fits our vision of how a Web application should work and what it should provide to users and administrators. In this article, we’ll explore the main difference in the mental models: of WordPress and Joomla for theming and extending their core.

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]

Background Thoughts

Joomla Wp Logos in Joomla And WordPress: A Matter Of Mental Models

WordPress and Joomla are two of the most popular open-source CMS’ around. They offer large and active developer communities and excellent documentation.

WordPress is the first choice among the designer community mostly because of its well-designed back end and wide availability of excellent themes.

Joomla, meanwhile, suffers from Mambo’s legacy, which was notorious for low performance and semantically incorrect output (such as nested tables for layout). But since the release of version 1.5, Joomla has a completely rewritten core, with improved extensibility and better HTML output.

One difference between WordPress and Joomla is their theming model. A website developer migrating from Joomla to WordPress might feel that the latter requires too much theme coding, while a developer moving the other way might feel that Joomla is less flexible and customizable. The reason for this is the different models on which the themes of these CMS’ are based.

WordPress’ Theming Model

Wp Theme in Joomla And WordPress: A Matter Of Mental Models

WordPress’ theming model is based on a per-view structure. This means that in each theme, you could have individual view files for the post list, the single post and the archive pages. These files are independent of each other, allowing the developer to customize each view but requiring them to duplicate many parts of the code. The only common parts in a theme are the header and footer, which can be coded directly in the individual view anyway.

The main drawback of this model is that different views will not always require a different presentation (for example, the archive, category list and tag list are just lists). To overcome this problem, a theme is organized in a hierarchical structure, in which more generic views are used as fallbacks for specific ones. The common fallback for a WordPress theme is the index.php file, which is actually the only required file (along with a style sheet) in a theme. A complete reference and visual diagram of the hierarchical structure of a WordPress theme are available here.

The Loop and Template Tags

To better understand how a WordPress theme works, we need to look more closely at the “loop” and template tags.

All data for a post or a list of posts is extracted through a loop. A loop is basically a while construct that begins with this declaration:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 

// post output here 

<?php endif; endwhile; ?>

The most important part of this code is the_post(), which initializes a global $post PHP object containing all of the page data. The loop construct is also required for single post view, because all functions for presentation of data rely on the presence of the $post object. These functions are called template tags, and their main purpose is to output formatted data. Usually, they do not output HTML tags so that they can be used in different scenarios.

A complete guide to theme development is available here.

Joomla’s Content-Based Model

Joomla Theme in Joomla And WordPress: A Matter Of Mental Models

Joomla has a completely different theming approach. Joomla’s templates are built on a common structure defined in an index.php file.

This file contains both static content (i.e. content that is common throughout the website) and template tags, which serve as content place-holders and are replaced by HTML output during the page-rendering phase.

A common form for a template tag is:

<jdoc:include type="modules" name="right" style="xhtml" />

Template tags differ in the type of content they provide: component, message, module, head.

This structural backbone implies that each view in the CMS outputs not a complete page but just what’s needed to present content. At first glance, a developer used to the theming model of WordPress might think that there’s no way to customize this content block. In fact, Joomla relies on the MVC architectural pattern, meaning that data extraction and presentation are separated, the latter being rendered by the view part of the application.

Template Customization

To customize the default view, Joomla has a pattern called template override, through which the system scans the template folder for a custom view file to use in place of the default one. The image below shows the folder structure and naming convention of a default view and its override.

Joomla Overrides in Joomla And WordPress: A Matter Of Mental Models
An example of the folder and file structure of a Joomla template override (from the “ja_purity” template).

Joomla overrides are an excellent way to customize a website template without hacks. Still, they are often overlooked, and Joomla’s support of legacy extensions make this pattern unusable, even for popular packages such as Virtuemart (which uses its built-in template system).

A complete reference for Joomla’s template system is available here.

Beyond Core

Puzzle Modules in Joomla And WordPress: A Matter Of Mental Models
(Image by jared)

In the last few years, plug-ins have made a big difference in the software industry, one of the most notable examples being Mozilla Firefox.

As we noted, modern CMS’ are developed to be extensible, allowing us to use the core as a backbone and build specialized parts on top of it. This resulting modular design is an effective development model for many reasons:

  • Better maintainability
    Developers don’t need to modify the core in order to add or customize functionality.
  • Lightweight and safer
    Only features that are needed are included, resulting in less memory consumption, a smaller code base and fewer vulnerabilities.
  • Separate development cycles for core and features
    By offering an extensions API, third-party developers can add new features while the core team focuses on the reliability and performance of the system.

With open-source projects, this last point is both a blessing and a curse. It benefits from shared development effort but leads to unverified work and a less organized workflow.

Joomla and WordPress have tried to overcome this curse by providing coding guidelines. Still, little effort is spent documenting the back-end and front-end UI design.

Aside from their different naming conventions, the extensions models of WordPress and Joomla differ in how third-party code interacts with the core by mean of the extensions API.

The key point to understand is that while Joomla is based on MVC pattern, WordPress relies on an event-like system to which extensions can be hooked. Let’s look at some details.

WordPress’ Hook Method

WordPress’ extensions model is based on the execution of a set of functions attached to the system flow by mean of “hooks.”

Hooks contain a list of functions that are triggered at various points as WordPress is running. They manipulate (in the case of filter hooks) and output (in the case of action hooks) database data and can be accessed from within the theme itself and from a specialized plug-in package.

WordPress lacks comprehensive documentation for hooks, but a list of hooks is available here.

To understand the mental model behind WordPress’ hook system, we can compare it to the sequence of actions in baking a cake. In the beginning, we have an idea of what kind of cake we want to bake, so we get our ingredients. We cannot just throw everything together and bake it. So, we execute an ordered list of actions, such as “filtering” egg shells and mixing the eggs in with flour and sugar. As we’re doing that, we might want to customize the recipe. So, we “plug in” some chocolate and perhaps reduce the quantity of another ingredient by half. The result is a proper cake, created from discrete ingredients and a touch of creativity.

WordPress bakes its pages the same way.

Sidebars and Widgets

While plug-ins are broadly related to hooks, a widget is a special type of plug-in. It provides a means of showing information in a theme’s sidebar. The main advantage of widgets is that they are configurable in the back-end interface, allowing quick customization even for novice users.

Wp Widgets in Joomla And WordPress: A Matter Of Mental Models
All available widgets are listed in an administration panel.

In terms of theme development, the sidebar is similar in its mental model to Joomla’s template tags. It is a placeholder for something. The misleading bit is that a sidebar doesn’t have to be placed in the actual sidebar of a layout. It could go in the footer, navigation, header or elsewhere.

To learn more about the new API for widget development, have a look at the official documentation.

Adding Functionality

Until now, the problem with WordPress’ extension API was that it gave you no simple way to add complex functionality, such as e-commerce carts and event listings. Most developers excused this shortcoming by pointing out that WordPress is a blog engine. This will hopefully be resolved with the release of WordPress 3.0 and its system for “post types,” which makes it possible to use the “post” and “page” interfaces for different types of content.

As for other popular CMS’ (such as Drupal), post types function as a kind of “Content Construction Kit,” giving you the ability to smartly add, manage and present specialized content. If you’re interested in trying this new feature, here is a good tutorial.

Other than post types (and until major plug-ins update support for this feature), the only feasible way to add complex functionality is to use already existing pages as containers, placing in the body a place-holder (called a “shortcode“) that is replaced with HTML output by specific filter hooks.

This approach is used by plug-ins such as Buddypress and WP e-Commerce, which extend the blog engine with social network and shopping-cart capabilities.

Another great example of shortcode implementation is Contact Form 7, a fully featured contact-form management plug-in.

Extending Joomla

An often overlooked aspect of Joomla is that it is built on the solid MVC framework. So, extending its core is really much like working with products such as Zend Framework and CodeIgniter, which give you an already designed back-end interface upon which to integrate your own extensions. This approach also gives designers the ability to use template overrides, even for third-party extensions.

Mvc Diagram in Joomla And WordPress: A Matter Of Mental Models
A diagram depicting Joomla’s Model View Controller system flow.

To better understand MVC and how it works in Joomla, here is a complete reference.

Joomla’s Extension Types

Joomla’s extension model comes in three flavors, each with different tasks: components, modules and plug-ins.

Components extend the core by adding specific functionality, such as e-commerce carts, event listings and forums. From the user’s point of view, we can think of components as discrete sections of a website, not connected to other content. A popular example is JEvents, an events calendar.

In the theme system, a component’s output replaces the component placeholder in the template’s index.php file:

<jdoc:include type="component" />

Modules are like widgets in WordPress: they show a component’s information, which is extracted from the database. They are “attachable” to module positions and can be put on every page of a website.

Modules are primarily intended to be teaser blocks, but they can incorporate full text and image galleries, which makes them handy for static parts of a layout, such as footer notes. They are also useful for showing related content on a page. For example, you could highlight interesting products for Web developers as they’re browsing a list of barcamp events.

The template tag, which serves as module place-holder, looks like this:

<jdoc:include type="modules" name="right" style="xhtml" />

Plug-ins work similar to WordPress’ hook system, because they bind to specific system events to format, manipulate and replace HTML output. Possible fields of action range from content for articles (such as video embedding tools—AllVideos is a popular one) to HTML filtering and user-profile extension. Commonly used Joomla plug-ins include URL rewriting filters, which come bundled with administrative components such as Sh404SEF.

Compatibility Issues

One thing every developer should be aware of is that, despite efforts to provide a great extension API, Joomla 1.5 still suffers in its support of legacy extensions (built for v1.0), which do not have an MVC structure and which are sometimes hardly customizable. Furthermore, they break the API mental model.

The Joomla extensions library has a clear mark for 1.0 or 1.5 native extensions. But faking 1.5 native compatibility is easy, which would leave developers with nothing but legacy code. This method is followed even by big well-known projects like Virtuemart.

Hopefully, once Joomla 1.6 is released and legacy support is dropped, every developer will rework their code to fit the CMS’ specifications.

What’s Next

While the best way to choose a CMS is by trying it out on a real project, understanding its underlying mental model can make developers feel less lost in code and more aware of the design patterns they need to follow.

If you want to develop themes and extensions for Joomla and WordPress, here are some resources.

WordPress:

Joomla:

05 · 03

_not my type

These would be awesome!!

Media_httpwwwnotmytyp_ytigh

05 · 03

25+ Free Vector World Maps (.ai, .eps and .svg formats)

If you are in search of a high quality vector World map, then your search is now over.
Most of the vector maps below are of the highest detail and accuracy, some have been designed specifically for designers and others to be used by everyone for whatever the project.
They are all in either .ai (Illustrator) format, .eps format or .svg formats.

Accurate Vector World Map (.eps and .ai, formats)

Accurate Vector World Map

EPS Vector Maps for Designers (.eps format)

EPS Vector Maps for Designers (.eps format)

World Map Illustrator File (.ai format)

World Map Illustrator File (.ai format)

Vectorial World Map (.ai format)

Vectorial World Map (.ai format)

Vector World Map (.eps format)

Free Vector World Map (.eps format)

Vector Tech Map (.eps format)

Vector Tech Map (.eps format)

Vector World Map (.eps format)

Vector World Map (.eps format)

World Map in Vector (.eps format)

World Map in Vector (.eps format)

Dotted World Map (.ai format)

Dotted World Map (.ai format)

MacDaddy World Map (.ai format)

MacDaddy World Map (.ai format)

Europe Vector Map (.ai format)

Europe Vector Map (.ai format)

World Map Vector Illustration (.eps format)

World Map Vector Illustration (.eps format)

Detailed World Map (.ai format)

Detailed World Map (.ai format)

Wikipedia Blank Maps: World (.svg format)

Wikipedia Blank Maps: World (.svg format)

Wikipedia Blank Maps: Equirectangular Projection  (.svg format)

Wikipedia Blank Maps: World98 (.svg format)

Wikipedia Blank Maps: Low Res World Map (.svg format)

Digital Vector World Maps(.ai format)

Digital Vector World Map (.ai format)


Digital Vector World Map (Rectangular)

Blank Maps of the World from freemap.jp (.eps formats)

Blank map of the Colorful World map

Blank map of the World map

Blank map of the World map

Blank map of the World map

Blank map of the World map Pacific Ocean centerd

Blank map of the World map "Pacific Ocean centerd"

Blank map of the World map "Pacific Ocean centerd"

Blank map of the World map "Tokyo/Japan centered"

Photoshop Shapes: World Map

Photoshop Shapes: World Map

You might also like…

A Round-Up of 50 Fresh Photoshop Tutorials and Techniques »
40 Detailed and High Quality Mobile Phone .psd Source Files »
50 High Quality Free Icon Sets in PSD Format »
The Best 40 Photoshop Text Effects from 2009 »
49 Most Creative Photoshop Tutorials of 2009 »
30 Artistic and Creative Photoshop Poster Tutorials »
40 Amazing Photoshop Brush Directories and Collections »
50 Imaginative Fantasy Art Tutorials for Photoshop »
25 Cool Digital Photography Tutorials, Techniques and Effects »
30 Useful Photoshop Buttons and Badges Tutorials »
25 Photoshop Tutorials for Creating that Perfect Web Page Design »

05 · 03

Apple Could Face Antitrust Inquiry Over Flash Ban [REPORT]

Kyle Reddoch

I am an aspiring Web Developer, Android Fanatic, Family Man, and all around Web Geek! I also do Freelance Development work.

About

My Journey through the Interwebs!