As adoption of WordPress continues to increase worldwide, more and more theme developers are bringing their private skills to the public marketplace.

They do this by offering custom WordPress themes either for free or for a small price, and they demonstrate each theme’s appearance using a demo site.

This is far different from simply displaying an image of the theme in action. Instead, a theme demo site actually lets users peruse an entire, complete WordPress installation with the theme in action. This actually helps to sell users on a theme, as enabling them to use the theme itself proves its usefulness and high quality.

This can be done by any user of WordPress 3.0 (or higher) more than a single extra plugin. All it requires is enabling one of the new WordPress “sleeper” features that goes unnoticed, and unused, by all but the most advance WordPress customers. Here’s how it’s done.

WordPress networks: the key to a theme demo site with WordPress 3.x

Previous versions of WordPress before the 3.x line of releases were big on using plugins to make a theme demo site. And this process wasn’t simplified by simply installing one plugin; instead, the vast array of features a user required often meant that they’d have to enable two, three, or even four plugins and widgets to get the job done. With WordPress Networks, this is essentially a deprecated way of creating a theme demo site.

Enabling WordPress Networks will require a bit of PHP knowledge, as well as some basic coding of server files like .htaccess. It will use the Dashboard to perform most of the setup, and then the user will simply modify a few files to complete the process. After that, new sites can be created to display the content of WordPress themes within one website.

Step 1: modifying WP-Config.php to enable multi-site installations

By default, the WordPress Networks feature is not enabled. Furthermore, it cannot be enabled simply by using the WordPress Dashboard alone. Instead, it must first be enabled by adding a line of code to “wp-config.php.” From there, further customization is allowed in the Dashboard.

Using an FTP client, navigate to the root directory of a WordPress installation and download wp-config.php. Open this file in a text editor, and then add the following line of code before the end of the file:

define('WP_ALLOW_MULTISITE', true);

This simply instructs WordPress to enable the Networks administration panel and setup process. Save the file and upload it to the server; next, log in to the WordPress Dashboard.

Step 2: enabling and configuring WordPress networks

Once the Dashboard is open, click the “Tools” heading in the Dashboard sidebar and click on the new “Networks Setup” administration option that is listed here. This will open a page full of settings as they pertain to the new network. These must be carefully configured, as they directly relate to URL structure and site navigation.

The most important of all these choices is the one between subdomains and subfolders. Each theme will eventually have its own WordPress installation, so each theme’s demo site will be accessed in one of these two ways. A subdomain will appear as "http://theme-name.domain.com" while a subfolder will appear as "http://domain.com/theme-name". Choose carefully and deliberately, as this cannot be changed after the form is submitted.

Next, fill out the remaining details on the page. These details include the following:

1. Server Address
2. Network Title
3. Administrator’s E-mail Address

With all of the above details accurate, it’s time to click “Install” and allow the process to complete. WordPress will turn a single-site installation into a network and it will then print out a set of instructions that must be manually performed by the administrator.

Step 3: completing the process manually

Unfortunately, the WordPress Dashboard has its limitations when drastically changing a site from a single-site operation to one that contains tens or hundreds of theme-based new sites. While it performs much of the work on its own, it will require the administrator to configure the site’s .htaccess file, a well as the wp-config.php file. Further, administrators will have to setup a media directory that will contain uploads from all of the networked sites. In a theme installation, this is likely to go unused, but it must still be set.

The .htaccess changes will determine the permalink structure of the site as it relates to the subdomain or subfolders option chosen in the first part of the process. Because this code is based on WordPress’ settings, present location, and user input, it is very hard to change and should be copied and pasted exactly.

Changes to the wp-config.php file must be added to that file right below where the “enable multi-site” code was placed in the first step of this process. It’s important to keep all of the code relating to WordPress Networks grouped together in the same part of the configuration file.

Step 4: administration of the WordPress network

With these changes having been made, it’s time to log back into the Dashboard interface and observe how the interface has changed along with the site’s function. First and foremost, there is now a “Network Admin” link where there was previously a link to the WordPress site’s index page. This will allow for adding new sites to the network and administration of those that have already been created.

There is a Dashboard-like interface solely for this purpose, and users should familiarize themselves with it before proceeding with creating the actual content of their WordPress theme demonstration site.

Using the WordPress networks feature to create a theme demo site

Now that WordPress Networks has been successfully installed and users are familiar with the Dashboard administration interface that configures sites within the network, it’s time to get moving on creating the actual demonstration sites that users will see when they preview a theme on the site.

First and foremost, make sure that all of the themes demonstrated are uploaded with the main WordPress themes folder that was previously used to theme the sole site within the Dashboard. This folder, as a reminder, can be found here:

/public_html/wp-content/themes/

Every theme folder should be named in all-lowercase letters, with just one word or a hyphen between words. With this step completed, the work begins.

Step 1: create a new network site for every WordPress theme to be demonstrated

The process of creating a WordPress theme demonstration site is a little tedious from here on out, and this first step is perhaps the most tedious of them all. Using the WordPress Networks Dashboard, create a new site for every single theme that will be demonstrated to users. Make sure that the site’s title is the same as the demonstrated theme’s name, as this will make the demo site more functional and user-friendly.

Step 2: apply a theme to each new WordPress network site

Perhaps just as tedious as the first step is applying a unique theme to each of the new sites that was just created. This can also be done within the Networks Dashboard; navigate to the site that needs to be themed, click “Appearance” and then “Themes.” Activate the theme and then move on to the next site within the network.

Step 3: make sure every theme links to every other theme

The usability of a theme demonstration site can be improved by making sure that each demo theme links to all of the other themes within a website. Thanks to the new WordPress Networks feature, this is actually ridiculously easy to do. It uses a WordPress widget that is designed for the Networks feature itself in order to link to all sites within a network.

In the main WordPress site’s Dashboard, click the “Plugins” sidebar heading and go to “Add New.” In this administration panel, search the WordPress plugins site for the Diamond MultiSite Widget. Download, install, and activate this widget. Then navigate to the Networks Dashboard and apply it to each site within that network. This can be done by clicking the “Appearance” sidebar heading and then navigating to “Widgets.” Drag the new “Page Listing” widget into the sidebar (preferably near the top) of the theme. Repeat this process for every theme demo within the network.

Every theme should also contain a “Back” link which returns the user to the theme index page so that they might choose another option to preview. This can be placed in the theme’s sidebar or wherever else the user prefers to have this link displayed to end users.

Almost done: bringing multi-site theme demo pages to the WordPress index

At this point, the truly hard work of creating a theme demonstration site is actually completed. The WordPress Networks feature has been installed and successfully setup, the sites have been created and themed, and they all link to each other using a drag-and-drop WordPress widget. In place of tedium is now a simple process of linking to each site on an index page which lists all of the themes to be downloaded or purchased.

This can be due however a user wishes to complete it; most prefer to pair a small screenshot with links to preview, download, or buy the theme itself.

Automating the site creation process with a plugin

Of course, even built-in WordPress features might need a little help from time to time. For users who prefer not to manually create a new WordPress Networks site instance for every theme they intend to show off, there is a plugin that will make the process virtually automatic and unattended.

That plugin is called “Replicator” and is, once again, installed via the main WordPress Dashboard instead of the Networks Dashboard. This plugin essentially allows a user to “clone” a created WordPress Site within the WordPress Networks feature. That means things like the MultiSite widget in the sidebar, a “back” link, and other site settings, will be automatically filled in and placed; customizations will need to be made, of course, but it’s nice to be able to create 35 new sites with the click of one button, rather than clicking that one button 35 separate times.

Troubleshooting: common problems with WordPress networks installations

Despite being included as a standard WordPress feature instead of as a plugin, the WordPress Networks feature has been known to give some users a headache by not displaying their sites or placing them at unpredictable URLs. The largest problem that seems to arise is that a user will enable the “subdomain” setting during the WordPress Networks setup process, but they’ll forget to create those subdomains (or enable them) in a site’s actual administration area like cPanel or the Plesk Panel. Failure to enable subdomains, or create the subdomains for use by WordPress, can cause links within the newly-created network to return 404 errors, timeout errors, and other glitches that will send users away.

Before heading for the hills, tearing your hair out, or finding a developer community to offer assistance, make sure that a site’s .htaccess file has been properly configured and that subdomains have been enabled within a site’s root control panel. Furthermore, ensure that your web hosting package supports the large number of subdomains that you wish to use; otherwise, you may need to upgrade to a better hosting package (or web host altogether) or reconfigure the site to use subfolders instead.

Easy and straightforward way of selling themes

Thanks to the new, built-in WordPress Networks feature, displaying multiple themes in a fully-usable website interface has never been easier. With attention to detail and careful configuration of both a WordPress installation and the server settings for the website itself, users will find it exceedingly easy to promote and even sell their creative works.

If you sell themes, do you have a theme demo site?

Vladislav Davidzon is the principal of a US-based online marketing consultancy, developing integrative solutions through high impact search engine optimized WordPress websites for socially responsible customers of all sizes around the world. For more details visit Vladislav Davidzon & Associates.

eBook: 101 Dos and Don’t of a Successful Graphic Designer – $14

And the more interactive you can make them, the easier it is to create the final versions of your apps without confusion on the part of your developers.

Justinmind Prototyper is an incredibly powerful prototyping app that includes all the functionality you could possibly want in an app prototyping solution, whether you create apps for mobile devices, the web, or even desktop environments.

It works for website prototyping, too!

Prototyper is incredibly easy to use and intuitive. You can start out by specifying your viewport parameters (there are presets for a variety of common devices), which then displays as a guide on-screen. From there, just add the design elements you need to build your app’s UI.

Design elements include everything from shapes to things like form fields and menus, making it easy to mock up your UI design without having to start from scratch. All you have to do is drag and drop them into place within your design.

But the drag and drop functionality doesn’t end with just placing elements. To create links and interactions, you do the same. To define a link, just drag the component to the screen you want to link it to. Add comments the same way (just drag and drop them onto components).

Guidelines make designing your wireframe a lot easier and more precise (meaning it’s easier to convert it to a finalized design later on). The ability to round corners, crop images, or apply color gradients means your final wireframes are a lot more visually appealing than a simple sketch. Create entire pixel-perfect designs right within Prototyper, saving time down the road.

You can add images to your designs quickly and easily, too. Just drag and drop the images you want from design programs like Photoshop, or directly from your browser. There’s even a color capture tool so you can grab precise color values for your design.

You can even create your own widgets with Prototyper and save them to your own widget libraries. Just group items together and then drag them to the widget library, it’s that easy! And there are already widget libraries for iPhone, SAP, iPad, Blackberry, and Android.

One of the best features of Prototyper is the immediate simulation of your prototypes. Just click the “Simulate” button and you’ll see a simulation of your prototype’s behavior instantly. You even get the ability to test your prototypes on mobile devices.

Once your prototype’s design is finished, you can simulate interactions to get a feel for how the app will actually work. You can show and hide content, change styles, or conditional navigation without having to write code, and triggered by a number of different events, including Onclick, OnMouseOver, and more. You can also simulate form and data grid behavior. Even add validation or messages without having to write code or create a database! Create if-then conditions without coding, too! And of course Prototyper includes support for mobile gestures in your prototypes.

Prototyper also gives you the ability to simulate complex data like shopping carts or data bases, something a lot of other wireframing apps lack entirely. Being able to show your clients or other team members exactly how something like a shopping cart will work on the finished site can make it much easier to get key sign-offs on the early design.

Make a change in one area, and you can apply it globally by using style guides for your wireframes. This is a huge deal for complicated prototypes that might feature a large number of different screens. You won’t have to waste time changing the same thing on fifteen different mockups. You can also share data globally using variables.

You can even use animation utilities to add animations to your wireframes. Use these for things like dynamic messages, progress bars, or any other type of movement required. Plus, you can add video or other media content from the web, including interactive Google Maps, YouTube videos, and more.

A prototype is only as valuable as it is useful. That’s why Prototyper has a number of features that help you get from prototype to finished app or site. You can export all of the information in your web prototype to an MS Word or Open Office document, which is perfect for creating a design and development spec. It’ll include screens, interactions, business rules, working scenarios, Data Masters, and comments, plus information on the prototype itself. This alone can save hours of time.

If you’re building a website or HTML-based app, you can export your wireframes directly to HTML with all of the interactions, conditions, and validations defined and functional. This can then be sent to your clients or users to be tested right within their browser.

You can also integrate your prototype with other testing tools, and publish your prototype online to get feedback using online comments. These are valuable tools for taking your project from the prototyping stage to the finished design, seamlessly within your workflow. You can even create your own plugins to extend the functionality of Prototyper.

Justinmind provides a ton of great learning resources to help you get started with Prototyper, including great video tutorials and downloadable PDF tutorials and a user guide. You can download widget libraries for mobile and web apps, sketches and desktop apps, speeding up your prototyping process.

Prototyper comes in two editions: the free version, which includes basic web widgets, interactive widgets for iPhone, Android, and iPad, and link interactions; or the Pro version, which includes all of the above, plus rich interactions, conditional rules, validations, form and data grid simulations, variables, masters and templates, and HTML and document generation. There’s a 30-day free trial available with the Pro version, which is normally $495 for a perpetual license with unlimited wireframes. Both the Pro and free versions work with Windows XP and Windows 7, as well as Mac OS X 10.5 and newer.

You can check out examples of existing prototypes on their website, and even download them to check out right in Prototyper. It’s a fantastic app for anyone who creates dynamic applications, regardless of the platform.

Reviewed exclusively for WDD by Cameron Chapman
[Disclaimer: This post is a sponsored review, the opinions expressed in the article are the author's only.]

eBook: 101 Dos and Don’t of a Successful Graphic Designer – $14

We would stop at a local gas station where he knew the owner. The owner of the station closed his business and sold gas by the tank full only to good customers, by appointment only. God forbid you drove far away from home and needed gas elsewhere and had to wait on line for a couple of hours for the maximum half tank stations would sell while customers shot each other over the precious juice. It was just like The Road Warrior only people were more civil in that movie and the gas they killed each other for cost nothing.

It was a bad time but it forced people and society to change. When gas was outrageously priced at a dollar a gallon, consumers opted to buy smaller cars and dump their gas-guzzlers that were the size of Rhode Island.

There were articles and news stories spotlighting the practice of mixing errands so one could save gas and the government preached trying the four-day work-week.

The proposal was simple and brilliant. Businesses would extend the 9-5 workday by two hours, four days a week and be closed on Fridays. The 40-hour week would still remain but by cutting the need for commuting and the energy used by an office full of people, there would be substantial savings and lessen the dependence on foreign oil. With every office closed on the same day, there would be no loss of business inertia.

Naturally, business turned down the idea, most probably because they couldn’t fathom such a change or going against established Dickensian workhouse ideals.

Basically, they couldn’t give up the power over workers and, as we have seen over the past decade or so, the Dolly Parton song, that goes, “working nine to five…” is so outdated that twenty-something workers wonder if it’s a joke. Well, here’s the punchline to that joke: The “lunch hour” use to be an HOUR! I guess no business has the audacity to rename it, “lunch fifteen minutes” or “why-are-you-chewing-get-back-to-work!”

It’s all about power

Why didn’t businesses want to adapt to a great idea that would cut energy usage by one fifth? Power. It represented a loss of control over employees.

At one large corporation in a part of the country where snow was more ice and road clearing was not a consideration of the local government, employees dreaded the winter months and there was always the question of what would happen when six or more inches of frozen water fell upon the city. The corporate newsletter always answered the question with the flippant line, “people ask what we consider a snow day. We call it a vacation day!”

If you didn’t show up, you were docked one of your vacation days, so we all trudged into the office, usually to find the department manager was “working from home.” I could never figure out how someone manages a staff from home but after years of employees suffering dented cars, concussions on slippery sidewalks on corporate property and the fear of death on the commute to work, the company adapted to the stance of people “working something out with their managers.” The usual arrangement was to work three extra days to receive one day in compensation.

The evolution in policy was, I suspect, driven more from the fear of an employee revolt and Romanoff-style executions of the executives and lawsuits than concern for dead employees. Lock-downs in employee cubicles would happen long before the freedom and flexibility of telecommuting.

What exactly IS telecommuting?

It’s not a hard concept. A worker who has the job description and skills which allow that employee to work independently in an office situation, sets him or her up to work remotely from home. It’s just like lock-down in your cubicle or freelancing from home. You are driven by deadlines. Complete them on time or lose a client…in this case, your job.

For years, people have emailed jpegs to clients for approval, spoken on group calls, and Skyped for instant feedback and visual affirmation. I’ve done quite a bit of teleconferencing and no one ever suspects that I’m naked from the waist down. Aside from that bit of too much information, the ability to work independently as a freelancer translates well to full-time telecommuting.

The hard concept of telecommuting is getting your boss to understand why it will work and how it will benefit the company and employees.

Why telecommuting is good for everyone

Organizations around the world are implementing telecommuting with enthusiasm. According to a 2008 study, 45 million Americans already telecommute at least one day a week. BT, a leading provider of communications solutions, hired its first home worker in 1986; today more than 70% of BT’s employees benefit from a flexible schedule of telecommuting. The company estimates that it has saved at least $500 million, and has improved its productivity by between 15% and 31% – a fact that cannot be ignored.

The best candidates for telecommuting are those that are self-disciplined and can follow through on projects and meet deadlines. Certainly those who have freelanced can handle that. There’s a point to discuss with your boss.

Other considerations help everyone AND the company! By telecommuting:

• You help the environment. Less gas consumed, less harmful emissions, less wear and tear on public roadways and your vehicle.

• The company doesn’t have to spend resources for you. Each employee who is not using electricity, heat, office materials, etc., represents savings to the firm (while you are picking up some of these costs by working remotely from home, they are offset by the costs of commuting, dry cleaning, wardrobe, etc.).

• Working alone promotes greater productivity. Let’s face it…coworkers like to chat, take cigarette breaks, take a bit longer for lunch, etc. Working in an office usually does not include hard and fast deadlines and if YOU are one of the people who deals with deadlines—such as those designers have, but perhaps administrators, marketing and sales people, and other support personnel do not—then working alone may be lonely. But there are no distractions and work is usually finished in three-quarters of the time it would be in an office situation.

• Not having to face the rush and hassle of commuting each and every morning relieves stress, and that can lower absenteeism and health costs for a company. While working in New York City, we would all come into work and, after pouring a hot cup of coffee, share our morning subway horror stories. Who sat in a puddle of urine, had snot sprayed on them, or put up with a less-than-sane person yelling at them about government plots to control their minds and bowels. So, even public transportation represents stress…perhaps more than driving one’s own car in heavy traffic.

• Safety is another benefit as there are less cars on the road and there is no risk to life and property during inclement weather.

Why Telecommuting can be bad:

• If you’ve freelanced for a long period, you know that being alone can make you feel isolated. This is why many freelancers belong to design organizations—to get out and mingle with others. Having an “office family” is sometimes one of the joys of going into work. Isolation, like one of those movies where someone is stranded on a deserted island in the middle of nowhere, has a weird effect on people. Before long, you will see no reason to shave or brush your hair, wrap yourself in toilet paper as opposed to wearing clothing, and you’ll start talking to inanimate objects…and they will answer back!

• Friends and family will look at you as “being available” during the day for favors, errands and company. While freelancing, people would ask me to help them move, other freelancers with less work would want to “hang out” for several hours and my spouse had a list of chores I could do “because I was home.”

• If you aren’t disciplined, it will become harder to get dressed in the morning or get up early for the workday. When freelancing, I tend to keep vampire hours. The world, unfortunately, keeps daylight hours. There are also some wonderful shows and movies on cable during the day and who would really mind if you have the TV on while working? Caddyshack is on right now and although I’ve watched it 273 times, the draw to watch it again is hard to fight. Be the ball, Danny.

• If you’re a smoker, like me, you’ll go through a pack of cigarettes in an hour while sitting at your computer. You’ll also put on weight from too frequent trips to the refrigerator for a snack. Soon you’ll just keep boxes of Twinkies by your desk…well, on your desk…on your keyboard with M&Ms all over your Wacom tablet.

• It’s easy to get lost in the workday/personal needs for errands time. If you are able to decide on your own working hours, you should opt to keep your morning for personal activities, and shift the work hours later (afternoon and evening).

Fighting the bad habits:

• Set your hours as if you were commuting into an office. Get dressed, shower, and groom yourself as if you were going to be around people. With telecommuting, you may be called to come into the office right away. Showing up in a robe or with an ill-fitting glitter unicorn T-shirt will undermine the small amount of respect creatives already have.

• Make sure your friends and family understand that you have set work hours as if you were in an office. While you can allow some flexibility, which is one of the perks of telecommuting, don’t let others decide how flexible you can be. If you have caller ID on your phone, screen calls and keep personal calls at a minimum.

• Only smoke outside or away from your desk and set a timer so you have no more then one cigarette every hour. That’s usually more than a company will allow for breaks. Hooray for workplace flexibility!

• Don’t allow food in your workspace.

• A deadline is a deadline is a deadline. Don’t miss one or you’ll be back in the office everyday of the week.

How to approach your boss about creating a telecommuting arrangement

With all of the aforementioned points in mind, ask you boss about a telemarketing situation. Point out the positive factors for the company but leave the smoking out of it. Outline these important negotiating points:

• You are not disappearing from the office. You will be in regularly for important meetings and to discuss upcoming projects.

• Perhaps, set one day a week for you to come in for the day to go through approval processes, deliver final files, discuss changes or meet with a committee or two. Assure the boss that you will come in off-schedule when needed.

• Outline a process for sending jpegs on a daily or twice daily basis so the boss can keep abreast of your progress.

• Talk about energy consumption savings (no computer to power, no lights at your work station), no distractions to you or other employees by staying at home, and the environmental considerations of telecommuting.

• Tout the technology that will allow you to teleconference when needed and assure your boss that you will be available during all working hours.

• Ask for a trial period of a month to try out the situation so you and your boss can evaluate any strong or weak points in the arrangement and make adjustments from there. You may decide that telecommuting isn’t working for you and if your boss isn’t happy with the results, you won’t be fired when the trial period is over. You’ll just be back in the office.

Unfortunately, as many articles on this subject point out, employers have a fear that not having every employee present will lead to some sort of falling domino effect in the office. If you are not present, how can you handle a last minute change or new assignment? While some managers and bosses give employees wide latitude in working on projects, preferring the, “here-it-is-get-it-done-without-involving-me,” which is the perfect boss for telecommuting, there are more people in charge that want to know where you stand every step of the way and be able to see you physically available at every minute of the day.

There are those managers who just won’t give up the power of having you present. They believe that if you can achieve without them looking over your shoulder, you are negating their position in the pecking order of the company and putting their job in jeopardy.

Naturally, there are bosses that just want the power to have you present because they want you to share the commute and workday in the office because they must do so. Have you ever called in sick, only to hear your boss ask how bad the infirmity is and question if you really can’t make it? These are not the bosses to approach about telecommuting.

You have to see and judge your work situation, considering not only your skills and ability to work remotely but also how it will affect coworker’s daily schedule and progress and how your boss will react to the idea.

Statistics on telecommuting are surprising. The vast majority of workers in the United States commute to work, with 70% reporting they commute all the time to work. 9% telecommute part time and travel to their jobs the rest of the time; half of these individuals telecommute just one or two days a week; 2% telecommute full time; the rest work in home-based businesses or are unemployed.

40% of U.S. employees hold jobs that that could be done at home. 61% of federal employees are considered eligible for telecommuting but only 5.2% do so on a regular basis; 42% of U.S. employers say they have allowed staff to work remotely this year—up from just 30% in 2007 (this is not to say that these workers do this on a regular basis).

If you have proved yourself at work and showed you can get things done without supervision, chances are you can bring up the subject and be taken seriously. If you are considered invaluable as a worker who interacts with others on a daily basis and has all the answers at your fingertips, then you will never, ever be allowed to leave and will probably be chained to your desk and given a bucket for bathroom breaks.

In either case, you will never know unless you ask. Maybe start with one day of telecommuting and if the world doesn’t stop spinning, go for two. Two may lead to three or four. In our business, you can probably count on spending at least one day on the office. Still, three or four days not spent commuting would be very nice, wouldn’t it?

A couple of articles you’ll want to read on telecommuting and other considerations:

10 Considerations in Developing Telecommuting Policies and Agreements

The Rise of the New Groupthink

Speider Schneider is a former member of The Usual Gang of Idiots at MAD Magazine and has designed products for Disney/Pixar, Warner Bros., Harley-Davidson, ESPN, Mattel, DC and Marvel Comics, Cartoon Network and Nickelodeon among other notable companies. Speider is a former member of the board for the Graphic Artists Guild, co-chair of the GAG Professional Practices Committee and a former board member of the Society of Illustrators. Follow him on Twitter @speider

Do you telecommute? Have you approached your boss about telecommuting? Tell us your story!

eBook: 101 Dos and Don’t of a Successful Graphic Designer – $14

But if you don’t have a lot of experience with CSS, then you’re probably trying to figure out what is the best way to handle some of the challenges that arise from using multiple vendor prefixes, dealing with older versions of Internet Explorer, and other CSS3-specific dilemmas.

In this article, I’ll try to cover some of the important things to remember when dealing with these issues. Keep in mind that nothing here is set in stone but these should just be guidelines to help you write more effective, easier to maintain, and future-proof code.

Know your support charts

You probably won’t have to memorize which features work in which browsers. In most cases, CSS3 features will not work in all in-use browsers. And in some instances, even the most recent versions of browsers don’t have full support.

So the first thing you should do is understand where support is lacking. The primary resource you should use is the When can I use… site, which includes charts for CSS3, HTML5, and tons more. You can even do side-by-side comparisons with different browsers, as shown in the screenshot below that compares CSS3 support in Firefox 3.6 vs. IE9:

Although When can I use… is probably the only support chart source you’ll need, here are a few other options to consider:

• CSS3 Click Chart
• CSS contents and browsers compatibility
• CSS Compatibility and Internet Explorer
• Comparison of Layout Engines (CSS)

But know that although a CSS feature may be listed somewhere as “supported”, that doesn’t mean it’s without bugs or inconsistencies. So test thoroughly.

Don’t overuse polyfills

Due to client or agency pressure, or just the fact that you want everything to look and function the same everywhere, you might be tempted to use the many CSS Polyfills.

But many of these scripts can slow your pages down considerably — especially if you use more than one. There are many studies and sources that show the importance of a website’s speed, so any polyfills should be considered carefully and with your site or app’s overall best interests in mind.

To help you decide what to polyfill and what to just allow to degrade to a lesser experience, use the HTML5 Please site. As shown in the example screenshot below, HTML5 Please will often recommend avoiding polyfills for certain features:

Test how features degrade

If you’re avoiding a lot of polyfills, then naturally you’re going to have to allow many CSS3 features to degrade to a more primitive experience in older browsers (usually IE6-8). But don’t assume this will happen automatically.

In many cases (for example, when using multiple backgrounds), you’ll have to declare a property that gets overwritten by the CSS3 feature, but that will still show up in older browsers.

For example, for multiple backgrounds, you might do this:

.element {
	background: url(images/fallback.jpg) no-repeat;
	background: url(images/example.png) center center no-repeat,
		    url(images/example-2.png) top left repeat;
}

Notice the single background image declared before the multiple background images line. Non-supporting browsers will display the single image but will ignore the 2nd line. Supporting browsers will read both lines, but the first line will be overwritten by the second.

Some other CSS3 features that could benefit from this type of fallback are RGBA colors, HSLA colors, and gradients.

To help you see how CSS3 feature degrade in older browsers, you can use a bookmarklet called deCSS3.

It currently only works in Chrome and Safari, but just drag the link to your bookmarks bar and then click the link on any site that you want to ‘de-CSS3′ and it will show you the site with text shadows, rounded corners and other new stuff removed. Of course, this is no replacement for actual browser testing, but can serve as a useful guide for faster development before you do your final testing towards the project’s end.

Another tool to aid in dealing with fallbacks is the Modernizr JavaScript library. But if you’re intimidated by libraries, don’t be. Modernizr is not difficult to deal with from a CSS perspective. Check out this tutorial for a pain-free introduction.

Dealing with vendor prefixes

One of the messy parts of CSS3 is having to deal with all the different vendor prefixes. Maintaining code that uses all the prefixes is tedious and in some cases you don’t need all of them. Who can possibly remember when to include “-o-” or “-ms-” and when not to?

Well, as mentioned, using the support charts will help. But here are a few other suggestions to help deal with vendor prefixes.

Use a CSS preprocessor

Preprocessors are all the rage right now. But CSS beginners and designers who aren’t hardcore developers or programmers may have a hard time dealing with these new tools.

So although preprocessors are certainly not for everybody, they are definitely worth considering, because they can seriously improve your production and maintenance time.

An extensive discussion of preprocessors is certainly beyond this article, but here are some links to get you started:

• LESS
• Sass
• Compass
• Stylus

And if you find that stuff too heavy, Chris Coyier of CSS-Tricks has some thoughts on preprocessors that might help you get an overall view. And here’s a post on Nettuts+ that covers some of the features and benefits of using a few of the most popular CSS preprocessors.

Be consistent in your code

If you choose not to preprocess your CSS using one of the aforementioned technologies, then you’ll have to deal with maintaining all the vendor prefixes. So make sure you pick a style and order for your vendor prefixes and stick with it. This way, your code will be easier to read and maintain.

For example, some CSS developers put their vendor prefix lines in alphabetical order, and use indenting so that the values all line up, like this:

.element {
	-moz-transition: 	background-color linear .8s;
	-ms-transition: 	background-color linear .8s;
	-o-transition:  	background-color linear .8s;
	-webkit-transition: 	background-color linear .8s;
	transition:		background-color linear .8s;
}

That’s just one way to do it. But whatever method you choose, just be consistent throughout your code. This would be especially important if you work on a team where others have to read and/or maintain your code.

Of course, not all CSS3 features are this easy to organize (for example, the code for keyframe animations is much more complicated), but for most features you should be able to have a consistent style that makes development and maintenance smoother.

What about the standard property?

You’ll notice in the example in the previous section, the last property declared after the vendor lines is the standard version of the property. If you’re going to include the standard property, this is definitely how you should do it. So always include it last when you add it.

This is to ensure that the vendor implementation of the feature is overwritten by the standard implementation. But there’s a caution here.

For some complex animations and interactions, it is conceivable that the implementation could change so much that when the browser starts supporting the standard property, it could have undesirable effects. So in some cases, you might be better off leaving out the standard property altogether.

I wrote about this topic more in-depth on my blog, so check that out if you want a more comprehensive discussion of this issue.

Use Prefixr

One of the easiest ways to deal with all the cross-browser vendor weirdness is to use a handy little tool called Prefixr. With Prefixr, you just develop your code as always, and you could just use a single vendor prefix (for example, only “-moz-”) for all your CSS3. Then, when you’re done testing in that one browser and have everything working the way you want, just throw your code into Prefixr and it will generate all the extra vendor code for you.

Prefixr also can be integrated automatically with your text editor, and includes support for lengthy keyframe animations code. As an alternative, you can also try out a tool I created called Animation Fill Code that adds the extra vendor code for keyframe animations.

Test thoroughly

The last suggestion I’ll give here is to test thoroughly in all the browsers you’re supporting. You can use dozens of tools and libraries to assist you with your CSS3 development, but nothing can replace thorough tests in real browser environments.

And this advice would be especially important if you’re dealing with a lot of responsive design-related CSS3 (e.g. media queries), and heavy use of typographic features. You want your content to be usable and readable in all browsers, even if the CSS3 features aren’t available.

Your thoughts?

Do you have a lot of experience with CSS3? Do you have any ‘best practices’ that you’ve developed? Feel free to offer your comments and suggestions.

This post was written exclusively for Webdesigner Depot by Louis Lazaris, an author, freelance writer, and web developer. Louis is a co-author of HTML5 & CSS3 for the Real World, published by SitePoint, and he writes about front-end web design technologies on Impressive Webs. You can follow Louis on Twitter or contact him through his website.

eBook: 101 Dos and Don’t of a Successful Graphic Designer – $14

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

Learning LESS: Mixins http://su.pr/6YvmKG

Interested in game design? Check out these 4 interactive lectures: http://ow.ly/b2xEz

A Great Showcase Of Websites With Seamless Social Media Integration http://ow.ly/b2ylP

Project management and the design professional http://ow.ly/b2uqt Do project managers often do more harm than good? *Great @netmag read

Selling Art: Creative and Artistic Advertisements http://ow.ly/b2wqg Awesome collection

Nobody likes a short visit http://ow.ly/b4aFM Improving 404 Page Design

There’s a new kid in town: CanJS http://ow.ly/b4dvc

A short documentary about the craft of storytelling by Ken Burns http://ow.ly/b4cfD A must-see for your inspiration

Awesome 5-second animations from Ross Phillips http://ow.ly/b5UwL

FF Chartwell http://ow.ly/b62X6 Travis Kochel’s fantastic typeface for creating simple graphs

The real conflict behind <picture> and @srcset – http://ow.ly/b66mb – Interesting read. Enjoy!

http://infogr.am/ let’s you create interactive infographics

Fast food, rockets, blue skies and McDonalds villains in Rob Flowers’s illustrations http://ow.ly/b68rG Two thumbs up

In Charlotte Caron’s portraits, everyone is wearing a mask http://ow.ly/b68K1

Numerografía-Yorokobu by Wete = a really cool typography http://ow.ly/b68X5

The History Of Usability: From Simplicity To Complexity http://ow.ly/b7pTS *great article by @smashingmag

Design my #CSS > http://ow.ly/b7pDk < Free tool to custom design your website components

Change aversion: why users hate what you launched (and what to do about it) http://ow.ly/b7qnc

Impressive Illustrations by Rory Kurtz with a touch of dark and beautiful http://ow.ly/b7pbO

How do graphic designers say “happy birthday?” http://ow.ly/b7pgL 30 Years, 30 Posters: Milton Glaser, 2×4, and Michael Bierut

Embroidery is hot and Maricor/Maricar knows that http://ow.ly/b9mHe #typography

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

eBook: 101 Dos and Don’t of a Successful Graphic Designer – $14

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

The wrong type of consistency

The donation tab

Bring your kid to home day

Can you relate to these situations? Please share your funny stories and comments below…

eBook: 101 Dos and Don’t of a Successful Graphic Designer – $14

The file is free for personal and commercial use. Redistribution is not allowed, so if you’d like to share this one with your friends, kindly direct them to this page so that they can download their own copy from here.

The set was designed by Chris Kirkman, a designer from San Diego that focuses on UI and UX design. You can follow him on Twitter and you can also check out his free digital business card app, uME

See the full preview and download after the jump!

eBook: 101 Dos and Don’t of a Successful Graphic Designer – $14

I call it “FoxyComplete” and what is does is fetch clickable search results along with images either automatically scraped from the result’s content or a specified file. It’s easy to implement and once done, easy to tweak.

The application of this functionality is purely dependent on the designer and developer preference but its impact on the user experience makes it a top choice to add in modern design and development projects.

Business units where I have personally used this functionality are e-commerce, corporate designs, photography, entertainment and future projects that demand a comprehensive search feature.

I am pretty sure that you all have visited the IMDb and Apple websites and tried their search features. If not – below is a preview of what their advanced search functionality looks like.

We all know it can be done but then the question is, “Why is it not usually done across all those beautifully crafted websites?” Well, I guess it’s probably a lack of a quick, open-to-all solution!

When I implemented the same Autocomplete Search with Images over at my Photography Blog which I designed a while ago, it surely was tricky to achieve, but in the end it came out great. The visitors at my blog really enjoy searching through my image gallery and instantly get a preview of what they will be seeing next.

Below is how the search feature at my blog looks.

In this tutorial I am going to cover the below mentioned points

1. A brief overview of the script
2. FoxyComplete as a WordPress Plugin (Local / Dynamic)
3. Implementing FoxyComplete as a Youtube Search with Images
4. Improving Security

For WordPress Designers, it’s a piece of cake and for the WordPress/PHP Developers – it’s a big opportunity to explore its numerous functionalities and applications it has to offer. For advanced implementation, the requirements would be basic knowledge of WordPress, PHP, HTML, jQuery and CSS.

A brief overview of the script

Lets first quickly take a sneak peak to what what we will be creating in this tutorial. Please click the below image for a basic demo.

Please bear in mind, I am keeping this tutorial to a very basic level to make sure everyone understands it and anyone can design or tweak it according to their requirements. The functionality that I have made was inspired from the jQuery Autocomplete Plugin by Jorn Zaefferer.

The above quick example autocompletes the title of the result but we can also tweak it to redirect to a URL on select (done on the next section). The ID of the search field is kept as “s”, which is the default used for WordPress Search Field (would be beneficial as we continue this concept further to develop a WordPress Plugin).

Styling the results is easy: it’s made up of a clean structure that is easy to style according to your design.

.ac_results -> .ac_results ul -> .ac_results ul li -> .ac_results ul li a -> .ac_results ul li a img and .ac_results ul li a span

This basic example uses a static data source which is a simple JavaScript file in which we have declared an array in JSON format. All our functionality does is to parse the array and display the results.

Don’t worry—it’s just an array with basic key and value pairs and nothing more than that. Our keys are the permalink to take us to the result page, image to preview, and the title in which we have to search the string. I have kept a default image and an example title for this basic demo.

Example array structure

[
{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” },
{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” },
{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” }
… Repeat as much as you want to
]

The JavaScript functionality is easy. We just parse the resultant JSON Array in jQuery, format the results according to our requirements, and pass it display.

Tip for the Developers: In-case you are looking to change how the results are displayed have a look at the function format() in the script foxycomplete.js. It’s a JavaScript function that takes an array as input and returns formatted HTML containing the elements of the array. Pretty basic to understand but if you are looking to change it—do it here!

FoxyComplete as a WordPress plugin (local/dynamic)

Click the below image to download the WordPress Plugin as a .zip file.

For the designers

I hope you remember that I said it was supposed to be a piece of cake for designers, well, here it is! FoxyComplete as a Plug-n-Play WordPress Plugin that works straight out of the box—just simple configuration is required for basic implementation. All you have to do is download it, install it, and play around while you design for it.

The Plugin Options are as below:

Enable Local Search: After browsing a few websites I found that their search option was incredibly fast – even with a huge database—example IMDB. The first thing that struck was their advanced fast servers—but what about the regular users that have shared hosting and varied amounts of data? That is why I made local search a priority option. It simply loads a JavaScript file in the footer of your WordPress installation containing an array to all your posts and pages along with their URLs and, if found, image previews. The plugin defaults to dynamic search although you can change it anytime to local search.

Limit: One sure would need a control over the limit of the results displayed. It helps keep consistency with the design and allow users to get only the most relevant results. It defaults to five top relevant results.

Width of the Autocomplete: Originally it was always kept equal to the input’s width but then I realized we were not searching on a Google-style wide search box. It still defaults to the input element’s width but you can change it at any time.

ID of the Input: Since it is a WordPress Plugin, I gave preference to “#s” as a default choice which can be changed to whatever you like. Just enter the ID (without the ‘#’) of your desired input element and it’s a go.

Default Image: Sometimes the plugin might not find a relevant image and for that I’ve included a demo image, but you have control over that, too: just replace it with your own sample image in the plugin directory.

The Dynamic Search looks for relevant content intelligently and supplies a dynamic JSON array to the functionality immediately. First it collects all the posts and pages in the WordPress installation that are published and public. Then it searches the images in 3 steps from the content as:

1. Media Uploads
2. “Thumbnail” Custom Field
3. Images in the Post Content

Once it has all the data, it combines the title and respective content of each post/page and searches for the queried item for a comprehensive search experience. Once found, let’s say X number of items—it pushes those X is to a JSON array, which is returned to the JavaScript functionality.

Dynamic vs local functionality

This is a critical topic and I am open for a discussion in the comments section. I personally feel there is no harm giving those a local source if it enhances the experience by many folds. Another reason that I implemented the Local Search was because I found even Google implementing it in Gmail.

Once the user logs in, Gmail sends a request to its server and fetches all the email addresses and names or aliases of all your contacts in the footer which are then used for the To, CC, BCC, and Labels autocomplete fields. What do you say, legitimate?

Implementing FoxyComplete as a YouTube-like search with images

As mentioned above, there is a lot of functionality for developers, too. Above is what we did using YouTube feeds and then parsing them in PHP to give the required results in JSON format. You can learn about those here. Click the below image for a demo of the YouTube Foxycomplete Search.

Another functionality you can make is the YouTube Search Engine with on-click play in modal or overlay. For example, when you search for a video and click it in the autocomplete results, it pops open a modal dialog box or an overlay with the video in it, playing on your website but sourced from YouTube. Nice, isn’t it?

Improving security

Though the WordPress plugin is secure as I used WordPress Nounces, it can be made even secure by using constants in the dynamic version and encryption in the local.

One security measure we used was to check for an Ajax call and then also check for an Ajax call from the same domain as shown below.

//define SAME_DOMAIN to true in the Header of your document.

define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
define('DOING_AJAX', true);
if(IS_AJAX && DOING_AJAX && SAME_DOMAIN)
{
//your search logic
}

That’s just one of numerous ways to secure it!

Conclusion

So that was the FoxyComplete that could help you in a lot in your design and development projects in the future. This is Version 1.0 and I shall make sure to continue improving it with your valuable feedback and support.

Let me know what you think in the comments section below and since this is hosted on an environment I can easily and regularly edit, with your super suggestions—lets make it a great free plugin with ultimate user experience at both ends.

Written by Pushpinder Bagga who works as an Interactive Developer with Web Design Australia, Follow him on twitter @tobcreatives.

If you have questions about the plugin or ideas for improvement, share them in the comments!

eBook: 101 Dos and Don’t of a Successful Graphic Designer – $14

This page is often given a simple message that just states merely, “Sorry! There’s nothing here.” With WordPress, however, there absolutely can be something there when a user navigates to a page that is no longer there, has moved, or has been deleted.

The unique setup of pages and templates within the Dashboard allows this page to be as dynamic as any other page within the WordPress ecosystem.

Don’t let a drab and unhelpful 404 page be the end of a user’s journey through your website. Instead, turn it into an opportunity for further reading, redirection to the content a user may have been looking for, or a suggestion of where to go when the website’s navigation offers no obvious answers.

It’s time to create a 404 error page using the WordPress Dashboard

Installing a WordPress theme can be a hodgepodge effort, where some pages are included and others were left out of the template for reasons of expedience or other considerations. The 404 error page seems to be one which is not consistently included in every WordPress theme, and some custom design authors even leave it out of their own, self-designed website interfaces. That means that a good number of users will have to create their own 404 error page before they can add content and redirect users to a site’s best features.

Creating a 404 error page is generally done using FTP to create the initial PHP file that will contain basic theme code. It can then be edited using built-in tools contained within the WordPress Dashboard itself. To create a 404 error page for a theme that simply does not have one at all, open up an FTP client and navigate to the theme’s main directory. This can typically be found by navigating through the following site path:

/public_html/wp-content/themes/YOUR-THEME

Contained within this folder is a list of files that pertains to every custom page and template a theme brings to the table. What might be noticeably missing among this list of templates is a file titled “404.php.” If that’s indeed the case, go ahead open a text editing program. Leave the document blank for now, but save it as “404.php.” Upload it to your theme’s main folder.

Putting content on a 404 error page

WordPress treats this new 404 error page template just like it treats any other page within its ecosystem, meaning it can use the company’s PHP includes and WordPress tags to include other templates, display content, and keep a user engaged. These tags and content can be added using either FTP or the WordPress “Theme Editor” panel available within the software’s Dashboard.

With a traditional FTP client:

1. Keep the self-created (and blank) “404.php” file open.
2. Paste PHP include tags for the header and footer, if relevant.
3. Paste in any WordPress tags that display entries, categories, author information, sidebar content, or anything else that should be included on this new page. Do this between the header and footer PHP include tag.
4. Save the file to the server and test the page’s appearance and functions in a web browser.

Using the WordPress Dashboard:

1. Navigate to the Dashboard homepage.
2. Click the “Appearance” category in the Dashboard’s sidebar.
3. Once this has been expanded, click on the “Theme Editor” link.
4. In the Theme Editor panel that appears, a list of templates will be displayed to the right of a text entry field. Click the “404 Template” link, which references the 404.php file created earlier.
5. Perform any edits to this template using the text editing box displayed within the Theme Editor. The same WordPress tags and PHP include codes can be used in this box.
6. Click “Update File” to save any changes, and then test the page’s look and feel in a web browser.

One of the great advantages of using the WordPress Theme Editor is that it offers users the ability to look up critical functions to a page’s display and usefulness. Users can access a drop-down menu that lists several key WordPress functions and tags and, upon selecting one, click the “Lookup” button. This will take them to the WordPress documentation, explaining what the function is and how to call it.

For the 404 error page, users will at least want to know how to include the header and footer within their 404 page. They may also be interested in content tags and the WordPress sidebar code, depending how they intend to structure the error page and what content they plan to display to users who have arrived at a dead end.

Other sources of template and tag information

It’s important to remember that the WordPress 404 error page is not treated like a typical “page” within the software’s Dashboard. Instead, it’s treated as a traditional template file that can display any dynamic WordPress content assigned to it through the use of variables. This means a 404 page can be easily made to display the latest posts in a blog, or an archival list of months and years. It can also display entry category and tag lists, and author biography, and other content stored within the actual WordPress database itself.

Even the most seasoned theme authors can’t recall every WordPress template tag on command, and so they may want to reference the very helpful WordPress Codex when creating their 404 error page. This resource is free to all users of the software and helps to supplement the “common functions” lookup feature that is included a a drop-down menu on every Template Editor page within the Dashboard.

Of course, it might also be wise to directly copy content from the “index.php” or “page.php” files, filling in with new variables or static content where applicable.

Content to include on a dynamic and functional WordPress 404 error page

The reason WordPress has been so successful in recruiting more than 60 million users to its industry-leading content management software is because it offers the ability to place dynamically-generated content on virtually any page within the WordPress purview. The 404 error page is no different, and this allows it to be constructed in a way that displays real site content rather than just an error message.

Users creating a WordPress 404 error page should be mindful of a few things when determining what a user will see on this veritable “dead end” error notification.

• A user should always be informed that the link they clicked simply does not exist and they’ve ended up at an error page. Even if this new template is designed to include dynamic content form the site’s authors, it’s important to admit the error. This is often because a user will expect to arrive at a certain page (for example, an outdated link to an author biography). If they are instead greeted by a list of categories, with no explanation, they’re just as likely to leave a site entirely as they would be without a 404 page being displayed at all. Admit the error, apologize for it, and then guide them to a new resource.
• A site’s best content is just itching to be displayed on a 404 error page. Consider all of the times you’ve made a mistake that annoyed a friend or family member: Almost certainly, your goal was to deflect this mistake by doing something impressive immediately afterward. A website should do the same thing, generating a 404 page that admits the error and the reminds a reader that they’re here for great content. It should then display a sort of “greatest hits” to this reader. It’s a great way to almost lose them, and then pull them right back in for a few more minutes of active reading and browsing.
• Standard site headers and footers should always be included on a 404 error page, as consistency is the key to a great and intuitive web design. There’s no reason to give an entirely new look and structure to the 404 page displayed to users. In fact, this page is naturally a time of great uncertainty for the reader who encounters it. Adding to that uncertainty with a non-standard design will send them elsewhere very quickly.
• If it’s appropriate, add a little humor to the page. Apologizing and redirecting is great, but a little self-deprecating humor makes a page more humanized and approachable. Those are the two keys to success that every WordPress developer should be aiming for, anyway.

Avoiding the 404 error in the first place: the importance of permalinks and double-checking

Even a well-designed 404 error page should be a last resort for the average WordPress site owner, as it’s really not good to subject users to this type of dead-end destination that begs them to turn around and read one more article. In the interest of making a beautiful, custom-designed 404 page a rare occurrence, adhere to some basic practices of web development.

First and foremost, establish a site’s permalink structure from the first day of its operation. This means logging into the WordPress Dashboard, clicking the “Settings” heading in the sidebar, and click on “Permalinks.” Several standard permalink structure options will be presented, or a user can custom develop their own structure. Either way, pick something that is easy to use and will stick with the site for a long time. One small change will make every single entry page, or custom-created user page, the site controls.

Secondly, always double-check links which are hard-coded into blog entries and any pages generated by the WordPress software. The most common cause of a 404 error is a simple typo or an erroneously typed link somewhere in the site’s content. When writing new site content, copy and paste the link instead of typing it from memory and the problem will be solved on its own.

Finally, try not to have a constantly rotating list of pages that are frequently changed and deleted. The ease with which a user can create a new page in the “Pages” control panel almost makes it seem as if these pages are disposable, but changing their URL, name, or deleting them entirely will send users to an error page. Remember that every page you create might be bookmarked, navigated to by memory, or linked to by old entries. This sets readers up for failure over time if page are constantly undergoing permalink changes and deletions.

Enjoy better traffic and long on-site visitations with your 404 error page

A customized WordPress 404 error page is the key to retaining visitors for a longer duration and improving your WordPress site’s performance in web searches and traffic-tracking tools like Google Analytics. These longer visits count for something: They increase a site’s authority and indicate to search engines and ranking websites that the site’s content is of a higher value than its competitors’ content.

Above and beyond that, though, a custom 404 error page is easy to create using either the FTP upload method or the included Theme Editor in the WordPress Dashboard. There’s really no reason not to create one; the enhanced usability it gives to your WordPress website will benefit users’ peace of mind as much as it benefits a site’s search engine performance, and it’s a great excuse to remind even the most loyal (and misdirected) reader of the site’s best content and publications over the course of its time on the internet.

Do you use a custom 404 page on your WordPress site? What have you found works best for content on a 404 page? Let us know in the comments!

Vladislav Davidzon is the principal of a US-based online marketing consultancy, developing integrative solutions through high impact search engine optimized WordPress websites for socially responsible customers of all sizes around the world. For more details visit Vladislav Davidzon & Associates.

eBook: 101 Dos and Don’t of a Successful Graphic Designer – $14

Every trade has a similar story to the point where it’s almost cliché: the carpenter’s house is falling apart, the mechanic’s car is a rattling jalopy, and the barber is a balding chatty guy who’s always forcing loved ones into drawn-out awkward small-talk. It only makes sense then that the web designer’s site would be mired in all sorts of miserable problems.

Working on your own site is incredibly hard! You’ve just worked all day on other people’s websites, now you’re going to do yours, on your own time — for free. Ugh! Add to this the pressure of doing your “best work”; you start thinking of incredible ideas and scope-creeping the possibility of it being doable into oblivion.

We’re web designers — this medium is our message, but it’s also where most of our amazing community spends a lot of free time. The pressure to do something outstanding can be pretty crushing. All too often we psych ourselves out, or produce something that doesn’t satisfy.

You’re not alone in this struggle.

I recently refreshed my own personal site into its tenth iteration. That’s right. I’ve done this ten times. The previous nine times have been the dismal and painful worst-case experience I’m talking about. I have been a terrible client. I’ve been demanding, unreasonable, and had vague goals. I never gave this problem much thought until this recent work. These are all symptoms of being unfocused, and not looking at the problem objectively.

If this is something you have gone though, or are in the midst of now it’s time to approach this project different than you would a client’s site. For version 10 for ArleyM.com I decided not to compromise anymore. I invented a few ground rules for myself right from step one. This made the project a joy to work on.

Every client is different (especially when the client is you!) Consider reworking these, or making your own rules to fit with your project:

1. Have fun with it

Self explanatory: if I’m not enjoying working on it, I won’t enjoy the end product, and I’ll never update it. This is my free time. I need a personal project to be fun; this can’t be just-another website. I wasn’t working to a goal or deadline, so I had a freedom to make this rule: the instant this work becomes a drudgery I will go and do something else. I’ll come back to this when I’m feeling inspired and pumped about it again.

2. Break your own rules

This goes hand-in-hand with step one. At work I keep best-practices in mind: write clean semantic code, and make a professional product worthy of our client’s money. I relate following rules to work, which isn’t always fun. At home I shouldn’t hold myself to these restrictions. Browser hacks? Sure! Messy code? OK! Doing crazy impractical things? Yup! I’m the boss of this website, so I will break rules if I feel like it.

3. Do something new

If you’re like me there are a few experiments and techniques that you’ve been itching to try. I like to think of my personal site as a production-level sandbox. Your take on some new technique, or trying out something that’s never been done before will make your site fun, and in the end will score you some traffic from your peers. I put a lot of time and thought into different things I wanted to try for my own site. I wrote about ten things I did on my front page on this post. The bonus to this is that it will stretch you and make you better for client projects too.

4. Be simple

The tendency is to over complicate things in the name of awesomeness. Keep in mind that simple olde-timey principle: Release Early, Release Often. You can iterate and add to your site – this isn’t print, you’re not committing this work for posterity. Think about specific problems on your current site that you’re trying to solve, and solve those. Your site doesn’t have to be everything to everyone when it launches. This sound familiar? We create requirements and goals with clients too! There is beauty in simplicity.

5. Go easy on inspiration

With so many amazing galleries out there like Dribbble, Awwwards, Best Whatever, etc. it’s way too easy to get inspiration overload. I actually usually find inspiration counter productive. Sometimes I’ll see work so great that I begin to feel like “it’s all been done”, or “it’s being done better than I can ever achieve”, or some other anti-inspiring counter productive nonsense. For me, inspiration is good to get thinking along the lines of a certain feel or aesthetic that a client is after – but for a personal project I already know what I like, and I usually have a good idea of how I want the site to look, feel and work. Force yourself to close all of those tabs, and get your head down.

These rules aren’t for everyone, but the spirit of them may be worth considering. I know I’m a “Production” guy, but it’s important to remember that for my own site I’m also the Account Manager, Project Manager, Content Coordinator, and client! For any work I ever do for myself in the future I will first write out a set of constraints like this.

Getting started

The first step is key. Have a reasonable to-do list. “ArleyM.com redesign” sat in my Gmail task list as a massive, daunting item for a very long time. Do you have a two word item on your list that represents an incredible amount of time and effort? That’s a terribly unmotivating starting point as I found out. Break that gigantic thing down into actionable steps, preferably tasks that can be done in less than an hour. Once you start making headway on a few of list items, creativity begins to snowball and the work becomes easy.

Keep going

The bad news is you’re never really done working on your site. Think of it as something continually in a state of progress. Regardless of whether you’re a terrible client to yourself, or an amazing one – you will always be your most important client, and as such you deserve regular and consistent attention.

I try to make time every week to look at polishing some detail, or writing blog posts, or simply getting involved in the conversation elsewhere online. My buddy Andy Patrick is really good at keeping his site fresh. His recent personal site redesign got some attention in online galleries, and he’s had a steady respectable amount of traffic. For many people this is the very definition of success, and a site that has reached the goal – but Andy is still tweaking pixels and details. This tiny, but regular attention will keep your site from transforming into that giant unkempt mess that you started with. Don’t be that designer who is constantly scrapping and rebuilding from scratch (trust me, I did it for years!), keep your project alive and evolving with consistent love. Andy’s approach has inspired me, and I have a list of the next three phases for upgrading my site over time.

Are you pumped? Ready to rock this thing now? My last bit of advice is to leave the computer, grab a pencil and pad and go somewhere far away from glowing screens and broadband access. Let the creativity flow and come back with a plan.

What are some barriers you’re creating that are stopping you from doing great work for yourself?

Today’s post is by Arley McBlain, a front end developer in Burlington, Ontario at Thrillworks. He has a passion for coding outside-the-box and creating unique web experiences. You can follow him on Twitter as @ArleyM.

eBook: 101 Dos and Don’t of a Successful Graphic Designer – $14