Gravity Forms Encryption

Gravity Forms is an awesome plugin for WordPress.  However, it doesn’t come with an option to encrypt the data when it is being stored in the database.  While most of us will use gravity forms as a simple Contact Form, many of us might want to use it for much more than that. Gravity Forms is simple enough to use for a Contact Form, but if you wanted to use it as application tool that stores emails, phone numbers, even Social Security Numbers then you might want something that has a higher method of security then storing plain text in the database.

Gravitate Encryption 

This is where the Gravitate Encryption Plugin comes in handy. This plugin allows you to use four methods of security with your client data.

• Symmetric Encryption
  This method uses PHP’s “mcrypt” library to encrypt and decrypt the data with a secret passphrase that you configure.  It will use a random IV with MCRYPT_RIJNDAEL_128 and MCRYPT_MODE_CBC.  There is an option to automatically create and email a Secret Key for you if you don’t know what the best option is.
  Your server will need to have “mcrypt” library installed and configured properly.

• A-Symmetric Encryption
  This method uses PHP’s “openssl” library to encrypt the date with a public_key and decrypts the data with a private_key.  This method uses a 2048bit RSA encrypted key to encrypt the full data.  This allows you to encrypt large amounts of data instead of the default RSA limited amount.  There is an option to automatically create and email a Public and Private Key for you if you don’t know how to do this yourself. The main usage of this type is that you can store the Private_Key in a separate location.  This way the Data can’t be accessed even in the Admin Panel unless you have the Private_Key.  Your server will need to have “openssl” library installed and configured properly.

• Weak Encryption
  Well this encryption method is just as it sounds.  The real only use for this is if your server doesn’t have “mcrypt” or “openssl” installed.  While this method is better than storing the data as plain text, it wouldn’t really hold against someone who know a thing or two about decrypting.  However, if it is your only option then it is there for you.
  * If you plan on storing very sensitive data, then we recommend working with your Web Server admin to get one of the other methods installed and working instead of using this method.

• Remote Database Storage
  This option allows for the data to be Stored on a Separate MySQL Database.  Useful if you want to keep the data behind your own Firewall.  This option can be used with any of the Three Encryption options above at the same time.  You will need to know how to configure a MySQL database as this option does require knowledge of a MySQL database configuration.

WordPress Encryption

While this plugin was intended for Gravity Forms, it can be used by any plugin or even in your WordPress theme files. First you will want to make sure that you have installed the Gravitate Encryption Plugin and configured it.  Next, make sure to Test the plugin.  There is an Encryption Test option at the bottom of the plugin.  If it is working properly then the Un-encrypted Text will show as the same as the Decrypted Text.

To encrypt data use this PHP code:

if(class_exists('GDS_Encryption_Class'))
{
echo GDS_Encryption_Class::encrypt('This is the Text to Encrypt');
}

To decrypt data use this PHP code:

if(class_exists('GDS_Encryption_Class'))
{
echo GDS_Encryption_Class::decrypt('enx2:JKM3FFR4WP5HN6SG0C4ZAIF5K7H');
}


* WARNING:

Once you start using the plugin and start storing the data as Encrypted, you should not change the settings of the plugin as it will no longer be able to Decrypt the data.  That means it will not be able to turn the Encrypted data back into a readable form.  Therefore it will make the data unusable.

You should only configure it once and then Disable the Plugin from being managed in the Admin Panel.

If you need to change the settings you will need a Web Administrator to backup your data Un-Encrypted then change the settings and Re-Populate the data with the New Encrypted Settings.

Disable the Plugin from being managed in the Admin Panel

This can only be done from within the code of the plugin.

You can update the code in two ways.  Either using FTP or you can edit the file from within the Plugin Edit page.

Go into the “gds_encryption.php” file and change:

$gds_encryption_enable_settings_page = true;

to

$gds_encryption_enable_settings_page = false;

Get the Plugin

You can get the plugin here:
http://wordpress.org/plugins/gravitate-encryption/

* Sorry, but Gravitate offers no Support, Guarantees, or Warranty for this plugin.  Any comments or reply’s provided by a Gravitate member is done at will. Use this Plugin at your own risk.

 *It is recommended to use private data in the comments and to not share your website or company information on this page.

While I was doing some research on designers and developers working together, I found that most of the information out there is about how designers and developers don’t work well together. Most articles are titled “Designer vs. Developer”, so I wanted to bring to light how it should be “Designer + Developer” because a lot of issues can arise if the designer and developer don’t communicate.

What Happens if they Don’t?

image created by @shanesnow

First, we should be all too painfully aware of what happens when the designer and developer don’t communicate on a project.

The best case scenario is that the website works…but that’s about all. There will be (of course) a large disconnect between the design that was originally created and the end product.

On the other end of the spectrum is that the site is not useable, doesn’t make sense and leaves the end user feeling confused and even frustrated. Both of these outcomes will result in a loss of site users.

What Happens if they Do?

The most obvious answer is you will have an amazing product! Having the designer and developer talk means that they can bounce ideas off of each other and find the best solution to each problem. The designer might have ideas that the developer hasn’t thought of and the developer might have suggestions about functionality that the designer didn’t know was even possible.

There are of course a lot of other benefits to having a designer and developer work together. One way to think of it is two sides of the same coin. Without both, the coin isn’t worth anything. Horrible cliche; but I think that it explains the point.

Thankfully, I am privileged to work with an amazing team that focuses on communication through every step of our process. A very large part of that communication comes down to the designers and the developers actually sitting down and talking.  I know we have all heard the stories about how designers and developers don’t speak the same language, or that there is no way for them to communicate. But, I know first hand, that this does not have to be the case.

How to speak the same language

Let me share some of the tips I have picked up here at Gravitate that can allow this miracle to happen for you, too!

First and foremost is let the passion for your craft help you to find a common ground. You both want to create the best website you possibly can, so let that help guide the communication.

Second, put yourself in the other person’s shoes. You have been doing this type of exercise all along by putting yourself in the shoes of the end user (or at least you should be). Therefore it shouldn’t be too much of a stretch to look at where your counter-part is coming from.

Finally, push yourself. Use each other to push your boundaries, comfort zones and skills farther and farther. If both designer and developer aren’t learning from each other then one or both can become stagnant and that is the last thing you want in this business.

What it all comes down to is just talk. You will both be amazed at what you can create when you work together.

To close, I’d like to share a quote with you as I think it’s very fitting for this topic.

“…there lies buried in the Greek language a startling insight: the same word, poiesis, describes the work of both the mechanic and the poet. In modern times we have grown accustomed to thinking of the inspired artist and the disciplined engineer as opposed human types who gaze upon one another with mutual incomprehension, if not outright and avowed hostility. The Greeks, however, could not even express in language the difference between the artist and the engineer.” – Barry M. Katz

1. Malsup Plugins

http://malsup.com/jquery/
These are some of my favorite and most-used jQuery plugins. Mike has done an amazing job at building solid and well-documented plugins. I especially love the Form plugin!

2. Preloaders

http://www.preloaders.net
I’ve never met a designer who wanted to custom design a loading indicator, much less animate it. So it’s usually up to me, a colorblind and socially-awkward developer who stopped drawing in middle school, to figure out what will look good. Preloaders to the rescue!

Honorable mention: ajaxload.info

3. FamFamFam Icons

http://www.famfamfam.com/lab/icons/
A gorgeous and very useful collection of icons, you can drop these into just about any project and they’ll look great. Works wonders for custom post type icons, too. (You’re not leaving those set to the default “pin” icon, are you!?)

4. Mozilla Developer’s Network

https://developer.mozilla.org/en-US/
My go-to resource for news and updates on most web development technologies I use. Way easier to understand than the official HTML5 specification.

5. Initializr

http://www.initializr.com/
Need to start a project fast? Generate a boilerplate with Initializr and you can take the rest of the day off! Fill it with Lorem Ipsum and take two days off.

6. PHP Manual

http://php.net/manual/en/
The best documentation available for PHP. This thing is chock full of examples and comments from other developers. If you need to learn about a function or language construct of PHP, there’s no other website you should go to first.

7. Pastie.org

http://pastie.org
I use this for sharing code/snippets with people quickly, so they can review it or help figure out where an issue lies. I love the color coding options and the ability to set it to private, so that only people with the link can see the post. I also like looking through the public posts to see all the awful stuff people are putting up there.

8. JSFiddle

http://jsfiddle.net
Sort of like Pastie on steroids, JSFiddle is almost a complete IDE in the web browser. You can share your functioning HTML/CSS/JS with other people, who can then edit it as well as create new branches so your original code doesn’t get destroyed.

Honorable mention: http://codepen.io (just as good, if not better than JSFiddle. I definitely like the design more.)

9. Google Developers

https://developers.google.com/
Like most things Google does, their developer resource library is well-made and extensive. If you’re working on a project that uses any of Google’s APIs, those fine folks have made plenty of examples for you to dissect and learn from – and of course the full blown API documentation as well.

10. Google Web Fonts

http://www.google.com/fonts/
I’ve almost forgotten about the days when websites were limited to the 12 or so system fonts that most OSes used. Google, among others, has made the embedding and use of custom fonts so easy and ubiquitous that even management knows about it!

Honorable mention: http://fontsquirrel.com

I know what some of you are thinking, “It’s more fun and rewarding to figure things out on my own.” And I agree, in most cases – but sometimes you ain’t got time/resources to do so and that’s the beauty of living in an open source world. What tools do you love? Want to add one or 10 to this list? Leave us a comment.

It’s springtime and with the warmer weather (sporadic here in the PNW) comes spring fashion. To celebrate our newly-renovated historic downtown building, Gravitate hosted “Couve Couture”, a bi-annual, one-night only fashion event highlighting local apparel design talent.

“Vancouver, Washington has fashion designers?” you ask. Why yes we do! And quite a few. Including Bravo! Network’s Project Runway winner Seth Aaron. And with Michelle Lesniak winning the most recent season, the Portland/Vancouver metro area now counts more winners than any other city in the US.

Located on the other side of the Columbia River, Vancouver has long since been seen as the little sibling of Portland, Oregon and a much less progressive one, at that. Less than 10 miles away, FashionNXT (aka Portland Fashion Week) is the third longest running fashion week in the US after New York and Los Angeles.

It takes more than raw design talent and showmanship to be successful in the fashion industry. Of course there are the production, operation, sales and distribution aspects that all take careful planning. But what creates the initial hook? What makes consumers, retailers or industry experts take notice of the “next big thing”?

It’s The Pitch!

A compelling identity and message not only creates awareness and excitement, but also communicates a company’s personality and values. For the budding Couve Couture fashion show, this is where Gravitate came in.

Our goal was to create an identity that highlighted the unique personality of Vancouver fashion. It had to be chic and sophisticated yet not too much as to alienate a newcomer that might think Couve Couture was overstepping its bounds. It had be neutral enough to encompass and represent the wide variety of the contributing designers’ styles, but strong enough to stand toe-to-toe with Portland Fashion Week’s established presence.

When it was all said and done, designer Ryan Mowery did a fantastic job. Proof was a sold out crowd of 575 energized spectators.

For more on business, fashion, and design, follow me on Twitter @chrisosaka

Baja Fresh circa 1997

Baja Fresh today

The first step in any startup website project is to make sure you’re ready for it; otherwise you could end up making a huge website design mistake. Once you have your business and marketing basics in hand, there are several reasonably-priced ways to launch your first website. The one that’s right for you depends on your resources in terms of time, money, and technical skill.

Website Basics: Domain Name & Hosting

Regardless of how you build it, two mandatory expenses will span the life of your website: domain name registration and website hosting. Domain name registration secures a unique website name and permission to use it. There are hundreds of domain name registrars online and the fee is usually nominal—the typical U.S. small business can expect to pay $8 to $10 per year.

Even if you opt to hire a website company, you should still take charge of domain name registration because it is an annual fee to be renewed in perpetuity– you don’t want to lose your domain name a few years down the road because, come renewal time, you can’t find your web designer.

Web hosting is a service that makes your website available for use on the Internet; it is usually another nominal fee and typically a monthly charge. Many web design companies offer hosting services, or you can arrange for hosting on your own.

GoDaddy and DreamHost are a couple of popular providers of both domain registration and website hosting services.

Fast & Easy Do-it-Yourself Website Builders

If you have very little technical skill, then pre-designed and developed websites are a good bet. A service like Yola is a popular option. Companies like this usually charge a monthly fee that allows you to select from a variety of website designs and add your own information. The downside is that you have less design variety and less ability to customize your site, and further, you don’t own your website—if you stop paying the monthly fee, the website shuts down and you cannot access the files.

Theme Websites

For those who have a little bit of technical skill or are willing to learn, theme websites designed with content management systems can be a great option. With this approach, you’ll have a broader selection of designs than with the website builders, plus you’ll own all of your website files. With these services you select, purchase and download website files, then set them up in your own hosting environment. You’ll be able to add your own copy and images using the content management system (WordPress and Drupal are the most common ones). ThemeForest, StudioPress and WooThemes are good options–ElegantThemes is another favorite because, although they offer fewer themes, they have great technical support.

Website Options for the Technically Challenged

If you really aren’t up for doing any of the technical part but still need a cost-effective solution, there are companies like HomeSpun Websites with DIY website builders that also provide a real, live support person to help you with the tricky parts.

Custom Designed Website Options

So far, all the options discussed are pre-designed and developed websites. With a custom-designed website, you start with a blank page and have free range to design anything you like, which improves your chances of getting exactly what you want. The challenge with custom website design is that there are so many different vendors it can be hard to find the right fit for your startup.

There are three main components to consider when creating a website: design, development, and SEO. To understand the difference between them, it’s a little like building a custom home:  the architect draws up the blueprints, the contractor builds it, and the realtor finds buyers. Each is a critical part of the process, but they require very different skill sets—you probably wouldn’t hire one person to design, build, and attract potential buyers.

Likewise, when evaluating potential website companies, no one person is going to be good at design and development and seo. Be wary of a single freelancer who says he or she can do it all. Probably the best way to find a reputable website company is to ask for referrals from businesses with websites you admire. Check their online portfolio (make sure you like it!) and do your due diligence by contacting references.

Avoid making a decision based solely on price—a website isn’t a commodity, and you won’t be comparing apples to apples. Sometimes, the company with the higher price tag offers the better value. In addition to price tag, timeline is another factor to consider. A custom website usually takes time to do well—expect it to take at least three months for the entire process, from kickoff to launch. The most frequent cause for website project delays are content (the words and images for the website). Most website companies do not write website copy for you—clients are expected to provide web-ready copy. Ideally, you will have your website copy drafted before you get started on your project.

While this article barely scratches the surface of the topic, it should help you get a better sense of what you’ll be taking on when starting a website project.

Ink to Wood

Everything is digital now. Everything. Most companies are going paperless, and processes that used to require expensive machines and hundreds of hours have been reduced to one person on a laptop in a coffee shop. These scanned objects printed onto wood are meant to embrace the digital methods of creation while honoring traditional methods of printmaking.

The process is time consuming but I find it very rewarding. It helps teach me patience. I like having to go through each step and laboring over the smallest details. It is hard to skip steps and come out with a polished final piece. It’s therapeutic and relaxing.

A little about the process

I started by scanning many different silverware utensils on a flatbed scanner. Given that these objects were not flat, capturing the details in the curves and shapes was a bit tricky, but care in positioning and Photoshop helped a lot.

Using Photoshop, I completely de-saturated the image. While the transfers would’ve worked with color, I felt a darker grayscale tone would be more effective. I also prefer the grayscale look because it communicates conceptually a lot clearer than a color image would. I always try to increase contrast without losing the detail in the gray tones. Darker tones transfer really well, but the real shape of each object comes from the gray tones.

I then printed out the images full size, using toner ink. Toner ink transfers cleaner, and the darker colors are much fuller and richer. Toner heats up and melts onto the paper as opposed to inkjet, which is printed as droplets that dry onto the paper.  It is important to print the image reversed, so it transfers facing the correct way.

To transfer the image, I covered the wood surface Using Liquitex Matte Medium. This material adhered the paper to the wood. Then I let it dry overnight.

I soaked the dry print/wood in water and gently scraped off the paper, without removing the toner from the wood. Removing the paper was time consuming and required a couple rounds of rubbing and scraping.

Once all the paper was off, I waited for the wood to dry. Then I put a coat of paint thinner over the top. This helped remove some of the excess paper left from the transfer and gives the some depth to the print. For the final output, I gave the print a coat of Briwax.

MY Final thoughts

It’s exciting to incorporate other processes and materials into my work. I primarily work digitally so getting to use tangible materials and combining digital with analog workflows was a nice change of pace.

This was just an overview of how I created these. If you’re interested in my specific techniques – feel free to contact me.  You can also visit this great blog on a similar method here.

Agencies are approached regularly by aspiring business owners who jump into a custom web design project too quickly. While a website is unquestionably a critical component of an organization’s business, it’s important that your startup is on a firm foundation before you shell out the cash for a website. Consider the following fictional examples drawn from true life situations:

Mistake  #1 – Failing to research your market before engaging a web designer

Once upon a time, there was an e-commerce website project that went horribly wrong. Here’s what happened: a web designer was approached by a woman –let’s call her Angela– with a solepreneur business making custom t-shirts. She’d made the rounds at the appropriate venues: farmers markets, street fairs and music festivals, but she had little success in selling her wares.

Rather than research the possibilities for failure (Product problem? Mistaken market?) she jumped to the conclusion that if she could just sell her tees online, the orders would roll in.

Now, think about this for a minute. If you’re talking face-to-face with the right customer about the right product and they still don’t buy, why would you possibly have more success selling online?

Unfortunately, Angela found a web designer who disregarded the glaring fact of a flawed business premise and took a hefty chunk of her savings (more than she could really afford) to build an e-commerce site. Despite an attractive and functional website, the e-commerce business was an abject failure and shut down 12 months after launch.

Truth #1: A stellar website can’t fix a flawed business idea.

Mistake #2: Thinking you don’t need a plan because your startup idea is so very awesome

There’s a certain mythology about the start of startups: HP and Apple were born in a garage. Dell started in a dorm room. YouTube was a sudden inspiration. The truth is something completely different. So legendary entrepreneurs be damned, preparation is not a bad thing if you’re launching a new business.

To illustrate, here’s another story. A middle-aged couple had a life-changing experience after stumbling across an obscure health supplement while on vacation in India. It gave them vitality and sharpness of mind they hadn’t felt in decades, perhaps ever.

Eager to share their find with the western world — and retire fabulously – they contracted a creative agency that produced a lovely brand identity and e-commerce site, and the couple paid the bill with money pulled from their retirement fund, early withdrawal penalties and all.

On website launch day, the couple called their project manager and said something to the effect of, “Uh, gee, we won’t be able to do the business after all.” Turns out they hadn’t figured out how to get the proper approvals to import and sell the supplement in the US. They tried to modify their offering with little success and 18 months later, but still haven’t begun to recoup their investment.

Truth #2  You really should figure out if your business idea is even possible before robbing your nest egg to pay for a custom website.

Mistake #3  Disregarding the need for a unified internal team

Another frustrating situation for a web designer is when a project becomes paralyzed because the client has major internal issues. We’ll call our third scenario Pelosi & Ashcroft Partners, LLC (P&A). Intelligent, successful professionals, the principals of P&A had abandoned corporate employ to join forces and launch their own consultancy. They wanted a polished, professional website to reinforce their credentials and they wanted it fast. Having started the web designer selection process in late fall, they were eager to expense it in the same fiscal year, so they went ahead and paid the entire cost up front (which is atypical).

The project was headed for trouble early on when it became clear that the two partners had wildly different visions for the website (and probably the partnership, too). One wanted a custom-designed website, the other thought a cheap template was good enough. One wanted an ultra-modern look, the other skewed conservative. One wanted to pursue content marketing to generate leads, the other saw that tactic as useless for their largely word-of-mouth industry.

Website meetings quickly morphed into therapy sessions as the project manager sought common ground between the two partners to keep the project moving forward. Ultimately, it took nearly a year, but the web designer was finally able to create a website with a design and functionality that the two partners agreed on.

However, to this day (18+ months later) the new website still has not launched because P&A can’t agree on content–since it has a content management system, in theory, they will be able to finish the project on their own. Whether they will actually do so remains unclear, since there’s no longer a “therapist” to facilitate.

Truth #3  A web designer isn’t a business consultant—they can’t solve your internal problems.

How to avoid making these types of mistakes

If you’re starting up a business, do your homework. While you probably don’t need a massive, Harvard MBA-worthy business plan, you do need to put some thought into your enterprise before sinking money into it.

The U.S Small Business Administration and SCORE are two good places to start. Most metropolitan areas have their own local small business resources, so make sure to ferret those out.

With just a little forethought, you’ll be well-prepared to collaborate with a web designer who will deliver a website that’s a powerful business and marketing tool.

If you build it, they won’t just come

Now that you’ve used Part One to create inspired, easy-to-digest, compelling piece of original content, it would be nice if people actually read it, right? While the Field of Dreams mentality may work for established authors and well-known websites, most of us need to promote and optimize our content to avoid having it slip into internet obscurity.

Steps after you publish

 Optimize Keywords

Scan through your content and pick the main topics or phrases in your article that would likely be searched on Google. Plug those terms into Google Adwords’ free keyword selection tool to determine whether your headings and main topics need to be refined or generalized depending on the competition and quantity of global/local monthly searches. For example, the subheading/URL of this article was altered from “Getting your content found on the web” to “How to have your writing found on the web” after noticing the original heading was contending with the highly competitive keyword listings of SEO tips and website optimization. ­

“Content” results were too broad – needed to refine to “Writing”

Adapt Your Status Updates

It’s easy to merely post the title of your blog post to your social networks. Don’t do that. To obtain the most traffic from your status updates, try to pose a question that is answered by your article and tailor it to each social community. This may mean multiple updates on different days and at different times to see meaningful results. We suggest sticking to the following social platforms to promote your content (in order of importance): Twitter, Google+, LinkedIn, and Facebook. Here’s a helpful infographic that dives into each platform’s audience groups, personas, and surfing habits to help you customize your status updates.

Seek and Assist

Proving relevant, researched support that directs traffic toward your content is a great way to build traffic and Twitter/Google+ followers, too, for that matter. Simply do a little digging on Twitter and Google+ for your topic and share your post with people who are asking for guidance. The trick here is that your topic should be answering questions and providing original ideas and resources. If you’re finding that “there are a lot of other articles out there just like mine,” you may need to take another look at your topic and decide why anyone would care to read it.

Google Authorship and Author Rank

You aren’t a robot. You don’t churn out ten, 500-word articles a day and then do it all again tomorrow—or at least you shouldn’t.  You spent time brainstorming, researching, writing, editing, and promoting your content—and you are proud of it. Google wants to reward you for your effort and punish the anonymous writers who pump out poor content crafted only for link building. Bottom-line, Google wants to promote great writers who create great content they stand behind.

Authorship vs. Author Rank

There is a great deal of confusion surrounding Author Rank and Authorship markup—first off, they’re NOT the same thing. Authorship markup is the method Google is currently using to display authorship information in search results for the content you create. For example:

Authorship markup puts a face behind the content

Author Rank, on the other hand, is an aspect of Google’s search algorithm, rumored to be implemented in the future. Currently, there is only speculation and not enough data to define precisely how it works—A. J. Kohn, an experienced marketing executive with a successful track record spanning nearly 20 years, explains it like this:

How to Set Up Authorship

It’s a simple three-step process:

• Install “Wordpress SEO by Yoast” on the sites that you contribute to
• Add your Google+ profile URL within the “Users” section on sites you contribute to
• In your Google+ profile’s “About” section, add the site’s URL you contribute to within the ”Contributor to” section.

For more information, here’s Google’s tutorial

TL;DR

Through Google Authorship, Google essentially wants to make sure you’re a real human being and someone who is willing to put your name on the line for the content you create.

With Google+ growing and Authorship in place, it’s only a matter of time until we see Author Rank rolled out.

In the meantime, keep creating enthralling content, set up your Authorship, and promote and optimize your content.

Here’s a mostly unordered list of my favorite plugins that help me out when developing WordPress themes/websites. I’ve been building custom themes and websites in WordPress for several years now, and I’ve grown not to trust plugins in general. I mean, who hasn’t had their heart broken by WP-E-Commerce or had their week ruined by some sloppy SEO Optimizer plugins? Don’t even get me started on those evil 3rd party themes.

Whether you’re a wizened old pro guru-ninja-rockstar like myself, or just breaking into WordPress development, these plugins should ease and quicken your development. Not to mention these are hand-picked as to not be ad-riddled, scam-filled, gaping-security-holed piles of copypasta.

Advanced Custom Fields

Hands down the best plugin ever created (objective truth). Elliot Condon has crafted not only an amazingly functional plugin, but it’s beautiful as well.

Out of the box, this plugin will let you set up custom fields on posts/pages/custom post types. It comes with about 13 types: text (standard text input), textarea, wysiwyg editor, image upload, file upload, checkboxes, relationships (to other posts) and more.

Behind the scenes, you can pull the data using functions that blend into WordPress seamlessly: get_field(), the_field(), etc. The data is saved in the postmeta table, allowing you to perform any sort of SQL wizardry on it you might need. When creating a custom field set, you can even decide which of the default wordpress fields show up, like, the content, author, slug, page attributes, etc. To top it off, you can decide where the fields show up using simple yet powerful rules, ex.) only on posts that are categorized “Web 2.0,” or only on certain child pages.

There’s even more amazing extensions for ACF that you can pay for: repeating fields, flexible fields (let the user choose which type of field they want), an options page extension that lets you add custom option pages with your own custom fields to the WP dashboard, and more. There’s too many features and use cases for me to list here, just go visit the website already.

http://www.advancedcustomfields.com

Gravity Forms

There’s no other option for forms, in my opinion. Gravity Forms may cost a bit of money, but it gives you an amazingly powerful form building engine with more features, hooks, and functions than you can shake a Harlem at. If you’re still using those other form plugins that desperately wants to be Gravity Forms, you’re doing yourself and your clients a disservice! If you buy a developer license, you can use this plugin wherever you want!

http://www.gravityforms.com

Bulk Page Creator

There’s not much more to say about this plugin besides the title. It’s a very useful uni-tasker, though. You can create a huge hierarchy of pages with dummy content in mere moments. There are other plugins out there that emulate this functionality and extend it by letting you upload a CSV, populate post meta and create custom post types, but they’re all so cluttered and ugly. It’s pretty simple to hack this plugin to make it create a custom post type instead of a page.

http://wordpress.org/extend/plugins/bulk-page-creator/

Regenerate Thumbnails

Another plugin that’s suited for one task, and one task alone: regenerating images.  Not sure why it’s called regenerate THUMBNAILS when it works on any custom image size. But with a single click, this plugin will process every uploaded image and generate all the appropriate image sizes as defined by your theme. Not recommended on a site with more than 200-300 images max. Best use case: if you’ve recently added an add_image_size() to your theme functions, and have images already uploaded that you need in your new custom size. You can achieve the same effect by going to the media library then opening and saving an image — but that becomes tedious for more than one image.

http://wordpress.org/extend/plugins/regenerate-thumbnails/

Debug Bar + Console + Extender

This is actually three plugins, but we’ll count it as one. The main plugin here is Debug Bar, which adds a “debug” menu to your admin bar showing you any warnings/notices/errors, memory usage, queries used, and some other stats. Extender adds more detailed information, as well as a profiler and relevant functions that you can build in to your code for optimization/debug purposes. The console is actually my most used portion of the three – it adds a console to the debug menu that lets you run PHP and SQL as if you were actually in a terminal. It’s very handy for quickly checking something in the database without loading up an sql client, or var_dump()ing a variable in page to see what you’ve got going on.

http://wordpress.org/extend/plugins/debug-bar/
http://wordpress.org/extend/plugins/debug-bar-console/
http://wordpress.org/extend/plugins/debug-bar-extender/

What The File

Simple yet elegant plugin that adds a new section to the admin bar showing you which template file you’re currently viewing. Yeah, sure, if you have a properly placed body_class() you can see it in the source code too, but I find this plugin to streamline the process. I’ll usually install this when I get someone else’s code I need to work on, or if I’m dealing with more than 3-4 template files.

http://wordpress.org/extend/plugins/what-the-file/

User Role Editor

If you’ve noticed a theme (pun aggressively intended) in this list, it’s that I like my plugins simple. If I can’t find a plugin that makes my life easier and less cluttered, I’ll usually just do whatever needs doing with PHP instead of relying on a shady 3rd party plugin. Sometimes a plugin just overwhelms you with options, especially in the realm of user capability management. User Role Editor wins my award for the simplest capability/role editor that still works. Sure, Role Scoper is more powerful — but it’s as ugly as a slug, to coin a phrase.

http://wordpress.org/extend/plugins/user-role-editor/

Adminimize

This sweet plugin gives you pretty decent control over the WordPress Dashboard on a user-role basis. It lets you show/hide menu items, dashboard panels, and a variety of other aspects of the WP Dashboard, per user role. I’ve noticed that it doesn’t play nicely with some plugins that add menus to the Dashboard, so keep that in mind.

http://wordpress.org/extend/plugins/adminimize/

CMS Tree Page View

The hokey name of this plugin nearly scared me off, but it’s actually a nice little package. It gives you a new menu in your posts/pages. You can also add this menu to the Dashboard welcome screen, one of the first useful widget that I’ve found for that screen. (Does anyone actually use QuickPress?)

http://wordpress.org/extend/plugins/cms-tree-page-view/

Theme My Login

Ever wanted your users to login to your site without seeing the WordPress login screen? This plugin lets you move all the login and profile stuff to the front-end of your website. You just add [theme-my-login] to the page you want to be your login page, and all the login/profile information will show up in that page’s template! You can also achieve this without the short code, within the plugin’s options screen. There’s a bunch of hidden features you need to enable that make this plugin extremely flexible. My one gripe is that it doesn’t grab all custom fields you’ve added to the profile (programmatically or with ACF)

http://wordpress.org/extend/plugins/theme-my-login/

TinyMCE Advanced

This plugin is really intended for end-users of WordPress, but it does have some useful development features as well. It will automatically grab the classes from your editor-styles.css file and add them to a drop down in TinyMCE, letting end-users easily select between different classes. You can set up a toolbar for TinyMCE that’s relevant to your project, instead of having the whole shebang (getting rid of align: justify is a great example.)

http://wordpress.org/extend/plugins/tinymce-advanced/

WooCommerce

Don’t fool yourself, there’s no other option for e-commerce within WordPress.

http://www.woothemes.com/woocommerce/

Theme-Check

This bad boy will make sure your theme is up to WordPress.com standards. It’s a little overkill, but great for finding areas of improvement in your theme. (Use this with the theme unit test!)

http://wordpress.org/extend/plugins/theme-check/

Disclaimer: Nobody has paid me off to write a good review of their plugin. To be clear, I’m only on the payrolls of Big Pharma, Big Science, and the Reptilians who secretly run our world through shadow governments but their true identity can only be glimpsed when your digital cable lags.

Your website is not a brochure; it’s a dedicated, always works overtime, multi-tasking sales person. It responds to interaction, makes pitches, reaches out to people looking for answers, and is often your brand’s first impression with a potential customer.

If you’re like most business owners, the end goal for your website is to convince users to buy your product or ‘hire’ your services. An important question to ask is, if your website walked in for an interview, would you hire it? According to research conducted by Universum who’s results were reported in Forbes Magazine, the top 3 personality traits a company looks for when hiring an employee are:

1. Professionalism (86%)
2. High Energy (78%)
3. Confidence (61%)

Similar to a brochure, it’s easy and common for companies to focus solely on the aesthetics of a site. What’s the message? What’s the ‘look and feel’? What’s the content? These are the blatant, obvious concerns. But these elements only go so far in conveying professionalism, energy, and confidence.

Performance is overlooked.
Imagine Johnny.com walked in to your office to interview for a lead sales position with your company. He shows up a few minutes late but says it was due to traffic, no big deal, you know how the I-5 bridge to Portland is anyway. As he sits down you notice that while he looked put together at first, his socks don’t match, his right cuff is unbuttoned, and his fingernails aren’t trimmed. You look past that because you don’t want to judge a book by it’s cover and begin the interview.

“Thank you for coming. We’re excited to be hiring a new lead sales person. Let’s start by telling me a bit about your work history, how long have you been in sales?”

Pause. 10 seconds of silence while Johnny.com stares at you, seemingly pondering your question. Finally he answers.

“Sales is how businesses make money. You should hire me.”

Well that’s not a good answer, he didn’t even address the question. You back up and try again, this time phrasing it differently, “So have you worked in sales before?”

After 30 minutes of questioning and rephrasing your questions you finally become confident that he at least knows what he’s talking about. However, at this point all of the ‘small issues’ are piling up. He was late, he struggled to provide you with answers, his responses were slow and awkward, and he didn’t seem to have concern for detail. In essence, he seems to lack professionalism, has low energy, and definitely doesn’t inspire confidence.

With this scenario in mind, now let’s look at 3 key factors in producing an effective website that are often overlooked yet could have a dramatic impact on your bottom line.

*Meme courtesy of www.quickmeme.com

Speed

According to research conducted by  the Aberdeen Group, a 1 second increased delay in page load time causes an average conversion loss of 7%. For a small business that does $3 million in annual sales, this equates to a $210,000 loss! A larger e-commerce site that does $50 million in sales a year, loses an average of $3.5 million annually when their site takes 1 second longer to load.

Internet speeds, mobile usage, and user expectations will only continue to increase. About 10 years ago, an 8 second page load time was acceptable but today a 3 second delay is considered a ‘poor user experience’. As a result, the top 2 factors that effect bounce rate are:

1. Content relevance
2. Page load speed

In April 2010, Google began including page load time as one of its ranking factors. Therefore not only does a slow site create a bad user experience, it now can cause you to not be found in the first place!

What to do:

Johnny.com needs to plan for traffic. First, find out how your site performs. Try these tools for instant results and suggestions:

Google: https://developers.google.com/speed/pagespeed/insights

Pingdom: http://tools.pingdom.com/fpt/

Once you know what you are dealing with, carry out the recommendations or find a development firm to do so for you. Most speed modifications are relatively straight forward which makes it possible to see a significant return on investment.

Consistency

Consistency equals professionalism. It implies reliability, shows attention to detail, and an overall passion for the craft being shown. Inconsistency, on the other hand, reveals apathy, conflict, instability, and gives the impression you would rather be doing something else. From a branding perspective, consistency speaks to whether your company is a focused expert, or a dysfunctional amateur. Here’s 3 common areas to look out for:

Language

Successful mobile app design has proven that a consistent personality and voice inspires loyalty. Websites are beginning to catch on to this philosophy as well. Within a multi-author blog, it’s good that each article reflects the author, however, outside of the blog the website should have one cohesive voice.

To facilitate this, MailChimp published their own Voice & Tone guideline website. MailChimp uses consistent language throughout their company from marketing material to the newsletter application interface. Ask any user what they think and chances are you will find they have a strong affinity for the Chimp, which greatly rivals the brand loyalty for competitors such as Constant Contact and Vertical Response.

If your site is maintained by multiple people or a 3rd party web maintenance company, consider taking the time to craft your own voice and tone guideline.

Design

Design is the visual counterpart to language. It’s easy to become focused on a single element such as a call-to-action for a new product, and complete overlook the overall design of the site. Contract can be a great tool to draw attention but too much can end in a disjointed experience. Remember this: controlled variety is interesting, random is irritating.

Layout & Navigation

Users come to your website to find and consume content that is relevant to them. The harder it is for them to do that, the more likely they will get frustrated and leave. While attractive design improves a users brand-impression, an inconsistent layout or confusing navigation can quickly toss out those warm fuzzy feelings and replace them with flat out irritation. This can obviously effect conversion rates, but if the user does convert, you’ve managed to taint the brand expectation before you’ve even been introduced!

What to do:

Hire a webmaster! In the age of great open source content management systems (CMS), the ‘webmaster’ seems to have been thrown out with the bath water. Rather than assuming your CMS replaces the need for a webmaster, recognize that it is actually a catalyst to expand the webmaster’s role and enhance their productivity. The webmaster can operate as a gate keeper or quality assurance enforcer. In Johnny.com’s case, the webmaster is a fashion and etiquette coach. This, in combination with well-organized CSS can do wonders.

Forms

Whether its a contact form, a newsletter sign up, or full e-commerce checkout process, a conversion happens when a user is changed from consuming content to giving something of value back to the website owner. Therefore, most high value conversions end with a web-form.

The moment you present a form to a user you are asking them to change their behavior and trust you with their personal information. This is no small request. Instead of looking at a form as a tool for collecting information, look at it as the final pitch in your online sales process. If your website is a sales person, the form is the moment their pitch ends and the sale is requested. It’s arguably the most important moment in your sales process. Any sales guru will tell you that it’s paramount to make the sale as easy and painless as possible, once the person commits. The same rules should apply to the web form.

We see good web form practices more commonly in mobile sites. The restrictions of small thumb-driven devices has forced designers to streamline the conversion process. Unfortunately that philosophy is all too often not applied to the desktop environment. To paraphrase Derek Nelson in his Smashing Magazine article regarding mobile e-commerce sites, “What’s annoying on a desktop can be fatal in mobile.”

What to do:

These simple rules apply to most forms. There are exceptions, such as long forms which are designed specifically to carefully qualify applicants (see Happy Cog for an example!).

1. Review every field of the web form and ask yourself, “Can I complete the sale without this information?” If the answer is yes, drop the field.
2. Make the form linear. This means it should be obvious to the user what field to complete next. A form laid out like a grid with no clear direction implies more work. Remember, annoying is fatal.
3. Clearly identify required fields. If a field is required, clearly identify it! It’s annoying to be forced to return to the form to correct mistakes. Additionally, if the user is in a hurry (which most are!) clearly marked requirements can streamline the necessary steps.
4. Use instant validation. A typical form will not tell you of a mistake until the user attempts to submit it. They are then denied, and forced to scroll back through the form to find the mistake. This is annoying. A form that instantly validates as you leave the field, without interrupting your ability to type, feels helpful rather than restrictive. User’s don’t want a police officer, they want Watson.
5. Make sure it WORKS! Too often clients come to us wanting to improve their conversion through Search Engine Optimization, only to find out their contact form doesn’t work half the time. We recently tripled a client’s conversion rate by adding form validation. Users thought they were successfully completing the form when in fact they were not. Test your forms regularly to ensure they are functioning. Many forms rely on 3rd party APIs or technology, which means they could break without you being aware.

The Bottom Line

A typical, professionally crafted website for a small to medium sized business costs between $25,000 – $75,000. That’s nearly the same cost for a non-commissioned sales person’s salary. Would you allow Johnny.com to be paid $75,000 per year if he only brought in $20,000 worth of business? While strategy, design, and digital marketing are key elements to an effective website, a bumbling, poorly operating website, can keep you from getting business. Your website may be pretty, but is it effective? Websites should pay for themselves.