Archive for September, 2011

How To Make An eBook





 



 


Making an eBook is easy, regardless of your coding experience. This is good, because 99.9% of your time should be spent on writing and getting your book out there, rather than on technology.

EPUB And Kindle

Any electronic book can be called an eBook, but because over 90% of all eBooks are read on Amazon’s Kindle, Apple’s iOS devices (iPad, iPhone and iPod) and the Barnes & Noble Nook, I’ll focus on the formats for those platforms:

  1. EPUB
    This is an open standard adopted by Apple (iOS), Barnes & Noble (Nook) and many other makers of eBook readers (such as Sony). Thankfully, Amazon has said that its next Kindle will also support EPUB, but the newest version of Kindle doesn’t support it. (Update: Unfortunately, Amazon has decided NOT to support EPUB in the next version of their Kindle.)
  2. Kindle
    This is a proprietary format that Amazon uses for its Kindle, which is a modification of the Mobipocket format.
  3. PDF
    PDF is inherently made for print and doesn’t display well on digital devices. But if you really need to get data out to an iOS or Android device now, then it’s a useful format. We’ll have to wait one more generation for the Kindle to support it. (Update: Kindle DOES support PDF.)

Aside to geeks: The current version of EPUB is based on XHTML 1.1, which was officially proposed in 1999. That was the year when Internet Explorer 5.0 was released and grabbed over 50% of browser market share from Netscape Navigator. This is great because XHTML is an open standard that many developers know; unfortunately, it’s very old.

What Kind Of Book Makes The Best eBook?

EPUB was truly designed to display text, possibly with some inline images. While creating an EPUB illustrated children’s book, comic book, travel book or cookbook is possible, it’s a lot more work and doesn’t work very consistently across platforms. A good rule of thumb is that eBooks are best for books with a lot of words (think New York Times bestseller list).

How a picture book should look and how it looks in EPUB. Novels don’t have this problem because images don’t matter.
eBooks don’t handle pictures well.

When deciding whether your book is a good candidate for an eBook, keep in mind that the “killer feature� of eBooks, surprisingly, is their ability to increase in font size. This means that every book becomes a large-type book, which is why baby-boomers have driven the adoption of digital books over the past few years.

Also keep in mind that more than half of all eBook-reading devices are black and white, which is another reason to steer clear of picture-based books.

These demographics and format limitations will change over time. But for now, my recommendation is to make your first eBook a text-based one.

Aside to geeks: If you’re interested in making a picture book for iOS devices and aren’t afraid of code, check out Elizabeth Castro’s excellent guide on how to code a fixed-layout EPUB file.

Making Your First eBook

The easiest way to make an eBook is to outsource it. A number of services, such as Lulu and Smashwords, will translate your Word document into an EPUB fairly inexpensively. These services have relationships with Amazon and Apple (as well as other digital bookstores) and will not only create your digital eBook but submit it to these bookstores for a small fee. For more information on choosing a service, see Christine Mark’s guide on choosing an EPUB publisher.

If you want to sell your book only in Amazon’s Kindle Store, you can convert your Word file for free by submitting it yourself to Amazon’s Kindle Direct Publishing (KDP). Creating an account is free, and the service is easy to use.

If you’re mostly interested in Apple’s eco-system, then you probably already have a copy of Pages on your machine (if not, you can get it for $20). Pages is Apple’s version of Microsoft Word and has a simple and effective EPUB export option. To create your book, simply make the first page your book’s cover, use section breaks between chapters, and then select FileExportEPUB.

Using Pages to make an EPUB book
In my experience, Pages’ EPUB exporting is rock-solid.

If you don’t have a Mac or want to convert to more formats, your best choice of software is Calibre. Calibre is relatively easy to use and does a good job of converting from many standard formats (including Microsoft Word) to the top eBook formats (EPUB and the Kindle’s Mobipocket format). You can download Calibre for free. Alternatively, if you need to convert only to Kindle, Amazon provides free conversion software called Kindlegen.

Another common choice for building eBooks is InDesign, but I’d recommend that you steer clear from it until you have a few eBooks under your belt. Even though it technically can export to EPUB and Kindle formats, it’s a bit clunky and adds a lot of crud. More importantly, InDesign was built from the ground up to handle print, so it encourages you to think in print metaphors, which don’t always apply to eBooks and which will lead to layout problems. In our experience, programming your own EPUBs by hand is easier. Even still, I don’t recommend it…

Coding By Hand

If everything said above sounds too easy and you’re looking for a challenge, another option is to code your EPUB by hand. This feels like programming in a time warp. EPUB is built on such an outdated version of XHTML that half the time you’ll be reminding yourself that everything in the EPUB must be declared in the manifest file (really?), while the other half of the time you’ll be recalling how you used to program HTML in the ’90s.

If you’re still not convinced and have a pressing desire to learn how to code an EPUB by hand, you have two options:

  1. Grab an EPUB from the Web that doesn’t have any DRM in it. Change the extension from .epub to .zip and unZip it (you may need to use Stuffit Expander if you’re on a Mac). Now you’re free to hack away at the file and see what happens. Keep in mind that every file in the EPUB must be in the manifest (package.opf). There are a couple of books you can pick apart to get started (including my best-selling children’s book, which you can get for free on my website or buy from the Apple bookstore to show your love).
  2. Check out “EPUB Straight to the Point� by Elizabeth Castro, and she’ll walk you through it.


The typical structure of an EPUB file.

The container.xml file, MIME type, and folder structure are pretty standard for all books. Images can be in PNG, JPEG, GIF or SVG format. I usually stick with PNG, with JPEG as a fall-back.

The epb.ncx file is the table of contents and is pretty straightforward.

The epb.opf file is the manifest where you set the meta data (title, author, ISBN, etc.), but it’s also where every other file in the EPUB is declared. Every image, HTML or CSS file must be listed here. It’s a pain in the butt and one reason why I personally avoid hand-coding EPUB if possible.

The CSS is pretty much what you’d expect, although a very limited subset.

The HTML is also very straightforward. Below is a sample of the HTML that Apple Pages spit out for my book. As you can see, it’s not very pretty (<div class="s6"> instead of a simple <h1>), but it’s functional and easy to understand.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>1 Moving Day | Ghost Hunters - Book 1 The Haunted House</title>

<link rel="stylesheet" href="css/book.css" type="text/css"/>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/><meta name="EPB-UUID" content="3B0A6B89-F890-4843-AA2A-01C27CE8D573"/>

</head>

<body>

<div style="white-space:pre-wrap">

<div>CHAPTER 1</div>

<div>Samantha and Dylan looked eagerly out the car window. Today was the day that they were moving to their new house. They were both excited, but sometimes a look of worry would cross Sam’s face.</div>

</div>

</body>

</html>

If you are creating your own EPUB, be sure to validate it with Threepress’ validator, and consider using Calibre to convert your EPUB to a Kindle-friendly format.

The Future Of EPUB

EPUB 3.0 holds a lot of promise and includes the following changes (many of which Apple has already adopted):

  • Support for HTML5 (yay!) and CSS 2.1;
  • Various structural changes to file names and locations;
  • Support for embedded fonts, audio and video, as well as media overlays and triggers and scripts.

Unfortunately, EPUB 3.0 doesn’t support illustrated books, so we can expect to see some fragmentation as Apple and other vendors innovate around these limitations.


Olivia was one of the first fixed-layout EPUB books released by Apple. Also pictured is the bestselling fixed-layout EPUB book The Girl Who Wouldn’t Wash Her Hands.

With the next version of Kindle supporting EPUB, we’ll see over the next year or two whether we wind up with an “Apple EPUB� and an “Amazon EPUB,� or a “pure� EPUB format. Ultimately, the answer will depend on how quickly the International Digital Publishing Forum (IDPF) can finalize its standards.

Of course, all of this speculation about the future is somewhat theoretical. If you have a book to publish now, my suggestion is don’t worry about the future; just dive right in and make it. And let me know in the comments how it turned out and what worked best for you.

Other Resources

You may be interested in the following articles and related resources:

(al)


© Jason Mark for Smashing Magazine, 2011.


Web Design & Development Podcasts


  

Not long ago we had a post that discussed the role that podcasts have been playing in the design field. After which we were asked for a post that focused on more web design and development related podcasts for our readers. Something of a proverbial playlist of shows that are currently helping to shape the fields from the virtual airwaves. So here we are!

We scoured the bountiful podcast offerings that the design and development community have on offer these days, and found some great shows to point our readers towards. Naturally, every one has different tastes, so we tried to assemble a nice mix of styles and show formats so that there is something that every one will find appealing in this list.

Take a look down through all of these shows and see if any of the descriptions trip your trigger. Then follow the links to their sites, or the images to their iTunes feed to check out the show for yourself.

On With the Shows

There are hours upon hours of web design and development podcasts gathered for you here. From instructional to conversational to informative, the spectrum they span is as impressive as the shows themselves. Enjoy.

The Big Web Show

The Big Web Show features special guests and topics like web publishing, art direction, content strategy, typography, web technology, and more. It’s everything web that matters. Hosted by Dan Benjamin & Jeffrey Zeldman.

This is one of the more popular podcasts in the showcase, and as such, you have probably already heard of it. However, the list would not have felt complete without it.

PageBreak Podcast

PageBreak is a design, business and marketing-themed podcast hosted by Liz Andrade and Niki Brown. The main goal of the club is to build a strong online community of designers, developers, freelancer (like ourselves) and to encourage people to read more and share their ideas and opinions!

If the fantastic insights weren’t enough, the back and forth between the hosts gives one a sense of being in on the conversation…in a completely passive manner, but still, immersed in the discussion.

The Web Ahead

A weekly podcast about changing technologies and the future of the web, discussing HTML5, mobile, responsive design, iOS, Android, and more. Hosted by Jen Simmons.

This is a brand new podcast that is just getting going, but with the backing of the 5by5 team (responsible for The Big Web Show among others) and the fabulous host it has a promising future for sure.

Web Axe – Practical Web Design Accessibility Tips

Practical web accessibility tips. Blog and podcast for programmers, coders, or anyone else interested in techniques for web accessibility (see WAI, Section 508, WebAIM).

Only latest 3 are available through iTunes, but others are available via the website, so never fear. Plenty of listening to catch up on awaits.

Design Festival Podcast

Practical web design tips, strategies, and inspiration. We love exploring usability, typography, and new trends in web design. Part of the SitePoint Network.

Fairly new show, with only the most current episodes are available through iTunes while the rest are posted on the website

ExplicitWeb Design & Development

ExplicitWeb is a regularly recorded podcast all about the front lines of website design and development. These typically half-hour shows are made up of hosts Rob Hawkes, Hannah Wolfe and John O’Nolan discussing the finer points of the industry, as well as sharing helpful tips and information for the savvy web professional.

Like the title states, this is an explicit show. However, it does offer a comprehensive look at the design and development industries that resonates with a number of fans. Might be just the show you are looking for.

Weekly Web Tools

Tips and Reviews of Web Tools for the Do it yourself Webmaster.

A short and sweet show dedicated to letting the community know about resources that are available at our disposal.

The ATX Web Show

The ATX Web Show is a podcast all about the web design and development community in Austin, TX. Our city is consistently rated as one of the top cities in America and our mission is to highlight what is coming out of the web community here. From apps, to design, to startups, to indie developers; we dive into the never-ending stream of talented web creators. Hosted by Dave Rupert and his co-hosts Trent Walton and Reagan Ray

While focused mainly on what is happening in Austin, the show still acts as a good resource for all members of the design and development communities. Certainly worth a listen, might just be your cup of tea.

Web Directions Podcast

Sessions from the Web Directions conference series. Sessions are © Web Directions and the respective speakers. See individual sessions for license details.

Each annual conference shared via podcast, those who have not been able to attend do not have to miss out.

Frederick Weiss – Keeping the Web in Check

I am a strategist with over 12 years of web development experience. I have a passion for typography, clarity, detail, and general UI best practices. I PLAN, DESIGN, and BUILD web sites with results.

The show is less than a year old, but seems to be building on a solid foundation.

Herding Code

A weekly discussion featuring K. Scott Allen (odetocode.com), Kevin Dente, Scott Koon (lazycoder.com), and Jon Galloway.

With over a hundred episodes, this weekly roundtable discussion is a virtual goldmine of development information.

Web Design 1

This podcast features live screencasted lessons in the use of Fireworks and Dreamweaver as part of the Web Design 1 class at New Hartford High School in New Hartford, NY, USA. Skills taught here specific for students enrolled in the class but anyone is free to subscribe and learn how to make great looking web graphics and websites!

If it is the instructional (Fireworks and Dreamweaver specific) that you are seeking in your design podcast playlist, then this is certainly the one for you. Loads of content to check out.

UXpod – User Experience Podcast

A free-ranging set of discussions on matters of interest to people involved in user experience design, website design, and usability in general.

With years of shows in the archives, this podcast is a wonderful resource from the UX side of the field.

Art Zen Podcast

A podcast about art, design and the web.

Again, while not always about the web and design, there are some episodes that web professionals would be amiss to…well, miss.

The Digital Life

A candid look at digital technology from the people trusted by tech giants like Apple, Microsoft and Oracle, major organizations like AstraZeneca, General Motors and BarackObama.com, and hundreds of hungry start-ups.

An interesting and explicit podcast that takes on living in this digital age and the technology that is driving it.

Design Critique: Products for People

Design Critique encourages usable product designs for a better customer experience. Using principles and experience from our careers helping clients and employers create usable products, we critique software and hardware based on long-term experience with them in our own lives. We also interview our peers in the user experience-related fields of User-Centered Design (UCD), human-computer interaction (HCI), usability engineering, information architecture, technical communication, interaction design, customer research, and more! All while maintaining a light-hearted spirit of inquiry about how we can improve the world by designing products that serve people better.

While not strictly web design related, there is a lot of useful usability and user focused design content that lands with designers across the board. Given that it is all about building a better customer experience, we can all learn something from these poignant dissections.

(rb)


Authentic Jobs turns six

On September 25, Authentic Jobs turned six (I’ve been a listing partner for almost five years). To celebrate that sixth birthday, this week you can save quite a bit when posting a job listing:

But that’s not all. As part of the birthday celebration there is also a campaign to raise 600 000 Ethiopian Birr (≈ USD 35 000) for charity:water. The goal of the campaign is to give the people of Northern Ethiopia access to clean water. You’ll find more info about the campaign on the Authentic Jobs charity:water Campaign 2011 site.

Read full post

Posted in , .

Copyright © Roger Johansson



Developing WordPress Locally With MAMP





 



 


Local development refers to the process of building a website or Web application from the comfort of a virtual server, and not needing to be connected to the Internet in order to run PHP and MySQL or even to test a contact form. One of the most annoying parts of development, at least for me, is the constant cycle of edit, save, upload and refresh, which, depending on bandwidth and traffic, can turn a menial task into a nightmare.

With application platforms such as WordPress, which require a server back end to work, you would normally be constrained to develop on a live server, with the headaches that go along with that. MAMP and its Windows counterpart, WAMP, are tools that allow you to locally develop applications that require a server on the back end.

The Local Server

MAMP, which stands for Macintosh, Apache, MySQL and PHP, is an application that allows you to install a local server-type environment in order to construct websites that would normally require you be on a live server somewhere. Ever opened a contact form in a browser from your desktop and wondered why it doesn’t work? The server-side components cannot operate without (in this case) the PHP back end, and this is where MAMP comes in. By installing this application, we can have a virtual server locally as our development sandbox. It is worth noting, from a portability standpoint, that this component can be run only from your desktop environment and cannot be installed on a USB drive. With that all settled, let’s get to it.

In order to be able to work with MAMP, we must first obtain it. So, head over to the project page and download the disc image. Double-click to begin the installation, and you will be presented with a choice:

MAMP Installation Screen
MAMP and MAMP Pro are on the installation disc image.

Both MAMP and MAMP Pro come in the same download. You need to install only one, and for most scenarios, MAMP is more than adequate. The pro version costs $59.00 USD and offers more options, and you can compare the two versions for yourself.

Drag the MAMP folder onto the “Applicationâ€� shortcut, and the installation will be underway. Once it’s completed, feel free to eject the disc image. Open up your “Applicationsâ€� folder, and locate the new MAMP directory. Inside you’ll find MAMP.app, so — you guessed it — open it up. The program should start right away and open up your default browser, pointing to the start page. Congratulations, you now have a local server!

Preferences

From the main MAMP app screen, you will notice a “Preferences� button. Feel free to click on it to view the few options available.

MAMP App Screen
The MAMP app.

1. Start/Stop

From here, you have the option to tell MAMP when to start and stop the servers. If you choose to not start the servers automatically, then you will need to explicitly tell them to run each time you open the app. You may also set your home page, which defaults to the MAMP start screen, giving you quick access to phpMyAdmin; but you may set it to something like a WordPress directory.

MAMP Start/Stop Screen
Configuring the server.

2. Ports

In the “Ports� tab, the default Apache port will usually be 8888, and the default MySQL port will be 8889. I, for one, do not change these because they do not interfere with any of my other settings and do not require me to enter my password every time I start and stop the servers. You must include the port number in your URL this way; so, it would be localhost:8888/. To avoid this, you could change the ports to what general Web servers operate on: ports 80 and 3306. This will allow your URL to simply be localhost/; but you will most likely need to enter your password when switching the servers on and off. Another factor to consider is whether you are installing WordPress “multisite�; if you are, then you are required to set the ports to the default Apache and SQL ports of 80 and 3306, respectively.

MAMP ports setup
Setting up MAMP ports.

3. PHP

The “PHP� tab allows you to choose which version of PHP to run in the set-up. It will default to 5.3, and I do not change this because most applications I run either require PHP 5.3 or do not care. Just know that this option is available if you need it to run something such as legacy software.

MAMP PHP setup
Setting up the MAMP PHP version.

4. Apache

The “Apache� tab is one that I like to mess with, to change the document root directory. The root is where all of your websites and directories will be stored and accessed by MAMP, and it defaults to /Applications/MAMP/htdocs, which I find annoying to get to. So, I change mine to my sites folder. From the MAMP app window, click on “Preferences,� then on “Apache.� You can click “Select� and then set the installation to use the location of your choice for your websites. Again, I set mine to the sites folder for easier access.

MAMP Apache setup
Setting up MAMP Apache.

Installing WordPress

Now it is time to install WordPress. Head to the WordPress website and download the latest version, 3.2 as of this writing. Unzip the folder, and then simply drag it to your sites folder, (or wherever you chose to set the document root for MAMP). WordPress requires PHP and MySQL to operate, which is why we needed MAMP to develop locally; so, we now need need to make a database. Fear not: it is simple!

Open the MAMP start page — you can access it via the button in the main app — and click on “phpMyAdminâ€� in the top menu. Creating a new database is as simple as typing a name in the field and hitting the “Createâ€� button. You can see below that I am creating a new database aptly named “wordpress.â€� Once that’s done, feel free to close phpMyAdmin, and navigate to the WordPress directory in your document root.

Creating the Database
Simply type a name for the database, and hit “Create.�

Basic Configuration

Find the file named wp-config-sample.php, and open it in your favorite text editor. We have to configure a few settings. The default values for MAMP installations make this really easy to fill out, so follow the table below to see what to type where:

Variable Value
DB_NAME wordpress
DB_USER root
DB_PASSWORD root

Editing Variables
Change the values of the variables to match the table above.

You should not need to alter anything else in this file, at least for now. You could add in the unique keys and salts, but I recommend doing that once you move the website into production.

Save and close wp-config-sample.php. We’re nearly done. Rename this file to wp-config.php — removing the -sample — and we are ready to complete the installation. You should now be able to point your browser to http://localhost:8888/wordpress and see the WordPress installation screen. Enter in your basic data and install the app. You are now ready to log into the admin section and get going!

WordPress Install Screen
Enter your information… but choose a stronger password.

Permalinks

Always follow WordPress’ permalink structure. In order for you to get these “pretty URLs,� Apache will need mod_rewrite to update your .htaccess file, so let’s make sure that is set up.

The file we have to edit is httpd.conf, and you can find it in Applications → MAMP → conf → apache → /. Open this file, and search for a line like this:

LoadModule rewrite_module modules/mod_rewrite.so

Note that a hash (#) may or may not be in front of it. The hash indicates a comment, and if you see it, you must remove it to allow the mod_rewrite module to load. If the line is not commented out, then congratulations: you are already done! Close the file, and permalinks should now work in your local installation.

The Final Countdown

By now, a local server set up with WordPress should be installed and running. The remaining steps are both short and crucial to sharing your creation with the Internet. All that remains is to transfer your local accomplishments to a global environment by moving both our WordPress files and our content. So, let’s finish this up!

Going Live

The time has finally arrived. So, how do you bring your WordPress creation to the live server? Well, we have two options.

Just Grab the Content

A sometimes simpler way, with only a few steps, is to just grab all of your content. This is easiest if WordPress is already installed and you just need to import your theme and content. To do this, head to the admin dashboard, to the “Tools� section in the sidebar. Click on “Export,� and choose “All content.� This will export a file that you can then import into your new installation.

WordPress Content Export
Exporting WordPress content.

You can now upload your WordPress theme files to the live location. Head to the “Tools� section of the dashboard again, and choose “Import.� Simply point to the file that you just exported, and bring in your content.

Bringing In Everything

I use this method if I have done everything locally from the ground up. I’ll upload my entire local WordPress directory (in this case, http://localhost:8888/wordpress) to the live server and then grab the database file and transfer that from local to live as well.

Because you could certainly build nearly the entire website in your development environment, bear in mind that WordPress uses absolute paths for URLs. So, every image and link will be prepended with http://localhost:8888/ (depending on your set-up). We need a way to alter this to fit the live website. We have a few options.

1. Export, Search and Replace

Using this method, we export our local database as a text file and run a “Find and replace� on the text to replace all occurrences of the localhost URL with the production URL.

WordPress Database Export
Exporting the WordPress database (click image for full-size view).

Begin by opening phpMyAdmin and clicking on your WordPress database on the left. Click on the “Export� tab in the top menu, and be sure to choose “Select all� when choosing which tables to export. At the bottom, check the box to “Save as file,� and then hit “Go.� Open the resulting file in your favorite text editor, and simply run a “Find and replace� to replace all instances of http://localhost:8888/wordpress with http://www.YOUR_SITE_URL.com.

Save the edited file, and visit phpMyAdmin on your live server. Again, click on your WordPress database, and this time choose the “Import� option from the top menu, and browse for your newly edited file. Once it successfully imports, upload your WordPress directory to the live server. If WordPress is already installed, simply upload your theme, any plug-ins you have installed locally and the contents of your wp-content/uploads folder; or else, upload the entire local directory to your live website’s root. Once that’s uploaded, be sure you can log into wp-admin, and browse around to make sure everything made it in. Update your permalink’s structure to something friendlier, and you are off!

2. Using SQL Queries

A second way to alter URL paths is to first bring everything into the live server version, and then use a few SQL queries to find and replace the necessary strings. Open phpMyAdmin on your local server, and export the database, again making sure to select all tables and to save it as a file. Go to your live server, and import the .sql file that you just saved. In the top menu, click on the tab for “SQL,â€� whereupon you will see a text area. You will need to enter some query syntax; be sure to replace the URLs in these code fragments with the ones that pertain to your set-up — namely, the localhost’s path and the URL of your new live website.

SQL Query Screen
Running SQL queries to update the URL paths (click image for full-size view).

Replacing WordPress’ base URL path:

UPDATE wp_options SET option_value = replace(option_value, 'http://localhost:8888/wordpress', 'http://www.YOUR_SITE_URL.com') WHERE option_name = 'home' OR option_name = 'siteurl';

Update the GUID that controls WordPress’ translating paths and post locations:

UPDATE wp_posts SET guid = REPLACE (guid, 'http://localhost:8888/wordpress', 'http://www.YOUR_SITE_URL.com');

Update the URL paths in the content:

UPDATE wp_posts SET post_content = REPLACE (post_content, 'http://localhost:8888/wordpress', 'http://www.YOUR_SITE_URL.com');

Update the URLs in the meta data of posts, such as attachments:

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'http://localhost:8888/wordpress','http://www.YOUR_SITE_URL.com');

Final Thoughts

We have managed to install MAMP to set up a local server sandbox to develop in, and we’ve configured and installed a WordPress platform to develop in, saving the need for purely online development tactics.

I hope this has given you some insight into setting up a local environment to work with WordPress. Keep in mind that this is just scratching the surface; WordPress is versatile. Now that we have this faster new way to develop, the next time we’ll get into some custom WordPress configurations.

Helpful Links

You may be interested in these related resources:

(al)


© Ryan Olson for Smashing Magazine, 2011.


You’re Pricing It Wrong: Software Pricing Demystified





 



 


Pricing your own product is always a tricky proposition, and the more critical the price is to your product’s success, the more difficult it is to set. It’s easy to look at another product and say how much you would be willing to pay for it, but how can you know how much people would be willing to pay for yours?

There are no absolute truths or perfect formulas for finding the best price, assuming that the “best price� even exists. Instead, take a structured approach to finding a good starting point, and improve it through feedback and testing. But first, you need to understand what the best price actually is.

Riding the Demand Curve

When we price a product, our goal (assuming we’re running a business) is to maximize revenue. We want sales × price = highest possible value.

Economic theory suggests that as we raise the price, the number of sales will drop. Each intersection of price and number of sales can be plotted on a graph, creating what is called a demand curve.

The sweet point is where the intersection forms the largest rectangle. This rectangle represents the calculation of sales × price, and the biggest rectangle represents the biggest revenue.

This makes sense… until you consider that your clients are people, and people do not often make rational purchasing decisions. In his excellent eBook Don’t Just Roll the Dice, Neil Davidson says (emphasis is mine):

Once you’ve determined what your product is, you need to consider its value to your customers. In the case of the Time Tracker 3000, let’s say that it will save a particular customer, Willhelm, three hours of work and that Willhelm prices his time at $50 an hour. That means that Willhelm should buy the Time Tracker 3000 at any price under $150, assuming he has nothing better to spend his money on.

Of course, this assumes that Willhelm is the rational, decision-making machine that economists love. In fact, Willhelm is a flesh-and-blood, irrational human being who doesn’t price his time and calculate costs and benefits. He has a perceived value of the Time Tracker 3000, which may or may not be linked to its objective value.

Neil goes into much more detail than I can in this article, but to recap quickly: perceived value can be different than objective value, and it can affect sales in ways that the demand curve does not predict. For example, when buying a brand-name product, you are intentionally paying a premium because the perceived value is higher, even if the objective value is the same. Some brands purposely price higher in order to increase the perceived value and thus sell more.

Pricing Higher And Selling More

Taking the fictional issue tracker in Neil’s book:

Back to Willhelm and the Time Tracker 3000. If you want to change how much Willhelm will pay for your product, then changing the product is one option, but only if you can also change his perception too. In fact, it turns out that you can change Willhelm’s perception of your product’s worth without touching the product at all. That’s one of the things marketing is for.

That’s right. You can set a higher price without changing your product just by changing the potential customer’s perception of the product. For example, you could increase perceived value by writing better marketing copy (focusing on the value that you’re providing or the pain that you’re solving). A killer demo can do wonders, as can strong testimonials and well-known partners.

One of the best ways to increase perceived value is to have better visual design — which, not surprisingly, is one the weakest links in marketing for most software developers. A well-known fruit company has become a giant by out-designing its competition, and it’s no coincidence: Apple charges a premium because of the perceived value of its products.

One common way to identify perceived value is to check the competition. Are you selling a WordPress plug-in for newsletter management? Google the keywords to see what else is on the market. If you’re in luck, you’ll be providing the only solution in this space. If not, you’ll have to consider that your clients can use Google just as well as you can and thus take your competitors’ pricing into account.

What do you do if a free product does what your product does? In this case, you have four options:

  1. Demonstrate that your product either is clearly superior or has features unique to it;
  2. Work on creating such differentiators;
  3. Win on marketing;
  4. Provide support.

Providing support is an important differentiator; one of people’s biggest deterrents from using a lesser-known free or cheap product is their concern about ongoing problems and future needs. A commercial product that comes with support will often win over customers who want that assurance that someone will be on the other end of the line should they need it.

Providing support has another benefit in addition to increasing the value of the product: it’s a chance to get real feedback! The feedback you get from support requests will enable you to improve the product and thus sell more (or increase the price) in the future.

A Real-World Example

The start-up that I co-founded, Binpress, is a marketplace for source-code components. One of our components, an import and export rules module for Magento, started out priced very low: $4.99 for a basic license, which is actually the minimum price that we allow.

We noticed that it was getting good traction and that people were looking for this particular functionality and that no good alternatives existed. We suggested to the developer that he raise the price. And he did, in stages:

  • At first, he raised the price to $9.99, which did not affect sales (i.e. the conversion rate stayed the same);
  • He then raised the price to $14.99 — again, the rate of sales remained the same;
  • The price is now $19.99, and sales are slowing down somewhat.

So, the optimized point lies somewhere between $14.99 and $19.99 — more than three times the original price! That is, the developer will generate over three times the revenue simply by optimizing the price and not actually changing the product. Without having tested different points, the developer would still be stuck at $4.99.


The prices should attract your customers, not drive them away. Image Source

Pricing A New Product

So far, I’ve talked about perceived and objective value and maximizing the demand curve. But what about the initial price tag?

When you go about pricing a product, run through the following exercise.

1. Determine the Product’s Objective Value

How much would people pay if they were indeed rational decision-making machines. With software, the calculation can be as simple as:

(Hourly rate × Development time in hours) − Price = Value

This simple calculation would determine the product’s value if the customer were making a completely logical decision. (Of course, this will vary depending on the hourly rate of the developer and their experience, which will affect development time. But those two numbers are usually related.)

2. Understand the Product’s Perceived Value

Who is your target audience? How will the product help them? (Will it save them time, improve their business, etc.?) Who will ultimately be making the decision to buy your product? (A developer? A project manager? The dude holding the company’s credit card?)

To answer these questions, research your market. What are the competing products? What is the demand? Who needs this solution, and how unique is it? How hard would it be to develop the product from scratch?

The Programmers section of StackExchange has a good overview of these considerations. Unless your circumstances are highly unusual, you can find answers to these questions relatively easily by using Google and by visiting relevant community-powered forums and Q&A websites such as StackExchange.

3. What Value Do I Want to Convey Though the Price?

A product priced at $1.99 sends a very different message to potential customers than one priced at $19.99 — the difference in conveyed value is by an order of magnitude. Don’t lower the price early on merely to try to generate more sales, because you would be conveying to customers that the product is worthless.

After determining the perceived value of the product and deriving a price from that, we can try to optimize the price in several ways…

1. Improve Perceived Value With Marketing

I’ve already covered several factors related to marketing, such as copy, visual design and demos, and I might expand on others in a future post. Consider these elements when trying to increase perceived value. If we find that the perceived value is below our objective value, then we can almost certainly raise it to at least the objective value. And with creative marketing, we could probably go far past that.

2. Improve Objective Value

To quote Joel Spolsky in his excellent article on Simplicity (bolding is mine):

With six years of experience running my own software company I can tell you that nothing we have ever done at Fog Creek has increased our revenue more than releasing a new version with more features. Nothing. The flow to our bottom line from new versions with new features is absolutely undeniable. It’s like gravity. When we tried Google ads, when we implemented various affiliate schemes, or when an article about FogBugz appears in the press, we could barely see the effect on the bottom line. When a new version comes out with new features, we see a sudden, undeniable, substantial, and permanent increase in revenue.

Going back to the point I made earlier, you can price higher through differentiation if you understand what people need and then exploit weaknesses in the competition. Everybody uses Magento because it delivers a lot of value, but customers keep complaining about its speed, among other things. Suppose you built a similar e-commerce platform that is blazingly fast? Bingo! You’ve targeted the biggest pain point for your competitor’s clients. Sometimes, having competition is helpful just to know what people really need.

3. Testing

When all is said and done, determining the ideal price from the get go is hard. You’ll need to test several prices and plot the demand curve of your product to find that sweet spot.

4. Tiered Pricing

This is critical from a psychological point of view. By setting just one price for your product, you don’t provide any points of reference (except those of your competition). You can increase the perceived value of your regular price by adding a premium package that is priced much higher. The point of the premium package is not to generate revenue (although it will do that — always give people the option to pay more if they want to), but rather to make the regular price seem like a better deal.

Basecamp pricing options

Start With A Good Guess And Then Optimize

By now, you should have the basic process down for how to price your product. There are no absolute truths in pricing: it’s best to start from a good guess and then test as much as possible. This article is meant to lay out the process to make that initial guess and the considerations that go into it.

There could be any number of reasons why a product is not selling as well as it should, aside from pricing. Always try to get feedback from potential customers (i.e. your website’s visitors) using tools such as KISSinsights, Total Feedback and even a simple contact form. The reasons could be a lack of information, missing features or simply a broken purchasing link.

What experience do you have in pricing software? I would love to hear about it and any questions you have in the comments!

Related Articles

You might be interested in the following related articles:

Front Cover: Image Source.

(al)


© Eran Galperin for Smashing Magazine, 2011.


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress