Selling products online seems simple: choose a shopping cart, price your merchandise, and watch the sales start rolling in.

In reality, there are a number of critical decisions you need to make before launching a successful e-commerce system. Here are 5 steps to get you there.

• Organize your products. A surprising number of people who want us to set up an e-commerce system can’t tell us exactly what they want to sell. They’ve never made a comprehensive list of all their products. Before diving into e-commerce, start with the basics. Create an end-to-end product list in a database or Excel file. Include the product name, description, cost, weight, dimensions, and SKU number. You’ll also need product photos for each item. (Tip: Name each jpg according to the product’s SKU number to reduce confusion). Once you can identify everything you want to sell, we can get rolling.
• Categorize your products. Think about how to organize your products into categories. If you’re a home store selling curtain rods, for example, should they go under Curtains or Hardware? Should a glass bowl go under Room Décor or Serveware? Or both? Choosing categories that reflect where customers will naturally look for products will ease frustration and promote sales.
• Choose your software. A number of e-commerce options are available; you want the one that best fits your company, products, audience, size, and aspirations. You also need to ask specific questions. For example, do you sell to retail and wholesale clients? If so, your software must feature a tiered pricing structure. Do you sell thousands of different products? If so, you need enterprise-class software … and a sophisticated search feature. Will your customers buy via credit card or PayPal? The list of questions goes on. Answering each one helps us narrow your choices and identify the right system for you.
• Determine the flow of your cart. The goal is to create a natural flow through your site – one that leads customers from an initial landing page to exactly what they want. To do this, you need to think about how customers would click through your site. What are the broad, top-level categories they’ll start with? (Electronics, for example.) What sub-categories will they expect to see under that? (Cell phones and TVs, for example.) What filters will they to use to narrow those subcategories? (Brand and Price?) Creating a logical flow will help customers easily find and purchase what they want.
• Choose multiple products vs. a single product with options. Do you have a wide range of products available in different styles? (For example, men’s shirts in various colors, patterns, sizes, and lengths?) If so, you may want to set your cart up to have fewer products with multiple options. In contrast, do you sell products with options (such as color or fabric), but want to highlight the distinctiveness of each one? Then you may want to set each item up as an individual product.

This article should give you a sense of the many questions that come into play when setting up a successful e-commerce system. Before jumping in feet first, find a developer who’s a true e-commerce expert and work through these questions together.

The time you spend up front choosing the right system and configuring it properly will pay off in ease of use and increased sales in the long run.

Nothing drives users crazy like a slow-loading website. Back in the day, we happily waited 30 seconds for pages to load over a 56K modem. Now, we expect pages to load immediately, and we get frustrated and click away when they don’t.

There are a number of ways to optimize sites for speed; some involve server side issues and client side code. Here are four methods that you can and should be implementing on any site you develop.

Optimize images
One way to optimize speed is to get resources from your server to browsers quickly.  One way to do this is to crop, resize, and compress (encode) images appropriately. For example, if you’re using a photo from a 6-megapixel camera as a thumbnail, make sure you’re not transferring that large image across the Net just to have a fraction of it show on your site.

Instead, use tools like Photoshop, Gimp, or even Paint.NET to crop out components you don’t want in the photo, resize the image, and use appropriate compression.

If your image is a photo, we recommend JPG file formats.  Logos and graphics work best as PNGs. And small icons and limited-color objects might be best as GIFs.

Reduce requests to the server
You can also increase speed by combining logos and icons into one larger image—a sprite map—that you show portions of as needed.

Think of loading a webpage like ordering a printer online.  Your printer comes in the mail, and it’s only then you realize you need a special cable. You order the cable, then realize you need paper.  And then ink.

These tiny shipments are similar to HTTP requests.  Most browsers can “order” two things at a time from a web server, but the more items are requested, the longer the page takes to load.

That’s where sprite maps come in.  Using a sprite map is like getting an entire kit of supplies for your printer in one package, instead of in multiple tiny shipments.  With sprite maps, you create one image that contains all of your logos, icons, and backgrounds.  Then, with CSS, you use properties like background-position to restrict which parts of the image show to users at any given time.

This reduces the number of requests to the server and in turn, speeds loading time.

Avoid inline styles and consolidate CSS
Imagine reading a story about a boat. Every time the author mentions the boat, they call it “the rickety white boat from Nantucket.”  Using that phrase over and over would waste space and slow readability.

That’s what developers are doing when they abuse inline styles. Describing every “p” tag in your document as having a specific margin and padding wastes time when the web browser is trying to download the site. Using CSS in external files reduces this bloat. Plus, CSS is cacheable, significantly reducing  load time on subsequent page requests.

Cache is king
One of the best ways to create an incredibly fast browsing experience for returning users is to cache your content on their computer.  One of the easiest ways to do this is to have your web host install mod_speed, from Google.  It’s an Apache module that provides recommended cache lifetimes depending on file type.

Things like images tend not to change very often on your site, and CSS files and Javascript files also tend to be static.  Why have your users download them every time they visit your site? mod_speed configures this for you and is a free download. It also provides the added benefit of “zipping” (actually gzipping) traffic between your server and your visitor’s computer.

To learn more, you can check out tools like YSlow from Yahoo, that give recommendations on caching content, where your holdups are, and even provide tips on whether you are requiring too many  HTTP requests.

Speed = less server load
Users will definitely be happier when you speed up your site. And there’s an added bonus: the faster you deliver content, the faster users will find what they need and leave your site. That means less drain on your servers, giving you the ability to serve more customers with less hardware.

Want to talk about how Atomic can help speed up your website? Contact us today.

Some of our customers are nervous when we tell them that we use open source software for our web projects. They think that open source means fly-by-night or unregulated.

That couldn’t be further from the truth.

Open source applications —like Linux, MySQL, WordPress, and Firefox — are reliable and stable. Often they have fewer bugs and security holes than proprietary software. That’s because the source code is open to the public, and a huge community of developers are reviewing it and suggesting improvements. A control board reviews the suggestions and implements the best ones in each new version of the software.

We use open source software in a number of ways for our clients. We think it has some distinct advantages.

• Flexibility. The code on open source software is literally “open” to developers. That means we can easily change it to meet our clients’ needs. For example, we recently created a WordPress plug-in for realfootballtalk.tv that allows the site administrators to track the stats of various pro football players. That’s an example of a very specific application that you couldn’t get off the shelf—but that we created and easily added in to WordPress.
• Innovation. Because the community of developers for open source software is so large, there’s a ton of innovation. It’s like apps for the iPhone — it seems like every day someone invents something new and cool. We pull from this universe of plug-ins to constantly bring new features and tools to our clients.
• Cost savings. Open source software usually costs significantly less than proprietary software, or is even free. We pass that cost savings on to our customers. In addition, using open source software as a base reduces our development time significantly. We spend our time on customization, not on reinventing the wheel. Once again, this saves our clients time and money.

One of the sites we created recently using open source software was chapelhillhouse.org, a weekend retreat for families coping with childhood cancer. Part of the reason we could donate our design and development time for this site was that using open source software made the process so easy.

At Atomic, clean code is a way of life. It’s the foundation of all our development work. It’s how we make sites that run well now – and are easy to update and maintain over time.

A hundred and one variables separate clean code from messy code: being compliant with W3C conventions; using standard naming conventions; using a single CSS stylesheet; using title tags, in a clear hierarchy, to define page content; and eliminating extraneous code, just to name a few.

But in short, clean code uses streamlined, standardized protocols; is easy to read and understand (by humans and computers); and conveys complex information elegantly.

Here’s an example of clean versus messy code:

There are a number of benefits to writing code like this:

• Promotes good search. Code that is properly organized and tagged is easier for search engines to crawl and understand. That means you get better results in SEO.
• Helps with cross-browser compatibility. Using clean code helps your site display correctly no matter what browser your audience uses. See the difference in the pages below? That’s the result of careless coding. One browser is able to “figure out” what the confusing code means; the other browser can’t.

• Simplifies maintenance and troubleshooting. Most people want to update their websites over time – maybe add functionality or fix a security weakness. To do that, your code needs to be read and revised, often by someone other than the original developer. The easier your code is to read, the easier it is for the developer to find the code they need, understand it, and update it.
• Saves money. The difference between updating a messy site and a clean site can be the difference between 2 and 10 hours. Most developers charge an hourly rate for update and maintenance work, so the cost savings from having a cleanly written site can be huge.

You can right-click nearly any website and select “View Source” to see how the website was built. Wondering if your site code is clean or cluttered? Give us a call anytime. We’ll be happy to take a look.

If you’re a web developer and you’re not using jQuery, I have three words for you: get with it.

jQuery is a JavaScript library that makes working with JavaScript a lot easier. Basically, it helps you code more efficiently and more cleanly than you could using regular JavaScript code. It cuts out a lot of the mundane work that used to be required to add different types of animations and interactions to a page. In short, it helps you find whatever you want on a page, and make it do whatever you want.

If you’re not a web developer, the main thing you want to know about jQuery is that it can help make your website interface much more user-friendly. For example, you can use jQuery to …

• create calendars that let customers click on a date to make a reservation for an event
• create seating charts that let customers select a seat on a plane, or in a theater
• create forms and make sure that customers fill out forms properly
• let customers “rate” shopping items by clicking on a certain number of stars
• let customers magnify part of an image – such as the image of a product they’re thinking about buying

Having your developer use jQuery is also important because, frankly, it saves so much time. That means we can build more functionality and more interactivity into your site more quickly. That keeps development costs down and helps your project get done in a timely fashion.

I like to think of jQuery as a library of shortcuts for web developers … effects that we can pick up and plug in to your site without reinventing the wheel. Again, this saves you time and cost.

Nearly every site we build at Atomic uses jQuery in some form or fashion. A great example is our site for MacTown. We used jQuery to create a horizontal slider on the homepage to highlight different product categories. We also used it to create a shopping cart with drag-and-drop functionality, which simplifies the purchasing process. And who doesn’t want to make it easier for customers to buy stuff?

Interested in talking about how animation and interactivity can make your site more user friendly? Contact us anytime.

Stop the interweb presses! We’ve got some news!

Atomic has just released it’s first application. It’s called SlickPlan, and it’s a free tool that web developers can use to easily create great-looking sitemaps and flowcharts.

Q: Excuse me, you built an application? I thought you were web developers.

A: Well, of course we are. But often our clients need custom functionality or custom applications for their websites. We wanted to let everyone know we do that too.

Q: Really? You can do that?

A: Totally. Our own Dayton web design team handcrafted this application using PHP/MySQL and jQuery. We used Twitter to identify a qualified focus group that helped us to beta test the program. We released it about a month ago, and we’ve already got more than a thousand registered users.

Q: So you created this app for your customers?

A: Well, originally we created it for ourselves. We’re obsessive about project planning at Atomic – and the first step in planning every website is to create a sitemap. We found ourselves wasting a lot of time building sitemaps in InDesign or Illustrator. So we decided to create an app that could generate sitemaps more easily. That’s how SlickPlan was born.

Q: Is it just for web developers?

A: SlickPlan is great for web developers because they can use it to quickly build site maps, and then with a click of a button turn them into standards-compliant HTML. So that speeds development. It also speeds the review process because developers can send reviewers a URL directly from SlickPlan. Or, they can use SlickPlan to autogenerate a PDF, if that format is preferable.

But in answer to your question, SlickPlan is also great for anyone who needs to quickly and easily create a professional-looking flowchart or sitemap. Like you, for example.

Q: Me?

A: Yeah, you. You look like you could use a little more organization in your life.

Q: < sigh…. >

Want to check out SlickPlan and give it a try? Go to www.SlickPlan.com. Or contact us anytime to learn more.