, ,

The Ever-Amazing WordPress

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.

,

Three Tips for Thinking Like a Customer

Everyone knows that when developing a website, you want to think like a customer, not a marketer. You should build the site from the customers’ perspective, to address their pains, needs, and desires.

But there’s a huge gap between knowing you should do this and knowing how to do it. Here are a few techniques I use to “get into the customer’s head” and help create successful, customer-centered websites.



Imagine you’re a shopper. During the planning stage of your site, try to slip into the mindset of a customer. Think about their needs, rather than your own. Most business owners make the mistake of focusing too heavily on their own product specifications. They want to shove as much info as possible into the site—rather than considering what customers need to see before they can even get interested in a product.

For example, if you have a storefront, your customers’ priority might be as simple as finding out your hours and location. They don’t need a lot of product detail — they’ll come to your store to get that. Or if you’re selling high-end products online, customers might want to see your pricing up front. Only if the price suits their budget will they take the time to learn more about the product.

Get an outside view of your site. Pretending to be a customer is a good start, but realistically, it’s almost impossible to see your own site objectively. You’re too close to it. Start getting input from a third party—an interactive firm, a user research group, or even friends and family.

Often, an objective reviewer can spot gaps in your content or navigation almost immediately. Usually, those gaps represent your own instinctive understanding of the site content — an understanding that outside customers won’t have. In other words, you designed the site, and you “get” how it works — but no one else does.

Check out the competition. To get a fresh perspective on your own site, look at what your competitors are doing. How do they structure their navigation? Where do they place calls to action? How quickly do they introduce pricing—or do they introduce it at all?

Their choice aren’t necessarily the right ones. But seeing their approach can provide valuable insight—and again, help you spot gaps or flaws in your site that you otherwise wouldn’t spot.

If all else fails, remember three basic concerns that all customers have. Is your site easy to navigate? Is it easy to find what you’re looking for? Is it visually stimulating? If you answer “yes” to all three questions, you’ve gone a long way toward creating a customer-friendly site.

, , ,

Usability Engineering: Why Wireframes, Prototypes, and Specifications Matter

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.

,

Four Ways to Speed Up Your Website

optimize

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.

, ,

How usable is your site?

How usable is your site?

If you asked your customers to discuss the fine points of web usability, you’d probably get a blank stare.

But would your customers recognize a site with poor usability? You bet. And by recognize the site, we mean leave the site – immediately.

Usability is about creating websites that make life easy for your users. So they stay on your site, easily moving through your navigation, easily finding how to contact you, easily making purchases.

Unfortunately, too many sites make life tough for their users. We won’t go into all the ways this can happen, but here are a few of our pet peeves.

  • Confusing navigation. Too often navigation is structured from the perspective of the company rather than the user. For example, we recently tried to register our kids online for summer camp. First we tried Registration, then Programs, then Events. Nada. Finally we took a wild guess and tried Classes – under which we found summer camp. Do you really want your customers to play guessing games before they can buy something?
  • Links that don’t behave predictably. Web users have become accustomed to certain navigation elements behaving in certain ways. We expect to click on your logo and be directed to your home page. We expect to click through long content using Previous and Next buttons. When we can’t do these things we get frustrated with you. We lose belief in your site.
  • Hidden Contact Us information. There’s nothing more frustrating than searching fruitlessly for a company’s phone number or address. First you look for a “Contact Us” page at the top. Then you look in the footer. Then, with increasing annoyance, you start digging through pages with names like “Our Firm” and “Get to Know Us.” When customers are at the critical moment of converting to a sale or seeking more information, it should be incredibly easy for them to contact you – not incredibly annoying.

So many elements go into creating highly usable sites; several basic checklists are available online. But all of them are based on a focus on the user – what she is looking for, what she expects, what she needs from your website and your company. Without that focus, all is lost.

Want to talk about your site’s usability?