Drupal is a popular open source content management system. With its powerful and advanced features, you can build complex websites with ease, compared to building them from scratch. With the support of a huge community and a big number of available modules, no wonder Drupal is a system you keep hearing about over and over again.

In this guide, we are going to discover Drupal using a pragmatic approach. We will create a Drupal site with a custom content type and views.

Ready? Let’s dive right into this immensely powerful content management system.

Objectives

By the end of this guide, you will:

• Learn the benefits and disadvantages of using Drupal
• Install Drupal
• Understand the Drupal back-end
• Learn about Drupal modules
• Explore the Administer page
• Create and publish content
• Create custom content types with the Content Construction Kit
• Create Views
• Create Page view displays
• Create Block view displays
• Learn about Drupal themes

What We Will Create

We will set up and develop a basic Drupal website with a job board that visitors can post job openings and projects to. The intention here is to get you started using Drupal by actually creating a Drupal site instead of just reading about it.

Why Use Drupal?

It is worth a few moments to discuss the benefits (as well as disadvantages) of using Drupal so that you can determine if it’s the right CMS for you.

Pros of Using Drupal

Open source: Yes, Drupal is open source. This means you get all the benefits of using an open platform.

Highly customizable: The main power of Drupal lies in its flexible nature. You can mould it into any type of content-centered/user-generated site: from a social media site that allows users to submit and vote on content, a forum, a job board, to an image gallery or a service for deploying portfolio sites for designers — Drupal can get it done (with a little bit of work on your behalf, of course).

Big and intelligent community: Drupal has one of the biggest and brightest open source community of supporters, users, and developers. This means great modules, quick bug fixes and core updates, great support, and a never-ending supply of amazing documentation and tutorials on the Web.

Modules: There is a huge amount of modules that extend the capability of Drupal. (We will talk about what modules are a little bit later.)

Developer-friendly: As a web developer, you will never feel any limitations while using Drupal. Drupal has been built keeping the needs of developers in mind. Some faults of a few mainstream CMSes is that there is a disproportionate focus on the end-user’s interface, and with that, means neglecting or focusing very little on the needs of the people who actually develop and deploy the CMS; this isn’t so with Drupal.

Built-in caching system: Drupal has built-in support for caching your web pages, which helps reduce the load on your web server, as well as speed up page response times. This feature eliminates some resource-intensive database queries, aiding your server in performing better.

Decent built-in search capabilities: Drupal, when compared to many CMSes out there, has a pretty good search feature baked right into its core. It still would not beat a third-party search API like Google Search or Yahoo! Search BOSS, but it’s still decent enough to use in production.

Cons of Using Drupal

Big learning curve: Yes, it’s a fact that Drupal is a bit harder to grok than other content management systems out there. I will not suggest you use Drupal if you want a website done in a week the first time you use it. It may take you some months to really understand Drupal, and as much as a month to be able to deploy a fully custom site the first time around. However, I should also note that you can deploy a basic site in less than a day’s worth of work (and that’s what we will be doing in this guide).

Complex for non-developers: Since developers’ needs are prioritized with Drupal, for those that aren’t very familiar with computing technologies, Drupal might take a while to get used to. This means that professionals that only dabble in web development might not find it easy to develop (or even administer) Drupal sites.

Complex user interface: Drupal’s admin interface is a bit difficult to understand; it’s not as user-friendly as it should be. (That’s going to change soon, though.)

Drupal Versus WordPress

Whenever you talk about Drupal, there is always the inevitable desire to compare it to another leading open source publishing platforms; and that is usually WordPress.

And whenever you suggest that WordPress is not a fully featured CMS and that it is just a blogging platform will always generate a heated debate. I am myself a WordPress developer, but it’s a fact that sometimes WordPress is just not enough.

Rather than spending time in customizing WordPress, it’s the right decision to use a more robust CMS if you’re doing something very complex that involves user registration, authentication, custom permissions, custom user role, highly customized content types for sites such as user-generated social media sites, e-stores, forums, and so forth.

I will not suggest you use Drupal if your client only needs a blog or simple portfolio site with only a few pages and basic content types — it is quicker and easier to build these sites using WordPress. Using Drupal for these purposes seems like overkill.

Another major argument against using Drupal is its user interface, which is emphatically hard to learn for people who are not computer-savvy. This is a solid point where WordPress wins.

Websites That Use Drupal

For inspiration, here are a few sites that use Drupal.

Mozilla

Mozilla, the company behind Firefox, uses Drupal for almost all of its web properties. The official website of Mozilla and Spread Firefox are both built with Drupal.

Spread Firefox

Ubuntu

The official website of Ubuntu, a popular distro of Linux and the operating system that many web servers use, is built on Drupal. Study the enormous nature of the site and the variety of content types and features available on it; you will soon see why Ubuntu chose Drupal.

Want to see more examples? Check out these other remarkable Drupal-powered websites if you would like to see more.

Downloading and Installing Drupal

We will use the latest stable release of Drupal 6 for this guide; download it here.

Installing Drupal on XAMPP

We will install Drupal on our computers, but if you want to install it on a live web server, the process will be the same.

To install Drupal on your local machine, you will need a web server platform like XAMPP or WAMP. Don’t be intimidated if you haven’t heard of them; they are really very easy to install and use.

If you don’t have a local web server platform installed yet, install XAMPP now.

Below is a user-friendly guide written by Jacob Gube (Founder and Chief Editor of Six Revisions) that will get you up and running with XAMPP in no time flat (the tutorial is for WordPress, so just follow the first part of the tutorial, Steps 1-26 tweaking the steps by keeping in mind you are installing Drupal):

• Using XAMPP for Local Development

This Drupal guide will assume that you are using XAMPP, so you might have to tweak the Drupal installation process if you choose another web server platform package.

Copy the Drupal Files to XAMPP Directory

Copy the Drupal package you downloaded earlier to xampp\htdocs. Extract the files and rename the folder to drupal for easy navigation.

Now go to the xampp\htdocs\drupal\sites\default folder.

Create settings.php

Make a copy of the file named default.settings.php and rename it to settings.php.

Make sure that you don’t delete default.settings.php otherwise your Drupal installation will throw you an error; this is one of the most common mistakes beginning Drupal developers make.

Create a MySQL Database for Drupal

Drupal uses MySQL to store all the content, so we need to set up a MySQL database for it.

We will use phpMyAdmin — a browser-based MySQL database administration GUI — to make this easier (it comes with XAMPP by default).

Navigate to phpMyAdmin using your favorite web browser via the following URL:

http://localhost/phpmyadmin/

For this example, I named the database db_drupal. You can give the root user permission with all privileges to the db_drupal database so that it can read/write/modify it if you want to save some time, but it’s not good practice to use root in a production environment. It’s better to create a new dedicated user just for the Drupal database and then only provide the needed permissions; we should do that next.

Create a New Dedicated MySQL User for the Drupal Database

For this example, I will create a new MySQL user called drupal_user. For production, it’s not a bad idea to use a user name that is obscure and random to minimize the event of a bruteforce attack being successful.

Definitely do not use root though as that is what most hackers will likely try first because the root MySQL user has super privileges that can access not only your drupal_db, but also your other databases. (In fact, it’s a good idea to delete and not use root at all and instead create a pseudo-root user, but that is another story for another day).

To create a new MySQL user, go to the home page of phpMyAdmin and then click on the Privileges tab.

Now click on Add a new user and then fill out all the required information.

While working on localhost (e.g. deploying Drupal in our computer using XAMPP), you can definitely select all the privileges, but in production, it is strongly recommended that you select only the privileges that drupal_user really needs.

In this example, I have selected only those privileges I want drupal_user to have.

• Select
• Insert
• Update
• Delete
• File
• Create
• Alter
• Index
• Drop
• Create Temporary Tables
• Lock Tables

At this point, we are done with phpMyAdmin and any MySQL-related tasks.

Install Drupal Using the Installation Wizard

Now let’s point our browser to the following URL:

http://localhost/drupal

If you renamed the folder in htdocs to drupal, this should work. If not, replace drupal in the URL string above with whatever folder name you used for the Drupal files.

When you navigate to the URL above, you will see the installation wizard of Drupal. You can select the language you want for the Drupal interface in the first page. Note that this option can be changed later from the Drupal back-end. We will continue with English, so let’s choose "Install Drupal in English".

In the next screen, Drupal will verify whether your web server (In this case localhost) is able to run Drupal or not. If your web server is missing server applications that are essential to Drupal functioning on it, then it will give an error message.

Next, you will see the Database configuration screen. Here you will have to give all the information you used in creating drupal_db and drupal_user.

Still in the Database configuration screen, click on Advanced options and you will see an option named Table prefix which will append all Drupal MySQL tables with a string (e.g. blackjack_drupal_table). I recommend you use some random table prefix that will only make sense to you; this is a precautionary security measure to reduce the threat of a SQL injection attack on your databases.

If you have done everything correctly then you will successfully move to the next screen where Drupal will install some necessary modules. You will be automatically directed to the Configure site screen after this is done.

Options on the Configure site screen are mostly self-explanatory, so I will let you fill out the needed information yourself.

Clean URLs Option

One thing many might not be familiar with is the Clean URLs option under Server settings. By default, the links generated by Drupal are unintuitive like http://localhost/index.php?q=21.

With Clean URLs enabled, your URLs will look nicer and will be more SEO-friendly, such as http://localhost/events.

The Clean URLs option requires mod_rewrite (an Apache module) to be installed in your web server — and it probably is installed already.

If mod_rewrite isn’t installed or running (highly unlikely if you’re on an Apache server), then Drupal will give you an error and you will not be able to use the Clean URLs option. It’s fine and won’t prevent you from deploying your site, but it really is advised for the purposes stated above that you get Clean URLs working as soon as you can.

Installation Complete

If you have followed along correctly, then you will get the following screen.

Don’t worry about the error being shown, as it is because if you are doing this on localhost using XAMPP, it just means we didn’t set up a mailserver, and it will not permit Drupal to send emails to administrators.

When you are on an actual server, these things should already be set up for you (unless you built your own web server and don’t have it configured).

Log Into Drupal’s Back-End

Let’s move to the back-end of Drupal. After navigating to your new website at http://localhost/drupal, you will see the following page.

Log in by clicking on Administer.

Now that you have installed Drupal, let’s move on by talking about the concept of modules.

What Are Drupal Modules?

Modules are extensions of Drupal that enhance it with additional functionality.

For example, Drupal comes with a pre-installed module called "System". In fact, Drupal itself is a group of core modules (which are modules developed and maintained by the Drupal project). The System module is one of them, and Drupal can’t work without it.

How to Add Drupal Modules

Aside from the core modules that come with your Drupal installation, you can download add-on modules from Drupal’s official repository. You can also make your own modules as you advance through your Drupal development skills using Drupal’s module API.

After finding a module you want to install, download it to your computer.

You will have to move the extracted module to the following location:

drupal\sites\all\modules

By default, there is no folder for modules, so you will have to create one manually; create a folder called modules inside drupal\sites\all.

It’s good practice to keep your downloaded modules separate from ones that come with the default Drupal distribution so don’t put add-on modules in drupal\modules.

Installing an Add-on Module: The CCK Module

The CCK (Content Construction Kit) add-on module is a popular Drupal module that allows you to add different types of custom content. Let’s practice adding modules to our Drupal sites by installing CCK, which we will use later on in this guide.

First, download the appropriate version of CCK and then place it inside drupal\sites\all\modules.

After downloading and placing CCK inside drupal\sites\all\modules, you will need to enable it from Drupal’s administration interface. Go to Site Building> Modules and there you will see CCK. Enable it. You can enable different sub-modules of CCK if you need them (and we will do so later on in this guide when we start using CCK).

Congratulations! You have just installed a Drupal module.

Drupal’s Administer Page: A Crash Course

When you are in the Drupal Administer page, you will see two ways in which you can view it:

1. By task
2. By module

If you are in the By task view, you will see the page organized by administration tasks.

For example, in the By task view, under Content Management, you will see all the tasks associated in dealing with your content, such as Content which enables you to view, edit, and delete content as well as Post settings, which controls the behavior and display of your content.

Each task will have a short description below it to help you figure out what it is for.

If you are in the By module view, links are organized by modules.

For example, in the By module view, under the System module, you will see Configure permissions, Clean URLs, Modules, etc.

Learning Curve of the Back-end UI

The administration interface of Drupal takes a lot of time to get used to, but there are plenty of add-on modules that you can download and install to make the administration UI easier to work with.

I suggest installing the Administration menu module, which adds a navigation bar at the top of all your web pages when you are logged in as a site administrator.

Setting Up Your Home Page

It’s time for some action. Let’s build our home page. To do this, we will create our very first content. Our first post will be of a Page content type. To start, go to Content Management > Create Content > Page.

Menu settings

The default Drupal theme has a navigation menu in the top-right corner. The options under Menu settings will decide whether to include the home page link to that navigation or not.

If you would like to add a Home link to your primary navigation menu, select <Primary Links> under the Parent item dropdown menu.

The Weight option allows you to organize your links in sequence. A link with a lower weight will float to the top of the list.

So if your Home link is 0 and your About link is 5, for example, then your Home link will show up first because it is less heavy.

If your Home link has a Weight option of 0 and your About link also has a weight of 0, then Drupal will make a judgment of organizing your links in alphabetical order, such that since their weight is equal, About will show up first.

In our case, leave the Weight option for your Home link unchanged (its value by default is 0).

Input format

The options under Input format enable you to choose how you want to enter in your content.

Filtered HTML limits the amount of HTML you can use, filtering out dangerous HTML elements like <script>, which can be exploited for a client-side-based site attack.

Use Filtered HTML if you have site administrators that are not familiar with HTML.

For developers, use the Full HTML option. This input format option assumes that you are well aware of HTML.

Revision information

If the content of your Drupal website is being maintained by a single person, then this feature may not be useful (unless you’re very forgetful).

If you work with a team of different content creators and you want to save different versions, log changes to content, and make notes of revisions in your content — the Revision information optionst can be handy.

Also, with the Create new revision option checked, it will keep the older version in case you want to restore back to it later.

Comments settings

These settings allow you to enable or disable the ability of people visiting your site to make comments on your content. We probably don’t want comments on our home page, so I’ve chosen the Disabled option.

Authoring information

You can change the name of author and time of publishing under the Authoring information options.

You don’t need to fill out these options all the time as Drupal will automatically fill it in if you don’t change the options.

Publishing options

This set of options dictates publishing settings of your content.

• Published shows the status of the content. Uncheck it if you want to un-publish something.
• Promoted to front page will display the page in the front page. Uncheck it if you don’t want the content to be published in your home page.
• Sticky at top of lists will keep your content at the top of the front page and any content listings.

Check Out the Front Page

Here is our home page now; it is still simple, but don’t worry, we will be adding stuff next.

What We’ll Do Next

Now, we will create a job board for user-generated content.

While creating this part of our website, we will be working with custom content types, views and other Drupal features.

What is a Drupal Node?

Before we go any further, we should discuss one of the most befuddling topics for Drupal beginners — and that is the concept of nodes.

A node is the elementary unit of Drupal’s content architecture. In simple words, if we pretend that a Drupal website is a house, the nodes are the bricks of that house. Each bit of content in Drupal is referred to as a node — whether it’s a comment, a page, a forum post, a story, and so forth.

Keep in mind that the Admin and User profile back-end pages are not referred to as nodes as they are created by the system and not by its users.

The node is a very important concept to familiarize yourself with if you want to build complex websites with Drupal. While the concept of nodes is confusing for Drupal beginners, it’s the core foundation that gives Drupal developers ultimate flexibility and customization options.

To give you an example, let us navigate to the home page content we created earlier. If you take a look at the address bar of your web browser, you will have something like this (note that you might not see this if you have Clean URLs enabled).

You can see the word "node" in the URL, which is an indication that the page you are looking at is a node.

Creating a Custom Content Type with Drupal

Custom content types are a great way to customize your Drupal site. For each content type, you can control how it is displayed, the user permissions, give it custom attributes — the possibilities are excitingly endless.

Create a "Jobs" content type

For this example, we will create a job board in our website; a place where users can post job vacancies and projects, sort of like a mini-Craigslist.

We will have the following fields for each job posting:

• Job Title
• Job Description
• Department — which will be a drop-down menu
• Experience — A text field
• Salary — A text field

Working with custom content types in Drupal is a piece of cake. First, navigate to Administer > Content types > Add content type.

Most of the options in the Add content type interface have descriptions. The one I think is essential to talk about is the Type option. Type is the machine-readable name of your custom content type that is used in more advanced Drupal development.

For this example, the Type we will assign job posts will be job. This will be important in the future when you become a Drupal ninja master and want to create more complex customizations to your site, such as in the case where you want to create a custom page template for job postings, which you can do by creating a template file called node-job.tpl.php (this topic is out of the scope of this guide).

To move forward, fill out the Title, Type, and Description fields.

Submission form settings

In this set of options, you will have the ability to create and set up a web form for accepting a job posting; this is what job posters will see when they want to submit information about a job.

Workflow settings

Under the Workflow settings, you will find some basic publishing options for a Job posting that is submitted. If you want the job post to be published without first getting reviewed by a Drupal administrator, then check the Publish box.

Continue to set up your workflow settings to move forward. For example, under the Comments settings, you can change different settings for comments in the job posts. If you want site visitors to be able to comment on a job post, turn it off. If you don’t, disable comments.

Create the Jobs Content Type

Time to hit Save to create our first content type. If you followed all the instructions exactly, then you should see Jobs in your Content types list (along with default Drupal content types like Page, Story, etc.)

Customizing Content Types with the Content Construction Kit

So now we have our very own Drupal custom content type. What we will do next is to customize the Jobs submission web form with the help of a very helpful Drupal module: CCK.

CCK is usually the first module most seasoned Drupal developers install on a new Drupal site. Because this add-on module is so important, Drupal 7 will include it as a core module so that you don’t have to download it manually anymore.

You should have already installed CCK at this point because of our exploration of Drupal modules in the beginning of this guide.

Enable Some CCK Sub-Modules

First step in our customization process is to go to Administer > Site Building > Modules.

Under CCK, you will find a list of CCK sub-modules; some of them are already enabled (by default), and some of them aren’t. Why is this so? Drupal is extremely modular, giving you the choice to use only the things you need. Drupal module developers are encouraged to compartmentalize their feature set, which in turn results in less bulky and more resource-conscious add-on modules.

As a Drupal administrator, you should only enable the modules and sub-modules that you are actually using on your site.

For our job posting web form, let us enable the CCK sub-modules we need.

Here are all the sub-modules we need to enable for our Job post web form:

Since we need the user of the form to be able to enter float values (like years of experience needed by the job applicant to qualify for the job), then we will have to enable the Number sub-module.

We also need to enable the Option Widgets, which allows us to add different kinds of web form input fields like checkboxes, radio groups, and so forth.

Each of these sub-modules depends upon the parent module called Content — and you can’t enable a sub-module without first enabling Content.

Add the Form Fields

Finished enabling the CCK sub-modules? Great, now let’s start modifying our job post submission form.

Go to Administer > Content Management > Content Types, then in the Jobs content type, under Operations, and click manage fields — this is where we will add custom fields.

First, I am going to add the Department field, which will permit the job poster to select an option of job types (e.g. Development, Finance, User Interface, IT, Marketing) from a dropdown list.

After hitting the Save button, you will be forwarded to a page where you can write allowed values and where you can fine-tune the Department field.

The next field is the Experience field, which is going to allow the input of floating point values (e.g. 3.5 years of experience).

Under Help text, add instructions on how to fill out the Experience field so that the job poster can get a better understanding of how to input the values correctly.

Under Global settings, you can specify valid input values. For example, under the Minimum option, if you specify 2.3, then a job poster typing 1.4 will see an error.

Our last field for our Jobs content type is the Salary field. It can take in an Integer value such as 5000 USD.

Under Global settings, specify 0 as the Minimum because you don’t want people entering negative integers like -1200. (Why not specify something greater than 0? Because entering 0 for the salary might mean that it’s an unpaid job).

After creating all the fields, you should have something like the following image in your Fields view for the Jobs content type.

Click and drag on the cross-arrows icon on the left side of each field to reorganize their order.

Create Job Postings

Before moving forward, create some sample job postings by going to Create Content > Jobs. Create a few sample job postings because we will need this data for the next section of this guide.

CCK is Really Powerful

While we have worked with some basic field types here, CCK also allows you very robust ways of taking in content. For example, you can use the ImageField add-on module to allow people to post an image (maybe you want the job poster to have the ability to show pictures of the office space where the job is located).

Check out this list of available CCK fields if you need custom input fields.

Using the Views Module to Populate the Job Posting Page

Though you can use queries to call out content from your database, that’s a really a complex process even with Drupal’s powerful API.

To help populate the data of a Job post page, we will use Views, which is a module that allows you to call content from your database without writing a single bit of code.

In simple words, it is a user interface for MySQL queries. Views is a very powerful module and sometimes it can be a bit difficult to understand for new users. The best way to learn about Views is to play with it; and that’s what we will do next.

Install the Views Module

Before we begin, we need to install Views. After downloading, installing and enabling Views, you can access it under Site Building.

Creating the First View

Any listing of data provided by Views is referred as a view.

We will create a view that will show all the available job postings on one page. You can also create attachments, blocks and customizable RSS feeds with Views, but we will keep it simple.

Go to Site Building > Views > Add and type out the fields as shown in following image.

Drupal will show you the actual user interface that is used to create views. Don’t feel overwhelmed, we will talk about the user interface shortly.

What is a Display?

To start customizing our Jobs view, we have to understand what a display is. Displays present our data in different styles. A view can have multiple displays.

In our Jobs view, we will create 2 displays: a page and a block. We will revisit this topic shortly.

Add Fields to the View

Let us add some fields to our view. Fields are the content that we want to show on our page. Click on the plus (+) icon under Fields to add fields to your view.

We will show the Job Title, Job Posting Date, Department, Salary and Experience that is supplied through our Job CCK web form.

We will have to select the following fields from the additional box opened at the end of page when we clicked on the plus (+) icon. These are the fields we are interested in:

• Node: Title
• Node: Post Date
• Content: Department (field_department)
• Content: Salary (field_salary)
• Content: Experience (field_experience)

After checking the appropriate boxes, make sure that you hit the Add button so that you can configure each field separately.

After hitting the Add button, the first option will be to customize Content: Department (field_department). Leave everything as it is except just change the Format option to Plain Text (from Default), and then click Update.

After hitting Update, the next field you will customize is Content: Experience (field_experience). Don’t change the default values; just hit Update. Do the same thing for the Salary field.

After finalizing your custom fields, the next option is to change the field Node: Post Date. You just have to change the Date Format to Time ago so it shows the number of days the job post has been up (e.g. "12 days ago").

The next and final field to customize is Node: Title. We just have to check the box that it should be linked to.

Live Preview Tab

You can use the Live preview tab to see how your view looks like as you make customizations to it.

Basic Settings

Now we will set up our basic settings.

Let us choose Unformatted for Style, and display the data in a Table format. Once that’s done, click Update.

We want to display all the job postings in one page, instead of being split up in multiple pages, so we will select No for Use pager. Again, click Update once you’re done.

After all these customizations, you can see that our Live Preview tab looks nicer than the initial view, but we are not done yet.

View Filters

At this point, our view is displaying all of our content, even ones that aren’t job postings. We only want to show jobs on our Jobs page.

We will select two filters so that we only show only published job nodes:

• Node: Published
• Node: Type

Click on that plus (+) icon beside Filters, select the Node: Published and Node: Type options, and then click Add.

Then configure the Node: Published filter so that the criteria is such that Published is set to Yes, which will omit all jobs that are not yet published from our Jobs view.

Configure the Node: Type filter so that only nodes that is a Jobs content type is shown.

Use the Live Preview tab to check your filters.

Sorting Criteria

If we look at the Live Preview, you will notice that nodes are sorted from oldest to newest. It would be nice to show the latest jobs first.

In order to sort jobs such that the newest jobs are displayed at the top, we will apply a sorting criteria. Under Add sort criteria, select Node: Post Date from the box, which will then open when you click the Add button.

Under Sort order, choose Descending.

Check the Live Preview tab again; it will now show you the latest jobs first.

Rearrange the Fields

There’s one other thing we can do to improve our view: rearranging the order of the fields. It makes sense that the Title should be first, and the post date second, and so forth. You can do so by clicking the up/down button on fields tab.

Check out the Live Preview tab; our view is looking nice.

We are done creating our view. Next, we just have to create 2 displays for our view.

Creating a Page Display

On the left of your Views page, select Page and then click Add display. After clicking it, you will be automatically directed to the Page settings page.

We just have to add a path to our page and a place to show the link to our display. I have put the value of 2 for Weight so that it appears after the Home navigation link.

After filling the values, don’t forget to click on Save the Display.

Now, you can see the link (called Available Positions) to our page display in the main navigation.

Creating a Block Display

Blocks are used to show information in various regions of a Drupal website. They are widgets that can display things like current events, the top 5 most popular posts, and so on in regions like the left sidebar, the header, the footer, and more.

You can place blocks in the header, footer and left and right sidebars in Drupal’s default theme. You can manage your blocks by going to Administer > Site Building > Blocks.

Now we are going to create our second display for the Jobs view so that we can show the latest job postings in the right sidebar.

Go to Administer > Site Building > Views and choose edit Jobs view. On the left, select Block and click Add display as you did before.

Click Override

We will remove 3 fields in our block display so that the block fits in the sidebar and so that it isn’t so overwhelming with information. Click on each field under the Fields tab. Before removing a field, make sure that you click the Override button, otherwise it will change the default view and will also affect the page display we constructed earlier.

You can also change the name of the block, which will be shown in Administer pages.

Add the Block to the Sidebar

Now let’s move to Blocks and add our generated block display to right sidebar.

Go to Administer > Site building and click on Blocks.

Go to the Disabled section, find the block display we just created, and select right sidebar under Region.

Make sure that you hit Save to perform the change.

Awesome, and with that — we’re done with our job board!

Drupal Themes

The final subject we will discuss in this guide are themes. Themes are used to change the visual appearance of a Drupal website.

There are many themes available on the Web. Here is the Themes list on Drupal’s official site.

To install a theme, you have to download it and then copy it in your drupal/sites/all/themes directory. If there isn’t a themes directory, then you can create one and then place your theme files inside it.

You can activate or deactivate themes by going to Administer > Site Building > Themes.

There are 5 themes that comes bundled with the Drupal core installation. I have just activated the Marvin theme to give my test site a clean, new look.

Make sure that you choose the theme default so that it can be applied to your Drupal site.

Wrapping Up

Drupal is big. I have done my best to cover the most confusing and difficult subjects that beginners often struggle with; however, this guide merely scratches the surface of the true power of Drupal. I encourage you to explore the Drupal site for more advanced topics.

If you have questions, feel free to ask via the comments section and I will be more than happy to help you!

Related Content

• CMS Showcase: 31 Remarkable Drupal Powered Websites
• 10 Drupal Modules You May Not Know About
• Convincing Your Clients to Use Open Platforms
• Related categories: Web Development and WordPress

About the Author

Saad Bassi is a 20-year-old web developer from Pakistan. He is the Co-Editor at CrispyTech, and blogs about Windows at Windows8Geek. Don’t forget to give him a "hello" on Twitter. Last but not least, make sure that you check out hist latest project, Addictive Fonts which focuses on free high quality font downloads.

The explosion in user adoption of mobile devices has revolutionized the web. Though designing for the Mobile Web follow similar principles to designing websites, we must consider some notable differences.

For one, current mobile device networks don’t run in the same speed as broadband devices.

In addition, there are also a myriad of ways our mobile web designs are displayed in, from touch screens to netbooks, which make even the smallest desktop monitors look like giants.

Some might argue that going mobile isn’t necessary yet, however, what no one will disagree with is that it’s an inevitable turn in the profession of people who make and run websites.

If you’re considering developing mobile web designs (or pushing an existing one onto the Mobile Web), this article should help you get to grips with the growing trend of mobile design.

Delivering the Design

One of the early elements that need to be considered for producing a mobile-device-friendly site is the way the experience will be delivered.

Complications in Delivery Method

The ideal scenario would be that each device simply scales and adapts to your existing website — and some devices, such as the iPhone, are able to because of their built-in web browser. But because of so many devices out there, a cross-device mobile design is difficult to make.

If you thought that developing sites that work on most web browsers such as IE, Firefox, Chrome, and Safari was tough — try developing one for iPhones, BlackBerrys, Palm Pres, Androids, Motorola devices, Nokia devices, and — the list appears bottomless!

For desktop-based web designs, you only had one markup language to deal with: HTML. But on the Mobile Web, there is also WML and then platforms such as iOS for Apple devices and Android for Android devices.

WML used to limit our design creativity, but we have more flexibility these days.

Adapting a Web Design to Support Mobile Devices

One option to pushing a site to the Mobile Web is to simply create or modify your existing code and design to work well on mobile devices, or building from scratch with mobile devices in mind.

With a bit of CSS3 (using media queries), for example, you can rescale the dimensions of your layout depending on the user’s device.

The problem is — you guessed it — not all devices support CSS3. So you may have to resort to using server-side device detection (e.g. HTTP headers to sniff out the user agent) or using JavaScript (e.g. modifying the DOM to rescale your layouts). But again, some devices might not support these techniques.

Making an existing layout scale depending on the viewport is as simple as a few lines of CSS3.

Redirect Mobile Users to a Mobile Version of the Site

Another method for delivering a mobile design is to build an especially optimized layout for handheld devices. You can build this yourself or use a web service such as Mobify.

Compared to the first method, this is the better format for delivery as you can create an experience specifically for your mobile users without taking away from the experience of desktop users.

For this to work, you will have to route traffic on your site depending on the user’s browser agent. For example, if a mobile device user visits your site (yousitename.com), then they will automatically be redirected to, say, mobile.yoursitename.com or m.yoursitesname.com.

A separate mobile site can mean squeezing out the extra bytes for faster rendering.

Tips on Redirection

Whichever route you decide to go down, it’s important that:

• Visitors know that a mobile-friendly version of your site is available
• Visitors can have the choice between a mobile version or the normal version

While forcefully redirecting or changing the layout for your end-users may seem like a good idea, it can lead to frustrations, so there should be ways in which a mobile device user can view the normal site design, and vice versa.

A simple solution would be to provide a link that goes to either version of a website. For example, on Six Revisions, you can find a link to the mobile version (m.sixrevisions.com) in the footer of the regular website, and conversely, a link to the regular website is provided at the footer on the mobile version. Whether you’re a mobile device user or a desktop user, you have access to both sites.

Structure and Code

The next thing that we need to consider is the structural code (markup and styles) that goes on behind the scenes.

• Do you go with a mobile-friendly language like WML or the XHTML mobile profiles?
• Do you build an app for iPhones, and then one for the Android?
• How does the cost and speed associated with mobile device web browsing affect the way you should develop your design?
• What about modern standards like HTML5 and CSS3?

These are just some of the questions that we all have in this relatively uncharted and undeveloped territory.

New devices may not support the same code as older mobile handsets.

Choices

Choosing the right language for a mobile-friendly website is paramount; while older devices before the smartphone revolution only support WML (which is pretty basic) the W3C produced a mobile-friendly version of XHTML (referred to as the XHTML Mobile Profiles).

Luckily, due to the speed in which mobile device manufacturers have taken to giving a complete and robust web experience, you can often simply use regular HTML or XHTML — if you don’t want to be held back by mobile profiles or WML.

However, it’s important to underscore the fact that it’s still worth considering WML if you feel your visitors have old phones. Remember, though, you’ll be adding more web zombies that we’ll all have to deal with some day.

Use your site statistics and carry out some website analytics to help you come up with an educated decision.

Every browser will have its own level of support (it’s not all about the device itself).

Speed and Cost (to the User)

Ultimately, whichever language you choose, the primary considerations you need to think about is speed and user cost.

It’s well known that most mobile internet providers cap connections, and therefore bandwidth has now become a limited and valuable resource.

Even worse is the issue that roaming charges outside of the country you reside in can be expensive, which is a reason to keep the sizes of everything on your site as low as possible.

With caps, costs and speed issues, the need to keep markup as clean, small and standards-based as possible is important.

Roaming charges from mobile web providers can get pretty expensive.

Because of the speed in which adoption is occurring for new technologies, the ability and future of using languages like HTML5 and CSS3 is not out of the question — taking into account that your code degrades gracefully, of course.

Many providers such as Apple provide firmware upgrades that improve how the device will function, which means older devices may be able to take advantage of modern standards. But this situation is analogous to IE6 users refusing to upgrade to modern versions like IE8, therefore, ensure you always research before you implement — then test, test and test again!

Layout Essentials

If there’s one issue that mobile devices have in spades, it’s the issue of how to lay out your web pages. A design’s layout in mobile devices is problematic because:

• Mobile devices come in all shapes and sizes
• Mobile devices have different levels of quality and resolutions
• Mobile devices may or may not support zooming, others scroll content
• Scrolling in mobile devices is more difficult because of their small screen

The goal of a mobile web design’s layout is to allow the least amount of burden to the user’s ability to find (and quickly read) what they’re looking.

Essentially, your layout will be important to making your mobile presence a success.

Due to the lack of space on many screens, single column designs may be required.

Simplicity

One of the main concepts to an effective mobile web layout is simplicity. It goes without saying that the more information you pile into a small space, the harder it becomes to read and the more scrolling that will be required.

With such limited space to contend with, multi-column layouts often break because the required space to meet the needs of the content cannot span beyond the physical space of the viewport unless passive zooming and scaling comes into play.

Therefore, it pays to use a single column layout.

Avoid Scrolling

Some mobile devices, like the iPhone and iPad, have the ability to adjust a web page’s zoom depending on the orientation of the device (portrait or landscape mode), which reduces the need for scrolling; but not all devices have this ability.

Having to scroll down a content-heavy page isn’t a fun experience on cell phones.

We all know that horizontal scrolling isn’t a good idea — especially on the iPad where scrollbars don’t show up until you attempt to scroll — so avoid this situation in your mobile web designs.

A good mobile design should have a clean layout with simple navigation options.

Size of Navigation and Clickable Objects

Another key component is the issue of navigation and clickable regions, which is predominantly a problem with touchscreen mobile devices.

I’m sure if any of you have big hands, you are well aware of what a pain typing on a handheld keyboard can be or how hard it is to click on something small on the screen without having to zoom into it.

Ensuring that your mobile layout has large and easy-to-press links and clickable objects will be essential in streamlining the experience.

Reducing the amount of clicks required to achieve an action — which is a good practice regardless of whether or not you’re designing a mobile site — is all the more important in mobile web designs.

Content Design

With the cost of browsing the web and caps on data allowances being put in place (along with speed issues), the most costly component of a website is the content. Knowing how to reduce excess images, text and media can be the difference between a 50KB design and a 2MB layout of crippling intensity.

Less is more on a mobile device; less content equals more likely to read.

Text Content

Of all the components of a site, none plays a more vital role than the text.

But while content is king even on handheld devices — the need for scrolling, small file sizes, quick readability and bandwidth restraints means that we have to reengineer our copy to ensure that it’s useful on such devices.

If your design is simply a modification/adaptation of your existing layout (the first method of delivery), you could decide to hide unnecessary text, images or media (even though they’ll still download, it will improve readability). The real advantages come from a separate design where you can purge the marketing talk and excessive content.

Images

When working with a small screen, large CSS background images or byte-heavy infographics can be problematic. While some handheld devices have larger displays where this is not an issue, and while the ability to zoom into graphics on devices like the iPhone shouldn’t go without some credit, unnecessary bulk for visual embellishments certainly needs to have a good clean up.

Large images sap a lot of bandwidth; consider scaling them back for smaller screens.

Reducing the resolution and dimensions of your images can literally be the difference between 50KB and 500KB — bandwidth consumption that’s worth saving.

Video/Audio

It’s inevitable in the modern web that utilizing audio and video will be needed. Even with the bandwidth issues that exist, you shouldn’t stop using these richer forms of content, as they can be great, especially on handheld mobile devices that have excellent video/audio quality such as the iPhone or iPod Touch. But just like with everything else, moderation and smart usage is key.

If you’re providing audio or video, don’t make it start downloading until requested.

There are a few considerations you should make when utilizing video and audio:

• The format you use: Beware of Flash and other closed formats that aren’t compatible on some devices
• The file size of video and audio: Optimize your files
• Don’t automatically download video/audio files until requested: For bandwidth savings
• Don’t auto-play: It’s annoying; in fact, don’t do this even outside of mobile devices

Other Issues to Consider

Finally, it’s important we address the best practices when it comes to scripting, plugins (like Flash and Silverlight), and developing web apps.

Knowing what to cut and what to keep will help enhance your mobile user’s experience and also ensure that your mobile website is functional across most/all devices.

Allow your code to degrade gracefully as you can’t rely on any technologies success rate.

Interaction in Mobile Devices vs. Personal Computers

An important point to make is that we interact differently with a mobile design screen versus a regular computer screen.

With the lack of a mouse and the way our hands gesture to instigate actions and reactions, the traditional interaction patterns we’re accustomed to, such as hovering over a link (for example), is different.

Consideration must be given to how such functions are affected by a change in interfaces.

Proprietary Technologies and Plugins

The move of Apple to block Flash from their devices underscores the problems of becoming dependent on proprietary plug-in components — closed technologies that other companies can’t or won’t support.

Adobe Flash isn’t supported on the iPhone, iPad or iPod Touch, which is problematic.

Apple’s decision against Flash can be a harbinger of things to come, setting a precedence about the way mobile device manufacturers welcome third-party technologies into their own. Other technologies like Silverlight or Java may not work as intended — or may later be blocked as well.

While many developers may use this as an excuse not to develop on these platforms, the best course of action is simply to ensure that their mobile websites degrades gracefully.

Building an app may be useful if internet access is unavailable (for any reason).

Web Services with Persistent Internet Connections

Even though the availability of web-based services are fantastic, I do worry that the dependence on a constant and reliable (always on) web connection is very much going to be a problem for web apps at the current state of mobile device networks.

While there have been moves towards local storage mechanisms, for now, web apps that rely on persistent internet connections could affect mobile device users due to the capabilities of their networks.

For example, the fact that there are still "dead zones" — places where mobile phones don’t have service — can affect the user’s interaction, such as in cases where his or her signal suddenly drops in the middle of performing a task.

It’s worth considering the idea of developing an app for your service which can function both offline and online (learn how by reading this offline HTML5 iPhone app tutorial).

Testing Your Mobile Website

If you’ve ever been into a store that sells phones, it can be downright shocking how diverse the screens, devices and contract plans can be.

There are a wide range of emulators for simulating your designs.

With the future set to bring even more mobile devices into the fray, and because we are at the mercy of corporations that want to gain or maintain their competitive edge, the standardization of these web-enabled devices is unlikely to occur.

Therefore, it’s up to our common senses to do what we can to ensure that the widest possible audience can access and use our site in a way that’s functional and enjoyable.

Testing with Mobile Device Emulators

With such diversity in the mobile device landscape, it goes without question that you should test your designs on as many platforms as you can manage. Below is a list of emulators that will simulate certain devices for you to be able to test your work.

• Android emulator
• Blackberry emulator
• Dot Mobi emulator
• Firefox Mobile emulator
• iPhone / iPad / iPod Touch emulator
• Klondike WML emulator
• LG emulator
• Microsoft Devices emulator
• Motorola emulator
• Mozilla Fennec emulator
• NetFront emulator
• Nokia emulator
• OpenWave emulator (archive)
• Opera Mini emulator
• Opera Mobile emulator
• Palm emulator
• Palm Pre / iPhone emulator
• Samsung Java emulator
• Samsung Platform emulator
• Windows Mobile emulator

Simple, Small and Speedy

While much of what I discussed in this article is straightforward advice, common sense is a major factor that dictates how we build interfaces.

Back in the 56k modem days, we had speed issues to contend with. We also had monitors that were limited in resolution and color. Many ISPs capped our bandwidth and internet access. Some internet connections would drop if you have an incoming phone call to your house. So for those of you older-generation developers — you should be in familiar territory.

For now — and until mobile network infrastructure improves and connectivity is widely available — simple, small and speedy are the three main principles we should abide by.

Related Content

• Mobile Web Design: Is it Worth It?
• A Quick Look at Mobile Web Designs
• How to Make an HTML5 iPhone App
• Related categories: Web Development and Web Technology

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

When it comes to building a website, it helps to have a process to follow, especially if you are just getting started as a web designer. Good guidelines can help you work better by keeping forgetfulness to a minimum.

Every designer or company will develop unique components to their web design process over time, but the basics remain the same: learn, plan, design, code, launch and maintain.

In this article, I will share my process for designing a website.

Before we get into it, let me first share two parallel processes that should be taking place throughout your design process.

The first thing you should be doing continuously is seeking feedback. You’ll save yourself a lot of wasted time and effort by getting feedback at regular intervals.

The second thing you should do continuously is testing. Test the heck out of everything as you go to avoid mega-headaches down the road.

With that said, let’s get started!

1. Learn

What do you think is the most important step of the web design process? Planning? Designing? Coding?

Guess again.

It shouldn’t surprise you that learning — discovering and understanding what you need to build in the first place — is the most important part of the entire website design process.

Why? It’s simple, really. The more you know about what you need to accomplish, the better your chances will be of creating a successful website.

Think of it like this: If you are an archer, don’t you need to know where to aim your arrow? That’s what the target is for. The little red dot in the middle is the bullseye. Since it’s smaller, it’s harder to hit, but even if you aim for it and miss, you’re sure to get closer than if you aimed your arrow up into the air and hoped for a random direct hit.

So how can you score a bullseye as a web designer? Before you go any further, you need to define what hitting the bullseye in your project means.

As a web designer, hitting the bullseye is giving your clients what they want — it’s what they are paying you for.

What clients want varies widely on a case-by-case basis. Since you aren’t a mind reader (no, you’re not), you need to proactively find out what they want.

In some cases, they may not even know what they want, and in other cases, they may have a hard time verbalizing what they have envisioned because they don’t know industry terms and concepts like CSS, Ajax, or relational databases.

The Creative Brief

Fortunately, there’s a tool web designers can use to easily gather this information. It’s called a creative brief. A creative brief is basically a series of questions that you ask your clients so that you can understand the scope and goals of a project.

You can ask these questions during a face-to-face meeting or a phone call — or you can simply make a web form available on your website that handles the answers of your clients.

You should obtain this information in the way you and your clients are most comfortable with — but whatever you do, don’t skip the creative brief because it will become the lifeblood of your project.

What kind of questions should you ask in your creative brief? At the minimum, find out:

• The client’s target audience
• Their primary and secondary goals for the website
• Current branding characteristics
• Budget
• Deadlines they need to meet

I also like asking clients what websites they like and don’t like to give me a visual idea of where I should be heading and what I should avoid.

You might also want to find out if they need an online store, if they already have a logo (if not, you can make one for them), who will be responsible for maintaining the site once it goes live, and so forth.

You might have unique questions that you will want to include; use them and don’t be afraid to tailor your questions on a per-project basis.

2. Plan

Once you’ve learned what you need to build, it’s time to start planning how you are going to make it happen. Before you can start designing a website, you need to know exactly what, and how, to design it in the first place — and it all starts with creating a design strategy.

Your design strategy for each website you make should be handcrafted to fit the client’s vision (if you are designing a site for yourself, then you would qualify as the client).

So what factors will shape your design strategy? The creative brief will act as the foundation of your plan by providing you with some basic information, such as what your timeframes are and who the target audience of the website is.

It’s especially important to know your audience because it will affect where and how the site gets viewed. For example, will you also need to create a mobile version or an iPad-specific version that works with touch?

Research and Note-Taking

Whatever gaps are left in the overall strategic picture will need to be filled by doing some research of your own. Now is the time to visit competing websites and see what types of designs are already out there in the target market so you will know how to differentiate your own design.

See who comes up first in a Google search and try to find out why. Within 10 minutes, you should be able to start piecing together the beginnings of your design plan.

While you are researching, you’ll also start brainstorming about what colors to use, where to place the call(s)-to-action, what kind of fonts you should use and other similar details.

At this point, you should also be taking notes, snapping screenshots and starting a mood board.

Sketching and Mock-Up

Next, it’s time to create a mock-up and start letting your ideas take on more of a tangible state. I like to start by sketching out my ideas on a regular old piece of paper, as do many other web designers.

Other people prefer to use a wireframing tool like OmniGraffle. During this phase, not only will you want to start thinking seriously about the layout of the site, but also the structure of your site and how the navigation will shape up.

This is your chance to see what works best and a good place to experiment with different ideas before actually hitting Photoshop or Illustrator to create something more concrete.

Pick Your Tools

This part of the process is also the perfect opportunity to assess which tools you will need to use. You absolutely should not fall into a pattern of using a predetermined set of tools for each site you create. It’s a potentially hazardous practice for everyone involved, including the site’s end users and the client (not to mention how monotonous your portfolio would look).

Put some real thought into what content management system would work the best considering the site’s goals, whether or not including Flash at all is a good idea, and so on.

3. Design

Now I know there are many web designers out there who like to skip directly to the design stage without giving a second thought to learning or planning, but design is more than just the act of creating. You want to actually create something good and useful and you just can’t do that without first doing some preliminary work before starting to design.

If you’ve already done the legwork of learning and planning, it makes the actual designing much easier. When you don’t have to worry about the little details, it really opens up a whole new level of effectiveness and productivity because you can focus on more important things.

Once you are ready to start designing, keep in mind that you need to design more than just a home page. You’ll need a design for the sub-pages of your site as well. It can sometimes be easy to design a home page concept, slice it up and start coding only to get to sub-pages and have no direction. You may also need to design a mobile or iPad version of your site as well.

The design phase itself is straightforward. Just open up Photoshop (or your graphics creation tool of choice) and start bringing your mock-up to life. Sweat the details. Make it pixel perfect. Even if you feel like the project you are working on is more boring that staring at a wall for 24 hours straight, put your all into it. Your client will notice and you’ll be proud of the work you did.

You’ll have to decide at this point whether you want to use real content in your design or some dummy text (e.g. Lorem Ipsum). There are plenty of fans in either camp, but I personally prefer to use real copy and photos if they are available to make it as close to reality as possible.

During the design phase, it is incredibly important to seek feedback often to make sure all specified requirements have been met. If the client wants to make changes, now is the time to do it before the design is sliced and coded, making it ten times more difficult to make what would be a simple change if you were to do it during the design phase.

4. Code

Once you have a killer design, you’ll need to turn it into a real, live website. A safe bet, no matter what content management system you are going to be working with, is to start with a generic HTML and CSS template.

Start with a Base Template

If you’re like me, you’ve already got a set of starter HTML and CSS files ready to go that are already linked to each other and already contain some basic starter code (such as a CSS reset).

If you’re not like me and don’t have these generic files at the ready, go ahead and create some that you can reuse at this stage in the future.

Before you go any further, it’s a good idea to go ahead and add in your title, descriptions and meta tags, or at least make a note of what they should be if you are going to be using a content management system later on.

Lay Out the Main Sections and Content

Begin carving up your HTML/CSS by inserting the major sections (your main <div>s) for your header, footer and content area.

Next, begin adding your text and image content. The goal is to keep your markup as semantic as possible so that each element is meaningful.

Avoid divitis — the act of utilizing too many divs. For example, you don’t need a div just to contain the logo. Try using an <h1> or a <p> instead — it can be styled exactly the same way (e.g. making them into a block elements using the display CSS property).

Validate and Test

Don’t forget to make sure your code validates by using the validation tool provided by the W3C (but also understand that validation tools have shortcomings).

You’ll also need to do some browser testing to make sure the site looks and acts as intended and provides a uniform brand experience no matter how a user accesses it. You can use a tool like Browsershots if you have limited access to different types of computers.

Use Firebug and YSlow to debug your site and make sure your work is running at an optimal speed.

One last thing: don’t forget to implement Google Analytics or your favorite analytics alternative so you won’t miss out on tracking the stats during the big launch.

5. Launch

When you’ve finally perfected the site, it’s time to release it to the public. Launching can mean different things to different people, mostly because there are various content management systems and development circumstances out there.

For instance, if you are redesigning a site that uses a content management system or publishing platform, your launch may be as simple as applying a new theme.

If you are designing a brand new site in a sandbox or local development environment, then "going live" means FTP’ing your files to the production server.

6. Maintain

During your planning phase, you should have determined who will be in charge of site maintenance. If a client is unable to maintain the site, you may want to suggest that they hire you on a regular or as-needed basis to manage and perform maintenance tasks.

During the hand-off/closeout of the project, it might also help to provide some guidelines and basic training to your client to make sure they understand how to properly maintain the site.

Related Content

• A 4-Step Process for a Positive Web Marketing Approach
• How to Navigate Design by Committee
• 6 Things You Need for Your Web Project to Succeed
• Related categories: Web Design and Web Development

About the Author

Chris McConnell co-founded the Brandeluxe network of sites, which includes Freelance Review, Design News Source and Daily Design Advice. Be sure to follow @Brandeluxe and @DesignNewsSrc on Twitter.

Alongside my primary income stream, which is my web design freelance business, I’ve also been selling themes and templates for content management systems and publishing platforms like WordPress for close to two years now.

Although theme design can seem like the promised land for web designers and web developers — with some theme authors making tens of thousands of dollars from a single theme alone — it’s actually more like a gold rush: a chosen few hit it big, but only after putting in a lot of hard work.

Here is a short guide to help you decide if getting into professional theme designing is for you.

No Clients? No Problem!

One of the main reasons why designers start designing themes is simply because they might not have anything else to do.

Whether you’re fresh out of design school, have recently begun freelancing, or are simply experiencing a dry spell, finding clients can sometimes be hard.

Designing a theme lets you get to work right away without having to wait for a project to fall in your lap.

Of course, contrary to a "real" client, there’s no guarantee that you’ll ever make any money off your theme.

But if the alternative is doing nothing while your design skills erode, you might as well get to work on that theme.

Plus, theme design is a great way to build a portfolio and get valuable experience, which in turn will help you get new clients.

Build It and They Will Come

Building on my previous point, theme design can be a very effective way of getting your name out there and attracting clients. When you build a website, your work is seen by every user. Now multiply that by the number of people using your theme for their own site, and you’ll understand that you can reach a very large audience. And add to this all the people who come across your work while looking for a theme, even if they don’t end up using yours.

In this age of social media saturation, just having a Twitter account isn’t enough to get people to pay attention to you.

Having a real tangible product that people use every day makes a big difference, and will help you build strong relationships with customers and potential clients.

Democratic Design

Another big part of the appeal of theme design is that it’s egalitarian: No matter where you went to school, where you live, who you know, or how old you are, the only thing that counts is the quality of your work.

Even though the world is a lot flatter thanks to the Internet, a company in New York would probably not entrust its $5,000 site redesign to a 16 year old from Mumbai that they found through Google. On the other hand, that company would have no problem buying a $50 theme from that same 16 year old.

Passive Income (or "How to Retire While You’re Still Young")

I’m surprised to see how many people don’t know the difference between active and passive income.

To put it simply, active income is the money you earn while actually working, while passive income is not linked to the time you put in, and usually comes from things like product sales or investments.

There’s a simple test to know if your income is active or passive: Do you earn money while you sleep? If the answer is "no", then this means your income is of the active kind; your revenue is attached to the time you put in, and the only way to earn more is to work more. A traditional web design business is active income.

The problem with this is that there are a limited number of hours in a day, which in turns limits your income. So unless you become a design superstar and get paid hundreds/thousands of dollars by the hour (and raise your prices every year on top of that), your revenue streams will eventually reach its limit.

This might not be a problem right now, but what if you get sick and are unable to work for a month? What if you want to take a vacation? And what if you need to provide for your family, or plan for retirement?

Theme design is one of the few sources of passive income available to web designers, and probably the only one that lets you actually design. For example, writing a blog or an e-book can also be good sources of passive income, but not every designer enjoys writing, so designing/coding premium themes can be an alternative.

The $50 Theme versus the $5,000 Website

You’d be tempted to assume that, provided a client has the budget, a custom-made $5,000 website will always serve them better than a cheap $50 WordPress theme.

But this is far from certain: if your clients are like mine, at the end of that $5,000, they get a brand new website, but have ran out of money to pay for things like copy writing, video production, or additional marketing.

Wouldn’t the result be much better if the client had used a $50 theme, and the remaining $4,950 had gone into content creation instead of design?

I know it sounds suicidal coming from a web designer, but I’m pretty sure most clients will figure it out by themselves eventually anyway.

The truth is that not everybody needs a custom-made site. Only a few people buy custom-made cars or even custom-made houses, there will come a point where a website becomes the same way.

As more and more people realize this, I believe the theme market will only get bigger. So this is another good argument to enter the field now while the iron is hot.

Finding Fulfillment

Dan H. Pink’s Drive is a great book about motivation. It shows that the old "carrot and stick" way of motivating people is outdated and doesn’t work for complex tasks. Instead, he puts forward three key principles that make work motivating: autonomy, mastery, and purpose.

Theme design gives you a lot of autonomy. You’re usually working alone or in small groups, and you’re responsible for every choice you make. The fact that you’re selling a product to consumers instead of working for clients means that you feel less pressure from any single buyer and are less likely to get bossed around (unless you really take customer support to extremes).

It also gives you a real feeling of mastery. To be able to say you’ve mastered a craft, you need to be able to track some kind of metric to know your progress — sales is the perfect metric for this. If you see that every theme you publish is generating more sales than the previous one, you’ll know you’re making good progress and getting better at what you do.

And finally, you’ll get a real sense of purpose once you see how people are using your themes. It can be very gratifying to know that your work helped someone launch their personal site or their startup.

But It’s Not All Gravy…

If I stopped writing here, you’d probably wonder why everybody isn’t out there designing their own WordPress themes or site templates. Everything sounds so peachy!

But the truth is that there are also serious downsides to professional theme designing, and you should be aware of them before entering the field.

Nobody Likes Working for Free

Nobody likes working for free, but if you decide to enter the theme design market, I can almost guarantee that you’ll end up doing just that.

Even the top theme authors can produce themes that don’t sell. And when that happens, you’ll have spent hundreds of hours to earn a meager few hundred dollars.

You will then be faced with the hard decision of whether to invest even more time in the theme to try and make it more attractive to buyers or scrap it and move on to the next project.

I Hope You Like Long Hours

Theme design takes a ton of time. First, you have to come up with a design, slice it up, and code it into HTML/CSS.

Then comes the fun part: developing the WordPress /Drupal/Blogger theme.

Oh, and don’t forget cross-browser testing, adding multiple color schemes, custom options, and writing the documentation.

And that’s only before the theme is launched. After the launch, you’ll have to take care of promotion, customers support, and bug fixes. You can safely assume that about 30% of the work happens after a theme is published. So if you’re trying to see if theme design is going to be profitable for you, be sure to factor this in your calculations.

Don’t Ignore Competition

While 37Signals famously advises ignoring and underdoing the competition, you might not want to heed that advice when you enter the theme design arena.

The market is very crowded, competition is extremely stiff, and the quality level is through the roof. Most themes offer design on the same level as any custom-made site — with far more features.

If you want to be successful, you’ll have to compete on all fronts: Customers are receptive to good design, but also compare every theme’s features, so you can’t afford to be found lacking in that area.

And of course, if a competitor undercuts you in price, you will probably have very bad consequences on your sales, too. And then you’re also competing with free themes…

It’s Really Hard

Finally, theme designing in the professional level is hard. In fact, it’s harder than traditional web design: Imagine having to design a site without any content or guidelines.

Oh, and instead of pleasing just one client, it has to appeal to thousands of potential buyers. But it should still be different from all the themes already on the market and must bring something new to the table if you want to gain an advantage.

From a technical point of view, you’ll have to make sure your theme works in all browsers, and across all possible server configurations (Apache, IIS, nginx).

And you have to do all of this before even earning a cent. Your theme could be a total flop and all that time you invested would have gone to waste.

Final Thoughts

If you’re considering entering the theme design market, this should give you a few elements to help you make a decision.

Personally, I don’t regret selling themes at all, but on the other hand, I also wouldn’t do it full time. I’ve reached a good balance between themes and regular web design gigs, and I hope you’ll be able to find your own path as well.

Related Content

• Five Reasons Why You Shouldn’t Expand Your Design Business
• A Guide to Premium WordPress Themes
• Problems with Using Website Validation Services
• Related categories: Web Development and WordPress

About the Author

Sacha Greif is a web designer from Paris, France who specializes in user interfaces and theme design. Visit his personal site at sachagreif.com. He blogs about design at AttackOfDesign.com and his latest Wordpress portfolio theme is Silverio. Follow him on Twitter: @SachaGreif

JavaScript libraries, ICEfaces, Adobe Flash 4, Microsoft Silverlight, and now, HTML5 have been competing for web dominance as the world wide web is thrown into a new era — an era dominated by rich internet applications (RIA for short).

The purpose of this article is to define what RIAs are, explain why the web has been moving towards RIAs, explore the different RIA frameworks that exist today, give an overview of the pros and cons for each framework, and discuss how these new technologies might coexist in the future.

What’s an RIA?

An RIA, or rich internet application, is a web application that behaves like a desktop application. Before RIAs began popping up, most web applications were composed of static pages.

Sumo Paint is an Flash-based RIA, functioning like a graphics editor software such as Photoshop.

Unlike desktop applications, any interaction with a web page usually resulted in reloading a whole new page. Desktop applications, on the other hand, had much better user interactivity because all of the processing was being done natively on the user’s machine, resulting in a more seamless user experience.

As a result, software developers began to ask themselves, "Should my product be a desktop application or a web application?"

It has always been a fair question, because both types of applications have very strong pros and cons.

Desktop applications have smoother user interactivity, but require distribution and dealing with software updates when the software has shipped.

Web applications, on the other hand, are easily accessible from the web, freeing it from the problems related to software distribution and updates, but were very lacking in user interactivity.

So how can we have the best of both worlds?

RIAs are the best of both worlds. RIAs are distributed through the web, and have very rich user interactivity. Since the advent of Ajax, a method for web applications to make server requests with JavaScript without reloading a web page, new technologies have been popping up left and right to join the RIA movement.

Among these technologies are frameworks that help developers build and deploy rich internet applications, such as JavaScript libraries, ICEfaces, Adobe Flash 4 (formerly Flex 3), Microsoft Silverlight, and HTML5.

Let’s talk about these RIA frameworks one by one.

JavaScript Libraries for Web Application Development

JavaScript libraries like jQuery and MooTools were one of the first technologies to really help deploy slick and interactive rich web apps. They provided a framework for an RIA application that leveraged client-side scripting to handle front-end interface functions. They are basically JavaScript files that comprise of a collection of useful, cross-browser-tested functions for doing things with Ajax and dealing with common user interactions like hiding and showing content based on a user-driven event.

Some of the most popular ones today are jQuery (especially with jQuery UI), MooTools, YUI (Yahoo! User Interface library), and ExtJS. All these libraries include RIA components like grids, graphs, and complex form elements, as well as utilities to handle Ajax. Best of all, most great JavaScript libraries for web development are open source.

JavaScript libraries are good to use if you don’t want to pay for an integrated development environment (IDE) but still want great-looking and professional RIA functionality in your website.

Sites using JavaScript libraries include Google, Digg, Yahoo, Amazon, Microsoft, Twitter, and Best Buy.

ICEfaces

ICEfaces extend the standard JavaServer Faces (JSF) framework and is intended to simplify the programmer’s workflow by removing JavaScript from the equation. In other words, ICEfaces handle all of the JavaScript/Ajax for your web application via Java APIs. This greatly simplifies the task of creating rich internet applications by removing some of the complexities introduced by building custom JavaScript functions.

ICEfaces is good to use if your team is made up mostly of Java developers, if your web application doesn’t require other complex components that ICEfaces doesn’t offer, or if your web application is event-driven. If your app is event-driven, make sure that you understand that ICEfaces doesn’t offer true "server pushes" in the sense that HTML5, Flash Builder 4, and Silverlight can. Instead, it uses a long polling method to simulate server push.

Sites using ICEfaces include Boeing, NASA, Union Pacific, T-Mobile, and Bank of America.

Adobe Flash Builder 4

Flash has been around for a long time, but building entire web applications out of Flash used to be more trouble than it was worth until the introduction of Flex, which is an extension to Flash that provides RIA web components.

What makes Adobe Flash Builder 4 so exciting is its cross-platform and cross-browser nature, allowing it to run exactly the same way across all operating systems and all browsers. Comparing it to JavaScript, where browsers have varying JavaScript engines that handle and process your code, Adobe Flash has one engine that your users install via the Adobe Flash browser plugin (which more often than not, they would already have).

Flash Builder 4 applications can do this because they are embedded into HTML pages, meaning that the browser itself has no effect on the application’s performance. This means that you can run even the most complex web applications correctly in IE6 if you wanted to (this is of course a simplification because the Flash plugin/engine regularly gets updated, so it would slightly depend on the user’s version of the plugin).

These applications are usually accompanied by server-side processing like a Java backend and need the Flash Builder 4 IDE for development.

Adobe Flash Builder 4 is good to use if your web application requires complex graphics, if your team is made primarily of Java developers (because it works well with Java), or if your application uses an event-driven architecture.

Sites using Flash for web applications include Mint.com, Flickr, and Hyundai.

Silverlight

Silverlight is basically Microsoft’s version of Adobe Flex/Adobe Flash. It has been gaining some traction, but doesn’t seem to be catching up to Adobe Flash in terms of popularity.

Silverlight applications are obviously bound to have a .NET backend because it’s a Microsoft product. This means, though, that you’ll have tighter Silverlight/.NET integration versus Adobe Flex/[some server-side scripting language like PHP].

Silverlight is a good option if your web application requires complex graphics, if your team is made primarily of .NET developers, or if your application uses an event-driven architecture.

Sites that use Silverlight include Netflix.

HTML5

HTML5 is the latest development in the RIA movement. HTML5 is, in essence, the result of merging the best of HTML4, JavaScript, CSS, JavaScript libraries, and Flash into a single specification that leverage the API model. HTML5 is an open technology, which means there isn’t going to be a single governing body like Adobe for Flash or Microsoft for Silverlight.

Since HTML5 specifications is not yet complete, and IE9 has not yet been released (read about new IE9 features), you’ll need to wait a little bit before building a production-ready HTML5 web app.

Currently, all major browsers support HTML5 except for IE8 (go figure). Since IE8 has a major portion of the browser market, HTML5 really won’t go mainstream until IE9 is released.

Once HTML5 becomes widely supported, it will be good to use if you don’t want to buy or learn an IDE (which you would need for frameworks like Flex and Silverlight), your application uses an event-driven architecture, or if you would rather use built-in HTML functionality and JavaScript APIs rather than using third-party JavaScript libraries for basic RIA functionalities. 

Although HTML5 can handle graphics very well, using Flash and Silverlight for complex graphics and animation is still easier/faster at the moment.

The Future of RIAs

Are HTML5 apps the future of the internet? Not exclusively. As long as there are creative and innovative web developers out there who are driven to create something special, there will always be new technologies that can provide amazing things that HTML5 or any other web technology won’t be able to offer.

Creativity and innovation are the reasons why JavaScript libraries, ICEfaces, Flash, Silverlight, and HTML5 came into existence in the first place. The future of the web will be made up of many coexisting technologies, just like it is today.

Related Content

• What is The Future of Web Development?
• 10 Promising JavaScript Frameworks
• Getting Started with the iPhone SDK
• Related categories: Web Development and User Interface

About the Author

Eric Rowell is a professional web developer and designer who is fascinated with everything related to the web, including RIAs, emerging technology, and social media marketing. He is the Founder and Chief Editor of Web Krunk and loves HTML, HTML5, CSS, JavaScript, Ajax, jQuery, Flash, PHP and Java. You can follow him on Twitter at @webkrunk.

Let us assume that, just like everyone else, you are building a website–after all, the Web is where it is all happening now. As soon as your website goes live–and especially while you are still in the design and development phase–you need to make sure your site’s content will be found through search engines such as Google, Yahoo!, and Bing where many people go to look for information.

Whether you’re starting a blog or deploying an e-commerce solution for your clients, it’s a good idea to keep in mind some good web development practices that will enhance your chances in search rankings.

This article follows up on a previous Six Revisions post called 9 Ways To Improve the SEO of Every Website You Design, sharing with you a few more tips for improving the search engine optimization, semantics, web accessibility, and interoperability of your web designs.

1. Use Flash Wisely

Don’t call me patronising–it goes without saying–but try not to use Flash when HTML/CSS should be used. Flash has its place on the Web: it’s great for interactive components such as sophisticated learning activity games with audio and video, and 3D animation. It’s better served as components of an HTML/CSS site than as the technology that powers the entire site. For example, check out Kongregate, a popular social Flash gaming site. Although Flash is their bread and butter, they still use HTML, CSS, and server-side scripting to power their site functionalities.

Flash can be SEO-friendly and web accessible, however, it’s more difficult when compared to using open web languages like HTML, CSS, and JavaScript.

2. Use Gracefully-Degrading JavaScript for Hidden Content

If you are hiding and showing content on a web page, it’s best to use JavaScript so that the content is still within the web page’s markup. This is not only good for web robots such as search engines, but also great for those that use screen readers.

A good test to see whether hidden content on a web page is viewable by web crawlers is temporarily disabling JavaScript and determining if you can read your hidden content. You can do this from within your browser settings, but more conveniently, you can use a browser plugin like Web Developer Toolbar.

3. Name Your Image File Names Accurately

It is easy to forget how important images can be for SEO and web design alike. Name the actual file correctly by giving it a key term (e.g. yellow-banana.jpg and not some random name like img2gtc92.jpg) because this gives your site assets extra context. Make sure that you give the alt property of the image similar key terms and a decent and succinct description–aim to keep it 10 words or fewer.

In addition, Google Images is another way to get traffic to your site, and if you name your image files well and give them excellent context through their alt property, you will improve your chances of showing up in Google Images results.

4. Don’t Drown Your Home Page with Links

Internal linking–hyperlinks that point to other web pages on your site–is important, so try not to have more than 150 links from page to page so that you don’t dilute your web pages’ rank.

Too many internal links can overcrowd the page and can also slow down your users’ ability to find the link they need.

5. Don’t Use Redundant Links

Some may think that increasing the value of a particular page involves repeatedly linking to the same page from another page. Search engines will only count the first instance of that link, so there is no need to repeat links. In addition, this is a poor practice that will confuse your users.

6. Deep Linking Can Improve Conversions

Deep linking are links that point to internal pages instead of the main/home page. It is a fantastic way for you to send power to pages deeper in your site outside of your home page. Deep linking also promotes the exploration of your site by visitors, providing additional points of conversions.

7. Have a Blog

Blogs are a great way to keep building fresh content on your site and targeting long-tailed key terms. A possible idea is to bring snippets of blog posts onto related pages for fresh content on these specific pages.

8. Make Your Brand Obvious

Make sure that your branding is very clear and that your brand name is obvious on your website. This makes for an easy way for people to remember who you are and augments the possibility of people searching for your brand name on search engines. Being searched by your brand’s name also means that you won’t compete with generic words that people often use in searches (i.e. "budwieser" versus "american beer").

9. Use an XML Sitemap

An XML Sitemap is a protocol that aids search engine crawlers gain contextual meaning about your site’s web page.

If you’re using a content management system, see if it has an XML Sitemap extension (or built-in feature) that will automatically generate the XML file for you. If not, you can use a tool like XML Sitemaps Generator.

10. Use Anchor Text Accurately for Deeper Pages

When linking through to your deeper pages, use your anchor text as precise and short pieces of information. It is important to use keywords that search engine bots can relate exactly to your page. For example, if you’re linking to a web page about Maldives holidays, your link should be <a href="/maldives-holidays.html">Maldives holidays</a>. This way people, as well as web robots, easily know what they are going to get.

Related Content

• Make the Most Out of Social Media
• Optimizing WordPress for Search Engines
• 15 Tools for Monitoring a Website’s Popularity
• Related categories: Website Management and Content Strategy

About the Author

Mark Cronin heads up the SEO team for a Safari holidays Tour Operator. Follow mark on Twitter as @MarcusSeo.

We all want to grow in the things we do, and in the field of web development, one of the main areas that we spend a lot of time on is our code. This could include HTML, CSS, JavaScript, PHP, Python, ActionScript or any other language that you may choose to use for building websites.

In this article, I’ll share some practical steps that you can take to expand your skill set and become a better coder. I would like to propose five different habits that you can adapt in order to help yourself become more excellent at what you do.

1. Focus on One Type of Language at a Time

If you are designing and developing for the web, there are often numerous different languages that you will need to familiarize yourself with, and it can be tempting to try to learn them all at once, especially considering how interconnected they all are.

I suppose that, to some degree, this is inevitable. But if you really want to improve quickly, I recommend focusing on one particular area of expertise. Do you want to get better at using CSS? Put your focus on that. Try using a single HMTL document and creating various layouts using nothing but styles. The CSS Zen Garden is a great example of how incredibly different your web page can become for the same markup. You can also focus your efforts by finding a list of elements and working through them. For instance, if you are comfortable with CSS2, but want to improve your understanding of what is possible with CSS3, you could study CSS3 properties and start working through them one by one. You can read the current CSS3 specifications. You can experiment with each module to see what it can (and cannot) do on what browsers.

You could use a similar approach to scripting languages like JavaScript and PHP, though trying to work through all of their functions methodically might be a little tedious. Another option would be to work through a number of tutorials specifically on these languages, preferably in the specific area that you work in the most.

Do you need to become better at WordPress development? There is a ton of tutorials about that. Want to learn more about server-side image manipulation? There are tutorials for that too. Find them, bookmark them, and work through them — just don’t do it while you are also going through tutorials about CSS, HTML5, or any other web language so that you’re not spreading yourself too thinly.

Pick one and stick to it until you master it, then move on to the next.

2. Write Your Logic through Comments

When it comes to coding, there are many tenets and ideas I stand by. One of this is that code is 95% logic. Another is that logic doesn’t change when translated from human language into a programming language.

What this means is that if you can write it in code, you can write it in a spoken language like English or French.

For example, suppose that I wanted to write a function that would either lock or unlock something based on the time of day (for what reason, I’m not sure). Instead of just jumping into coding the function, I could step back and write the logic in plain English as comments.

Example

// FUNCTION: Lock On Time
// This function will accept two time values, indicating the range through
// which it should return an unlocked status.
  
  // Create a new data object

  // Using the data object, get the current time
  
  // IF the current time falls within the range passed to the function

    // Return false – meaning that we are currently unlocked

  // ELSE

    // Return true – meaning that we are currently locked.

  // ENDIF

// END FUNCTION

Here, we have the complete logic structure for our function, which is almost analogous to a blueprint in building a house. From here, I can then start adding in the actual code, allowing the comments to guide the process.

Obviously, this is a very simplistic example, but I do use this technique on a regular basis when I need to build a function that is notably more complex. This way, I can think through the full logic and try to iron out the wrinkles before I actually get into writing the code. I’ve found this to be an incredibly valuable habit that tends to result in fewer bugs.

As a bonus, since I will rarely actually delete the comments, writing the logic through comments also means that my code will already be documented, making it easier for others to follow my logic if they ever have to work on it, or even just for myself, if I have to come back to it several months or years down the road!

3. Study Templates, Plugins, and Open Source Code

The web is an incredibly accessible and open place, especially in the design a development communities. This disposition of the web can be a valuable resource for anyone wanting to become a better coder.

For example, if you’re really just getting started with HTML, you could download any of the innumerable free templates that exist out there on the internet, or study your favorite site’s markup. Because these templates are typically just plain HTML (and CSS, and maybe JavaScript), they’re able to work locally, giving you the opportunity to open up the source and start digging around. Play around with tags and structure to understand them better. Move things around. See what happens when you modify a style rule.

Of course, I would highly recommend coupling this experimentation with reading some solid resources about standards and best practices. After all, you don’t want to find yourself getting into bad coding habits.

This technique is probably even more useful for programmatic coding like JavaScript or PHP, which are quite a bit more complex than HTML or CSS in terms of scope and logic.

For instance, a content management system like WordPress is built almost entirely upon a foundation of various PHP scripts that all work together to establish the core functionalities. The publishing platform also supports a vast and powerful architecture for extending that core functionality, allowing you to download and install plugins that do all sorts of cool (and sometimes entirely mundane) things.

The benefit of all this is that WordPress and its plugins are entirely open source, meaning that you have complete access to all the code. So, go ahead and take advantage of this fact by digging into the plugins and poking around the code. Again, this is a great opportunity to try things and experiment.

One last word of advice on this habit: Never take the techniques or structures that you find in other people’s code as definitive (or "gospel") — be sure that you’re also trying to understand what’s going on and not just mimicking someone else’s code. Always ask why things are the way they are. Always try to consider the code as it relates to the accepted processes and standards for that particular language. Again, this will help keep you from slipping into some bad habits.

4. Read Books

While there is a ton of awesome information on various blogs out here on the web (like right here on Six Revisions), there is still nothing quite like reading a good book on a subject. Blogs are great for articles and tutorials on specific subjects and can work wonders for quick tips, but in my view, nothing beats a good book for helping to build a strong foundational understanding of a larger subject.

This has never been made clearer to me than when I finally grew tired of the table-based layouts that I had been creating in the late 90s and into the early 21st century. At that time, I finally realized that it was time for me to switch over to best practices (divs).

However, up to that point, I only had moderate success trying to teach myself how to use proper markup. I didn’t fully understand CSS selector syntax, which is such a huge part of grokking div-based layouts. As such, I really didn’t get pseudo-classes either (such as :hover), and the whole concept of specificity and inheritance meant nothing to me. The same was true of positioning and floats.

Now, I could probably have learned the language slowly, piecing together bits of information from various blogs (of which there were far fewer at the time, I might add) to form a more comprehensive picture of CSS as a whole. That would have taken a lot of time and I had jobs to do, and so I was looking for a more expedient solution.

So, I went out and bought Stylin’ With CSS by Charles Wyke-Smith. It was a revelation. In just a few short chapters, I had the basic concepts of CSS down. All those things that I didn’t even know existed were made known to me in a well-paced and organized fashion, with each chapter building on the one before. In about a day’s worth of reading, I gained the same amount of knowledge that would have taken me weeks and months to pull out of a wide assortment of articles and blog entries.

Of course, I’ve learned a lot more since then, but this single book was really the foundation of my CSS knowledge, and I still keep it on my shelf as a reference (it has a really handy appendix).

If you need to dig into a new technology from scratch, a good book is one of the best ways of going about it!

5. Experiment

The last thing that I would suggest you should get in the habit of is to just have fun. Sit down, experiment and see what you can come up with on your own.

Currently, this is a popular trend with CSS3, as different coders try to push the technology and techniques in order to discover what it is truly capable of.

Here are just a few examples of such experiments.

CSS3 Transforms & @font-face Experiment

This is a really cool experiment that creates a poster-like typographical design using the @font-face CSS property, along with some shadows and the amazing rotate transform, which, when fully supported by all browsers, will open all kinds of amazing new possibilities in web design.

CSS Posters

In this article over at Design Informer, Jad Limcaco experiments on creating a number of different poster designs using nothing but CSS.

Pure CSS Line Graph

There are tons of different tutorials out there that demonstrate how to create bar graphs using CSS. This one uses a different approach to visualizing data by using an actual line graph. Depending on your point of view, you might not think it’s "pure" CSS since it makes use of a giant sprite, but it’s still pretty darned cool.

CSS3 Leopard-style Stacks

This article illustrates an excellent attempt at trying to recreate a non-web effect using CSS by visually emulating one behavior from the Mac operating system. It’s pretty well done too, so check it out to be inspired.

Pure CSS Twitter Fail Whale

Not all CSS experiments are entirely practical, of course, and this one is probably the least practical of all as it actually recreates the well-known Twitter fail whale illustration using nothing but CSS. Is it time-consuming? Yes. Is it practical? No. But it’s certainly fun and is a proof of concept of how powerful CSS is.

All of these experiments do compelling things with CSS. Some have more real-world applications than others, but I’m sure that all of their creators actually took something away from their exploration of CSS; perhaps a better understanding of the particular CSS properties they were working with or a few techniques that they will be able to apply to actual site designs.

What kind of coding experiment can you undertake? It can be a fun and effective way to learn.

Some Parting Words

So there you have it: five different habits to take on to improve your coding expertise. Not all of these will be relevant to everyone, but I hope that you will be able to find at least one habit that appeals to you.

Remember that this place called the internet is always growing and evolving. Being a great coder means a lifetime of learning and growing.

I hope you enjoy your journey.

What are other good habits to get into as a coder?

Related Content

• Why Designers Should Learn How to Code
• 10 Puzzle Websites to Sharpen Your Programming Skills
• Collaboration Tips for Designers Working with Developers
• Related categories: Web Development and Web Design

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. Check out his blog to read posts on design. You can follow him on Twitter.

This article is a general overview of making iPhone apps using the iPhone software development kit (SDK).

In order to start making your own iPhone apps, you’ll need to sign up for a free Apple Developer account and download the iPhone SDK.

What’s the iPhone SDK?

Apple has bundled a ton of great resources into a mega 2GB download that contains help files, documents and three very important apps: Xcode, Interface Builder and iPhone Simulator. All of these apps also work for the creation of iPad apps.

Let’s take a quick look at the three apps and see what they do.

Xcode

Xcode is the integrated development environment (IDE) of the SDK and the main app you’ll be using when creating your apps.

It’s similar in interface to the popular Coda IDE for website development, but it’s much, much more powerful since it’s built to specifically handle Objective-C (the programming language used on Mac OS X and iOS) and Cocoa (Apple’s development framework).

When coding, you’ll find that Xcode offers code completion and hints that can greatly speed up your development time. Typing in 3 or 4 characters will often result in Xcode choosing the right method or option you’re trying to type and even remembers classes and object names you’ve created. Xcode also comes with documentation that can be accessed by pressing the Option key and doubling-clicking on the methods.

Xcode offers different project types depending on the kind of app you’re planning on building. Projects are the files and resources that make up your app and they’re bundled together by the SDK. Most of them never need to be edited, but are required for the app to run.

Starting a New Project in Xcode

If you go to File > New Project (Shift + Command + N), you’ll see the different project types that Xcode offers.

The View-Based Application option is probably the most common type for beginners. Select it, hit the Choose button and then give your project a name and a place to save it.

Choosing a project type allows Xcode to build and link the core files and resources together.

The left-hand column is called the Groups & Files pane. The Groups & Files pane contains all of the files and resources that were created when you selected the View-Based Application project type.

If you expand the tree underneath the name of your project (using the triangle), you’ll see that there are five folders contained underneath it. Let’s go over what these folders are.

Classes folder: Most of the time, you’ll be using the files contained within the Classes folder. The Classes folder simply contains all of the Objective-C classes you’ll be creating. The two most important files you’ll be editing are called your_project_name_ViewController.h and your_project_name_ViewController.m.

Other Sources folder: This folder contains all of the classes that aren’t in Objective-C.

Resources folder: The Resources folder contains all the files, images, sound files, movies, etc. that belong to your app. Any resource you want to use within your app has to be placed here while in test mode unless you’re using the iPhoto or Address Book APIs. This folder also contains your your_project_name_ViewController.xib file. Doubling-clicking this file opens up Interface Builder, allowing you to begin seeing what the user sees (more on this topic later down the article).

Frameworks folder: The Frameworks folder can contain both code and resources and common frameworks that are already included.

Products folder: The Products folder contains the actual app that is produced when you compile your project. If you expand this folder without having compiled your project, you’ll see you_project_name.app in red because it won’t exist.

Xcode’s Detail Pane and Editor Pane

In the right-hand column, you’ll see we have two different panes. The top pane is called the Detail pane and it shows you information about the files inside Groups & Files. You probably won’t use this pane very often, so you can minimize it some by clicking and dragging up the bottom portion.

The pane beneath the Detail pane is the Editor pane. This is where all your coding happens! If you click one of the files under your Classes folder in the Groups & Files pane, the file will appear in the Editor where you can then work on it.

Now that we’ve taken a tour of Xcode, let’s check out the second most important app: Interface Builder.

Interface Builder

One of the coolest things about iPhone development is that making the apps requires a lot less code than you would think, thanks to the Interface Builder.

Open Interface Builder by double-clicking the your_project_nameViewController.xib file under the Resources folder in the Groups & Files pane of Xcode. Interface Builder opens as a series of four windows.

You can think of the Interface Builder as sort of a visual WYSIWYG for the iPhone, but it’s much more than that. It never produces ugly code, and in fact, you’ll never see the code. It’s also built with Apple’s design guidelines and grids to ensure you’re app doesn’t come out as the ugly stepchild!

The Library window gives you all the views and controls that you can simply drag and drop onto your interface (the module marked as "Window").

The Inspector window is where all of your settings and controls lie. This window actually contains four different views that you can access by clicking one of the top icons or by pressing Command + 1-4 to access each view.

Attributes: The first window shows the object’s attributes. You can change fonts, colors and sizes from this window.

Connections: shows the available ways you can connect the object to an action. For example, buttons have a ton of connections such as Touch Up Inside and Touch Drag Outside that all correspond to how a user may interact with your object.

Size: The Size window allows you to adjust the size, alignment and positioning of the object on the window. This view will be most helpful when dealing with repositioning of the app due to horizontal and vertical views (rotation of the iPhone).

Identity: This view is less used than the others but it gives you the ability to set class names, as well as what the object is and does.

Other Important Features of Interface Builder

The smaller window marked your_project_nameViewController.xib contains icons that represent each Objective-C class that was created when you started a new project — with the exception of the first two icons.

The first icon — File’s Owner — represents the object that loaded your .xib file (which is commonly referred to as a "nib" file — confusing, I know).

The First Responder icon represents the object or control the user is interacting with — for example, a text field or a button.

The coolest thing about Interface Builder is how it connects to Xcode. After you’ve coded your objects and actions in Xcode, you’ll switch over to Interface Builder to create what the user actually sees.

Then, to connect the objects in Interface Builder to what you’ve coded, you simply Command + click and drag from the File’s Owner icon in the Untitled Window to the object to assign it. You can also do the same to assign an action to the button.

iPhone Simulator

The iPhone Simulator does just what it promises — it gives you a realistic simulator of how your app will look and work on a real iPhone. It even allows you to hit the Home button to view the app’s icon.

You can also use the simulator to view apps on the iPad and even to open Safari and view websites on.

Testing on a Real iPhone

If you want to use a real iPhone to test on, you’ll need to pay Apple’s Mac Developer Program membership fee. An Apple Developer account is free, but in order to put your apps on your own iPhone or sell it in the Apple Store, you must sign up and pay $99 for the privilege.

Further Reading on iPhone Apps

Now that you’ve taken a tour of the SDK, it’s time to start building apps! I’ve been using a ton of resources to help me learn more about the process, so I’d thought I’d share a few of my favorites with you here.

Beginning iPhone 3 Development by Dave Mark

This is an excellent book for beginners. The apps work (no code errors) and it’s easy to follow along even if you have no Objective-C experience.

OnMacDevelopment

This is a video podcast offering tutorials and topics on Mac and iPhone development.

MobileTuts

I tend to skim through these posts quickly, but they often have interesting topics.

Rework and Getting Real by 37signals

While not specifically about iPhone apps, these two books can inspire you in the business side of making apps, launching your projects well, and development practices.

Have you used the iPhone SDK before? What are your thoughts on it? Do you have any excellent beginner resources to share?

Related Content

• How to Make an HTML5 iPhone App
• 10 iPhone Apps Every Web Designer Should Know About
• 20 Killer iPhone Game Designs
• Related categories: Web Development and Tools

About the Author

Amber Weinberg is a freelancer with over 10 years of experience. She’s the founder of codesnipp.it, a social site for developers. She specializes in clean, semantic and valid 1.0 Strict XHTML, CSS and WordPress development. She also writes a web development blog on her portfolio site at www.amberweinberg.com.

When it comes to Flash, there are some conflicting views. There is a misconception that that Flash web pages are not seen by search engines and can’t be indexed at all. Others reckon that Flash sites are not user-friendly and load for ages.

If you are one of those individuals who’ve overlooked and ignored Flash as a viable CMS, I hope this post will make you look twice.

1. FlashMoto Flash CMS

FlashMoto Flash CMS Demo

FlashMoto is an advanced Flash content management system that allows users to create fully editable, extensible and SEO-friendly Flash websites and easily manage them. FlashMoto is intended for Flash developers, freelancers and design studios that are engaged in creating custom Flash sites or modifying web templates. It provides an opportunity to create a website of any complexity, starting from an online business card to a full-fledged portfolio.

So far, there is no way to create multiple accounts for the CMS. In theory, FlashMoto allows the replacement of one template by another (but profound Flash skills required).

System Requirements

• PHP 5.2+
• Zend Optimizer v3.3 and higher

Pricing

The standalone version of FlashMoto CMS costs $199, while one template + CMS costs around $250.

2. Royale/CMS

Royale/CMS Demo

Royale CMS is a rebrandable content management system created by an interactive agency for agencies and freelancers. With this CMS, you may create the structure that fits your design. They make an emphasis on the rebranding feature: users may upload their own logo and change the colors. Royale CMS is specifically designed for websites that typically use external XML data.

System Requirements

• Apache 2 (or higher) with mod_rewrite
• PHP 5.2 with GD library 2 (or higher)
• MySQL 5.1 (or higher)

Pricing

One license costs $199.

3. Saffron Flash CMS

Saffron Video Tour

Saffron CMS is a WYISWYG content management system for Flash-based websites. It is a set of seven readymade components and a controller component that can be incorporated into a Flash-based website and the website content can be updated without leaving the browser window.

System Requirements

• Adobe/Macromedia Flash MX/MX 2004/8, or Flash CS3 (Windows or Mac)
• ActionScript 2.0

Pricing

Saffron CMS costs $129.00.

4. fCMSPro

fCMSPro Screencast

fCMSPro is a Flash component from Flashloaded. It is a solid Flash content management system that provides a lot of useful features for fast and easy Flash website management. Like any other CMS, it makes it possible for users to update content directly on a live website. Websites created with fCMSPro are search-engine-friendly.

System Requirements

• Adobe/Macromedia Flash 8, Flash CS3+
• Flash Player 8, 9 or 10
• ActionScript 2.0
• PHP version 4.3.0 or higher
• MySQL 4.1.1 or higher

Pricing

fCMSPro costs $ 299 (per website).

5. Yooba CMS

Yooba CMS Live Demo

Yooba is one of the convenient Flash content management systems that allow users to create rich-media content without having to be a programmer. The user interface looks and works just like any application installed on your computer. Yooba comes in two different account types: Professional (monthly subscription) and Enterprise (annual subscription).

System Requirements

As hosting is included, you don’t have to worry about the system requirements.

Pricing

Yooba price depends on the account type and subscription period.

6. Flashblocks

Flashblocks Live Demo

Flashblocks is a simple Flash content management system aimed mostly at Flash designers. It provides easy ways to create, update, and arrange Flash content from any web browser.

System Requirements

• Flash MX, 8, CS3, CS4 or CS5
• ActionScript 2.0
• PHP 4-6 on the server and GD2.0 for image processing

Pricing

Flashblocks initially costs $240 with additional licenses being substantially less.

7. FlashContentManager

FlashContentManager Demo

FlashContentManager is a simple File Manager developed for Flash websites with external content that allows users to update text, images, SWFs, MP3s, etc. directly on a live website. It is aimed at both Flash designers and end-users.

System Requirements

• PHP enabled server
• GD extension in PHP

Pricing

FlashContentManager costs €50.

8. Flypaper

Flypaper Demo (Registration Needed)

The Flypaper Platform was designed specifically for agencies and companies that create and use interactive content. Non-technical users can create content without Flash skills and programming knowledge.

System Requirements

• Windows 7, Windows Vista or Windows XP (Service Pack 2 and above)
• 1GHz Pentium processor or higher (2GHz, dual core processor recommended)
• 2 GB of RAM (4 GB recommended)
• Adobe Flash Player version 9.0.115.0 or later (included)
• Microsoft .NET Framework 3.5 SP1 (*install .NET before installing Flypaper*)

Pricing

The price depends on the subscription type and the number of modules available.

9. Maki CMS

Maki CMS Demo

Maki is another simple content management system that allows users to build and update Flash-based websites. Maki provides a range of readymade templates that you choose and customize.

System Requirements

There are no system requirements as all Maki CMS websites are hosted on their server.

Pricing

The price (€164–€406) depends on the subscription type.

10. Flint CMS

Flint CMS is a simple Flash content editor that can be integrated into your own content management solution. It can be used with the news manager, product catalog or anything else.

System Requirements

• PHP server
• GD plugin

Pricing

The site license costs €49.

Related Content

• How to Evaluate What CMS to Use
• Issues with Apple’s Decision to Block Flash
• Adobe Flash Accessibility: Best Practices for Design
• Related categories: Flash/Actionscript and Website Management

About the Author

Tatiana Titkova is a copywriter/marketing specialist interested in web design, development, SEO, and SEM/SMO currently working for FlashMoto.com – an advanced Flash content management system provider. You may connect with her on Twitter.

Whether theming an e-commerce website or doing a full-scale build, one of the most important parts in the whole process is the planning. Planning a build before you start can sometimes seem like a bit of a tedious and time-consuming task, but not only will it make everything run a lot smoother, it will also save a lot of time.

You may be wondering where you even begin, and that’s what this article will help you answer.

What Do You Want Your Site To Do?

Let’s start at the beginning. Since we are talking about an e-commerce site, I’m guessing that the aim is to sell something. We need to figure out ways to make it more compelling to buy that something.

Try to make it as easy as possible for the customer to buy your products. The well-known three-click rule applies here: You want your customer to get to what they are looking for in three or less clicks. Any more, and they may just give up. The user interface should be a primary subject to plan for.

Who’s Going to Buy From You?

Another important factor to take into account is your audience. This is something that you should consider researching properly; knowing who will want to buy your products is something that influences your design.

Do You Require Special Site Features?

Depending on what you are selling, you may need features that other e-commerce sites do not. For example, a clothing e-store may need a refined search so that the customer can filter a search by colour or brand. Alternatively, you may want to allow the customer to use coupon codes. You should plan what features and functions you think you need or want to add.

What Are Your Limitations?

Everyone has limitations — work out what yours are when you are building your site. Do you have a budget for the build, and if so, how will this limit what you can do? What technical limitations do you have? Is there any part of the build that you won’t be able to do by yourself? How does the technology limit your build?

You can do nearly anything with enough hard work, but remember that not everything will be possible.

Do You Have All the Tools You Need?

It depends on how much of the build you are doing, but you will probably need graphic editing software (i.e. Photoshop, Fireworks), a web development application (i.e. Dreamweaver), e-commerce and online store management software (i.e. Magento, OSCommerce, etc.) and the obvious things like a domain name and web hosting.

What E-Commerce Platform Are You Going to Use?

Since we are talking about e-commerce, we should take into consideration what’s going to power our website. There are countless of e-commerce platforms out there, and one of your tasks is to find one that fits your needs.

Depending on your knowledge and what your needs are, there are a various number of options that you would be able to use. If you think that you have quite a comprehensive knowledge on the subject, then maybe you should consider going for an open source cart or even building a platform yourself. If not, then there are also hosted carts to take into account.

Let’s have a look at a few platform options from different categories.

Magento

Magento is probably one of the most popular open source carts in the e-commerce platform market and, in my opinion, is probably the best free cart out there (there are also enterprise and professional versions with a yearly cost that will provide additional support).

Magento has some awesome features including analytics integration, capability of wish lists, multiple images for products, advanced product filter search, advanced customer service, tonnes of payment methods, marketing/promotional tools and so much more.

Recently, Magento has also released the world’s first mobile commerce platform. This could be very interesting, even more so now that smartphones with huge screens (such as the iPhone) are all the rage.

Shopify

Shopify is a very interesting hosted platform. Compared to something open source and self-hosted like Magento, it is extremely simple to set up, manage and update. You could have a site running within minutes if you wanted to.

But Shopify does have a slight lack of features (by intent — to keep things simple), its price is a monthly fee plus, on top of that, a commission for every sale, and a hosted platform means you have less control of your platform (which isn’t necessarily a bad thing for people who just want things to work).

Content Management Systems With E-Commerce Addons

Another alternative that has recently arisen is that of WordPress, Drupal, and Joomla! shopping cart plugins, giving these content management systems e-store capabilities. There are a few, including eShop, Shopp, and Wordpress MiniCart. This is great if you want a quick add-on for you existing site, but not perfect if you want a fully manageable e-commerce site.

Custom E-Commerce Site

An alternative to all this would be to go the DIY route and build your own platform. Of course, this will need a fair bit of web development knowledge and also a lot of time. But putting in all that work could be worthwhile if you have highly customized needs. Plus, if you build it yourself, you’ll be guaranteed full ownership of everything, including your code base.

Case Examples of E-Commerce Sites

Do a little bit of research into what other e-commerce sites are doing right and wrong. Try to learn and consider all your findings when you’re building your e-store.

Let’s have a look at some of e-commerce sites.

Amazon

Amazon is the world’s largest online reseller, but what makes the site so brilliant? One of the main factors is the simplicity of the site: Even though it looks cluttered, it’s still easy to navigate and find what you are looking for. For example, think of any product you want to buy right now: You’ll probably find it or learn that it isn’t available on Amazon.com within three clicks.

Amazon also boasts about its customer service and if your customers are happy, then you’re doing a good job.

Other huge e-commerce sites you should look at are Zappos, Threadless, and ThinkGeek.

Google Product Search

Google Product Search is not really an e-commerce site, but it’s worth looking at to illustrate an important concept about planning and building e-commerce websites: simplicity is important. And if we can think of one company that excels in this concept that best, it’s Google. Google has been known for its simplicity since the beginning and this remains the case when using its product search.

Google Product Search is also great for when you have your e-commerce site up and running as well: By uploading a list of your products to Google Product Search, you open a whole new portal to your online shop.

Another remarkably simple but successful e-commerce site to look at is Woot.

Shoe Guru

Now that we’ve had a look at the largest, let’s have a look at some smaller e-commerce sites. ShoeGuru is an amazingly simplistic site, and its design is perfect for displaying their clothing products. The design comprises of a nice graphical site that gets the message across.

Doorstep Dairy

Doorstep Dairy is a great example of a great-looking site that is both fun to use, yet still easy to purchase from.

Nation Toys

Nation Toys is an excellent and colourful site that compliments the vibrant products they sell.

Crocs Store Romania

Crocs Store Romania is probably the best version of the Crocs site (for some reason they have designed the sites differently for each region).

Mock-up and Design

Once you’ve done your planning, what do you do next? Well, everyone works a different way, but you may want to make a mock-up or wireframe of what your site will look like. Some people like to go straight into Photoshop or other design software at this stage, but personally I like starting out with pencil and paper (very old fashioned, I know) because  it’s easier for me, but it may be different for you.

If you do decide to start out the old-fashioned way, try Paper Browser: You just print out the templates and draw on them, giving you a true perspective on paper.

Related Content

• 80 Examples of Add to Cart Buttons for Design Inspiration
• 30 High-Quality Icon Sets for E-Commerce Designs
• Mobile Web Design: Is it Worth It?
• Related categories: Web Development and Website Management

About the Author

Kyle Prior is a young web developer for hpinkcartridges.co.uk specializing in branding and front end design. Visit the website for surprisingly low priced HP ink cartridges. Follow Kyle on Twitter as @HPCartridge.