Atomic Interactive, the digital marketing agency headquartered in Dayton, Ohio, created the design, development and marketing strategy for Slickplan.com. Slickplan was created to fill a hole in the web design process that Atomic encountered every time they picked up a new project. Like most design agencies (and freelance designers), Atomic begins the web design process by creating a sitemap that displays the page titles and navigation of the finished product. A growing frustration within the Atomic team due to an alarming absence of quality sitemap creation software led to a proactive decision – “We’ll make our own!”

Fast forward two years and two versions of Slickplan – the web application has become a trusted design industry resource for over 35,000 users who love the simplicity of the creation process and the beauty and functionality of the finished sitemap. This past weekend, the Atomic Interactive team was overjoyed to learn that Slickplan was chosen as one of three finalist for Best New Web/Mobile Application in the App It Out contest hosted by
Carsonified. The achievement grants Atomic and two other winners the opportunity to present their software at the prestigious Future InSights Live conference at the MGM Hotel in Las Vegas at the end of April.

At the conference, 4 members of the Atomic team will have 10 minutes to showcase the finest points of Slickplan in front of a huge gathering of web designers, developers and digital agencies, as well as a panel of judges that will be voting to send one lucky app development company to a conference in London. Future InSights Live is conference that hosts cutting edge trends and personalities in the web design community, and this year such well-known industry personalities and web entrepreneurs as Dan Cederholm, Josh Clark, Steve Fisher, Paul Boag and Molly Holzschlag will be featured as speakers.

Ryan McCoy, one of Atomic’s co-owners and a member of the presentation team, is particularly excited. “This is a great honor to attend the Future InSights Live conference to present our software to all of our peers within the interactive community,” Ryan said. “We created Slickplan because of a need we had as an interactive agency, and to get a chance to share our creation with a gathering of all these potential users is really a dream come true.”

Slickplan’s creators are well aware of the fact that this opportunity presented itself thanks in part to the contributions of Slickplan’s users. Ian Lawson, Atomic’s other co-owner, explains, “The improvements made to Slickplan are based on our own day-to-day use and feedback from 35,000 very active users. Together, we’ve made something great.”

Visit our media kit for more information or contact us by email or phone, 937 232 1155.

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.

Why not? Creating a new site for your firm is a big deal. Often, the effort combines new branding, new functionality, and new ways of interacting with your clients.

Unfortunately, in all the excitement, some people rush the process. And the part they often gloss over is putting together a sitemap.

A sitemap looks like no big deal. It’s just an outline of your website – an “org chart” showing where each page on your site will fall.

But in reality, your sitemap is critical. It’s the foundation on which your entire website is built. It defines how your content is organized, what’s included, and what’s left out. A good sitemap also facilitates your sales process, laying out intuitive pathways for clients to follow through your site.

When folks rush a sitemap, a number of problems can occur.

Sometimes, critical content gets left out. Or the content is there, but buried in such a strange place that no one can find it.

Other times, the sitemap has to be heavily revised. And if we’ve begun design and development, that means work must be redone. On a simple site, that could mean an hour or two of extra labor. On a complex site, that could mean days.

Luckily, there’s an easy way to avoid these problems. Spend adequate time on your sitemap.

In other words,

• Think carefully about the goals of your website before you start work. Your navigational structure should facilitate your sales process, not represent any random old organization.
• Get third-party input. Talk to colleagues or trusted customers about how they approach your current site. What do they expect to find? What do they most often look for on your site? What do they have trouble finding?
• Make organization a top concern. Think carefully about what your customers need to know, then decide how that information should be organized. Make detailed notes about what content should go on each page of your site, so nothing gets left out.
• Finally, talk with us. It often helps to have one of our project managers put together a draft sitemap for you, based on your input and ideas. Because we’re not as close to your content as you are, we can often see it more clearly, and help you organize it in a logical, intuitive fashion.

And remember, take the web development process one step at a time. When you’re working on your sitemap, stay focused. Don’t get distracted by what photos might go on each page or what colors your site will be. Nail your content first, and everything else will fall into place.

When you’re at home, on your own computer, you can use whatever browser you want. Into Chrome? Cool. Love Firefox? Fabulous.

But when you’re a developer, you don’t have that luxury. You have to ensure that your sites work well on all browsers —even those that aren’t your favorite. Worse … you have to ensure they work even on dated versions of those browsers.

And that gets old really fast.

Enter Modernizr.

Modernizr is an open-source JavaScript library that helps you build HTML5 and CSS3-powered websites without having to worry about browser compatibility. Modernizer does this through a series of “feature detection tests.” These tests detect features that a user’s browser can’t handle and downgrades those features accordingly, in a way that works for you.

This gives us developers much greater flexibility in building sites. We can build with a “high-end” target in mind — an ideal version of the site — while maintaining full control over what the “low end” version will look like. No more dumbing-down sites to ensure compatibility with older or non-preferred browsers.

Adopting this bit of tech can also save time and money. By building sites with the future in mind, there’s no need to redo development when a browser adopts more of the new HTML5 or CSS3 standards. Your site will have already been built to make full use of them.

This saves the client money and developers time, allowing those resources to be used for more important things. Like well-thought-out user interfaces, and more research in emerging web and mobile technologies. 

So we can keep dreaming about the day when all users adopt a single, brilliant, modern browser.

But until then, we’ll keep writing for all the browsers out there. And Modernizr will make that task a lot less painful.

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?

A lot of our clients go wiggy when they see a wireframe. Maybe because of how they look: spare, utilitarian … definitely not sexy. But they play a critical role in the web development process. Here are the top four things to know about what wireframes do … and what they don’t.

A wireframe is a blueprint. A wireframe is very simple diagram that lays out the essential elements of your web pages. For example, a wireframe might have placeholders for a header, navigation, body copy, an image, a search bar, a “call to action” box, and “contact us” information. By carefully assessing which elements are needed for each page of your site, we prevent unpleasant “uh-oh, we forgot that piece” moments once we’re into full development.

It’s not a design. People often mistake a wireframe for a design document. They start to panic because they think we’re using Times New Roman for their font, or arranging their content into boring squares and rectangles. To prevent this, when looking at a wireframe, repeat this calmly to yourself: “This is not my design.” Remember, the wireframe does not represent how your page will look. It represents what it will include.

Wireframes are a step in the development process. Wireframes are just one step in a process that takes your website from idea to launch. These steps include creating a sitemap, wireframes, and design for your site, and then undertaking development. Walking through these steps one by one ensures that the basic elements of your site are established before development begins. So there’s much less chance that development will start, stop, and start over from scratch—which can drive up costs and create a clunky product.

Wireframes are not your final product. Once again, when you see a wireframe, close your eyes and take a deep breath. Repeat to yourself: “This is not my website. This is getting me to my website.” Then, open your eyes and take a critical look. Is everything on the page that should be? Are there too many items in the navigation? Too few? Are there images on the right pages? Is the live chat button where you want it? Ignore the aesthetics, think about what your customer will want to see on each page, and make sure it’s there.

Now you’re seeing a wireframe for what it is – a content planning tool that makes sure nothing critical is left out of your site. And you’re using it the way it’s meant to be used: to increase usability while saving time and money.

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.

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.

Fonts have been a sore spot for web designers for a long time.

Back in the day, we were limited to the most basic of fonts – Arial, Times, and Helvetica – because we needed to use fonts that most people had on their machines. Then came the time of JavaScript- and Flash-based plug-ins. They let us use a wider range of fonts … but things still weren’t great. Often the fonts didn’t load quickly or smoothly. Strange things happened when you used special fonts for links or wrapping text. And of course, Apple has decided not to support Flash in the iPhone and iPad environments.

Thank goodness, we finally have something new. It’s Typekit.

Typekit is a subscription-based library of fonts that designers can use for their websites. All the fonts are hosted online by Typeface, so anything you can find on Typekit, you can plug into your site. And your users won’t require Flash, like other font substitutors have in the past.
As a designer, I appreciate the selection of fonts that Typekit makes available. They look like they were hand-picked by someone with a strong design sensibility and an understanding of what works visually on the web.

And as a developer, I love how easy it is to find the font you’re looking for and apply it to your CSS classes, IDs, or any other HTML tag in your markup. You can also pare down your bandwidth use by choosing only the weights and styles in each font family that you need.

Finally, from a business perspective, Typekit is just plain affordable. You can buy one subscription for your company and use it across all the sites that you develop.

I can hardly believe I’m saying this, but Typekit may make fonts fun again for web designers. I think it’s time to break out the champagne.