Apps, or mobile applications, are all the rage right now. “There’s an app for that“ or “Where’d you get that app?” are now competing taglines that aim to put one device above another based on what software (or apps) is available for that particular device. Well, here’s what bothers me about this as a developer: apps must be developed for at least four major devices—iPhone, Android, Blackberry, and now Windows Mobile (is Palm still big?)—all with different development kits. Which should you choose if you can’t afford to build for all of them?

HTML5: the other choice

What if you didn’t have to choose? What if you could simply develop one application and it worked on all of the major devices? Well, you can—mobile web apps with HTML5. 37Signals recently did it with their Basecamp web application. There’s nothing to install or update. You just point your mobile browser to your Basecamp account and you get a special, mobile-optimized version on your phone that works much like a native app. You can even bookmark it and save the bookmark to your “home” screen. Best of all, it doesn’t care which of the major phones you use!

Good for customers, too

Not too long ago, I had a discussion with someone about an iPhone app for college campuses. It sounded great: maps of the campus, class schedules, places to eat, and much more. However, my first reply was, “What if I don’t have an iPhone?” Mobile web apps are not only more cost-effective (build once and deploy everywhere), but they’re more consumer-friendly because they’re less likely to exclude anyone.

There are instances, I will admit, where an device-specific app may be more appropriate, like games, for example. The mobile web is more powerful than ever, though, so it should certainly be considered when beginning discussions about creating a mobile app. There are two big questions to ask yourself:

Does my budget allow us to build an app for two, three, or four devices?

If we choose to build for one device, can we afford to exclude the customers that use other devices?

If the answer to either of those is “no,” then it’s time to think about building a mobile web app.

So I’m listening to a great episode of The Big Web Show (episode 6) regarding mobile web design. It’s great because they veer off on a sort of tangent discussing how mobile sites are easier to use because they strip away as much excess as possible and leave you with the bare necessities. Contrast this to typical websites designed for larger screens filled with armies of animated ads and other “helpful” diversions. Good websites have focus, and mobile designs are getting this right simply because they have to maximize their use of space and bandwidth.

Perhaps the explosion of mobile web devices will force designers and developers to appreciate that same simplicity across all devices, big or small.

Adobe Flash is the current champion of online video (although I believe Netflix uses Microsoft’s Silverlight), but YouTube is showing us that things may change in the near future. HTML5 supports video without any plugins—it only requires that your browser support HTML5. This is really cool. While I do love Flash and all it can do, I’m all for a high-quality, free alternative to presenting media online. Finally, I’m beginning to get excited about the next generation of HTML.

People generally have strong opinions about scrolling on websites. Not so long ago it was nearly a sin to design an interface that required scrolling (how long is long in web years?). Today, however, I don’t think twice about placing content “below the fold.” I certainly encourage positioning the most crucial information in the upper portion of the design, but scrolling is easy—it’s “browsable.”

Mighty web usability expert Jacob Nielson has just released an article that suggests while scrolling is acceptable, it doesn’t excuse website owners from prioritizing content. He has even included some interesting eye-tracking studies. Cool.

Read Scrolling and Attention.

I just finished listening to a great interview with usability expert Steve Krug over at Boagworld. Mr. Krug wrote one of my favorite books on website usability, Don’t Make Me Think, and is latest, Rocket Surgery Made Easy, appears to be a nice follow-up. His main point is that productive user-testing doesn’t have to be anything complicated—it can be a simple 15-minute observation with two or three people.

Why do I constantly have to remind myself that being busy is a good thing? Should I really be worried that this website hasn’t been updated since August of 2009? Nope, not one bit. Why? I have work coming out of my ears and that is way more important than what my next blog post should be. So, is it important to blog and tweet and Facebook? Sure it is—when you have time. But if you’re overflowing with work, don’t sweat it. Just be thankful!

I have often avoided fancy effects and such in favor of simplicity. My list of compatibility issues does not need one more addition to make development more complicated. The question that always arises is, “does the effect enhance the site enough to justify more time and money?” Just lately I was reminded again that the answer is often “no”—sometimes simple is best.

Starting with fancy

While working on the new Omni product page for Baron Services, I thought it a perfect candidate for the “lightbox” effect—you know, the screen goes dark and a small, inset window appears with an enlarged image, video, or other content. I set up the page and it was beautiful. It even tested well in all the major browsers: Firefox, Internet Explorer (versions 6 through 8), Safari, and Opera. However, one person at Baron Services was having trouble, and I could not reproduce the issue.

Simple solution

It turned out that the anomaly was Internet Explorer 8 running on 64-bit Windows Vista, and I could not figure out what was going wrong (I don’t have 64-bit Windows Vista to test). We had two choices: spend time and money trying to make the “fancy” version work, or drop back to a simplified, yet usable version in favor of wider compatibility. It was an easy decision—simple won by far, and it was not only a matter of budget. We needed to get a working version out quickly, so time was an important factor as well.

The final version incorporates a simple browser pop-up window so that the user still gets the feeling that they do not really leave the page, much like lightbox. No, it’s not quite as fancy, but it works and it launched on time and within budget. That makes both the users and my client happy.

I love Dan Cederholm’s books Web Standards Solutions and Bulletproof Web Design. As a reader, I get to pick his brain and see how he analyzes web design problems and provides solutions that are attractive, practical, and accessible. He has now announced a third book—Handcrafted CSS—with that same approach using more modern techniques. From the website:

Handcrafted CSS: More Bulletproof Web Design is an attempt to share some of these details that matter most. By encouraging “progressive enrichment” to utilize advanced CSS and CSS3 properties that work in browsers today, to reevaluating past methods and best practices. This book will show how craftsmanship can be applied to flexible, bulletproof, highly efficient and adaptable interfaces that make up a solid user experience.

There’s also a video version on DVD that can either be purchased separately or bundled with the book.

I’ll be pre-ordering mine tonight.

I must admit that I felt like I had found a kindred spirit when I came across this post. For those that don’t know, Jakob Nielson is a usability expert, and those of us in the website industry would be wise to listen to him. He has written several books, and is no doubt an expert in the field, but his website has been a source of criticism for several years.

Like Ryan, the author of the post, I also was smitten by Mr Nielson’s site—the simplicity was refreshing, and still is. The markup is a little dated and it’s certainly not perfect, but it remains a shining example of what HTML was intended to be: marked up text. It contains no animation, no video, no bells and whistles, and hardly any graphics at all. It is not beautiful design; it is beautiful simplicity.

What happens when you add good design (not glamour) to simplicity? You get sites like this and this. Oh yeah.

One of the biggest stumbling blocks when building a website can be its most important feature—the content. While the designer/developer’s job is to design and program the site, the client must gather and create the content. Here are a few notes to help get started. Additionally, I’ve included how I prefer to receive content.

Write your copy first!

Ninety-nine percent of the time, most of your content will consist of text. What does that mean? Focus on your text first! Without copy for your website, you have no website.

When writing the text for your website, remember to keep it brief and to-the-point. Research show that most users read websites somewhat like newspapers—they scan for bits of information.

How to deliver? A simple Microsoft Word document will do just fine. You get extra points if you reference your photo names within its associated copy. (Note that I said reference and not include—see below.)

Photographs

If text is the star of your content, photographs play a major supporting role. Nothing dresses up a page better than a great image. Whether you take your own photographs or hire a photographer (or even hire an illustrator), it is helpful if you at least narrow down your image selection so that it won’t take hours to scour through hundreds of pictures. Name your photos something useful as well. For example, “board_members.jpg” is much more helpful than “DSC_011258.JPG” for obvious reasons.

Please also note that it is preferable to have the photos in JPEG or TIFF format and not embedded in a word processor document. If you would like to indicate placement of images within your text document, simply include the photo file name.

How to deliver? I prefer a CD or DVD with a common sense folder structure. What do I mean? Put your company history photos in a folder called “Company History” and your product photos in a folder called “Products”—that is what I mean. Also remember to name your photos something human-friendly!

Other media: video and audio

In the right applications, video and audio can be great compliments to your primary content. You must remember that, like your text, video and audio must be brief and bite-size. If you have a 20-minute video that you’re dying to get online, you should probably consider breaking it up into at least four- or five-minute chunks.

How to deliver? CD or DVD is definitely the way to go. Regarding formats, video is preferable in either MPEG, WMV, or QuickTime. Those same formats are acceptable for audio with the addition of MP3.

Databases

Personnel directories, real estate listings, and even product catalogs all are typically database-driven. Your website needs will usually tell us whether or not a database will be helpful, or you may have an existing database that needs to be included.

How to deliver? Unless your database is really complex, it is normally best to simply export your tables to either a Microsoft Excel or Microsoft Access file. If you are creating your database from scratch, we probably need to discuss how to best set up the rows and columns so that importing will be problem-free.

Use a website outline as your checklist

The first thing I do for every new site (or redesign) is create an outline of the content and structure. This serves as a road map for both myself and the client. For me, it helps in planning the interface. For the client, it serves as a checklist for content—each list item represents a page, and that page needs content. Most outlines look something like this:

1. Home
2. About Us
   1. Mission Statement
   2. Company History
   3. Staff
3. Products
   1. Super Widgets
   2. Super Duper Widgets
4. Contact Us
   1. Phone and Address
   2. Request Information

Go create some content!

See? The process is not quite so frightening if you just take the time to get organized. Remember that your content is why users will come to your site and hopefully return, so take its creation seriously. Map out your plan and stick to it!

Other resources

• http://www.alistapart.com/articles/zombiecopy