How To Become A Top WordPress Developer

First, let’s set a few things straight: becoming a top WordPress developer is hard work — very hard work. It’s going to take a lot of time, energy and determination. If you’re looking for an easy checklist or some “fast pass” to the top, you’re going to waste your time. Being one of the best is hard, and statistically speaking, the odds are stacked against you.

By the way, installing WordPress, reading a few tutorials and customizing a few themes does not make someone a top developer. They may call themselves an “Expert”, and that’s fine. They may know more than the average person. But a top developer moves far beyond the basics, and pushes the very boundaries of what is possible. They innovate, contribute to the community, and demonstrate mastery in the work they do. So I want you to be more than an “expert”, I want you to be one of the best.

Why Be A Top Developer

Why not? If you work with WordPress (or plan to start), why just settle for being average? There’s too much “average” in life already. “Normal” is highly overrated. There are other reasons, though. For instance, the top WordPress developers:

• Make the most money
  Demand for WordPress development is high and clients are willing to pay more for developers who are the best in their field.
• Get the best clients
  When you are at the top, you have the freedom to say “No” to the projects you don’t want, and “Yes” to the projects you do.
• Have the most influence
  Being at the top means you have influence (and responsibility) and the capability to shape the future of WordPress as well as the ecosystem that is built around it.

One Hour of Reading a Day

If you’re going to make it to the top, then you need to spend at least one hour each workday focused on reading and learning more about WordPress — outside of any development work. There are no shortcuts, and no other ways around it. Learning and mastering WordPress is going to take time. If you watch TV, cut it out — more than 90% of it isn’t good for you anyway. If you’re a gamer, sell your games or throw them away. Reaching the top takes commitment and sacrifice and the best place to start is with the things in life that aren’t doing you any good anyway.
Start with one dedicated, distraction-free hour of reading for each workday. Shut off instant messages, put your phone on silent, and read. Take notes on what you learn along the way. You’ll find the time goes by faster than you would have expected. Keep at it, day after day, week after week, and month after month. And as you start to see success, put in more time for reading.
Alternatively, consider a three-hour block, two to three times a week. The key is to make a commitment to learning and honoring that commitment by setting aside the necessary time to see it through.

Enrolling in WordPress University

There’s never been a better time to learn and master WordPress than right now. There are so many excellent resources available to those willing to put the time and effort into using them. Before you can start gaining experience, you need some education. Sure, you could just jump in and start breaking things. But I suggest you wait, and cultivate the self-discipline it takes to learn — there will be plenty of time to break things later. As you start your education, it’s important to begin with the social aspect of your experience.

Hang Out with the Right Crowd

We become like those we associate with. If you want to be one of the top WordPress developers, start spending time with those at the top. Read their blogs, follow them on Twitter, give feedback on their thoughts and ideas, go to WordCamps to meet them and listen to their talks. Read the interviews on CodePoet. Follow their examples, ask them for advice, follow their advice, and report back.
Here is a small list of WordPress developers to get you started:

• Andrew Nacin (@nacin)
• Alex King (@alexkingorg)
• Bill Erickson (@billerickson)
• Carl Hancock (@carlhancock)
• Cory Miller (@corymiller303)
• Mark Jaquith (@markjaquith)
• Matt Mullenweg (@photomatt)
• Mike Schinkel (@mikeschinkel)
• Nathan Rice (@nathanrice)
• Peter Westwood (@westi)
• Jeff Starr (@perishable)
• Joost de Valk (@yoast)
• Justin Tadlock (@justintadlock)
• Silviu-Cristian Burcă (@scribu)

Read the Material

The amount of reading material available on WordPress is overwhelming. There are thousands of people talking about WordPress and it is becoming increasingly difficult to filter through the noise. There are authorities, however, and when you commit to mastering WordPress, then you should start your journey by finding the highest quality resources and concentrating your efforts just on those.
Here are a few resources to get you started:

• WordPress Codex
  The WordPress codex is a community-edited repository for all things WordPress. Start with the very basics and focus on mastering the WordPress interface itself from an end-user’s perspective. Learn the WordPress semantics. Read about theme design and plugin development.
• Books on WordPress
  There are more than a dozen books available on WordPress. Start off with the titles of greatest interest to you and then work towards the others. Think “WordPress For Dummies” is too basic? Maybe not. Your clients may read it and it’s important to have their perspectives. When you’re finished, thank the author and write a review.

Understand the Technology

If you’re going to master WordPress as a developer you need to understand the technology. If you’re already a programmer and PHP/MySQL aren’t new to you, great. Make sure your skills are up-to-date. If you’re new to programming, start learning.
Here are some ways to begin:

• Learn PHP and MySQL
  It’s really important that you know PHP and MySQL and that you learn the best practices. A few out-dated tutorials aren’t going to do it. And if you learned it a few years ago, a lot of the practices you picked up are probably out-of-date. Not sure where to begin? Start with Lynda.com or Learnable.com. Learn about MySQL performance.
• Explore the Codebase
  Take time to explore the WordPress codebase on Trac and on Xref. Read through the documentation to understand how things work. Look up what doesn’t make sense to you and ask questions. Familiarize yourself with how WordPress is structured.
• Run The Nightly
  Setup a local development environment and run the nightly build as a way to stay up-to-date on WordPress as it’s being developed.
• Read “Make WordPress”
  A good way to understand the technology is to follow the development discussions taking place on make.wordpress.org. You can follow discussions about the Core, Plugins, and Themes for starters.

Do the Homework

Put what you’re learning into practice. Start with your own WordPress websites. After you read a tutorial, follow it on your own. Experiment. Break things down. Track what you’ve learned and record your insights and breakthroughs for future reference. Spend as much time as you can taking what you’ve learned and applying it to your own projects and experiments.
Here are a few areas to explore:

• WordPress APIs
  Start by familiarizing yourself with the list of available APIs on the Codex. Read through the information available for each API and experiment with each (some will be easier than others). Search for tutorials for each of the APIs to give you some real-world perspective and experience on what can be done with each.
• Ajax in WordPress
  Even if you’re already familiar with Ajax, learn about the use of Ajax in WordPress. Then, move on to tackle using Ajax in plugin development. Search for tutorials to develop your experience further.
• WordPress PHP Classes
  Familiarize yourself with the list of classes created by WordPress developers. Experiment with them on your own projects and master them. In particular, pay special attention to WP_Query, WP_Theme, and wpdb. Search for tutorials on each of the classes, as well as non-core, community contributed classes like WPAlchemy.

Gaining Experience With WordPress

With your education well underway, it’s time to gain real-world experience — and lots of it. Your path to the top is lined with trials and difficulties and gaining experience outside the safe playgrounds of your own projects is a critical step in the right direction. One of the best ways to get started is doing work for others.

Take On Clients

Working for clients, paid or free, is one of the best ways to gain experience. Clients introduce challenges you would never have to deal with working on your own. If you’re just getting started, learn how to get your first client. While the market focus (large clients vs. small clients) will vary, the heart of the matter is get a lot of experience. The goal is to not just get a few hundred hours working on WordPress, but a few thousand. You need to put the time in with real-world experience and taking on clients is one of the best ways to do this.

Develop a Public Theme

Build a theme you’d actually use. Release it, paid or free. Listen to the feedback you get from developers and end-users who use your theme. Ask for a peer review from theme designers you respect. Update your theme as you get feedback and as your abilities improve. Work hard to make a theme that you can be proud of.

Develop a Plugin

As you learn and work with WordPress you’ll eventually find a need that hasn’t been met. When you do, meet it yourself. Take what you’ve learned about plugin development and put it into practice. Write a plugin that’s secure and that solves a real need, without being another “me too” contribution to the already massive plugin community. Release it, paid or free, and get feedback from the people who put your plugin to use.

Contribute a Patch

Read the Core Contributor handbook and learn how to submit a patch. It can be a daunting process your first time around, but look for a challenge that you can tackle, and stick to it. Contributing a patch is an invaluable experience and an important part of being able to consider yourself a top WordPress developer.

Master Debugging

Learning how to write bug-free code is a critical step in becoming a great developer. Start with the Codex and learn about debugging in WordPress. Read Andrew Nacin’s post on 5 Ways To Debug WordPress. Familiarize yourself with some of the developer oriented plugins, like Core Control, Debug Bar and Log Deprecated Notices.

Joining The WordPress Community

As you continue your education and put what you’ve learned into practice, the next step is to become an active member of the community. You may be a fantastic developer, but it doesn’t count for much if no one knows you exist. Spend time investing in the community. One of the best ways to do so is sharing what you know.

Write Tutorials

I got my start back in 2006 with a simple tutorial I wrote (be warned, it is a little dated). I took what I had just figured out and poured it into a tutorial to help others and save them the time (and headache) I had just experienced. A lot of people read it, a few wrote back and said thank you, and some people even asked me to do some work for them. So write tutorials that take the best of what you’ve just learned and present it to others so they may reap the benefits of your efforts. It’s worth it.

Contribute to the Codex

As you spend time reading through the Codex you will notice areas that need improvement. Learn about becoming a volunteer in the Codex. Dedicate time to improving the quality of the documentation. While documentation in the Codex is continually improving, there are still functions and features in the WordPress core that go undocumented. If an area is beyond your current capabilities, bring it to the attention of others and embrace the opportunity to learn more in the process.

Participate in Forums

Most WordPress beginners start out asking questions on the official support forums. Start there by answering questions (even the silly, basic ones — we all start somewhere). From there, become an active member of the WordPress Stack Exchange community. Answer questions and learn from the answers that other developers are giving.

Present at WordCamps

Attend upcoming WordCamps and look for opportunities to present and give value to the WordPress community. A true sign of your expertise is your ability to take what you know and teach it to someone else. Read the Diary Of A WordCamp. Want even more of a challenge? Become an organizer and start a WordCamp near you.

Reward And Responsibility

The reward at the top is worth the effort. If you’re building a business around WordPress (read 7 reasons why you should), a mastery of WordPress is a critical step to your success. In 2011, according to the official WordPress Survey results, “6,800 self-employed respondents were responsible for over 170,000 websites, personally”. Of those, the average median hourly rate was $50/hour. Based on the Pareto principle, the top 20% of those developers (less than 1,400) are responsible for 80% of the work done (and they make more than $50/hour).
Now, being in that top 20% carries with it a high-level of responsibility. Staying at the top requires a commitment to ongoing education and continual experience. Never stop learning and improving. Being at the top also puts a level of responsibility on your shoulders for the health and future of the WordPress ecosystem. Get involved. Weigh in on important matters. Contribute. Put a percentage of your success back into building up WordPress and ensuring its future.

Conclusion

Becoming a top WordPress developer requires a mindset of continual improvement and a willingness to do the hard work. It starts with an intentional focus on education and then moves to extensive real-world experience. Finally, the title of a “top developer” demands dedication to the WordPress community, as well as recognition of the responsibilities by those who mold and shape the future of WordPress.
What about you? What advice do you have for becoming a top WordPress developer?

The Designer Will Make It Pretty

I am sure that my day job as a web developer/designer has a lot of similarities to that of the entire developers/designers community. I craft HTML and CSS using methods that I hope are fluid and adaptive. At the same time, my coworkers and I serve over 100 clients and 13 million users on a single platform.
Each client has the ability to design their website as they see fit, but we have an unbalanced ratio of designers to clients. I do not have the luxury in my day-to-day work of spending months working through a design process as part of a client’s implementation. However, this scenario of limited time hardly strikes me as rare among my design peers.
Because of these constraints, I hear a phrase quite often that many designers would compare to nails on a chalkboard. The people I work with who do not handle the design side of our platform will often tell clients, “The designer will make it look pretty.” Now, “it” could refer to a lot of things: a log-in form, maybe a simple button, or the entire website. When content is raw, unformatted or confusing to the user, it gets sent to the design department so that it can come out the other end “pretty.”

The result of my design process.
Web designers hate this perspective. We consider what we do to be far more important than decorating sloppy content and returning it in a timely fashion. Many of us would argue that our real job is to make content accessible, flexible, easy to use and easy to work with. The real value in design comes from what you can’t see or what you don’t appreciate; it comes from all of the trouble that you don’t have because we fixed it ahead of time. Thank goodness we know better: if we just made things pretty, all of our work would be in vain.

Why Designers Hate “Pretty” Design

Professional designers don’t make things pretty because it’s beneath us. Your visual acceptance of our work is the result of careful decision-making built around grid systems, perfect ratios, color theory, typography and—no, I won’t make your logo bigger—white space. The practice of simply decorating is something we used to do when we were just getting started down this career path. We used to make pretty things in Photoshop to kill time in class or to tinker with a new tool or technique. We have since moved on to bigger and better things.

Image source: Mike Rohde.
Yes, the design community has graduated from the pretty principle to less visual but supposedly more impactful measures. The technology of the present enables us to reach a higher plateau, and we are a bunch of people who refuse to settle for good being good enough, and that includes making something pretty. Right?

Embrace The Pretty

Anyone who feels they have left pretty and supposedly meaningless things behind is wrong. Leaving behind the idea of making your work appealing to the eye is to leave behind real value. Aesthetics are no petty trick for the uninspired. Quite the opposite, really.
Our great human minds come preprogrammed with many incredible default behaviors that automate complex decision processes. One such behavior is to be drawn to attractive things. Of course, this isn’t news. We prefer to spend our lives with companions who we are attracted to, we want pretty spaces to live and work in, and we invest our time and money into these things to make them look good. However, this hidden pattern in our behavior can account for much more than these obvious attraction-driven actions.
Attraction works surprisingly well not just by direct preference but by association, too. Take, for example, something that we see on a daily basis. The process of selling products with attractive models or celebrities may come across as a lazy method of advertising, perhaps by a marketing team that is slacking off. But despite its transparency, this method remains an effective way to pass attributes that we generally associate with attractive people onto a completely unrelated product.
This comes to light in a study performed on two groups of males who were shown the same car advertisement, the only difference being the inclusion of a pretty woman alongside the car. The group that was shown the car with the woman not only rated the car as faster, better designed and more valuable, but when they were confronted about the influence of the attractive woman, nearly all of the subjects denied that it played a role in their judgment of the car.
How does all of this relate to Web design? Like so many things, it comes back to the content. Content is the most important element of a website, and how a user reacts to that content or recalls it later can be heavily influenced by its surrounding. The most obvious example is our judgment of credible information.

In the example above, you can see an article surrounded by distracting advertisements on the right. Crushed into leftover space or given no regard for good typography seems less important or even less factual to us than one that excels in all of these categories—even if the words are exactly the same. To the reader, it is clear that the time spent crafting an article into a beautiful experience indicates that it has higher value and more legitimacy. But the benefits don’t stop at the paragraph level. The entire experience of a website can be enhanced with an eye for beauty. I’ll even show you how.

The Laws of Attraction

The process of booking a place to stay on vacation or a trip has been completely transformed by the Internet. To be completely honest, I’m in my 20s, so I don’t really know what people did to book places to stay before the Internet, but it had to be terrible. Today we have dozens of options for finding deals on hotels, resorts, apartments and beyond. From the variety of choices out there, patterns have emerged in the process of finding places to stay. Every website out there starts with the basics: destination, arrival and departure dates, and guests. This is a good pattern, and it generally serves our best interests, but oh, the difference that design can make.

Airbnb has established an impressive level of popularity in a short time among travelers looking for an experience outside of the standard hotel room. This is in no small part due to the emphasis it has placed on design. When you visit the Airbnb website, its entire mission is revealed to you in an instant. Large vibrant images bleed through the background, showing some hand-picked potential destinations.
These careful selections serve several purposes. First, it becomes immediately clear that we are dealing with something beyond the drab hotel experience. Secondly, it’s no coincidence that the destinations that enter and leave your peripheral vision are so gorgeous. Let’s take a moment to compare this experience to another website that offers a similar set of features.

Vacation Rentals By Owner (VRBO) helps you accomplish a goal similar to that of Airbnb’s users, which is to book destinations with individual owners. Honestly, VRBO does not make this process difficult, and its inclusion here is not meant to imply “Never do this.” The steps are the same (destination, arrival and departure dates, guests, etc.), and its design does not hinder the user from completing this process. However, the difference in experience between the two websites is drastic.
The primary difference is that Airbnb has done a wonderful job of presenting its primary content (the places) beautifully. The large pictures of the very pretty places gets us excited about our trip and about the sort of unique residences we could stay in. Because of the pretty things we immediately see on Airbnb’s home page, our entire experience is enhanced. Even if the process of booking a place to stay is no harder or easier on Airbnb, more people are likely to come back or share this resource with their friends because of the positive and memorable influence of the pretty images and interface. The unique style of Airbnb translates into measurable results in the form of a noticeably lower reliance on search traffic and a higher percentage of direct and repeat traffic.

The Industrial Age Is Over

There was a time when design was a secondary consideration for the products we used and the services we enjoyed. This mostly came about during the Industrial Revolution, and it could be argued that we relived a similar mentality through the Information Age. Both of these eras share a common theme of production on a large and affordable scale. We found ourselves constantly inventing a new mouse trap, except that it didn’t have to be a better mouse trap if it could be a cheaper one. So long as your table, automobile, computer software or thermostat had a utility and was affordable, it was good enough.

If you have the pleasure of living in a developed country, it should be obvious to you that times have changed and this no longer applies. Why did the Nest thermostat make such a huge splash online? Because finally we have a device that can automatically control the temperature in our home? For years we have longed for something that allows us to regulate the temperature where we live! Sorry, but we’ve had these things. In fact, hundreds of these things exist. But that’s precisely why Nest took off: it was the same thing done again but with real design this time.
Sure, it’s important that the Nest makes it easy to program the temperature in your house, which is an element of “good design” in the sense that designers love. The controls are simple, and it’s super-easy to understand, read and use. I would argue, though, that all of this is secondary to the fact that the Nest looks really cool. Perhaps you would scoff at the statement that looking cool is more important than being easy to use. But the fact is that this thermostat will spend most of its life not being touched and not being interacted with in any way. It’s a thermostat, so what will people do with it almost 100% of the time? They’ll look at it.
We see this in industries beyond home décor. It wasn’t long ago that the US automotive industry was in a nose dive for the crapper. This shouldn’t have been much of a surprise because the industry was built on Henry Ford’s principle of mass production on a cheap, repeating, large scale. As the world moved away from affordable necessities to desirable luxuries, the car industry needed to move with it or go broke. In the early 2000s, automotive juggernaut General Motors rehired Robert Lutz, the man who would rewrite the script on how GM made cars. Lutz ditched the industrial mentality of GM and started to imbue his own opinion of cars, saying, “I believe very deeply in the automobile as an art form.” Since then, GM has transitioned from manufacturing cars to designing them.
Looking around, you can see that making things pretty is going from being an afterthought to being an integral part of our lives. We have reached the point where making something affordable yet high in quality is second-nature. Look no further than the content we curate in our social media profiles today to get a prime example of the difference design makes.
The Internet is becoming a culture of hoarding; with Pinterest, Instagram, Facebook, Twitter and websites like Dribbble and 500px, a premium has been put on building a digital collection of things. We share the food we eat, the places we go, the clothes we want to buy and the gadgets we love. Often the primary requirement for sharing these things with our social networks is that they stand out visually. They need to be unique, stylish and well designed… they need to be pretty. As discussed earlier, all of these qualities build a connection between who we are and the products we love. In order to create a product or website of extraordinary value to the millions of digital curators out there, we need to invest in aesthetics that reflect well on those same users.

Put Pretty Into Practice

The landscape of the Web is not so different from that of thermostats or cars. If anything, its resources are over-abundant. Any task you might want to accomplish online either has been done thousands of times or can be easily duplicated after the fact. When users have limitless options and limited time, design is the deciding factor in what makes one experience more worthwhile than another. So, don’t cringe when “pretty” is included as a design requirement, because it should always be. When we make a design pretty, we are deliberately basing our design choices on aesthetic value. A pretty design has a visceral impact on the user and prompts an emotional response.
Designers who ignore the potential impact of prettiness on their work are at risk of being surpassed by peers who share their skill set but who appreciate the role of beauty. Pretty design isn’t just for Dribbble. Your clients, customers and users all stand to gain a lot from that extra coat of paint. A user’s personality can be imbued, however slightly, by the work done by a designer merely by association. I implore you to keep work from leaving your desk until you have had time to make it pretty.

Additional Reading

• A Whole New Mind, Daniel Pink
• “In Defense of Eye Candy,” Stephen Anderson

Passive Income Strategies For Web Designers

Finding ways to earn passive income is a growing concern among many freelance designers. I’ve always loved client work, but I have to admit that the pressure of juggling multiple bosses and constant deadlines eventually started to wear me down.

Themes

I was lucky enough to join ThemeForest (the biggest themes and template marketplace on the Web) in January 2009, shortly after it launched. ThemeForest seemed like the perfect way for an unknown, inexperienced designer to make money: no need for a fancy degree or years of experience — just design something cool and the market will reward you. In fact, that’s exactly what happened. Top designers now gross six-figure annual incomes solely from selling themes, and some do so despite being relative unknowns in the rest of the design world.
So, what was the result of my own venture into theme-making?
Overall, it was very positive. First, it helped me launch my design career, because my first couple of freelance clients were all people who contacted me after seeing my templates. It was also lucrative: in June 2010, my best month ever, I made $1,248. For a year after that, having not even launched new themes, my existing ones still made me around $200 a month, with minimal effort on my part.

The high point of my ThemeForest career.
Altogether, I’ve earned around $12,675 from ThemeForest in two and a half years; nothing to scoff at, especially because I completely stopped supporting my themes about a year ago. So, if selling themes is so great, why did I design the last one more than two years ago? There are a couple reasons for this, the main one being that the market drastically changed, and customer expectations changed with it.
Designing a good-looking theme isn’t enough anymore. If you want your theme to be competitive, you need to support shortcodes, build a custom back end and design multiple layouts, not to mention provide excellent support and build a documentation website.
In other words, in the span of a couple years, building themes went from something that you could do on the side to being a full-time job. Because I didn’t want to become a WordPress guru and spend all of my time creating themes, I decided to put theme design aside.

My most successful theme.
Theme design, then, is one of the best ways a designer can earn passive income, but it’s also one of the hardest. By the way, another important factor to consider is that theme design makes sense only if you’re in it for the long run and can reinvest the time you spend on a theme into subsequent ones (by reusing bits of code, streamlining the process, building a mailing list, etc.).
Pros:

• Very lucrative if you’re successful.
• No need for experience or education, as long as you have the right skills.
• No need to be famous or have a big following.

Cons:

• Requires a lot of HTML and CSS coding, and probably familiarity with WordPress or another CMS.
• Providing good support is time-consuming.
• You will probably need to launch more than one theme before the venture becomes more profitable than regular freelance work.

Icons And Vectors

Note: I have never released any icon packs, brushes or vector resources, so I asked Vincent Le Moign of Webalys for his thoughts on this market.
“I started to create passive income by accident. In 10 years of freelancing, I’ve created a small stock of vector graphic elements that I’ve been using repeatedly for interface design. At first, it was just a few Illustrator files, where I pasted GUI elements, such as buttons and icons, to reuse in future projects.
“In June 2010, I decided to make it comprehensive and consistent, and then release it for free. Inspired by Web application frameworks such as Ruby on Rails, the User Interface Design Framework was based on the concept of modularity, productivity and fast wireframing.”

Statistics from the launch of the User Interface Design Framework. Large preview.
“It took me a few weeks to create it, without making any money on it, but the feedback was impressive: in two months, 52 000 unique visitors, more than 1000 tweets, dozen of blog posts. Even the godfather of Web design, Jeffrey Zeldman, reviewed it. I was high on a cloud!
“Looking at it now, I have no idea why I invested so much time doing it — probably because of passion, and I felt the urge to fill a gap: this kind of tool was missing. I didn’t make any conscious plan, but this is how my new career started. Seeing this steady traffic, I thought I could build a premium version on top of it. A few month later, I launched a commercial pack filled with 750 vector icons. Then the magic happened.”

The Minicons icon pack.
“Money started to add up in my PayPal account. I remember checking my inbox compulsively to see if the latest emails announced sales. It wasn’t a lot of sales yet, just a few hundreds dollars, but it showed me the way: that making a living from passive income was possible. In the past two years, the sales gradually went up and reached the point where I could stop working for customers and spend 100% of my time on my own products. In 2011, I launched one more resource: a vintage vector ornaments pack, which was successful, too. Having two different products guaranteed a more regular income flow.
“I currently earn a few thousands dollars each month from sales. My income is the same as what it was when I was a freelancer, but I have the satisfaction of developing my own products. But designing quality content is not enough to make sales. I actually spend most of my time on other tasks:

• Creating the sales pages, writing the text, polishing the product websites.
• Setting up the e-commerce solution. In two years I’ve wasted a lot of time building the sales process. I switched e-commerce solutions four times until I found the perfect one (DPD — almost unknown but highly recommended).
• Advertising and promoting. I spent a lot of time and money finding the best sources of traffic.
• Improving marketing and SEO, and setting up and learning how to use products such as MailChimp, Google Analytics, GetClicky, SEOmoz, Curebit.
• Optimizing the conversion rate by setting up A/B tests with Google Optimizer.
• To be honest, I don’t provide a lot of support (a few minutes a day), but I commit to responding as soon as possible. And I spent a lot of time writing the documentation (with screenshots) to avoid answering the same questions over and over again.

“So if you’re considering creating premium resources, the answer is yes, you can live off of it. But your creativity and designs skills are not the keys elements of success. You’ll need to invest a lot of time in learning and practicing all areas of business: marketing, promotion, copywriting, SEO, analytics, etc.
“Actually, this is the beauty of launching your own products: you will become a better designer not by creating better graphics, but because you will have a full view of the business and will master a full range of skills. You will see your customer with new eyes and focus on the efficiency of your designs more than their outer beauty. And believe me, your customer will love that and will pay you more if you increase their sales.
“On the downside, the market is becoming highly competitive. The same shift that is taking place with templates is happening in my market. Competition is becoming fierce, and not a week goes by without a few more icon packs getting released. I mean, which designer hasn’t launched their own set by now?
“I’ve counted more than 50 competitors who sell icons, and the number and quality is improving constantly.”

A sample of the Vectorian vector pack.
“Also, the growing trend of discounted bundles (like on Dealotto and MightyDeals), where you get a ton of resources for a few bucks, risks drying up the market. I’m still not sure if this will convince more designers to add these resources in their workflow, thus expanding the market, or stop them from buying these packs at the current prices.
“This tougher competition has forced me to spend months this year doubling the number of my icons, from 750 to 1500, and adding variations for different software, such as PowerPoint and Keynote. Also, I’ve improved my other product, the vector ornaments, and paid another freelancer to fix a few problems. And I recently paid a great calligrapher to create a logo for Vectorian and improve the branding. Expenses and time investment are going up.
“Another problem: I don’t think my designs are as creative or as good as before. I’m so focused on creating the content, marketing it and thinking like a business owner that I sometimes have less passion for design and less creativity.”

Pros:

• You already have the skills to create the content.
• If you use marketplaces such as iStockphoto and GraphicRiver, you don’t need to build a website or promote your products.
• Almost no support is required (if you write good documentation).
• You will expand your skills and become more business-oriented.
• You don’t need to write in English (this was a big advantage for me because I’m French and a poor English writer).

Cons:

• It’s time-consuming.
• The expectations of quality and quantity are rising. And more and more free content is becoming available.
• The market is competitive; you need not only great content, but great marketing.

Advertising

I can still remember when Carbon first accepted one of my websites into its advertising network. I was overjoyed! At last, I would be able to dip into the river of money that flows into Internet advertising! Of course, I didn’t expect to earn a salary from ads alone, but I thought it might be a nice supplement — say, a couple of hundred dollars a month.
If you’ve ever run any kind of ads on a website, you know what’s coming: my first payment must’ve been for something like $5. So, yes, Internet ads are no fun — unless you bring in a massive amount of traffic (or if you plaster your website with a massive number of ads).

My first ever ad spot.
Since then, I’ve joined Fusion Ads for my blog and joined Yoggrt for The Toolbox (both ad networks belong to BuySellAds). To give you some numbers, The Toolbox gets about 20,000 uniques a month, which is not huge but still decent. This converts to $30 to 60 per month. My blog is a little more successful (probably due to the higher click-through rate), and I’ve succeeded in pulling in $100 or $200 in extremely good months when a couple of my posts went viral. But the average has been around $50 to $100.
Altogether, the total from advertising comes in at around $600 over six months. So, as far as I’m concerned, ads are a good way to pay for a meal to celebrate the weekend, but not much more unless you decide to become a full-time blogger.
Pros:

• Does not require any work.
• Joining a respected ad network will give your website cachet.

Cons:

• Pays for a meal, if you’re lucky.
• Did I mention that you probably won’t earn anything?

Books

Writing an eBook (or plain old book) might seem relatively easy. After all, we all know how to write, right? In fact, I’d say that actually writing the book is not the hardest part. Sure, developing a good writing style takes years of practice, but the truth is that people will forgive clumsy writing if you have something valuable to say. No, the real work in writing eBooks is in what comes before and after the writing.
Before writing the first word, you need to come up with a good topic and, more importantly, develop the skills necessary to make you an authority on the topic. Simply compiling existing knowledge might work for a blog post, but it won’t fly when you ask people to hand out their hard-earned cash.
Consider writing an eBook only if you have a couple of years of experience under your belt and feel ready to distill it into a book. And please don’t make the mistake of thinking it’s over once you’re done writing. That’s actually when the real battle begins: selling your book.

My eBook’s landing page.
How will people find out about your book? What reason will they have to buy it? Why should they buy yours instead of competing books? These are the kinds of questions you’ll have to face.
If you want to rest your chances on a personal website, take a page from Jarrod Drysdale’s book (pun intended), Bootstrapping Design. Drysdale not only set up a website for his book, but also used a mailing list before and after the launch to promote it by sending out sample chapters and asking his audience various questions. I did my best to promote my eBook by setting up a landing page, writing guest posts about it and holding giveaways.
Another good strategy is to target a niche. This is what I did by focusing specifically on user interface design for startups, and Matthew Butterick also did it with his Typography for Lawyers book.
Last but not least, I strongly recommend partnering up with websites such as AppSumo and Hyperink to open up distributions channels for your book and to create new revenue streams.

Sales started strong but have slowed to a couple per week.
Writing an eBook turned out to be great for me. I had a great launch, making about $8,000 in the first two weeks alone. Since then, sales have slowed considerably, but I did manage to make another $6,000 in the four months since the launch. In my case, the key to earning more was partnering up with AppSumo and Dealotto, which both brought in a couple of thousand dollars in extra revenue after the initial boost from the launch faded away.
Pros:

• Almost no support needed.
• No technical skills required.

Cons:

• You need to have something to say.
• A lot of promotion is required.
• The market is competitive and crowded.
• Sales will quickly dry out after launch.

Software As A Service

Building a business requires a ton of work and commitment, but unlike freelance design or, say, mowing lawns, building a software-based service of some kind takes away the 1:1 relationship between your efforts and your income. Some services charge only once, as is the case with job boards such as Authentic Jobs and my own Folyo. But, of course, the cash cow of passive income is subscription services because they enable you to anticipate your cash flow and build a steady income stream.
The obvious challenge in building a software service is that it requires technical skill, which you might not have if you’ve got a design background. It’s not the end of the world, though. You could find a cofounder, outsource the project or even learn the skills yourself. And you don’t need to go all out right away. When I speak with non-technical founders, I often notice that a preliminary version of their idea could very well have been achieved with a simple WordPress blog.
If you explore a little deeper, you’ll realize that opportunities for monetization are everywhere. For example, WordPress has numerous membership subscription plugins. Even MailChimp lets you charge for newsletter subscriptions. By thinking outside the box and combining existing services, even a moderately technical person can get a minimum viable product out the door.
I launched Folyo (a website that helps startups find great, vetted freelance designers) about a year ago:

Folyo, a private job board for freelance design projects.
For the first couple months, I ran it as a simple newsletter of job offers, with a Wufoo form for submitting projects. There was no back end, no database and no user accounts! This was enough to validate the concept and to motivate me to build a real app. So, I found a Ruby on Rails developer through a Hacker News jobs thread and paid him about $3,000 to create a working app (a process I cover in more detail on my blog).
Meanwhile, I had been learning Ruby on Rails myself, so I’ve since taken on part of the development myself, outsourcing the remainder to a friend in exchange for some design work. Was it worth it? While I have no doubt I would be earning more if I was focusing on freelance work rather than Folyo, I’m still very happy that I decided to launch my own project.
I currently make about $1,000 a month from Folyo, which is good enough for one person with minimal costs after one year. More importantly, each day spent working on Folyo makes it a little better and increases the website’s value (unlike with client work, where working on one project doesn’t help you with the next).
Of course, when I’m working on Folyo, I do very little actual designing. In fact, my time breaks down something like this:

• Email and support: 20%
• Blogging: 20%
• Coding: 40%
• Miscellaneous tasks: 10%
• Design: 10%

So, if you’re thinking of launching your own service, consider that it probably means spending much less time designing.
Pros:

• Theoretically, it can be lucrative and even get you bought out by Google or Facebook.
• The work is very motivating.
• You have the freedom to build anything you want.

Cons:

• You will need to step way outside of your comfort zone.
• The chance of failure is high.
• At the end of the day, relatively little designing is involved.

Lessons Learned

What did I learn from all this? And what would I do differently if I could start over? Well, one thing I realized is the importance of building a network. You need to find a way to get connected, whether it’s by becoming a famous designer, writing a blog, building a Twitter following or, ideally, doing all that and more.
Of course, a lot of great designers focus simply on doing a great job and don’t concern themselves too much with the rest. But maybe these designers went to a great art school and kept in touch with their classmates. Or maybe they attend design meetups regularly. One way or another, you can bet that most successful designers maintain a network, even if they don’t realize it.
Blogs and Twitter are simply the digital equivalent of this. Making it entirely on your own is very hard, so the earlier you start cultivating these relationships, the better.
Related to this, have a strong identity. Try to stand out from the crowd, and make sure people know who you are. You can achieve this by cultivating your own style, being involved in high-profile or viral projects or, what I think is the best way, launching your own projects.

Visual Idiot’s humor at work.
If you want to see how it’s done, look no further than Visual Idiot, who converted his great design skills and weird sense of humor into a job at GoSquared, despite no one on the Internet even knowing his real name.
This may sound obvious, but the reality is that projects that help build your network or identity are not often the most lucrative ones (actually, they usually don’t make you any money). So, it’s tempting to take that high-paying contract to design a pharmaceutical company’s intranet, rather than spend a couple days building a silly JavaScript that replaces stuff with pictures of cats.
But guess what? Nobody outside of Big Pharma will ever see that intranet’s beautifully crafted pixels, but that cat website might go viral and lead to thousands of people suddenly becoming aware of your existence.
To summarize, the main lesson I’ve learned over the last couple of years is to have a long-term view and invest in yourself, not chase a quick buck.
The plan is rather simple, then: build a network, cultivate a strong identity to ensure the network knows who you are, and then come up with a product you can market to it.
Of course, each step usually takes a couple years. I said it was simple; I didn’t say it was easy!

Optimizing The Design Workflow With Extensions

I’ve been using Adobe Fireworks for over a decade now and I can recommend it to anyone searching for the optimal screen design workflow. Much has been said about Fireworks’ capabilities as a design application, but today I want to focus on one of its other biggest strengths — its extensibility.
As a platform, Fireworks gives its users a lot of freedom, when it comes to extending it. Because of that, Fireworks has a thriving ecosystem of add-ons (extensions) that add a lot of valuable functionality with newer options.
In this article, I’ll try to list some of my top extensions for Fireworks. These are not necessarily the most complex or powerful extensions, but rather those that have helped me be more productive with my Fireworks workflow over the years. Also, all of these are free to test and use, so you can even try them right away!

Working With Extensions In Fireworks

Fireworks can be easily extended, but the extensions are installed and maintained via the Adobe Extension Manager — a tool that must be run separatey from Fireworks.
Before we review in detail the extensions that I can personally recommend, I would like to share a few general tips and suggestions on how to work with extensions in Fireworks. Although these tips are mostly geared towards Fireworks CS5 and CS5.1, there are actually only a few minor differences if you are using version CS6.

Easy fix for issues with Windows Vista / Windows 7

If you are using Fireworks on Windows Vista or Windows 7, the Extension Manager may give you strange errors when you attempt to install an extension. The easiest solution to this problem is to run the Extension Manager as administrator. Simply right-click the “Extension Manager” shortcut and select “Run as administrator”.

Note: The reason why the EM needs to be run sometimes with administrator privileges in Windows Vista and Windows 7 is simple — some extensions specify installation locations in the Program Files folder, and Windows requires administrator approval to install anything in this area, for security reasons. Usually older extensions (that were not recently updated) are installed into the Program Files folder, while new extensions are installed into the User Application Data folder. Fireworks can run extensions from either the Program Files folder or from the “User Application Data” folders in order to maintain backward compatibility with older extensions.

Where are the installed extensions located?

If you are installing Fireworks extensions for the first time, keep in mind that:

• Commands will usually appear in the Fireworks Commands menu.
• If an extension also installs a panel, you will find it in the Window menu.
• If an extension installs an auto shape, it could be found in the Auto Shapes panel.

Extension descriptions

The best way to learn how an extension is supposed to work, or in which menu / submenu you’ll find it, is to look for the extension description in the Extension Manager. However, please note, that the Extension Manager lets extension developers link to descriptions online, which means that if you are not connected to the Internet, you will see empty description boxes in the Extension Manager. If you do come across these, know that a missing internet connection might be the cause.

Using shortcuts

If there are some commands that you find yourself using very often, you may want to assign keyboard shortcuts to them for gaining more productivity.
To do so, go to menu Edit → Keyboard Shortcuts, duplicate the default shortcuts set, then select your command from the list and add a shortcut combination of your choice. Fireworks will let you know if the shortcut you want to assign is already in use. Then, depending on what it already does, you can either choose to replace it with the new one, or select a different key combination.

Updating extensions

Updating extensions in Fireworks is pretty straightforward — you just have to open the Extension Manager every once in a while. If an extension has an update available, you’ll see a notification in the list of extensions. Then, simply select the extension and click “Update”.

Process of updating extensions.
Please note that not all Fireworks extensions have the “Automatically Check For Updates” option built-in. So alternatively, you can simply download a newer version (if there is one available, of course) from the website where the extension was originally posted, and then run the Extension Manager. The EM will ask you if you’d like to replace the old version with the new one — select “Yes”, and the process will complete automatically.
Now that we’ve covered the basics, let’s move on to the list of extensions!

1. Grids Panel

John Dunning is a legend in the Fireworks community, and his growing list of powerful extensions often compete with themselves for the top spots as valuable and useful. His grids extension is unquestionably the first one I reach out for every time I start a new project.
In a nutshell, the extension lets you set up a grid for your design. You set the parameters (the column width, gutter width, number of columns, etc.) and it then creates a locked layer with the columns, rows and guides spanning the height of your canvas. Since there are a couple of setups that I usually prefer to work with, I’ve saved them as presets, so it’s simply a matter of opening the panel and selecting an existing preset.
For responsive designs, what I typically do is create a few grid setups for different viewport sizes. Then I simply create a new page for each breakpoint and apply the appropriate grid before pasting the content in for realignment.

Insert Grid Panel: Typical setup for a 12-column grid. Large preview.
The features of the grid panel are evident from the screenshot, and make it easy to control columns, gutters, and baselines as wells the appearance of the overlay (and whether or not guides should be created). If you have ever tried to set up a grid in Fireworks without this extension, you’ve wasted a whole lot of time!

2. Guides Panel

As awesome as the grid panel is, it’s probably not suitable for every situation. Sometimes you may need to just create a set of guides without all of the other grid structures (e.g., if you are creating individual assets such as banner ads, rather than entire pages — grids are great for entire pages and screens, but they can be an overkill for specific components).
Also, for those of you who work extensively with guides, it often seems much easier to quickly set up the grid precisely with guides. If you are like me, and addicted to the fine control that guides offer in Fireworks (or any other design application for that matter), you most certainly would like to check out the Guides panel by Eugene Jude.
The panel gives you several options to add guides to the canvas with precise numerical control: you can set margins on either (or all) four sides, create columns and rows, or add individual guides at specific coordinates.

Guides Panel (with the “General” tab selected in it).
You can copy entire collections of guides and paste them into another page or document, or even save sets to retrieve later (this feature is pure gold if you have a setup that you work with often, and want to reuse).
But where this panel really shines is in its ability to work with selected objects. Lets say you need guides all around and through the middle of that image you just placed in your design, so you can align objects around it. Simply select the object, go to the “Selection” tab in the Guides Panel and select the appropriate boxes. You can even set an offset value between the object and the guides.

Adding guides through the center of a selected object.
Finally, there’s the ability to delete all guides, or at least only the vertical or horizontal ones (oh, how I wish I had this panel a little earlier — this would have easily saved me a couple of precious weeks every year!).

3. Smart Resize Auto Shape

Since Adobe Fireworks is used extensively for UI design, a very common use case is to create an interface element by grouping a few objects together — rectangles, text fields, buttons, etc.
Fireworks’ object-based workflow makes this an easy task (compared to Photoshop’s predominantly layer-based structure). The problem though is that once you have created such a group, resizing it can be difficult. You can’t just select the group and change its width or height, since Fireworks will simply stretch everything in the direction specified, and deformations to the individual objects will occur.
That’s where John Dunning’s Smart Resize comes into play.
Once you’ve selected a group that you need to resize, use menu Commands → Smart Resize → Attach, and the command will convert your group into a special smart object with the typical yellow resize handles.

Smart Resize: Saving Time When Resizing Groups of UI Objects.
You can use these handles to resize the group in any direction and witness the magic in action. The extension will resize only elements that extend across more than 50% of the group’s size — which is typically your background boxes — and retain the rest of the elements in position relative to the closest edge of the group.

Smart Resize in action.
For extra control over how elements in your Smart Resize group scale or are being repositioned, you can set anchor points for each individual object. For example, elements that have their X anchor set to the left will only scale on the right side; the left edge will stay fixed in proportion with the rest of the group.

In this example, the X anchor was set to the left, then the group was resized.
Text boxes will be resized while maintaining their text properties intact — the height and width of the text box will change, but not the text itself. John demonstrates the extension’s usefulness when working with a mock-up of a dialog box on his website. But of course, there are many more cases where you can save time with this extension. Personally having used it for a couple of months now, I’ve found my workflow immensely optimized, especially when creating wireframes where quick changes to try out variations become the “need of the day”.

4. Tables Panel

If there is one extension in this list that I would award as the “Most Underrated”, it would have to be the Tables Panel from John Dunning.
It does something that seems very simple but is actually much more complex and tedious: building and editing tables (painlessly!) in Fireworks. It can also be an indispensable tool for editing many other design elements, including buttons, styled boxes, and placeholders.
We’ve all been there, haven’t we? Every designer knows that often the task of mocking-up a table inside a Web design (or a Web design prototype) can come up. Unfortunately, it is rare for a graphics editor to provide a decent level of support for building tables, and Fireworks is no exception. Everything from deciding whether to use rectangles for rows or individual cells, or aligning things manually every time there’s a change in the design, tables in Fireworks can be a pain.
But things change a lot with the introduction of the “Tables” extension!

Tables Panel: Easily build and modify tables in Fireworks.
To create a table, you simply lay out the content of the table roughly on the canvas, in the sequence you want. Select all objects, and hit the “Create” button in the Tables Panel. The extension will add individual boxes for each element and lay them out with the height and width of the biggest element that appears in a row or column. You can change the padding, decide whether you want to see the table outlines (or not), and so on — and what’s better, everything always remains editable. Lets say you changed some text in the table, and now it’s too long for the cell that contains it? Simply press the “Update” button and the table will auto-adjust accordingly!
Apart from the obvious goal of creating tables and grids, one can use the extension in a few other scenarios. For example, you could use it in adding a background and border to text boxes for pull-quotes, so that the box always adapts to the size of text.
I often find myself using it for buttons when creating wireframes. It has always been very annoying to me that I have to keep managing a rectangle and a text field every time I need a button. With this extension it’s all taken care of, and I never have to manually change the width of a new button to fit the text inside it! Besides, you can even have borders of different widths around the button by changing the border widths in the Tables Panel.

Tables Panel: Creating dynamically-sized buttons quickly.
The Tables Panel is pretty flexible and has many other options. You can even insert a table from a text file (tab-delimited or comma-separated text file — .txt or .csv). After you select the file, the contents of the table will be inserted at the upper-left corner of the document (you can later drag the table around and position and style it in any way that you want). You can also import a table from a Web page — you’ll just need to first convert it to tab-delimited or CSV format.

Tables Panel: it provides you with a high level of customization and with various options.
As you can see, the possibilities for working with tables are almost unlimited. All of this is possible again thanks to the power of Fireworks and the talented extension developers that give so much to the community!

5. Placeholder Auto Shape

If you use Fireworks extensively for wireframing, you are no doubt aware of the frustration of maintaining placeholder boxes and the necessary information contained within. I usually draw gray boxes for my images and include a descriptive label, the height and width co-ordinates within the box. The problem is, this metadata often needs to change with the size and position of the placeholder. Updating this information manually and re-aligning the text so that it is always in the center can be a pain.
John Dunning to the rescue again, with his Placeholder auto shape extension.
To create an image placeholder, pick this auto shape from the Tools panel (instead of the standard Rectangle tool), and it will draw a box with the necessary data already filled in. Every time you resize and reposition the placeholder, the coordinates will automatically update as necessary.

Placeholder auto shape: Dynamic placeholders that always stay up-to-date.
It’s interesting to mention that the Placeholder tool can be found in the Tools panel. But also, this extension installs a Placeholder auto shape, which can be found in the Auto Shapes panel. Both the tool and the auto shape do the same thing, and the difference between their use is very minor (you can select the Placeholder tool and drag it to any size on the canvas, while the Placeholder auto shape should be first dragged and dropped to the canvas, and then resized).
As you can see in the screenshot above, you can decide what information gets displayed in the placeholder. The choice is between showing a custom label for the placeholder (like “logo”, “screenshot”, “banner”, etc.), and the coordinate of the image (height, width, x & y coordinates). Clicking the crosshairs in the middle of the placeholder opens up a dialog box where you can turn these details on or off. You can also change the size and position of the paceholder precisely right from within this dialog box and change (or remove) the fill color.

Placeholder auto shape: choose what content you want on the placeholder.
Useful tip: If you have multiple placeholder shapes in your file, you can select them and resize them all at the same time. Neat!

6. Orange Commands

If there’s anything I would call a Swiss Army Knife for Fireworks, it would have to be Orange Commands by Ale Muñoz.
Unlike every other extension in this roundup that focuses on a single task or a group of tasks, Orange Commands aim to bring efficiency to tasks across your entire Fireworks workflow. From aligning objects, to setting guides around selected objects, to combining two text objects into one — Orange Commands are a collection of small tasks that you would typically perform through a series of steps. And what’s more, they’re not only free, but are also open-source, letting anyone with enough know-how to tweak and extend them even further!
Here are a few of my favorite commands from the 100+ that this extension comes with:

• Most designers don’t know this, but there is a way to change the alpha / opacity of a stroke in Fireworks CS5.1 as well as earlier versions. Unfortunately, to change it you will need to go into the “Edit Stroke” panel and then inside “Advanced” to get to this control — the feature is pretty much buried. Orange Commands bring this ability right up to a single click with the Stroke Alpha set of commands under Alpha. (Using Fireworks CS6? You’re lucky! A few new options were added in the Properties panel, which include independent control over the opacity of both stroke and fill!)
  
• If you like to number your pages so they appear in a specific sequence after being exported, just set them in the right order in the Pages panel. Then hit Numberize under Pages, which adds a number in front of the name for each page. Need to change the order? Reorganize the pages and hit the command again. There is also a De-Numberize command that will let you get rid of those numbers, if needed.
• Need to swap the position of two objects in your design? Select them and hit the Swap command under Position. Easy!
• Fireworks has shortcuts for aligning multiple objects to each other, but you still need the Align panel if you want to align something in reference to the canvas. That’s where the Center on canvas set of commands under Align comes into play.
• You can use the Space horizontal and Space vertical commands under Align to distribute selected objects with a specified distance between them.

This is just a small part of what Orange Commands can do. You can check out the detailed documentation for more details on what’s available.
Since Fireworks lets you assign keyboard shortcuts to all menu items, you can assign them also to your favorite commands, converting any series of steps into single, keyboard-driven actions. Although I have a few favorite ones, virtually every one of the commands has contributed to “shaving” precious seconds off my workflow, which amount to hours saved every month.
Useful tip: Did you know that Orange Commands come with their own keyboard shortcut sets that pair perfectly with the commands themselves? If you’d like to use one of them, simply copy the shortcut XML files to the “Keyboard Shortcuts” folder (see “Installation” for reference), restart Fireworks, and then select one of the “+ Extras” sets. Of course, you can can further customize these shortcut sets, as well.

7. QuickFire Command

With the large number of useful extensions available for Fireworks, it doesn’t take very long before your “Commands” menu becomes overcrowded with items. At this point it could be really difficult to get to the command you need right at that moment. On the other hand, remembering countless shortcuts for quick access of all the commands, panels and menu items in Fireworks can also be difficult.
And that’s where QuickFire comes into play. This extension is again from John Dunning, and it is a fitting tribute to the power and flexibility of Fireworks. QuickFire is similar to Quicksilver on Mac OS and Launchy or Colibri on Windows. It is a super simple, keyboard-driven interface for getting to the Fireworks command you need, without all the slow digging through various menus and sub-menus.
Once you’ve installed QuickFire, assign a keyboard shortcut to it and restart Fireworks. Then, when you hit the QuickFire key combination, you can start typing what you need. It will instantly list everything that matches what you are typing, with various icons to easily differentiate between panels, commands, auto shapes, pages and more! The most relevant item will be at the top of the list and ready to be run once you press Enter. The icing on the cake is that QuickFire works with everything in Fireworks, and not only the custom commands that you have installed.

QuickFire: access any command, panel and auto shape in your Fireworks set-up with a few keystrokes.
Let me take a real-life example to demonstrate how I use the QuickFire panel to increase my productivity in Fireworks on a day-to-day basis. Let’s say I need three lines that I need to align to each other, position them with even spaces from one another and add vertical shadows to each one. Here’s how I do it (without ever touching the mouse) once I’ve drawn and selected one of the lines:

QuickFire: lightning fast editing workflow.
Useful tip: When you open QuickFire and search for a specific command in the list, pressing Enter normally executes the selected command and closes the dialog, while pressing Shift + Enter runs the selected command but keeps QuickFire open — this will allow you to run several commands in a row (and save a few more keystrokes).
QuickFire offers many more productivity enhancements. It will let you:

• Open panels quickly.
• Insert Symbols from the Common Library.
• Insert Auto Shapes.
• Access standard Fireworks menu commands.
• Apply textures and patterns to selected objects.
• Open recent files or create new files from templates.
• Select layers and pages, and also move or copy selected objects across layers and pages.

Again, you can check the detailed description of QuickFire and its common uses on John’s website.

Conclusion

As you have probably already guessed, I’m a huge fan of extensions and use them quite regularly in my design workflow with Adobe Fireworks. The list of extensions I use on a daily basis is much longer than what I can include in just one article — what’s covered here are just a few of them that address critical areas in Fireworks, to make a designer’s life a bit easier. And please note: in a possible follow-up to this article, I’ll try to review in detail a few more extensions that address several more specific areas within Fireworks.
Also, with the sheer number of extensions available for Fireworks, I’ve only scratched the surface of what’s possible. If you feel I missed any important ones, do let me know in the comments — I would love to learn about those and try experimenting with them myself.

Developing Responsive Designs With Opera Mobile Emulator

Back in 2009, when coding version 10 of Opera Mobile, my Opera colleagues decided to tune the Opera Mobile build machine so that it would churn out builds not only for common mobile platforms, but for Windows and Linux as well. Originally intended for quality assurance and testing, these desktop builds proved also to be useful for Web development; being able to use Opera Mobile on a desktop machine took away the need to do all testing on a phone, and the mobile browser window was suddenly only an Alt/Command + Tab away from our text editor — exciting!
So, we decided to iron out the wrinkly bits, added a Mac build channel, and turned it into a publicly available developer tool, called Opera Mobile Emulator. Coming in at a fairly small size, Opera Mobile Emulator can be downloaded for free from Opera’s developer website or from the Mac App Store, and installing it is straightforward. The engine and UI are exactly the same as when you run Opera Mobile on a phone, while desktop-specific hooks, such as the profile selector, keyboard shortcuts and command-line flags, give you a bit of extra debugging power.

Basic Usage

When launching the emulator, you are greeted with a profile selector. Using the profiles on the left side, you can launch one or more Opera Mobile instances with device-specific settings. For example, selecting the “HTC Desire” profile will launch Opera Mobile in WVGA (480 × 800 pixels) portrait mode with a zoom level of 150%, just like it would on an actual HTC Desire phone. If you select a different profile, a separate Opera Mobile instance will launch with settings to match that profile.

Pages can be loaded by typing in the URL in the address bar (obviously!), or else by dragging and dropping any file or URL onto the browser window. In-page navigation is similarly easy: clicks match to taps, and you can use pinch gestures on the trackpad to zoom in and out of pages. If the latter does not work on your machine, you can zoom by using the scroll wheel on your mouse or by clicking the “+” and “-” overlays that appear in the browser window when you pan around.
You’ll notice that spawned Opera Mobile instances can be resized from all sides, and the loaded website’s layout will alter accordingly. This is, of course, different from the experience on devices where the browser is a full-screen app, but it comes in very handy when you want to test how your viewport meta tag or media query settings work at different screen sizes. In fact, resizing an Opera Mobile instance to test different layouts will give you a more realistic feel of viewport behavior than doing the same on a desktop browser, because the latter will not respond to different viewport settings, and so viewport-related bugs might get overlooked.

It’s worth noting here that the device-width media query in Opera Mobile Emulator is not querying the width of the computer screen, but rather the width of the launched Opera Mobile instance. Also, if you’re only interested in checking the differences between portrait and landscape orientation, you can use the Alt/Option + R key combo, or click on the “Rotate screen” button in the bottom-right corner.
Of course, everyone’s workflow is different, and I’m here to help make yours more efficient, not dictate to you. Obviously, nothing beats testing on actual devices, because you’ll get an accurate idea of the feel of your website in a mobile setting, on a device with limited CPU and so on. However, actual device testing is finicky, so I prefer to leave it until my project has reached at least alpha quality, preferring a rapid (1) develop, (2) test with Opera Mobile Emulator, (3) debug iteration while getting the project off the ground.

Advanced Launch Options

On the right side of the profile selector, you’ll find a number of profile options.
The “Resolution” drop-down menu gives you a choice between a number of common screen sizes and orientations, with the option to add your own as well. The “Pixel Density” drop-down menu is a list of PPI values: for the HTC Desire, this is 252, which will result in a 150% default zoom and a devicePixelRatio of 1.5 when launched. Selecting a PPI of, for example, 285, on the other hand, will result in a zoom level of 200% and a corresponding devicePixelRatio of 2.
In short, this combination of resolution and pixel density values will differ per profile and affect how the viewport behaves, as well as determine which media queries are applied.
Finally, the “Input” drop-down menu allows you to choose between three input modes to which certain UI and UA changes are tied:

• “Touch”
  This option will launch Opera Mobile with a UI that is optimized for use on touchscreen phones, and will give it a UA string with Opera Mobi in it.
• “Keypad”
  This option will launch Opera Mobile with a UI and shortcut keys optimized for non-touchscreen phones — for the developer’s convenience, mouse clicks, panning and zoom gestures will still work, though. The UA string will contain Opera Mobi.
• “Tablet”
  This option will launch Opera Mobile with a tablet-optimized UI. In this case, the UA string will contain Opera Tablet.

Launching With Arguments

The last option in the profile selector is the Arguments field, which is arguably the most powerful one of the bunch. In it, you can type a number of arguments or flags, which will be used to launch a new Opera Mobile instance. For example, -displaysize 320 × 480 -url www.opera.com will launch Opera Mobile with a window size of 320 × 480 pixels and will load www.opera.com.
These flags also work from the command line. By default, the Opera Mobile Emulator is executable from the following locations:

• Mac
  /Applications/Opera Mobile Emulator.app/Contents/Resources/Opera Mobile.app/Contents/MacOS/
• Windows
  C:\Program Files\Opera Mobile Emulator\
• Linux
  /usr/bin/

Repeating our last example would then look as follows:

• Mac
  ./Opera\ Mobile -displaysize 320x480 -url www.opera.com
• Windows
  OperaMobileEmu.exe -displaysize 320x480 -url www.opera.com
• Linux
  operamobile -displaysize 320x480 -url www.opera.com

Two arguments that come in very handy when testing responsive designs are -displayzoom and -monitorppi:

• -displayzoom
  This is useful if you want to reduce the size that an Opera Mobile instance takes up on your desktop, while preserving its reported width and height values, devicePixelRatio and so on. In other words, if you want to try out the “Samsung Galaxy Note” profile, which results in a browser with a size of 800 × 1280 pixels, then you can add a -displayzoom 50 flag to launch it with a quarter-sized surface of 400 × 640 pixels — a much better match for the 900-pixel-high screen of, for instance, a MacBook Air.
• -monitorppi
  This, on the other hand, allows you to set the PPI of your computer monitor (for example, -monitorppi 128 for a 13-inch MacBook Air) and launch an Opera Mobile instance with a zoom factor adjusted to match the physical dimensions of the profiled phone’s screen. This will give you a better idea of how big, say, the clickable areas really will be when the page loads on an actual device, but remember that the PPI you get on the screen won’t be representative of what you’ll see on the device.

Note that -displayzoom and -monitorppi are mutually exclusive and thus cannot be used together.
For a full list of possible arguments, click on “Help” in the profile selector, or run the emulator from the command line with the --help argument.

In-Browser Settings

One thing to keep in mind is that, even when launching an Opera Mobile instance with an Android profile, the UA might be different. You can change the UA string after launching Opera Mobile by clicking on the red “O” and going to Settings → Advanced → User Agent, where you can choose between five options, including “Android.” If you need to set a completely custom UA string, go to opera:config in the URL field and search for “Custom User-Agent.” In this field, you can set a custom UA string, which will override any other set UA string.
Other settings worth highlighting are the options for clearing the cookies, cache and shared locations, found under Settings → Privacy, and the toggle to turn off the on-screen keyboard, found under Settings → Advanced → Opera keyboard.

Connecting To Opera Dragonfly For Advanced Debugging

In any Web project, there is a point when you absolutely need to look under the hood of the browser to see what precisely is going on. That’s why Opera Mobile Emulator can talk to Opera Dragonfly, Opera’s built-in Web debugger.

You can easily set this up as follows:

1. Download, install and run Opera for desktop.
2. Load a page in Opera for desktop, right-click anywhere, and click “Inspect Element” to launch Opera Dragonfly.
3. In Opera Dragonfly, click on the “Remote debug configuration” button (third button in the top right), and click “Apply” (the default settings are fine)
4. Then, open Opera Mobile Emulator and launch an Opera Mobile instance.
5. Go to opera:debug in Opera Mobile, and click “Connect” (the default settings are fine)
6. You are now connected and can load any page you want to investigate in Opera Mobile. Be sure to select the correct debugging context (fourth button in the top right) in Opera Dragonfly when you change tabs.

Under Opera Dragonfly’s Network → Network log, you can, for instance, inspect whether your media queries are written correctly and whether image files referenced in the style sheet are not unnecessarily downloaded to devices with small screen sizes. If done right, you should see them only pop up towards the bottom of the waterfall chart when expanding the Opera Mobile browser window’s dimensions.
Also worth noting are the features under Network → Network options. There is a checkbox to disable all caching (which you may want to do when testing), and there is an option to set global header overrides — this is particularly handy when you rely on browser sniffing (careful!) or particular headers to optimize your content for, and you want to test out different header variations without opening up different browsers.
For an overview of other Opera Dragonfly features, including those related to inspecting the DOM and scripts, CSS profiling, picking colors, and using the command line, I recommend looking at the Opera Dragonfly documentation.
So, that’s a wrap! I hope you’ve enjoyed this introduction to how Opera Mobile Emulator can help you optimize your responsive designs. Try it out for yourself, and let us know what you think and how you want to see it improved.