Get found on the web

Quality Web Design for Small
to Medium Businesses in New Hampshire

jQuery UI Bootstrap 0.2 Released

Posted on by Portsmouth Media in Blog Comments Off

An article I was reading about plugins

Today I am happy to announce the release of jQuery UI Bootstrap 0.2. This release includes a number of bug fixes and new additions to the theme and can be downloaded from the release site now.   Fixes Include Compatibility … href=””>Continue reading class=”meta-nav”>→ | Articles for developers

Should designers do personal projects?

Posted on by Portsmouth Media in Blog Comments Off

An article I was reading about photoshop

href=””> class=”alignleft size-full wp-image-28845″ title=”thumbc” src=”” alt=”" width=”200″ height=”160″ />As creatives, most times we feel like we can do it all, or we are put in a position to do it all. We typically take on a ‘Jack-of-all-trades’ mentality, that can either help or harm us.

For some odd reason, there seems to be a discrepancy of sorts when it comes to doing the work for ourselves. Some designers feel like of course we should take on that Jack-of-all-trades mindset, while others just feel like it makes sense to pass the work off and let someone else do it.

The truth is, they’re both great ideas but vary depending on your situation. How creative are you? What is your skill set? What kind of things stress you out? All these questions should be taken into consideration when determining whether or not designers should do their own personal projects.

Keep in mind, that for the purposes of this argument, we will say that a personal project is any type of work that contributes to yourself and your services. For example, we are talking about business cards, websites, etc. id=”more-28670″>

Yes, do personal projects

Doing your own work can be extremely beneficial, especially if you are in a place where your client work is slow or you are just starting out and need some things to keep you occupied. Doing your own personal work from start to finish can sometimes be much more fun than client work and can teach you a lot about yourself and your style. Keep reading to find out some reasons why designers work on their own projects.

Beginner’s luck

href=”″> class=”alignnone size-full wp-image-28686″ title=”beginners” src=”” alt=”" width=”550″ height=”350″ />

If you are at the very beginning of your design career, it’s kind of hard to offer services to others, especially if you are lacking the proper portfolio. Most times folks aren’t going to give you a chance if they don’t know you or know your work. The best way to counterattack this to make your first client yourself.

Let’s say for example, you are a graphic designer who would like to offer their services to the public. Well, to start off, you feel like you need to print up some business cards because you’d like to give them to some friends, family, and colleagues. That’s a great idea, but if you don’t have any work to show for, how are they going to know your work? Take the time out to really create your own business card and whatever other pieces you feel like you need to offer your services. There’s no need to run and grab a template if you can do it yourself.

As we are talking about personal projects essentially for your services and for promotional purposes, don’t forget that it’s okay to create conceptual art and put it in your portfolio. There’s this preconceived notion that all work in your portfolio has to be paid client work, but that is a falsehood. It’s okay to create a mock up, or some sort of conceptual art to let your viewers see what you are capable of. Whether you are a beginner or not, if there is a new technique you want to try out and show off, make something up. It’s totally fine to add imaginative work to your portfolio. It could quite possibly be the work that gets you in with a client!

Growth and technique

href=”″> class=”alignnone size-full wp-image-28688″ title=”growth” src=”” alt=”" width=”550″ height=”350″ />

Doing personal projects really buys you time inside of whatever program it is that you may use. No matter your how good you think you are or how good others think you may be, it’s always great to have practice under your belt. Being involved with your personal projects allows you the opportunity to grow and be solid in your craft and allows you to become more familiar with techniques.

One thing that is extremely important to designers of all types, is their workflow. You may be an awesome web designer, but you don’t want it to be a pain in the butt to get done what it is that you need to get done. Personal projects help you figure out your workflow better because when you’re working on your own things, (hopefully) you aren’t as strict on yourself and you feel more free to create (than say, if you had a big near-deadline client). With your client work you want to try to be neat and color inside the lines—hopefully you loosen the reins a bit when it comes to your own creative projects.

Growth in whatever you do is necessary. Developing your technique and your workflow inside your programs of choice is absolutely necessary to the success of what you’re doing.


href=”″> class=”alignnone size-full wp-image-28689″ title=”experiment” src=”” alt=”" width=”550″ height=”350″ />

Along with practicing and streamlining your workflow, you want to be able to experiment on some things. Experimentation, along with practice, really helps you figure out new techniques and helps you come up with your own style. Most times with commissioned projects, we aren’t as prone to experiment, but with our own personal projects, experimentation should be heavily utilized and looked forward to.

Depending on your target audience, the work you end up doing could be extremely repetitive. You may be known for the way you put together really clean, minimalistic web designs. There’s no foul there, but it’s nice to be able to step outside of yourself if necessary—if not to add a skill, then to be able to have a general knowledge of said skill.

You may also have a skill set that is closely related to another—there may be times where you are asked to carry out those tasks by a client. Now it’s all up to you whether or not you want to increase your skills, but it is good to be able to experiment and research so that you have some clue about related skillsets. As a strict graphic designer myself, I don’t know a ton about web development, but I have experimented enough to know what works and what may not work. I have enough knowledge to know, if I can’t do the task, I can point you in the right direction. This is what experimentation can do for you.

Added personal touch

href=”″> class=”alignnone size-full wp-image-28690″ title=”personal” src=”” alt=”" width=”550″ height=”350″ />

What I think is most important about doing your own projects is the personal touch and flavor that’s put on it. Yes, you can tell someone your style and the things that you like but no one can really portray it and put it down as best as you can (especially if you have the ability to do so). Most times, the work that is done for yourself is and can be the first that people see of you. Are you okay with that first impression being work someone else has done for you?

It also makes sense that if you are known for a specific talent to carry out that specific talent for yourself. For example, if you are known for developing great WordPress themes and such, when you need your own website, make it a WordPress site and develop your own theme. That acts as a free advertisement and folks can know and understand how great you really are. If you were to outsource your website and a client wants a site much like yours, they’re more than likely going to skip out on you and hire the company that worked for you.

If you are in a position where you want people to under your vision and your brand, it’s probably best that you do as much of your own work as possible. Quite frankly, when you outsource, most times you end up being lumped together with other clients that are doing similar things and then you lose your personality and what makes you different. You never want to risk losing that by not doing your own personal projects.

class=”spacer_” />

No, don’t do personal projects

There are some designers who feel like personal projects should be done by a third party. Much like doing your personal projects, there are some benefits to not doing your own work. When you think about outsourcing your personal projects, it’s best to take into consideration your business strategy, your common stressors, and much more. Again, below are some reasons why some designers choose to employ others and let them do the dirty work.

The small things

href=””> class=”image-border” title=”small2″ src=”” alt=”" width=”550″ height=”350″ />

Simply put, giving the smaller tasks to a third party can really decrease your workload and your stress levels. You can focus on work you feel needs to be done (things close to deadlines, really big clients, etc.) and pass off smaller tasks, such as business cards and brochures, to others.

Of course, this is all with the assumption that you’ve already handled the larger tasks, such as the website, the logo, etc. What is really popular is to hire these third parties to make updates and changes as you move further along with your brand. It can get to be a bit much to update every single thing yourself, especially when it may be hard to find time—or it’s easily forgotten because it’s just not that huge of a task; however, it must be done. If your personal projects seem to always need updates and changes, you may want to think about outsourcing.

Time is limited

href=”″> class=”alignnone size-full wp-image-28692″ title=”time” src=”” alt=”" width=”550″ height=”344″ />

Some of us aren’t beginners and some of us are actually swamped with tons of commissioned work. Depending on your business and your strategy, focusing on this type of work may be all you want to do. If that’s the case, you may only have the option to have a third party help out with your personal projects.

There are times when after you feel like you’ve really gotten to a place of some success, sometimes you might want to re-brand. The projects you did for yourself when you just started are no longer representative of you, or you feel like your business is going in a different direction. Re-branding (especially visually) is extremely important if what you had and where you are going are two different things. Just imagine, if you are a web designer who did dynamic websites, but wants to change to focus on mobile responsiveness, there may be some visual re-branding you want to do.

If your time is limited and wrapped up by your clients, it’s probably best that you bite the bullet and outsource. You want to find a way to manage your time and your projects as best as possible.

You don’t know how

href=”″> class=”alignnone size-full wp-image-28693″ title=”dontknow” src=”” alt=”" width=”550″ height=”350″ />

No matter how much you try to fake the funk on some things, when it’s time to actually sit down and create something you have no clue how to do it—or it just may not be of the quality you want it to be. We talked about how it’s nice be familiar with different skillsets, but most times, if you don’t have it, then you don’t have it. And you should be familiar enough with the skillset to know when it is time to reach out to someone else.

For example, as a designer you may want to create a promotional video for yourself. You have a nice digital camera that shoots in high def, and you even have iMovie or Final Cut, but perhaps that’s not quite what you had in mind. You know you want multiple angles and camera tricks and all types of fancy stuff—so it sounds like you may want to outsource.

What you don’t want to do is stress yourself out by trying to learn a completely new skill while trying to create something you know you want to use. It’s a great way to learn but it’s also one of the quickest ways to get stressed—you have to determine if that’s worth it, especially if you have a pile of client work to do and you’re trying to squeeze years worth of knowledge into a small personal project.

A different outlook

href=”″> class=”alignnone size-full wp-image-28695″ title=”different” src=”” alt=”" width=”550″ height=”413″ />

It’s easy to get caught in the act of using the same techniques, same programs, and same workflow that you use constantly. Now, there’s nothing wrong with being efficient but there is an issue when all your work begins to look and feel the same. There is a fine line between having a style and having the same base, just changing a thing or two. If you feel like all your work is looking pretty much the same, you may want to call on an outside opinion.

Even if you are creating work that does not look different, it is good to have a different opinion. Many times, it’s hard for us to step outside of our roles and see the much bigger picture. Having an outsider’s opinion can go far, not just by the look and design of things but also in helping you figure some things out with your brand and services. Outsourcing your work doesn’t have to just be about giving someone else your workload, but it can also be a partnership that helps move your personal visions further.

class=”spacer_” />

Which one?

Both of these ‘methods’ sound so simple, but the truth is, a lot of designers make a bunch of mistakes by choosing to outsource or not to outsource. I don’t believe you have to stick to one method because both are appropriate depending on your situation and strategy, but it is important you use the right one at the right time.

Doing your personal projects is completely up to you and your capabilities, but if you are a designer of any sort and have some sort of general knowledge, you should definitely have some sort of hand in your personal projects. I’m not just talking about telling someone what you want to do, but actually doing something and being a large part of the creative process.

Ultimately, with whatever work you are doing, you don’t want to stress or burn yourself out. If that means you have to pass some work along to someone else, do that. You want to make sure you take as much care of your creativity as possible.

class=”spacer_” />

rel=”nofollow” href=”” target=”_blank”>Kendra Gaines is a freelance designer from Virginia, USA. rel=”nofollow” href=”” target=”_blank”>Connect with her.

Do you prefer to work on all your personal projects or not? When have you outsourced? />

width=”100%” style=”border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;” height=”20″>
valign=”center”> href=””> face=”Arial” size=”3″ color=”#e64f32″>500+ Valentine’s Vectors – only ! width=”90″> href=””> /> src=”” height=”40″ width=”90″ border=”0″ /> />


Webdesigner Depot

What’s new for designers – January 2012

Posted on by Portsmouth Media in Blog Comments Off

An article I was reading about photoshop

href=””> class=”alignleft size-full wp-image-28835″ title=”thumbnail” src=”” alt=”" width=”200″ height=”160″ />The January edition of what’s new for web designers and developers includes new web apps, frameworks, jQuery plugins, color tools, and a number of great new fonts.

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments.

And if you have an app or other resource you’d like to see included next month, tweet it to href=””>@cameron_chapman for consideration. id=”more-28833″>

Cuepoint JS

href=””>Cuepoint JS is an open source plugin for adding subtitles or cue-points to HTML5 video.

href=””> src=”” alt=”" />

class=”spacer_” />


href=””>jRumble is a jQuery plugin that makes any element you choose rumble, vibrate, shake, and rotate.

href=””> class=”image-border” src=”” alt=”" />

class=”spacer_” />

Circle Menu

href=””>Circle Menu is a jQuery plugin that emulates the menu in the Path application, and includes various animation options for opening and closing menus.

href=””> class=”image-border” src=”” alt=”" />

class=”spacer_” />


href=””>Hovercard is a free jQuery plugin that lets you display related information when you hover over a link, label, or any other HTML element. It includes Twitter and Facebook hovercards, and uses minimum CSS and no external stylesheets.

href=””> class=”image-border” src=”” alt=”" />

class=”spacer_” />


href=””>Sharrre is a jQuery plugin for creating widgets for sharing for Facebook, Twitter, Google Plus, and more. It includes Google Analytics tracking, and is highly configurable and personalizable.

href=””> class=”image-border” src=”” alt=”" />

class=”spacer_” />

Flow Slider

href=””>Flow Slider is a jQuery plugin that lets you slide HTML content in a variety of ways. It’s cross-browser compatible, customizable, and easy to set up.

href=””> src=”” alt=”" />

class=”spacer_” />


href=””>Gitview is a JavaScript widget for listing Github repositories. It includes asynchronous loading of all data, a canvas element for the participation graph, and many other features.

href=””> src=”” alt=”" />

class=”spacer_” />

Leaflet Maps Marker

href=””>Leaflet Maps Marker is a WordPress plugin that lets you pin your favorite places with markers, use integrated address search for finding your places, and much more.

href=””> src=”” alt=”" />

class=”spacer_” />

Initializr 2 Responsive Template

href=””>Initializr 2 is now offering an HTML5 responsive design template generator. You can create slightly customized and highly customized templates in under a minute.

href=””> class=”image-border” src=”” alt=”" />

class=”spacer_” />


href=””>AntiMap is an open source toolset for recording and visualizing your data. There’s a smart phone app for data capture, as well as desktop and web applications for analysis and visualization.

href=””> class=”image-border” src=”” alt=”" />

class=”spacer_” />


href=””>Kinzaa is a web app that lets you create infographic resumes that will set you apart from other job seekers.

href=””> src=”” alt=”" />

class=”spacer_” />

href=””> is an easy-to-use app for getting hex codes for any color.

href=””> src=”” alt=”" />

class=”spacer_” />

Visual Heap

href=””>Visual Heap is a visual aggregator for designers that pulls images from all over the web for inspiration and ideas.

href=””> src=”” alt=”" />

class=”spacer_” />


href=””>accentColor is a JS script for grabbing the main accent color from any website.

href=””> src=”” alt=”" />

class=”spacer_” />


href=””>Croply is a fast, secure, free online image cropping service. Just input the dimensions, upload your image, and that’s it.

href=””> class=”image-border” src=”” alt=”" />

class=”spacer_” />


href=””>Revolver.js is a new content slider that’s equivalent to a boilerplate or framework for creating your own slider. It’s easy to use and completely customizable.

href=””> src=”” alt=”" />

class=”spacer_” />


href=””>Scrollorama is a jQuery plugin for doing various “scrolly stuff”, like transitions.

href=””> src=”” alt=”" />

class=”spacer_” />


href=””>Tmpltr is a tool for rapid web iteration, using JSON, HTML, and CSS.

href=””> class=”image-border” src=”” alt=”" />

class=”spacer_” />

Standard International (free)

href=””>Standard International is a modern sans serif font with slightly retro stylings.

href=””> class=”image-border” src=”” alt=”" />

class=”spacer_” />

Poly (free)

href=””>Poly is a traditional serif typeface suitable for text or display use.

href=””> class=”image-border” src=”” alt=”" />

class=”spacer_” />

Sofia (free)

href=””>Sofia is a feminine script font with lots of character.

href=””> class=”image-border” src=”” alt=”" />

class=”spacer_” />

Brix Slab (4.30)

href=””>Brix Slab is an extended family with 24 fonts. It’s a robust slab serif font with subtle detailing, optimized for longer texts and readable in smaller sizes.

href=””> src=”” alt=”" />

class=”spacer_” />

Rosarian (.10)

href=””>Rosarian is a beautiful brush serif font with curvy stems on many of the letters, designed by Laura Worthington.

href=””> src=”” alt=”" />

class=”spacer_” />

Blanch (name your price)

href=””>Blanch is a display typeface that comes in six weights. It was designed for the Fruita Blanch brand, and is traditional but with a contemporary feel.

href=””> src=”” alt=”" />

class=”spacer_” />

Cubano (name your price)

href=””>Cubano has rounded corners and wide strokes, and features 167 glyphs.

href=””> src=”” alt=”" />

class=”spacer_” />

Hexa (free)

href=”″>Hexa is a blackletter typeface that has a modern look and feel.

href=”″> src=”” alt=”" />

class=”spacer_” />

Haiku’s Script (free for personal use)

href=”″>Haiku’s Script is a hadwritten script font, created by Poemhaiku.

href=”″> src=”” alt=”" />

class=”spacer_” />

Gaunt (free)

href=””>Gaunt is a varying-width, uppercase font. The varying widths can be mixed together to give it a more unpredictable, non-uniform effect.

href=””> src=”” alt=”" />

class=”spacer_” />

Garamond Serial (.99)

href=””>Garamond Serial is a traditional serif typeface with seven widths.

href=””> class=”image-border” src=”” alt=”" />

class=”spacer_” />

Bad Script (free)

href=”″>Bad Script is a script font designed with a tablet to resemble casual and neat handwriting.

href=”″> class=”image-border” src=”” alt=”" />

class=”spacer_” />

Written exclusively for WDD by href=””>Cameron Chapman.

Know of a new app or resource that should have been included but wasn’t? Let us know in the comments!

width=”100%” style=”border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;” height=”20″>
valign=”center”> href=””> face=”Arial” size=”3″ color=”#e64f32″>500+ Valentine’s Vectors – only ! width=”90″> href=””> /> src=”” height=”40″ width=”90″ border=”0″ /> />


Webdesigner Depot

How Commercial Plugin Developers Are Using The WordPress Repository

Posted on by Portsmouth Media in Blog Comments Off

An article I was reading about css3


A few weeks ago I wrote about how you can put together a great readme.txt for the WordPress plugin directory. In addition to using a WordPress readme as a tool to help out your users, you can use it to promote your commercial products and services. While commercial theme developers are already promoted on, this promotion isn’t extended to commercial plugin developers. But restrictions often lead to creativity, and developers have had to get a bit creative in figuring out how to monetize the WordPress repository. API keys, complementary plugins and lite version are just a few of the ways that plugin developers are exploiting the WordPress plugin directory for commercial benefit.

WordPress plugins graphic
(Image: Bowe Frankema)

What’s Allowed?

Back in 2009, Mark Jacquith posted this on the WordPress development blog:

Plugins that merely exist as placeholders for a plugin hosted elsewhere (like a “requirements check” plugin) are out, but “lite” versions, etc are in. The goal is to have the directory be free-to-download plugins. A placeholder for a premium plugin is against that spirit.

He goes on to say:

If your plugin is actually a plugin, not just an advertisement or a placeholder for a plugin hosted elsewhere, you’re fine, as far as this rule is concerned.

Related to this, Matt Mullenweg posted on the support forums:

There are plenty of plugins that tie into third-party services, for example Google AdSense, and some of them have no free versions. That’s totally fine as long as the plugin is totally GPL.

I emailed Matt to see if anything has changed since he posted this, and he directed me to’s “Detailed Plugin Guidelines.”

Briefly, if you’re a commercial plugin developer, here’s what you need to keep in mind if you’re planning to use the repository:

  • The plugin must be GPLv2. (Explicitly state this in your license. If you don’t, it will be assumed that your plugin is GPLv2.)
  • Trialware is not allowed.
  • Upselling is allowed (but not by being annoying or disabling features after a time period).
  • Serviceware is allowed, even for paid services (i.e. a plugin that serves to interface with a third-party service). The service must be doing something substantive, not just providing keys or licenses.
  • No phoning home without the user’s consent. This includes:
    • No unauthorized collection of user data;
    • No remote images or scripts (everything must be part of the plugin);
    • Banners and advertising text should not be included in the plugin;
    • Advertising spam is not allowed.
  • No sending executable code via a third-party system (unless of a service-client model).
  • External links may not be included on the user’s public website.
  • No hijacking the admin page.
  • No sponsored links in the readme.
  • reserves the right to edit the guidelines and to arbitrarily disable or remove a plugin for any reason whatsoever.

Adhering to these guidelines is a delicate balance, and not everyone who tries to monetize the repository is successful at it, as the people behind Plugin Sponsors recently found out.

That said, let’s look at some models whereby developers have managed to create synergy between free plugins and paid plugins or services.

The API Key

A car licence plate reading No Spam
No one likes spam. (Image: Thomas Hawk)

Who’s doing it?

If you’ve installed WordPress, then you’ve met Akismet. Akismet is the anti-spam plugin that comes bundled with WordPress. It’s free for non-commercial use, but if you are using it for a commercial website, then you have to pay for it. The whole Akismet issue pops up every so often in the WordPress blogosphere. Many people feel that a commercial plugin shouldn’t be bundled in WordPress, although I don’t plan to get into that debate here.

Whatever you think of it, providing an API key for a service is a viable way to create a WordPress plugin, host it in the WordPress repository, and yet charge for the service that it provides. Another plugin provider that adopts this model is YoLink, a search service that offers advanced search functionality for websites. Personal websites (i.e. without advertising) that have fewer than 5,000 monthly visitors per year can use it for free; after that, the pricing varies.

“We’ve found that once a user has ample time to test-drive the plugin on their site, they come to realize its value and upgrade to a paid subscription,” says Joe Pagliocco of YoLink. “We are seeing this most often with commercial sites looking for additional flexibility and indexed pages.”

However, you don’t even have to offer a free version of your service to get a plugin with an API key into the repository. Scribe, a popular service from Copyblogger, is a plugin that integrates with your WordPress website. In order to use Scribe, you have to sign up for an API key, which is a minimum of per month. While the plugin is GPLv2 and free, the service is not. This approach might make some people hate you, but it is still a viable way to make money from a plugin in the directory.

Pro: You’re able to offer a plugin that provides a service and make money from it.

Con: People might hate you for it.

Upgrades And Support Forum

Jigoshop e-commerce plugin
Jigoshop offers a commercial-level e-commerce plugin — for free!

Who’s doing it?

Jigoshop is a free e-commerce plugin, available in the WordPress repository. It includes everything that you need to run an e-commerce website. If you like the plugin (and many people do), then you can pay for premium upgrades and support. Premium upgrades include MailChimp integration, BuddyPress integration and various advanced payment gateways.

I spoke with Dan Thornton at Jigoshop, and he said that they had considered going down the lite/premium route, but because the free version was embraced so quickly, they didn’t want to duplicate their work. By including all of the standard payment gateways in the free version, they made it possible for a small business to get a store up and running and then invest its money in extending the store’s features and functionality, rather than have to pay for all of the bits and pieces up front.

When Jigoshop launched earlier this year, it got a lot of promotion throughout the WordPress community purely because it is a totally free, fully-functioning e-commerce solution. “If we’d gone for a different business model,” says Dan, “we couldn’t have afforded the marketing and advertising to match the recommendations and promotion that we’re grateful to have had from users, designers and developers.”

Pro: Massive community of developers has gathered around Jigoshop, adding their own expertise to the product.

Con: A fully-functional GPL plugin is open to being forked by bigger players on the scene.

The Lite Plugin

Bottles of Diet Coke
Do you like your plugins with less calories? (Image: Niall Kennedy)

Who’s doing it?

This is probably one of the most common ways to use the repository to up-sell, and it can be a great option for a variety of plugins. Basically, you restrict the features in the free version and offer a paid version for people who want more features. Putting a lite version of a plugin in the repository is fine, provided it is GPL and adheres to the “Detailed Plugin Guidelines.”

WPMU DEV, a shop for WordPress plugins, has a number of lite versions of its commercial plugins in the repository. It offers lite versions of its Google Maps, eCommerce, Chat, Wiki and Membership plugins, among others. In theory, these plugins should be adequate for the average WordPress user who wants the given functionality on their website, while the commercial versions are available for those who need even more functionality.

I asked James Farmer, of WPMU DEV, what he holds back for his members. “We started holding back quite a bit,” he says. “Now we hold back very little. It’s really just the extended stuff and extra support, etc, that premium users get.”

With little functionality being held back for members, I asked James why they bother including free plugins in the repository. “I suppose you could say to ‘give back,’” he says. “But really, it’s just about business: if folks get to try our plugins for free (and the repository is the best place to get them to do that), then a proportion of them will be keen on our full offerings… At least that’s the plan.”

Pro: Give back to the community while maintaining your business model.

Con: Have to split your support base across and your own website.

Complementary Plugins

Rows of shoes
Some things just work better in pairs. (Image: Martin Hartland)

Who’s doing it?

Two new plugins on the WordPress scene are taking a different approach. Developed by OnTheGoSystems (the folks behind the popular WPML), Types is a plugin for creating custom post types, while Views is a plugin for displaying content. Drupal users will recognize similarities between Views and a certain Drupal module.

Types is free and can be found in the WordPress repository. Views, on the other hand, is a commercial plugin available through the developer’s website. Types is a fully-functional plugin, and if all you’re interested in is creating custom post types and taxonomies and custom fields, then you might stop there. But Views is used to display the content in complex ways by querying the WordPress database for you. And, of course, the Types readme.txt tells you all about what you can do with Views, to tempt you into grabbing the complementary commercial plugin.

OnTheGoSystems developed Types and Views hand in hand, and it markets them that way, too. Views needs Types to create content, and Types is made better when Views displays it. A synergy between the two fuels the business model. “Types complements Views,” says Amir Helzer, CEO of OnTheGoSystems, “by making it easy to create and manage custom data. Marketing 101 says that when you want to promote your product, you work to turn its complements into commodities. This is what Types does. It makes creating of custom data into a non-issue, so that people can concentrate on its display (via Views).”

Pro: Exploit a ready-made market for your commercial plugin.

Con: The market might decide that it only wants your free plugin.

Offer Commercial Themes

Shopping cart
There’s big business in WordPress e-commerce. (Image: Thristian)

Who’s doing it?

The plugin directory isn’t being used just by commercial plugin developers. If you run a successful commercial theme shop, then it’s perfectly within your power to give away a functional WordPress plugin for free, dedicate a team of developers to it, and then let the money roll in as people look for commercial themes to power your plugin. That’s what WooThemes has done with WooCommerce.

You can get WooCommerce from the WordPress repository for free; and with more than 30,000 downloads since launch, it’s proving to be a pretty popular e-commerce solution. What it’s really got going for it, though, is the large collection of dedicated e-commerce themes that work with the plugin.

While already successful as a commercial theme shop, WooThemes was keen to test its legs in the freemium waters. E-commerce seems like a perfect fit for it: free core functionality, while charging for design. I asked Adii Pienaar, WooThemes’ founder, what effect WooCommerce has had on its business. He says, “WooCommerce has been quite a diversification for us on two fronts. First, it diversifies our revenue models and allows us to include the freemium model, which means a higher volume of users. Secondly, it has added a whole new class of products to our offering. To that extent, we’ve already seen a bump in our overall revenue, and our WooCommerce-related revenues are already establishing themselves as a firm chunk of that pie.”

To follow this model, Adii suggests that you develop a great core product and then monetize add-ons to that core. Because the core is free, you get high-volume adoption, and you need only monetize a certain percentage of it to be profitable.

Pro: Great way to expand your current market.

Con: Works best if you’re already backed by a strong brand.

Installation And Set-Up Services

A Lego plumber
Everyone needs a bit of help sometimes. (Image: Carol Browne)

Who’s doing it?

s2Member is powerful membership plugin. In fact, it’s so powerful that a dedicated installation service runs alongside it. Simplicity in a plugin is always a bonus, but out of necessity some plugins end up being seriously complex. That isn’t a bad thing, but it can get confusing for less advanced WordPress users. From my own experience, membership plugins can be extensive and pretty difficult for users to set up.

A great way to monetize a plugin like this is to offer an installation service alongside it. To set up s2Member, you can employ s2Installs. This is the team of developers behind s2Members, and they can install and set it up for you, as well as provide custom coding to extend the plugin to fit your needs. What better way to set up and extend a plugin than by employing its own developers to do it?

This is a really good model in which everyone can access the plugin for free, while commercial help is available for people who aren’t able to use the plugin to its full extent.

Pro: You are the best person to provide set-up, installation and customization of your plugin, so capitalize on it!

Con: Only works with big plugins. Might not work so well with your Google +1 button.

Is It Really Worth It?

Now that we’ve looked at some of the models, you might be wondering if this is actually worth it. Many commercial plugin developers, including those of popular plugins such as Gravity Forms, don’t adopt the freemium model and yet are still incredibly successful. In fact, a number of the plugin developers I spoke with said that the amount of traffic they get from the repository is minimal, not to mention other developers who don’t want a whole lot to do with Some feel that the tightrope that has been set up for commercial plugin developers who want to use the repository is too precarious and not something they want to put effort into. Commercial themes are supported on, but there is nothing similar for plugin developers. Most of the developers I spoke with felt that a commercial plugin page will probably never appear on

That said, if you are going down the freemium route, then using the WordPress repository is definitely a viable option, provided that you do actually use GPLv2 and provide some kind of useful service. The WordPress plugin directory will always be the best way to get your product into WordPress’ back end.

Like everything, the WordPress plugin directory has its upsides and downsides, and it’s not a one-size-fits-all solution. But in addition to directly promoting your product and services, having a plugin in the repository has a load of indirect benefits:

  • Self-promotion and branding
    You might not be making a living off of your plugin, but you will be making a living off of yourself. A great example of this is Yoast, which is available for free in the plugin directory; while its developer doesn’t make any money from it directly, his business is built on his SEO expertise.
  • Networking
    Having a plugin in the directory helps you to connect with other people in the WordPress community. People will be like, “Oh, you’re the guy who made that plugin. I love that!” The more popular your plugin, the more people will be interested in you.
  • Custom work
    Offering a plugin means that someone out there might want your plugin to be customized, and they might be willing to pay for it.
  • Job leads and opportunities
    You never know who is looking in the repository. Some big-wig might love your plugin and could be hiring. You could also use it as part of your CV, letting potential employers check out your code before even getting shortlisted.
  • Kudos
    Everyone loves a plugin developer — and if they don’t, they should!
  • Giving back
    Part of being a member of an open-source community is finding a way to give back. After all, we get the software that we build our livelihoods on for free. A free plugin in the directory is a great way to give back, especially if it’s a good one!

Of course, it’s not all happiness and sparkles. There are some aspects to having a plugin in the repository that put some developers off:

  • Double the support
    If you offer support on your own website, too, then you’ll have to keep on top of two support forums.
  • Unreasonable support expectations
    It’s sad, but some WordPress users feel that developers who give their plugins away for free should be at the beck and call of users. This leads to flaming in forums, hostile emails, angry tweets and the occasional midnight phone call.
  • Keeping up with WordPress
    WordPress has a fast development cycle, with around two to three major releases a year (along with security updates and the like). Maintaining a plugin can become quite a chore, as is apparent from all of the orphaned plugins in the repository.
  • #17 in the “Detailed Plugin Guidelines”
    This states that can revise the guidelines and arbitrarily disable or remove plugins whenever it feels like it. This arbitrariness does put people off.

A Commercial Plugin Shop?

It has long been fabled that Automattic might create some sort of WordPress app store where commercial plugin developers can sell their plugins to users straight from the WordPress dashboard. This will likely remain a fable, with no whisper from Automattic that anything of the sort is planned. Of course, there are places where you can purchase commercial WordPress plugins, such as WPPlugins and Code Canyon, but neither of these has the advantage of delivering plugins directly from the WordPress dashboard.

PlugPress tried a different approach. It created an “app store” plugin that WordPress users could install from the WordPress directory and then use to browse commercial plugins and themes. It uploaded the plugin to the WordPress repository and announced that it was live, and then the plugin was removed.

Although Google indexes PlugPress as being in the WordPress repository, the link is now dead

It’s a pretty clear signal that this type of store plugin won’t be allowed in the WordPress repository.

Amir Helzer (who we met earlier) has another approach. He posted a few months ago on the WPML blog about an alternative repository for commercial plugins and themes. His premise is similar to the approach taken in the Linux world. Every theme and plugin author can become their own repository. So Theme Forest could have a repository, as could Mojo Themes, as could whoever else. A central plugin would enable WordPress users to select commercial sources from which to search for themes or plugins. This would essentially make commercial plugins available in the dashboard and enable people to easily upgrade. It’s a novel idea, but given PlugPress’ swift exit from the repository, you won’t be seeing this in the WordPress directory anytime soon.


I firmly believe that placing restrictions on something spurs greater creativity, and the models above demonstrate how commercial plugin developers are thinking outside the box to use a directory that is essentially for free plugins. If it were simply a matter of a WordPress app store, then all of us would be in danger of buying plugins that aren’t very good (Apple’s App Store, anyone?). Plugin developers think creatively, which can only be a good thing for end users. Astute plugin developers will always find ways to use the WordPress plugin repository to promote their products, and I hope that their plugins are the better for it.

Developers are undoubtedly creating synergy between their commercial products and the repository in other ways. If you know of any, we’d love to hear about them in the comments!

Further Resources


© Siobhan McKeown for Smashing Magazine, 2012.

Smashing Magazine Feed

Design a Sleek Facebook Fan Page in Photoshop

Posted on by Portsmouth Media in Blog Comments Off

An article I was reading about jquery

In this tutorial I’ll teach you how to create a sleek & stylish Facebook Fan Page! We’ll be using the Shape Tool, Filters, Custom Brush, Text Tool & Blending Options to create this cool layout!

Advertise here via BSA

Good-Tutorials: Newest Tutorials

SearchCap: The Day In Search, January 12, 2012

Posted on by Portsmouth Media in Blog Comments Off

An article I was reading about html5

Below is what happened in search today, as reported on Search Engine Land and from other places across the web. From Search Engine Land: To Understand Google Favoritism, Think “If Google+ Were YouTube” Google’s favoritism of Google+ in its new Search Plus results is just the…

Please visit Search Engine Land for the full article.

Search Engine Land: News & Info About SEO, PPC, SEM, Search Engines & Search Marketing

Google “Search Plus” Impact on Local: Limited So Far

Posted on by Portsmouth Media in Blog Comments Off

An article I was reading about html5

Amid all the controversy that has erupted over Google’s new search personalization (Search Plus Your World), I’ve been doing local searches to see what if any impact it’s having on that arena. So far, in my unscientific query survey, the impact seems to be minor. Below are some…

Please visit Search Engine Land for the full article.

Search Engine Land: News & Info About SEO, PPC, SEM, Search Engines & Search Marketing

Password strength verification with jQuery

Posted on by Portsmouth Media in Blog Comments Off

An article I was reading about photoshop

href=””> class=”alignleft size-full wp-image-28549″ title=”jnthumbnail” src=”” alt=”" width=”200″ height=”160″ />Many sites that require login credentials enforce a security setting often referred to as password complexity requirements. These requirements ensure that user passwords are sufficiently strong and cannot be easily broken.

What constitutes a strong password? Well, that depends on who you ask. However, traditional factors that contribute to a password’s strength include it’s length, complexity, and unpredictability. To ensure password strength, many sites require user passwords to be alphanumeric in addition to being a certain length.

In this tutorial, we’ll construct a form that gives the user live feedback as to whether their password has sufficiently met the complexity requirements we will establish. id=”more-28522″>

Before we begin, let’s get take a sneak peak at what our final product will look like (click for a demo):

href=””> class=”alignnone size-full wp-image-28531″ title=”Final product” src=”” alt=”Final product screenshot” width=”615″ height=”475″ />

Please note: The purpose of this tutorial is to show how a simple script can be written using javascript and jQuery to enforce password complexity requirements. You’ll be able to add additional requirements to the script if needed; however, note that form validation (server- and client-side), form submission, and other topics are not covered in this example.

class=”spacer_” />

Step 1: Starter HTML

First we want to get our basic HTML starter code. We’ll use the following:

<!DOCTYPE html>
	<title>Password Verification</title>
	<div id="container">
		<-- Form HTML Here -->

class=”spacer_” />

Step 2: Form HTML

Now let’s add the markup that will be used for our form. We will wrap our form elements in list items for better structure and organization.

<h1>Password Verification</h1>
			<label for="username">Username:</label>
			<span><input id="username" name="username" type="text" /></span>
			<label for="pswd">Password:</label>
			<span><input id="pswd" type="password" name="pswd" /></span>
			<button type="submit">Register</button>

Here’s an explanation of the code we used:

  • span elements – these will be used for visual styling of our input elements (as you’ll see later on in the CSS)
  • type="password" – this is an HTML5 attribute for form elements. In supported browsers, the characters in this field will be replaced by black dots thus hiding the actual password on-screen.

Here’s what we’ve got so far:

href=””> class=”alignnone size-full wp-image-28532″ title=”Step 2″ src=”” alt=”Step 2 Screenshot” width=”615″ height=”475″ />

class=”spacer_” />

Step 3: Password information box HTML

Now let’s add the HTML that will inform the user which complexity requirements are being met. This box will be hidden by default and only appear when the “password” field is in focus.

<div id="pswd_info">
	<h4>Password must meet the following requirements:</h4>
		<li id="letter" class="invalid">At least <strong>one letter</strong></li>
		<li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
		<li id="number" class="invalid">At least <strong>one number</strong></li>
		<li id="length" class="invalid">Be at least <strong>8 characters</strong></li>

Each list item is given a specific ID attribute. These IDs will be used to target each complexity requirement and show the user if the requirement has been met or not. Also, each element will be styled as “valid” if the user’s password has met the requirement or invalid if they haven’t met it (if the input field is blank, none of the requirements have been met; hence the default class of “invalid”).

Here’s what we have so far:

href=””> class=”alignnone size-full wp-image-28533″ title=”Step 3″ src=”” alt=”Step 3 screenshot” width=”615″ height=”475″ />

class=”spacer_” />

Step 4: Create background style

We are going to give our page elements some basic styling. Here’s an overview of what we’ll do in our CSS:

  • Add a background color – I used #EDF1F4
  • Add a background image with texture (created in Photoshop)
  • Setup our font stack – We’ll use a nice sans-serif font stack
  • Remove/modify some browser defaults
body {
	background:#edf1f4 url(bg.jpg);
	font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;
ul, li {

href=””> class=”alignnone size-full wp-image-28534″ title=”Step 4″ src=”” alt=”Step 4 screenshot” width=”615″ height=”475″ />

class=”spacer_” />

Step 5: Create background style

Now we will style our main container and center it in the page. We’ll also applying some styles to our H1 tag.

#container {
	margin:0 auto;
	border:1px solid #c4cddb;
	box-shadow:0 1px 1px #ccc;
h1 {
	padding:10px 0;
	border-bottom:1px solid #dde0e7;
	box-shadow:0 -1px 0 #fff inset;
	border-radius:5px 5px 0 0; /* otherwise we get some uncut corners with container div */
	text-shadow:1px 1px 0 #fff;

It’s important to note that we have to give our H1 tag a border radius on its top two corners. If we don’t, the H1′s background color will overlap the rounded corners of it’s parent element (#container) and it will look like this:

class=”alignnone size-full wp-image-28537″ title=”Step 5″ src=”” alt=”Step 5 Screenshot” width=”615″ height=”475″ />

Adding border-radius to the H1 element assures our top corners will remain rounded. Here’s what we have so far:

href=””> class=”alignnone size-full wp-image-28535″ style=”border: 0px initial initial;” title=”Step 5″ src=”” alt=”Step 5 screenshot” width=”615″ height=”475″ />

class=”spacer_” />

Step 6: CSS styles for the form

Now let’s style our various form elements starting with the list elements inside the form:

form ul li {
	margin:10px 20px;

form ul li:last-child {
	margin:20px 0 25px 0;

We used the :last-child selector to select the last item in the list (button) and give it some extra spacing. (Note this selector is not supported in some legacy browsers). Next, let’s style our input elements:

input {
	padding:10px 10px;
	border:1px solid #d5d9da;
	box-shadow: 0 0 5px #e8e9eb inset;
	width:328px; /* 400 (#container) - 40 (li margins) -  10 (span paddings) - 20 (input paddings) - 2 (input borders) */
	outline:0; /* remove webkit focus styles */
input:focus {
	border:1px solid #b9d4e9;
	box-shadow:0 0 5px #b9d4e9;

Notice that we calculated our input element’s width by taking the #container width (400px) and subtracting the margins, paddings, and borders applied to the input’s parent elements. We also used the outline property to remove the default WebKit focus styles. Lastly let’s apply some styles to our other form elements:

label {
#container span {
	padding:3px 5px;

Now we have something that looks like this:

href=””> class=”alignnone size-full wp-image-28539″ title=”Step 6″ src=”” alt=”Step 6 screenshot” width=”615″ height=”475″ />

class=”spacer_” />

Step 7: Button Styles

Now we are going to style our button element. We’ll use some CSS3 styles so users with newer browsers get a better experience. If you’re looking for a great resource when creating background gradients in CSS3, check out href=””>Ultimate CSS Gradient Generator.

button {
	background: #57a9eb; /* Old browsers */
	background: -moz-linear-gradient(top, #57a9eb 0%, #3a76c4 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#57a9eb), color-stop(100%,#3a76c4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* IE10+ */
	background: linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a9eb', endColorstr='#3a76c4',GradientType=0 ); /* IE6-9 */
	border:1px solid #326fa9;
	text-shadow:0 1px 0 #1e3c5e;
	padding:8px 15px;
	box-shadow:0 1px 0 #bbb, 0 1px 0 #9cccf3 inset;
button:active {
	background: #3a76c4; /* Old browsers */
	background: -moz-linear-gradient(top, #3a76c4 0%, #57a9eb 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a76c4), color-stop(100%,#57a9eb)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* IE10+ */
	background: linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a76c4', endColorstr='#57a9eb',GradientType=0 ); /* IE6-9 */
	text-shadow:0 -1px 0 #1e3c5e;

href=””> class=”alignnone size-full wp-image-28540″ title=”Step 7″ src=”” alt=”Step 7 screenshot” width=”615″ height=”475″ />

class=”spacer_” />

Step 8: Password Information Box

Now we are going to style the box that informs users if they are meeting the password requirements. First, we will style the containing element (#pswd_info).

#pswd_info {
	bottom: -115px; /* IE Specific */
	box-shadow:0 1px 3px #ccc;
	border:1px solid #ddd;

Now let’s add some style to the H4 element:

#pswd_info h4 {
	margin:0 0 10px 0;

Lastly, we are going to use the CSS ::before selector to add an “up-pointing triangle”. This is a geometric character which can be inserted using it’s corresponding UNICODE entity. Normally in HTML you would use the character’s HTML entity (&#9650;). However, because we are adding it in CSS, we must use the UNICODE value (25B2) preceded by a backslash.

#pswd_info::before {
	content: "B2";

Now we have this:

href=””> class=”alignnone size-full wp-image-28541″ title=”Step 8″ src=”” alt=”Step 8 screenshot” width=”615″ height=”475″ />

class=”spacer_” />

Step 9: Valid and invalid states

Let’s add some styles to our requirements. If the requirement has been met, we’ll give it a class of “valid”. If it hasn’t been met, it will get a class of “invalid” (default class). As for the icons, I am using two 16×16 pixel icons from the href=””>Silk Icon Set.

.invalid {
	background:url(../images/invalid.png) no-repeat 0 50%;
.valid {
	background:url(../images/valid.png) no-repeat 0 50%;

Because we haven’t included the JavaScript functionality that will dynamically change the “valid” and “invalid” classes, all requirements will appear as invalid (we’ll change this later). Here’s what we have so far:

href=””> class=”alignnone size-full wp-image-28542″ title=”Step 9″ src=”” alt=”Step 9 screenshot” width=”615″ height=”475″ />

class=”spacer_” />

Hide the Box

Now that we have everything styled exactly how we want it, we’re going to hide the password information box. We’ll toggle it’s visibility to the user using JavaScript. So let’s add the following rule:

#pswd_info {

class=”spacer_” />

Step 10: Grasping the scope

Here is what we want to accomplish with our script:

  • When the password field is selected (:focus), show it
  • Every time the user types a new character in the password field, check and see if that character fulfills one of the following password complexity rules:
    • At least one letter
    • At least one capital letter
    • At least one number
    • At least eight characters in length
  • If it does, mark that rule as “valid”
  • If it doesn’t, mark that rule as “invalid”
  • When the password field is not selected (‘:blur’), hide it

class=”spacer_” />

Step 11: Getting jQuery setup

First, we need to add jQuery to our page. We’ll use the hosted version. We also want to link to our “script.js” file, which is where we will write the code needed for our password verification test. So, add the following to your <head> tag:

<script src=""></script>
<script src="script.js"></script>

In our “script.js” file, we’ll start with some basic jQuery starter code for our script:

$(document).ready(function() {

	//code here


class=”spacer_” />

Step 12: Setting up the event triggers

Essentially we have three events we will be listening for:

  1. “Keyup” on the password input field /> (triggers whenever the user pushes a key on the keyboard)
  2. “Focus” on the password input field /> (triggers whenever the password field is selected by the user)
  3. “Blur” on the password input field /> (triggers whenever the password field is unselected)

As you can see, all the events we are listening for are on the password input field. In this example, we will select all input fields where the type is equal to password. jQuery also allows us to “chain” these events together, rather than typing out each one. So, for example, rather than typing this:

$('input[type=password]').keyup(function() {
	// keyup event code here
$('input[type=password]').focus(function() {
	// focus code here
$('input[type=password]').blur(function() {
	// blur code here

We can chain all the events together and type the following:

$('input[type=password]').keyup(function() {
	// keyup code here
}).focus(function() {
	// focus code here
}).blur(function() {
	// blur code here

So, with that knowledge, let’s create our code that will show or hide our password information box depending on whether the password input field is selected by the user or not:

$('input[type=password]').keyup(function() {
	// keyup code here
}).focus(function() {
}).blur(function() {

You will now notice that by clicking in the password input field, the password information box will be visible. Likewise, by clicking outside the password input field, the password information box will be hidden.

href=””> class=”alignnone size-full wp-image-28543″ title=”Step 12″ src=”” alt=”Step 12 screenshot” width=”615″ height=”475″ />

class=”spacer_” />

Step 13: Checking the complexity rules

All we need to do now is have the script check the value in the password field every time a new character is entered (using the ‘keyup’ event). So, inside the $('input[type=password]').keyup function we’ll add the following code:

// set password variable
var pswd = $(this).val();

This sets up a variable named ‘pswd’ that stores the current password field value every time there is a keyup event. We will use this value in checking each of our complexity rules.

class=”spacer_” />

Validating the length

Now, inside the same keyup function, let’s add the following:

//validate the length
if ( pswd.length < 8 ) {
} else {

This checks to see if the length of the current password value is smaller than 8 characters. If it is, it’s get an ‘invalid’ class. If it’s bigger than 8 characters, it gets a ‘valid’ class.

class=”spacer_” />

Validating with regular expressions

As you saw above, we simply have an if/else statement that tests to see if the complexity requirement has been met. If the complexity requirement is met, we give it’s ID in the password box a class of “valid”. If it is not met, it gets a class of “invalid”.

The rest of our requirements will require we use regular expressions to test the complexity rules. So, let’s add the following:

//validate letter
if ( pswd.match(/[A-z]/) ) {
} else {

//validate capital letter
if ( pswd.match(/[A-Z]/) ) {
} else {

//validate number
if ( pswd.match(/\d/) ) {
} else {

Here is an explanation of the three if/else statements we used:

This expressions checks to make sure at least one letter of A through Z (uppercase) or a through z (lowercase) has been entered
This expressions checks to make sure at least one uppercase letter has been entered
This will check for any digits 0 through 9

class=”spacer_” />

Step 14: Test it out

That’s all there is to it! You can add more to this if you want. You could add more complexity rules, you could add a submission method, or you could add whatever else you deem necessary.

href=””> class=”alignnone size-full wp-image-28531″ title=”Final product” src=”” alt=”Final product screenshot” width=”615″ height=”475″ />

class=”spacer_” />

Jim Nielsen considers himself a web designer at heart, though he often dabbles in other areas such as print and identity design. He loves acquiring new knowledge from the ever-expanding disciplines of the web. You can follow his latest happenings at his website rel=”nofollow” href=”” target=”_blank”>

width=”100%” style=”border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;” height=”20″>
valign=”center”> href=””> face=”Arial” size=”3″ color=”#e64f32″>250 High Res Textures from Vandelay Premier – only width=”90″> href=””> /> src=”” height=”40″ width=”90″ border=”0″ /> />


Webdesigner Depot

Short Musings On JavaScript MV* Tech Stacks

Posted on by Portsmouth Media in Blog Comments Off

An article I was reading about plugins

Lately, there have been a number of developers getting in touch to discuss the tech stacks for their web applications. In this short post, I'd like to focus on the JavaScript side of some of these conversations. We're at an … href=””>Continue reading class=”meta-nav”>→ | Articles for developers

Adventures In The Third Dimension: CSS 3D Transforms

Posted on by Portsmouth Media in Blog Comments Off

An article I was reading about css3



Back in 2009, the WebKit development team proposed a new extension to CSS that would allow Web page elements to be displayed and transformed on a three-dimensional plane. This proposal was called 3-D Transforms, and it was soon implemented in Safari for Mac and iOS. About a year later, support followed for Chrome, and early in 2011, for Android. Outside of WebKit, however, none of the other browser makers seemed to show much enthusiasm for it, so it’s remained a fairly niche and underused feature.

That’s set to change, though, as the Firefox and Internet Explorer teams have decided to join the party by implementing 3-D Transforms in pre-release versions of their browsers. So, if all goes according to plan, we’ll see them in IE 10 and a near-future version of Firefox (possibly 10 or 11, but that’s not confirmed yet), both of which are slated for release sometime this year.

That being the case, this is an ideal time to get ahead of the curve and start learning about the possibilities and potential of adding an extra dimension to your Web pages. This article aims to help you do just that, by taking you on a flying tour of the 3-D Transforms syntax.

Please bear in mind that in order to see the examples in this article, you’ll need a browser that supports 3-D Transforms; as I write this, that’s Safari, Chrome, IE 10 Platform Preview or Firefox Aurora.

The Third Dimension

On the Web, we’re accustomed to working in two dimensions: all elements have width and height, and we move them around the screen horizontally (left to right) and vertically (top to bottom). The move to a third dimension can be thought of as adding depth to elements, and adding movement towards and away from you (the viewer). Think about 3-D films in which objects are constantly thrust out of the screen towards you in an attempt to demonstrate the possibilities of the extra depth.

To use 3-D Transforms in CSS, you’ll need to know about axes (that’s the plural of axis, not the plural of axe). If you already know about working in three dimensions or remember using axes in math class at school, you can skip the next section. For everyone else, here is…

A Quick Primer On Axes

I just mentioned that on the 2-D Web, we move elements around horizontally and vertically. Each of these directions is called an axis: the horizontal line is known as the x-axis, and the vertical line is the y-axis. If we think of the top-left corner of an element as our origin (i.e. the point from which movement is measured), a movement to the left is a negative movement along the x-axis, and a move to the right is a positive movement along the x-axis. The same goes for moving an element up (negative on the y-axis) and down (positive on the y-axis).

The third dimension is known as the z-axis and, as I said, can be thought of as towards or away from you; a negative movement along the z-axis is away from you, and a positive movement is towards you.

Showing the three axes: x (left-right), y (up-down) and z (away-towards).

If you’ve read all of this talk of axes and negative movements and you’re rubbing your eyes and blinking in disbelief and misunderstanding, don’t worry: it will all become clear when you get stuck in the code. Come back and read this again after a few examples and it should all be clear.

Transformation Functions

The various transformations are all applied with a single CSS property: transform — yes, the same property that’s used for 2-D CSS Transforms. At the moment, this property is still considered experimental, so remember to use all of the browser prefixes, like so:

div {
  -moz-transform: foo;
  -ms-transform: foo;
  -o-transform: foo;
  -webkit-transform: foo;

Note that Opera doesn’t currently have an implementation of 3-D Transforms, but I’m including it here because work is apparently underway. For the sake of clarity, in the examples throughout this article, I’ll use only non-prefixed properties, but remember to include all of the prefixed ones in your own code.

Anyway, the transform property accepts a range of functions as values, each of which applies a different transformation. If you’ve used 2-D CSS Transforms, then you’ll already know many of these functions because they are quite similar (or, in some cases, the same). Here are all of the 3-D functions:

  • matrix3d
  • perspective
  • rotateX, rotateY, rotateZ, rotate3d
  • scaleX, scaleY, scaleZ, scale3d
  • translateX, translateY, translateZ, translate3d

Now, matrix3d definitely sounds the coolest, but it’s so unbelievably complex (it takes 16 values!) that there’s no way I could cover it in this article. So, let’s put that aside and take a quick look at the others.


To explain what this does, I’ll have to ask you to do a little mental exercise (which will come in useful later in the article, too). Imagine a sheet of card with a string running through the middle that fixes it in place. By taking the top corners in your fingers, you can move the card up and down, left and right, and forwards and backwards, pivoting around the string. This is what the rotate() function does. The individual functions rotateX(), rotateY() and rotateZ() take a deg (i.e. degree) value and move the element around its point of origin (where the string passes through it) by that much.

Have a look at our first example (a screenshot is shown below in case you don’t have access to a supported browser). Here we’ve rotated each of the elements 45° around a different axis (in order: x, y, z), so you can see the effect of each. The semi-translucent red box shows the original position of the element, and if you mouse over each, you’ll see the transformations removed (I’ve used this convention in all of the examples in this article).

Each element is rotated 45° around a different axis: x (left), y (center) and z (right).

There is a rotate3d() function as well, but it’s too complex to explain in a brief article like this one, so we’ll skip it.


This is really just a fancy way of saying “movement.” The functions translateX(), translateY() and translateZ() each take a length value, which moves the element by that distance along the given axis. So, translateX(2em) would move the element 2 ems to the right, and translateZ(-10px) would move the element 10 pixels away from the viewer. There’s also a shorthand function, translate3d(), which takes three values in order, one for each axis, like so: translate3d(x, y, z).

In our second example, we’ve translated each of the elements by -20 pixels along a different axis (in order: x, y, z).

Each element is translated by -20 pixels along a different axis: x (left), y (center) and z (right).

Note that translation of an element is similar to relative positioning, in that it doesn’t affect the document’s flow. The translated element will keep its position in the flow and will only appear to have moved, meaning it might cover or show through surrounding elements.


This just means making bigger or smaller. The three functions scaleX(), scaleY() and scaleZ() each take a unitless number value, which is used as a multiplier. For scaleX() and scaleY(), this is applied directly to the width and height; for example, applying scaleY(1.5) to an element with a height of 100 pixels would transform it to 150 pixels high, and applying scaleX(0.75) to an element with a width of 100 pixels would transform it to 75 pixels wide.

The scaleZ() function behaves slightly differently. Transformed elements don’t actually have any depth to increase or decrease; what we’re doing is more like moving a 2-D object around in 3-D space. Instead, the value given to scaleZ() acts as a multiplier for the translateZ() function that I explained in the last section. So, applying both translateZ(10px) and scaleZ(2) would translate an element 20 pixels along the z-axis.

There’s also a shorthand property, scale3d(), which, like translate3d(), takes three values, one for each of the individual functions: scale3d(x,y,z). So, in the following code example, the same transformation applies to both of the elements:

.e1 {
   transform: scaleX(1.5) scaleY(1.5) scaleZ(0.75);

.e2 {
   transform: scale3d(1.5,1.5,0.75);


The perspective() function is quite simple, but what it actually does is quite complex. The function takes a single value, which is a whole number greater than 0 (zero). Explaining this is a little complicated; the number is like a distance between you and the object that you’re viewing (a tutorial on Eleqtriq has a more technical explanation and diagram). For our purposes, you just need to know that the lower the number, the more extreme the 3-D effect will appear; any value below 200 will make the transformation appear very exaggerated, and any value of 1000 or more will seem to have no effect at all.

In our third example, we have three transformed elements, each with a different value for the perspective() function: 25, 50 and 200, respectively. Although the difference between the three is very discernible, it’s even clearer when you mouse over to see the transformations removed.

Each element has a different value for the perspective() function: 25 (left), 50 (center) and 200 (right).

Note that I’ve transformed the parent elements (equally) so that we can see the degree of perspective more clearly; sometimes the difference in perspective values can be imperceptible.

Other Properties

In addition to Transform, you’ll need to know about a few other important properties.


If you’ll be applying 3-D transformations to the children of an already transformed element, then you’ll need to use this property with the value preserve-3d (the alternative, and default, is flat). This means that the child elements will appear on their own planes; without it, they would appear flat in front of their parent.

Our fourth example clearly illustrates the difference; the element on the left has the flat value, and on the right, preserve-3d.

The element on the left has a transform-style value of flat, and the one on the right has a value of preserve-3d.

Something else to note is that if you are transforming child elements, the parent must not have an overflow value of hidden; this would also force the children into appearing on the same plane.


As mentioned, when you apply a transformation to an element, the change is applied around a point directly in the horizontal and vertical middle — like the imaginary piece of string we saw in the earlier illustration. Using transform-origin, you can change this to any point in the element. Acceptable values are pairs of lengths, percentages or positional keywords (top, right, etc.). For example:

div {
   transform-origin: right top;

In our fifth example, you can see the same transformations applied to two elements, each of which has a different transform-origin value.

The element on the left has a transform-origin value of center center, and the one on the right has a value of right top.

The difference is clearly visible, but even more obvious if you pass the mouse over to see the transformation removed.


Depending on which transformation functions you apply, sometimes you will move an element around until its front (or “face”) is angled away from you. When this happens, the default behavior is for the element to be shown in reverse; but if you use backface-visibility with a value of hidden, you’ll see nothing instead, not even a background color.

perspective and perspective-origin

We introduced the perspective() function earlier, but the perspective property takes the same values; the difference is that the property applies only to the children of the element that it’s used on, not the element itself.

The perspective-origin property changes the angle from which you view the element that’s being transformed. Like transform-origin, it accepts lengths, percentages or positional keywords, and the default position is the horizontal and vertical middle. The effect of changing the origin will be more pronounced the lower the perspective value is.


By necessity, we’ve flown through the intricacies of the 3-D transformations syntax, but hopefully I’ve whetted your appetite to try it out yourself. With a certain amount of care for older browser versions, you can implement these properties in your own designs right now. If you don’t believe me, compare the list of “More adventures” on The Feed website that I built last year in a browser that supports 3-D transforms and in one that doesn’t, and you’ll see what I mean.

Some of the concepts used in 3-D transforms can be quite daunting, but experimentation will soon make them clear to you in practice, so get ahold of a browser that supports them and start making some cool stuff. But please, be responsible: not everything on the Web needs to be in three dimensions!

Further Reading and Resources

  • The Bright (Near) Future of CSS
    Eric Meyer’s comprehensive article on CSS3, covering CSS3 3D Transforms as well.
  • 3D Transforms, Westciv
    This tool lets you play around with different transformation values and shows you the result in real time.
  • CSS3 3D Transforms,” W3C
    The CSS 3D Transforms module is the full specification, although it is very dry and technical.
  • 20 Stunning Examples of CSS 3D Transforms,” Paul Hayes
    See what you can build when you master 3-D Transforms.
  • The Book of CSS3, Peter Gasston
    My book contains much more detail about all of the functions that I’ve covered in this article, as well as the ones I had to leave out.


© Peter Gasston for Smashing Magazine, 2012.

Smashing Magazine Feed