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.