Come with me, friend, to a day in the life of a developer.

You’re working on a new website. You’re in the testing phase. Colleagues and clients are starting to interact with the site and give you feedback.

On Monday, your client emails several change requests. On Tuesday, your designer posts a list of tweaks in Google Docs. On Wednesday, your traffic manager tells you about a few requests the client gave her over the phone. And on Thursday, your client sends an update to the email he sent on Monday.

It’s Friday, and you’re ready to start your fixes. Where in the world do you begin?

Enter Mantis Bug Tracker.

Mantis is an open-source tool written in PHP. It’s designed to help developers describe, assign, and resolve bugs. We use Mantis to avoid the situation I described above: multiple change requests, spread across different media, in no order, and with no accountability.
Instead, Mantis gives us:

• A central web-based repository for all bugs, fixes, and updates
• Dropdowns that let us organize fixes by category and severity
• A color-coded status system that lets us mark fixes as new, assigned, resolved, or closed
• A “closing the loop” feature that notifies the person who reported a bug when it’s resolved
• A messaging system that captures all conversations related to a particular fix.

 
Organizing our quality control process in this way has had a big impact on development. Communication is smoother. Accountability and productivity are higher. And frustration is a lot lower.

In short, using Mantis has enabled a faster, more thorough, and more organized process of getting a web site or application ready to launch.

For a developer, that’s a lifesaver.

You’d think that using a certain app over and over might get boring. That you’d hit the limits of what it can do and where you can push it. Be ready to move on to something else.

This hasn’t happened yet with WordPress.

This amazing app got its start as a humble blogging engine back in 2003. It’s since become one of the most predominant content management systems used to manage modern websites. It’s used by literally millions of folks—from individuals to interactive developers to huge corporations. And the sites that are running this framework are seen by tens of millions of people every day.

In fact, we’ve found that as WordPress has grown in flexibility, it can be used to manage nearly any type of website or application. We’ve used it to manage Facebook apps, to create social networks, to build mobile web apps and ecommerce sites … and more.

In my opinion, there are several elements that make this radical usability possible.

First is WordPress’s extremely flexible theme and plugin systems. This combination allows for a huge range of sites to be managed via WordPress.

On top of this, WordPress allows custom site development to occur separate from the core framework files. This allows us to apply WordPress and plugin updates as they occur—giving the site increased stability and security.

In addition, WordPress is built on PHP and MySQL and is open source under the GPL license. This means that clients fully own and control their site, including the core CMS framework. There are no outside vendors, license fees, or hosting requirements involved, outside of the basic technology required.

It’s also cost-effective. Using WordPress saves clients time and money because we don’t have to write every piece of webware from scratch. Instead, we can utilize the ingenuity of a worldwide network of developers and designers who contribute to WordPress and its many plugins.

I continually find amazing uses for WordPress. And I love the ease with which I can create custom plugins and themes to fit nearly any site or application a customer desires. It’s great being part of the active developer community behind WordPress, and I look forward to finding new and fun uses for the platform well in the future.

I recently started using a new CSS framework called Blueprint. I’ve been excited about the results and wanted to share some of them here.

The cool thing about Blueprint is that it truly saves time in development. It cuts the time needed to take a design from sketch to a skinned website. And because it works so well across browsers, it cuts down the time needed for testing and debugging.

It’s also flexible. It makes flowing a design into a site simple, and it cuts the labor needed to change that design once you’ve started. If you decide to add an image to the right side of the screen, for example, Blueprint allows you to just drop it in, rather than having to rework your layout from scratch.

Here are some of my favorite Blueprint features:

• It has a CSS reset feature that eliminates differences across browsers. Those minor differences — like setting a margin at 12 pixels rather than 15 — can turn a website from beautiful to bogus real quick. Blueprint standardizes these values across browsers, creating a uniform appearance for your site and reducing the time needed to cross-check it in Firefox, Explorer, Chrome, Safari … you name it.
• It has an easy-to-use grid that can accommodate simple and complex layouts. Most designers work in a grid, whether it’s 960 or 1020. With Blueprint, you can “snap” your design into CSS almost as easily as putting together Legos. You can also write custom CSS on top of Blueprint to accommodate out-of-the-box designs.
• Functional form styles. It’s easy to spot a form that hasn’t been styled — it just looks ugly. With this framework, you can write the HTML for your form, and Blueprint will autostyle it. You can customize the styles as needed, but Blueprint it provides a good base to start from.
• Ready-to-go print styles. Blueprint also includes separate stylesheets just for printing. They’re set up to hide unnecessary content like banner ads and to print web content in a one-column, easy-to-read format.

The best thing about Blueprint might be the fact that it’s an open-source, supported framework. That means there’s a community of worldwide developers constantly working on making it semantic-valid and browser-tested. As new standards emerge and bugs are discovered, Blueprint’s network of users updates the software accordingly.

So the next time I’m working on a new website, don’t be surprised if I tell you that I’m “working from a blueprint.” That’s what all great architects do, right?

Designing a website without usability testing is like building a boat without a blueprint. You’ll make something, but whether it floats is a different matter.

Usability testing fascinates me; in fact, I’m enrolled in grad school at DePaul University, studying for an MS in Human-Computer Interaction. And when I heard some debates recently about whether current usability tools were still valid, I took notice. The crux of the issue seemed to be the value of wireframes vs. prototypes, and whether technical specification documents are necessary.

As someone who believes that a focus on usability should be the focus of building a successful web site or application, I definitely had an opinion. I believe that each of these tools has a distinct place in today’s web development cycle. And as a web developer who handles new projects daily, I’ve seen firsthand how these tools expedite development time and directly reduce the number of bugs found and revisions required after development.

Let’s take a look at how each of these tools works.

• Wireframes - Wireframes are basic layouts for a site or application. The goal of this phase of usability testing is to focus on determining the basic information architecture and interaction design for a site, without the distractions of interactivity or design elements like color, font, and images. By removing these elements, the development team can focus on the best possible placement for the individual elements of the site or application. They can also begin to think about options for interaction design.
• Prototypes - Prototypes are beta versions of a site or application that allow information flow and interaction testing. The actual functionality of a site isn’t implemented. However, a user can click through interfaces to get an idea how a site will look and feel. By getting feedback from project stakeholders at this stage and making needed changes, you avoid the difficulty and cost of making revisions after development has taken place.
• Technical Specification Document - This document combines the information flow, interaction design, and functionality decisions reached during the wireframe and prototype phases of development. It’s presented to the site developers along with other tools generated during usability engineering, giving them a complete, accurate understanding of the site’s usability and functionality requirements. This document also enables clear communication between stakeholders (agency, client, users, designers, and developers) regarding what functionality is expected for each interface.

From my perspective, all three of these tools are essential. They enable a reasonably pain-free development process, and significantly cut down on revision and rework. One small change made during usability testing can save literally days of time and struggle — and beau-coup dollars — later in the process.

So for now, I’m sold on these tools. I’ll be ready to learn about better ones as I continue my studies, but for now, they’ll stay in my tool belt.

The newest versions of the APIs have been improved to load fast on mobile browsers like the iPhone and Android. They’re also highly customizable. That means you can take a standard Google map and make it reflect your own brand identity. You can change the colors, incorporate animation, remove or add data, and add custom icons and text labels.

Google Maps APIs in action

Here’s a map that we created for Hageman Trucking, for example. You’ll notice that we laid a transparent map of 17 Ohio counties on top of a standard Google map, showing Hageman’s service areas. We also created custom icons (miniature Hageman logos) showing the company’s two locations.

Another example is what we did for Koehlke Components. We created a streamlined map of the United States showing only state names. States turn a Koehlke red when you mouse over them, and when you click on a state, a text box pops up showing that state’s sales rep. If you click on “Contact Your Sales Rep,” you can email your rep right from that page, without jumping to Outlook. We used jQuery to create that special feature.

For the developer

From the developer’s perspective, the Google Maps APIs are pretty awesome. Unlike other APIs, they are nearly always fast and available. That makes a difference, because if you embed a third-party API in your customer’s website – and that API is unreliable – nobody’s happy. Not your customer, and not their customers.

Typical of Google, the documentation for the APIs is very user-friendly. What you can do with them is pretty much limitless. There’s also a huge community surrounding each of their API platforms (Google Maps, Google Earth, Google Charts, etc.). So there are a ton of other developers writing about how to solve certain problems they run into, and offering up new ideas.

Finally, because this is a JavaScript-based technology, it works just as well on mobile devices as it does on a desktop. And that’s when you need a map most, anyway – when you’re mobile.

Have you ever wished that the web was more helpful—and less robotic?

Let’s imagine you’re traveling to Florida for Christmas.  You hop onto your search engine and query “christmas florida.” But the first eight results are about the city “Christmas, Florida” — not what you had in mind.

Wouldn’t it be cool if search engines could tell the difference between Christmas the city and Christmas the holiday?

Enter the semantic web. The semantic web is a development paradigm, part of the HTML5 proposal, that structures the content of sites so the internet can “understand” words based on context.

For example:

• If you search for “house main character,” the semantic web would understand that you mean the TV show House, not a house where someone lives.
• If you search for “green windows,” it would understand that you meant energy-efficient windows—not windows that were painted green.
• If you wrote “I love Atomic Interactive – they provide excellent web development,” the semantic web would understand you mean that “Atomic provides excellent web development.”

In other words, the semantic web can understand the association between pronouns and the words they’re linked to. Wow.

How does this all work? The semantic web’s enhanced understanding of words is driven by microdata, one of many new tags in HTML5.

So if I were writing content about Christmas, Florida, I would include microdata indicating that I’m talking about a location. Conversely, if I were writing about celebrating Christmas in Florida, I would include microdata indicating that I’m talking about the location Florida, but the event Christmas.

Modern search engines like Bing, Google, and Yahoo take advantage of this microdata to keep your search results relevant.  In fact, Bing was built from the core up to parse microdata and associate content together. That explains why Microsoft markets Bing as a “decision engine”— supposedly, it helps you make better decisions by getting rid of superfluous search results.

The bottom line? If you have a data-heavy website or are having trouble with SEO because search engines are confused about your content, utilizing the semantic web can help. Atomic can help you take the first step in coding for this brave new web. Reach out to us anytime you want.

We’ve all heard about the dangers of social networking for kids and teens. Sometimes it seems like every day there’s another story about a predator who used MySpace or Facebook to connect with an unknowing youth.

But imagine that you had a special needs child. Someone who wanted to make friends online, but who was even more vulnerable to danger. How would you protect them?

That’s where Therapals.com comes in. Therapals is an online social community for children with special needs. Just like Facebook, Therapals lets children create online profiles where they can update their status, “friend” other people, comment on a friend’s status, and send messages or attachments.

The site is the brainchild of an Ohio-based occupational therapist who works with special needs children. She came to Atomic for help making her vision a reality. After listening to her ideas, we were able to design and build a 100% custom site using PHP, MySQL, and jQuery. Alexis Branham created the cheerful, user-friendly design, and I did the back-end coding. Like all our sites, we used standards-compliant code, and this site had a particular emphasis on accessibility.

In addition to providing a safe social networking space for children, the site has some unique features for parents and therapists:

Parents can:

• Update their child’s profile and help them find friends with similar interests
• Monitor all of their child’s activities via a custom activity log
• Approve or deny their child’s friend requests
• Set the system to insert “sensory breaks” at defined intervals – a break when the child needs to stop using the computer and perform a physical activity like hopping or skipping

Therapists can:

• Communicate with parents of children on their caseload, and with other therapists around the country
• View, with parental permission, a child’s activities, such as how many sensory breaks they complete, who they talk to, and how much they write
• View a child’s status entries to check keyboarding skills, sentence composition, and social skills

Therapals.com had hundreds of hits on its first day. Now, just three weeks later, dozens of paid and free users are visiting the site to connect and share information.

We enjoy all of our projects, but this site has a special place in our hearts. We can’t wait to see it continue to grow.