We as a community and as an industry have become very good at most aspects of building websites. Just looking through a few CSS Galleries clearly shows the quality of design that is being produced and how much it has improved in just a few years. If you look a layer deeper and view the source of these websites you will see beautiful and semantic XHTML/CSS. It seems the days of table based layouts is finally gone.

The amount of functionality and rich experience that sites have now day are creative, impressive and engaging. Powerful javascript libraries such as jQuery, MooTools and prototype make it easy to produce these experiences rapidly and effortlessly.

But a website is more than the design, code and effects/functionality. Sometimes we have to rethink our approach and find out what is really important. What are the sites objectives and what are our users objectives? More often than not you will find that you could improve the following areas of your websites:

1. Web forms

While they are far from the sexiest part of web design, web forms are arguably one of the most important. In almost all cases a web form also functions as a conversion point (a point where a user performs an action that accomplishes a site objective).

Here a user is going to enter in some of their personal information so that they can get something in return. This establishes interest and provides the site owner with some valuable information.

Web forms are often neglected in two ways:

1. There is not enough attention in making them usable. This could be poor validation, improper labeling of required fields, making them too long or poor form layout.
2. There is not enough attention to what information is asked from the user.

You have a real opportunity to learn more about the people who use your website. That information can not only help you build a better website but also a better business. This marketing information could easily lead to R&D improvements and better products.

Do some research and learn how you can make more effective forms. Your clients, bosses and website owners will thank you many times over.

Resources

• Web Form Design: Filling in the Blanks
• Web form eye tracking studies

2. The Content

Content is king. In a recent study 25% of users noted that the number one reason they were to leave a website was due to "weak web copy." The only reason anyone ever goes to any website is because of the content, yet so many website owners neglect the content. Despite it's importance content becomes an afterthought. Appearance, search rankings and conversions tend to be the focal point of most web design projects. What we may forget is that with out great content you still have a poor appearance, you won't rank high and no one will convert.

Rather than trying to write all of the content yourself, hire someone. It will be worth it, I promise you. If nothing else write the bulk of the copy and hire someone to make it consistent with the proper voice and tone.

Resources

• The Web Content Style Guide: The Essential Reference for Online Writers, Editors and Managers
• Quality Web Content

3. The Footer

With a little thought it becomes painfully obvious, most website footers are absolutely useless. A user takes the time and effort to read (or scan) through an entire page, and when they reach the bottom they are rewarded with links that don't fit anywhere else, a copyright notice and maybe an address and phone number.

The point where page content ends is a very high action zone. That means that users who get to that point have a high probability of clicking on any link that comes below it. Rather than some meaningless legal links and an address create a footer that gives the user a place to find additional content that may interest them.

This could be:

• Related pages / articles / posts
• Links to rich media
• Latest news / updates
• Previously viewed pages
• A contact form
• Ways to save / share the page
• Newsletter sign up

Resources

• Footers in modern web design
• Footers with great usability

4. The Print Version

Many designers fail to realize how many people still prefer to print off websites rather than try and read them on screen. There are two significant benefits to paying attention to the print version.

The most obvious benefit is that it can improve the user experience of the site. Users who visit your site and print it out will actually read the content and are more likely to revisit the site and make an action (or conversion). If the printed version is difficult to read and work with they are highly likely to simply recycle the paper and forget they ever visited your site in the first place.

The second benefit is it could be a real competitive advantage. If a user prints off two web sites, and yours clearly has more attention to detail in the print version, they are much more likely to use your product/services over the competitors.

You can improve the print version simply by:

• Turning off unnecessary items such as the header, footer, navigation, search box etc...
• Changing the font to serif, increase the font size and space out the line height to make the print version more legible
• Adjust the columns or remove sidebars so that only the primary content prints out

Resources

• Print style sheets, a definitive guide
• Pro CSS Techniques

5. Analytics

How users behave and use a website is one of the most important factors you could possibly focus on. Despite this fact it is so commonly neglected by both website owners and website designers. Businesses need to spend more money on the analysis of user behavior and web design companies need to promote the service more heavily.

Even a website that is built using an effective strategy, user testing and best practices is a best guess at what will be most effective.

If you actually pay attention to how users behave and analyize that behavior you can discover countless ways to continually improve your website.

• Are users leaving a specific page more than others? Maybe they are not finding what they are looking for and that page can bet altered
• Do you have a page where a lot of people are entering the site other than the homepage? You need to start thinking of those pages as landing pages
• Are there important pages that don't get a lot of traffic? Figure out how you can make those pages more prominent

Resources

• Web Analytics: An Hour a Day
• Occam's Razor - web analytics blog

Sometimes rediscovering these capabilities are valuable for creating new ways to add creative touches, such as the parallax scrolling effect. Other times they can greatly improve the usability and user experience of our sites. In some cases they do both.

I was recently reading through "The Elements of User Experience
," which opens with a compelling story describing why things going wrong in your day could be the fault of poor design in regards to usability. Interestingly enough one of the points covered in this section is the use of feedback as a way to notify a user that something has occurred.

View the demo here

Most Web Designers Fail to Take Advantage of :active

In the case in the book they mention a coffee pot beeping so you know that it was switched on. This same principal of offering a user basic feedback applies to the web, yet we rarely see it used in all instances it can.

We have had the ability to style a links :active pseudo selector since CSS1, yet when was the last time you actually used it? I will admit that I am a grand offender as well, as I couldn't tell you. However the value of such a subtle detail can have large benefits  to a users experience of the site. Not to mention it does give another avenue to enrich the interactivity of our interfaces.

An Common Example

If you have ever done any usability studies you will have probably run into a situation where things that seem incredibly simple end up taking significant amount of time. One of the most basic of these situations is that of clicking on a simple link. I have many times in my "behavior observing" career seen a user who thinks they have click on a link, despite having missed it slightly.

What follows is a long pause while they wait for the page to change, before getting frustrated and either blaming the internet, the site, or swirling the mouse to ensure the computer hasn't locked up.

This could all be solved by simply giving the user feedback when a button is clicked. Interestingly enough flash based websites have done a better job through out history of accomplishing this than most HTML sites, done so by adding a subtle "clicking" noise as a link is clicked.

Of course I am not advocating the use of sound (as it fails on several accessibility levels among other issues), however it wouldn't be hard to give the user some feedback to let them know the link was successfully clicked on.

What We Can Do

By using the :active selector in CSS we can give the user some feedback that a link has in fact been clicked. This way if there is any sort of delay the user knows that it is successful loading and they don't have to reclick the link. This will make the site more usable and as more developers and designers begin to adopt this process the web itself will become more usable.

Additionally it opens up a new area for us designers to work our creativity. We can now think about what subtle design elements we can give links and buttons to indicate to the user that they have been clicked. In my example, a beveled button appears to be pushed inward.

It Isn't Perfect

Despite the fact that it is a dramatic improvement over not having any feedback and it does give us more room to express our creativity, the functionality isn't perfect. You may notice in the demo that if you click on a button quickly it changes so fast you might not even notice. You may not realize that there is even an effect giving you feedback.

Regardless, using :active will still enhance the user experience. Even if only 10% of your users notice it is worth the time and effort put into it. Additionally users who are less familiar with computers and the internet will be more likely to hold the mouse button down longer and thus notice the effect.

Consider Adopting it as a Regular Practice

I really advocate the adoption of it as normal standards based markup. If it becomes a convention than users will expect some sort of notification that a link was clicked and even it happens to fast on the pages that load right away, they know to look for it.

View the demo here

Writing/Blogging Workflow

1. Keep it updated. Publish it later. Keeping it updated can be a laborious, arduous task. In order to do something like this I highly recommend writing 2-3 articles at a time and publishing them later at another date.
2. Use Shortcodes. Shortcodes can save you a lot of time and provide you with text and bbedit type shortcuts. Using text like: [shortcode]. It replaces the need with formatting text and easily allows you to insert a template or snippet.
3. Editing offline? Use Google Gears to kick your writing abilities offline. While using Google Gears Turbo can write, edit things locally then sync them later.
4. Write posts via email: This is something people tend to forget about only because its such an unutilized feature. But with the ubiquity of smartphones it makes sense to write posts via email. (Thanks to @dmassad for the tip.)

Mobile Design

1. Do you have an iPhone? WordPress.org is creating an iPhone application just for the iPhone to keep your blog updated
2. Update WordPress by Text Message using Twitter Updater
3. iPhone themes for WordPress: WP Touch , iWPTouch

Backing Up Data

1. Importing and Export Feature – Keep your posts backed up on your server as well as multiple different places.
2. Use the Backup Plugin to automatically

WordPress with CMS Superpowers

Because of WordPress’ very attractive backend. Using WordPress seems like a very promising move. The following will make it happen:

1. Devlounge explores the pros and cons and possibilities of using WordPress as a CMS. What to consider if you’re using WordPress as a CM
2. Rewriting WordPress Functions: WeFunction Explores the idea of using wordpress’ add_meta_box as a means of creating seperate custom fields. I warn you it doesn’t look very easy. The tutorial is very well documented though.
3. Flutter is very promising plugin that allows awesome features such as editing in place as well as allowing many different post types. Also covered and reviewed here.
4. Darren Hoyt discusses the client-web developer/designer problems with making WordPress a CMS
5. How to “plan and think of WordPress as a CMS”
6. CMS Plugins: Looking for plugins to make WordPress a cms? Make sure you check out My Page Order , pageMash , Page Management Dropdown , PageRestrict, etc. (Source: Mashable)

Twitter Implementation

1. 10 Best Twitter tools for WordPress.
2. Find out who tweeted or retweeted your post using the Tweetback Plugin

WordPress Custom Theme Development

1. Use a Parent-Child Theme to rapidly jump-start theme development
2. Import Sample Content to help develop and refine your themes typography
3. Why reinvent the wheel when you can use a blank theme: found here , here , and a whole list of them here

WordPress is not perfect as a CMS however, and can you blame it? It was designed to be a blogging platform. They must have done something right if WordPress started as a blogging platform that simply works so well as a CMS.

This could all be part of the past now that Flutter has arrived. WordPress could easily be a fully extendable CMS with one of the best blogging platforms integrated into it. So many of the minor pitfalls wordpress previously had as a CMS are now gone.

Flutter is not a new plug in by any means. Released around wordpress 2.5, it has had time to pick up a little bit of steam. It seams it never really caught on because despite it's useful benefits it was confusing and difficult to install and maintain. To wordpresses recent credit, it didn't solve some of the more confusing "blog focused interface" that 2.5 and 2.6 still had.

However now coupled with 2.7 and a new release of flutter you can now create an amazing full fledged CMS capable of almost anything you can think of.

More About Flutter

Flutter was designed to combat two major issues that WordPress has when being used to administer and power web sites rather than blogs. Dealing with content that was more than just self formated text and photos, and an easy way to edit complex pages.

Custom Content Types

A typical example could be pages for the biographies of individuals. These pages likely have a specific format that all of them should adhere to. Name, Title, Skills, etc... Previously with WordPress you would create a blank page for each and have to try your best not to accidentally mess up the format. Of course you could try using the custom fields, but try explaining those to a client with out having their eyes glass over.

Now days you had better count on the fact that websites are going to be complicated enough where the simple homepage / innerpage templates are not going to be substantial. Websites will have different content types, a home listing, biography, portfolio page, etc... Flutter allows you to create custom write panels for different types of content. The write panels can have text fields, radio buttons, pictures, drop downs, etc... allowing the user to create a page exactly how they want it with out hassel or vast technical knowledge.

Edit in Place

The other example might be managing and editing pages that have both unique sidebar content and primary content. Before you would have to create a page for the sidebar, use a custom template to include that post into the sidebar before finally trying to teach a client how it all works. Very complicated right? Well it doesn't have to be.

Flutter also lets you specifcy editable regions of a page, like the main content, title, or sidebar. Using a bit of AJAX magic useres who are logged in can navigate to the page they wish to edit through the front end, click an edit button, and begin to edit that section with out even leaving the page.

This makes the CMS almost transparent. Your typical client is more familiar with the web from a users perspective, and this allows them to edit and manage pages the way they are most comfortable.

Slightly Complicated

While the usage and learning curve of flutter has improved, you should still expect to spend an ample amount of time your first attempt at using this plugin. The documentation while available, is sparce at best (not that you can really blame the developers, who are giving the plugin for free.)

The learning curve is well worth it. You can easily expect to save more time than you spend in reduced phone calls and e-mails regarding how to perform specific functions, tasks, or edits in WordPress.

If you decide to use it please let me know, leave a comment or email me and again thank you all for donations, have fun!

Demo
Here’s the demo HTML page

Download
Download aqueous theme (Downloaded 2026 times)

Donate
If you are considering using this theme please make a small donation

How to Install
1. Download the aqueous Zip.
2. Unpack, and upload to the wp-content/themes/ directory on your server.
3. Login to your admin area and set aqueous as the current theme.

This is just a simple, small template designed specifically for the blog obsessives. If you decide to use it please let me know. Also I would like to say thank you to people who have donated and to point out that i'm not responding to questions where link to this site is removed. Have fun!

Demo
Here’s the demo HTML page

Download
Download miniBlog theme (Downloaded 1435 times)

Donate
If you are considering using this theme please make a small donation

How to Install
1. Download the miniBlog Zip.
2. Unpack, and upload to the wp-content/themes/ directory on your server.
3. Login to your admin area and set miniBlog as the current theme.

If you decide to use this template please leave a comment to let me know! Don't hesitate to get in touch if your interested in a custom template or just in any of my services in general. I look forward to hearing from you!

Demo
Here’s the demo HTML page

Download
Download Gunmetal theme (Downloaded 1971 times)

Donate
If you are considering using this theme please make a small donation

How to Install
1. Download the Solemnity Zip.
2. Unpack, and upload to the wp-content/themes/ directory on your server.
3. Login to your admin area and set Solemnity as the current theme.

The main aims of this template are to produce (as usual with my templates) something that looks as aesthetically appealing as possible whilst using as few images as I can, and also to create a page that is a pleasure to read in terms of typography.

Demo
Here’s the demo HTML page

Download
Download Gunmetal theme (Downloaded 1872 times)

Donate
If you are considering using this theme please make a small donation

How to Install
1. Download the Gunmetal Zip.
2. Unpack, and upload to the wp-content/themes/ directory on your server.
3. Login to your admin area and set Gunmetal as the current theme.

Right now there is no social bookmarking like on previous theme Clarity but you can always use plugin for it.

Demo
Here's the demo HTML page

Download
Download Warped theme (Downloaded 1379 times)

Donate
If you are considering using this theme please make a small donation

How to Install
1. Download the Warped Zip.
2. Unpack, and upload to the wp-content/themes/ directory on your server.
3. Login to your admin area and set Warped as the current theme.

The theme has two columns and is designed to be clean, easy on the eyes and above all, readable. No images are used at all within the template to keep it clutter free and fast loading. Also, sIFR has been implemented to add some diversity to the typography.The social bookmarks within the post-info area bar have been coded into the theme, no need for plugins. It has been tested on Internet Explorer, Safari, and Firefox and displays great. Tested on WP 2.3

Demo
Here's the demo HTML page

Download
Download Clarity theme (Downloaded 2001 times)

Donate
If you are considering using this theme please make a small donation

How to Install
1. Download the Clarity Zip.
2. Unpack, and upload to the wp-content/themes/ directory on your server.
3. Login to your admin area and set Clarity as the current theme.