If you don’t have these 4 things, you need a new website.

Online shopping has become one of the easiest and efficient ways to shop. That’s why more and more people are going online to look for products and services rather than going to a physical location. That means your company’s website is crucial to keep up with the times and capture your consumer’s business.

First impressions are everything

I’m sure you’ve heard that expression before. The same goes for your website. Consumers need good experiences so if someone goes to your website and it looks outdated or they can’t find anything, they will more than likely go somewhere else. You may not be hearing complaints about your website, but that doesn’t mean there’s not a problem. If you had an updated website, you could be getting even more traffic, leads, and sales. What we tell customers is to redesign your site every 2-3 years with periodic updates to ensure you’re giving your customers exactly what they want: content, user-experience, and appealing design.

Is your website optimized for mobile?

If not, you need a new website. Something to keep in mind is the importance of mobile. Whether you’re a manufacturing company or a retail company, your customers have phones. There are a vast number of searches every day on mobile devices so that means your site must be designed as such. Responsive design for mobile devices will ensure your consumers have a good experience wherever they look at your website and services.

Is your site SEO capable?

If not, you need a new website. Search engine optimization, or more commonly referred to as SEO, is where your site will appear on search engines. Consider this, you have a solid website, enticing brand messaging and a cool logo, but your website isn’t optimized so no one will ever find you to even see that. That makes all your previous efforts meaningless. Having a site that is ready for SEO is huge so if you don’t have a site that gives you that ability, you are already way behind the game.

Does your website take forever to load?

If so, you need a new website. If your site is slow, your rank on Google will be drastically lowered. Not to mention, people want things exactly when they want them. If your page takes forever to load, people will bounce off your site and onto your competitor’s.

Can you link social media on your website?

If not, you need a new website. We mentioned people go to your website to look at your services and may look up your website on their mobile device, but we haven’t talked about the power of social. A large number of people also want to know what other people have to say about you and whether they want to do business with your company. That means they may go to social platforms to make their decision. It’s important to be on social to funnel your potential customers back to your website. If you aren’t on social, that’s an opportunity to gain even more business, but if you are on social and don’t have a website that links with them, that’s just as bad!

Final Thoughts

There are plenty of reasons to update or get a new website, but if you don’t believe us, just look at your competitor’s website. Technology is always changing and so is the way people do business. If you want to ensure your business is future-proof and continues to do solid business, you may want to consider updating your website.

Imagine your toughest class in college. You had a choice: take notes and study throughout the semester—or wait until the last minute to cram before the final exam. Studying little by little might have taken up time when you’d have rather been out with friends. But by the time the final rolled around, you had a bank of clean, organized notes to use as a study guide. You probably sailed through the exam, no problem.

Or you went the other route. Skipped assigned reading and blew off study sessions. Left the hard work for when it really counted: finals week. Problem was, since you weren’t building knowledge and checking your understanding over time, you didn’t even know where to begin. You were starting from scratch—and between caffeine-fueled all-nighters and potential nervous breakdowns, you spent the same amount of time at work as the person who studied all along (although your final grade might have said otherwise).

I won’t ask which student you are in this scenario—but it’s pretty clear which is the better strategy, right? Put in a little extra effort now to make life easier later.

This is a lot like the choice developers have to make between unit testing and overall testing of their code.

Unit testing: Getting down to the nitty-gritty

Unit testing means isolating the smallest possible elements of a program’s source code, then testing them one by one to be sure they work like they should. It’s different than the overall testing you probably do just before releasing software, which simply tests that a program behaves correctly.

With unit testing, if there’s an error anywhere in the program, you don’t have to work back through all of your code to sniff it out. You can see which test failed, and from there, isolate your error and make a quick fix.

One of the more popular unit testing tools out there is PHPUnit, used to test code written in PHP. PHPUnit saves all of the unit tests you’ve previously written, making your code easier to maintain over time. (Think of unit tests like lecture notes you can refer to before a big exam.)

Just say “no” to skipping unit tests

Surely this is a part of every developer’s coding toolkit, right? Not exactly. Just like some students choose cramming over studying in chunks, many developers shrug at the idea of unit-testing their code. Why? Chris Cornutt at Sitepoint offers a few reasons: They think it takes too long. Or that their code is fine the way it is. Or that it’s just plain boring.

Those things may be true. But think about the alternative: You’re down to the wire and ready to send a program to a client—and you discover a bug. You have no way to figure out when or how it popped up, nor any way to verify exactly which parts of your code it affects. Better hope you’ve got some Red Bull handy, because you’re in for a long night.

Refactoring without tears

The other great thing about unit testing is that it makes major code changes, or refactoring, a breeze. For many developers, refactoring can feel like playing Russian roulette with your code. You don’t want to make too many changes for fear of undoing your hard work.

But if you’ve been adding unit tests to your test suite all along, refactoring is no big deal. Simply update your code, and then run your old unit tests against the changes you’ve just made. If any tests fail, you know exactly what to fix.

It’s the surest way to get your clients to give you an “A.”

Still not convinced that unit testing is the way to go? Learn more about PHPUnit here, or listen to this talk by Professor Richard Buckland on why smart programmers test in units.

Need code that works right, every time? Contact Atomic for help with your next web development project.

Like any good web designer, I know CSS like I know my ABCs. CSS (short for Cascading Style Sheets), along with HTML, is the foundation of so much we do as developers. But I’m here to tell you that there are better ways to code.

Imagine you’re an artist. You’re asked to draw a picture of a sunset, but all you get to work with are some gray paint and a thick, messy brush. You’ll work with what you’ve got—but even if you’re da Vinci, your painting won’t be as good as it could be. To really work your magic, you need better tools (for starters, a few colors would be nice).

This is a little bit like Sass’s relationship to CSS: Sass is a stylesheet syntax that works as an extension of CSS3. It offers a bunch of handy features that make coding faster, cleaner, and more, well, colorful.

Sass first appeared in 2007. It’s short for Syntactically Awesome Stylesheets (seriously), and has two syntaxes:

• Indented syntax. This is the older, rarer Sass syntax. It was inspired by bare-bones coding languages like Haml, and uses line indentation rather than brackets or semicolons to separate blocks. Indented syntax files go by the extension .sass. The problem with this syntax is that it’s not compatible with CSS, and doesn’t look much like it, either. This makes indented syntax tougher for designers to learn and use.

• Sassy CSS (SCSS). This is the most commonly used form of Sass (introduced in Sass 3.0), and uses the file extension .scss. It works like an add-on to CSS3, meaning that every stylesheet that’s valid in CSS3, is valid in SCSS.

Whichever syntax you choose, think of Sass as CSS3 taken to the next level. Those tedious, repetitive features of CSS that you hate? Chances are, using Sass makes them simpler. Sass offers features like:

• Nesting. When you’re writing code for elements with many sub-components, like tables or lists, typing the same selectors over and over can get old fast. Sass helps you avoid this headache by nesting child selectors inside parent selectors. You can also apply nesting to properties of a given selector, like font or border attributes.

• Variables. You can use Sass variables to describe attributes of selectors that you plan to reuse. Variables are called out using the symbol “$.” Let’s say you want all text to show up in a shade of light blue, but don’t want to keep track of the color’s hexadecimal code.

First, write what you want your color variable to represent:

$lightblue: #00CCFF;

Then, apply that variable to your text:

$textcolor: $lightblue;

Variables are lifesavers on big, long-term projects. Rather than committing styles for colors, links, buttons, and tables to memory, write easy-to-remember variables into your code.

• Mixins. Mixins take variables a step further by allowing you to use a single selector to represent a whole section of code (for example, all style elements of a table). You can even add in equations to instruct an element to adjust sizing as needed. Sass also supports conditional states and “for” and “for each” loops. Best of all, mixins are automatically removed from your code when you compile, so they don’t affect file size. Check out Compass for a great library of reusable, open-source mixins.

Intrigued yet? This is just a sampling of what Sass can do. If you’re ready to add some Sass to your code, head here to learn how to install (it’s written in Ruby). And be sure to check out the developers’ complete Sass Reference Guide, which contains everything you need to know to make your stylesheets syntactically awesome.

Upgrading to Sass from CSS3 is like switching from dingy gray paint to a 64-color Crayola box. Once you get the hang of it, you won’t know how you ever did without.

Want to know more about coding with Sass? Atomic’s developers can give you the inside scoop.

 

You wouldn’t expect mobile developers to spend a lot of time using pen and paper. Shouldn’t we be on the cutting edge, using lasers and cyborgs to speed up our design?

We are on the cutting edge. But sometimes that just means we’re using scissors.

That’s because paper-based prototyping is an important part of our design process. Paper-based prototyping is just what it sounds like: designing mockups of mobile apps using paper and pencil. Designing this way has real advantages over designing on the computer, with the perennial favorites “time and money” at the top of the list.

How can designing on paper possibly be state-of-the-art? Let me explain.

  • It’s fast and easy. With mobile interfaces becoming more sophisticated, there’s often no time to build refined prototypes of every permutation of every screen in your interface. Working on paper allows you to create mockups in a matter of seconds.
  • It’s cheap. No complex UI modeling software is required; no labor hours are spent coding or working in Photoshop. All you need are paper, pencils, and ideas.
  • It’s focused. Working on paper keeps everyone – developers, designers, and clients – focused on functionality, not looks. When you’re working on Post-Its, it’s impossible to get distracted by your app’s “look and feel.”
  • It encourages collaboration. Try gathering 10 people around a laptop to brainstorm. Hmm. Now gather 10 people around a table, show them your drawings, given them some paper and sticky notes … and watch the ideas start flying.
  • It stimulates creativity. If you were designing a logo, you wouldn’t start in Photoshop. You’d probably start by sketching, evolving various ideas naturally before you commit them to pixels. Prototyping on paper opens creative doors in the same way.
  • It encourages robust usability testing. Sometimes, a UI isn’t tested thoroughly because it’s just painful to design over and over. When you work on paper, you’re not hung up on time invested in creating tons of PSD documents. Revision is fast and painless.
  • It gives insight into usability. Watching people interact with your drawings is totally different than emailing them a PSD file and getting back their notes. You can actually watch their minds work – see how your design fits or blocks their expectations.
  • It’s nonthreatening. Using paper is great with clients. It takes development out of the realm of geeks and into their hands. They can add, delete, or reorder screens, for example, just by moving pieces of paper around.
  • It’s fun. There’s something tactile and satisfying about working with paper. It appeals to nearly everyone. And if you really want to bring out the kid in your coworkers, arm them with scissors and glue-sticks. In this case, a childlike approach to work is a good thing.

 

Paper prototyping can’t identify every UI issue. And sometimes you have to get into the development phase to really see how your interface is going to fly.

But in many situations, working on paper is a great way to enable low-cost, highly creative design.

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.

Recently, I’ve been surprised to find that some of our customers are still uncertain about the value of optimizing their website for mobile.

It’s been a trend for a few years now. But let me throw down two statistics to explain why it’s increasingly important.

  • Today, 15 to 30% of all searches are done on mobile devices.
  • By the end of 2011, 50% of Americans will have a smart phone.

In other words, a ton of people are already trying to search for you via mobile. Those numbers are only going to increase. And before your website can function effectively as a mobile website, it must be made compatible with mobile devices.

Atomic can accomplish this task for you, a lot more quickly than you might think. Ready to optimize your site for mobile? Here are a few points to keep in mind.

  • Simplify. Make the layout simple. Complex graphics and unconventional navigation are lost on mobile users. What are the few critical pieces of information your customers need? Include that. Forget about everything else.
  • Resize. Make sure navigation links and buttons are large and easy to find. Your thumb isn’t as accurate as your mouse.
  • Prioritize. What content do you want your visitors to read? Make that the first thing they read. Users are much less likely to browse on mobile devices. They want to find the information they’re looking for immediately.
  • Technify. You’re creating a mobile site. So maximize the capabilities of mobile devices with features like “Click to Call.” Click-to-call lets a user press your phone number and instantly place a call —rather than having to exit their browser function, call up the phone function, and enter your number manually.
  • Streamline. Whether your goal is to increase phone calls or sales, make this task as simple as possible. If you want a phone call, break the process into three quick steps: provide a brief description of services or why a customer should call, offer an incentive for calling, then show the phone number (using click-to-call). If you want a sale? Provide a brief description of the product or service, let your user click to the product page(s), and then click again to checkout.

If you want to see the difference between an optimized and non-optimized site, compare Home Depot vs. Menards, or Smashburger vs. Applebees. The difference in usability is huge.

So ask yourself: Which way do you want your site to look?

maps-api
Google Maps’ APIs are one of the most functional tools out there for businesses. They let you embed Google’s vast amounts of location data in any website you create, whether it’s desktop or mobile.

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.

iphone4There’s a big shift in how people are shopping these days. “Let me Google that and see where I can buy it,” or “let me find a discount on Coupon Sherpa” are showing up in everyday conversation.

And people are searching for these things on their smart phones. If you want a chance at capturing these potential customers, you need to cater to their on-the-go search habits. That means you need a mobile website or application for your company — or both.

If you’re wondering about the difference, a mobile website is a condensed version of your site, optimized for viewing on a smart phone. The content and navigation are simplified and the images are minimized.

A mobile application is a self-contained program that runs on a smart phone. For example, Starbucks offers an app that lets users find a store using GPS. Chipotle has an app that lets you build, order, and pay for a burrito right on your phone.

If you haven’t thought about what kind of mobile presence your business needs, it might be time. Here are some questions to get you started.

  • Who’s your audience? Are they new customers, who might need to find you using search? Are they loyal customers who might appreciate a special app?
  • What are your goals? Sites and apps can have radically different purposes. Are you trying to build brand awareness? Provide information? Encourage a call or a purchase?
  • What functionality do you need? Based on your goal, what functionality is required? For example, do you need to track and store a user’s GPS info? Does the app need to be usable if there’s no Wi-Fi or network signal? Does it need to run heavy animation?
  • What device do you want to run on? iPhone? Android? Blackberry? Unfortunately, each platform has a unique language and process for pushing out applications, and its own internet browser. That means a site can look great on an iPhone but awful on a Blackberry. On the other hand, a site that works well on all platforms may need to have a generic look and feel.
  • What’s your budget? As always, you may need to balance your goals and budget. Maybe there’s a strong business case for moving your company into the mobile space – so it’s worth it to stretch your budget. Or maybe mobile access isn’t critical for your business. In that case, scaling back on both budget and goals makes sense.

As with everything in business, there’s no cookie-cutter solution. Mobile apps and sites have awesome potential — but you want to think about what’s right for your business before you take action.

blog-pic-mobileapp

The idea that you need a PC to browse online is nearly as old fashioned as, well, the Old Fashioned. Now more than ever, people use their mobile devices to do everything—from finding the recipe for a classic cocktail, to ordering repair parts online, to writing cell phone novels.

What’s more, U.S. sales of AT&T-based iPhones are expected to reach 21.3 million by 2011. With those numbers in mind, making your content mobile-accessible seems less of an option and more of an essential, ongoing consideration.

At Atomic Interactive, we help customers adapt their web content to the mobile world in a variety of ways:

  • Create an application that has value to your audience. Coming up with a concept for your application is a great place to get started. Ask yourself a few questions: “What do my clients want?” “What struggles are they having?” “Is there something fun I can share with my customers to get them excited about my product or service?” We can guide you every step of the way from concept to completion of your application.
  • Fitting your site to its users. With mobile-formatted websites, we use code to sniff out your clients’ browser preferences based on the device they use to find you—whether it’s an iPhone, iPad, Android, Blackberry, or mini Netbook. Your content is then displayed in an easy-to-read, mobile-size format, with the most important information up front.
  • Using the latest technology. Since websites are much easier to update than applications, we’re using the latest web-development technology, such as Ajax, HTML5, and CSS3, to make functionality extremely user friendly, device-specific, and even downright sexy. We know how to optimize graphics to display well on both large and small screens, for example—so we don’t shortchange traditional users or overwhelm mobile users.
  • Helping you navigate the “app” universe. Apps—the quirky, convenient applications that present information in personalized ways to mobile device users—are a great way to get multi-channel exposure (e.g., at the iTunes Appstore or the Android Market).

But how do you know which options to invest in, and whether they’ll attract customers? Our experts can help you review the online marketplace and make sure that a mobile application adds value to your brand and is useful for your customers. After all, even if you have a great app, if it’s not properly marketed, your target audience may not know it’s available.

We build sites and applications using clean code that prevent disruptions that can send mobile users running to the virtual competition. We also help prioritize your information with the mobile user’s briefer browsing habits in mind. And we always test our work from the most popular mobile platforms to be sure the content views correctly.

Want to learn more about maximizing your Web presence? Use your mobile device to find us online, send us an e-mail, or ring us up the old-fashioned way.